/* ============================================================================
   Centro risposte — il pannello
   ========================================================================= */

/* ── Il pulsante ──────────────────────────────────────────────────────────
   In basso a destra, sopra la barra d'acquisto mobile ma mai sul checkout.  */

.rt-ass__apri {
  position: fixed;
  right: var(--rt-s5);
  bottom: calc(var(--rt-s5) + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  padding: var(--rt-s3) var(--rt-s5);
  border: 0;
  border-radius: var(--rt-r-pill);
  background: var(--rt-ink);
  color: #fff;
  font-family: var(--rt-font);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(11, 18, 32, 0.18);
  transition: background var(--rt-transizione), transform var(--rt-transizione);
}
.rt-ass__apri:hover { background: var(--rt-blu); transform: translateY(-1px); }
.rt-ass__apri:active { transform: scale(0.98); }

/* Sulle schede prodotto la barra d'acquisto occupa il fondo: la pastiglia
   sale, invece di finirci sotto.

   Fuori dalla media query: prima valeva solo sotto i 960px, perche' la
   barra era solo per telefono. Adesso la barra c'e' anche su schermo
   grande, e li' la pastiglia ci finiva mezza dentro. */
body.rt-ha-fisso .rt-ass__apri { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
body.rt-ha-fisso .rt-ass { bottom: calc(148px + env(safe-area-inset-bottom, 0px)); }

/* Sul telefono, fuori dalle schede prodotto, il fondo ce l'ha la barra con
   conto e carrello: senza questa riga la pastiglia dell'assistente ci
   finiva sopra, e il pollice toccava l'una per l'altra. Dentro le schede
   prodotto comanda la regola qui sopra, che e' piu' alta di tutt'e due le
   barre. */
/* Sul telefono si conta a partire dalla barra in fondo, che c'e' sempre.
   Quando arriva anche quella d'acquisto — e si appoggia SOPRA la prima,
   non al suo posto — la pastiglia sale ancora: tre cose nello stesso
   angolo, e nessuna deve coprire l'altra. */
@media (max-width: 860px) {
  /* "body" davanti non e' decorazione: la regola qui sopra vale
     "body.rt-ha-fisso .rt-ass__apri", cioe' 0,2,1, e una classe sola
     perdeva proprio sulle schede prodotto. */
  body .rt-ass__apri { bottom: calc(var(--rt-giu-h) + var(--rt-s3)); }
  body .rt-ass { bottom: calc(var(--rt-giu-h) + 60px); }

  html.e-acquisto-fisso body .rt-ass__apri { bottom: calc(var(--rt-giu-h) + 96px); }
  html.e-acquisto-fisso body .rt-ass { bottom: calc(var(--rt-giu-h) + 152px); }
}

@media (max-width: 960px) {
  .rt-ass__apri span { display: none; }
  .rt-ass__apri { padding: var(--rt-s4); }
}

/* IN CIMA ALLA HOME, SUL TELEFONO, LA PASTIGLIA NON C'E'.
   Quell'angolo in basso a destra, nella prima schermata, e' occupato dal
   secondo pulsante della hero: la pastiglia gli finiva sopra e copriva
   "Tutte le misure". Una scorciatoia all'assistenza che si mangia una
   delle due strade che la prima schermata offre e' un cattivo affare.

   La regola e' scritta al rovescio apposta: la pastiglia e' accesa di
   suo, e si spegne SOLO finche' manca la classe che lo script mette
   quando la hero e' passata. Senza JavaScript la classe non arriva —
   ma allora non arriva nemmeno :not(), quindi... no: :not() vale
   sempre. Per questo la condizione include html.rt-js, che c'e' solo a
   script attivo: senza JavaScript la pastiglia resta visibile e il
   pulsante sotto si raggiunge scorrendo di due dita. */
@media (max-width: 860px) {
  html.rt-js:not(.e-oltre-eroe) body.home .rt-ass__apri {
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.75rem) scale(0.9);
    pointer-events: none;
  }
  body.home .rt-ass__apri {
    transition: opacity 260ms ease, transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s, background var(--rt-transizione);
  }
}

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

/* ── Il pannello ──────────────────────────────────────────────────────── */

.rt-ass {
  position: fixed;
  right: var(--rt-s5);
  bottom: calc(var(--rt-s5) + 56px + env(safe-area-inset-bottom, 0px));
  z-index: 96;
  width: min(400px, calc(100vw - var(--rt-s8)));
  max-height: min(640px, calc(100vh - 140px));
  display: flex;
  flex-direction: column;
  background: var(--rt-superficie);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-xl);
  box-shadow: 0 16px 48px rgba(11, 18, 32, 0.18);
  overflow: hidden;
  animation: rt-ass-entra 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
@keyframes rt-ass-entra {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .rt-ass { animation: none; } }

@media (max-width: 560px) {
  .rt-ass {
    right: var(--rt-s3);
    left: var(--rt-s3);
    width: auto;
    bottom: calc(var(--rt-s3) + 56px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 120px);
  }
}

.rt-ass__testata {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rt-s3);
  padding: var(--rt-s5);
  border-bottom: 1px solid var(--rt-linea);
  background:
    radial-gradient(80% 160% at 0% 0%, color-mix(in srgb, var(--rt-blu) 13%, transparent), transparent 70%),
    var(--rt-superficie-2);
}
.rt-ass__testata strong { display: block; font-size: var(--rt-t-base); letter-spacing: -0.012em; }
.rt-ass__testata span { font-size: var(--rt-t-xs); color: var(--rt-ink-3); }

