/* ============================================================================
   Layout — contenitori, header, footer
   ========================================================================= */

.rt-contenitore {
  width: 100%;
  max-width: var(--rt-larghezza);
  margin-inline: auto;
  padding-inline: var(--rt-gutter);
}

.rt-sezione { padding-block: var(--rt-s16); }
/* Quaranta pixel sopra e sotto ogni sezione, su una pagina che di sezioni
   ne ha dodici, fanno quasi mille pixel di niente da scorrere. Trentadue
   bastano: le sezioni si distinguono per il titolo e per il fondo, non
   per la distanza. */
@media (max-width: 720px) {
  .rt-sezione { padding-block: var(--rt-s8); }
}

.rt-testo { max-width: var(--rt-larghezza-testo); }

/* ── Header ──────────────────────────────────────────────────────────────
   Tre fasce, e si appiccica solo quello che serve mentre si scorre.

   Tutta la testata ferma in cima sarebbe un quinto di uno schermo di
   portatile occupato per sempre: su una scheda prodotto lunga come questa
   e' spazio tolto a cio' che si sta leggendo. La fascia di servizio —
   spedizione, telefono, IVA — si legge una volta e poi scorre via; la
   barra con ricerca, conto e carrello resta, e con lei la navigazione.  */

/* position:relative PERCHE' CI SI APPENDE LA SPIA dello scorrimento, e
   z-index NO.

   Con z-index:100 la testata diventava un contesto di impilamento, e
   Chromium prende lo sfondo da sfocare SOLO dentro il contesto di
   impilamento piu' vicino: dentro la testata, dietro la barra, non c'e'
   niente, quindi backdrop-filter non sfocava nulla. La riga del vetro
   c'era dal primo giorno e non ha mai fatto niente — non si poteva
   vedere, perche' finche' la barra scorreva via con la pagina non aveva
   mai niente sotto da sfocare.

   Il 100 lo porta la barra, che ce l'ha gia': e' lei che deve stare
   sopra il contenuto, non la scatola che la contiene. */
.rt-header { position: relative; }

/* La testata ha la SUA variabile, che oggi vale quanto quella del corpo.
   Per un periodo era piu' larga — "la barra di comando appartiene alla
   finestra, il testo alla colonna" — e il risultato era il marchio
   disallineato dal titolo della pagina di 130px. La riga resta perche'
   e' la manopola da girare se un giorno si riprova, non perche' oggi
   faccia qualcosa. */
.rt-header .rt-contenitore { max-width: var(--rt-larghezza-testata); }

.rt-header__appiccica {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--rt-superficie) 90%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  /* NIENTE FILETTO SOTTO LA TESTATA. Tagliava la pagina in due proprio
     dove comincia la prima schermata, e il riquadro della hero ha gia'
     un bordo suo: due separazioni a tre pixel di distanza sono una di
     troppo. La testata si stacca da sola, con la sfocatura del fondo. */
}

/* ── LA TESTATA CHE TORNA SCORRENDO ──────────────────────────────────────
   PERCHE' NON BASTAVA position:sticky, che pure c'e' qui sopra da sempre.

   Un elemento appiccicato resta in vista finche' resta in vista IL SUO
   CONTENITORE: e' definito cosi'. Il contenitore qui e' <header>, che e'
   alto centonovantasette pixel, quindi la barra si appiccicava per
   centonovantasette pixel di scorrimento e poi se ne andava via con la
   scatola. Era scritto nel commento che doveva restare, e non restava: il
   difetto piu' vecchio di questo foglio, e si vedeva su ogni pagina.

   Adesso, passati centosessanta pixel dalla testata, la barra passa a
   fixed e SCENDE DALL'ALTO. Non ricompare di colpo nel punto in cui si e'
   staccata — quello si legge come un salto, non come una barra che
   torna — e non segue il dito riga per riga: entra tutta intera quando
   serve, in quattro decimi di secondo.

   IL VETRO. Il fondo passa dal 90% di bianco al 72% e la sfocatura
   cresce: a barra ferma in cima alla pagina non c'e' niente da vedere
   sotto, ma una barra fissa ha sempre qualcosa che le scorre sotto, e
   mostrarlo e' il modo in cui una barra dice "sono sopra la pagina, non
   un pezzo di pagina".                                                  */

/* IL SEGNO sta dove comincia la barra quando e' nel flusso, e li' resta
   anche dopo che la barra se n'e' andata: e' prima di lei nel documento,
   e il buco lo tappa il segnaposto, che viene dopo. Alto un pixel con un
   margine di meno uno, cosi' ha un rettangolo da guardare ma non occupa
   niente: un elemento alto zero certi browser non lo considerano mai
   visibile, e la barra non si sarebbe piu' riattaccata. */
.rt-header__segno { height: 1px; margin-block-end: -1px; }

.rt-header__posto { height: 0; }
.rt-header.e-fissa .rt-header__posto { height: var(--rt-appiccica-h, 0px); }

/* I SALTI AD ANCORA ATTERRANO SOTTO LA BARRA, non dietro.
   Da quando la barra resta ferma in cima, un link a un pezzo di pagina ci
   portava con il titolo nascosto dietro il vetro. scroll-padding lo dice
   al browser una volta sola, e vale per i link con il cancelletto, per
   scrollIntoView e per il tasto di tabulazione. La misura la scrive
   testata.js sulla radice: dipende dal menu, che dipende dalle categorie,
   e un numero fisso qui sarebbe sbagliato il giorno che se ne aggiunge
   una. */
html { scroll-padding-block-start: calc(var(--rt-appiccica-h, 0px) + var(--rt-s4)); }

