/**
 * I componenti dei mockup.
 *
 * Le nove tavole del cliente non contengono nove disegni: contengono lo stesso
 * insieme di pezzi ricomposto nove volte. Un pulsante e' lo stesso pulsante
 * nella home, nel checkout e nell'area clienti; una riga selezionabile e' la
 * stessa sotto «metodo di spedizione» e sotto «indirizzo».
 *
 * Qui vivono quei pezzi, una volta sola. Le pagine li mettono in fila e non ne
 * inventano altri: quando una pagina ha bisogno di qualcosa che non c'e', o e'
 * un componente nuovo — e allora si aggiunge qui, per tutti — o e' un caso
 * particolare travestito, e allora va guardato meglio.
 *
 * Nomenclatura: `.c-` per non incrociare i prefissi gia' in uso (`.st-`), cosi'
 * i fogli vecchi e questo possono convivere mentre le pagine si spostano una
 * per volta.
 */

/* ==================================================================== *
 * PULSANTI
 * ==================================================================== */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--st-btn-gap);
  /* `min-height` e non `height`: un'etichetta lunga su due righe deve poter
     far crescere il pulsante invece di uscirne. */
  min-height: var(--st-btn-h);
  padding: var(--st-btn-pad-y) var(--st-btn-pad-x);
  border: var(--st-btn-bordo) solid transparent;
  border-radius: var(--st-btn-radius);
  font-family: var(--st-font-body);
  font-size: var(--st-btn-size);
  font-weight: var(--st-btn-peso);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--st-transition), border-color var(--st-transition), color var(--st-transition);
}

.c-btn:focus-visible {
  outline: 2px solid var(--st-p-rame);
  outline-offset: 2px;
}

.c-btn--primario {
  background: var(--st-p-rame);
  color: #fff;
}

.c-btn--primario:hover {
  background: var(--st-p-rame-scuro);
  color: #fff;
}

.c-btn--secondario {
  background: #fff;
  border-color: var(--st-p-rame);
  color: var(--st-p-rame-testo);
}

.c-btn--secondario:hover {
  background: var(--st-p-rame-tenue);
}

/* Il neutro non e' «meno importante»: e' l'azione che non promette niente —
   ripristina un filtro, apre a schermo intero, aggiunge un indirizzo. */
.c-btn--neutro {
  height: 44px;
  padding: 0 20px;
  background: #fff;
  border-color: var(--st-p-riga);
  color: var(--st-p-inchiostro);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

.c-btn--neutro:hover {
  border-color: #D9CFC2;
}

.c-btn--chiaro {
  height: 30px;
  padding: 0 16px;
  background: #fff;
  color: var(--st-p-inchiostro);
  font-size: 10.5px;
  border-radius: var(--st-r-campo);
}

.c-btn--blocco { width: 100%; }
.c-btn--alto   { height: 52px; font-size: var(--st-fs-small); }
.c-btn--xalto  { height: 56px; font-size: 14px; }
.c-btn--basso  { height: 32px; padding: 0 16px; font-size: 12px; text-transform: none; letter-spacing: 0; }

/* Il collegamento con la freccia. Non e' un pulsante travestito: e' un
   collegamento, e si comporta come tale — sottolineatura al passaggio, non
   cambio di fondo. */
.c-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--st-p-rame-testo);
  font-size: 12.5px;
  text-decoration: none;
}

.c-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.c-link--sottolineato { text-decoration: underline; text-underline-offset: 3px; }

/* Cerchio con icona: frecce della galleria, scorrimento dei correlati. */
.c-tondo {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--st-p-riga);
  background: #fff;
  cursor: pointer;
  color: var(--st-p-inchiostro);
}

.c-tondo--rame {
  width: 34px;
  height: 34px;
  background: var(--st-p-rame);
  border-color: var(--st-p-rame);
  color: #fff;
}