.rt-ass__chiudi {
  flex: none;
  width: 30px; height: 30px;
  border: 0;
  border-radius: var(--rt-r-pill);
  background: transparent;
  color: var(--rt-ink-3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--rt-transizione), color var(--rt-transizione);
}
.rt-ass__chiudi:hover { background: var(--rt-linea); color: var(--rt-ink); }

.rt-ass__cerca {
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--rt-s4) var(--rt-s5) var(--rt-s2);
}
.rt-ass__cerca svg { position: absolute; left: calc(var(--rt-s5) + var(--rt-s3)); color: var(--rt-ink-3); }
.rt-ass__cerca input {
  width: 100%;
  padding: var(--rt-s3) var(--rt-s4) var(--rt-s3) var(--rt-s10);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie-2);
  font-size: var(--rt-t-sm);
}
.rt-ass__cerca input:focus {
  background: var(--rt-superficie);
  border-color: var(--rt-blu);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-blu) 12%, transparent);
}

.rt-ass__corpo {
  flex: 1;
  overflow-y: auto;
  padding: var(--rt-s2) var(--rt-s5) var(--rt-s5);
  -webkit-overflow-scrolling: touch;
}

.rt-ass__gruppo {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-ink-3);
  margin: var(--rt-s3) 0 var(--rt-s2);
}

.rt-ass__voce { border-bottom: 1px solid var(--rt-linea); }
.rt-ass__voce:last-child { border-bottom: 0; }

.rt-ass__domanda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s3);
  width: 100%;
  padding: var(--rt-s4) 0;
  border: 0;
  background: transparent;
  color: var(--rt-ink);
  font-family: var(--rt-font);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  text-align: left;
  cursor: pointer;
  line-height: 1.45;
}
.rt-ass__domanda:hover { color: var(--rt-blu); }
.rt-ass__domanda::after {
  content: "+";
  flex: none;
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  color: var(--rt-ink-3);
  transition: transform var(--rt-transizione);
}
.rt-ass__domanda[aria-expanded="true"]::after { content: "\2212"; }

.rt-ass__domanda em {
  display: block;
  font-style: normal;
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rt-blu);
  margin-top: 2px;
}

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

.rt-ass__spec { margin: 0; padding-left: var(--rt-s5); }
.rt-ass__spec li { margin-bottom: var(--rt-s1); }

.rt-ass__tab {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-xs);
  margin-block: var(--rt-s3);
}
.rt-ass__tab th {
  text-align: left;
  padding: var(--rt-s2);
  border-bottom: 1px solid var(--rt-linea);
  color: var(--rt-ink-3);
  font-weight: var(--rt-peso-medio);
}
.rt-ass__tab td { padding: var(--rt-s2); border-bottom: 1px solid var(--rt-linea); }
.rt-ass__tab tr:last-child td { border-bottom: 0; }
.rt-ass__nota { font-size: 0.6875rem; color: var(--rt-ink-3); }

.rt-ass__vuoto {
  padding: var(--rt-s6) 0;
  text-align: center;
  font-size: var(--rt-t-sm);
  color: var(--rt-ink-3);
  line-height: 1.6;
}

.rt-ass__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s3);
  flex-wrap: wrap;
  padding: var(--rt-s4) var(--rt-s5);
  border-top: 1px solid var(--rt-linea);
  background: var(--rt-superficie-2);
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-3);
}
.rt-ass__contatti { display: flex; gap: var(--rt-s4); }
.rt-ass__contatti a { font-weight: var(--rt-peso-forte); }

