/* ============================================================================
   Scheda prodotto
   ----------------------------------------------------------------------------
   Una regola sopra tutte: ogni informazione compare una volta sola e in un
   posto solo. La versione precedente lasciava che fosse l'ordine degli hook
   di WooCommerce a decidere, e la disponibilita' usciva due volte.

   La seconda regola: il contenuto scritto anni fa dentro BeBuilder entra in
   questa pagina, e non si puo' riscrivere tutto. Quindi va contenuto con la
   forza — titoli, immagini, tabelle — perche' altrimenti e' lui a decidere
   la larghezza della pagina.
   ========================================================================= */

.rt-woo { padding-block: 0; }

/* Quaranta pixel di vuoto fra la testata e le briciole.

   Arrivano da woo-base.css, che da' a ogni pagina WooCommerce
   un'imbottitura verticale generosa: su carrello e checkout e' giusta,
   sulla scheda prodotto e' una fascia vuota fra la barra di ricerca e la
   prima cosa che si guarda. Sul telefono quella fascia e' un settimo
   della prima schermata.

   La regola di woo-base vale 0,2,0 — ".woocommerce-page .rt-woo" — quindi
   qui serve la stessa coppia, se no perde. */
@media (max-width: 860px) {
  .woocommerce-page .rt-woo,
  .woocommerce .rt-woo { padding-block-start: var(--rt-s2); }
}

/* Rete di sicurezza. I fogli di impaginazione di WooCommerce sono tolti
   in inc/woocommerce.php, ma un plugin puo' rimetterli: queste tre righe
   fanno si' che, se succede, la pagina non si rompa di nuovo. La griglia
   decide le larghezze, non i float.                                      */
.rt-sp div.images,
.rt-sp div.summary,
.rt-sp .rt-sp__media,
.rt-sp .rt-sp__acquisto {
  float: none !important;
  width: auto !important;
  clear: none !important;
}

/* ── Impaginazione ───────────────────────────────────────────────────────
   A sinistra si guarda, a destra si decide. La colonna della decisione
   accompagna lo scorrimento: su una pagina lunga il prezzo e il pulsante
   non devono mai essere "piu' su".                                         */

/*
 * Le proporzioni sono quelle della scheda originale, che erano giuste: li'
 * l'immagine prendeva poco piu' di un terzo e il riquadro d'acquisto quasi
 * due terzi. Io avevo fatto il contrario — immagine al 60%, colonna
 * d'acquisto a 432px — e il risultato era che la parte dove si decide, con
 * prezzo, otto scaglioni e consegna, stava nella colonna stretta mentre la
 * fotografia di un rotolo bianco si prendeva lo spazio buono.
 */
.rt-sp__testata {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(2rem, 5vw, 4rem);
}

/*
 * Sul telefono l'ordine del documento non va bene: la colonna di sinistra
 * contiene immagine E prove, quindi prima del prezzo e del pulsante si
 * scorrono un'immagine quadrata e quattro rassicurazioni. Chi arriva da
 * una ricerca vuole sapere quanto costa.
 *
 * display:contents scioglie la colonna di sinistra: palco, riquadro
 * d'acquisto e prove diventano tre caselle della stessa griglia e si
 * possono ordinare. Il documento resta nell'ordine giusto per chi legge
 * con uno screen reader.
 */
@media (max-width: 1000px) {
  .rt-sp__testata { grid-template-columns: 1fr; gap: var(--rt-s6); }

  .rt-sp__media { display: contents; }
  .rt-sp__palco { order: 1; }
  .rt-sp__acquisto { order: 2; }
  .rt-sp__prove { order: 3; margin-top: var(--rt-s4); }
}

/* Sul telefono si stringe tutto.

   Non e' un ritocco: a 390 pixel la scheda era alta quattordicimila
   pixel, cioe' diciassette schermate, e meta' di quell'altezza erano
   margini pensati per una pagina larga 1600. Le distanze che su un
   monitor separano le cose, su una mano le allontanano e basta: si
   scorre fra un blocco e l'altro senza vedere ne' l'uno ne' l'altro.

   Il criterio e' uno solo: dove su schermo grande c'e' uno spazio da
   24 o 32 pixel, sul telefono ne bastano 12 o 16 perche' il blocco
   accanto gia' si distingue da solo — ha un fondo, un bordo o una
   riga di titolo. */
@media (max-width: 720px) {
  .rt-sp__testata {
    gap: var(--rt-s4);
    padding-block: var(--rt-s2) var(--rt-s8);
  }
  .rt-sp__prove { margin-top: 0; }
}


.rt-sp__media { min-width: 0; }
.rt-sp__acquisto { min-width: 0; }

/*
 * A fissarsi e' l'immagine, non la colonna d'acquisto.
 *
 * Prima era il contrario, e non serviva a niente: la colonna d'acquisto
 * e' piu' alta dello schermo — titolo, pillole, prezzo, otto scaglioni,
 * consegna — e un elemento piu' alto della finestra, appiccicato in alto,
 * scorre via comunque. Intanto la colonna di sinistra, che e' corta,
 * finiva a meta' e lasciava sotto di se' mezzo schermo vuoto.
 *
 * Fissata l'immagine, il prodotto resta sotto gli occhi per tutta la
 * scelta della quantita', che e' il momento in cui serve guardarlo, e il
 * vuoto non c'e' piu' perche' quel lato non finisce mai.
 *
 * max-height e overflow: se un giorno le prove diventassero sei e la
 * colonna superasse lo schermo, senza questi la testa dell'immagine
 * resterebbe irraggiungibile.
 */
/* Oltre i 1400 le due colonne si dividono i compiti.

   A sinistra 32rem fisse: e' la larghezza alla quale lo scatto si vede
   INTERO e alla sua risoluzione nativa. Piu' larga e il browser
   ingrandisce il file e si sgrana; piu' stretta e il prodotto diventa
   una miniatura.

   A destra tutto il resto, perche' li' ci stanno quindici scaglioni e
   con lo spazio ci guadagnano: a 1600 diventano tre colonne invece di
   due, e la colonna si accorcia di quattro righe. */
@media (min-width: 1400px) {
  .rt-sp__testata { grid-template-columns: minmax(0, 32rem) minmax(0, 1fr); }
}

@media (min-width: 1001px) {
  .rt-sp__media {
    position: sticky;
    top: calc(var(--rt-altezza-header) + 1.5rem + env(safe-area-inset-top, 0px));
    max-height: calc(100vh - var(--rt-altezza-header) - 3rem);
    overflow-y: auto;
    scrollbar-width: none;
  }
  .rt-sp__media::-webkit-scrollbar { display: none; }
}

/* ── L'immagine ──────────────────────────────────────────────────────────
   Senza fondo.

   Prima il prodotto galleggiava su un piano di colore con un bagliore che
   usciva da sotto e la misura in filigrana dietro. Era bello da solo, ma
   e' un riquadro dietro al prodotto, e quello che si vende qui e' il
   prodotto. Il gradiente non e' perso: sta in --rt-grad-palco, pronto per
   un posto dove sia lui il contenuto e non la cornice.

   Resta mix-blend-mode: multiply, che adesso conta piu' di prima: gli
   scatti hanno il fondo bianco, e senza moltiplicare si vedrebbe il
   rettangolo bianco della foto stampato sul grigio della pagina. E' quello
   che fa dire "immagine senza sfondo" invece di "immagine su quadrato
   bianco".                                                               */

/* Il fondo e' lo stesso della pagina, ed e' quello che fa sparire il
   rettangolo bianco della foto.

   Per moltiplicare serve qualcosa sotto cui moltiplicare, e la pagina non
   va bene: fra l'immagine e la pagina ci sono due contesti di
   impilamento che il moltiplicato non attraversa — lo z-index della
   galleria e il position:sticky della colonna, che ne crea uno sempre,
   anche senza z-index. Il bianco della foto restava bianco, cioe' un
   quadrato stampato sul grigio.

   Il fondo e' bianco, come nella scheda originale: bianco per bianco fa
   bianco, quindi il rettangolo della foto sparisce dentro la card e resta
   solo il rotolo. E' una card come le altre della pagina, non un riquadro
   colorato intorno al prodotto. */
.rt-sp__palco {
  position: relative;
  border-radius: var(--rt-r-xl);
  background: var(--rt-superficie);
}

/* L'arrivo della prima schermata.

   Non e' decorazione: la scheda prodotto e' la prima cosa che si vede
   dopo un tocco su un risultato di ricerca, e comparire tutta insieme
   nello stesso fotogramma la fa sembrare una pagina caricata, non una
   schermata aperta. L'immagine sale di dieci pixel — viene da sotto,
   come se fosse stata posata — e la card compare in dissolvenza mezzo
   respiro dopo.

   Una volta sola, al caricamento, e non legata allo scorrimento: e' la
   prima schermata, si vede sempre, e un osservatore per due elementi
   sempre visibili e' lavoro per niente. */
@keyframes rt-sale {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rt-appare {
  from { opacity: 0; }
  to   { opacity: 1; }
}

html.rt-js .rt-sp__palco {
  animation: rt-sale 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.rt-js .rt-sp__card {
  animation: rt-appare 460ms ease 140ms both;
}

@media (prefers-reduced-motion: reduce) {
  html.rt-js .rt-sp__palco,
  html.rt-js .rt-sp__card { animation: none; }
}

/* Niente position ne' z-index qui: servivano a stare sopra l'aura, che
   non c'e' piu'. Un elemento posizionato con z-index crea un contesto di
   impilamento, e dentro quel contesto il moltiplicato dell'immagine non
   vede piu' il fondo del palco: il bianco della foto resta bianco. */
.rt-sp__palco .woocommerce-product-gallery {
  margin: 0;
  padding: 0;
}

.rt-sp__palco .woocommerce-product-gallery__wrapper {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* L'immagine riempie il palco, e si vede INTERA.

   Prima c'era un max-width di 32rem dentro una card larga il doppio, e i
   margini bianchi del file diventavano due bande da un centimetro per
   lato. Poi ho messo object-fit: cover, che le bande le toglie — ma
   tagliando, e tagliava anche il prodotto.

   La risposta e' un'altra: il palco e' quadrato come lo scatto, quindi
   l'immagine lo riempie da sola senza ritagliare niente. E la colonna
   sta a 32rem, che e' la larghezza alla quale questo file si vede alla
   sua risoluzione invece di essere ingrandito. */
.rt-sp__palco .woocommerce-product-gallery__image {
  width: 100%;
  max-width: none;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--rt-r-xl);
}

/*
 * mix-blend-mode: multiply e' la ragione per cui il prodotto sembra
 * appoggiato sul colore invece che incollato dentro un riquadro bianco.
 * Gli scatti di questi rotoli hanno fondo bianco: moltiplicando, il
 * bianco sparisce nel gradiente e restano solo il rotolo e la sua ombra.
 * E' il trucco che usano tutti gli scatti di prodotto dei riferimenti.
 *
 * Niente drop-shadow insieme: l'ombra ce l'ha gia' lo scatto, e una
 * seconda ombra moltiplicata diventa una macchia scura.
 */
.rt-sp__palco .woocommerce-product-gallery__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin-inline: auto;
  mix-blend-mode: multiply;
}

/* L'altezza che flexslider si scrive da solo.

   La galleria di WooCommerce avvolge le diapositive in un .flex-viewport
   e gli mette un'altezza IN PIXEL come attributo style, misurata al
   momento in cui parte. Se parte prima che lo scatto sia arrivato, o a
   una larghezza diversa da quella finale, quel numero resta sbagliato per
   sempre: sotto l'immagine avanzava una striscia del bianco della card.
   Un attributo style lo batte solo !important. */
.rt-sp__palco .flex-viewport { height: auto !important; }

/* La catena della galleria stringe sull'immagine, e non un pixel di piu'.

   flexslider scrive altezze in pixel sui suoi contenitori, e <a> e <img>
   sono elementi di linea: sotto a un'immagine di linea resta lo spazio
   del rigo, che e' qualche pixel di bianco che nessuno ha chiesto.
   font-size e line-height a zero lo tolgono alla radice, e display:block
   toglie il rigo del tutto. */
.rt-sp__palco .woocommerce-product-gallery,
.rt-sp__palco .woocommerce-product-gallery__wrapper,
.rt-sp__palco .woocommerce-product-gallery__image,
.rt-sp__palco .woocommerce-product-gallery__image > a {
  font-size: 0;
  line-height: 0;
}
.rt-sp__palco .woocommerce-product-gallery__image > a { display: block; }
.rt-sp__palco .woocommerce-product-gallery__image img { display: block; }

/* Sul telefono la cornice prende la proporzione dello scatto.

   Il quadrato serve sul grande, dove la colonna si fissa e scorrendo non
   deve cambiare altezza. Sul telefono non si fissa niente, e un quadrato
   intorno a una fotografia che quadrata non e' sono due bande di bianco,
   sopra e sotto. Senza proporzione imposta la casella e' alta quanto lo
   scatto, e di bande non ce ne sono a nessuna proporzione. */
@media (max-width: 1000px) {
  .rt-sp__palco .woocommerce-product-gallery__image { aspect-ratio: auto; }
  .rt-sp__palco .woocommerce-product-gallery__image img { height: auto; }
}


/* Le miniature. */
.rt-sp__palco .flex-control-thumbs {
  position: relative;
  z-index: 2;
  display: flex;
  gap: var(--rt-s2);
  margin: 0;
  padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  list-style: none;
}
/* La lista delle miniature quando di miniature non ce n'e' nessuna.

   flexslider costruisce la sua <ol class="flex-control-thumbs"> anche per
   un prodotto con una fotografia sola: resta senza figli, alta zero — e
   si porta dietro l'imbottitura che le abbiamo dato noi, ventiquattro
   pixel di bianco sotto lo scatto, dentro la card. Misurati sullo
   screenshot: una striscia da venti pixel buoni.

   :empty e non display:none sempre, perche' quando le miniature ci sono
   quell'imbottitura serve. */
.rt-sp__palco .flex-control-thumbs:empty { display: none; }

.rt-sp__palco .flex-control-thumbs li { flex: 0 0 4.5rem; }
.rt-sp__palco .flex-control-thumbs img {
  border-radius: var(--rt-r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.55;
  background: rgba(255, 255, 255, 0.7);
  transition: opacity var(--rt-transizione), border-color var(--rt-transizione);
}
.rt-sp__palco .flex-control-thumbs img.flex-active,
.rt-sp__palco .flex-control-thumbs img:hover { opacity: 1; border-color: #fff; }

/* La lente dello zoom. */
.rt-sp__palco .woocommerce-product-gallery__trigger {
  position: absolute;
  z-index: 3;
  inset-block-start: var(--rt-s5);
  inset-inline-end: var(--rt-s5);
  inset-inline-start: auto;
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  box-shadow: var(--rt-ombra-1);
  text-decoration: none;
  transition: transform var(--rt-transizione);
  font-size: 0;
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1220' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px;
}
.rt-sp__palco .woocommerce-product-gallery__trigger:hover { transform: scale(1.08); }

/* ── La striscia delle garanzie ─────────────────────────────────────────
   Mette le quattro garanzie dove l'occhio e' gia' fermo sul prodotto,
   invece che in una fascia a parte piu' in basso che nessuno raggiunge.

   Il vetro smerigliato torna, ma stavolta ha qualcosa da smerigliare.
   L'avevo tolto perche' una lastra traslucida sospesa sul grigio piatto
   della pagina non e' vetro: e' grigio. Il vetro si vede solo se dietro
   passa del colore. Quindi sotto la card corre una fascia a gradiente —
   lo stesso --rt-grad-palco che stava dietro al prodotto e che non
   volevamo li' — e la card ci galleggia sopra sfocandola.

   Due colonne, non quattro: la colonna dell'immagine e' larga 468px, e in
   un quarto di quello "Metraggio garantito" va a capo in mezzo.          */

.rt-sp__prove {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rt-s5) var(--rt-s6);
  list-style: none;
  margin: var(--rt-s5) 0 0;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border-radius: var(--rt-r-xl);
  isolation: isolate;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    var(--rt-ombra-2);
}

/* Il colore che si vede attraverso il bianco traslucido.
   Contenuto dentro la card, non sbordante: sborda appena dai lati sembra
   una sbavatura invece di una scelta, perche' il colore taglia l'angolo
   arrotondato. Qui riempie abbondantemente e ci pensa overflow:hidden a
   tagliarlo sul raggio della card.

   Si muove piano: e' quel movimento a far capire in un secondo che sopra
   c'e' uno strato e non una tinta. */
.rt-sp__prove::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -25%;
  background: var(--rt-grad-palco);
  filter: saturate(1.7);
  animation: rt-respiro 24s ease-in-out infinite alternate;
}

.rt-sp__prove li { min-width: 0; }

/* Sul telefono il riquadro di vetro era alto piu' di una schermata per
   quattro frasi di una riga e mezza. Icona piu' piccola, meno spazio fra
   le righe, meno imbottitura: le quattro rassicurazioni restano tutte e
   quattro, ma si leggono in un colpo d'occhio invece che in due. */
@media (max-width: 720px) {
  .rt-sp__prove {
    gap: var(--rt-s4);
    padding: var(--rt-s4);
    margin-top: 0;
  }
  .rt-sp__prove svg { width: 18px; height: 18px; margin-bottom: var(--rt-s2); }
  .rt-sp__prove span { line-height: 1.35; }
}

.rt-sp__prove strong {
  display: block;
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  color: var(--rt-ink);
  letter-spacing: -0.008em;
}
.rt-sp__prove span {
  display: block;
  margin-top: 3px;
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-3);
  line-height: 1.45;
}