.c-tondo:focus-visible {
  outline: 2px solid var(--st-p-rame);
  outline-offset: 2px;
}

/* ==================================================================== *
 * PILLOLE E PASTIGLIE
 * ==================================================================== */

.c-pillola {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 15px;
  border: 1px solid var(--st-p-riga);
  border-radius: var(--st-r-pieno);
  background: #fff;
  color: var(--st-p-grigio);
  font: 400 12px/1 var(--st-font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--st-transition), border-color var(--st-transition), color var(--st-transition);
}

.c-pillola:hover {
  border-color: #D6C7B5;
  color: var(--st-p-inchiostro);
}

/*
 * Lo stato acceso si legge da `aria-pressed`, non da una classe messa a mano.
 * Cosi' non esistono due verita' da tenere allineate: quella che vede chi
 * guarda e quella che sente chi naviga con la voce.
 */
.c-pillola[aria-pressed="true"] {
  background: var(--st-p-rame);
  border-color: var(--st-p-rame);
  color: #fff;
}

.c-pillola:focus-visible {
  outline: 2px solid var(--st-p-rame);
  outline-offset: 2px;
}

.c-pillole {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* --- pastiglie ------------------------------------------------------- */

.c-pastiglia {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--st-r-pieno);
  font: 500 11px/1 var(--st-font-body);
  white-space: nowrap;
}

.c-pastiglia--scura  { background: var(--st-p-scuro); color: #fff; }
.c-pastiglia--rame   { background: var(--st-p-rame); color: #fff; }
.c-pastiglia--chiara { background: var(--st-p-crema); color: var(--st-p-inchiostro); }

/* Il pallino davanti allo stato non e' decorazione: e' il secondo segno.
   Il colore da solo non basta a chi non lo distingue. */
.c-stato::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.c-stato--ok     { background: var(--st-st-ok-bg);     color: var(--st-st-ok-fg); }
.c-stato--corso  { background: var(--st-st-corso-bg);  color: var(--st-st-corso-fg); }
.c-stato--attesa { background: var(--st-st-attesa-bg); color: var(--st-st-attesa-fg); }
.c-stato--neutro { background: var(--st-st-neutro-bg); color: var(--st-st-neutro-fg); }

/* ==================================================================== *
 * CAMPI
 * ==================================================================== */

.c-campo { display: block; }

.c-campo__etichetta {
  display: block;
  margin-bottom: 8px;
  font: 500 12.5px/1.3 var(--st-font-body);
  color: var(--st-p-inchiostro);
}

/* L'asterisco degli obbligatori e' rame e attaccato all'etichetta: staccato
   sembra un rimando a una nota che non esiste. */
.c-campo__etichetta em {
  font-style: normal;
  color: var(--st-p-rame-testo);
}

.c-campo__guscio { position: relative; }

.c-campo input,
.c-campo select,
.c-campo textarea {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--st-p-riga);
  border-radius: var(--st-r-campo);
  background: #fff;
  font: 400 13.5px/1 var(--st-font-body);
  color: var(--st-p-inchiostro);
  transition: border-color var(--st-transition);
}

.c-campo textarea {
  height: 86px;
  padding: 12px 14px;
  line-height: 1.55;
  resize: vertical;
}

.c-campo input::placeholder,
.c-campo textarea::placeholder { color: var(--st-p-debole); }

.c-campo input:focus-visible,
.c-campo select:focus-visible,
.c-campo textarea:focus-visible {
  border-color: var(--st-p-rame);
  outline: 2px solid var(--st-p-rame);
  outline-offset: 1px;
}

.c-campo--alto input { height: 52px; }

.c-campo__aiuto {
  margin-top: 6px;
  font: 400 11.5px/1.5 var(--st-font-body);
  color: var(--st-p-debole);
}

/* --- icone dentro il campo -------------------------------------------- */

.c-campo__icona {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--st-p-debole);
  pointer-events: none;
}

