/* ============================================================================
   Carrello e checkout
   ========================================================================= */

.rt-carrello {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--rt-s8);
  align-items: start;
  max-width: var(--rt-larghezza);
  margin-inline: auto;
  padding-inline: var(--rt-gutter);
}
@media (max-width: 900px) {
  /* minmax(0,1fr) e non 1fr: "1fr" vuol dire minmax(AUTO,1fr), cioe' la
     colonna non scende sotto la larghezza minima del suo contenuto. La
     tabella dei totali di WooCommerce ha un minimo di settecento pixel,
     e la colonna glieli dava: su un telefono il riquadro usciva dallo
     schermo di trecentocinquanta pixel. */
  .rt-carrello { grid-template-columns: minmax(0, 1fr); }
}

/* ── Righe ────────────────────────────────────────────────────────────── */

.rt-righe { display: grid; gap: var(--rt-s3); }

.rt-riga {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: var(--rt-s4);
  align-items: start;
  padding: var(--rt-s5);
  background: var(--rt-superficie);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-xl);
}
@media (max-width: 620px) {
  .rt-riga { grid-template-columns: 64px minmax(0, 1fr); }
  .rt-riga__prezzo { grid-column: 1 / -1; }
}

.rt-riga__img { width: 88px; }
.rt-riga__img img { border-radius: var(--rt-r-md); background: var(--rt-superficie-2); }
@media (max-width: 620px) { .rt-riga__img { width: 64px; } }

.rt-riga__nome {
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  line-height: 1.35;
  margin: 0;
}
.rt-riga__nome a { color: inherit; text-decoration: none; }
.rt-riga__nome a:hover { color: var(--rt-blu); }

.rt-riga__meta {
  margin-top: var(--rt-s2);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-3);
}
.rt-riga__meta p { margin: 0; }
.rt-riga__meta dl { margin: 0; display: flex; gap: var(--rt-s2); flex-wrap: wrap; }
.rt-riga__meta dt, .rt-riga__meta dd { margin: 0; }

.rt-riga__azioni { margin-top: var(--rt-s3); }
.rt-rimuovi {
  font-size: var(--rt-t-xs);
  color: var(--rt-ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--rt-linea);
}
.rt-rimuovi:hover { color: var(--rt-errore); border-bottom-color: currentColor; }

.rt-riga__prezzo .rt-prezzo__valore { font-size: var(--rt-t-xl); }
.rt-riga__prezzo .rt-prezzo__iva { font-size: var(--rt-t-sm); }
.rt-riga__prezzo .rt-prezzo__secondario { font-size: var(--rt-t-xs); }

/* ── Il suggerimento di quantita' ─────────────────────────────────────────
   Occupa l'intera larghezza della riga, sotto il prodotto a cui si
   riferisce. Non e' un banner: e' una nota a margine con un bottone.      */

.rt-suggerimento {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s4);
  flex-wrap: wrap;
  margin-top: var(--rt-s4);
  padding: var(--rt-s4) var(--rt-s5);
  border-radius: var(--rt-r-lg);
  background: color-mix(in srgb, var(--rt-ok) 7%, var(--rt-superficie-2));
  border: 1px solid color-mix(in srgb, var(--rt-ok) 22%, transparent);
  text-decoration: none;
  color: var(--rt-ink);
  transition: background var(--rt-transizione), border-color var(--rt-transizione);
}
.rt-suggerimento:hover {
  background: color-mix(in srgb, var(--rt-ok) 12%, var(--rt-superficie-2));
  border-color: color-mix(in srgb, var(--rt-ok) 40%, transparent);
  color: var(--rt-ink);
}
.rt-suggerimento__testo { font-size: var(--rt-t-sm); line-height: 1.5; min-width: 0; }
.rt-suggerimento__vai {
  flex: none;
  padding: var(--rt-s2) var(--rt-s5);
  border-radius: var(--rt-r-pill);
  background: var(--rt-ok);
  color: #fff;
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-forte);
  white-space: nowrap;
}

/* ── Coupon e aggiorna ────────────────────────────────────────────────── */

.rt-carrello__coupon {
  display: flex;
  gap: var(--rt-s3);
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--rt-s5);
}
.rt-carrello__coupon input[type="text"] {
  flex: 1 1 200px;
  min-width: 0;
  padding: var(--rt-s3) var(--rt-s4);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-md);
  background: var(--rt-superficie);
  font-size: var(--rt-t-sm);
}
.rt-aggiorna {
  margin-left: auto;
  padding: var(--rt-s2) var(--rt-s4);
  border: 0;
  background: transparent;
  color: var(--rt-ink-3);
  font-size: var(--rt-t-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rt-aggiorna:hover { color: var(--rt-blu); }

/* ── Totali ───────────────────────────────────────────────────────────── */

.rt-carrello__totali {
  position: sticky;
  /* Sotto la testata ferma, non dietro: la misura la scrive testata.js
     sulla radice, ed e' l'altezza vera della barra a questa larghezza. */
  top: calc(var(--rt-appiccica-h, 0px) + var(--rt-s4));
}
/* In una colonna sola non c'e' niente di fianco a cui restare accanto:
   appiccicato, il riquadro dei totali restava fermo mentre la pagina
   scorreva, e i prodotti correlati gli passavano sopra. */
@media (max-width: 900px) {
  .rt-carrello__totali { position: static; }
}
.rt-carrello__totali .cart_totals {
  background: var(--rt-superficie);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-xl);
  padding: var(--rt-s6);
}
.rt-carrello__totali .checkout-button {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--rt-s4);
  padding: var(--rt-s5);
  font-size: var(--rt-t-base);
}

/* LA TABELLA DEI TOTALI SBORDAVA DALLO SCHERMO.
   "table.shop_table" e non ".shop_table": woo-base.css la veste con
   ".woocommerce table.shop_table th", che ha un elemento in piu' e quindi
   vince su una classe e un elemento. Con l'elemento anche qui si pareggia,
   e a parita' vince questo foglio, che si carica dopo.
   E' la shop_table di WooCommerce, e il foglio del plugin le mette
   intestazioni larghe, fondo grigio e nessuna larghezza: su 350 pixel
   usciva dal riquadro e dalla pagina. Qui e' una tabella a due colonne,
   nomi a sinistra e cifre a destra, come quella della cassa: due
   tabelle che dicono la stessa cosa devono avere la stessa faccia. */
.rt-carrello__totali table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: var(--rt-t-sm);
}
.rt-carrello__totali table.shop_table th,
.rt-carrello__totali table.shop_table td {
  padding: var(--rt-s2) 0;
  border: 0;
  background: none;
  text-align: start;
  font-weight: var(--rt-peso-medio);
  color: var(--rt-ink-3);
  letter-spacing: 0;
  text-transform: none;
}
.rt-carrello__totali table.shop_table td {
  text-align: end;
  color: var(--rt-ink-2);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
}
.rt-carrello__totali table.shop_table .order-total th,
.rt-carrello__totali table.shop_table .order-total td {
  padding-block-start: var(--rt-s3);
  border-block-start: 1px solid var(--rt-linea);
  color: var(--rt-ink);
  font-weight: var(--rt-peso-forte);
}
.rt-carrello__totali table.shop_table .order-total td { font-size: var(--rt-t-lg); }
.rt-carrello__totali h2 {
  margin: 0 0 var(--rt-s4);
  font-size: var(--rt-t-base);
  letter-spacing: var(--rt-tracking-testa);
}

/* Il campo del coupon su un telefono: senza min-width un input con un
   placeholder lungo si tiene la larghezza del placeholder e spinge fuori
   tutto il resto. */
.rt-carrello__coupon { min-width: 0; }
.rt-carrello__coupon input[type="text"] { flex: 1 1 8rem; }

/* ════════════════════════════════════════════════════════════════════════
   IL RIEPILOGO IN CIMA
   ------------------------------------------------------------------------
   Il totale era in fondo, sotto il coupon e i correlati: in un carrello di
   sei righe stava due schermate piu' giu' della domanda che lo cerca.
   Qui e' la prima riga della pagina, con la via d'uscita accanto.
   ═══════════════════════════════════════════════════════════════════════ */

.rt-carrello__sopra {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s5);
  flex-wrap: wrap;
  padding: var(--rt-s4) var(--rt-s5);
  margin-block-end: var(--rt-s5);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-xl);
  background: var(--rt-superficie);
}
.rt-carrello__sopra-testo { display: grid; gap: 2px; min-width: 0; }
.rt-carrello__sopra-et { font-size: var(--rt-t-xs); color: var(--rt-ink-3); }
.rt-carrello__sopra-cifra {
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-t-xl);
  line-height: 1.1;
  color: var(--rt-ink);
}
.rt-carrello__sopra-nota { font-size: var(--rt-t-xxs); color: var(--rt-ink-3); }
.rt-carrello__prosegui { flex: none; }