.rt-header.e-fissa .rt-header__appiccica {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  background: color-mix(in srgb, var(--rt-superficie) 82%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  /* DISSOLVENZA PIU' UN PASSO CORTO, non una tenda che scende.
     La prima versione la faceva scendere per tutta la sua altezza —
     centocinquanta pixel — e scattava: un elemento con backdrop-filter
     ricalcola la sfocatura dello sfondo A OGNI FOTOGRAMMA mentre si
     muove, e su un telefono quei centocinquanta pixel sono decine di
     ricalcoli di una sfocatura larga quanto lo schermo. Dodici pixel piu'
     una dissolvenza costano una frazione e si leggono meglio: la barra
     non "arriva da fuori", compare dove sara'.

     will-change dice al browser di tenersi pronto a muoverla: senza, il
     primo fotogramma e' quello in cui decide come farlo, ed e' proprio
     quello che si vede come uno scatto.

     pointer-events mentre e' invisibile: opacita' zero non e' sparita,
     ed e' una barra a tutta larghezza in cima alla pagina — senza, si
     toccava la ricerca credendo di toccare un prodotto. */
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 260ms ease-out,
              box-shadow 240ms ease;
}
.rt-header.e-fissa.e-giu .rt-header__appiccica {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}


/* IL VETRO VALE PER TUTTA LA BARRA, riga delle categorie compresa.
   .rt-header__nav ha un fondo bianco pieno suo: lasciandoglielo, la parte
   trasparente era la striscia di sopra e quella di sotto restava opaca —
   due materiali diversi nella stessa barra, con la giuntura in mezzo. */
.rt-header.e-fissa .rt-header__nav { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .rt-header.e-fissa .rt-header__appiccica { transition: none; }
}

/* LA SPIA che dice quando staccarsi. Sta centosessanta pixel sotto la
   testata, non alla fine di essa: staccandosi appena la testata esce, la
   barra rientrerebbe nello stesso istante in cui e' uscita, e quello che
   si vede e' un lampo. Centosessanta pixel sono un gesto di pollice.

   E DUE SOGLIE, NON UNA. Si scende: superata la spia, la barra si stacca
   e scende dall'alto. Si risale: la barra NON risale, resta fino a quando
   si arriva dov'era, e li' si riattacca nel pixel esatto in cui si trova
   gia' — il segno qui sopra e' quel punto. Con una soglia sola, la barra
   si sarebbe sfilata in alto lasciando centocinquanta pixel di bianco in
   cima alla pagina per tutto il tempo della risalita. */
.rt-header__spia {
  position: absolute;
  inset-block-end: -160px;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ── La fascia di servizio ───────────────────────────────────────────────
   Scura, alta quaranta pixel, una riga sola.

   Prima erano tre pastiglie con icona affiancate su una barra nera: e' la
   composizione che tutti i temi commerciali hanno copiato per quindici
   anni, e si riconosce in mezzo secondo. Qui i tre fatti si alternano
   sulla stessa riga, in dissolvenza — occupano un terzo dello spazio e si
   leggono davvero, invece di diventare tre etichette che l'occhio salta.

   Sotto al nero scorre una scia di blu lentissima. Non si guarda: si nota
   soltanto che quel nero non e' un nero stampato.                        */

.rt-servizio {
  position: relative;
  overflow: hidden;
  background: var(--rt-grad-servizio);
  border-block-end: 1px solid color-mix(in srgb, var(--rt-blu) 12%, transparent);
  color: var(--rt-ink-2);
  font-size: 0.8125rem;
}

/* La scia: una luce bianca che attraversa la fascia, lentissima. Sul
   chiaro non si vede come un bagliore, si vede come una carta che prende
   luce da una finestra. */
.rt-servizio::before {
  content: "";
  position: absolute;
  inset: -60% -25%;
  pointer-events: none;
  background: radial-gradient(34% 190% at 22% 50%, color-mix(in srgb, var(--rt-superficie) 90%, transparent), transparent 72%);
  opacity: 0.85;
  animation: rt-scia 28s ease-in-out infinite alternate;
}
@keyframes rt-scia {
  from { transform: translateX(-14%); }
  to   { transform: translateX(44%); }
}

.rt-servizio__dentro {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s6);
  min-height: 46px;
}

/* La ruota e' CSS puro: tre righe sovrapposte e un'animazione sfasata.
   L'altezza e' fissa, cosi' la fascia non sobbalza a ogni cambio. */
.rt-servizio__ruota {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 1.25rem;
  overflow: hidden;
}
.rt-servizio__ruota span {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  display: block;
  line-height: 1.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(100%);
  animation: rt-ruota 16.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.rt-servizio__ruota span:nth-child(2) { animation-delay: 5.5s; }
.rt-servizio__ruota span:nth-child(3) { animation-delay: 11s; }
.rt-servizio__ruota b { color: var(--rt-ink); font-weight: var(--rt-peso-forte); }

@keyframes rt-ruota {
  0%    { opacity: 0; transform: translateY(100%); }
  2.5%  { opacity: 1; transform: translateY(0); }
  30%   { opacity: 1; transform: translateY(0); }
  33%   { opacity: 0; transform: translateY(-100%); }
  100%  { opacity: 0; transform: translateY(-100%); }
}

/* Ferma sul primo fatto quando il movimento e' ridotto, e senza la scia. */
@media (prefers-reduced-motion: reduce) {
  .rt-servizio::before { animation: none; }
  .rt-servizio__ruota span { animation: none; opacity: 0; }
  .rt-servizio__ruota span:first-child { opacity: 1; transform: none; }
}

.rt-servizio__destra {
  display: flex;
  align-items: center;
  gap: var(--rt-s5);
  flex: none;
}

/* Il colore al passaggio del mouse e' scritto, non ereditato.
   Senza, "a:hover" portava a blu scuro TUTTO il collegamento — icona e
   orario compresi — e il blu scuro su fondo quasi nero non si legge. */
.rt-servizio__tel {
  display: inline-flex;
  align-items: baseline;
  gap: var(--rt-s2);
  color: var(--rt-ink-3);
  text-decoration: none;
  transition: color var(--rt-transizione);
}
.rt-servizio__tel b {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-weight: var(--rt-peso-forte);
  letter-spacing: -0.005em;
  color: var(--rt-ink);
  transition: color var(--rt-transizione);
}
.rt-servizio__tel:hover,
.rt-servizio__tel:focus-visible { color: var(--rt-ink-2); }
.rt-servizio__tel:hover b,
.rt-servizio__tel:focus-visible b { color: var(--rt-blu); }
.rt-servizio__orario { font-size: var(--rt-t-xs); }

/* Un filetto vero fra il telefono e l'interruttore: due cose diverse
   accanto senza un segno in mezzo si leggono come una cosa sola. */
.rt-servizio .rt-iva {
  padding-inline-start: var(--rt-s5);
  border-inline-start: 1px solid color-mix(in srgb, var(--rt-ink) 12%, transparent);
}
.rt-servizio .rt-iva__etichetta { font-size: 0.625rem; }

/* Piu' basso del normale: il gruppo con l'imbottitura piena e' alto
   43px e faceva crescere la fascia, che a quel punto non e' piu' una
   fascia di servizio ma una seconda barra. */
.rt-servizio .rt-iva__gruppo {
  padding: 2px;
  background: color-mix(in srgb, var(--rt-superficie) 72%, transparent);
  border-color: color-mix(in srgb, var(--rt-ink) 10%, transparent);
}
.rt-servizio .rt-iva__btn { padding: 3px var(--rt-s3); font-size: var(--rt-t-xs); }

/* Piu' aria. Il marchio era incollato alla ricerca e la ricerca al
   conto: tre cose diverse a sedici pixel l'una dall'altra si leggono
   come una barra piena di roba. Lo spazio fra loro cresce con la
   finestra, e la ricerca prende il centro con i margini automatici. */
.rt-header__barra {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3.6vw, 3.25rem);
  min-height: 78px;
  flex-wrap: wrap;
  /* NESSUNA TRANSIZIONE SULL'ALTEZZA, e non e' una rinuncia.
     L'accorciamento da 78 a 64 avveniva sempre con la barra INVISIBILE —
     mentre si stacca e' ancora trasparente, mentre si riattacca e' gia'
     via — quindi era un'animazione che nessuno vedeva. In compenso
     faceva danni: riattaccandosi, l'altezza tornava a 78 in 240ms mentre
     il segnaposto spariva di colpo, la testata si accorciava per un
     quarto di secondo e il browser correggeva lo scorrimento per tenere
     ferma la pagina sotto. Risultato: tornando in cima non si arrivava
     mai a zero, ci si fermava sei pixel piu' giu'. */
}

/* Scorrendo la barra si stringe e prende un'ombra: dice che la pagina si
   e' mossa sotto, e recupera quattordici pixel di schermo.

   SOLO DOVE C'E' QUALCOSA DA STRINGERE. Sul telefono la barra e' gia'
   alta 56 pixel, e questa riga la faceva CRESCERE a 64: la regola che
   doveva recuperare schermo ne toglieva otto, misurati, da sempre. Il
   limite e' lo stesso a cui la barra passa a una riga sola. */
.rt-header__appiccica { transition: box-shadow 240ms ease; }
.rt-header__appiccica.e-scorso { box-shadow: 0 14px 34px -26px rgba(11, 18, 32, 0.5); }
@media (min-width: 861px) {
  .rt-header__appiccica.e-scorso .rt-header__barra { min-height: 64px; }
}

/* ── Marchio ──────────────────────────────────────────────────────────
   L'altezza la decide il CSS, la larghezza la calcola il browser dalle
   proporzioni del file: cosi' il marchio non si deforma mai e non sposta
   nulla quando arriva.                                                   */

.rt-logo {
  display: block;
  flex: none;
  line-height: 0;
  text-decoration: none;
  transition: opacity var(--rt-transizione);
}
.rt-logo:hover { opacity: 0.78; }
.rt-logo:focus-visible { outline: 2px solid var(--rt-blu); outline-offset: 4px; border-radius: 4px; }

.rt-marchio {
  height: 26px;
  width: auto;
  max-width: 100%;
}
@media (max-width: 600px) { .rt-marchio { height: 22px; } }

.rt-footer .rt-marchio { height: 30px; }

/* Se il file del marchio manca, resta il nome scritto. */
.rt-logo-testo {
  font-weight: var(--rt-peso-forte);
  font-size: var(--rt-t-lg);
  letter-spacing: var(--rt-tracking-testa);
  color: var(--rt-ink);
  line-height: 1.2;
  display: inline-block;
}
.rt-logo-testo b { color: var(--rt-blu); font-weight: var(--rt-peso-forte); }

.rt-header__spazio { flex: 1 1 auto; min-width: 0; }

.rt-nav {
  display: flex;
  gap: var(--rt-s5);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rt-nav a {
  color: var(--rt-ink-2);
  text-decoration: none;
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  padding-block: var(--rt-s2);
  border-bottom: 2px solid transparent;
}
.rt-nav a:hover,
.rt-nav .current-menu-item > a {
  color: var(--rt-blu);
  border-bottom-color: var(--rt-blu);
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.rt-footer {
  margin-top: var(--rt-s20);
  border-top: 1px solid var(--rt-linea);
  background: var(--rt-superficie);
  padding-block: var(--rt-s12) var(--rt-s10);
}
/* La colonna del marchio e' larga il doppio delle altre: ci stanno la
   frase, il punteggio recensioni e i due recapiti, che sono la cosa che
   la gente cerca davvero in un piede pagina. */
.rt-footer__alto {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--rt-s10) var(--rt-s8);
}
@media (max-width: 900px) {
  .rt-footer__alto { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .rt-footer__marchio { grid-column: 1 / -1; }
}

.rt-footer__marchio p {
  margin: var(--rt-s3) 0 0;
  max-width: 36ch;
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-3);
  line-height: var(--rt-interlinea);
}
.rt-footer__marchio .rt-badge-rec { margin-top: var(--rt-s5); padding-top: 0; border: 0; }

.rt-footer__contatti {
  margin-top: var(--rt-s6);
  display: flex;
  flex-direction: column;
  gap: var(--rt-s3);
}
.rt-footer__contatti li { margin: 0; display: flex; flex-direction: column; }
.rt-footer__contatti a {
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-medio);
  color: var(--rt-ink);
}
.rt-footer__contatti span { font-size: var(--rt-t-xs); color: var(--rt-ink-3); }

.rt-footer__col h2 {
  font-size: var(--rt-t-xs);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-ink-3);
  font-weight: var(--rt-peso-medio);
  margin: 0 0 var(--rt-s4);
}
.rt-footer ul { list-style: none; padding: 0; margin: 0; }
.rt-footer li { margin-bottom: var(--rt-s2); }
.rt-footer a {
  color: var(--rt-ink-2);
  text-decoration: none;
  font-size: var(--rt-t-sm);
}
.rt-footer a:hover { color: var(--rt-blu); }