.c-campo__icona--sx { left: 16px; }
.c-campo--icona-sx input { padding-left: 46px; }

/* L'occhio e' un pulsante vero, non un'icona: si preme, cambia stato, e la sua
   area toccabile e' 40x40 anche se il disegno e' 18. */
.c-campo__occhio {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  color: var(--st-p-debole);
  cursor: pointer;
}

.c-campo--icona-dx input { padding-right: 44px; }

.c-campo__occhio:focus-visible {
  outline: 2px solid var(--st-p-rame);
  outline-offset: -2px;
  border-radius: 6px;
}

/* --- etichetta interna (checkout) --------------------------------------
   L'etichetta sta dentro il riquadro e **resta visibile a campo compilato**.
   Non e' un segnaposto: un segnaposto sparisce appena si scrive, e chi torna
   sul modulo dieci minuti dopo non sa piu' cosa aveva scritto dove. */

.c-campo--interno .c-campo__guscio {
  position: relative;
  height: 56px;
  padding: 8px 14px 0;
  border: 1px solid var(--st-p-riga);
  border-radius: var(--st-r-campo);
  background: #fff;
}

.c-campo--interno .c-campo__etichetta {
  margin: 0;
  font: 400 10.5px/1.3 var(--st-font-body);
  color: var(--st-p-debole);
}

.c-campo--interno input,
.c-campo--interno select {
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 13.5px;
}

.c-campo--interno input:focus-visible,
.c-campo--interno select:focus-visible {
  outline: none;
}

.c-campo--interno:focus-within .c-campo__guscio {
  border-color: var(--st-p-rame);
  outline: 2px solid var(--st-p-rame);
  outline-offset: 1px;
}

/* --- errore ------------------------------------------------------------ */

.c-campo--errore input,
.c-campo--errore select,
.c-campo--errore textarea,
.c-campo--errore.c-campo--interno .c-campo__guscio {
  border-color: var(--st-error);
}

.c-campo__errore {
  margin-top: 6px;
  font: 400 11.5px/1.5 var(--st-font-body);
  color: var(--st-error);
}

/* --- righe di campi ---------------------------------------------------- */

.c-campi        { display: grid; gap: 18px; }
.c-campi--2     { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.c-campi--4     { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.c-campi--stretta { gap: 14px; }

/* ==================================================================== *
 * CASELLE, CERCHIETTI, RIGHE SELEZIONABILI
 * ==================================================================== */

.c-scelta {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font: 400 13px/1.5 var(--st-font-body);
  color: var(--st-p-inchiostro);
}

.c-scelta input {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid var(--st-p-riga);
  background: #fff;
  cursor: pointer;
  /* L'area toccabile arriva a 24 senza spostare il disegno. */
  outline-offset: 3px;
  position: relative;
}

.c-scelta input[type="checkbox"] { border-radius: 4px; }
.c-scelta input[type="radio"]    { border-radius: 50%; }

.c-scelta input:checked {
  border-color: var(--st-p-rame);
}

.c-scelta input[type="checkbox"]:checked {
  background: var(--st-p-rame);
}

.c-scelta input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4.5px;
  width: 8px;
  height: 4px;
  border-left: 1.6px solid #fff;
  border-bottom: 1.6px solid #fff;
  transform: rotate(-45deg);
}

.c-scelta input[type="radio"]:checked {
  border-width: 5px;
}

.c-scelta input:focus-visible {
  outline: 2px solid var(--st-p-rame);
}

/* L'allineamento e' alla **prima riga** del testo, non al centro del blocco:
   con un'etichetta su due righe un comando centrato galleggia a meta' e non
   sembra piu' appartenere alla prima parola. */
.c-scelta input { margin-top: 1px; }

/* --- riga selezionabile ------------------------------------------------ */

.c-riga {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 16px;
  border: 1px solid var(--st-p-riga);
  border-radius: var(--st-r-campo);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--st-transition);
}