/* L'icona sta sopra il testo, tratto sottile, come nei riferimenti. */
.rt-sp__prove svg {
  width: 22px;
  height: 22px;
  margin-bottom: var(--rt-s3);
  color: var(--rt-ink-2);
  stroke-width: 1.4;
}

/* ── La card d'acquisto ─────────────────────────────────────────────────
   Tutto quello che serve a decidere sta in UN riquadro bianco, non in
   cinque blocchi che galleggiano sul fondo. E' quello che fanno tutti i
   riferimenti, ed e' anche il motivo per cui la mia versione precedente
   sembrava un elenco invece che una scheda.                              */

/* ── La pastiglia della disponibilita' ───────────────────────────────────
   Sta sopra il nome del prodotto, ed e' la prima cosa della colonna.

   La spia pulsa: una pastiglia ferma si legge come un'etichetta
   stampata, una che respira si legge come uno stato di adesso. L'alone
   e' un secondo cerchio che si allarga e svanisce — un solo cerchio che
   cambia opacita' sembra un difetto di disegno, uno che si allarga
   sembra un segnale.                                                     */

.rt-stato {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  margin: 0 0 var(--rt-s3);
  padding: 3px var(--rt-s3) 3px var(--rt-s2);
  border-radius: var(--rt-r-pill);
  background: var(--rt-ok-tenue);
  color: var(--rt-ok);
  font-size: var(--rt-t-xs);
  line-height: 1.5;
}
.rt-stato b { font-weight: var(--rt-peso-forte); }

.rt-stato__spia {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  margin-inline-start: 3px;
  border-radius: var(--rt-r-pill);
  background: currentColor;
}
.rt-stato__spia::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  animation: rt-pulsa 2.6s ease-out infinite;
}
@keyframes rt-pulsa {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(2.8); opacity: 0; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Arancione, non rosso: "in arrivo" non e' un errore, e' un'attesa. */
.rt-stato--attesa { background: var(--rt-attenzione-tenue); color: var(--rt-attenzione); }

@media (prefers-reduced-motion: reduce) {
  .rt-stato__spia::after { animation: none; opacity: 0; }
}

.rt-sp__card {
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  background: var(--rt-superficie);
  border-radius: var(--rt-r-xl);
  box-shadow: var(--rt-ombra-2);
}

/* Ventiquattro pixel di bordo bianco per lato, su una card larga 350, sono
   un settimo della larghezza buttato: il prezzo e gli scaglioni ci stanno
   piu' larghi con sedici. Il raggio scende con l'imbottitura, se no
   l'angolo mangia il contenuto. */
@media (max-width: 720px) {
  .rt-sp__card { padding: var(--rt-s4); border-radius: var(--rt-r-lg); }
}

/* Le briciole hanno una fascia loro, a tutta larghezza, fra la
   navigazione e il prodotto. Dentro la colonna d'acquisto bastavano a
   far partire il riquadro bianco venti pixel piu' in basso
   dell'immagine, e le due colonne non cominciavano alla stessa altezza. */
.rt-sp__briciole { padding-block: var(--rt-s4) var(--rt-s2); }
.rt-sp__briciole .rt-briciole { margin: 0; }

/* Sul telefono le briciole diventano un ritorno indietro.

   Tre voci separate da barre, scritte in grigio piccolo, sono una riga
   che non si legge e che nessuno tocca: sul telefono il percorso non
   serve a sapere dove si e' — lo dice il titolo — ma a tornare da dove
   si e' arrivati. Quindi resta una voce sola, quella sopra, con la
   freccia davanti: e' il gesto che fa ogni applicazione.

   Se il prodotto non ha categoria quella voce non esiste, e la fascia
   sparisce invece di lasciare una riga vuota alta venti pixel. */
@media (max-width: 720px) {
  /* Appoggiate alla testata e staccate da niente: fra la barra e
     l'immagine c'erano venti pixel sopra e otto sotto, per una riga
     alta diciotto. Adesso sono quattro e zero. */
  .rt-sp__briciole { padding-block: var(--rt-s1) 0; }
  .rt-sp__briciole .rt-briciole > *:not(.rt-briciole__su) { display: none; }
  .rt-sp__briciole:not(:has(.rt-briciole__su)) { display: none; }

  .rt-briciole__su {
    display: inline-flex;
    align-items: center;
    gap: var(--rt-s1);
    font-size: var(--rt-t-xs);
    font-weight: var(--rt-peso-medio);
    color: var(--rt-ink-3);
  }
  .rt-briciole__su::before {
    content: "";
    width: 7px;
    height: 7px;
    border-left: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(45deg);
    margin-inline-end: 3px;
  }
}

.rt-sp__nome {
  margin: 0;
  font-size: clamp(1.75rem, 2.9vw, 2.5rem);
  font-weight: var(--rt-peso-titolo);
  letter-spacing: -0.032em;
  line-height: 1.08;
  text-wrap: balance;
}

/* Niente pastiglia dentro il titolo.
   Un riquadro in mezzo a una frase la spezza in tre pezzi, e il titolo
   si legge peggio di come e' scritto. La misura si distingue da sola:
   il carattere dei dati e il blu bastano, e la frase resta una frase. */
.rt-sp__misura {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 0.92em;
  letter-spacing: -0.03em;
  color: var(--rt-blu);
  white-space: nowrap;
}

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

/* Il titolo a 28px occupava tre righe su uno schermo da 390 — meta'
   della prima schermata per dire una cosa che il cliente ha gia' letto
   nei risultati di ricerca da cui arriva. A 24px ne occupa due, e le due
   righe si leggono uguale. */
/* Sul telefono la testa della card va al centro.

   Sulla scheda vecchia titolo, stelline e specifiche erano centrati, e
   su una colonna larga quanto lo schermo e' giusto: una colonna di testo
   allineata a sinistra dentro una card che non ha niente alla sua destra
   si legge come un blocco appoggiato storto. Al centro il blocco ha un
   asse, e l'asse e' quello dell'immagine qui sopra.

   Si ferma alla testa: prezzo, scaglioni e consegna restano a bandiera,
   perche' li' si leggono numeri in colonna e i numeri centrati non si
   confrontano. */
@media (max-width: 720px) {
  .rt-sp__nome { font-size: 1.5rem; text-align: center; }
  .rt-sp__sottotitolo { margin-top: var(--rt-s2); text-align: center; }
  /* display:flex da solo la faceva larga quanto la card: un elemento di
     blocco in una colonna si prende tutta la riga, e "Disponibile" in
     mezzo a trecento pixel di verde e' un cartello, non una pastiglia.
     Con width:fit-content torna larga quanto le sue parole, e i margini
     automatici la mettono in mezzo. */
  .rt-sp__card > .rt-stato {
    display: flex;
    width: fit-content;
    margin-inline: auto;
    padding-block: 2px;
    font-size: 0.75rem;
  }
}
.rt-sp__sottotitolo strong { color: var(--rt-ink-2); font-weight: var(--rt-peso-medio); }

/* ── Le pillole delle specifiche ───────────────────────────────────────
   Erano sulla scheda vecchia e le avevo tolte. Qui tornano, con l'icona a
   tratto sopra l'etichetta: si confermano le misure in un colpo d'occhio
   senza leggere una tabella.                                             */

.rt-sp__pillole {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s2);
  list-style: none;
  margin: var(--rt-s5) 0 0;
  padding: 0;
}
/* Strette apposta: sono quattro e devono stare su una riga sola. Quattro
   pillole su due righe non sono quattro informazioni, sono due righe di
   roba. L'etichetta si accorcia con loro, il numero no: il numero e'
   quello che si legge. */
.rt-sp__pillole li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.6875rem;
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie-2);
  font-size: var(--rt-t-xs);
  white-space: nowrap;
}
.rt-sp__pillole svg { width: 13px; height: 13px; color: var(--rt-ink-3); flex: none; }
.rt-sp__pillola-et { color: var(--rt-ink-3); }
.rt-sp__pillole strong { font-family: var(--rt-font-dati); font-variant-numeric: tabular-nums; font-size: var(--rt-t-sm); font-weight: 500; color: var(--rt-ink); }

/* Quattro pillole che a 390 pixel vanno comunque su due righe: tanto vale
   che le due righe siano basse. Niente a capo dentro la pillola, il
   numero resta leggibile, sparisce solo il bordo d'aria. */
/* Due per riga, non tre e poi una.

   Quattro pillole a larghezza libera si dispongono come capita: a 390
   pixel ne entravano tre sulla prima riga e una restava sotto, spaiata,
   e due righe disuguali si leggono come un errore di impaginazione. In
   griglia da due stanno due e due, e le quattro caselle hanno la stessa
   larghezza: si confrontano con l'occhio invece che con la lettura.

   Flex diventa grid, quindi justify-content non serve piu': le colonne
   riempiono la riga da sole. */
@media (max-width: 720px) {
  .rt-sp__pillole {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--rt-s2);
    margin-top: var(--rt-s4);
  }
  .rt-sp__pillole li {
    justify-content: center;
    padding: 0.3125rem 0.5rem;
    gap: 0.3125rem;
    font-size: 0.6875rem;
  }
  .rt-sp__pillole svg { width: 12px; height: 12px; }
  .rt-sp__pillole strong { font-size: var(--rt-t-xs); }
}

.rt-sp__voto {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  margin-top: var(--rt-s5);
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-3);
  text-decoration: none;
}
.rt-sp__voto strong { color: var(--rt-ink); font-weight: var(--rt-peso-forte); }
.rt-sp__voto:hover span { text-decoration: underline; }

/* Sul telefono: stelle e numero su una riga, la frase sotto e piu' piccola.

   Erano tutt'e tre sulla stessa riga, e a 390 pixel "43 recensioni di chi
   l'ha comprato" ci stava per un soffio: bastava un voto a due cifre o una
   lingua piu' lunga e il blocco diventava una L, con le stelle in alto a
   sinistra e il testo che scendeva a destra.

   Questo blocco sta QUI e non lassu' con gli altri del telefono: la
   regola di base scrive display:inline-flex, e scritta dopo vinceva lei.
   A parita' di specificita' conta l'ordine nel file. */
@media (max-width: 720px) {
  /* Una riga che va a capo, non una griglia.

     Con la griglia la frase lunga stava su una riga sola spanando le due
     colonne, e due colonne che devono contenere un elemento largo se lo
     spartiscono: le stelle finivano a sinistra e il 4,9 all'altro capo
     dello schermo, con mezzo dito di vuoto in mezzo. In flex le stelle e
     il numero stanno vicini al centro, e la frase va a capo da sola
     perche' le si chiede di prendersi tutta la riga. */
  .rt-sp__voto {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2px var(--rt-s2);
    margin-top: var(--rt-s4);
    text-align: center;
  }
  /* :not(.rt-stelle) non e' pignoleria: anche le stelle sono uno <span>
     figlio diretto, e con "flex: 0 0 100%" prendevano una riga tutta
     loro. Il blocco diventava tre righe invece di due. */
  .rt-sp__voto > span:not(.rt-stelle) { flex: 0 0 100%; font-size: var(--rt-t-xs); }
}

/* ── Prezzo ─────────────────────────────────────────────────────────────
   Dentro la card, su fondo tenue: non e' un riquadro dentro un riquadro,
   e' il blocco che si deve guardare per primo.                           */

/* Compatto e largo quanto il suo contenuto.
   Era un riquadro a tutta larghezza con dentro due righe corte: due terzi
   di quel blocco erano colore vuoto a destra, e in verticale spingeva giu'
   tutto il resto. Adesso si stringe su quello che contiene e sta su una
   riga sola quando ci sta. */
/* Il riquadro del prezzo.

   Tre righe fisse, sempre le stesse: occhiello e sigillo, il prezzo
   grande, il prezzo nell'altra modalita'. L'interruttore IVA cambia i
   numeri dentro le righe e non tocca le righe — che e' il motivo per cui
   il prezzo non salta piu' da una parte all'altra del riquadro.

   Il filetto blu a sinistra: lo stacca dal resto della colonna senza
   bisogno di un bordo tutto intorno, che in una colonna gia' piena di
   riquadri sarebbe il quinto. */
/* Chiaro, con un pulviscolo che entra da destra.

   Il fondo era azzurrino pieno, e dentro una colonna gia' fatta di
   riquadri chiari sembrava il solito blocco "offerta" dei temi
   commerciali. Adesso il fondo e' lo stesso grigio chiarissimo delle
   altre superfici e il carattere glielo da' una trama: punti piccoli,
   fitti sul bordo destro, che si diradano in diagonale verso il centro
   e spariscono prima di arrivare sotto il numero.

   Da destra e non dal centro perche' a sinistra ci sono il filetto blu e
   le cifre: la trama deve stare dove non si legge niente. La maschera e'
   quella che la fa dissolvere davvero, invece di fermarla con un bordo.  */
.rt-sp__prezzo {
  position: relative;
  overflow: hidden;
  margin-top: var(--rt-s5);
  padding: var(--rt-s5) var(--rt-s5) var(--rt-s5) var(--rt-s6);
  border-radius: var(--rt-r-md);
  /* Un bordo sottile tutto intorno, come il riquadro della consegna: il
     filetto blu a sinistra era l'ultimo pezzo di "blocco offerta"
     rimasto, e su un fondo grigio chiaro gridava piu' del prezzo. */
  border: 1px solid color-mix(in srgb, var(--rt-ink) 11%, var(--rt-linea));
  background: var(--rt-superficie-2);
}

/* Niente maschere, niente pulviscolo: senza la dissolvenza i punti
   coprirebbero anche il numero, ed e' peggio del fondo liscio. */
@supports (mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent)) {
  .rt-sp__prezzo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Grigi, non blu: il fondo del riquadro e' grigio, e punti azzurri su
       grigio sono una seconda tinta che non c'entra con niente. */
    color: color-mix(in srgb, var(--rt-ink) 20%, transparent);
    background-image: radial-gradient(currentColor 1.1px, transparent 1.2px);
    background-size: 11px 11px;
    -webkit-mask-image: linear-gradient(250deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.55) 24%, rgba(0, 0, 0, 0) 58%);
            mask-image: linear-gradient(250deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.55) 24%, rgba(0, 0, 0, 0) 58%);
  }
}

/* Il contenuto sopra la trama: senza, il pulviscolo passerebbe davanti
   alle cifre invece che dietro. */
.rt-sp__prezzo > * { position: relative; z-index: 1; }
/* Il riquadro gli da' una casa sua, quindi il prezzo puo' tornare
   grande: qui non compete con gli scaglioni, li introduce. */
.rt-sp__prezzo .rt-prezzo { --rt-prezzo-grande: clamp(2rem, 3.2vw, 2.75rem); }

.rt-sp__prezzo .rt-prezzo__secondario {
  margin-top: var(--rt-s3);
  padding-top: var(--rt-s3);
  border-top: 1px solid color-mix(in srgb, var(--rt-ink) 8%, transparent);
  color: var(--rt-ink-3);
}
.rt-sp__prezzo .rt-prezzo__num { color: var(--rt-ink-2); }

/* Il prezzo resta grande — e' la cosa che si guarda — ma il riquadro
   intorno si stringe: venti pixel per lato intorno a tre righe corte,
   su uno schermo da 390, sono venti pixel tolti al numero. */
@media (max-width: 720px) {
  .rt-sp__prezzo {
    margin-top: var(--rt-s4);
    padding: var(--rt-s4) var(--rt-s4) var(--rt-s4) var(--rt-s5);
  }
  .rt-sp__prezzo .rt-prezzo__secondario { margin-top: var(--rt-s2); padding-top: var(--rt-s2); }
  /* Al centro come tutto il resto della colonna sul telefono: a
     bandiera, sotto un pulsante largo quanto lo schermo, sembrava una
     riga avanzata da qualcos'altro. */
  .rt-sp__vai-listino {
    margin-top: var(--rt-s4);
    justify-content: center;
    width: 100%;
  }
}

/* ── Il collegamento al listino ────────────────────────────────────── */

.rt-sp__vai-listino {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  margin-top: var(--rt-s5);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  color: var(--rt-blu);
  text-decoration: none;
}
.rt-sp__vai-listino:hover { text-decoration: underline; text-underline-offset: 3px; }
.rt-sp__vai-listino span { transition: transform var(--rt-transizione); }
.rt-sp__vai-listino:hover span { transform: translateY(2px); }

/* ── Il selettore di quantita', il pezzo che conta ──────────────────── */

.rt-variations--nascoste {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.rt-scaglioni { margin-top: var(--rt-s6); }

.rt-scaglioni__intro {
  display: block;
  margin-bottom: var(--rt-s3);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  color: var(--rt-ink);
}

/* Due colonne: cinque scaglioni in colonna singola sono una lista da
   scorrere, in due colonne sono un confronto. */
.rt-scaglioni__griglia {
  display: grid;
  /* Due colonne, non quattro. In orizzontale ogni scaglione ha quantita'
     a sinistra e numeri a destra, e in 166px quelle due cose si
     scavalcavano: "10 rotoli" andava a capo e il prezzo unitario usciva
     su tre righe. A 15rem minime ne entrano due per riga, ciascuna larga
     abbastanza da leggersi in un colpo. */
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.375rem;
}

/*
 * Compatta davvero: due righe, non quattro.
 *
 * Prima ogni scaglione era una card da 130px con quantita', unitario,
 * totale e risparmio incolonnati. Su questo prodotto gli scaglioni sono
 * QUINDICI: facevano quattro file e quasi seicento pixel, cioe' mezza
 * schermata solo per scegliere quanti rotoli. Adesso sono due righe con i
 * numeri allineati a destra, la quantita' a sinistra, e si leggono
 * incolonnati uno sotto l'altro come un listino — che e' esattamente
 * quello che sono.
 */
.rt-scaglione {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--rt-s3);
  row-gap: 1px;
  padding: 0.5rem 0.75rem;
  background: var(--rt-superficie);
  border: 1.5px solid var(--rt-linea);
  border-radius: 12px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition:
    border-color 160ms var(--rt-ease, cubic-bezier(0.25, 0.1, 0.25, 1)),
    background 160ms ease,
    box-shadow 200ms ease,
    transform 120ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.rt-scaglione:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--rt-blu) 42%, var(--rt-linea));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11, 18, 32, 0.07);
}
.rt-scaglione:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.rt-scaglione:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-blu) 35%, transparent);
}