/* Sul telefono il pulsante di qui sarebbe il secondo: in fondo allo
   schermo ce n'e' uno fisso che dice la stessa cosa e che non scorre via.
   Resta il numero, che e' la ragione per cui questo riquadro c'e'. */
@media (max-width: 620px) {
  .rt-carrello__prosegui { display: none; }
  .rt-carrello__sopra {
    padding: var(--rt-s3) var(--rt-s4);
    margin-block-end: var(--rt-s4);
  }
}

/* ── La quantita' nella riga ──────────────────────────────────────────────
   E' il campo di WooCommerce, con il suo name: senza JavaScript resta il
   pulsante "Aggiorna carrello" e funziona come ha sempre funzionato.    */

.rt-riga__azioni {
  display: flex;
  align-items: center;
  gap: var(--rt-s4);
  margin-top: var(--rt-s3);
}
.rt-riga__azioni .quantity { display: inline-flex; }
.rt-riga__azioni .quantity label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
/* TRE CLASSI E L'ELEMENTO, non due classi.
   Con ".rt-riga__azioni .qty" (0,2,0) perdevamo contro
   ".woocommerce .quantity .qty" del foglio del plugin, che e' (0,3,0):
   il campo restava a 58px, cioe' la misura di WooCommerce, e tre cifre
   non ci stavano. Misurato al banco DOPO aver messo li' dentro il foglio
   del plugin: prima non si poteva vedere.
   5rem e non 4.5: a 4.5 il contenuto ne voleva 59 e il campo ne dava 56.
   Un carrello in cui "100" non si legge per intero e' un carrello in cui
   si sbaglia la quantita'. */
.rt-riga__azioni .quantity input.qty {
  width: 5rem;
  padding: var(--rt-s2) var(--rt-s3);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-sm);
  background: var(--rt-superficie);
  color: var(--rt-ink);
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
  /* 16px: sotto quella misura iOS ingrandisce la pagina al fuoco e poi non
     la rimpicciolisce piu'. Non e' una misura di disegno, e' la soglia di
     un browser. */
  font-size: 16px;
  text-align: center;
}
.rt-riga__azioni .qty:focus-visible { outline: 2px solid var(--rt-blu); outline-offset: 1px; }

/* Con lo script il modulo si manda da solo: il pulsante non ha piu' niente
   da fare, e un pulsante che non serve e' una domanda in piu'. */
.woocommerce-cart-form { transition: opacity 140ms ease; }
.woocommerce-cart-form.e-auto .rt-aggiorna { display: none; }
.woocommerce-cart-form.e-attesa { opacity: 0.55; pointer-events: none; }

/* ── I correlati: una riga che scorre, non una sezione ────────────────────
   In fondo a un carrello, dopo che uno ha gia' deciso, e' l'ultimo blocco
   che deve chiedere attenzione. Una fila orizzontale si guarda con il
   pollice se interessa e si salta in mezzo secondo se no.               */

.rt-correlati {
  grid-column: 1 / -1;
  margin-block-start: var(--rt-s8);
}
.rt-correlati__titolo {
  margin: 0 0 var(--rt-s4);
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-forte);
  letter-spacing: var(--rt-tracking-testa);
  color: var(--rt-ink-2);
}
.rt-correlati__fila {
  display: flex;
  gap: var(--rt-s3);
  margin: 0;
  padding: 0 0 var(--rt-s2);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  /* Ogni card si ferma al bordo: scorrendo non si resta mai con mezza
     card in vista, che e' il modo in cui una fila orizzontale sembra
     rotta invece che continua. */
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.rt-correlati__fila > li { flex: 0 0 11rem; scroll-snap-align: start; }

/* ── LA BARRA CHE RESTA IN FONDO ──────────────────────────────────────────
   Fra l'ultima riga e il pulsante della cassa ci sono coupon, riepilogo e
   correlati: chi ha gia' deciso li deve scorrere tutti per uscire. Qui
   l'uscita non si perde, e porta con se' il numero — un pulsante che dice
   solo "prosegui" chiede di fidarsi.

   Solo sul telefono: sul monitor il riquadro dei totali e' appiccicato di
   fianco e il pulsante e' sempre in vista.                              */

.rt-carrello-giu { display: none; }

@media (max-width: 900px) {
  .rt-carrello-giu {
    position: fixed;
    inset-inline: 0;
    inset-block-end: var(--rt-giu-h, 0px);
    /* 71: sopra la barra fissa del telefono (70), sotto l'assistente (95)
       e il torna-su (94), che stanno nell'angolo e non si incontrano con
       una barra a tutta larghezza. */
    z-index: 71;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rt-s4);
    padding: var(--rt-s3) var(--rt-s4);
    border-block-start: 1px solid var(--rt-linea);
    background: var(--rt-superficie);
  }
  /* La stessa sfumatura del cassetto: l'elenco sopra svanisce invece di
     essere tagliato, e dice che la pagina continua. */
  .rt-carrello-giu::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 100%;
    height: 2.5rem;
    pointer-events: none;
    background: linear-gradient(to top, var(--rt-fondo), transparent);
  }
  .rt-carrello-giu__testo { display: grid; min-width: 0; }
  .rt-carrello-giu__testo span { font-size: var(--rt-t-xxs); color: var(--rt-ink-3); }
  .rt-carrello-giu__testo strong {
    font-family: var(--rt-font-dati);
    font-variant-numeric: tabular-nums;
    font-size: var(--rt-t-base);
    line-height: 1.2;
  }
  .rt-carrello-giu .rt-btn { flex: none; padding-block: var(--rt-s3); }

  /* Lo spazio perche' l'ultimo pezzo di pagina non finisca sotto la barra. */
  .rt-carrello { padding-block-end: 4.5rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   LA CASSA
   ------------------------------------------------------------------------
   Una pagina sola, tre riquadri numerati nella colonna larga e il
   riepilogo appiccicato di fianco. Il markup sta in
   woocommerce/checkout/form-checkout.php e le regole su chi compra in
   inc/cassa.php: qui c'e' solo come si vede.
   ═══════════════════════════════════════════════════════════════════════ */

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

.rt-cassa__accesso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-s5);
  flex-wrap: wrap;
  padding: var(--rt-s4) var(--rt-s5);
  margin-block-end: var(--rt-s6);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-xl);
  background: var(--rt-superficie);
}
.rt-cassa__accesso strong { display: block; font-size: var(--rt-t-sm); }
.rt-cassa__accesso span { font-size: var(--rt-t-xs); color: var(--rt-ink-2); }

.rt-cassa__griglia {
  display: grid;
  /* 440 e non 380: i nomi dei rotoli sono lunghi - "Rotoli Carta
     Termica 57mm 57x35 Omologata / Misura mm. 57 x 35 mt. 48gr./mq -
     200 rotoli" - e a 380 andavano a capo quattro volte. Sessanta pixel
     in piu' li paga la colonna del modulo, che ne ha mille. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
@media (max-width: 960px) {
  .rt-cassa__griglia { grid-template-columns: minmax(0, 1fr); }
}

/* LA TRACCIA, NON SOLO LA COLONNA. min-width:0 impedisce a questa colonna
   di allargare la griglia che la contiene, ma non dice niente alle sue
   tracce: una griglia a una colonna implicita la dimensiona "auto", cioe'
   quanto il contenuto piu' largo. Misurato a 390px: la colonna stava a
   310px e la sua traccia a 315,5 — i passi uscivano di sei pixel. E' la
   terza volta che lo stesso difetto si presenta con una faccia diversa:
   1fr e auto non scendono MAI sotto il contenuto, va scritto minmax(0,...). */
.rt-cassa__colonna {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rt-s3);
  min-width: 0;
}

/* ── I passi ──────────────────────────────────────────────────────────────
   Numerati, e il numero e' un cerchio: in una pagina in cui si chiedono
   dodici dati, sapere di essere al secondo riquadro su tre e' meta' della
   fatica risparmiata.                                                    */

.rt-passo {
  padding: var(--rt-s4);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-xl);
  background: var(--rt-superficie);
}
.rt-passo__testa {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin: 0 0 var(--rt-s4);
  font-size: var(--rt-t-lg);
  letter-spacing: var(--rt-tracking-testa);
}
.rt-passo__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--rt-r-pill);
  background: var(--rt-ink);
  color: var(--rt-superficie);
  font-family: var(--rt-font-dati);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
}
.rt-passo h3 { font-size: var(--rt-t-base); margin-block: var(--rt-s4) var(--rt-s3); }
.rt-passo__corpo > h3:first-child { margin-block-start: 0; }