/* Le misure in griglia: otto numeri in colonna sprecherebbero spazio. */
.rt-footer__misure {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rt-s1) var(--rt-s3);
}
.rt-footer__misure a { font-family: var(--rt-font-dati); font-variant-numeric: tabular-nums; }
.rt-footer__tutte { margin: var(--rt-s4) 0 0; }
.rt-footer__tutte a { color: var(--rt-blu); }
/* ── Testata: ricerca, account, carrello ─────────────────────────────────
   La ricerca e' il comando principale di questo sito, non un accessorio
   in un angolo: su un catalogo di misure non si naviga, si cerca "80x80".
   Quindi e' larga, al centro, con il suo pulsante — un campo senza
   pulsante su un telefono lascia il dubbio su cosa si debba premere.   */

.rt-cerca {
  flex: 1 1 22rem;
  max-width: 46rem;
  min-width: 0;
  /* I margini automatici la tengono al centro della barra qualunque sia
     la larghezza del marchio e delle azioni. */
  margin-inline: auto;
  position: relative;
  display: flex;
  align-items: center;
}
.rt-cerca__icona {
  position: absolute;
  inset-inline-start: var(--rt-s5);
  color: var(--rt-ink-3);
  pointer-events: none;
}
.rt-cerca input[type="search"] {
  width: 100%;
  /* Piu' bassa: era alta quanto un pulsante, e in una testata che resta
     appiccicata ogni pixel se lo porta via per tutta la pagina. */
  padding: var(--rt-s3) 5.75rem var(--rt-s3) 2.75rem;
  border: 1.5px solid var(--rt-linea);
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie-2);
  font-family: var(--rt-font);
  font-size: var(--rt-t-sm);
  color: var(--rt-ink);
  transition: border-color var(--rt-transizione), background var(--rt-transizione), box-shadow var(--rt-transizione);
}
/* Il suggerimento piu' piccolo del testo che si scrive: e' un'istruzione,
   non contenuto, e a 15px sembrava una frase gia' digitata. Il testo vero
   resta a 15px, che e' anche il minimo sotto il quale iOS ingrandisce la
   pagina da solo quando si tocca il campo. */
.rt-cerca input[type="search"]::placeholder {
  color: var(--rt-ink-3);
  font-size: var(--rt-t-xs);
}
.rt-cerca input[type="search"]:focus {
  background: var(--rt-superficie);
  border-color: var(--rt-blu);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rt-blu) 12%, transparent);
}
.rt-cerca__vai {
  position: absolute;
  inset-inline-end: 4px;
  padding: var(--rt-s2) var(--rt-s5);
  border: 0;
  border-radius: var(--rt-r-pill);
  background: var(--rt-blu);
  color: var(--rt-superficie);
  font-family: var(--rt-font);
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-forte);
  cursor: pointer;
  transition: background var(--rt-transizione);
}
.rt-cerca__vai:hover { background: var(--rt-blu-scuro); }

/* ── I suggerimenti della ricerca ────────────────────────────────────────
   Due gruppi: le misure, che portano alla pagina della misura con tutti i
   metraggi, e i prodotti con foto e prezzo. In fondo la via d'uscita
   verso i risultati completi, perche' un pannello che non la offre
   costringe a indovinare quando fermarsi.                               */

.rt-cerca__pannello {
  position: absolute;
  inset-block-start: calc(100% + var(--rt-s2));
  inset-inline: 0;
  z-index: 40;
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--rt-s3);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-lg);
  background: var(--rt-superficie);
  box-shadow: var(--rt-ombra-3);
}
.rt-cerca__pannello[hidden] { display: none; }

.rt-cerca__gruppo + .rt-cerca__gruppo { margin-block-start: var(--rt-s3); }
.rt-cerca__et {
  display: block;
  padding: var(--rt-s2) var(--rt-s3);
  font-size: 0.6875rem;
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-ink-3);
}

.rt-cerca__voce {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  padding: var(--rt-s2) var(--rt-s3);
  border-radius: var(--rt-r-sm);
  color: var(--rt-ink);
  text-decoration: none;
  cursor: pointer;
}
.rt-cerca__voce:hover,
.rt-cerca__voce.e-scelto { background: var(--rt-blu-tenue); color: var(--rt-ink); }

.rt-cerca__misura { justify-content: space-between; }
.rt-cerca__misura b {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-forte);
}
.rt-cerca__misura span { font-size: var(--rt-t-xs); color: var(--rt-ink-3); }

