/* ============================================================================
   Base — reset e stili degli elementi
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--rt-fondo);
  color: var(--rt-ink);
  font-family: var(--rt-font);
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-normale);
  line-height: var(--rt-interlinea);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-testa);
  line-height: 1.15;
  text-wrap: balance;
}
/* IL TITOLO DI PAGINA E' PIU' PICCOLO DI PRIMA, su tutto il sito.
   Trentaquattro pixel su un telefono sono due righe di titolo prima di
   qualunque cosa si sia venuti a fare, e in cima a una pagina di negozio
   il titolo non e' l'informazione: la merce lo e'. Ventisei bastano a dire
   dove si e'. Sul grande resta un titolo, ma smette di essere un cartello:
   44 invece di 60. */
h1 {
  font-size: clamp(1.625rem, 4.2vw, var(--rt-t-3xl));
  font-weight: var(--rt-peso-titolo);
  letter-spacing: var(--rt-tracking-titolo);
  line-height: var(--rt-interlinea-stretta);
}
h2 { font-size: clamp(1.625rem, 3.6vw, var(--rt-t-2xl)); }
h3 { font-size: var(--rt-t-xl); }
h4 { font-size: var(--rt-t-lg); }

p, ul, ol { margin: 0 0 var(--rt-s4); }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

/* I collegamenti, con specificita' ZERO.
   -------------------------------------------------------------------
   Questa regola ha gia' prodotto tre bug identici, tutti dello stesso
   tipo: testo bianco dentro un pulsante scuro che al passaggio del mouse
   diventava blu su nero, illeggibile. "a:hover" vale 0,1,1 e batte
   qualunque classe singola: ".rt-correlati__tutte", ".rt-btn--chiaro",
   ".rt-servizio__tel". Ogni volta la si curava sul posto, e ogni volta
   ricompariva su un pulsante nuovo.

   :where() azzera la specificita' di quello che contiene. Cosi' questi
   due valori restano il comportamento di base dei collegamenti nudi, ma
   QUALUNQUE regola con una classe li batte senza doverlo chiedere. Il
   bug non si cura piu': non puo' piu' nascere.

   Due :where() e non uno: a specificita' pari decide l'ordine, quindi
   la riga dell'hover deve stare dopo quella del colore di base. */
:where(a) {
  color: var(--rt-blu);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--rt-transizione);
}
:where(a:hover) { color: var(--rt-blu-scuro); }

img, video, svg { max-width: 100%; height: auto; display: block; }

/* Rete di sicurezza contro lo scorrimento laterale.
   Non e' la soluzione — la soluzione e' contenere il contenuto che lo
   provoca, e si fa caso per caso — ma un sito che si sposta di lato su un
   telefono sembra rotto anche quando il resto e' perfetto.
   clip e non hidden: hidden spegnerebbe position:sticky in tutta la pagina. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* I numeri incolonnati devono restare incolonnati: prezzi, misure, tabelle. */