/* ── La scala dei passi ───────────────────────────────────────────────────
   Dice due cose che un modulo lungo non dice: quanto manca, e che quello
   che hai gia' scritto e' al sicuro. Non si clicca: il comando per tornare
   indietro e' "Modifica" dentro il passo chiuso, dove uno lo cerca.
   ───────────────────────────────────────────────────────────────────────── */

.rt-scala {
  /* APPICCICATA IN ALTO. Scorrendo, la scala spariva e con lei l'unica
     cosa che dice a che punto si e'. Il fondo pieno non e' decorazione:
     senza, i campi le passerebbero sotto e si leggerebbero due righe
     sovrapposte. */
  position: sticky;
  inset-block-start: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  /* NIENTE MARGINI NEGATIVI per allargare la fascia: il 27 ottobre
     facevano sbordare tutto il modulo di sedici pixel a ogni larghezza,
     e il controllo dei tagli l'ha detto subito. La fascia larga quanto
     il modulo basta: quello che le scorre sotto sta dentro il modulo. */
  margin: 0 0 var(--rt-s3);
  padding: var(--rt-s3) 0;
  border-block-end: 1px solid var(--rt-linea);
  background: var(--rt-fondo);
  list-style: none;
}

.rt-scala__p {
  display: flex;
  align-items: center;
  gap: var(--rt-s2);
  color: var(--rt-ink-3);
  font-size: var(--rt-t-sm);
}

.rt-scala__b {
  display: flex;
  align-items: center;
  gap: var(--rt-s2);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Spento sul passo in corso e su quelli che devono ancora venire: il
   primo non porterebbe da nessuna parte, gli altri salterebbero un
   controllo. Resta leggibile - e' un'indicazione, non un comando
   disattivato a caso. */
.rt-scala__b[disabled] { cursor: default; opacity: 1; }
.rt-scala__b:not([disabled]):hover .rt-scala__t { color: var(--rt-blu); }

/* Il filo fra un passo e l'altro: si allunga da solo e tiene i tre
   gruppi distanti quanto serve senza misure scritte a mano. */
.rt-scala__p + .rt-scala__p::before {
  content: "";
  flex: 1 1 var(--rt-s6);
  min-width: var(--rt-s4);
  height: 1px;
  background: var(--rt-linea);
}

.rt-scala__n {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie);
  font-family: var(--rt-font-dati);
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-forte);
}

.rt-scala__p.is-ora .rt-scala__n {
  border-color: var(--rt-blu);
  background: var(--rt-blu);
  color: var(--rt-superficie);
}
.rt-scala__p.is-ora .rt-scala__t { color: var(--rt-ink); font-weight: var(--rt-peso-forte); }

.rt-scala__p.is-fatto .rt-scala__n {
  border-color: var(--rt-blu-tenue);
  background: var(--rt-blu-tenue);
  color: var(--rt-blu);
}
.rt-scala__p.is-fatto .rt-scala__t { color: var(--rt-ink-2); }

/* Sul telefono i nomi dei passi mangiano la riga: restano i numeri, che
   sono quello che serve a sapere a che punto si e'. */
@media (max-width: 619px) {
  .rt-scala__t { display: none; }
  .rt-scala { gap: var(--rt-s2); }
}

/* ── Il passo chiuso ──────────────────────────────────────────────────────
   Non sparisce: si abbassa a una riga che dice cosa hai scritto. Un passo
   che sparisce lascia il dubbio di averlo saltato.
   ───────────────────────────────────────────────────────────────────────── */

.rt-passo--chiuso { padding: var(--rt-s4) var(--rt-s5); }
.rt-passo--chiuso .rt-passo__corpo { display: none; }
.rt-passo--chiuso .rt-passo__testa { margin: 0; font-size: var(--rt-t-base); }
.rt-passo--chiuso .rt-passo__n { background: var(--rt-blu-tenue); color: var(--rt-blu); }

.rt-passo__sunto {
  /* Allineato sotto il titolo e non sotto il numero: incolonnato con le
     parole, non con il pallino. */
  margin: var(--rt-s2) 0 0;
  padding-inline-start: calc(1.75rem + var(--rt-s3));
  color: var(--rt-ink-2);
  font-size: var(--rt-t-sm);
  overflow-wrap: anywhere;
}
.rt-passo:not(.rt-passo--chiuso) .rt-passo__sunto { display: none; }

.rt-passo__modifica {
  margin-inline-start: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--rt-blu);
  font: inherit;
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  cursor: pointer;
}
.rt-passo__modifica:hover { text-decoration: underline; }
/* Nel passo aperto il comando non comanda niente: sei gia' li'. E in
   quelli che devono ancora venire non deve esserci: ci si arriva con
   "Continua", che prima guarda i campi. */
.rt-passo:not(.rt-passo--chiuso) .rt-passo__modifica,
.rt-passo--dopo .rt-passo__modifica { display: none; }

/* Un passo non ancora raggiunto si vede che non e' il suo turno. */
.rt-passo--dopo .rt-passo__testa { color: var(--rt-ink-3); }
.rt-passo--dopo .rt-passo__n { background: var(--rt-superficie-2); color: var(--rt-ink-3); }

.rt-passo__avanti {
  width: 100%;
  margin-block-start: var(--rt-s4);
}

/* ── PRIVATO O AZIENDA: DUE SCHEDE, NON DUE PALLINI ───────────────────────
   E' la domanda che decide quali campi esistono. Due pallini da 16 pixel
   in cima a un modulo si leggono come un dettaglio; due schede larghe
   quanto meta' riquadro si leggono come un bivio, che e' quello che
   sono.                                                                  */

.rt-campo-tipo { margin-block-end: var(--rt-s5); }
.rt-campo-tipo > label {
  display: block;
  margin-block-end: var(--rt-s3);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-forte);
  color: var(--rt-ink);
}
.rt-campo-tipo .woocommerce-input-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rt-s3);
}
.rt-campo-tipo input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rt-campo-tipo label.radio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-s2);
  min-height: 3.25rem;
  margin: 0;
  padding: var(--rt-s3) var(--rt-s4);
  border: 1.5px solid var(--rt-linea);
  border-radius: var(--rt-r-lg);
  background: var(--rt-superficie);
  color: var(--rt-ink-2);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--rt-transizione),
              background var(--rt-transizione),
              color var(--rt-transizione);
}
.rt-campo-tipo label.radio:hover { border-color: color-mix(in srgb, var(--rt-blu) 40%, var(--rt-linea)); }
.rt-campo-tipo input[type="radio"]:checked + label.radio,
.rt-campo-tipo label.radio:has(input[type="radio"]:checked) {
  border-color: var(--rt-blu);
  background: var(--rt-blu-tenue);
  color: var(--rt-blu-scuro);
  font-weight: var(--rt-peso-forte);
}
.rt-campo-tipo input[type="radio"]:focus-visible + label.radio,
.rt-campo-tipo label.radio:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--rt-blu);
  outline-offset: 2px;
}

/* ── I CAMPI CHE ESISTONO SOLO PER L'AZIENDA ──────────────────────────────
   Si nascondono, non si svuotano: chi cambia idea due volte ritrova quello
   che aveva gia' scritto.

   display:none E NON UN'ALTEZZA CHE SCORRE. Ci avevo provato, con
   grid-template-rows da 0fr a 1fr: funziona solo se dentro c'e' UN figlio,
   e una riga di WooCommerce ne ha tre — l'etichetta, il campo e la nota.
   Gli altri due finivano in righe implicite alte quanto il loro contenuto,
   e restava un buco di centoventi pixel in mezzo al modulo. Fra
   un'animazione e un modulo giusto, vince il modulo.

   Senza JavaScript la classe sul modulo non arriva mai: li' si vedono
   tutti, ed e' il modulo di WooCommerce, che funziona.               */

/* TRE CLASSI E L'ELEMENTO, non due. Con ".checkout .rt-solo-azienda" la
   regola pareggiava con quella che mette i campi a due per riga, scritta
   piu' sotto, e a parita' vince l'ultima: i campi dell'azienda restavano
   in pagina con "Privato" selezionato. */
.rt-cassa form.checkout .rt-solo-azienda { display: none; }
.rt-cassa form.checkout.e-azienda .rt-solo-azienda { display: block; }
/* L'attributo hidden da solo non basta: la riga qui sopra e' una classe e
   batte il display:none che il browser da' a [hidden]. Serve dirlo con la
   stessa forza, altrimenti il campo che la scelta nasconde resta li'. */
.rt-cassa form.checkout.e-azienda .rt-solo-azienda[hidden] { display: none; }
@media (min-width: 620px) {
  .rt-cassa form.checkout.e-azienda .rt-solo-azienda.form-row-first,
  .rt-cassa form.checkout.e-azienda .rt-solo-azienda.form-row-last { display: inline-grid; }
}