.rt-scaglione.is-attivo {
  border-color: var(--rt-blu);
  background: linear-gradient(160deg, var(--rt-blu-tenue), color-mix(in srgb, var(--rt-blu-tenue) 40%, var(--rt-superficie)));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-blu) 13%, transparent);
}

/* La spunta nasce dall'angolo: conferma il tocco prima che il server
   risponda, ed e' meta' della sensazione di velocita'. */
.rt-scaglione::after {
  content: "";
  position: absolute;
  inset-block-start: var(--rt-s3);
  inset-inline-end: var(--rt-s3);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--rt-blu) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 160ms ease, transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rt-scaglione.is-attivo::after { opacity: 1; transform: scale(1); }

.rt-scaglione:disabled { opacity: 0.4; cursor: not-allowed; }
.rt-scaglione:disabled::before { content: "esaurito"; font-size: var(--rt-t-xs); color: var(--rt-ink-3); }

.rt-scaglione__qta {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.012em;
  white-space: nowrap;
}
.rt-scaglione__unit { grid-column: 1; grid-row: 2; font-family: var(--rt-font-dati); font-variant-numeric: tabular-nums; font-size: var(--rt-t-xs); color: var(--rt-ink-3); white-space: nowrap; }
.rt-scaglione__tot em {
  margin-inline-start: 0.3em;
  font-style: normal;
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-normale);
  color: var(--rt-ink-3);
}
.rt-scaglione__tot {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-sm);
  color: var(--rt-ink);
  white-space: nowrap;
}
.rt-scaglione.is-attivo .rt-scaglione__tot { color: var(--rt-blu-scuro); }

.rt-scaglione .rt-risparmio {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin: 0;
}

.rt-risparmio {
  display: inline-block;
  margin-top: var(--rt-s1);
  padding: 1px var(--rt-s2);
  border-radius: var(--rt-r-pill);
  background: color-mix(in srgb, var(--rt-ok) 12%, transparent);
  color: var(--rt-ok);
  font-family: var(--rt-font);
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-forte);
}

/* "Il piu' scelto" e' un dato, non una pressione: e' lo scaglione centrale
   della scala, quello che compra la maggior parte dei clienti. */
/* L'etichetta "il piu' scelto" prende una riga sua, ma solo sulla card
   che ce l'ha: una fascia assoluta in cima costringeva TUTTE le card ad
   avere lo spazio per lei, e con quindici scaglioni sono quindici volte
   ventiquattro pixel buttati. */
.rt-scaglione__tag {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: start;
  padding: 1px 0.5rem 2px;
  border-radius: var(--rt-r-pill);
  background: var(--rt-ink);
  color: #fff;
  font-size: 0.5625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.rt-scaglione--consigliato .rt-scaglione__qta,
.rt-scaglione--consigliato .rt-scaglione__tot  { grid-row: 2; }
.rt-scaglione--consigliato .rt-scaglione__unit,
.rt-scaglione--consigliato .rt-risparmio       { grid-row: 3; }

.rt-scaglioni__prossimo {
  margin: var(--rt-s4) 0 0;
  padding: var(--rt-s3) var(--rt-s4);
  border-radius: 14px;
  background: var(--rt-superficie-2);
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-2);
  animation: rt-entra 260ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.rt-scaglioni__prossimo strong { color: var(--rt-ink); font-weight: var(--rt-peso-forte); }

@keyframes rt-entra {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* ── Carrello ───────────────────────────────────────────────────────── */

.rt-sp .woocommerce-variation-price,
.rt-sp .woocommerce-variation-description { display: none; }
/* La riga "Disponibile" che WooCommerce stampa dentro il riquadro della
   variazione non esce mai. Non e' pignoleria: la disponibilita' sta gia'
   in cima alla colonna, con la spia verde, e qui compariva a meta'
   pagina, senza contesto, incastrata fra gli scaglioni e il contatore —
   una parola sola in grigio che sembra un errore di impaginazione.
   Quando il prodotto non c'e' lo dice il pulsante, che diventa "Non
   disponibile" e si spegne. */
.rt-sp .woocommerce-variation-availability { display: none; }

/* Il modulo di WooCommerce e' un flex che allinea quantita' e pulsante
   su una riga sola: due controlli di peso diversissimo incolonnati come
   fossero pari. Qui vanno uno sotto l'altro, con il pulsante largo
   quanto la colonna.                                                     */
.rt-sp .woocommerce-variation-add-to-cart,
.rt-sp form.cart:not(.variations_form) {
  display: grid;
  gap: var(--rt-s4);
}

/* ── Il moltiplicatore ───────────────────────────────────────────────────
   Il campo quantita' di WooCommerce era nascosto con display:none, e
   quando il tema non riusciva a nasconderlo restava in pagina come un
   rettangolino alto 30px con dentro "1": nessuna etichetta, nessun
   contesto, accanto a una griglia dove si era appena scelto "2000
   rotoli". Il cliente non puo' sapere se quell'uno sono un rotolo, una
   confezione o un ordine.

   Nasconderlo meglio non era la risposta: senza quel campo non si
   possono comprare 4000 rotoli, perche' 4000 non e' uno scaglione. La
   risposta e' dirgli cosa fa. La griglia sceglie la CONFEZIONE, questo
   sceglie QUANTE, e la riga sotto scrive il conto per esteso — "2
   confezioni da 2000 = 4000 rotoli" — perche' una moltiplicazione che il
   cliente deve fare a mente e' una moltiplicazione che verifica altrove.
   ═══════════════════════════════════════════════════════════════════════ */

/* Staccato dal riquadro dello scaglione successivo: appiccicato sembrava
   una riga di quel riquadro invece di un comando nuovo. */
.rt-sp .single_variation_wrap { margin-block-start: var(--rt-s6); }

.rt-qta-blocco {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--rt-s2) var(--rt-s4);
}
.rt-qta-blocco__et {
  grid-column: 1 / -1;
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  color: var(--rt-ink);
}

.rt-sp .rt-qta-blocco .quantity {
  display: inline-flex;
  align-items: stretch;
  width: max-content;
  float: none;
  margin: 0;
  border: 1.5px solid var(--rt-linea);
  border-radius: var(--rt-r-md);
  background: var(--rt-superficie);
  overflow: hidden;
}
.rt-qta__b {
  width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rt-ink-2);
  font-family: var(--rt-font);
  font-size: var(--rt-t-lg);
  line-height: 1;
  cursor: pointer;
  transition: background var(--rt-transizione), color var(--rt-transizione);
}
.rt-qta__b:hover:not(:disabled) { background: var(--rt-superficie-2); color: var(--rt-ink); }
.rt-qta__b:disabled { opacity: 0.3; cursor: not-allowed; }
.rt-qta__b:focus-visible { outline: 2px solid var(--rt-blu); outline-offset: -2px; }

.rt-sp .rt-qta-blocco .quantity .qty {
  width: 3.5rem;
  min-height: 46px;
  padding: 0;
  border: 0;
  border-inline: 1.5px solid var(--rt-linea);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-base);
  color: var(--rt-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.rt-sp .rt-qta-blocco .quantity .qty::-webkit-outer-spin-button,
.rt-sp .rt-qta-blocco .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rt-qta__conto {
  margin: 0;
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-2);
  line-height: 1.4;
}
.rt-qta__conto b { font-family: var(--rt-font-dati); font-variant-numeric: tabular-nums; color: var(--rt-ink); font-weight: var(--rt-peso-medio); }
.rt-qta__conto[hidden] { display: none; }

/* L'avviso dello scaglione migliore. Verde, perche' e' una buona
   notizia: non "hai sbagliato", ma "c'e' di meglio e te lo diciamo". */
.rt-qta__meglio {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--rt-s2) var(--rt-s3);
  margin: 0;
  padding: var(--rt-s3) var(--rt-s4);
  border-radius: var(--rt-r-sm);
  background: var(--rt-ok-tenue);
  color: var(--rt-ink-2);
  font-size: var(--rt-t-sm);
  line-height: 1.45;
}
.rt-qta__meglio b { color: var(--rt-ink); font-weight: var(--rt-peso-forte); }
.rt-qta__meglio[hidden] { display: none; }

.rt-qta__passa {
  padding: var(--rt-s2) var(--rt-s4);
  border: 0;
  border-radius: var(--rt-r-pill);
  background: var(--rt-ok);
  color: var(--rt-superficie);
  font-family: var(--rt-font);
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-forte);
  cursor: pointer;
  transition: filter var(--rt-transizione);
}
.rt-qta__passa:hover { filter: brightness(0.92); }

/* Al centro sul telefono.

   Sul grande il blocco sta a sinistra perche' sotto di lui, allineato
   allo stesso bordo, c'e' il pulsante d'acquisto largo tutta la colonna:
   due cose che partono dallo stesso punto si leggono come una sequenza.
   Sul telefono quel bordo non c'e' piu' — la card e' larga quanto lo
   schermo — e l'etichetta con il suo selettore appoggiata a sinistra
   sembrava dimenticata li'. Al centro diventa un comando, come sui
   moduli di qualunque applicazione.

   La riga del conto e l'avviso dello scaglione migliore seguono: una
   colonna centrata con dentro due righe a bandiera non e' centrata, e'
   storta. */
@media (max-width: 720px) {
  .rt-qta-blocco {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .rt-qta__meglio { justify-content: center; }
}

@media (max-width: 420px) {
  .rt-qta-blocco { grid-template-columns: 1fr; }
}

/* ── Il pulsante d'acquisto ──────────────────────────────────────────────
   Due problemi, uno di specificita' e uno di disegno.

   SPECIFICITA'. WooCommerce mette sul pulsante le classi "button alt" e
   colora ".woocommerce button.button.alt" con il suo viola, da
   woocommerce.css — che non possiamo togliere, perche' dentro ci sono
   anche gli avvisi e i moduli. Quel selettore vale 0,4,1 e ".rt-sp
   .single_add_to_cart_button" valeva 0,2,0: perdeva. Al passaggio del
   mouse il pulsante diventava viola.

   Per questo qui i selettori sono piu' lunghi del necessario, apposta, e
   OGNI stato e' ridichiarato: riposo, hover, focus, attivo, spento. Uno
   stato lasciato fuori e' uno stato in cui torna il viola.

   DISEGNO. Era un rettangolo blu alto quanto un campo di testo, in fondo
   a una colonna gia' piena di riquadri azzurrini: si perdeva. Adesso e'
   piu' alto, con un gradiente e un'ombra del suo stesso colore. L'ombra
   colorata non ce l'ha nient'altro nella colonna, ed e' quella che lo
   stacca dal fondo.                                                      */

/* Il prezzo dentro il pulsante va a capo INTERO.

   Il testo e' "Aggiungi al carrello - 279,00 EUR +IVA": andando a capo
   da solo, lasciava "+IVA" orfano su una riga sua, e un pulsante d'acquisto
   con l'IVA appesa sotto sembra rotto. Il prezzo e la sua sigla sono una
   cosa sola e stanno dentro uno span che non si spezza: o ci stanno
   accanto alle parole, o scendono insieme. */
.rt-cta__prezzo { white-space: nowrap; }

.rt-sp .single_add_to_cart_button,
.rt-sp form.cart .single_add_to_cart_button.alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-s3);
  width: 100%;
  min-height: 62px;
  margin: 0;
  padding: var(--rt-s4) var(--rt-s6);
  border: 0;
  border-radius: var(--rt-r-md);
  background: var(--rt-grad-cta);
  color: var(--rt-superficie);
  font-family: var(--rt-font);
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-titolo);
  letter-spacing: -0.012em;
  text-shadow: 0 1px 2px rgba(11, 18, 32, 0.18);
  cursor: pointer;
  box-shadow: var(--rt-ombra-cta);
  transition: box-shadow 200ms ease, transform 140ms ease, background 200ms ease;
}

/* La freccia e' un ::after e non testo: il JavaScript riscrive il
   contenuto del pulsante con il totale a ogni scelta, e tutto quello
   che fosse markup dentro sparirebbe al primo clic.                     */
.rt-sp .single_add_to_cart_button::after,
.rt-sp form.cart .single_add_to_cart_button.alt::after {
  content: "\2192";
  font-weight: var(--rt-peso-medio);
  transition: transform var(--rt-transizione);
}

.rt-sp .single_add_to_cart_button:hover,
.rt-sp form.cart .single_add_to_cart_button.alt:hover,
.rt-sp form.cart .single_add_to_cart_button.alt:focus,
.rt-sp form.cart .single_add_to_cart_button.alt:focus-visible {
  background: var(--rt-grad-cta-su);
  color: var(--rt-superficie);
  box-shadow: var(--rt-ombra-cta-su);
  transform: translateY(-2px);
}
.rt-sp .single_add_to_cart_button:hover::after,
.rt-sp form.cart .single_add_to_cart_button.alt:hover::after { transform: translateX(3px); }

.rt-sp form.cart .single_add_to_cart_button.alt:focus-visible {
  outline: 3px solid var(--rt-blu-tenue);
  outline-offset: 2px;
}

.rt-sp .single_add_to_cart_button:active,
.rt-sp form.cart .single_add_to_cart_button.alt:active {
  background: var(--rt-grad-cta-su);
  color: var(--rt-superficie);
  transform: translateY(0) scale(0.995);
  box-shadow: var(--rt-ombra-cta);
}

.rt-sp .single_add_to_cart_button.disabled,
.rt-sp .single_add_to_cart_button:disabled,
.rt-sp form.cart .single_add_to_cart_button.alt.disabled,
.rt-sp form.cart .single_add_to_cart_button.alt:disabled,
.rt-sp form.cart .single_add_to_cart_button.alt.disabled:hover,
.rt-sp form.cart .single_add_to_cart_button.alt:disabled:hover {
  background: var(--rt-superficie-2);
  color: var(--rt-ink-3);
  text-shadow: none;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* Mentre il cassetto chiede al server: niente giravolte, solo il
   pulsante che smette di rispondere e lo dice sbiadendo un filo. */
.rt-sp .single_add_to_cart_button.e-attesa,
.rt-sp form.cart .single_add_to_cart_button.alt.e-attesa {
  opacity: 0.72;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rt-sp .single_add_to_cart_button,
  .rt-sp form.cart .single_add_to_cart_button.alt { transition: none; }
  .rt-sp .single_add_to_cart_button:hover,
  .rt-sp form.cart .single_add_to_cart_button.alt:hover { transform: none; }
}

/* ── Consegna: una volta sola ───────────────────────────────────────── */

.rt-sp__consegna {
  display: flex;
  gap: var(--rt-s4);
  align-items: flex-start;
  margin-top: var(--rt-s5);
  padding: var(--rt-s4) var(--rt-s5);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--rt-ok) 24%, var(--rt-linea));
  background: color-mix(in srgb, var(--rt-ok) 5%, var(--rt-superficie));
}
.rt-sp__consegna-i { flex: none; color: var(--rt-ok); margin-top: 2px; }
.rt-sp__consegna strong { display: block; font-size: var(--rt-t-sm); font-weight: var(--rt-peso-forte); }
.rt-sp__consegna span { display: block; margin-top: 2px; font-size: var(--rt-t-sm); color: var(--rt-ink-2); }
.rt-sp__consegna b { color: var(--rt-ink); font-weight: var(--rt-peso-forte); }

/* La soglia della spedizione gratis: si legge con la consegna, non in
   fondo alla pagina. E' la seconda domanda di chi compra, subito dopo
   "quando arriva". */
.rt-sp__consegna .rt-sp__gratis {
  margin-top: var(--rt-s2);
  padding-top: var(--rt-s2);
  border-top: 1px dashed color-mix(in srgb, var(--rt-ok) 30%, transparent);
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-2);
}
.rt-sp__consegna .rt-sp__gratis b { color: var(--rt-ok); }

/* Sul telefono: due righe, e il camion in fondo a destra.

   Erano tre blocchi incolonnati con l'icona in alto a sinistra, e quella
   colonna di quaranta pixel toglieva larghezza proprio alla prima riga,
   che e' la piu' lunga: "Ordina adesso e parte domani mattina" andava a
   capo per colpa dell'icona. Spostandola in basso a destra il testo
   prende tutta la larghezza nella parte alta, e la soglia della
   spedizione gratis sale sulla riga dell'arrivo invece di aprirne una
   terza con il suo filetto.

   Da centoquaranta pixel a ottantacinque, con le stesse parole. */