.c-riga + .c-riga { margin-top: 10px; }

.c-riga__testo { flex: 1; min-width: 0; }

.c-riga__titolo { font: 400 13.5px/1.35 var(--st-font-body); color: var(--st-p-inchiostro); }
.c-riga__nota   { margin-top: 2px; font: 400 11.5px/1.4 var(--st-font-body); color: var(--st-p-grigio); }

.c-riga__valore {
  font: 500 13.5px/1 var(--st-font-body);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Scelta: **solo** il bordo cambia. Un fondo diverso su una riga alta 62 px
   diventa una fascia colorata, ed e' esattamente cio' che il rame non deve
   fare. */
.c-riga:has(input:checked) { border-color: var(--st-p-rame); border-width: 1.5px; padding: 11.5px 15.5px; }
.c-riga:hover              { border-color: #D9CFC2; }
.c-riga:has(input:focus-visible) { outline: 2px solid var(--st-p-rame); outline-offset: 2px; }

/* Quando la riga scelta contiene altri campi, questi stanno **dentro** il
   bordo rame: il riquadro cresce invece di aprirsi sotto. */
.c-riga--espansa { flex-wrap: wrap; align-items: flex-start; }
.c-riga--espansa .c-riga__dentro { flex: 0 0 100%; margin-top: 14px; }

/* ==================================================================== *
 * COLORE, STELLE
 * ==================================================================== */

.c-tinte { display: flex; flex-wrap: wrap; gap: 10px; }

.c-tinta {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(35, 32, 29, .14);
  padding: 0;
  cursor: pointer;
  background-clip: padding-box;
}

.c-tinta--m { width: 26px; height: 26px; }
.c-tinta--s { width: 22px; height: 22px; }
.c-tinta--xs { width: 13px; height: 13px; }
.c-tinta--xxs { width: 11px; height: 11px; }

.c-tinte--xs { gap: 6px; }

/* L'anello e' staccato dal pallino: sovrapposto sparirebbe sulle tinte scure. */
.c-tinta[aria-pressed="true"],
.c-tinta.is-scelta {
  box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px var(--st-p-rame);
}

.c-tinta:focus-visible {
  outline: 2px solid var(--st-p-rame);
  outline-offset: 3px;
}

.c-stelle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--st-p-rame);
}

.c-stelle svg { width: 13px; height: 13px; }

/* ==================================================================== *
 * VOCI CON ICONA
 * ==================================================================== */

.c-voce {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.c-voce__icona { flex: none; width: 26px; height: 26px; color: var(--st-p-rame); }
.c-voce__titolo { display: block; font: 500 13px/1.35 var(--st-font-body); color: var(--st-p-inchiostro); }
.c-voce__nota   { display: block; margin-top: 2px; font: 400 12px/1.45 var(--st-font-body); color: var(--st-p-grigio); }

.c-voce--s .c-voce__icona { width: 20px; height: 20px; }
.c-voce--s .c-voce__titolo { font-size: 12.5px; }
.c-voce--s .c-voce__nota { font-size: 11px; }

/* Riquadro icona: quadrato crema con l'icona dentro. */
.c-tassello {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--st-r-scheda);
  background: var(--st-p-crema);
  color: var(--st-p-rame);
}

.c-tassello svg { width: 20px; height: 20px; }

/* ==================================================================== *
 * FASCIA DELLE RASSICURAZIONI
 * ==================================================================== */

.c-fascia {
  display: flex;
  align-items: center;
  min-height: var(--st-trust-h);
  padding: 14px 0;
  border-radius: var(--st-r-scheda);
  background: var(--st-p-crema);
}

.c-fascia__voce {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
}

/* Il separatore e' una linea fra due voci, non un bordo di ogni voce: cosi'
   non compare prima della prima ne' dopo l'ultima, e non serve una classe
   sull'ultimo elemento che qualcuno dimenticherebbe di aggiornare. */