/* ── La risposta dell'archivio europeo ────────────────────────────────── */

/* TRE STATI, DUE COLORI. "Confermata" e' verde perche' e' una buona
   notizia; "non risulta" e "non ho potuto chiedere" sono grigi, non rossi:
   in VIES ci sono solo le partite IVA abilitate agli scambi dentro
   l'Unione, e un'azienda italiana che compra carta quasi mai lo e'. Un
   bordo rosso li' accuserebbe di un errore un cliente in regola, un attimo
   prima di pagare. Il rosso resta a cio' che ferma davvero il modulo. */
.rt-vies {
  display: block;   /* e' uno <span>: dentro un <p> un <p> non ci sta */
  margin: var(--rt-s2) 0 0;
  font-size: var(--rt-t-xs);
  line-height: var(--rt-interlinea);
  color: var(--rt-ink-3);
}
.rt-vies.e-attesa { color: var(--rt-ink-3); }
.rt-vies.e-nota   { color: var(--rt-ink-2); }
.rt-vies.e-ok {
  padding: var(--rt-s2) var(--rt-s3);
  border-radius: var(--rt-r-sm);
  background: var(--rt-ok-tenue);
  color: color-mix(in srgb, var(--rt-ok) 72%, var(--rt-ink));
  font-weight: var(--rt-peso-medio);
}

/* ── Il riepilogo di fianco ───────────────────────────────────────────── */

/* STRETCH, altrimenti l'appiccicamento qui sotto non ha spazio in cui
   appiccicarsi. La griglia ha align-items: start, quindi questa colonna
   era alta quanto il suo contenuto: un elemento sticky dentro un
   contenitore alto come lui non si muove mai, perche' non c'e' niente
   da scorrere attorno. Stirata all'altezza della riga, il riquadro
   segue la pagina come deve. */
.rt-cassa__riepilogo { min-width: 0; align-self: stretch; }
.rt-cassa__riepilogo-dentro {
  position: sticky;
  top: calc(var(--rt-appiccica-h, 0px) + var(--rt-s4));
  padding: var(--rt-s5);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-xl);
  background: var(--rt-superficie);
}
.rt-cassa__riepilogo-testa {
  margin: 0 0 var(--rt-s4);
  font-size: var(--rt-t-base);
  letter-spacing: var(--rt-tracking-testa);
}
/* Sul desktop il tasto non serve: il riepilogo sta nella sua colonna,
   sempre aperto e sempre in vista. */
.rt-cassa__riepilogo-tasto { display: none; }

/* QUASI TUTTA LA LARGHEZZA, SUL TELEFONO.
   A 390px il campo da scrivere era largo 262: centoventotto pixel buttati
   in margini, uno dentro l'altro - il contenitore della pagina, il bordo
   del riquadro del passo, il riquadro stesso. Su un modulo lungo si paga
   a ogni riga, e si paga con il pollice. */
@media (max-width: 620px) {
  /* Il margine laterale c'era DUE VOLTE: una sul contenitore della
     pagina e una qui, venti pixel per parte ciascuna. Ne basta uno. */
  .rt-cassa { padding-inline: 0; }
  .rt-cassa .rt-passo { padding: var(--rt-s4) var(--rt-s3); border-radius: var(--rt-r-lg); }
  .rt-cassa .rt-cassa__riepilogo-dentro { padding: var(--rt-s4) var(--rt-s3); }
}

@media (max-width: 960px) {
  /* Appiccicato in una colonna sola vorrebbe dire un riquadro che
     insegue mentre si compila: qui sta dov'e'. */
  .rt-cassa__riepilogo-dentro { position: static; }

  /* IL RIEPILOGO RESTA IN CIMA MA CHIUSO.
     order: -1 lo metteva sopra il modulo per tenere il totale sotto gli
     occhi: lo scopo era giusto, il risultato no. Aperto occupava 494px,
     cioe' mezzo metro di scorrimento prima di "I tuoi dati" - e il 21
     ottobre Giuseppe l'ha chiamato un disastro, con ragione. Ora in cima
     c'e' una riga con il totale, e il dettaglio si apre a richiesta. */
  .rt-cassa__riepilogo { order: -1; }

  .rt-cassa__riepilogo-tasto {
    display: flex;
    align-items: center;
    gap: var(--rt-s3);
    width: 100%;
    padding: var(--rt-s4) var(--rt-s5);
    border: 1px solid var(--rt-linea);
    border-radius: var(--rt-r-lg);
    background: var(--rt-superficie);
    color: var(--rt-ink);
    font: inherit;
    font-weight: var(--rt-peso-forte);
    cursor: pointer;
  }

  /* Il totale spinge la freccia a destra e resta l'unica cosa che si
     legge da lontano: e' il numero per cui si apre il riquadro. */
  .rt-cassa__riepilogo-tot { margin-inline-start: auto; color: var(--rt-blu); }

  .rt-cassa__riepilogo-tasto svg { transition: transform var(--rt-transizione); }
  .rt-cassa__riepilogo-tasto[aria-expanded="true"] svg { transform: rotate(180deg); }

  .rt-cassa__riepilogo:not(.e-aperto) .rt-cassa__riepilogo-dentro { display: none; }
  .rt-cassa__riepilogo.e-aperto .rt-cassa__riepilogo-tasto { margin-block-end: var(--rt-s3); }
}

/* I DOPPIONI DELL'ACCESSO SOCIAL.
   Il plugin Nextend inserisce i suoi pulsanti a tre agganci diversi, e
   alla cassa uscivano TRE volte: sei pulsanti "Accedi con" in fila, due
   dei quali dentro riquadri che non sono nostri. Il nostro riquadro
   .rt-cassa__accesso li ha gia': gli altri due si spengono.
   Spenti e non tolti perche' il markup e' del plugin: una modifica al
   plugin la perderemmo al primo aggiornamento. */
body.woocommerce-checkout [id^="nsl-custom-login-form-"] { display: none; }

/* I CAMPI DEL PLUGIN DELLE FATTURE, FUORI DALLA VISTA.
   "Fattura o ricevuta" chiede la stessa cosa della nostra domanda
   "Stai comprando come", e due domande sulla stessa cosa sono il modo
   piu' rapido di farle rispondere in modo diverso: Azienda da una parte
   e Ricevuta dall'altra, e la fattura non parte. Li riempie cassa.js
   con le nostre risposte, cosi' il plugin continua a fare le fatture
   giuste e il cliente vede una domanda sola.
   !important perche' il plugin mostra e nasconde i suoi campi da
   JavaScript, e una regola normale la scavalcherebbe. */
body.woocommerce-checkout #billing_invoice_type_field,
body.woocommerce-checkout #billing_PEC_field { display: none !important; }

/* ── LA TESTATA DELLA CASSA: UNA RIGA ─────────────────────────────────────
   Alla cassa non si arriva per sbaglio: chi e' qui sa gia' dove' e'
   arrivato, e un titolo "Shop" grande come un titolo di pagina ruba lo
   schermo a quello che deve fare. Via il titolo, via i tre riquadri
   bianchi di prima, e si parte dal totale.
   ========================================================================= */

body.woocommerce-checkout .rt-woo__testa { display: none; }

/* Gli avvisi di WooCommerce restano in pagina ma non si vedono: sono i
   pannelli che i nostri due comandi aprono. Il modulo dentro, quando si
   apre, deve tornare visibile - per questo la regola colpisce l'avviso,
   non il modulo. */
body.woocommerce-checkout .woocommerce-form-login-toggle,
body.woocommerce-checkout .woocommerce-form-coupon-toggle { display: none; }

.rt-cassa__riga {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-s2) var(--rt-s5);
  margin-block-end: var(--rt-s4);
}

.rt-cassa__riga-voce {
  padding: 0;
  border: 0;
  background: none;
  color: var(--rt-ink-2);
  font: inherit;
  font-size: var(--rt-t-sm);
  cursor: pointer;
}

.rt-cassa__riga-voce strong {
  color: var(--rt-blu);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* ── LA FATTURA ELETTRONICA: UNA SCELTA, NON DUE CAMPI MEZZI OBBLIGATORI ──
   "Uno dei due" scritto su due etichette non si capisce, e aveva ragione
   Giuseppe: sono due campi aperti e un'istruzione da interpretare. Qui si
   sceglie prima COME si vuole ricevere la fattura, e resta un campo solo,
   obbligatorio per davvero. Il campo che non serve si svuota, cosi' non
   si manda un dato rimasto li' da un ripensamento.
   ========================================================================= */

.rt-fe {
  margin-block-end: var(--rt-s4);
}

.rt-fe__et {
  display: block;
  margin-block-end: var(--rt-s2);
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-medio);
  color: var(--rt-ink-2);
}