@media (max-width: 720px) {
  .rt-sp__consegna {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0 var(--rt-s3);
    margin-top: var(--rt-s4);
    padding: var(--rt-s3) var(--rt-s4);
  }
  .rt-sp__consegna > div { grid-column: 1; grid-row: 1 / span 2; }
  .rt-sp__consegna-i { grid-column: 2; grid-row: 2; margin: 0 0 2px; }
  .rt-sp__consegna-i svg { width: 22px; height: 22px; }

  .rt-sp__consegna strong { font-size: var(--rt-t-xs); line-height: 1.35; }
  .rt-sp__consegna > div > span { font-size: var(--rt-t-xs); line-height: 1.4; }

  /* Rientra nella riga dell'arrivo: niente filetto, niente riga sua. */
  .rt-sp__consegna .rt-sp__gratis {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: inherit;
  }
}

.rt-sp__esaurito {
  margin-top: var(--rt-s5);
  padding: var(--rt-s4) var(--rt-s5);
  border-radius: 16px;
  background: color-mix(in srgb, var(--rt-attenzione) 9%, var(--rt-superficie));
  font-size: var(--rt-t-sm);
}
/* ── I mezzi di pagamento ────────────────────────────────────────────
   Sotto il pulsante, dove la domanda "e come pago?" arriva davvero. In
   Italia bonifico e fattura elettronica non sono un dettaglio: sono la
   differenza fra "compro adesso" e "lo chiedo in amministrazione".     */

.rt-sp__pagamenti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s2);
  margin: var(--rt-s4) 0 0;
  padding: 0;
  list-style: none;
}
.rt-sp__pagamenti li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  border-radius: var(--rt-r-sm);
  background: var(--rt-superficie-2);
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-2);
  white-space: nowrap;
}
.rt-sp__pagamenti svg { width: 16px; height: 16px; color: var(--rt-ink-3); flex: none; }

/* Al centro, come tutto il resto della colonna sul telefono: tre
   pastiglie allineate a sinistra sotto un pulsante largo quanto lo
   schermo sembrano avanzate da qualcos'altro. */
@media (max-width: 720px) {
  .rt-sp__pagamenti { justify-content: center; }
  .rt-sp__fattura { text-align: center; }
}

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

/* Il respiro lento dei fondi sfumati: li fa sembrare luce e non stampa.
   Usato dal vetro delle prove e dalla fascia di chiusura. */
@keyframes rt-respiro {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

/* ════════════════════════════════════════════════════════════════════════
   Il listino completo
   ═══════════════════════════════════════════════════════════════════════ */

.rt-sp__listino { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--rt-superficie); }
.rt-sp__listino h2 {
  margin: 0;
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  letter-spacing: var(--rt-tracking-titolo);
}
.rt-sp__listino-sub { margin: var(--rt-s2) 0 var(--rt-s6); color: var(--rt-ink-3); }
.rt-sp__listino-nota { margin: var(--rt-s4) 0 0; font-size: var(--rt-t-sm); color: var(--rt-ink-3); }
.rt-sp__listino-nota a { color: var(--rt-blu); }

/* Una tabella puo' essere piu' larga del telefono: scorre dentro il suo
   contenitore invece di allargare la pagina. */
.rt-tabella-avvolgi {
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid var(--rt-linea);
  -webkit-overflow-scrolling: touch;
}

.rt-listino { width: 100%; border-collapse: collapse; font-size: var(--rt-t-sm); min-width: 34rem; }
.rt-listino thead th {
  padding: var(--rt-s3) var(--rt-s5);
  background: var(--rt-superficie-2);
  text-align: left;
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-medio);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-ink-3);
  white-space: nowrap;
}
.rt-listino tbody th,
.rt-listino tbody td {
  padding: var(--rt-s4) var(--rt-s5);
  border-top: 1px solid var(--rt-linea);
  text-align: left;
  font-weight: var(--rt-peso-normale);
  white-space: nowrap;
}
.rt-listino tbody th { font-weight: var(--rt-peso-medio); color: var(--rt-ink); }
.rt-listino tbody td { font-family: var(--rt-font-dati); font-variant-numeric: tabular-nums; color: var(--rt-ink-2); font-variant-numeric: tabular-nums; }
.rt-listino tbody tr:hover { background: var(--rt-superficie-2); }
.rt-listino tr.is-consigliato { background: color-mix(in srgb, var(--rt-blu) 5%, transparent); }
.rt-listino tr.is-consigliato th { color: var(--rt-blu-scuro); }
.rt-vuoto { color: var(--rt-linea); }

.rt-tag {
  display: inline-block;
  margin-inline-start: var(--rt-s2);
  padding: 1px var(--rt-s2);
  border-radius: var(--rt-r-pill);
  background: var(--rt-ink);
  color: #fff;
  font-family: var(--rt-font);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════════════
   Specifiche
   ═══════════════════════════════════════════════════════════════════════ */

.rt-sp__specifiche { padding-block: clamp(2.5rem, 5vw, 4rem); }
.rt-sp__specifiche h2 {
  margin: 0 0 var(--rt-s6);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  letter-spacing: var(--rt-tracking-titolo);
}
.rt-specdl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--rt-s1);
  margin: 0;
}
.rt-specdl > div {
  display: flex;
  flex-direction: column;
  gap: var(--rt-s1);
  padding: var(--rt-s5);
  border-radius: 14px;
  background: var(--rt-superficie);
  border: 1px solid var(--rt-linea);
  min-width: 0;
}
.rt-specdl dt {
  font-size: var(--rt-t-xs);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-ink-3);
}
.rt-specdl dd {
  margin: 0;
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-base);
  color: var(--rt-ink);
  overflow-wrap: anywhere;
}

/* ════════════════════════════════════════════════════════════════════════
   La descrizione lunga

   Questo testo e' stato impaginato dentro BeBuilder anni fa: ha titoli
   grandi quanto mezzo schermo scritti negli attributi style, immagini con
   larghezze fisse e tabelle piu' larghe della pagina. Erano loro a far
   scorrere il sito di lato. Qui niente di quel contenuto puo' decidere la
   larghezza di niente.

   Impaginata su due colonne: il titolo della sezione resta fermo a
   sinistra mentre il testo scorre a destra. Un muro di testo a tutta
   larghezza, dopo cinque sezioni disegnate, sembrerebbe la pagina di un
   altro sito.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-sp__descrizione {
  padding-block: clamp(3rem, 7vw, 6rem);
  background: var(--rt-superficie);
  border-block: 1px solid var(--rt-linea);
}

.rt-descrizione__g {
  display: grid;
  grid-template-columns: minmax(0, 0.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .rt-descrizione__g { grid-template-columns: 1fr; gap: var(--rt-s6); } }

.rt-descrizione__lato { position: sticky; top: calc(var(--rt-altezza-header) + 2rem); }
@media (max-width: 900px) { .rt-descrizione__lato { position: static; } }

.rt-descrizione__lato h2 {
  margin: var(--rt-s4) 0 0;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-titolo);
  line-height: 1.06;
}

/* Ventotto pixel di titolo su uno schermo largo 350 sono quasi sempre
   due righe, spesso tre. A ventiquattro il titolo di sezione sta su una
   riga in piu' della meta' dei casi, e una riga di titolo in meno per
   dodici sezioni e' una schermata intera di pagina in meno. */
@media (max-width: 720px) {
  .rt-descrizione__lato h2 { font-size: 1.5rem; }
}

@media (max-width: 900px) { .rt-descrizione__lato h2 br { display: none; } }

/* Le righe possono essere piu' lunghe di 68 caratteri qui: questo testo
   ha tabelle e immagini dentro, e strozzarlo a colonna di romanzo faceva
   sembrare stretta tutta la sezione. */
.rt-descrizione__corpo {
  max-width: 80ch;
  color: var(--rt-ink-2);
  font-size: var(--rt-t-base);
  line-height: var(--rt-interlinea);
  overflow-wrap: break-word;
}

/* Il primo titolo del vecchio contenuto e' sempre il nome del prodotto,
   che e' gia' scritto due volte piu' su. */
.rt-descrizione__corpo > :is(h1, h2, h3):first-child { display: none; }

.rt-descrizione__corpo :is(h1, h2, h3, h4) {
  color: var(--rt-ink);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-testa);
  line-height: 1.25;
  text-wrap: balance;
  margin-block: var(--rt-s8) var(--rt-s3);
  overflow-wrap: anywhere;
}
.rt-descrizione__corpo :is(h1, h2, h3) { font-size: var(--rt-t-xl); }
.rt-descrizione__corpo h4 { font-size: var(--rt-t-lg); }
.rt-descrizione__corpo p { margin-block: 0 var(--rt-s4); }
.rt-descrizione__corpo :is(ul, ol) { margin-block: 0 var(--rt-s4); padding-inline-start: 1.25rem; }
.rt-descrizione__corpo li { margin-block-end: var(--rt-s2); }
.rt-descrizione__corpo a { color: var(--rt-blu); }
.rt-descrizione__corpo strong { color: var(--rt-ink); font-weight: var(--rt-peso-forte); }

/* ── La formattazione scritta da Giuseppe, conservata ────────────────────
   Le schede prodotto non sono testo sciolto: hanno una struttura, scritta
   a mano negli anni dentro WordPress, e due forme ricorrenti.

   1. <h2 class="schedaprodotto"> — il titolo di capitolo, che sul sito
      vecchio e' una fascia grigia arrotondata con il testo blu al centro.
   2. <div class="info-blocks-container"> con dentro <div class="info-block">
      — la griglia delle quattro garanzie, ciascuna con il titolo in
      grassetto, un <br> e la spiegazione.

   Il tema nuovo non carica il foglio di BeTheme, quindi quelle due forme
   arrivavano qui come testo e div impilati: il capitolo diventava un
   titolo qualunque e le quattro garanzie una colonna di paragrafi senza
   confine. Non e' contenuto perso, e' formattazione persa — e questa la
   rimette, con i colori e le misure del tema invece che con quelle del
   vecchio builder.

   Scritto sulla classe e non sul tag: se domani una scheda usa un h3 al
   posto di un h2, la fascia resta.                                      */

.rt-descrizione__corpo .schedaprodotto {
  margin-block: var(--rt-s10) var(--rt-s5);
  padding: var(--rt-s4) var(--rt-s5);
  border-radius: var(--rt-r-md);
  background: var(--rt-superficie-2);
  color: var(--rt-blu);
  font-size: var(--rt-t-lg);
  font-weight: var(--rt-peso-forte);
  text-align: center;
  text-wrap: balance;
}
.rt-descrizione__corpo > .schedaprodotto:first-child { margin-block-start: 0; }

.rt-descrizione__corpo .info-blocks-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--rt-s4);
  margin-block: var(--rt-s5);
}
.rt-descrizione__corpo .info-block {
  padding: var(--rt-s5);
  border-radius: var(--rt-r-md);
  background: var(--rt-superficie-2);
  font-size: var(--rt-t-sm);
  line-height: 1.5;
  color: var(--rt-ink-2);
  text-align: center;
}
.rt-descrizione__corpo .info-block strong {
  display: block;
  margin-block-end: var(--rt-s3);
  font-size: var(--rt-t-base);
  color: var(--rt-ink);
}
/* Il <br> dopo il titolo ha gia' fatto il suo mestiere con il margine:
   lasciarlo vuol dire una riga vuota in piu' dentro ogni casella. */
.rt-descrizione__corpo .info-block strong + br { display: none; }

@media (max-width: 720px) {
  .rt-descrizione__corpo .schedaprodotto {
    margin-block: var(--rt-s8) var(--rt-s4);
    padding: var(--rt-s3) var(--rt-s4);
    font-size: var(--rt-t-base);
  }
  .rt-descrizione__corpo .info-blocks-container {
    grid-template-columns: 1fr 1fr;
    gap: var(--rt-s3);
  }
  .rt-descrizione__corpo .info-block { padding: var(--rt-s4); font-size: var(--rt-t-xs); }
  .rt-descrizione__corpo .info-block strong { font-size: var(--rt-t-sm); }
}

/* Nessuna immagine di quel contenuto puo' superare la colonna, e nessuna
   puo' diventare alta mezzo schermo: le icone decorative del vecchio sito
   erano larghe quanto la colonna e sembravano un errore di caricamento. */
.rt-descrizione__corpo :is(img, svg, video, iframe) {
  max-width: 100%;
  height: auto;
  border-radius: var(--rt-r-md);
}
/* Solo gli SVG, non le immagini.
   I disegni enormi della descrizione vecchia erano SVG senza dimensioni
   proprie, che senza un tetto si prendono tutta la colonna. Ma il tetto
   l'avevo messo anche sulle <img>, e cosi' schiacciava a riga di testo
   anche la fotografia con le quote: era quella che non si vedeva. Le
   immagini vere hanno le loro dimensioni e sanno stare al loro posto. */
.rt-descrizione__corpo p svg {
  display: inline-block;
  max-height: 1.6em;
  width: auto;
  vertical-align: -0.3em;
}

.rt-descrizione__corpo table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--rt-t-sm);
}
.rt-descrizione__corpo :is(td, th) {
  padding: var(--rt-s3);
  border: 1px solid var(--rt-linea);
  text-align: start;
}

/* ════════════════════════════════════════════════════════════════════════
   Recensioni

   Due colonne: il verdetto a sinistra, che resta fermo mentre si scorre,
   e le recensioni a destra. Il verdetto e' quello che si guarda — chi
   arriva fin qui vuole sapere in un secondo se fidarsi — e tenerlo fermo
   vuol dire che quel numero accompagna tutta la lettura.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-sp__recensioni { background: var(--rt-fondo); }
.rt-rec-sez { padding-block: clamp(3rem, 7vw, 6rem); }

.rt-rec-sez__g {
  display: grid;
  grid-template-columns: minmax(0, 0.46fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 900px) { .rt-rec-sez__g { grid-template-columns: 1fr; gap: var(--rt-s8); } }

/* ── L'elenco troncato ─────────────────────────────────────────────────
   Su una misura con quaranta recensioni questa sezione erano tre
   schermate che dicono tutte la stessa cosa. Si vedono le prime, le
   altre si aprono.

   La classe "e-pronto" la mette il JavaScript, e solo DOPO aver
   collegato il bottone. Non basta "html.rt-js": se questo file si ferma
   a meta' resterebbero tre recensioni, una sfumatura e nessun modo di
   aprirle. Il taglio e' l'ultima cosa che succede, non la prima.        */

.rt-rec-tronca.e-pronto {
  position: relative;
  max-height: 32rem;
  overflow: hidden;
}
.rt-rec-tronca.e-pronto.e-aperto { max-height: none; overflow: visible; }

/* La sfumatura dice "sotto continua" senza scriverlo: un elenco tagliato
   netto sembra un elenco finito. Il colore e' quello del fondo della
   sezione, se no si vede il bordo della sfumatura invece della sfumatura. */
.rt-rec-tronca.e-pronto::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 9rem;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--rt-fondo) 86%);
}
.rt-rec-tronca.e-pronto.e-aperto::after { content: none; }

/* Al centro delle card, non incollato a sinistra: e' un comando che vale
   per tutto l'elenco sopra, non per la prima recensione. E staccato bene
   dal riquadro "Scrivi la tua recensione" che viene dopo, se no i due
   sembrano la stessa cosa. */
.rt-rec-piu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-s2);
  margin-inline: auto;
  margin-block: var(--rt-s6) var(--rt-s12);
  padding: var(--rt-s3) var(--rt-s5);
  border: 1.5px solid var(--rt-linea);
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie);
  color: var(--rt-ink);
  font-family: var(--rt-font);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  cursor: pointer;
  transition: border-color var(--rt-transizione), background var(--rt-transizione);
}
.rt-rec-piu:hover { border-color: var(--rt-blu); color: var(--rt-blu); }
.rt-rec-piu__freccia { transition: transform var(--rt-transizione); }
.rt-rec-piu[aria-expanded="true"] .rt-rec-piu__freccia { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .rt-rec-piu, .rt-rec-piu__freccia { transition: none; }
}

/* ── Il verdetto ──────────────────────────────────────────────────── */

.rt-verdetto { position: sticky; top: calc(var(--rt-altezza-header) + 2rem); }
@media (max-width: 900px) { .rt-verdetto { position: static; } }

.rt-verdetto__media {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: var(--rt-s4) 0 var(--rt-s3);
}
.rt-verdetto__media strong {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3.5rem, 7vw, var(--rt-t-5xl));
  font-weight: var(--rt-peso-normale);
  letter-spacing: -0.045em;
  line-height: 0.9;
  color: var(--rt-ink);
}
.rt-verdetto__media em {
  font-style: normal;
  font-size: var(--rt-t-lg);
  color: var(--rt-ink-3);
}
.rt-verdetto__media--vuota strong { color: var(--rt-ink-3); }

.rt-verdetto__quante {
  margin: var(--rt-s3) 0 var(--rt-s6);
  max-width: 28rem;
  font-size: var(--rt-t-sm);
  line-height: 1.5;
  color: var(--rt-ink-2);
}

.rt-verdetto__barre { margin: 0 0 var(--rt-s6); padding: 0; list-style: none; display: grid; gap: var(--rt-s2); }
.rt-verdetto__barre li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 2rem;
  align-items: center;
  gap: var(--rt-s3);
}
.rt-verdetto__et {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-2);
  white-space: nowrap;
}
.rt-verdetto__et span { color: #F0A020; margin-inline-start: 2px; }
.rt-verdetto__pista {
  height: 8px;
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie-2);
  overflow: hidden;
}
.rt-verdetto__riempi {
  display: block;
  width: var(--rt-parte, 0%);
  height: 100%;
  border-radius: inherit;
  background: #F0A020;
}
.rt-verdetto__num {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-3);
  text-align: end;
}