.rt-cerca__prod img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--rt-r-sm);
  background: var(--rt-superficie-2);
  object-fit: contain;
  mix-blend-mode: multiply;
}
.rt-cerca__corpo { display: grid; gap: 2px; min-width: 0; }
.rt-cerca__nome {
  font-size: var(--rt-t-sm);
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.rt-cerca__nome b {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-weight: var(--rt-peso-forte);
  color: var(--rt-blu-scuro);
}
.rt-cerca__prezzo {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-3);
}

.rt-cerca__tutti {
  margin-block-start: var(--rt-s2);
  padding-block: var(--rt-s3);
  border-block-start: 1px solid var(--rt-linea);
  border-radius: 0;
  color: var(--rt-blu);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
}

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

.rt-header__azioni {
  display: flex;
  align-items: center;
  gap: var(--rt-s2);
  flex: none;
}

/* Allineamento ottico al bordo.
   L'ultima azione ha la sua imbottitura, quindi il testo "Carrello"
   finiva sedici pixel prima del bordo del contenitore mentre il marchio
   partiva esattamente da quel bordo: il blocco di destra sembrava
   rientrato. Si recupera l'imbottitura con un margine negativo. Lo
   stesso vale per la prima voce della navigazione, qui sotto. */
@media (min-width: 861px) {
  .rt-header__azioni { margin-inline-end: calc(var(--rt-s4) * -1); }
  .rt-header__nav .rt-nav { margin-inline-start: calc(var(--rt-s4) * -1); }
}

/* Icona piu' parola. Un'icona sola e' un indovinello: quella del conto e
   quella del carrello si somigliano, e la differenza fra "accedi" e "il
   tuo conto" non la disegna nessun pittogramma. */
.rt-azione {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  padding: var(--rt-s3) var(--rt-s4);
  border-radius: var(--rt-r-pill);
  color: var(--rt-ink);
  text-decoration: none;
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  white-space: nowrap;
  transition: background var(--rt-transizione), color var(--rt-transizione);
}
.rt-azione:hover { background: var(--rt-superficie-2); color: var(--rt-blu); }
.rt-azione svg { flex: none; }

/* Il salto del numerino quando entra qualcosa nel carrello: mezzo
   secondo con un rimbalzo. E' l'unica conferma che riceve chi clicca
   "aggiungi" mentre il cassetto si apre. */
@keyframes rt-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}
.rt-icona__conta.e-nuovo { animation: rt-pop 460ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@media (prefers-reduced-motion: reduce) {
  .rt-icona__conta.e-nuovo { animation: none; }
}

.rt-icona__conta {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  border-radius: var(--rt-r-pill);
  background: var(--rt-blu);
  color: var(--rt-superficie);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  line-height: 1;
}

/* ── Navigazione ─────────────────────────────────────────────────────── */

.rt-header__nav {
  position: relative;
  border-top: 1px solid var(--rt-linea);
  background: var(--rt-superficie);
}

.rt-nav {
  display: flex;
  align-items: center;
  gap: var(--rt-s1);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rt-nav > li > a,
.rt-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  padding: var(--rt-s3) var(--rt-s4);
  border: 0;
  border-radius: var(--rt-r-sm);
  background: transparent;
  color: var(--rt-ink-2);
  font-family: var(--rt-font);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--rt-transizione), color var(--rt-transizione);
}
.rt-nav > li > a:hover,
.rt-nav__trigger:hover,
.rt-nav .current-menu-item > a,
.rt-nav__mega[data-aperto] .rt-nav__trigger {
  background: var(--rt-blu-tenue);
  color: var(--rt-blu-scuro);
}
.rt-header__nav .rt-nav { padding-block: var(--rt-s3); }

/* ── Il pannello delle misure ────────────────────────────────────────────
   Si apre al passaggio del mouse e con il tabulatore, senza una riga di
   JavaScript: :hover sul <li> vale anche mentre il cursore e' dentro al
   pannello, che del <li> e' figlio. Il file testata.js aggiunge soltanto
   il tocco e il tasto Esc, cioe' quello che :hover non sa fare.         */

.rt-nav__chevron {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--rt-transizione);
}
.rt-nav__mega:hover .rt-nav__chevron,
.rt-nav__mega[data-aperto] .rt-nav__chevron { transform: translateY(1px) rotate(-135deg); }

.rt-mega {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 90;
  background: var(--rt-superficie);
  border-block-start: 1px solid var(--rt-linea);
  box-shadow: var(--rt-ombra-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 180ms ease,
              transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 220ms;
}
.rt-nav__mega:hover > .rt-mega,
.rt-nav__mega:focus-within > .rt-mega,
.rt-nav__mega[data-aperto] > .rt-mega {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.rt-mega__dentro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: var(--rt-s10);
  padding-block: var(--rt-s8);
}

.rt-mega__misure ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--rt-s2);
  margin: var(--rt-s4) 0 var(--rt-s5);
  padding: 0;
  list-style: none;
}
/* Solo le chip dentro l'elenco: senza "ul" questa regola si prendeva
   anche il collegamento "Tutte le misure a catalogo" qui sotto, che
   diventava un riquadro bordato largo quanto la colonna. */
.rt-mega__misure ul a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--rt-s3) var(--rt-s4);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-md);
  text-decoration: none;
  transition: border-color var(--rt-transizione), background var(--rt-transizione), transform var(--rt-transizione);
}
.rt-mega__misure ul a:hover {
  border-color: var(--rt-blu);
  background: var(--rt-blu-tenue);
  transform: translateY(-2px);
}
.rt-mega__misure ul b {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-medio);
  color: var(--rt-ink);
}
.rt-mega__misure ul span { font-size: var(--rt-t-xs); color: var(--rt-ink-3); }

.rt-mega__tutte {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  color: var(--rt-blu);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  text-decoration: none;
}
.rt-mega__tutte:hover { text-decoration: underline; text-underline-offset: 3px; }

.rt-mega__aiuto {
  align-self: start;
  padding: var(--rt-s6);
  border-radius: var(--rt-r-xl);
  background: var(--rt-grad-aurora);
  color: var(--rt-ink);
}
.rt-mega__aiuto-i {
  display: grid;
  place-content: center;
  width: 40px;
  height: 40px;
  margin-block-end: var(--rt-s4);
  border-radius: var(--rt-r-md);
  background: var(--rt-ink);
  color: var(--rt-superficie);
}
.rt-mega__aiuto-i svg { width: 20px; height: 20px; }
.rt-mega__aiuto strong { display: block; font-size: var(--rt-t-lg); font-weight: var(--rt-peso-forte); }
.rt-mega__aiuto p {
  margin: var(--rt-s2) 0 var(--rt-s5);
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-2);
  line-height: 1.5;
}

/* ── Scendendo ───────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .rt-mega__dentro { grid-template-columns: 1fr; gap: var(--rt-s6); padding-block: var(--rt-s6); }
  .rt-mega { max-height: 72vh; overflow-y: auto; }

  /* La navigazione diventa una riga che scorre: sei voci che vanno a capo
     su tre righe sono tre righe di testata in meno per il contenuto. */
  .rt-header__nav .rt-contenitore {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .rt-header__nav .rt-contenitore::-webkit-scrollbar { display: none; }
  .rt-nav { flex-wrap: nowrap; }
}