.rt-fe__scelte { display: flex; gap: var(--rt-s2); }

.rt-fe__scelta {
  flex: 1 1 0;
  min-width: 0;
  padding: var(--rt-s3) var(--rt-s2);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-md);
  background: var(--rt-superficie);
  color: var(--rt-ink-2);
  font: inherit;
  font-size: var(--rt-t-sm);
  cursor: pointer;
}

.rt-fe__scelta[aria-pressed="true"] {
  border-color: var(--rt-blu);
  background: var(--rt-blu-tenue);
  color: var(--rt-blu);
  font-weight: var(--rt-peso-forte);
}

/* ── I campi, dove WooCommerce li disegna ─────────────────────────────── */

/* Lo spazio fra un campo e l'altro era di sedici pixel piu' otto fra
   etichetta e casella: su diciotto campi sono quattrocentotrentadue
   pixel di aria, mezzo schermo di telefono speso in niente. */
/* 8 e non 12: moltiplicato per quindici campi sono sessanta pixel. */
.rt-cassa .form-row { margin: 0 0 var(--rt-s2); }
.rt-cassa .form-row label {
  display: block;
  margin-block-end: var(--rt-s1);
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-medio);
  color: var(--rt-ink-2);
}
/* NIENTE ASTERISCHI.
   Su diciotto campi erano quindici asterischi rossi: una selva che non
   distingue piu' niente, perche' quando quasi tutto e' obbligatorio
   l'asterisco smette di essere un'informazione. Shopify non li usa da
   anni: marca i facoltativi, che sono tre, e tutto il resto si capisce
   da solo. Il "(facoltativo)" lo scrive gia' WooCommerce. */
.rt-cassa .form-row .required,
.rt-cassa .form-row abbr.required { display: none; }
.rt-cassa .form-row .optional { color: var(--rt-ink-3); font-weight: var(--rt-peso-normale); }
.rt-cassa .form-row input.input-text,
.rt-cassa .form-row textarea,
.rt-cassa .form-row select,
.rt-cassa .select2-container .select2-selection {
  width: 100%;
  /* 8/12 e non 12/16: con quindici campi ogni quattro pixel di padding
     sono sessanta pixel di pagina in piu'. */
  padding: var(--rt-s2) var(--rt-s3);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-sm);
  background: var(--rt-superficie);
  color: var(--rt-ink);
  /* 16px: sotto quella misura iOS ingrandisce la pagina al fuoco e poi non
     la rimpicciolisce piu'. */
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--rt-transizione), box-shadow var(--rt-transizione), background var(--rt-transizione);
}

/*
 * TUTTI ALTI UGUALI, misura scritta e non dedotta.
 *
 * Il menu della provincia veniva piu' alto delle caselle di CAP e citta'
 * che gli stanno di fianco: un <select> calcola la sua altezza con le
 * regole del sistema operativo, non con il padding che gli diamo noi.
 * Tre campi sulla stessa riga a tre altezze diverse si notano prima di
 * qualunque altra cosa. La textarea resta fuori: quella deve crescere.
 */
.rt-cassa .form-row input.input-text,
.rt-cassa .form-row select {
  box-sizing: border-box;
  height: 2.6rem;
}
.rt-cassa .form-row input.input-text:focus,
.rt-cassa .form-row textarea:focus,
.rt-cassa .form-row select:focus {
  outline: none;
  border-color: var(--rt-blu);
  box-shadow: 0 0 0 3px var(--rt-blu-tenue);
}

/* ── I campi si vedono ────────────────────────────────────────────────────
   Erano caselle bianche dentro una card bianca: si distinguevano solo per
   un filetto grigio chiaro, e quindici di fila sembravano un foglio
   quadrettato. Il fondo della pagina dentro la casella basta a dire dove
   si scrive; al fuoco la casella diventa bianca, cioe' si accende.

   SUPERFICIE-2 E NON FONDO: il fondo pagina dentro una card bianca si
   vede appena, e il 27 ottobre Giuseppe l'ha detto in tre parole -
   "tutto bianco su bianco, non si capisce nulla". Questo e' il grigio
   che il sistema tiene per i blocchi dentro le card, ed e' nato per
   questo.

   SCRITTE QUI E NON PIU' SU, ed e' la stessa trappola gia' pagata: a
   parita' di specificita' vince la regola scritta dopo. Messe sopra alle
   due regole qui sopra - che dicono background: superficie - non
   facevano niente, e il campo restava bianco.
   ───────────────────────────────────────────────────────────────────────── */

.rt-cassa .form-row input.input-text,
.rt-cassa .form-row textarea,
.rt-cassa .form-row select,
.rt-cassa .select2-container .select2-selection {
  background: var(--rt-superficie-2);
}
.rt-cassa .form-row input.input-text:focus,
.rt-cassa .form-row textarea:focus,
.rt-cassa .form-row select:focus {
  background: var(--rt-superficie);
}
.rt-cassa .form-row .description {
  margin-block-start: var(--rt-s2);
  font-size: var(--rt-t-xxs);
  line-height: 1.4;
  color: var(--rt-ink-3);
}

/* ── Il campo sbagliato, detto mentre si scrive ────────────────────────────
   Il bordo rosso da solo non basta: dice CHE c'e' un errore e non QUALE,
   e su un modulo con quindici campi "c'e' un errore" e' quasi un
   indovinello. Il messaggio sta sotto il campo, dove guarda chi ha appena
   finito di scriverlo.

   Scritte queste regole DOPO quelle del campo normale di proposito: a
   parita' di specificita' vince l'ultima, e il bordo rosso deve battere
   quello grigio senza bisogno di alzare il peso del selettore.
   ───────────────────────────────────────────────────────────────────────── */

.rt-cassa .form-row.rt-riga--errore input.input-text,
.rt-cassa .form-row.rt-riga--errore textarea,
.rt-cassa .form-row.rt-riga--errore select {
  border-color: var(--rt-errore);
}

/* Al fuoco resta rosso e non torna blu: il campo e' ancora sbagliato, e
   un bordo che si rassicura appena lo tocchi dice la cosa falsa. */
.rt-cassa .form-row.rt-riga--errore input.input-text:focus,
.rt-cassa .form-row.rt-riga--errore textarea:focus,
.rt-cassa .form-row.rt-riga--errore select:focus {
  border-color: var(--rt-errore);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rt-errore) 18%, transparent);
}

.rt-cassa .form-row .rt-errore {
  margin: var(--rt-s2) 0 0;
  font-size: var(--rt-t-xxs);
  line-height: 1.4;
  color: var(--rt-errore);
}
.rt-cassa .woocommerce-invalid input.input-text { border-color: var(--rt-errore); }

/* Due campi per riga dove WooCommerce lo chiede, uno solo sul telefono:
   un campo largo mezza colonna da 170 pixel e' un campo in cui non si
   legge quello che si scrive. */
/* ── I CAMPI SU UNA GRIGLIA, non su inline-grid e margini ────────────────
   Con inline-grid e una larghezza calcolata ogni campo doveva sapere
   quanto spazio lasciare al vicino, e bastava aggiungerne uno per
   mandare a capo tutta la riga. Qui la riga e' una griglia di sei
   colonne e ogni campo dice solo quante ne occupa: due campi ne
   prendono tre, tre campi ne prendono due. */
@media (min-width: 620px) {
  .rt-cassa .woocommerce-billing-fields__field-wrapper,
  .rt-cassa .woocommerce-shipping-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--rt-s4);
  }

  .rt-cassa .woocommerce-billing-fields__field-wrapper > .form-row,
  .rt-cassa .woocommerce-shipping-fields__field-wrapper > .form-row,
  .rt-cassa .woocommerce-billing-fields__field-wrapper > .rt-fe { grid-column: span 6; }

  /* LE DUE REGOLE QUI SOTTO DEVONO PESARE QUANTO QUELLA SOPRA.
     Scritte come ".rt-cassa .form-row-first" pesavano due classi contro
     tre, e "span 6" vinceva sempre: i campi restavano tutti a tutta
     larghezza e sembrava che la griglia non funzionasse. Non era la
     griglia, era la specificita' - la stessa trappola gia' pagata con i
     float di WooCommerce. */
  .rt-cassa .woocommerce-billing-fields__field-wrapper > .form-row-first,
  .rt-cassa .woocommerce-billing-fields__field-wrapper > .form-row-last,
  .rt-cassa .woocommerce-shipping-fields__field-wrapper > .form-row-first,
  .rt-cassa .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: span 3; }

  .rt-cassa .woocommerce-billing-fields__field-wrapper > .rt-terzo,
  .rt-cassa .woocommerce-shipping-fields__field-wrapper > .rt-terzo { grid-column: span 2; }
}