.rt-verdetto__nota {
  margin: 0;
  padding-block-start: var(--rt-s5);
  border-top: 1px solid var(--rt-linea);
  max-width: 28rem;
  font-size: var(--rt-t-xs);
  line-height: 1.55;
  color: var(--rt-ink-3);
}

/* ── Le recensioni ────────────────────────────────────────────────── */

.rt-rec-elenco { margin: 0 0 var(--rt-s6); padding: 0; list-style: none; display: grid; gap: var(--rt-s4); }
.rt-rec-elenco .children { list-style: none; margin: var(--rt-s4) 0 0; padding-inline-start: var(--rt-s6); }

.rt-rec-voce__dentro {
  display: grid;
  gap: var(--rt-s3);
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border-radius: var(--rt-r-lg);
  background: var(--rt-superficie);
  box-shadow: var(--rt-ombra-1);
}

.rt-rec-voce__testa { display: flex; align-items: center; gap: var(--rt-s3); }

/* L'iniziale su un tondo colorato al posto del Gravatar: quasi nessuno
   dei nostri clienti ne ha uno, e una colonna di figurine grigie tutte
   uguali occupa spazio senza dire niente. */
.rt-rec-voce__tondo {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--rt-r-pill);
  background: hsl(var(--rt-tinta, 220) 62% 94%);
  color: hsl(var(--rt-tinta, 220) 48% 34%);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
}

.rt-rec-voce__chi { display: grid; min-width: 0; line-height: 1.3; }
.rt-rec-voce__chi b { font-size: var(--rt-t-sm); font-weight: var(--rt-peso-forte); color: var(--rt-ink); }
.rt-rec-voce__chi time { font-size: var(--rt-t-xs); color: var(--rt-ink-3); }
.rt-rec-voce__voto { margin-inline-start: auto; }

.rt-rec-voce__verificata {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--rt-r-pill);
  background: color-mix(in srgb, var(--rt-ok) 10%, transparent);
  color: var(--rt-ok);
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-medio);
}
.rt-rec-voce__verificata::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rt-ok);
  /* La spunta e' disegnata nel fondo del tondo: un carattere avrebbe
     cambiato forma su ogni sistema. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 7.2 6.1 9.4 10 4.8'/%3E%3C/svg%3E") center / 14px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 7.2 6.1 9.4 10 4.8'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.rt-rec-voce__testo { color: var(--rt-ink-2); font-size: var(--rt-t-sm); line-height: 1.6; }
.rt-rec-voce__testo p { margin: 0 0 var(--rt-s3); }
.rt-rec-voce__testo p:last-child { margin-bottom: 0; }

.rt-rec-voce__attesa {
  margin: 0;
  padding: var(--rt-s3);
  border-radius: var(--rt-r-sm);
  background: var(--rt-superficie-2);
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-2);
}

.rt-rec-pagine ul { display: flex; gap: var(--rt-s2); margin: 0 0 var(--rt-s6); padding: 0; list-style: none; }
.rt-rec-pagine :is(a, span) {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--rt-s2);
  border-radius: var(--rt-r-sm);
  background: var(--rt-superficie);
  color: var(--rt-ink-2);
  font-size: var(--rt-t-sm);
  text-decoration: none;
}
.rt-rec-pagine .current { background: var(--rt-ink); color: #FFFFFF; }

.rt-rec-sez__chiuso { margin: 0; font-size: var(--rt-t-sm); color: var(--rt-ink-3); }

/* ── Scrivere una recensione ──────────────────────────────────────── */

.rt-rec-scrivi {
  border-radius: var(--rt-r-lg);
  background: var(--rt-superficie);
  box-shadow: var(--rt-ombra-1);
  overflow: hidden;
}
.rt-rec-scrivi > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s4);
  padding: var(--rt-s5);
  cursor: pointer;
  list-style: none;
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-forte);
  color: var(--rt-ink);
}
.rt-rec-scrivi > summary::-webkit-details-marker { display: none; }

.rt-rec-scrivi__piu { position: relative; flex: none; width: 18px; height: 18px; }
.rt-rec-scrivi__piu::before,
.rt-rec-scrivi__piu::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--rt-ink-3);
  transition: transform var(--rt-transizione);
}
.rt-rec-scrivi__piu::after { transform: rotate(90deg); }
.rt-rec-scrivi[open] .rt-rec-scrivi__piu::after { transform: rotate(0deg); }

.rt-rec-scrivi #review_form { padding: 0 var(--rt-s5) var(--rt-s5); }
.rt-rec-scrivi__titolo { display: none; }
.rt-rec-scrivi .comment-reply-title { display: none; }

.rt-rec-scrivi :is(label, legend) {
  display: block;
  margin-block-end: var(--rt-s2);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  color: var(--rt-ink);
}
.rt-obbl { color: var(--rt-errore); margin-inline-start: 2px; }

.rt-rec-scrivi :is(input[type="text"], input[type="email"], textarea) {
  width: 100%;
  padding: var(--rt-s3) var(--rt-s4);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-sm);
  background: var(--rt-fondo);
  font: inherit;
  font-size: var(--rt-t-sm);
  color: var(--rt-ink);
}
.rt-rec-scrivi :is(input, textarea):focus-visible {
  outline: 2px solid var(--rt-blu);
  outline-offset: 1px;
  background: var(--rt-superficie);
}
.rt-rec-scrivi textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }
.rt-rec-scrivi :is(.comment-form-author, .comment-form-email, .comment-form-comment) { margin: 0 0 var(--rt-s4); }
.rt-rec-scrivi .form-submit { margin: 0; }
.rt-rec-scrivi .comment-form-cookies-consent { display: flex; gap: var(--rt-s2); align-items: flex-start; margin: 0 0 var(--rt-s4); }
.rt-rec-scrivi .comment-form-cookies-consent label { margin: 0; font-weight: var(--rt-peso-normale); color: var(--rt-ink-3); font-size: var(--rt-t-xs); }
.rt-rec-scrivi .comment-form-cookies-consent input { width: auto; }

@media (min-width: 560px) {
  .rt-rec-scrivi #review_form form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--rt-s4); }
  .rt-rec-scrivi :is(.rt-voto-scelta, .comment-form-comment, .form-submit, .comment-form-cookies-consent) { grid-column: 1 / -1; }
}

/* Cinque radio vere vestite da stelle. In ordine 5-4-3-2-1 nel markup,
   girate dal CSS: cosi' il selettore ~ puo' colorare la stella scelta e
   tutte quelle sotto, perche' ~ guarda avanti e non indietro. */
.rt-voto-scelta { margin: 0 0 var(--rt-s4); padding: 0; border: 0; }
.rt-voto-scelta__stelle { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.rt-voto-scelta input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rt-voto-scelta label {
  margin: 0;
  width: 34px;
  height: 34px;
  cursor: pointer;
  background: var(--rt-linea);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center / 28px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center / 28px no-repeat;
  transition: background var(--rt-transizione);
}
.rt-voto-scelta label:hover,
.rt-voto-scelta label:hover ~ label,
.rt-voto-scelta input:checked ~ label { background: #F0A020; }
.rt-voto-scelta input:focus-visible + label { outline: 2px solid var(--rt-blu); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════════════════
   Prodotti collegati
   ═══════════════════════════════════════════════════════════════════════ */

.rt-sp__approfondimento { padding-block: clamp(2.5rem, 6vw, 5rem); }
.rt-sp__approfondimento:empty { display: none; }
.rt-sp__approfondimento .related > h2,
.rt-sp__approfondimento .up-sells > h2 {
  margin: 0 0 var(--rt-s6);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-titolo);
}

/* ════════════════════════════════════════════════════════════════════════
   La barra d'acquisto che segue lo scorrimento

   A tutta larghezza, non una pastiglia al centro. La pastiglia era
   discreta, e discreta e' esattamente il difetto: su una scheda dove la
   scelta della quantita' occupa due schermate, il pulsante vero non si
   vede quasi mai, e questa barra E' il pulsante d'acquisto per la maggior
   parte della visita. Una cosa che conta cosi' tanto non si nasconde in
   un angolo.

   Porta quattro informazioni, che sono quelle che servono per decidere
   senza tornare su: cosa si sta comprando, quanto se ne sta prendendo,
   quanto costa al pezzo e quanto fa in tutto.

   Compare quando esce di vista il PREZZO, non il pulsante: il pulsante e'
   quindici scaglioni piu' in basso, e aspettarlo voleva dire far
   comparire la barra quando ormai non serviva piu'.
   ═══════════════════════════════════════════════════════════════════════ */

/* Sul telefono non si appoggia al bordo dello schermo ma alla barra di
   navigazione, che resta sempre visibile: conto, carrello e interruttore
   dell'IVA non devono sparire proprio sulla pagina dove si compra. Le due
   barre si impilano, e l'altezza della prima e' scritta in --rt-giu-h. */
.rt-fisso {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--rt-superficie) 88%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-top: 1px solid var(--rt-linea);
  box-shadow: 0 -12px 32px -20px rgba(11, 18, 32, 0.3);
  transform: translateY(110%);
  transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

/* ── Il filo luminoso sul bordo di sopra ─────────────────────────────────
   Su un monitor da ventisette pollici la barra sta in fondo, a trenta
   centimetri dal punto dove si sta guardando, e con il solo filetto grigio
   del bordo non si nota: compare e resta li' senza che nessuno la veda.

   Due strati. Il primo e' il filo, acceso e fermo, che da' alla barra un
   bordo che si vede da lontano. Il secondo e' un riflesso che lo
   attraversa ogni cinque secondi e mezzo: e' quello che cattura l'occhio,
   perche' una cosa ferma in periferia visiva non la si vede e una che si
   muove si'. Lento e corto apposta — se lampeggiasse sarebbe pubblicita'. */

.rt-fisso::before,
.rt-fisso::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  height: 2px;
  pointer-events: none;
}

.rt-fisso::before {
  inset-inline: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--rt-blu) 50%, transparent) 14%,
    var(--rt-blu-chiaro) 50%,
    color-mix(in srgb, var(--rt-blu) 50%, transparent) 86%,
    transparent 100%);
  opacity: 0;
  transition: opacity 320ms ease 220ms;
}
.rt-fisso.is-visibile::before { opacity: 1; }

.rt-fisso::after {
  inset-inline-start: 0;
  width: 24%;
  background: linear-gradient(90deg, transparent, var(--rt-superficie), transparent);
  opacity: 0;
}
.rt-fisso.is-visibile::after { animation: rt-lampo 5.5s cubic-bezier(0.45, 0, 0.2, 1) 600ms infinite; }

@keyframes rt-lampo {
  0%   { transform: translateX(-110%); opacity: 0; }
  10%  { opacity: 0.9; }
  36%  { opacity: 0.9; }
  46%  { transform: translateX(430%); opacity: 0; }
  100% { transform: translateX(430%); opacity: 0; }
}
.rt-fisso.is-visibile { transform: none; }

@media (max-width: 860px) {
  .rt-fisso { inset-block-end: var(--rt-giu-h); }
}

/* Arrivato il piede pagina, la barra si ritira: li' sotto ci sono i
   contatti e la riga legale, cioe' quello che uno cerca quando scende
   fino in fondo, e coprirli con un pulsante e' il modo piu' veloce per
   far chiudere la pagina. */
.rt-fisso.is-visibile.e-sotto-il-piede { transform: translateY(110%); }

.rt-fisso__dentro {
  display: flex;
  align-items: center;
  gap: var(--rt-s5);
  padding-block: var(--rt-s3);
  padding-block-end: calc(var(--rt-s3) + env(safe-area-inset-bottom, 0px));
}

.rt-fisso__media {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--rt-r-md);
  background: var(--rt-superficie);
  box-shadow: inset 0 0 0 1px var(--rt-linea);
  overflow: hidden;
}
.rt-fisso__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.rt-fisso__nome { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.3; }
.rt-fisso__nome b {
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  color: var(--rt-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rt-fisso__nome > span { font-size: var(--rt-t-xs); color: var(--rt-ink-3); }

/* Misura e grammatura stanno scritte sempre; la quantita' si aggiunge
   quando c'e'. Il puntino lo mette il CSS solo fra due caselle piene,
   cosi' finche' non si sceglie non resta appeso nel vuoto.              */
.rt-fisso__dett {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--rt-s2);
  min-width: 0;
}
.rt-fisso__misura { font-family: var(--rt-font-dati); font-variant-numeric: tabular-nums; color: var(--rt-ink-2); }
.rt-fisso__dett > span:not(:empty) + span:not(:empty)::before {
  content: "\00B7";
  margin-inline-end: var(--rt-s2);
  color: var(--rt-linea);
}

.rt-fisso__numeri {
  flex: none;
  display: grid;
  justify-items: end;
  padding-inline-end: var(--rt-s5);
  border-inline-end: 1px solid var(--rt-linea);
  line-height: 1.2;
}
.rt-fisso__unitario { font-size: var(--rt-t-xs); color: var(--rt-ink-3); white-space: nowrap; }
.rt-fisso__totale {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-lg);
  color: var(--rt-ink);
  white-space: nowrap;
}
.rt-fisso__totale span { font-family: var(--rt-font); font-size: var(--rt-t-xs); color: var(--rt-ink-3); }

.rt-fisso__btn { flex: none; white-space: nowrap; }

/* Sul telefono restano i due numeri e il pulsante: nome e miniatura
   sono l'unica cosa che chi sta su questa pagina sa gia' per certo. */