@media (max-width: 860px) {
  /* Due fasce in meno.

     La fascia di servizio e la riga delle categorie erano 46 + 41 pixel
     fissi in cima a uno schermo da 844: un decimo della pagina occupato
     da tre fatti che si leggono una volta sola e da sei voci che su un
     catalogo di misure non sono il modo in cui si cerca. Tutt'e due
     finiscono nel menu a scomparsa, che si apre quando servono.

     Il telefono di servizio e l'interruttore dell'IVA non si perdono:
     stanno nel pannello, il primo in fondo e il secondo in cima. */
  .rt-servizio,
  .rt-header__nav { display: none; }

  /* Una riga sola: marchio, ricerca, menu.

     La ricerca andava a capo e la testata diventava due righe alte 120
     pixel in tutto. Su una riga sola ne bastano 56, e la composizione e'
     quella che ha qualunque applicazione: il marchio a sinistra, il
     comando al centro, il menu a destra. Conto e carrello non sono piu'
     qui: sono scesi nella barra in fondo, dove arriva il pollice. */
  .rt-header__barra { min-height: 56px; gap: var(--rt-s3); flex-wrap: nowrap; }
  .rt-cerca { order: 0; flex: 1 1 auto; max-width: none; margin: 0; }

  /* Il campo si fa piccolo e perde il pulsante: qui non e' un modulo da
     compilare, e' una porta. Toccandolo si apre la ricerca a tutto
     schermo, dove i suggerimenti hanno lo spazio per leggersi.

     Niente bordo e fondo appena accennato: un campo bordato in una barra
     bianca e' un rettangolo dentro un rettangolo. L'aria intorno alla
     lente e all'invito conta piu' del bordo — e' il bordo che il campo
     non ha a dire che e' leggero. */
  .rt-cerca input[type="search"] {
    padding: 6px var(--rt-s4) 6px 2.4rem;
    border-color: transparent;
    background: var(--rt-superficie-2);
  }
  .rt-cerca input[type="search"]:focus {
    border-color: transparent;
    background: var(--rt-superficie-2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-blu) 14%, transparent);
  }
  /* La lente piu' marcata: a tratto sottile dentro un campo senza bordo
     spariva, ed era l'unica cosa che diceva cos'e' quel campo. */
  .rt-cerca__icona {
    inset-inline-start: var(--rt-s4);
    color: var(--rt-ink-2);
    stroke-width: 2.4;
  }
  .rt-cerca__vai { display: none; }

  /* L'invito sta fermo.

     Girava fra cinque parole in dissolvenza. L'idea era che il movimento
     facesse guardare il campo; l'effetto e' che in una barra alta
     cinquantasei pixel, sopra una pagina che si legge, c'e' una cosa che
     si muove da sola e non serve a niente. Resta "Cosa cerchi?", che e'
     la riga che dice cosa fare. */
  .rt-cerca input[type="search"]::placeholder { color: var(--rt-ink-3); opacity: 1; }

  /* Il pannello dei suggerimenti della testata non serve piu' sul
     telefono: i suggerimenti li mostra la schermata a tutto schermo. */
  .rt-cerca__pannello { display: none; }

  .rt-marchio { height: 17px; }
  /* Il ripiego scritto, per quando il file del marchio non c'e': alla
     misura da desktop si prendeva meta' della riga. */
  .rt-logo-testo { font-size: var(--rt-t-base); }

  /* Conto e carrello restano nel documento — li' sono il collegamento
     vero, e senza JavaScript sono l'unico modo di arrivarci — ma si
     disegnano in fondo, non qui. */
  .rt-header__azioni .rt-azione { display: none; }

  /* Sedici pixel esatti, e non uno meno.

     Sotto i 16px Safari su iPhone ingrandisce la pagina quando il campo
     prende il fuoco, e poi la lascia ingrandita: si tocca "cerca" e il
     sito diventa storto. Non e' una preferenza che si possa disattivare
     da CSS — maximum-scale nel viewport lo farebbe, ma toglie anche il
     pizzico per ingrandire a chi ci vede poco, e quello e' un prezzo che
     non paghiamo. */
  .rt-cerca input[type="search"] { font-size: 16px; }

  /* Le azioni al bordo destro.

     Senza questo margine il gruppo si appoggiava al marchio — logo,
     conto, carrello tutti a sinistra e mezza barra vuota a destra —
     perche' la ricerca, andata a capo, non teneva piu' lo spazio in
     mezzo. */
  .rt-header__azioni { margin-inline-start: auto; gap: var(--rt-s1); }

  /* La ricerca non si ritira piu' scorrendo: sta sulla stessa riga del
     marchio, e ritirarla vorrebbe dire ritirare la testata. Le regole
     che la nascondevano sono state tolte, non commentate: una
     transizione su un elemento che non si muove piu' e' codice che il
     prossimo lettore deve capire per scoprire che non fa niente. */

  /* La navigazione si stringe, per le larghezze fra 861 e 1000 dove
     ancora si vede. */
  .rt-header__nav .rt-nav { padding-block: var(--rt-s2); }
  .rt-nav > li > a,
  .rt-nav__trigger { padding: var(--rt-s2) var(--rt-s3); }

  .rt-azione { padding: var(--rt-s3); }
  .rt-azione > span:not(.rt-icona__conta) { display: none; }
  /* Il numerino scendeva di qualche pixel sopra l'icona e finiva a
     filo del bordo alto della barra, tagliato a meta' dal margine
     dello schermo. Sei pixel piu' in basso e tre piu' dentro: resta
     attaccato alla borsa, che e' il suo mestiere, e non tocca piu'
     niente. */
  .rt-azione .rt-icona__conta {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 3px;
    min-width: 17px;
    height: 17px;
    font-size: 10px;
    box-shadow: 0 0 0 2px var(--rt-superficie);
  }

}

/* ── La chiusura del piede ───────────────────────────────────────────────
   Il marchio in filigrana, e sotto di lui le righe che si cercano in
   fondo a un sito: copyright, documenti, chi l'ha fatto.

   Prima la filigrana era a tutta larghezza e sbordava dai lati. Dentro il
   contenitore dice un'altra cosa: non e' una stampa tagliata dal bordo,
   e' la firma in fondo al foglio — e sotto una firma ci si aspetta di
   trovare i dati, non il vuoto.

   Testo e non immagine: scala a qualunque larghezza senza sfocare e non
   costa una richiesta di rete.                                          */

.rt-footer { position: relative; overflow: hidden; }

.rt-footer__chiusura {
  margin-block-start: clamp(2.5rem, 5vw, 4.5rem);
  padding-block-start: var(--rt-s8);
  border-block-start: 1px solid var(--rt-linea);
  text-align: center;
}

/* Il file del marchio usato come MASCHERA.

   La maschera tiene la forma e butta i colori: il logo esce di una tinta
   sola, con l'opacita' che decidiamo qui. E' la differenza fra una
   filigrana e un logo sbiadito — e fra il marchio vero e il suo nome
   ricomposto a mano con il carattere del sito, che a questa dimensione
   si vede che non e' la stessa cosa.

   La proporzione e' quella del file (383,49 x 49,2): scritta qui, la
   casella non ha bisogno di sapere quanto e' alta. */
.rt-footer__filigrana { display: none; }

/* Senza maschere non si disegna niente: il fondo da solo sarebbe un
   rettangolo grigio alto centotrenta pixel, che e' peggio del nulla. */
@supports (mask: url("#f")) or (-webkit-mask: url("#f")) {
  .rt-footer__filigrana {
    display: block;
    width: min(100%, 64rem);
    margin-inline: auto;
    aspect-ratio: 383.49 / 49.2;
    background-color: color-mix(in srgb, var(--rt-ink) 9%, transparent);
    -webkit-mask: url("../img/logo.svg") center / contain no-repeat;
    mask: url("../img/logo.svg") center / contain no-repeat;
    pointer-events: none;
    user-select: none;
  }
}

.rt-footer__coda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-s3) var(--rt-s6);
  flex-wrap: wrap;
  margin-block-start: var(--rt-s6);
  color: var(--rt-ink-3);
  font-size: var(--rt-t-xs);
}