/* ── Il pulsante finale ───────────────────────────────────────────────── */

.rt-cassa #place_order {
  width: 100%;
  min-height: 54px;
  margin-block-start: var(--rt-s4);
  border: 0;
  border-radius: var(--rt-r-md);
  background: var(--rt-grad-cta);
  color: var(--rt-superficie);
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-titolo);
  box-shadow: var(--rt-ombra-cta);
  cursor: pointer;
  transition: box-shadow 200ms ease, transform 140ms ease, background 200ms ease;
}
.rt-cassa #place_order:hover {
  background: var(--rt-grad-cta-su);
  box-shadow: var(--rt-ombra-cta-su);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .rt-cassa #place_order:hover { transform: none; }
}

/* ── IL RIEPILOGO DELL'ORDINE, la tabella di WooCommerce ──────────────────
   E' una <table> e resta una <table>: nome a sinistra, cifra a destra, e
   i totali in fondo con la stessa verticale. Senza queste righe prendeva
   le regole del plugin, che centrano le intestazioni e lasciano le cifre
   a capo — "1.102,14" su una riga e l'euro sulla successiva.          */

.rt-cassa__riepilogo table.shop_table {
  width: 100%;
  /* FISSA, E NON "QUANTO SERVE".
     Una tabella automatica si allarga fino al contenuto piu' largo che
     non puo' andare a capo, e se ne frega della colonna che la contiene:
     misurata a 424px dentro un riquadro da 380, con il nome del prodotto
     schiacciato a 88px - una parola per riga - e le cifre fuori dal
     bordo bianco. Con table-layout: fixed comandano le larghezze qui
     sotto e il contenuto si adatta, che e' il verso giusto. */
  table-layout: fixed;
  border: 0;
  border-collapse: collapse;
  font-size: var(--rt-t-sm);
}

/* Il nome del prodotto prende i due terzi e va a capo dove capita: sono
   nomi lunghi ("Rotoli Carta Termica 57mm 57x35 Omologata / Misura mm.
   57 x 35 mt. 48gr./mq - 200 rotoli") e in una colonna stretta non c'e'
   modo di spezzarli bene. Meglio a capo che fuori dal riquadro. */
.rt-cassa__riepilogo table.shop_table th:first-child,
.rt-cassa__riepilogo table.shop_table td:first-child {
  width: 62%;
  overflow-wrap: anywhere;
}
.rt-cassa__riepilogo table.shop_table th,
.rt-cassa__riepilogo table.shop_table td {
  padding: var(--rt-s2) 0;
  border: 0;
  text-align: start;
  vertical-align: top;
}
.rt-cassa__riepilogo table.shop_table td:last-child,
.rt-cassa__riepilogo table.shop_table th:last-child {
  text-align: end;
  white-space: nowrap;
  font-family: var(--rt-font-dati);
  font-variant-numeric: tabular-nums;
}

/* IL NOWRAP QUI SOPRA E' IL COLPEVOLE, e serviva: senza, "€ 1.102,14"
   si spezzava fra il numero e l'euro. Ma colpiva anche la cella delle
   spedizioni, che non contiene una cifra - contiene tre righe lunghe
   tipo "Corriere Espresso (1-3 gg lavorativi): € 5,00". Tenute su una
   riga sola chiedevano 337 pixel, e quelli trascinavano fuori tutta la
   tabella. Le cifre restano intere, le opzioni di spedizione vanno a
   capo. Scritto subito sotto la regola che corregge, non in fondo. */
.rt-cassa__riepilogo table.shop_table .woocommerce-shipping-totals td,
.rt-cassa__riepilogo table.shop_table #shipping_method,
.rt-cassa__riepilogo table.shop_table #shipping_method li {
  white-space: normal;
}

/* E la riga del totale, per la stessa ragione: "€ 1.344,60 (inclusi
   € 242,46 IVA)" su una riga sola chiedeva 221 pixel in 128. La cifra
   deve restare intera - spezzata fra numero e valuta si ricopia
   sbagliata - ma la nota dell'IVA puo' andare a capo, e sotto la cifra
   sta benissimo. */
.rt-cassa__riepilogo table.shop_table .order-total td { white-space: normal; }
.rt-cassa__riepilogo table.shop_table .woocommerce-Price-amount { white-space: nowrap; }
.rt-cassa__riepilogo table.shop_table .product-name {
  color: var(--rt-ink-2);
  line-height: 1.4;
}
.rt-cassa__riepilogo table.shop_table .product-quantity {
  color: var(--rt-ink-3);
  font-weight: var(--rt-peso-medio);
}
.rt-cassa__riepilogo table.shop_table tfoot th { color: var(--rt-ink-3); font-weight: var(--rt-peso-medio); }
.rt-cassa__riepilogo table.shop_table tfoot tr:first-child th,
.rt-cassa__riepilogo table.shop_table tfoot tr:first-child td {
  padding-block-start: var(--rt-s3);
  border-block-start: 1px solid var(--rt-linea);
}
.rt-cassa__riepilogo table.shop_table .order-total th,
.rt-cassa__riepilogo table.shop_table .order-total td {
  padding-block-start: var(--rt-s3);
  border-block-start: 1px solid var(--rt-linea);
  color: var(--rt-ink);
  font-weight: var(--rt-peso-forte);
}
.rt-cassa__riepilogo table.shop_table .order-total td { font-size: var(--rt-t-lg); }

/* ── I METODI DI PAGAMENTO ────────────────────────────────────────────────
   woocommerce.css li disegna come un elenco su fondo grigio con una
   punta a triangolo sotto la voce scelta: e' il disegno del 2013, e in
   mezzo a riquadri bianchi con l'angolo largo e' l'unico pezzo che viene
   da un altro sito. Qui ogni metodo e' una riga selezionabile, come le
   due schede di "privato o azienda": stessa grammatica, due posti
   diversi.                                                               */

.rt-cassa .woocommerce-checkout-payment { background: none; border-radius: 0; }
.rt-cassa .wc_payment_methods {
  display: grid;
  gap: var(--rt-s2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rt-cassa .wc_payment_method { margin: 0; }
.rt-cassa .wc_payment_method > input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rt-cassa .wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: var(--rt-s3);
  margin: 0;
  padding: var(--rt-s4);
  border: 1.5px solid var(--rt-linea);
  border-radius: var(--rt-r-lg);
  background: var(--rt-superficie);
  color: var(--rt-ink-2);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-medio);
  cursor: pointer;
  transition: border-color var(--rt-transizione), background var(--rt-transizione);
}
/* ── I loghi dei metodi di pagamento ──────────────────────────────────────
   Stanno a destra, lontani dal nome: il nome si legge, il logo si
   riconosce, e due cose che si guardano in modo diverso non vanno
   appiccicate.
   ───────────────────────────────────────────────────────────────────────── */

.rt-cassa .wc_payment_method > label img,
.rt-cassa .wc_payment_method > label .rt-pagamento__logo {
  flex: none;
  max-height: 24px;
  width: auto;
}

/* Spinge a destra SOLO il primo: con "auto" su tutti, lo spazio libero
   si dividerebbe fra loro e i loghi della carta - che sono quattro -
   finirebbero sparpagliati lungo la riga invece che in gruppo. */
.rt-cassa .wc_payment_method > label img:first-of-type,
.rt-cassa .wc_payment_method > label .rt-pagamento__logo { margin-inline-start: auto; }

/* Il nostro disegno e' una linea, non un marchio pieno: va piu' tenue
   del testo, se no pesa piu' del nome del metodo. */
.rt-cassa .wc_payment_method > label .rt-pagamento__logo { color: var(--rt-ink-3); }
.rt-cassa .wc_payment_method:has(input:checked) > label .rt-pagamento__logo { color: var(--rt-blu); }
.rt-cassa .wc_payment_method:has(input:checked) > label {
  border-color: var(--rt-blu);
  background: var(--rt-blu-tenue);
  color: var(--rt-blu-scuro);
  font-weight: var(--rt-peso-forte);
}
.rt-cassa .wc_payment_method:has(input:focus-visible) > label {
  outline: 2px solid var(--rt-blu);
  outline-offset: 2px;
}
.rt-cassa .payment_box {
  margin: var(--rt-s2) 0 0;
  padding: var(--rt-s4);
  border-radius: var(--rt-r-lg);
  background: var(--rt-superficie-2);
  color: var(--rt-ink-2);
  font-size: var(--rt-t-xs);
  line-height: 1.5;
}
/* La punta a triangolo sotto il metodo scelto: via. */
.rt-cassa .payment_box::before { display: none; }
.rt-cassa .payment_box p:last-child { margin-block-end: 0; }