.c-fascia__voce + .c-fascia__voce {
  border-left: 1px solid var(--st-p-riga);
}

/* ==================================================================== *
 * PASSI
 * ==================================================================== */

.c-passi {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.c-passi::-webkit-scrollbar { display: none; }

.c-passi__voce { display: flex; align-items: center; flex: 0 0 auto; }

.c-passi__voce + .c-passi__voce::before {
  content: "";
  width: clamp(18px, 3.4vw, 52px);
  height: 1px;
  margin: 0 8px;
  background: var(--st-p-riga);
  flex: 0 0 auto;
}

.c-passi__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border: 0;
  background: none;
  font: inherit;
  color: var(--st-p-grigio);
  cursor: pointer;
  white-space: nowrap;
}

.c-passi__n {
  display: grid;
  place-items: center;
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--st-p-riga);
  border-radius: 50%;
  background: #fff;
  font: 400 13px/1 var(--st-font-body);
  font-variant-numeric: tabular-nums;
  color: var(--st-p-debole);
  transition: background var(--st-transition), border-color var(--st-transition), color var(--st-transition);
}

.c-passi__et { font-size: 13.5px; }

.c-passi__voce.is-corrente .c-passi__n {
  background: var(--st-p-rame);
  border-color: var(--st-p-rame);
  color: #fff;
}

.c-passi__voce.is-corrente .c-passi__btn {
  color: var(--st-p-inchiostro);
  font-weight: 500;
}

/*
 * La spunta si disegna, la cifra resta.
 *
 * Sostituire il testo con un carattere di spunta toglie a chi legge con la
 * voce l'unica informazione utile — quale passo e' completato. Qui la cifra
 * diventa trasparente e il segno lo disegna uno pseudo-elemento: a schermo si
 * vede la spunta, all'ascolto si sente «passo 2».
 */
.c-passi__voce.is-fatto .c-passi__n {
  border-color: var(--st-p-rame);
  color: transparent;
}

.c-passi__voce.is-fatto .c-passi__n::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--st-p-rame);
  border-bottom: 1.5px solid var(--st-p-rame);
  transform: rotate(-45deg);
}

.c-passi__btn:focus-visible {
  outline: 2px solid var(--st-p-rame);
  outline-offset: 3px;
  border-radius: 8px;
}

/* Nel checkout la linea **dopo** il passo corrente e' rame: dice da dove si
   viene, che in un modulo lungo e' l'unica cosa che si vuole sapere. */
.c-passi--percorso .c-passi__voce { flex: 1 1 auto; }
.c-passi--percorso .c-passi__voce:last-child { flex: 0 0 auto; }
.c-passi--percorso .c-passi__voce + .c-passi__voce::before { width: auto; flex: 1 1 auto; margin: 0 12px; }
.c-passi--percorso .c-passi__n { width: 34px; height: 34px; font-size: 14px; }
.c-passi--percorso .c-passi__voce.is-fatto + .c-passi__voce::before,
.c-passi--percorso .c-passi__voce.is-corrente + .c-passi__voce::before { background: var(--st-p-rame); }

/* ==================================================================== *
 * SCHEDE
 * ==================================================================== */

.c-scheda {
  background: #fff;
  border: 1px solid var(--st-p-riga);
  border-radius: var(--st-r-scheda);
  padding: 20px;
}

.c-scheda--l { padding: var(--st-l); }
.c-scheda--nuda { padding: 0; overflow: hidden; }

.c-scheda__testa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.c-scheda__titolo {
  margin: 0;
  font: 500 17px/1.3 var(--st-font-body);
  color: var(--st-p-inchiostro);
}

/* Etichetta di sezione: MAIUSCOLO piccolo e spaziato. Non e' un titolo — sta
   sopra una griglia e dice di cosa si tratta senza rubare la scena. */