.rt-footer__legali ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rt-s2) var(--rt-s5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rt-footer__legali a { color: var(--rt-ink-3); text-decoration: none; }
.rt-footer__legali a:hover { color: var(--rt-ink); text-decoration: underline; text-underline-offset: 3px; }

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

.rt-footer__crediti {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  margin: var(--rt-s5) 0 0;
  color: var(--rt-ink-3);
  font-size: var(--rt-t-xs);
}
.rt-footer__crediti a { color: var(--rt-ink-2); font-weight: var(--rt-peso-medio); text-decoration: none; }
.rt-footer__crediti a:hover { color: var(--rt-blu); }

/* Due battiti e una pausa, come un cuore vero: un lampeggio regolare
   sembra un errore, questo sembra un cuore. */
.rt-cuore {
  display: inline-flex;
  color: var(--rt-errore);
  animation: rt-battito 2.4s ease-in-out infinite;
  transform-origin: center;
}
@keyframes rt-battito {
  0%, 100% { transform: scale(1); }
  8%       { transform: scale(1.28); }
  16%      { transform: scale(1); }
  24%      { transform: scale(1.18); }
  32%      { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .rt-cuore { animation: none; }
}


/* ── Il menu del telefono ────────────────────────────────────────────────
   Un foglio che entra da destra, non un elenco che si srotola sotto la
   testata.

   PERCHE' UN FOGLIO E NON UNA TENDINA
   -----------------------------------
   La tendina spinge giu' la pagina: si apre il menu e il prodotto che si
   stava guardando scappa in fondo allo schermo, e chiudendo si torna in
   un posto diverso da quello da cui si era partiti. Il foglio copre, non
   sposta: sotto la pagina resta ferma dov'era, e questo e' precisamente
   il gesto che fanno le applicazioni.

   LE VOCI ENTRANO UNA DOPO L'ALTRA
   --------------------------------
   Trentotto millesimi di ritardo l'una dall'altra, contati dall'attributo
   --i scritto nel documento. Non e' decorazione: l'occhio segue un
   movimento e trova il primo elemento dell'elenco senza cercarlo, mentre
   un pannello che compare tutto insieme costringe a rileggerlo dall'alto.
   Con il movimento ridotto entra tutto insieme, senza scatti.

   NIENTE display:none SUL FOGLIO
   ------------------------------
   La transizione serve una posizione di partenza: con display:none il
   browser non ha niente da cui muoversi e il pannello comparirebbe gia'
   arrivato. Sta fuori schermo con translateX e sparisce con l'attributo
   hidden sul contenitore, che il JavaScript toglie un fotogramma prima di
   far partire l'animazione.                                             */

/* I tratti si accorciano verso SINISTRA, cioe' sono pari a destra.

   Allineati a sinistra l'icona si leggeva come una scaletta che scende
   verso destra, e accanto al bordo dello schermo sembrava storta. Pari a
   destra il lato dritto e' quello vicino al bordo, e l'asimmetria si
   legge come una scelta. */
.rt-burger {
  display: none;
  place-items: center end;
  align-content: center;
  justify-content: center;
  grid-auto-rows: 2px;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: var(--rt-r-sm);
  background: transparent;
  cursor: pointer;
  transition: background var(--rt-transizione);
}
.rt-burger:hover { background: var(--rt-superficie-2); }
.rt-burger:focus-visible { outline: 2px solid var(--rt-blu); outline-offset: 2px; }

/* Subito sotto la regola che scavalca, e non lassu' nel blocco telefono
   della testata: quel blocco nel foglio viene prima, e a parita' di
   specificita' vinceva il display:none scritto dopo. Il pulsante c'era,
   non si vedeva, e il menu non si apriva. */
@media (max-width: 860px) {
  .rt-burger { display: inline-grid; }
}

/* Tre tratti di lunghezza diversa, non tre uguali.

   Tre righe della stessa lunghezza sono il disegno che ha qualunque
   sito dal 2012, e si riconosce prima ancora di guardarlo. Qui la
   seconda e la terza sono via via piu' corte: l'icona diventa
   asimmetrica, cioe' disegnata, e si legge lo stesso in un decimo di
   secondo.

   Al tocco i tratti si allineano tutti e tre per un istante prima di
   incrociarsi: e' quel passaggio a far sembrare l'apertura un
   movimento invece di uno scambio di icone. Lo stesso allineamento
   avviene al passaggio del mouse, dove il mouse c'e'. */
.rt-burger__t {
  height: 2px;
  border-radius: 2px;
  background: var(--rt-ink);
  transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity 160ms ease;
}
.rt-burger__t:nth-child(1) { width: 20px; }
.rt-burger__t:nth-child(2) { width: 14px; }
.rt-burger__t:nth-child(3) { width: 17px; }

.rt-burger:hover .rt-burger__t,
.rt-burger:active .rt-burger__t { width: 20px; }

.rt-burger[aria-expanded="true"] .rt-burger__t { width: 20px; }
.rt-burger[aria-expanded="true"] .rt-burger__t:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rt-burger[aria-expanded="true"] .rt-burger__t:nth-child(2) { opacity: 0; transform: scaleX(0.3); }
.rt-burger[aria-expanded="true"] .rt-burger__t:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.rt-menu {
  position: fixed;
  inset: 0;
  z-index: 200;        /* sopra la testata appiccicata, che sta a 100 */
}
.rt-menu[hidden] { display: none; }

/* A TUTTO SCHERMO, NON UN CASSETTO.
   Un pannello da 26rem che entra da destra lascia una striscia di pagina
   scura a sinistra: su un telefono e' l'unica cosa che distingue un menu
   da un'applicazione. A tutto schermo il menu diventa una schermata, e
   l'apertura puo' essere un passaggio invece di un'anta che scorre.

   Il velo resta anche se il foglio copre tutto: e' lui a dare la
   sfocatura sotto mentre il foglio sale, e nei 420 ms in cui il foglio
   non e' ancora arrivato sotto c'e' qualcosa, non la pagina nuda. */

.rt-menu__velo {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--rt-ink) 38%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 280ms ease;
}
.rt-menu.e-aperto .rt-menu__velo { opacity: 1; }

.rt-menu__foglio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--rt-superficie);
  /* Sale di poco e si apre: un movimento da applicazione, non da anta.
     16 pixel e uno 0,98 di scala sono quasi niente — ma e' quel quasi
     niente che fa sembrare il pannello arrivato invece che apparso. */
  opacity: 0;
  transform: translateY(16px) scale(0.985);
  transform-origin: 50% 0;
  transition:
    opacity 260ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  padding-block-end: env(safe-area-inset-bottom, 0px);
}
.rt-menu.e-aperto .rt-menu__foglio { opacity: 1; transform: none; }

.rt-menu__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s4);
  padding: var(--rt-s4) var(--rt-s5);
  padding-block-start: calc(var(--rt-s4) + env(safe-area-inset-top, 0px));
  border-block-end: 1px solid var(--rt-linea);
}
.rt-menu__x {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie-2);
  color: var(--rt-ink-2);
  cursor: pointer;
  transition: background var(--rt-transizione), color var(--rt-transizione);
}
.rt-menu__x:hover { background: var(--rt-linea); color: var(--rt-ink); }

/* Il corpo scorre, la testa e il piede no: su un telefono basso l'elenco
   delle categorie passa sotto il bordo, e un pannello che scorre tutto si
   porta via anche il modo di chiuderlo. */
.rt-menu__corpo {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--rt-s6) var(--rt-s5);
}
/* Su tutto schermo le voci possono essere piu' grandi: non devono piu'
   stare in un cassetto. */
.rt-menu__voci a {
  padding-block: var(--rt-s4);
  font-size: 1.125rem;
}