.rt-dati, table, .rt-prezzo {
  font-variant-numeric: tabular-nums;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

/* Il focus si deve vedere sempre. Non e' un vezzo di accessibilita':
   e' cio' che rende il sito usabile da tastiera in un checkout. */
:focus-visible {
  outline: 2px solid var(--rt-blu);
  outline-offset: 2px;
  border-radius: var(--rt-r-sm);
}

/* Visibile solo agli screen reader */
/* L'attributo hidden spegne un elemento solo attraverso il foglio di stile
   del browser, che qualunque display: d'autore batte senza fatica. Il
   pannello dell'assistente aveva display:flex e quindi restava aperto per
   sempre, con la X che non poteva chiuderlo perche' non c'era niente da
   chiudere: era gia' tutto visibile.

   Vale per tutto il sito, non solo per quel pannello: hidden in HTML deve
   voler dire nascosto, punto. L'!important e' necessario perche' deve
   vincere su regole piu' specifiche di questa. */
[hidden] { display: none !important; }

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

/* Salta al contenuto: primo elemento focalizzabile della pagina */
.rt-salta {
  position: absolute;
  left: var(--rt-s4);
  top: -100px;
  z-index: 999;
  padding: var(--rt-s3) var(--rt-s5);
  background: var(--rt-blu);
  color: #fff;
  border-radius: var(--rt-r-lg);
  text-decoration: none;
  transition: top var(--rt-transizione);
}
.rt-salta:focus { top: var(--rt-s4); color: #fff; }

/* ── IL TESTO LUNGO: PAGINE LEGALI E INFORMATIVE ──────────────────────────
   Privacy, cookie, condizioni di vendita, reso, spedizioni. Pagine che
   nessuno legge per piacere e che devono essere leggibili lo stesso,
   perche' per il Codice del Consumo devono esserci e devono essere
   comprensibili prima dell'ordine.

   Sta qui e non in un foglio suo perche' index.php le avvolge gia' in
   .rt-testo e non carica altro: un foglio in piu' per cinque pagine
   sarebbe una richiesta in piu' su ogni pagina del sito.

   Le liste avevano i margini ma non il rientro ne' i segni: un elenco di
   obblighi senza pallini e' un muro. I collegamenti dentro il testo non
   erano distinguibili dal testo, e in un'informativa privacy il
   collegamento al responsabile del trattamento non e' un ornamento.     */

.rt-testo { line-height: var(--rt-interlinea); color: var(--rt-ink-2); }
.rt-testo h2 {
  margin-block: var(--rt-s10) var(--rt-s4);
  color: var(--rt-ink);
}
.rt-testo h2:first-child { margin-block-start: 0; }
.rt-testo h3 {
  margin-block: var(--rt-s6) var(--rt-s3);
  font-size: var(--rt-t-lg);
  color: var(--rt-ink);
}
.rt-testo ul, .rt-testo ol { padding-inline-start: 1.4em; }
.rt-testo li { margin-block-end: var(--rt-s2); }
.rt-testo li::marker { color: var(--rt-ink-3); }
.rt-testo strong { color: var(--rt-ink); font-weight: var(--rt-peso-forte); }
.rt-testo a {
  color: var(--rt-blu);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.rt-testo a:hover { color: var(--rt-blu-scuro); }

/* Il riquadro "in due parole": ogni pagina legale comincia con il
   succo in chiaro, e il resto e' il testo che vale. Chi ha fretta
   legge il riquadro, chi ha un dubbio legge sotto. */
.rt-testo .rt-succo {
  margin-block-end: var(--rt-s8);
  padding: var(--rt-s5) var(--rt-s6);
  border-inline-start: 3px solid var(--rt-blu);
  border-radius: var(--rt-r-md);
  background: var(--rt-blu-tenue);
  color: var(--rt-ink);
}
.rt-testo .rt-succo p:last-child { margin-block-end: 0; }

/* La data di aggiornamento: piccola, e in fondo. Un'informativa senza
   data non si sa a quale versione si riferisca, ed e' il primo appunto
   che fa chiunque la controlli. */
.rt-testo .rt-aggiornata {
  margin-block-start: var(--rt-s10);
  padding-block-start: var(--rt-s5);
  border-block-start: 1px solid var(--rt-linea);
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-3);
}

/* Tabelle dentro il testo: i cookie e i tempi di conservazione si
   leggono in tabella, non in elenco. */
.rt-testo table {
  width: 100%;
  margin-block-end: var(--rt-s6);
  border-collapse: collapse;
  font-size: var(--rt-t-sm);
}
.rt-testo th {
  text-align: start;
  padding: var(--rt-s3);
  border-block-end: 1px solid var(--rt-linea);
  color: var(--rt-ink);
  font-size: var(--rt-t-xs);
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
}
.rt-testo td { padding: var(--rt-s3); border-block-end: 1px solid var(--rt-linea); vertical-align: top; }

/* Sul telefono la tabella dei cookie non ci sta: scorre di lato invece
   di schiacciare le colonne a venti pixel. */
@media (max-width: 620px) {
  .rt-testo .rt-tabella-scorre { overflow-x: auto; }
  .rt-testo .rt-tabella-scorre table { min-width: 34rem; }
}