@media (max-width: 760px) {
  /* Piu' bassa. Era alta ottantasei pixel, e insieme alla barra di
     navigazione faceva centocinquanta: un sesto dello schermo occupato
     da due barre per tutta la visita. Dodici pixel di imbottitura invece
     di ventiquattro, e il pulsante alto quarantadue invece di
     cinquantasei: restano sessantadue. */
  .rt-fisso__dentro {
    gap: var(--rt-s3);
    padding-block: var(--rt-s2);
    padding-block-end: var(--rt-s2);
  }
  .rt-fisso__btn {
    min-height: 42px;
    padding-block: 0;
    padding-inline: var(--rt-s5);
    font-size: var(--rt-t-sm);
  }
  .rt-fisso__media,
  .rt-fisso__nome { display: none; }
  .rt-fisso__numeri {
    flex: 1 1 auto;
    justify-items: start;
    padding-inline-end: 0;
    border-inline-end: 0;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   Movimento ridotto: resta tutto, si ferma tutto.
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .rt-scaglioni__prossimo { animation: none; }
  .rt-scaglione,
  .rt-scaglione::after,
  .rt-fisso { transition: none; }
  .rt-fisso.is-visibile::after { animation: none; }
  .rt-scaglione:hover:not(:disabled),
  .rt-scaglione:active:not(:disabled) { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Anatomia del rotolo
   Il disegno quotato con le quote che sono testo vero. Due numeri decidono
   se la carta entra nella stampante e uno decide quanto costa: questa
   sezione esiste per farli vedere tutti e tre insieme, cosa che nessuno
   nel settore fa.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-sp__anatomia { padding-block: clamp(3rem, 7vw, 6rem); }

.rt-anat__g {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 980px) { .rt-anat__g { grid-template-columns: 1fr; } }

.rt-anat__testo h2 {
  margin: var(--rt-s4) 0 0;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.032em;
  line-height: 1.1;
}

/* Ventotto pixel di titolo su uno schermo largo 350 sono quasi sempre
   due righe, spesso tre. A ventiquattro il titolo di sezione sta su una
   riga in piu' della meta' dei casi, e una riga di titolo in meno per
   dodici sezioni e' una schermata intera di pagina in meno. */
@media (max-width: 720px) {
  .rt-anat__testo h2 { font-size: 1.5rem; }
}

.rt-anat__testo > p {
  margin: var(--rt-s5) 0 0;
  max-width: 42ch;
  color: var(--rt-ink-2);
  line-height: var(--rt-interlinea);
}

/* La lista numerata dei riferimenti: numero nel tondo, filetto sottile. */
.rt-anat__note { list-style: none; margin: var(--rt-s8) 0 0; padding: 0; }
.rt-anat__note li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 2px var(--rt-s4);
  padding-block: var(--rt-s4);
  border-top: 1px solid var(--rt-linea);
}
.rt-anat__note li:last-child { border-bottom: 1px solid var(--rt-linea); }
.rt-anat__n {
  grid-row: 1 / 3;
  display: grid;
  place-content: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: var(--rt-superficie);
  box-shadow: var(--rt-ombra-1);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-3);
}
.rt-anat__note strong { font-size: var(--rt-t-base); font-weight: var(--rt-peso-forte); letter-spacing: -0.012em; }
.rt-anat__note span:not(.rt-anat__n) { font-size: var(--rt-t-sm); color: var(--rt-ink-3); line-height: 1.5; }

/* ── Il disegno ──────────────────────────────────────────────────────── */

.rt-anat__disegno {
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: var(--rt-r-xl);
  background:
    radial-gradient(60% 60% at 70% 20%, color-mix(in srgb, var(--rt-blu) 7%, transparent), transparent 70%),
    var(--rt-superficie);
  box-shadow: var(--rt-ombra-2);
}

.rt-anatomia { display: block; width: 100%; height: auto; color: var(--rt-blu); }

.rt-an-bordo { fill: none; stroke: #C3CEE2; stroke-width: 2; }
.rt-an-spira { fill: none; stroke: #DCE3EF; stroke-width: 1.5; }

/* I filetti di quota sono sottili e di un colore che non compete col
   prodotto: devono leggersi, non farsi guardare. */
.rt-an-filo   { fill: none; stroke: #AFBDD4; stroke-width: 1; stroke-dasharray: 3 4; }
.rt-an-misura { fill: none; stroke: currentColor; stroke-width: 1.5; }
.rt-an-punto  { fill: currentColor; }

.rt-an-val {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  fill: var(--rt-ink);
  letter-spacing: -0.02em;
}
.rt-an-et {
  font-family: var(--rt-font);
  font-size: 12px;
  fill: var(--rt-ink-3);
  letter-spacing: 0.02em;
}

/* Il disegno ci sta tutto, e non si scorre.

   Scorreva perche' le quote, scritte in unita' del viewBox (900 di
   larghezza), rimpicciolite a 322 pixel di schermo uscivano a quattro
   pixel: illeggibili. La risposta non era allargare il disegno
   costringendo a trascinarlo — un disegno che si trascina lo guarda
   una persona su dieci, e le altre nove credono che la parte tagliata
   non esista. La risposta e' scrivere le quote PIU' GRANDI nel disegno:
   a trentadue unita' su 900, rimpicciolite, tornano a undici pixel
   veri.

   Cosi' il disegno sta intero in un colpo d'occhio, e la riga "scorri
   il disegno" e' sparita dal documento perche' non c'e' piu' niente da
   scorrere. */
@media (max-width: 720px) {
  .rt-anat__disegno { padding: var(--rt-s3); }
  .rt-anatomia { min-width: 0; width: 100%; }
  .rt-an-val { font-size: 32px; letter-spacing: -0.03em; }
  .rt-an-et  { font-size: 24px; letter-spacing: 0; }
  .rt-an-misura { stroke-width: 2.6; }
  .rt-an-punto { r: 5; }
}

/* ════════════════════════════════════════════════════════════════════════
   Listino: le quattro colonne della scheda vecchia
   Netto e lordo affiancati, perche' chi compra con partita IVA ragiona in
   netto e il privato in lordo, e farli cambiare vista per confrontare e'
   un attrito inutile. L'interruttore IVA della testata decide solo quale
   delle due colonne e' in evidenza.
   ═══════════════════════════════════════════════════════════════════════ */

/* Due righe di testata, due pesi.
   Scritte tutte uguali, "Al rotolo" e "IVA esclusa" sembravano due
   informazioni dello stesso livello incolonnate a caso. Sopra sta DI COSA
   si parla, scuro e in evidenza; sotto COME si misura, piccolo e chiaro.
   Il filetto verticale tiene insieme le due colonne di ogni gruppo. */
/* La riga di sopra NON e' maiuscoletto: e' il titolo del gruppo e si
   legge come una parola, non come un'etichetta. Il maiuscoletto piccolo
   resta a quella di sotto, che e' l'etichetta della colonna. Due ruoli
   diversi scritti nello stesso modo erano la ragione per cui la testata
   sembrava un blocco di parole incolonnate a caso. */
.rt-listino thead .rt-listino__gruppi th {
  padding-bottom: var(--rt-s1);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--rt-ink);
}
.rt-listino thead .rt-listino__gruppi th[rowspan] {
  font-size: 0.6875rem;
  font-weight: var(--rt-peso-medio);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-ink-3);
  vertical-align: bottom;
  padding-bottom: var(--rt-s3);
}
.rt-listino__gruppo {
  text-align: center !important;
  border-inline-start: 1px solid var(--rt-linea);
}

.rt-listino thead .rt-listino__sotto th {
  padding-top: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--rt-ink-3);
  font-weight: var(--rt-peso-normale);
  text-transform: none;
}
/* La prima colonna di ogni gruppo porta il filetto anche sotto, cosi' il
   gruppo si legge come un blocco e non come quattro colonne sciolte. */
.rt-listino__sotto th:nth-child(1),
.rt-listino__sotto th:nth-child(3) { border-inline-start: 1px solid var(--rt-linea); }
.rt-listino tbody td:nth-child(2),
.rt-listino tbody td:nth-child(4) { border-inline-start: 1px solid var(--rt-linea); }
.rt-listino__lordo { color: var(--rt-ink-3); }

html[data-iva="lordo"] .rt-listino td:not(.rt-listino__lordo) { color: var(--rt-ink-3); }
html[data-iva="lordo"] .rt-listino .rt-listino__lordo { color: var(--rt-ink); }

/* ── Sul telefono la tabella non e' piu' una tabella ─────────────────────
   Sei colonne in trecentocinquanta pixel non entrano, e finora la
   soluzione era lasciarla scorrere di lato con una riga che lo diceva.
   Ma una tabella che scorre la scorre una persona su dieci: le altre
   nove vedono la prima colonna, credono che sia tutto, e il confronto
   fra netto e lordo — che e' il motivo per cui questa tabella esiste —
   non lo fa nessuno.

   Quindi ogni riga diventa una scheda: la quantita' come titolo, e sotto
   le quattro cifre ciascuna con la sua etichetta, che arriva
   dall'attributo data-et scritto nel modello. Niente scorrimento, niente
   avviso da leggere, e tutte le cifre sotto gli occhi.

   Le etichette sono nell'attributo e non nel documento visibile perche'
   sul grande le dice gia' la testata della tabella, e ripeterle sarebbe
   sei volte la stessa parola in ogni riga.                              */

@media (max-width: 720px) {

  /* Il contenitore non e' piu' una finestra su qualcosa di piu' largo. */
  .rt-tabella-avvolgi { overflow: visible; border: 0; border-radius: 0; }

  .rt-listino { display: block; min-width: 0; }
  .rt-listino thead { display: none; }
  .rt-listino tbody { display: grid; gap: var(--rt-s3); }

  /* La forma del listino che c'e' gia' online, che e' quella giusta.

     La griglia da due colonne era piu' corta ma piu' fitta: quattro
     etichette minuscole e quattro cifre in un quadrato di centoquaranta
     pixel si leggono male. La fascia blu con la quantita' e le righe
     "etichetta a sinistra, cifra a destra" sono il listino che i clienti
     di questo sito conoscono gia': si scorre con l'occhio sulla colonna
     delle cifre, che e' l'unico gesto che serve.

     Il risparmio resta, ma piccolo e al centro in fondo: e' la
     conclusione della scheda, non una quinta riga di dati. */
  .rt-listino tbody tr {
    display: block;
    margin-block-end: var(--rt-s5);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .rt-listino tbody tr:last-child { margin-block-end: 0; }
  .rt-listino tbody tr.is-consigliato { background: transparent; }

  .rt-listino tbody th {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rt-s2);
    padding: var(--rt-s3) var(--rt-s4);
    border: 0;
    border-radius: var(--rt-r-sm);
    background: var(--rt-blu);
    color: #fff;
    font-size: var(--rt-t-base);
    font-weight: var(--rt-peso-forte);
    text-align: center;
  }
  /* Nella fascia blu la pastiglia nera non si legge: diventa chiara. */
  .rt-listino tbody th .rt-tag {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
  }
  .rt-listino tbody tr.is-consigliato th { background: var(--rt-blu-scuro); color: #fff; }

  .rt-listino tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rt-s4);
    padding: var(--rt-s3) var(--rt-s2);
    border: 0;
    border-block-end: 1px solid var(--rt-linea);
    font-family: var(--rt-font-dati);
    font-variant-numeric: tabular-nums;
    font-size: var(--rt-t-base);
    color: var(--rt-ink);
    text-align: end;
  }
  .rt-listino tbody td::before {
    content: attr(data-et);
    font-family: var(--rt-font);
    font-variant-numeric: normal;
    font-size: var(--rt-t-sm);
    font-weight: var(--rt-peso-medio);
    color: var(--rt-ink-2);
    text-align: start;
  }

  .rt-listino tbody td:nth-child(2),
  .rt-listino tbody td:nth-child(4) { border-inline-start: 0; }

  .rt-listino tbody tr:hover,
  .rt-listino tbody tr.is-consigliato:hover { background: transparent; }

  /* Il risparmio: in fondo, al centro, piccolo. Senza etichetta, perche'
     la pastiglia verde dice gia' da sola che cos'e'. */
  .rt-listino tbody td:last-child {
    justify-content: center;
    padding-block: var(--rt-s3) 0;
    border-block-end: 0;
  }
  .rt-listino tbody td:last-child::before { display: none; }
  .rt-listino tbody td:last-child .rt-vuoto { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Le risposte
   ═══════════════════════════════════════════════════════════════════════ */

.rt-sp__risposte { padding-block: clamp(2.5rem, 6vw, 5rem); }
.rt-contenitore--stretto { max-width: 52rem; margin-inline: auto; }

.rt-sp__risposte h2 {
  margin: var(--rt-s4) 0 var(--rt-s8);
  font-size: clamp(1.625rem, 3.2vw, 2.375rem);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.032em;
}

.rt-fisarmonica {
  background: var(--rt-superficie);
  border-radius: var(--rt-r-xl);
  box-shadow: var(--rt-ombra-2);
  overflow: hidden;
}
.rt-fisarmonica details + details { border-top: 1px solid var(--rt-linea); }

.rt-fisarmonica summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s4);
  padding: var(--rt-s5) clamp(1.25rem, 3vw, 2rem);
  cursor: pointer;
  list-style: none;
  font-size: var(--rt-t-lg);
  font-weight: var(--rt-peso-medio);
  letter-spacing: -0.018em;
  color: var(--rt-ink);
  transition: color var(--rt-transizione);
}
.rt-fisarmonica summary::-webkit-details-marker { display: none; }
.rt-fisarmonica summary:hover { color: var(--rt-blu); }

/* Il segno piu' che diventa meno: ruota, non sparisce. */
.rt-fisarmonica summary span {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
}
.rt-fisarmonica summary span::before,
.rt-fisarmonica summary span::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 13px; height: 1.8px;
  border-radius: 2px;
  background: var(--rt-ink-3);
  transform: translate(-50%, -50%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-fisarmonica summary span::after { transform: translate(-50%, -50%) rotate(90deg); }
.rt-fisarmonica details[open] summary span::after { transform: translate(-50%, -50%) rotate(0deg); }

.rt-fisarmonica details > div {
  padding: 0 clamp(1.25rem, 3vw, 2rem) var(--rt-s6);
  max-width: 62ch;
}
.rt-fisarmonica p { margin: 0; color: var(--rt-ink-2); line-height: var(--rt-interlinea); }
.rt-fisarmonica a { color: var(--rt-blu); }

/* ════════════════════════════════════════════════════════════════════════
   La chiusura
   Una fascia a colore pieno con angoli larghi, come nei riferimenti: e'
   l'unico punto della pagina dove il colore occupa tutto, e per questo
   funziona.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-sp__chiusura { padding-block: clamp(2rem, 5vw, 4rem) clamp(3rem, 7vw, 6rem); }

.rt-chiusura__blocco {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--rt-r-2xl);
  text-align: center;
  color: var(--rt-ink);
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(255, 255, 255, 0.85), transparent 60%),
    var(--rt-grad-aurora);
}
.rt-chiusura__blocco::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 120%;
  pointer-events: none;
  background: radial-gradient(34% 44% at 78% 76%, rgba(26, 91, 255, 0.22), transparent 70%);
  filter: blur(28px);
  animation: rt-respiro 32s ease-in-out infinite alternate;
}
.rt-chiusura__blocco > * { position: relative; z-index: 1; }

.rt-chiusura__marchio {
  display: grid;
  place-content: center;
  width: 60px; height: 60px;
  margin: 0 auto var(--rt-s6);
  border-radius: 18px;
  background: var(--rt-ink);
  color: #fff;
  box-shadow: var(--rt-ombra-3);
}
.rt-chiusura__marchio svg { width: 28px; height: 28px; stroke-width: 1.5; }

.rt-sp__chiusura h2 {
  margin: 0;
  font-size: clamp(1.75rem, 4.2vw, 3rem);
  font-weight: var(--rt-peso-titolo);
  letter-spacing: -0.034em;
  line-height: 1.08;
  text-wrap: balance;
}

/* Ventotto pixel di titolo su uno schermo largo 350 sono quasi sempre
   due righe, spesso tre. A ventiquattro il titolo di sezione sta su una
   riga in piu' della meta' dei casi, e una riga di titolo in meno per
   dodici sezioni e' una schermata intera di pagina in meno. */
@media (max-width: 720px) {
  .rt-sp__chiusura h2 { font-size: 1.625rem; }
}

.rt-sp__chiusura p {
  margin: var(--rt-s5) auto 0;
  max-width: 54ch;
  color: var(--rt-ink-2);
  font-size: var(--rt-t-lg);
  line-height: 1.5;
}

.rt-chiusura__azioni {
  display: flex;
  justify-content: center;
  gap: var(--rt-s3);
  flex-wrap: wrap;
  margin-top: var(--rt-s8);
}

/* I due pulsanti dei riferimenti: pillola quasi nera con la freccia, e
   pillola chiara per il secondario. */
.rt-btn--scuro,
.rt-btn--chiaro {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s3);
  padding: var(--rt-s4) var(--rt-s6);
  border: 0;
  border-radius: var(--rt-r-pill);
  font-family: var(--rt-font);
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.008em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--rt-transizione), box-shadow var(--rt-transizione), background var(--rt-transizione);
}
.rt-btn--scuro {
  background: var(--rt-ink);
  color: #fff;
  box-shadow: 0 6px 20px rgba(11, 18, 32, 0.22);
}
/* Il fondo e' ridichiarato: ".rt-btn:hover" in components.css lo porta
   a blu, e senza questa riga la pillola "quasi nera" diventava blu al
   passaggio del mouse. Vale per il <button> come per l'<a>.             */
.rt-btn--scuro:hover,
.rt-btn--scuro:focus,
.rt-btn--scuro:focus-visible,
.rt-btn--scuro:active {
  background: var(--rt-ink-2);
  color: var(--rt-superficie);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(11, 18, 32, 0.28);
}
.rt-btn--scuro span { transition: transform var(--rt-transizione); }
.rt-btn--scuro:hover span { transform: translate(2px, -2px); }

.rt-btn--chiaro {
  background: rgba(255, 255, 255, 0.78);
  color: var(--rt-ink);
  backdrop-filter: blur(10px);
}
/* Stesso motivo del pulsante scuro: adesso questo e' un <a> (mailto), e
   senza il colore scritto qui "a:hover" lo porterebbe a blu su bianco.  */
.rt-btn--chiaro:hover,
.rt-btn--chiaro:focus,
.rt-btn--chiaro:focus-visible,
.rt-btn--chiaro:active {
  background: var(--rt-superficie);
  color: var(--rt-ink);
  transform: translateY(-2px);
}


@media (prefers-reduced-motion: reduce) {
  .rt-chiusura__blocco::after { animation: none; }
  .rt-btn--scuro, .rt-btn--chiaro, .rt-fisarmonica summary span::before,
  .rt-fisarmonica summary span::after { transition: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Bento: perche' i nostri

   E' il pezzo che deve dare l'effetto. Cinque card su una griglia a
   dodici colonne, ciascuna con un fondo a gradiente e un oggetto che ci
   galleggia sopra sbordando: la composizione dei riferimenti.

   Tre scelte che la fanno funzionare, e che tolte una per volta la
   fanno sembrare un tema gratuito:

   1. Gli oggetti escono dalla card. Un disegno contenuto dentro i suoi
      margini e' un'illustrazione; un disegno tagliato dal bordo e' un
      oggetto che sta dietro una finestra, e la card acquista profondita'
      senza una sola ombra in piu'.
   2. Il testo sta in fondo, non in cima. L'occhio entra dall'oggetto in
      alto e scende sulle parole: e' l'ordine in cui vanno letti.
   3. I gradienti sono radiali e tutti con il centro fuori dalla card.
      Un gradiente lineare su cinque card e' una bandiera; uno radiale
      con la luce che viene da fuori e' una superficie illuminata.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-sp__bento { padding-block: clamp(3.5rem, 8vw, 7rem); }

.rt-bento__intro { max-width: 46rem; margin-block-end: clamp(2rem, 4vw, 3.25rem); }

.rt-bento__intro h2 {
  margin: var(--rt-s4) 0 var(--rt-s4);
  font-size: clamp(2rem, 5vw, var(--rt-t-4xl));
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-titolo);
  line-height: 1.04;
  text-wrap: balance;
}

/* Ventotto pixel di titolo su uno schermo largo 350 sono quasi sempre
   due righe, spesso tre. A ventiquattro il titolo di sezione sta su una
   riga in piu' della meta' dei casi, e una riga di titolo in meno per
   dodici sezioni e' una schermata intera di pagina in meno. */
@media (max-width: 720px) {
  .rt-bento__intro h2 { font-size: 1.625rem; margin-block: var(--rt-s3); }
}

.rt-bento__intro p {
  margin: 0;
  max-width: 40rem;
  font-size: var(--rt-t-lg);
  line-height: 1.5;
  color: var(--rt-ink-2);
}

.rt-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.3vw, 1.125rem);
}

.rt-bento__c {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-column: span var(--rt-span, 4);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(300px, 30vw, 390px);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  border-radius: var(--rt-r-xl);
  color: #FFFFFF;
  box-shadow: var(--rt-ombra-2);
}

/* Una velatura chiara in alto a sinistra: e' il riflesso della luce
   sulla superficie, ed e' la differenza fra un fondo colorato e un
   oggetto fotografato. Sta sotto a tutto, zero interferenze col testo. */
.rt-bento__c::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 55% at 50% 118%, rgba(0, 0, 0, 0.26), transparent 70%);
  pointer-events: none;
}