/* L'entrata sfalsata. Il ritardo lo porta ogni elemento con se' in --i,
   scritto nel documento: cosi' il CSS non deve sapere quante categorie
   ci sono. */
.rt-menu__iva,
.rt-menu__voci > li,
.rt-menu__misure {
  opacity: 0;
  transform: translateY(18px);
}
.rt-menu.e-aperto .rt-menu__iva,
.rt-menu.e-aperto .rt-menu__voci > li,
.rt-menu.e-aperto .rt-menu__misure {
  opacity: 1;
  transform: none;
  /* Il ritardo di partenza aspetta che il foglio sia arrivato (180 ms),
     poi una voce ogni 45: con un pannello a tutto schermo le voci sono
     piu' distanti fra loro e un passo troppo stretto le fa sembrare
     partite tutte insieme. */
  transition: opacity 340ms ease calc(180ms + var(--i, 0) * 45ms),
              transform 520ms cubic-bezier(0.22, 1, 0.36, 1) calc(180ms + var(--i, 0) * 45ms);
}
/* Anche testa e piede entrano, ai due capi dello sfalsamento: se restano
   fermi mentre l'elenco arriva, sembrano appartenere a un'altra schermata. */
.rt-menu__testa,
.rt-menu__piede { opacity: 0; transform: translateY(-8px); }
.rt-menu__piede { transform: translateY(10px); }
.rt-menu.e-aperto .rt-menu__testa,
.rt-menu.e-aperto .rt-menu__piede {
  opacity: 1;
  transform: none;
  transition: opacity 320ms ease 120ms, transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}
.rt-menu.e-aperto .rt-menu__piede { transition-delay: 300ms; }

/* L'interruttore dell'IVA viveva nella fascia di servizio, che sul
   telefono non c'e' piu'. Qui e' la prima cosa del pannello e prende
   tutta la riga: due pulsanti larghi mezzo pannello si toccano senza
   mirare, che e' l'unico modo in cui un interruttore di prezzo serve
   davvero. */
.rt-menu__iva {
  margin-block-end: var(--rt-s5);
  padding-block-end: var(--rt-s5);
  border-block-end: 1px solid var(--rt-linea);
}
.rt-menu__iva .rt-iva { display: grid; gap: var(--rt-s2); width: 100%; }
.rt-menu__iva .rt-iva__gruppo { display: grid; grid-template-columns: 1fr 1fr; }
.rt-menu__iva .rt-iva__btn { padding-block: var(--rt-s3); font-size: var(--rt-t-sm); }

.rt-menu__voci {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rt-menu__voci a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s4);
  padding: var(--rt-s4) var(--rt-s3);
  border-radius: var(--rt-r-md);
  color: var(--rt-ink);
  font-size: 1.0625rem;
  font-weight: var(--rt-peso-medio);
  line-height: 1.25;
  text-decoration: none;
  transition: background var(--rt-transizione), color var(--rt-transizione);
}
.rt-menu__voci a:active { background: var(--rt-superficie-2); }
.rt-menu__voci a svg { flex: none; color: var(--rt-ink-3); }
.rt-menu__voci a[aria-current] { color: var(--rt-blu); background: var(--rt-blu-tenue); }

.rt-menu__misure {
  margin-block-start: var(--rt-s5);
  padding-block-start: var(--rt-s5);
  border-block-start: 1px solid var(--rt-linea);
}
.rt-menu__et {
  display: block;
  margin-block-end: var(--rt-s3);
  font-size: 0.6875rem;
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-ink-3);
}
.rt-menu__misure ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--rt-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rt-menu__misure ul a {
  display: block;
  padding: var(--rt-s3) var(--rt-s2);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-sm);
  color: var(--rt-ink);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-sm);
  text-align: center;
  text-decoration: none;
}
.rt-menu__misure ul a:active { border-color: var(--rt-blu); background: var(--rt-blu-tenue); }
.rt-menu__tutte {
  display: inline-block;
  margin-block-start: var(--rt-s4);
  color: var(--rt-blu);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  text-decoration: none;
}

.rt-menu__piede {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rt-s2);
  flex: none;
  padding: var(--rt-s4) var(--rt-s5);
  border-block-start: 1px solid var(--rt-linea);
  background: var(--rt-superficie-2);
}
/* Un pulsante solo, scuro, largo quanto il pannello.

   Qui c'era anche la pastiglia con il numero di telefono. Due pastiglie
   bianche affiancate su fondo chiaro erano due cose che si somigliavano
   senza che nessuna delle due si vedesse, e il numero e' scritto in
   altri tre punti del sito. Il conto resta, perche' da li' si passa per
   ordini, resi e fatture.

   Il colore scritto in ogni stato: in base.css "a:hover" vale piu' di
   una classe sola, e senza questi il testo bianco dentro la pastiglia
   nera diventava blu scuro su nero. */
.rt-menu__piede-a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-s2);
  padding: var(--rt-s4);
  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;
}
.rt-menu__piede-a:hover,
.rt-menu__piede-a:focus,
.rt-menu__piede-a:focus-visible,
.rt-menu__piede-a:active { background: var(--rt-ink-2); color: var(--rt-superficie); }

/* Lo scorrimento della pagina sotto si ferma.

   Il blocco vero lo fa testata.js, mettendo il corpo in position:fixed
   alzato di quanto si era scorso: cosi' la pagina resta disegnata dov'era
   e riaprendo si torna alla stessa riga. Con overflow:hidden su <html>,
   che e' il modo ovvio, iOS perdeva la posizione — e il dito che cercava
   la barra di ricerca finiva su un prodotto.

   Questa riga e' la cintura: impedisce che resti una barra di
   scorrimento attiva mentre il corpo e' fisso. */
html.e-bloccata { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .rt-menu__foglio,
  .rt-menu__velo,
  .rt-burger__t { transition-duration: 0ms; }
  .rt-menu.e-aperto .rt-menu__iva,
  .rt-menu.e-aperto .rt-menu__voci > li,
  .rt-menu.e-aperto .rt-menu__misure,
  .rt-menu.e-aperto .rt-menu__testa,
  .rt-menu.e-aperto .rt-menu__piede { transition-delay: 0ms; transition-duration: 0ms; }
  /* Con il movimento ridotto il menu compare gia' intero: niente salita,
     niente sfalsamento, ma nemmeno un pannello che resta invisibile
     perche' la sua transizione e' stata azzerata a meta' strada. */
  .rt-menu__testa,
  .rt-menu__piede,
  .rt-menu__foglio { opacity: 1; transform: none; }
}

/* ── La barra in fondo ───────────────────────────────────────────────────
   Conto, carrello e l'interruttore dell'IVA, dove arriva il pollice.

   Stavano nell'angolo in alto a destra della testata, che su un telefono
   tenuto con una mano e' il punto piu' lontano dal pollice. In fondo si
   raggiungono senza cambiare presa, e la testata resta con tre cose sole.

   Non copre il piede pagina: il corpo prende un'imbottitura in basso pari
   all'altezza della barra, perche' una barra fissa sopra i recapiti e'
   una barra che nasconde proprio cio' che si cerca arrivando in fondo.  */

/* L'altezza della barra, scritta una volta sola.

   La usano in tre: l'imbottitura in fondo al documento, la barra
   d'acquisto della scheda prodotto che si appoggia sopra questa, e la
   pastiglia dell'assistente che deve stare sopra tutt'e due. Misurata al
   banco: 64 pixel piu' il bordo sicuro dei telefoni senza tasto. */
.rt-giu { display: none; }