.rt-cassa__legale,
.rt-cassa .woocommerce-terms-and-conditions-wrapper {
  margin-block: var(--rt-s4) 0;
  font-size: var(--rt-t-xxs);
  line-height: 1.5;
  color: var(--rt-ink-3);
}

/* ── L'ASSICURAZIONE SPEDIZIONE ───────────────────────────────────────────
   DOVE SI TROVA. Il mu-plugin si aggancia a
   woocommerce_review_order_before_payment, che WooCommerce fa scattare in
   cima a checkout/payment.php. Siccome questo tema chiama
   woocommerce_checkout_payment() dentro il passo "Come paghi", il riquadro
   esce LI', nella colonna larga — non nel riepilogo. Le regole scritte con
   ".rt-cassa__riepilogo .rt-ass-*" puntavano a un posto dove il riquadro
   non arriva mai: erano morte, e sembravano vive solo perche' il banco lo
   disegnava nella colonna sbagliata.

   PERCHE' !important. Il foglio del plugin e' scritto TUTTO a !important,
   #rt-ass-box compreso. Contro !important la specificita' non puo' niente:
   le regole di prima perdevano tutte, comprese quelle che nascondevano le
   due didascalie. O si mette !important anche qui, o si modifica il
   mu-plugin — che e' gia' live per tutti e non si tocca senza chiedere.

   VANNO VIA LE DUE DIDASCALIE. "Metodo di pagamento" ripete parola per
   parola il titolo del passo che la contiene, e "Prima di procedere al
   pagamento" spiegava la posizione del riquadro nella cassa vecchia, dove
   stava incastrato fra riepilogo e pagamenti. Qui il posto glielo da' il
   passo numerato.                                                        */

.rt-cassa .rt-ass-sep-top,
.rt-cassa .rt-ass-sep-bottom { display: none !important; }

/* Il filetto e il raggio dei riquadri di questa pagina, al posto del
   bordo da due pixel e dell'ombra portata: accanto alle righe dei metodi
   di pagamento, che sono piatte, il riquadro sembrava staccarsi. */
.rt-cassa #rt-ass-box {
  margin: 0 0 var(--rt-s4) !important;
  border: 1px solid var(--rt-linea) !important;
  border-radius: var(--rt-r-lg) !important;
  box-shadow: none !important;
}
.rt-cassa #rt-ass-box:hover { box-shadow: none !important; }

/* Il testo e' quello del sito, non un grigio suo. */
/* La colonna di testo del riquadro assicurazione non scende sotto il suo
   contenuto: a 390px sfondava di sei pixel. E' un elemento flessibile, e
   un elemento flessibile ha min-width:auto finche' non gli si dice di no. */
.rt-cassa .rt-ass-text { min-width: 0 !important; }

.rt-cassa .rt-ass-title { color: var(--rt-ink) !important; }
.rt-cassa .rt-ass-desc  { color: var(--rt-ink-2) !important; }

/* La pastiglia: stesso giallo d'attenzione del resto del sito. Il
   plugin ne usa uno suo, vicino ma non uguale, e due gialli diversi sulla
   stessa pagina si leggono come uno sbaglio di stampa. */
.rt-cassa .rt-ass-chip {
  /* UNA PASTIGLIA, NON UNA FASCIA. Il plugin la dichiara inline-block, ma
     e' figlia di un flex in colonna: un elemento flessibile viene
     blocchificato e stirato, e inline-block diventa block largo 755px —
     una striscia gialla da parte a parte del riquadro. align-self le
     rida' la sua larghezza. Difetto del plugin, mai visto da nessuno
     perche' il riquadro non e' mai comparso in pagina. */
  align-self: flex-start;
  background: var(--rt-attenzione-tenue) !important;
  color: var(--rt-attenzione) !important;
  letter-spacing: var(--rt-tracking-label) !important;
}

/* E la pastiglia "ASSICURAZIONE SPEDIZIONE" non va a capo, per scelta del
   plugin: ventiquattro caratteri con 0.11em di spaziatura fanno 176px, e
   su un telefono la sua colonna ne ha 170. Si stringe la spaziatura, non
   si rompe la pastiglia: una pastiglia su due righe non e' piu' una
   pastiglia. */
@media (max-width: 420px) {
  .rt-cassa .rt-ass-chip { letter-spacing: 0.03em !important; }
}

/* QUI C'ERA UN SECONDO ASTERISCO.
   Lo metteva questa regola perche' il server, disegnando il modulo, non
   sapeva ancora se chi compra e' un'azienda. Da quando l'etichetta lo
   porta gia' (woocommerce_form_field_args in inc/cassa.php) ce n'erano
   DUE: "Ragione sociale * *". Il rimedio di ieri e' il difetto di oggi. */

/* I due modi di ricevere la fattura elettronica: ne basta uno, e
   l'etichetta lo dice al posto del "(facoltativo)" che faceva saltare il
   campo a chi il codice SDI non ce l'ha sottomano. */
.rt-cassa .rt-uno-dei-due {
  font-weight: var(--rt-peso-normale);
  color: var(--rt-blu);
}

/* =========================================================================
   IL RIEPILOGO ALLA CASSA, SENZA TABELLA

   Il modello woocommerce/checkout/review-order.php non disegna piu' una
   <table>: l'intestazione grigia "PRODOTTO | SUBTOTALE" sembrava un
   foglio di calcolo in mezzo a una pagina curata, e in 380 pixel i nomi
   dei rotoli andavano a capo una parola per riga.

   Righe vere: fotografia, numero dei pezzi SOPRA la fotografia come fa
   Shopify, nome, importo a destra. In una colonna stretta e' la forma
   che si legge meglio, ed e' quella che il cliente riconosce perche'
   l'ha gia' vista altrove.
   ========================================================================= */

.rt-riep__righe {
  margin: 0 0 var(--rt-s5);
  padding: 0;
  list-style: none;
}

.rt-riep__riga {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  /* Lo spazio fra fotografia e nome non e' estetica: ci deve stare la
     pastiglia della quantita', che con "1200" sporge di una decina di
     pixel. Con il respiro di prima toccava la prima lettera. */
  gap: var(--rt-s4);
  align-items: start;
  padding-block: var(--rt-s3);
  border-block-end: 1px solid var(--rt-linea);
}

.rt-riep__riga:last-child { border-block-end: 0; }

.rt-riep__foto {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-sm);
  background: var(--rt-superficie-2);
}

.rt-riep__foto img {
  width: 100%;
  height: 100%;
  border-radius: var(--rt-r-sm);
  object-fit: contain;
  /* Le fotografie di catalogo sono su fondo bianco: dentro un riquadro
     grigio il bianco si vedrebbe come un quadrato. */
  mix-blend-mode: multiply;
}

/* ── La quantita', che adesso si cambia ───────────────────────────────────
   Era una pastiglia sulla fotografia: diceva i pezzi e basta. Adesso e'
   un comando, e sta sotto il nome - dove c'e' spazio per tre cose in
   fila anche in una colonna da 440.

   Il numero e' il pezzo piu' grande dei tre: e' quello che si legge, i
   due tasti servono a cambiarlo.
   ───────────────────────────────────────────────────────────────────────── */

.rt-qta {
  /* flex e non inline-flex: dentro il nome del prodotto si incollava
     all'ultima parola ("...200 rotoli - 2 +") e sembrava parte della
     descrizione. Su una riga sua si capisce che e' un comando. */
  display: flex;
  width: fit-content;
  align-items: center;
  margin-block-start: var(--rt-s2);
  border: 1px solid var(--rt-linea);
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie);
  overflow: hidden;
}

.rt-qta__b {
  display: grid;
  place-items: center;
  width: var(--rt-s8);
  height: var(--rt-s8);
  padding: 0;
  border: 0;
  background: none;
  color: var(--rt-ink-2);
  font: inherit;
  font-size: var(--rt-t-base);
  line-height: 1;
  cursor: pointer;
  transition: background var(--rt-transizione), color var(--rt-transizione);
}
.rt-qta__b:hover { background: var(--rt-superficie-2); color: var(--rt-ink); }

.rt-qta__n {
  width: 3.25rem;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--rt-linea);
  background: none;
  color: var(--rt-ink);
  /* 16px e non meno: sotto quella misura iOS ingrandisce la pagina al
     fuoco e poi non la rimpicciolisce piu'. */
  font-family: var(--rt-font-dati);
  font-size: 16px;
  font-weight: var(--rt-peso-forte);
  line-height: var(--rt-s8);
  text-align: center;
}
.rt-qta__n:focus { outline: 2px solid var(--rt-blu); outline-offset: -2px; }

/* Mentre il server risponde i tasti non rispondono: due clic sullo
   stesso secondo manderebbero due quantita' diverse. */