.rt-bento__c--notte  { background: var(--rt-grad-notte); }
.rt-bento__c--verde  { background: var(--rt-grad-verde); }
.rt-bento__c--blu    { background: var(--rt-grad-blu); }
.rt-bento__c--viola  { background: var(--rt-grad-viola); }
.rt-bento__c--sabbia { background: var(--rt-grad-sabbia); color: var(--rt-ink); }
.rt-bento__c--sabbia { box-shadow: inset 0 0 0 1px var(--rt-linea), var(--rt-ombra-2); }

.rt-bento__testo { position: relative; z-index: 2; }

.rt-bento__testo h3 {
  margin: 0 0 var(--rt-s3);
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.024em;
  line-height: 1.14;
  text-wrap: balance;
}
/* Il :not() non e' un vezzo: senza, questa regola batte .rt-bento__cifra
   per specificita' e il numero grande esce della misura del testo. */
.rt-bento__testo > p:not(.rt-bento__cifra) {
  margin: 0;
  max-width: 32rem;
  font-size: var(--rt-t-sm);
  line-height: 1.52;
  color: rgba(255, 255, 255, 0.78);
}
.rt-bento__c--sabbia .rt-bento__testo > p:not(.rt-bento__cifra) { color: var(--rt-ink-2); }
.rt-bento__testo > p b { color: inherit; font-weight: var(--rt-peso-forte); }

/* La cifra: e' quello che si legge da lontano, e per questo e' l'unica
   cosa della card che usa il carattere dei dati. */
.rt-bento__cifra {
  margin: 0 0 var(--rt-s3);
  display: flex;
  align-items: baseline;
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.75rem, 5vw, 4rem);
  font-weight: var(--rt-peso-normale);
  letter-spacing: -0.04em;
  line-height: 0.92;
}
.rt-bento__cifra em {
  margin-inline-start: 0.4rem;
  font-family: var(--rt-font);
  font-style: normal;
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.64);
}
.rt-bento__c--sabbia .rt-bento__cifra em { color: var(--rt-ink-3); }
.rt-bento__cifra--piccola { font-size: clamp(2rem, 3.4vw, 2.75rem); }

.rt-bento__c:has(.rt-tondo) .rt-bento__testo { padding-inline-end: 3.5rem; }

.rt-bento__link {
  display: inline-block;
  margin-block-start: var(--rt-s4);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  color: #FFFFFF;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-block-end: 2px;
}

/* ── Gli oggetti ─────────────────────────────────────────────────────
   Posizionati in alto, grandi, con un pezzo fuori dalla card. L'alone
   dietro non e' decorazione: senza, il disegno in currentColor bianco
   sparisce sul punto piu' chiaro del gradiente.                        */

.rt-bento__oggetto {
  position: absolute;
  z-index: 1;
  display: block;
  color: #FFFFFF;
  pointer-events: none;
}
.rt-bento__oggetto::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 68%);
}
.rt-bento__oggetto .rt-oggetto { display: block; width: 100%; height: auto; }

.rt-bento__oggetto--a { inset-block-start: -6%;  inset-inline-end: 0;     width: clamp(180px, 22vw, 290px); }
.rt-bento__oggetto--b { inset-block-start: -6%;  inset-inline-end: -2%;  width: clamp(160px, 18vw, 235px); }
.rt-bento__oggetto--c { inset-block-start: -5%;  inset-inline-end: -2%;  width: clamp(140px, 16vw, 200px); color: var(--rt-ink); opacity: 0.55; }
.rt-bento__oggetto--d { inset-block-start: -4%;  inset-inline-end: -8%;  width: clamp(160px, 18vw, 235px); }
.rt-bento__oggetto--e { inset-block-start: -4%;  inset-inline-end: 2%;   width: clamp(130px, 15vw, 185px); }

.rt-bento__c--sabbia .rt-bento__oggetto::before {
  background: radial-gradient(circle, rgba(26, 91, 255, 0.1), transparent 68%);
}

/* L'oggetto si muove appena quando il mouse e' sulla card: e' il
   movimento minimo che fa capire che la card e' un oggetto e non
   un'immagine. Due gradi di rotazione, non di piu'. */
.rt-bento__c .rt-bento__oggetto {
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-bento__c:hover .rt-bento__oggetto { transform: translate3d(-6px, 6px, 0) rotate(-2deg); }

/* ── Il bottone tondo con la freccia ─────────────────────────────── */

.rt-tondo {
  position: absolute;
  z-index: 3;
  inset-block-end: clamp(1.25rem, 2.2vw, 1.75rem);
  inset-inline-end: clamp(1.25rem, 2.2vw, 1.75rem);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--rt-r-pill);
  background: var(--rt-ink);
  color: #FFFFFF;
  font-size: var(--rt-t-lg);
  line-height: 1;
  text-decoration: none;
  transition: transform var(--rt-transizione), background var(--rt-transizione);
}
.rt-tondo--chiaro { background: #FFFFFF; color: var(--rt-ink); }
.rt-tondo span { display: block; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1); }
.rt-tondo:hover span { transform: translate(2px, -2px); }
.rt-tondo:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ── La griglia si semplifica scendendo ─────────────────────────── */

@media (max-width: 1080px) {
  .rt-bento__c { --rt-span: 6 !important; min-height: 320px; }
}
@media (max-width: 680px) {
  .rt-bento__c { --rt-span: 12 !important; min-height: 0; padding-block-start: clamp(9rem, 44vw, 12rem); }
  .rt-bento__oggetto--a,
  .rt-bento__oggetto--b,
  .rt-bento__oggetto--c,
  .rt-bento__oggetto--d,
  .rt-bento__oggetto--e { width: clamp(150px, 42vw, 210px); inset-block-start: -6%; inset-inline-end: -6%; }
  .rt-bento__intro h2 br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rt-bento__c .rt-bento__oggetto,
  .rt-tondo,
  .rt-tondo span { transition: none; }
  .rt-bento__c:hover .rt-bento__oggetto { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Si scorre di lato: dirlo

   Due cose di questa pagina sono piu' larghe di un telefono e non possono
   restringersi senza diventare illeggibili: il listino, che ha sette
   colonne, e il disegno quotato, le cui quote a 350px sarebbero alte
   quattro pixel. Tutte e due scorrono di lato. Ma uno scorrimento che non
   si vede non esiste: il cliente vede due colonne su sette e crede che
   siano tutte.

   Scritto a parole e non con un'ombra ai bordi. L'ombra l'ho provata, nei
   due modi che si usano: le quattro sfumature local+scroll spariscono
   sotto le righe della tabella, che hanno un fondo pieno, e sul disegno
   restano cosi' tenui da non dire niente. Una frase si legge, si traduce,
   e la legge anche chi usa lo schermo letto ad alta voce.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-scorri-nota {
  display: none;
  align-items: center;
  gap: 0.4rem;
  margin: var(--rt-s3) 0 0;
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-3);
}
/* La freccia e' un disegno nel fondo e non un carattere: la freccia
   tipografica cambia forma, peso e allineamento su ogni sistema, e meta'
   delle volte diventa un emoji colorato. */
.rt-scorri-nota::after {
  content: "";
  width: 22px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M1 6h19m-4.5-4.5L20 6l-4.5 4.5'/%3E%3C/svg%3E") center / 22px 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M1 6h19m-4.5-4.5L20 6l-4.5 4.5'/%3E%3C/svg%3E") center / 22px 12px no-repeat;
  /* Si muove appena, avanti e indietro: e' il gesto che chiede. */
  animation: rt-indica 2.4s ease-in-out infinite;
}

@keyframes rt-indica {
  0%, 60%, 100% { transform: translateX(0); }
  30%           { transform: translateX(4px); }
}

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

@media (max-width: 760px) {
  .rt-scorri-nota { display: flex; }
}

/* ════════════════════════════════════════════════════════════════════════
   La misura, per chi la cerca

   Non e' una sezione di riempimento SEO: ogni frase porta un numero di
   QUESTO prodotto, quindi due schede non hanno mai lo stesso testo. Un
   paragrafo copiato su duecento schede e' contenuto duplicato e fa danno;
   duecento paragrafi con duecento numeri diversi sono duecento pagine
   utili.

   Sul fondo c'e' l'aurora, lo stesso gradiente della fascia di chiusura.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-sp__misura-seo {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 6rem);
  background: var(--rt-superficie);
  border-block: 1px solid var(--rt-linea);
}
.rt-sp__misura-seo::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 160%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background: var(--rt-grad-aurora);
  filter: blur(60px);
  animation: rt-respiro 36s ease-in-out infinite alternate;
}
.rt-sp__misura-seo > * { position: relative; z-index: 1; }

.rt-misura-seo__g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .rt-misura-seo__g { grid-template-columns: 1fr; } }

.rt-misura-seo__testo h2 {
  margin: var(--rt-s4) 0 var(--rt-s5);
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-titolo);
  line-height: 1.06;
}

/* Ventotto pixel di titolo su uno schermo largo 350 sono quasi sempre
   due righe, spesso tre. A ventiquattro il titolo di sezione sta su una
   riga in piu' della meta' dei casi, e una riga di titolo in meno per
   dodici sezioni e' una schermata intera di pagina in meno. */
@media (max-width: 720px) {
  .rt-misura-seo__testo h2 { font-size: 1.5rem; margin-block: var(--rt-s3) var(--rt-s4); }
}

@media (max-width: 900px) { .rt-misura-seo__testo h2 br { display: none; } }
.rt-misura-seo__testo p {
  margin: 0 0 var(--rt-s4);
  max-width: 62ch;
  font-size: var(--rt-t-base);
  line-height: var(--rt-interlinea);
  color: var(--rt-ink-2);
}

.rt-misura-seo__vicine {
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border-radius: var(--rt-r-xl);
  background: color-mix(in srgb, var(--rt-superficie) 72%, transparent);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), var(--rt-ombra-1);
}
.rt-misura-seo__vicine h3 {
  margin: 0 0 var(--rt-s2);
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-forte);
}
.rt-misura-seo__vicine > p {
  margin: 0 0 var(--rt-s4);
  font-size: var(--rt-t-xs);
  line-height: 1.5;
  color: var(--rt-ink-3);
}
.rt-misura-seo__vicine ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.rt-misura-seo__vicine a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s3);
  padding: var(--rt-s3) var(--rt-s4);
  border-radius: var(--rt-r-sm);
  color: var(--rt-ink-2);
  text-decoration: none;
  font-size: var(--rt-t-sm);
  transition: background var(--rt-transizione), color var(--rt-transizione);
}
.rt-misura-seo__vicine a:hover { background: var(--rt-superficie-2); color: var(--rt-ink); }
.rt-misura-seo__vicine a strong { font-family: var(--rt-font-dati); font-variant-numeric: tabular-nums; font-weight: 500; }
.rt-misura-seo__vicine a span { color: var(--rt-ink-3); }

.rt-misura-seo__tutte {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  margin-top: var(--rt-s4);
  padding-top: var(--rt-s4);
  border-top: 1px solid var(--rt-linea);
  width: 100%;
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  color: var(--rt-blu);
  text-decoration: none;
}

/* ════════════════════════════════════════════════════════════════════════
   Il movimento

   Tre cose, e nessuna e' un effetto per l'effetto.

   1. LE SEZIONI ENTRANO. Salgono di dodici pixel e si schiariscono quando
      arrivano in vista. Dodici pixel: abbastanza da far sentire che la
      pagina e' viva, troppo pochi perche' qualcuno pensi "ha caricato
      male". E' la differenza fra una pagina che scorre e una che si
      presenta, e su una scheda lunga come questa si sente.

   2. IL METRO. Un filetto con le tacche come una fettuccia metrica fa da
      divisorio fra le sezioni. E' il mestiere: qui tutto si misura, e un
      dettaglio che viene dal prodotto vale dieci decorazioni generiche.

   3. IL DISEGNO SI DISEGNA. Le quote della sezione tecnica si tracciano da
      sole quando la si raggiunge, invece di essere gia' li'. Dura un
      secondo e fa guardare il disegno, che e' esattamente quello che
      vogliamo: li' dentro ci sono i tre numeri che decidono l'acquisto.

   Tutto spento con prefers-reduced-motion: per chi soffre di vertigini da
   movimento questa non e' una preferenza estetica.
   ═══════════════════════════════════════════════════════════════════════ */

/*
 * Nascosto SOLO se il JavaScript e' vivo.
 *
 * La prima versione metteva opacity:0 direttamente nel CSS, e il giorno in
 * cui un file JavaScript non fosse arrivato — una rete lenta, un blocco,
 * un errore in un altro script della pagina — la scheda sarebbe stata
 * bianca. Su un negozio e' il peggiore guasto possibile, e sarebbe
 * successo in silenzio.
 *
 * La classe rt-js la mette lo script appena parte. Niente JavaScript,
 * niente classe, tutto visibile: l'animazione e' un di piu' e si comporta
 * come tale.
 */
html.rt-js [data-rt-entra] {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rt-ritardo, 0ms);
}
html.rt-js [data-rt-entra].e-dentro { opacity: 1; transform: none; }

/* ── Il metro: il divisorio con le tacche ──────────────────────────── */

.rt-metro {
  position: relative;
  height: 16px;
  margin: 0;
  border: 0;
  background:
    /* le tacche */
    repeating-linear-gradient(to right,
      var(--rt-linea) 0 1px,
      transparent 1px 12px),
    /* il filetto */
    linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--rt-linea) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  background-size: 100% 7px, 100% 100%;
  background-position: left top, left center;
  background-repeat: repeat-x, no-repeat;
  /* Sfuma ai due lati: un righello che finisce di netto sembra tagliato. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* ── Il disegno quotato si traccia ─────────────────────────────────── */

/* Idem per il disegno: le quote spariscono solo se c'e' chi le ridisegna. */
html.rt-js .rt-anat__disegno .rt-an-filo,
html.rt-js .rt-anat__disegno .rt-an-quota line,
html.rt-js .rt-anat__disegno .rt-an-quota path {
  stroke-dasharray: var(--rt-lung, 400);
  stroke-dashoffset: var(--rt-lung, 400);
  transition: stroke-dashoffset 1500ms cubic-bezier(0.33, 1, 0.5, 1);
  transition-delay: var(--rt-ritardo, 0ms);
}
html.rt-js .rt-anat__disegno.e-dentro .rt-an-filo,
html.rt-js .rt-anat__disegno.e-dentro .rt-an-quota line,
html.rt-js .rt-anat__disegno.e-dentro .rt-an-quota path { stroke-dashoffset: 0; }

html.rt-js .rt-anat__disegno .rt-an-val,
html.rt-js .rt-anat__disegno .rt-an-et {
  opacity: 0;
  transition: opacity 700ms ease;
  transition-delay: calc(var(--rt-ritardo, 0ms) + 760ms);
}
html.rt-js .rt-anat__disegno.e-dentro .rt-an-val,
html.rt-js .rt-anat__disegno.e-dentro .rt-an-et { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.rt-js [data-rt-entra],
  html.rt-js [data-rt-entra].e-dentro { opacity: 1; transform: none; transition: none; }
  html.rt-js .rt-anat__disegno .rt-an-filo,
  html.rt-js .rt-anat__disegno .rt-an-quota line,
  html.rt-js .rt-anat__disegno .rt-an-quota path { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
  html.rt-js .rt-anat__disegno .rt-an-val,
  html.rt-js .rt-anat__disegno .rt-an-et { opacity: 1; transition: none; }
  .rt-sp__misura-seo::before,
  .rt-sp__prove::before { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Le altre misure

   Stampate dal tema e non dal loop di WooCommerce. Uscivano sfasate — la
   griglia partiva dalla seconda colonna — e nel banco di prova, con lo
   stesso markup e lo stesso CSS, erano perfette: dentro quella <ul> ci
   finiva qualcosa che non avevo scritto io. Qui non c'e' piu' il posto
   dove possa nascere.

   L'ordine non e' casuale come quello di WooCommerce: prima le misure con
   la stessa larghezza, che entrano nella stessa stampante.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-sp__correlati { padding-block: clamp(3rem, 7vw, 5.5rem); }

.rt-correlati__testa {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--rt-s6);
  flex-wrap: wrap;
  margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}
.rt-correlati__testa h2 {
  margin: var(--rt-s4) 0 0;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-titolo);
  line-height: 1.06;
}

/* Ventotto pixel di titolo su uno schermo largo 350 sono quasi sempre
   due righe, spesso tre. A ventiquattro il titolo di sezione sta su una
   riga in piu' della meta' dei casi, e una riga di titolo in meno per
   dodici sezioni e' una schermata intera di pagina in meno. */
@media (max-width: 720px) {
  .rt-correlati__testa h2 { font-size: 1.5rem; margin-block-start: var(--rt-s3); }
}

@media (max-width: 760px) { .rt-correlati__testa h2 br { display: none; } }

/* Il colore al passaggio del mouse e' ridichiarato, e non e' pignoleria.

   In base.css c'e' "a:hover { color: var(--rt-blu-scuro) }", che vale
   0,1,1. ".rt-correlati__tutte" vale 0,1,0 e perdeva: il testo bianco
   dentro la pillola nera diventava blu scuro, cioe' illeggibile. Lo
   stesso vale per qualunque altro pulsante scuro che sia un <a>.        */
.rt-correlati__tutte {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  padding: var(--rt-s3) var(--rt-s5);
  border-radius: var(--rt-r-pill);
  background: var(--rt-ink);
  color: var(--rt-superficie);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  text-decoration: none;
  transition: transform var(--rt-transizione), background var(--rt-transizione);
}
.rt-correlati__tutte:hover,
.rt-correlati__tutte:focus,
.rt-correlati__tutte:focus-visible,
.rt-correlati__tutte:active {
  background: var(--rt-ink-2);
  color: var(--rt-superficie);
  transform: translateY(-1px);
}

.rt-correlati {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.3vw, 1.125rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1000px) { .rt-correlati { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.rt-correlati a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--rt-r-xl);
  background: var(--rt-superficie);
  box-shadow: var(--rt-ombra-1);
  text-decoration: none;
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
}
.rt-correlati a:hover { transform: translateY(-3px); box-shadow: var(--rt-ombra-2); }

/* Il riquadro dell'immagine era alto 4/3 con un rientro di 20px per
   lato: il rotolo ci stava dentro piccolo, con piu' bianco che prodotto
   intorno, e in una griglia di quattro card quasi identiche l'unica cosa
   che le distingue e' proprio la foto. Rientro ridotto al minimo e
   immagine che riempie la casella: cresce di circa un terzo senza che la
   card cambi dimensione.                                                */
.rt-correlati__img {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  padding: var(--rt-s2);
  background: var(--rt-superficie);
  overflow: hidden;
}
.rt-correlati__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-correlati a:hover .rt-correlati__img img { transform: scale(1.045); }

/* Sul telefono le card sono due e larghe, e la casella 5:4 con il suo
   rientro lasciava intorno a un rotolo fotografato quadrato due dita di
   bianco per lato piu' il rientro: la foto finiva per essere meno di
   meta' della card. Casella quadrata come lo scatto e rientro a zero: la
   stessa card, con l'immagine piu' grande di circa un terzo.

   Resta object-fit: contain. Con cover il taglio prenderebbe l'angolo in
   alto a destra, dove sta la fascia blu con la misura — cioe' proprio il
   dato che distingue una card dall'altra. */
@media (max-width: 1000px) {
  .rt-correlati__img { aspect-ratio: 1 / 1; padding: 0; }

  /* Tutto al centro: con la pastiglia e il titolo a bandiera, sotto
     un'immagine centrata e sopra una pastiglia larga quanto la card, il
     corpo sembrava spostato a sinistra. */
  .rt-correlati__corpo {
    align-items: center;
    padding: var(--rt-s3) var(--rt-s4) var(--rt-s4);
    text-align: center;
  }
  .rt-correlati__misura { align-self: center; }
}

.rt-correlati__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--rt-s2);
  padding: var(--rt-s2) var(--rt-s5) var(--rt-s5);
}
.rt-correlati__misura {
  align-self: flex-start;
  padding: 2px 0.5rem;
  border-radius: var(--rt-r-pill);
  background: var(--rt-blu-tenue);
  color: var(--rt-blu-scuro);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-xs);
}
.rt-correlati__corpo strong {
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  color: var(--rt-ink);
  line-height: 1.3;
}
.rt-correlati__prezzo { font-size: var(--rt-t-xs); color: var(--rt-ink-3); }
.rt-correlati__prezzo b { font-family: var(--rt-font-dati); font-variant-numeric: tabular-nums; font-size: var(--rt-t-sm); color: var(--rt-ink); }