@media (max-width: 860px) {

  :root { --rt-giu-h: calc(64px + env(safe-area-inset-bottom, 0px)); }

  .rt-giu {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rt-s3);
    padding: var(--rt-s2) var(--rt-gutter);
    padding-block-end: calc(var(--rt-s2) + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--rt-superficie) 90%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
    border-block-start: 1px solid var(--rt-linea);
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Lo spazio che la barra si prende, restituito al documento. */
  body { padding-block-end: var(--rt-giu-h); }

  .rt-giu__iva .rt-iva { gap: 0; }
  .rt-giu__iva .rt-iva__etichetta { display: none; }
  .rt-giu__iva .rt-iva__gruppo { padding: 2px; }
  .rt-giu__iva .rt-iva__btn { padding: 5px var(--rt-s3); font-size: 0.6875rem; }

  .rt-giu__azioni { display: flex; align-items: center; gap: var(--rt-s1); }

  .rt-giu__a {
    display: inline-grid;
    justify-items: center;
    gap: 2px;
    min-width: 58px;
    padding: 4px var(--rt-s2);
    border-radius: var(--rt-r-sm);
    color: var(--rt-ink-2);
    font-size: 0.625rem;
    font-weight: var(--rt-peso-medio);
    text-decoration: none;
    transition: color var(--rt-transizione);
  }
  .rt-giu__a:active { color: var(--rt-blu); }

  /* Il numerino si appoggia all'icona, non alla casella: con la parola
     sotto, l'angolo in alto a destra della casella e' a otto pixel dalla
     borsa e il pallino sembrava staccato da tutto. */
  .rt-giu__i { position: relative; display: block; line-height: 0; }
  .rt-giu__i .rt-icona__conta {
    position: absolute;
    inset-block-start: -5px;
    inset-inline-end: -8px;
    min-width: 17px;
    height: 17px;
    font-size: 10px;
    box-shadow: 0 0 0 2px var(--rt-superficie);
  }
}

/* ── La ricerca a tutto schermo ──────────────────────────────────────────
   Toccando il campo della testata si apre questa, con il cursore gia'
   dentro e la tastiera gia' alzata.

   Il motivo e' aritmetico: sul telefono il campo della testata e' largo
   poco piu' di duecento pixel, e il pannello dei suggerimenti che gli si
   apre sotto e' largo uguale, con la tastiera che intanto si prende meta'
   schermo. I suggerimenti finivano in una fessura di tre righe. Qui hanno
   tutta la pagina.

   Finche' non si scrive si vedono le misure piu' richieste e le
   categorie: chi apre la ricerca senza sapere cosa scrivere non trova il
   vuoto.                                                                */

.rt-cercapieno { display: none; }

@media (max-width: 860px) {

  /* Scende dall'alto, perche' dall'alto e' stata chiamata.

     Prima si muoveva di otto pixel e quegli otto pixel, su un'opacita'
     che cambiava piu' in fretta del movimento, si leggevano come uno
     scatto che arrivava dal basso. Adesso parte da meno un decimo di
     schermo con l'origine in cima: il foglio scorre giu' dal bordo
     superiore, che e' esattamente da dove e' partito il dito.

     Il tempo e' lo stesso del foglio del menu, 380ms: due pannelli che
     si aprono alla stessa velocita' sono lo stesso sito; a velocita'
     diverse sono due pezzi montati insieme. */
  .rt-cercapieno {
    position: fixed;
    inset: 0;
    z-index: 210;      /* sopra il menu, che sta a 200 */
    display: flex;
    flex-direction: column;
    background: var(--rt-superficie);
    opacity: 0;
    transform: translateY(-14px);
    transform-origin: top center;
    will-change: transform, opacity;
    /* Breve e deciso: una schermata che si apre al tocco deve essere gia'
       li'. Trecentoottanta millesimi erano giusti per un foglio che entra
       da un lato, troppi per una schermata che arriva dall'alto mentre
       sale la tastiera. */
    transition: opacity 180ms ease,
                transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  .rt-cercapieno[hidden] { display: none; }
  .rt-cercapieno.e-aperto { opacity: 1; transform: none; }

  /* Un solo strato che si muove.

     Qui testa e corpo entravano con un loro ritardo, sopra il foglio che
     intanto scorreva: tre animazioni insieme mentre il sistema alza la
     tastiera e ricalcola l'altezza della finestra. Su un telefono vero
     quelle tre cose si pestano i piedi, e il risultato era uno scatto.
     Si muove solo il foglio, e si muove su due proprieta' che la scheda
     grafica sa fare da sola: opacita' e trasformazione. */

  .rt-cercapieno__testa {
    display: flex;
    align-items: center;
    gap: var(--rt-s3);
    flex: none;
    padding: var(--rt-s3) var(--rt-gutter);
    padding-block-start: calc(var(--rt-s3) + env(safe-area-inset-top, 0px));
    border-block-end: 1px solid var(--rt-linea);
  }

  .rt-cercapieno__campo {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
  }
  .rt-cercapieno__campo svg {
    position: absolute;
    inset-inline-start: var(--rt-s3);
    color: var(--rt-ink-3);
    pointer-events: none;
  }
  .rt-cercapieno__campo input[type="search"] {
    width: 100%;
    padding: 11px var(--rt-s4) 11px 2.4rem;
    border: 0;
    border-radius: var(--rt-r-sm);
    background: var(--rt-superficie-2);
    font-family: var(--rt-font);
    /* Sedici pixel: sotto, iOS ingrandisce la pagina al fuoco. */
    font-size: 16px;
    color: var(--rt-ink);
  }
  .rt-cercapieno__campo input[type="search"]:focus { outline: 2px solid var(--rt-blu); outline-offset: 1px; }

  .rt-cercapieno__annulla {
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rt-blu);
    font-family: var(--rt-font);
    font-size: var(--rt-t-sm);
    font-weight: var(--rt-peso-medio);
    cursor: pointer;
  }

  .rt-cercapieno__corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--rt-s4) var(--rt-gutter) var(--rt-s10);
  }

  /* Il pannello dei risultati non e' sospeso: e' il contenuto della
     pagina. Niente ombra, niente bordo, niente posizione assoluta. */
  .rt-cercapieno__pannello {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    max-height: none;
    overflow: visible;
  }
  .rt-cercapieno__pannello[hidden] { display: none; }

  /* Gli spunti spariscono appena ci sono risultati veri: due elenchi uno
     sotto l'altro fanno dubitare di quale sia la risposta. */
  .rt-cercapieno.e-risultati .rt-cercapieno__spunti { display: none; }

  .rt-cercapieno__spunti .rt-menu__et { margin-block: var(--rt-s4) var(--rt-s3); }
  .rt-cercapieno__spunti .rt-menu__et:first-child { margin-block-start: 0; }

  .rt-cercapieno__chip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rt-s2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .rt-cercapieno__chip a {
    display: block;
    padding: var(--rt-s2) var(--rt-s4);
    border: 1px solid var(--rt-linea);
    border-radius: var(--rt-r-pill);
    color: var(--rt-ink);
    font-family: var(--rt-font-dati);
    font-variant-numeric: tabular-nums;
    font-size: var(--rt-t-sm);
    text-decoration: none;
  }
  .rt-cercapieno__chip a:active { border-color: var(--rt-blu); background: var(--rt-blu-tenue); }

  .rt-cercapieno__cat { margin: 0; padding: 0; list-style: none; }
  .rt-cercapieno__cat a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rt-s4);
    padding: var(--rt-s3) 0;
    border-block-end: 1px solid var(--rt-linea);
    color: var(--rt-ink);
    font-size: var(--rt-t-base);
    text-decoration: none;
  }
  .rt-cercapieno__cat li:last-child a { border-block-end: 0; }
  .rt-cercapieno__cat svg { flex: none; color: var(--rt-ink-3); }
}

@media (prefers-reduced-motion: reduce) {
  .rt-cercapieno, .rt-giu { transition-duration: 0ms; }
}