.c-sezione {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.c-sezione__et {
  margin: 0;
  font: 500 12px/1 var(--st-font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-p-inchiostro);
}

/* Occhiello: sta sopra un titolo grande, in rame. */
.c-occhiello {
  margin: 0;
  font: 500 11.5px/1 var(--st-font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--st-p-rame-testo);
}

/* ==================================================================== *
 * RIQUADRO INFORMATIVO
 * ==================================================================== */

.c-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--st-r-campo);
  background: var(--st-p-crema);
}

.c-info__icona { flex: none; width: 22px; height: 22px; color: var(--st-p-rame); }
.c-info__titolo { display: block; font: 500 12.5px/1.35 var(--st-font-body); color: var(--st-p-inchiostro); }
.c-info__testo { display: block; margin-top: 4px; font: 400 11.5px/1.5 var(--st-font-body); color: var(--st-p-grigio); }

/* ==================================================================== *
 * TOTALI
 * ==================================================================== */

.c-totali { display: grid; gap: 10px; font-variant-numeric: tabular-nums; }

.c-totali__riga {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font: 400 13px/1.4 var(--st-font-body);
}

.c-totali__riga span:first-child { color: var(--st-p-grigio); }

/* La linea sopra il totale e' **in inchiostro**, non grigia: e' l'unica riga
   della scheda che separa «quanto costano le cose» da «quanto paghi». */
.c-totali__somma {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--st-p-inchiostro);
}

.c-totali__somma-et { font: 500 16px/1.2 var(--st-font-body); }
.c-totali__somma-val { font: 500 20px/1 var(--st-font-body); font-variant-numeric: tabular-nums; }

.c-totali__nota {
  margin: 3px 0 0;
  text-align: right;
  font: 400 11px/1.4 var(--st-font-body);
  color: var(--st-p-debole);
}

/* ==================================================================== *
 * PAGINAZIONE, LINGUETTE, AVATAR
 * ==================================================================== */

.c-pagine { display: flex; align-items: center; justify-content: center; gap: 8px; }

.c-pagine__n {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--st-p-riga);
  border-radius: 50%;
  background: #fff;
  font: 400 13px/1 var(--st-font-body);
  font-variant-numeric: tabular-nums;
  color: var(--st-p-grigio);
  text-decoration: none;
}

.c-pagine__n[aria-current="page"] {
  background: var(--st-p-rame);
  border-color: var(--st-p-rame);
  color: #fff;
}

.c-pagine__salto { width: 30px; text-align: center; color: var(--st-p-debole); }

.c-linguette {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--st-p-riga);
}

.c-linguette__voce {
  position: relative;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  font: 500 12.5px/40px var(--st-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-p-grigio);
  cursor: pointer;
}

.c-linguette__voce[aria-selected="true"] { color: var(--st-p-rame-testo); }

.c-linguette__voce[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--st-p-rame);
}

.c-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--st-p-crema);
  font: 500 14px/1 var(--st-font-body);
  color: var(--st-p-inchiostro);
}

/* ==================================================================== *
 * STATO VUOTO
 * ==================================================================== */

/*
 * Ogni elenco ne ha uno. Una scheda vuota senza spiegazione fa credere che
 * qualcosa si sia rotto; una che dice cosa comparira' li' e offre l'azione per
 * arrivarci e' la stessa scheda che lavora.
 */
.c-vuoto {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 32px 20px;
  text-align: center;
}

.c-vuoto__icona { width: 32px; height: 32px; color: var(--st-p-debole); }
.c-vuoto__testo { margin: 0; font: 400 13px/1.55 var(--st-font-body); color: var(--st-p-grigio); max-width: 34ch; }

/* ==================================================================== *
 * MOVIMENTO RIDOTTO
 * ==================================================================== */

@media (prefers-reduced-motion: reduce) {
  .c-btn,
  .c-pillola,
  .c-riga,
  .c-passi__n,
  .c-campo input,
  .c-campo select,
  .c-campo textarea {
    transition: none;
  }
}