/* ── Il riquadro non si taglia mai, e non copre il ritorno in cima ───────
   Si apre verso l'alto a partire dalla pastiglia, e la pastiglia sul
   telefono sta gia' sopra due barre fisse: sommando, il bordo di sopra
   del riquadro finiva oltre la cima dello schermo e la prima riga —
   "Come possiamo aiutarti?" — restava tagliata, senza modo di
   raggiungerla.

   Due regole: l'altezza massima si calcola da quanto schermo resta
   davvero, e il pulsante "torna in cima" si ritira mentre il riquadro e'
   aperto. Ritirarlo e non spostarlo: e' un aiuto alla navigazione, e
   mentre si legge una risposta non si naviga.                          */

.rt-ass {
  max-height: calc(100dvh - 10rem - env(safe-area-inset-top, 0px));
}

body.rt-ass-aperto .rt-su {
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  pointer-events: none;
}

@media (max-width: 860px) {
  .rt-ass {
    /* Quello che resta fra la pastiglia e la cima dello schermo. */
    max-height: calc(100dvh - var(--rt-giu-h) - 7.5rem - env(safe-area-inset-top, 0px));
  }
  html.e-acquisto-fisso .rt-ass {
    max-height: calc(100dvh - var(--rt-giu-h) - 13rem - env(safe-area-inset-top, 0px));
  }
}

/* ── Il campo non fa ingrandire la pagina ────────────────────────────────
   Sotto i sedici pixel Safari su iPhone ingrandisce la pagina quando il
   campo prende il fuoco, e poi la lascia ingrandita: si tocca per
   scrivere una domanda e il riquadro esce dallo schermo.                */
.rt-ass__cerca input[type="search"] { font-size: 16px; }

/* ── Le domande si distinguono una dall'altra ────────────────────────────
   Erano righe separate da un filetto: aperta una, il confine fra la
   risposta e la domanda successiva spariva e il blocco si leggeva come un
   testo unico. Ogni domanda e' una casella con un fondo suo, e quella
   aperta si colora: si vede a colpo d'occhio dove finisce una e comincia
   l'altra.

   Il piu' e il meno sono disegnati con due righe e non scritti: il segno
   meno tipografico cambia larghezza su ogni sistema, e il piu' diventa un
   crocifisso storto.                                                    */

.rt-ass__voce {
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-md);
  background: var(--rt-superficie);
  overflow: hidden;
  transition: border-color var(--rt-transizione), background var(--rt-transizione);
}
.rt-ass__voce + .rt-ass__voce { margin-block-start: var(--rt-s2); }
.rt-ass__voce:has(.rt-ass__domanda[aria-expanded="true"]) {
  border-color: color-mix(in srgb, var(--rt-blu) 35%, var(--rt-linea));
  background: color-mix(in srgb, var(--rt-blu) 4%, var(--rt-superficie));
}

.rt-ass__domanda {
  position: relative;
  width: 100%;
  padding: var(--rt-s3) 2.5rem var(--rt-s3) var(--rt-s4);
  border: 0;
  background: transparent;
  color: var(--rt-ink);
  font-family: var(--rt-font);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  line-height: 1.35;
  text-align: start;
  cursor: pointer;
}
.rt-ass__domanda em {
  display: block;
  margin-block-start: 2px;
  font-style: normal;
  font-size: 0.625rem;
  letter-spacing: var(--rt-tracking-label);
  text-transform: uppercase;
  color: var(--rt-blu);
}

/* Il segno: una croce che ruota di quarantacinque gradi diventa un piu',
   e tolta la riga verticale resta un meno. */
.rt-ass__domanda::before,
.rt-ass__domanda::after {
  content: "";
  position: absolute;
  inset-inline-end: var(--rt-s4);
  inset-block-start: calc(50% - 1px);
  width: 11px;
  height: 2px;
  border-radius: 2px;
  background: var(--rt-ink-3);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease;
}
.rt-ass__domanda::after { transform: rotate(90deg); }
.rt-ass__domanda[aria-expanded="true"]::after { transform: rotate(0deg); opacity: 0; }
.rt-ass__domanda[aria-expanded="true"]::before { background: var(--rt-blu); }

.rt-ass__risposta {
  padding: 0 var(--rt-s4) var(--rt-s4);
  font-size: var(--rt-t-sm);
  line-height: 1.5;
  color: var(--rt-ink-2);
}
.rt-ass__risposta[hidden] { display: none; }

/* ── Il piede: una via d'uscita sola ────────────────────────────────── */
.rt-ass__scrivi {
  color: var(--rt-blu);
  font-weight: var(--rt-peso-medio);
  text-decoration: none;
}
.rt-ass__scrivi:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .rt-ass__domanda::before,
  .rt-ass__domanda::after { transition: none; }
}