.rt-qta--attesa { opacity: 0.55; pointer-events: none; }

.rt-qta--fissa {
  display: inline-block;
  padding-inline: var(--rt-s3);
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie-2);
  color: var(--rt-ink-2);
  font-size: var(--rt-t-xs);
  line-height: var(--rt-s6);
}

.rt-qta__male {
  display: block;
  margin-block-start: var(--rt-s1);
  color: var(--rt-errore);
  font-size: var(--rt-t-xxs);
  line-height: 1.4;
}

.rt-riep__nome {
  font-size: var(--rt-t-sm);
  line-height: 1.4;
  color: var(--rt-ink);
  overflow-wrap: anywhere;
}

.rt-riep__eur {
  font-size: var(--rt-t-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── I totali ─────────────────────────────────────────────────────────── */

.rt-riep__tot { margin: 0; }

.rt-riep__voce {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rt-s4);
  padding-block: var(--rt-s2);
  font-size: var(--rt-t-sm);
}

.rt-riep__voce dt { color: var(--rt-ink-2); }
.rt-riep__voce dd { margin: 0; font-variant-numeric: tabular-nums; }

/* La spedizione non e' una cifra, sono delle scelte: tre righe con i
   pallini, che su una riga sola chiedevano 337 pixel e trascinavano
   fuori tutto il riquadro. Qui va a capo e si incolonna sotto. */
.rt-riep__voce--sped { display: block; }
.rt-riep__voce--sped dt { margin-block-end: var(--rt-s2); }
.rt-riep__voce--sped dd { margin: 0; }
.rt-riep__voce--sped #shipping_method { margin: 0; padding: 0; list-style: none; }
.rt-riep__voce--sped #shipping_method li { margin-block-end: var(--rt-s2); font-size: var(--rt-t-sm); }
.rt-riep__voce--sped #shipping_method label { margin-inline-start: var(--rt-s2); }

.rt-riep__voce--totale {
  margin-block-start: var(--rt-s3);
  padding-block-start: var(--rt-s4);
  border-block-start: 1px solid var(--rt-linea);
  font-size: var(--rt-t-base);
  font-weight: var(--rt-peso-forte);
}

.rt-riep__voce--totale dt { color: var(--rt-ink); }
.rt-riep__voce--totale dd { font-size: var(--rt-t-lg); }

/* L'IVA sotto il totale, piccola: e' un'informazione, non una cifra da
   confrontare. La nota "(inclusi ... IVA)" la stampa WooCommerce dentro
   la stessa cella. */
.rt-riep__voce--totale small { display: block; font-size: var(--rt-t-xxs); font-weight: var(--rt-peso-normale); color: var(--rt-ink-3); }

/* ── Il codice sconto, dentro il riquadro dell'ordine ─────────────────── */

.rt-sconto {
  margin-block-start: var(--rt-s4);
  padding-block-start: var(--rt-s4);
  border-block-start: 1px solid var(--rt-linea);
}

.rt-sconto__apri {
  padding: 0;
  border: 0;
  background: none;
  color: var(--rt-blu);
  font: inherit;
  font-size: var(--rt-t-sm);
  text-decoration: underline;
  text-underline-offset: 0.16em;
  cursor: pointer;
}

/* Il modulo di WooCommerce arriva qui dentro con il suo markup: gli si
   toglie solo il vestito da "avviso", che qui non ha senso. */
.rt-sconto .checkout_coupon {
  margin: var(--rt-s3) 0 0;
  padding: 0;
  border: 0;
  background: none;
}

.rt-sconto .checkout_coupon p { margin: 0 0 var(--rt-s2); }
.rt-sconto .checkout_coupon .form-row { margin: 0; width: 100%; }
.rt-sconto .checkout_coupon input[type="text"] { width: 100%; }
.rt-sconto .checkout_coupon button { width: 100%; margin-block-start: var(--rt-s2); }

/* ── ALLA CASSA LA TESTATA SI ASCIUGA ─────────────────────────────────────
   Chi e' alla cassa ha gia' scelto: la fila delle categorie e' solo un
   invito ad andarsene, e sul desktop occupava la terza fascia prima del
   contenuto. Restano il marchio e la ricerca, che servono a chi si
   accorge di aver dimenticato qualcosa. E' quello che fa Shopify, che
   alla cassa toglie perfino il menu.
   ========================================================================= */

body.woocommerce-checkout .rt-header__nav { display: none; }

/* =========================================================================
   LA DOMANDA DELLA SPEDIZIONE, E LE RASSICURAZIONI SULLA CARTA
   ========================================================================= */

/* Prima la domanda per esteso, poi la risposta. La casella di
   WooCommerce era lei stessa la domanda, e alla cassa non si legge: si
   guarda se c'e' la spunta e si tira dritto. */
.rt-spedizione__domanda {
  margin: 0 0 var(--rt-s2);
  color: var(--rt-ink);
  font-size: var(--rt-t-sm);
}

.rt-cassa #ship-to-different-address {
  margin: 0 0 var(--rt-s3);
  font-size: var(--rt-t-sm);
  font-weight: var(--rt-peso-normale);
}

.rt-cassa #ship-to-different-address label {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-s2);
  margin: 0;
  padding: var(--rt-s2) var(--rt-s4);
  border: 1.5px solid var(--rt-linea);
  border-radius: var(--rt-r-pill);
  background: var(--rt-superficie);
  color: var(--rt-ink-2);
  font-size: var(--rt-t-sm);
  cursor: pointer;
  transition: border-color var(--rt-transizione), background var(--rt-transizione);
}

/* Spuntata diventa blu come le altre scelte della cassa: la risposta
   data si deve vedere senza cercare il quadratino. */
.rt-cassa #ship-to-different-address label:has(input:checked) {
  border-color: var(--rt-blu);
  background: var(--rt-blu-tenue);
  color: var(--rt-blu);
  font-weight: var(--rt-peso-forte);
}

/* ── Il pagamento protetto, sotto i campi della carta ─────────────────── */

.rt-sicuro {
  margin-block-start: var(--rt-s3);
  padding: var(--rt-s3);
  border-radius: var(--rt-r-md);
  background: var(--rt-superficie);
}

.rt-sicuro__testa {
  display: flex;
  align-items: center;
  gap: var(--rt-s2);
  margin: 0 0 var(--rt-s2);
  color: var(--rt-ink);
  font-size: var(--rt-t-xs);
  font-weight: var(--rt-peso-forte);
}

/* Pallini nostri e non quelli del browser: con un corpo piccolo e
   un'interlinea larga il disco di serie si stacca dalla riga e sembra
   un errore di impaginazione. */
.rt-sicuro__voci {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--rt-ink-2);
  font-size: var(--rt-t-xxs);
  line-height: 1.5;
}
/*
 * IL PALLINO E' FUORI DAL FLUSSO, non un elemento in fila.
 *
 * Con "display:flex" sulla riga, ogni <strong> dentro il testo diventa
 * un elemento della fila per conto suo: sul telefono la frase si e'
 * spezzata in colonne - "Il / numero / della / carta" da una parte e
 * "non / passa / dai / nostri / server" dall'altra. Il testo deve
 * restare testo: il pallino si appoggia sopra, in posizione assoluta.
 */
.rt-sicuro__voci li { position: relative; padding-inline-start: var(--rt-s4); }
.rt-sicuro__voci li + li { margin-block-start: var(--rt-s1); }
.rt-sicuro__voci li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  width: var(--rt-s1);
  height: var(--rt-s1);
  border-radius: var(--rt-r-pill);
  background: var(--rt-ink-3);
}

/* ── I marchi ufficiali dei circuiti ──────────────────────────────────── */

/*
 * SCRITTE CON #payment, e non per vezzo.
 *
 * WooCommerce ha una sua regola per le immagini dei metodi di pagamento
 * - "#payment ul.payment_methods li img { margin: 0 0 0 .5em }" - e un
 * #id batte qualunque classe: il nostro margin-inline-start: auto non
 * arrivava, e i marchi restavano appiccicati al nome invece di andare a
 * destra. Si e' visto al banco solo perche' il banco carica il foglio
 * vero del plugin: senza, la regola non ci sarebbe stata e il difetto
 * sarebbe uscito in produzione.
 */
.rt-cassa #payment ul.payment_methods li > label img {
  flex: none;
  height: 24px;
  width: auto;
  margin: 0;
  vertical-align: middle;
}

.rt-cassa #payment ul.payment_methods li > label img:first-of-type { margin-inline-start: auto; }

/* Fra un circuito e l'altro quasi niente: il gap della riga serve a
   staccare il nome dal logo, non Visa da Mastercard. */
.rt-cassa #payment ul.payment_methods li > label img + img {
  margin-inline-start: calc(var(--rt-s1) * -1);
}