/* Dentro la card e' piu' piccola: li' il prezzo e' gia' piccolo, e una
   pastiglia grande quanto il prezzo che accompagna lo scavalca. */
.rt-correlati .rt-migliore {
  margin-block-start: 2px;
  padding: 1px var(--rt-s2);
  font-size: 10px;
  letter-spacing: 0.03em;
}

/* A due card per riga la pastiglia misurava 168 pixel dentro una card
   che di spazio scritto ne ha 137: usciva dal bordo destro e l'ultima
   parola restava tagliata. Un punto di carattere in meno, la spaziatura
   fra le lettere a zero, e il testo centrato sulla larghezza della card
   invece che allineato a sinistra: 129 pixel, dentro. */
@media (max-width: 1000px) {
  .rt-correlati .rt-migliore {
    align-self: stretch;
    justify-content: center;
    padding-inline: 6px;
    font-size: 9px;
    letter-spacing: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rt-correlati a:hover,
  .rt-correlati__tutte:hover { transform: none; }
  .rt-correlati a:hover .rt-correlati__img img { transform: none; }
}

/* ── La filigrana del disegno quotato ───────────────────────────────────
   Abbastanza tenue da non disturbare la lettura delle quote, abbastanza
   presente da rendere il file inutilizzabile a chi lo porta via. Non si
   anima e non sparisce mai: non e' decorazione, e' una firma.           */

.rt-an-firma {
  font-family: var(--rt-font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  fill: var(--rt-ink);
  opacity: 0.035;
}
.rt-an-marchio text {
  font-family: var(--rt-font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  fill: var(--rt-ink);
  opacity: 0.3;
}
.rt-an-marchio .rt-an-marchio-it { fill: var(--rt-blu); opacity: 1; }

/* ════════════════════════════════════════════════════════════════════════
   L'effetto

   Tre cose che si vedono, non tre sfumature. E tutte e tre vengono dal
   mestiere: qui si vendono rotoli e si misura, quindi la pagina si veste
   da disegno tecnico, non da sito di cosmetici.

   1. IL FOGLIO MILLIMETRATO. Dietro la testata corre un reticolo da
      tavolo da disegno, sottilissimo, con due aurore di colore che ci si
      muovono sopra lente. Si legge come carta tecnica illuminata, e il
      prodotto ci galleggia sopra.

   2. LA FETTUCCIA METRICA IN CIMA. Una striscia alta tre pixel con le
      tacche del metro che si riempie mentre si scorre. E' la barra di
      avanzamento piu' ovvia del mondo vestita da nastro di misura: dice
      quanto manca e intanto dice chi siamo.

   3. LA LUCE CHE SEGUE IL CURSORE sulle card del bento. Non un'ombra che
      si accende: un riflesso morbido che si sposta, come su una
      superficie vera.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Le aurore dietro la testata ────────────────────────────────
   Il reticolo da tavolo da disegno c'era e non piaceva: troppo rigido,
   troppo "foglio a quadretti". Al suo posto tre macchie di colore larghe
   e sfocatissime che si muovono lentamente l'una rispetto all'altra —
   non insieme, perche' tre cose che si muovono allo stesso modo si
   leggono come una sola immagine che scorre, mentre tre velocita'
   diverse sembrano luce vera.

   Niente contorni, niente geometrie: solo colore che respira sotto il
   bianco delle card.                                                   */

.rt-sp__testata {
  position: relative;
  isolation: isolate;
}
.rt-sp__testata::before,
.rt-sp__testata::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

.rt-sp__testata::before {
  inset: -10rem -30% auto -30%;
  height: 120%;
  opacity: 0.85;
  background:
    radial-gradient(28% 34% at 20% 26%, color-mix(in srgb, var(--rt-blu) 30%, transparent), transparent 70%),
    radial-gradient(24% 30% at 72% 14%, color-mix(in srgb, var(--rt-seg-pos) 26%, transparent), transparent 72%);
  filter: blur(68px);
  animation: rt-aurora-a 42s ease-in-out infinite alternate;
}

.rt-sp__testata::after {
  inset: -6rem -30% auto -30%;
  height: 110%;
  opacity: 0.7;
  background:
    radial-gradient(26% 32% at 54% 48%, color-mix(in srgb, var(--rt-seg-etichette) 26%, transparent), transparent 72%),
    radial-gradient(22% 26% at 88% 56%, color-mix(in srgb, var(--rt-seg-scommesse) 22%, transparent), transparent 72%);
  filter: blur(80px);
  animation: rt-aurora-b 56s ease-in-out infinite alternate;
}

/* Sotto la fascia luminosa, il fondo torna pulito: le aurore devono
   illuminare la testata, non colorare mezza pagina. */
.rt-sp__testata::before,
.rt-sp__testata::after {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 95%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 95%);
}

/* Sul telefono le aurore si attenuano.

   Sono tarate su una testata larga 1600 pixel, dove due macchie sfocate
   di settanta pixel sono un velo. Su 390 pixel la stessa sfocatura e'
   larga quanto lo schermo: non e' piu' una luce dietro le card, e'
   il colore della pagina. Meta' intensita' e meno movimento, e le card
   bianche tornano a staccarsi. */
/* Ancora piu' giu'. A 0,38 il colore si leggeva ancora come il fondo
   della pagina invece che come una luce; a 0,22 le card bianche sono
   bianche su grigio chiaro e la luce si vede solo se la si cerca, che e'
   il punto. */
@media (max-width: 720px) {
  .rt-sp__testata::before { opacity: 0.22; filter: blur(46px); }
  .rt-sp__testata::after  { opacity: 0.16; filter: blur(54px); }
}

@keyframes rt-aurora-a {
  from { transform: translate3d(-4%, -2%, 0) scale(1); }
  to   { transform: translate3d(5%,  4%, 0) scale(1.18); }
}
@keyframes rt-aurora-b {
  from { transform: translate3d(4%,  3%, 0) scale(1.1); }
  to   { transform: translate3d(-5%, -3%, 0) scale(0.96); }
}

/* ── 2. La fettuccia metrica ───────────────────────────────────────── */

.rt-metro-scorrimento {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 120;
  height: 3px;
  pointer-events: none;
  background: color-mix(in srgb, var(--rt-ink) 6%, transparent);
}

/* Sul telefono non si disegna affatto.

   La sua pista grigia e' una riga che attraversa lo schermo appena sotto
   l'orologio, e li' sopra non c'e' il sito: c'e' la barra di stato del
   telefono. Il risultato e' che il bianco della testata sembrava tagliato
   da un filo scuro che non appartiene a niente. Su un monitor, dove sopra
   c'e' il browser, quella riga dice a che punto si e' della lettura e il
   taglio non c'e'. */
@media (max-width: 860px) {
  .rt-metro-scorrimento { display: none; }
}
.rt-metro-scorrimento__riempi {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--rt-blu), var(--rt-seg-pos) 60%, var(--rt-seg-etichette));
  /* Le tacche del metro, ritagliate dentro la barra stessa. */
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 2px, rgba(0,0,0,.35) 2px 12px);
          mask-image: repeating-linear-gradient(to right, #000 0 2px, rgba(0,0,0,.35) 2px 12px);
  transition: width 90ms linear;
}

/* ── 3. La luce che segue il cursore ───────────────────────────────── */

.rt-bento__c::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms ease;
  background: radial-gradient(
    22rem 22rem at var(--rt-mx, 50%) var(--rt-my, 50%),
    rgba(255, 255, 255, 0.22),
    transparent 62%
  );
}
.rt-bento__c:hover::after { opacity: 1; }
.rt-bento__c--sabbia::after {
  background: radial-gradient(
    22rem 22rem at var(--rt-mx, 50%) var(--rt-my, 50%),
    color-mix(in srgb, var(--rt-blu) 12%, transparent),
    transparent 62%
  );
}

@media (prefers-reduced-motion: reduce) {
  .rt-sp__testata::after { animation: none; }
  .rt-metro-scorrimento__riempi { transition: none; }
  .rt-bento__c::after { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Gli stati al passaggio del mouse

   Regola unica: niente si illumina a caso. Reagisce solo quello su cui si
   puo' cliccare, e reagisce sempre nello stesso modo — si alza di un paio
   di pixel, l'ombra si allunga, il bordo prende colore. Tre segnali che
   insieme dicono "questo e' un oggetto, e si puo' prendere".

   Durate brevi all'andata e piu' lunghe al ritorno: entrare in uno stato
   deve sembrare immediato, uscirne deve sembrare morbido. E' la cosa che
   separa un'interfaccia che risponde da una che sfarfalla.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Gli scaglioni ──────────────────────────────────────────────────── */

.rt-scaglione { transition-duration: 320ms; }
.rt-scaglione:hover:not(:disabled):not(.is-attivo) {
  transition-duration: 140ms;
  border-color: color-mix(in srgb, var(--rt-blu) 45%, var(--rt-linea));
  background: color-mix(in srgb, var(--rt-blu) 3%, var(--rt-superficie));
  box-shadow: 0 6px 18px -10px rgba(26, 91, 255, 0.5);
  transform: translateY(-1px);
}
.rt-scaglione:active:not(:disabled) { transform: translateY(0) scale(0.995); }

/* ── Le pillole delle specifiche ────────────────────────────────────── */

.rt-sp__pillole li {
  transition: background 320ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-sp__pillole li:hover {
  transition-duration: 140ms;
  background: var(--rt-blu-tenue);
  transform: translateY(-1px);
}
.rt-sp__pillole li:hover svg { color: var(--rt-blu); }
.rt-sp__pillole svg { transition: color 160ms ease; }

/* ── La card delle garanzie: il colore sotto si accende ─────────────── */

.rt-sp__prove::before { transition: opacity 500ms ease, filter 500ms ease; }
.rt-sp__prove:hover::before { filter: saturate(2.1); }
.rt-sp__prove li { transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.rt-sp__prove li:hover { transition-duration: 160ms; transform: translateY(-2px); }
.rt-sp__prove li svg { transition: color 200ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1); }
.rt-sp__prove li:hover svg { color: var(--rt-blu); transform: scale(1.1); }

/* ── Le righe del listino ───────────────────────────────────────────── */

.rt-listino tbody tr { transition: background 240ms ease; }
.rt-listino tbody tr:hover { background: color-mix(in srgb, var(--rt-blu) 4%, transparent); }

/* ── Le risposte a fisarmonica ──────────────────────────────────────── */

.rt-fisarmonica summary { transition: background 240ms ease, padding-inline-start 240ms ease; }
.rt-fisarmonica summary:hover {
  background: color-mix(in srgb, var(--rt-blu) 4%, transparent);
  padding-inline-start: calc(var(--rt-s5) + 4px);
}

/* ── Le card del bento: si sollevano ────────────────────────────────── */

.rt-bento__c {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms ease;
}
.rt-bento__c:hover {
  transition-duration: 180ms;
  transform: translateY(-4px);
  box-shadow: var(--rt-ombra-3);
}

/* ── I pulsanti ─────────────────────────────────────────────────────── */

.rt-btn { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 300ms ease, background 200ms ease; }
.rt-btn:hover { transition-duration: 150ms; transform: translateY(-1px); }
.rt-btn:active { transform: translateY(0) scale(0.99); }

/* ── Le misure vicine ───────────────────────────────────────────────── */

.rt-misura-seo__vicine a span { transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.rt-misura-seo__vicine a:hover span { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .rt-scaglione:hover:not(:disabled):not(.is-attivo),
  .rt-sp__pillole li:hover,
  .rt-sp__prove li:hover,
  .rt-bento__c:hover,
  .rt-btn:hover { transform: none; }
  .rt-sp__prove li:hover svg,
  .rt-misura-seo__vicine a:hover span { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Dove finisce: le foto vere

   Fin qui la pagina spiega un rotolo con disegni e numeri. Qui mostra dove
   va a finire — dentro la stampante della cassa, dentro il POS, mentre
   stampa — e nessun disegno fa questo lavoro.

   La prima foto e' grande e prende due colonne: una fila di tre riquadri
   uguali e' una galleria, una grande piu' due e' una pagina.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-sp__foto { padding-block: clamp(3rem, 7vw, 6rem); }

.rt-foto__intro { margin-block-end: clamp(1.75rem, 3.5vw, 2.75rem); }
.rt-foto__intro h2 {
  margin: var(--rt-s4) 0 0;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-titolo);
  line-height: 1.06;
}

/* Ventotto pixel di titolo su uno schermo largo 350 sono quasi sempre
   due righe, spesso tre. A ventiquattro il titolo di sezione sta su una
   riga in piu' della meta' dei casi, e una riga di titolo in meno per
   dodici sezioni e' una schermata intera di pagina in meno. */
@media (max-width: 720px) {
  .rt-foto__intro h2 { font-size: 1.5rem; margin-block-start: var(--rt-s3); }
}

@media (max-width: 760px) { .rt-foto__intro h2 br { display: none; } }

.rt-foto__g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.3vw, 1.125rem);
}
@media (max-width: 860px) { .rt-foto__g { grid-template-columns: 1fr; } }

.rt-foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  border-radius: var(--rt-r-xl);
  background: var(--rt-ink);
  min-height: 20rem;
  box-shadow: var(--rt-ombra-2);
}
.rt-foto--grande { grid-row: span 2; }
@media (max-width: 860px) { .rt-foto--grande { grid-row: auto; } }

.rt-foto img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Si avvicina piano al passaggio del mouse. Lenta: una foto che scatta
     sembra un errore, una che si avvicina sembra attenzione. */
  transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-foto:hover img { transform: scale(1.045); }

/* La velatura scura dal basso: serve a leggere il testo, e solo a quello.
   Parte da meta' altezza cosi' la foto resta foto nella parte alta. */
.rt-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(11, 18, 32, 0.92) 0%,
    rgba(11, 18, 32, 0.72) 26%,
    rgba(11, 18, 32, 0.18) 56%,
    transparent 78%);
}

.rt-foto figcaption {
  display: grid;
  gap: var(--rt-s2);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  padding-block-start: clamp(7rem, 14vw, 11rem);
  color: #FFFFFF;
}
.rt-foto--grande figcaption { padding-block-start: clamp(10rem, 22vw, 18rem); }

.rt-foto__et {
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-medio);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.rt-foto figcaption strong {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.026em;
  line-height: 1.1;
}
.rt-foto--grande figcaption strong { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
.rt-foto__txt {
  max-width: 44ch;
  font-size: var(--rt-t-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .rt-foto img, .rt-foto:hover img { transition: none; transform: none; }
}