/**
 * Barra superiore, testata, fascia e piede — alle misure dei mockup.
 *
 * Sta in un foglio suo e non dentro `header.css` e `footer.css` per la stessa
 * ragione per cui `passi.css` sta fuori da `configurator.css`: quei due fogli
 * descrivono una versione precedente che regge le pagine non ancora rifatte, e
 * riscriverli in blocco significherebbe cambiare in un colpo solo cio' che va
 * cambiato una pagina per volta. Questo si carica **dopo** e corregge le sole
 * misure che i mockup fissano.
 *
 * Quando tutte le pagine saranno passate, i tre fogli si fondono in uno e
 * questo sparisce. Finche' esiste, e' un debito dichiarato.
 */

/* ==================================================================== *
 * BARRA SUPERIORE — 42 px, contenuto centrato
 * ==================================================================== */

.st-topbar {
  min-height: var(--st-topbar-h);
  padding: 0;
  background: #fff;
  border-bottom: 1px solid var(--st-p-riga);
}

/*
 * Centrato nel **viewport**, non nel contenitore.
 *
 * Nei mockup le cinque voci stanno al centro dello schermo, non al centro
 * della colonna di contenuto: e' una fascia di servizio, non una riga della
 * pagina, e allinearla al contenitore la fa sembrare storta rispetto al menu
 * che ha sotto — che invece e' centrato davvero.
 */
.st-topbar__list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: var(--st-topbar-h);
  margin: 0;
  padding: 0 24px;
  list-style: none;
  flex-wrap: wrap;
}

.st-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 400 var(--st-fs-micro)/1 var(--st-font-body);
  color: var(--st-p-rame-testo);
}

.st-topbar__item svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Le voci in eccedenza spariscono prima di andare a capo: una barra di
   servizio su due righe e' alta quanto la testata e non serve a nessuno. */
@media (max-width: 1180px) {
  .st-topbar__item--secondary { display: none; }
}

@media (max-width: 780px) {
  .st-topbar { display: none; }
}

/* ==================================================================== *
 * TESTATA — 76 px
 * ==================================================================== */

.st-header {
  background: #fff;
  border-bottom: 1px solid var(--st-p-riga);
}

/* ------------------------------------------------------------------ *
 * LA RIGA DEI COMANDI
 *
 * Tre colonne: marchio, ricerca, azioni.
 *
 * LE COLONNE LATERALI SONO UGUALI PER COSTRUZIONE
 * Con `auto` ognuna prendeva la larghezza del suo contenuto, e i due lati non
 * hanno lo stesso contenuto: a sinistra un marchio largo 202, a destra tre
 * icone che ne fanno 110. La colonna di mezzo occupava quel che restava, e il
 * campo di ricerca — centrato dentro di essa — finiva quarantanove pixel a
 * destra del centro della pagina. Non abbastanza per gridare al difetto,
 * abbastanza perche' la ricerca e la riga delle categorie sotto, quella si'
 * centrata davvero, non fossero sullo stesso asse.
 *
 * Con le laterali a `minmax(0, 1fr)` le due colonne sono uguali qualunque cosa
 * ci sia dentro, e il campo cade sull'asse della pagina. E' la stessa
 * correzione gia' fatta piu' sotto per il marchio sul telefono: `1fr` e non
 * `auto` ogni volta che due lati diversi devono lasciare al centro il centro.
 *
 * `minmax(0, …)` e non `1fr` secco: un `1fr` non scende mai sotto la larghezza
 * del proprio contenuto, e fra i 1140 e i 1280 le colonne si rifiutavano di
 * stringersi spingendo le icone oltre il bordo.
 *
 * `min-height` e non `height`: la barra e' alta 76 finche' il contenuto ci sta
 * dentro, e il contenuto piu' alto e' il marchio a 66.
 * ------------------------------------------------------------------ */
.st-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  min-height: var(--st-header-h);
}

.st-header__lato {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Sopra i 1140 il menu e la lente non servono: le categorie hanno la loro riga
   e la ricerca e' il campo qui accanto. */
.st-header__lato--sx { display: none; }

.st-header__logo { grid-column: 1; justify-self: start; }

/* ------------------------------------------------------------------ *
 * IL CAMPO DI RICERCA
 *
 * 560 px e non «tutto lo spazio»: un campo che si allarga fino a riempire la
 * colonna diventa lungo settecento pixel su uno schermo largo, e un campo
 * lungo settecento pixel per scriverci «tenda a rullo» sembra la casella di
 * un modulo, non una ricerca. Il limite lo tiene alla misura di cio' che ci
 * si scrive dentro; lo spazio che avanza resta aria fra il marchio e le
 * icone.
 * ------------------------------------------------------------------ */
.st-header__cerca {
  grid-column: 2;
  width: 100%;
  min-width: 0;
}

/* Il pannello dei suggerimenti scende dal campo e non deve spingere la barra:
   esce dal flusso e si appoggia sopra la pagina. Sopra la scena della ricerca
   (z-index 90) starebbe male, sotto le icone della barra sparirebbe. */
.st-header__cerca .st-search { width: 100%; }
.st-header__cerca .st-search__panel { z-index: 70; }

.st-header__actions { grid-column: 3; justify-self: end; }

/* ------------------------------------------------------------------ *
 * LA RIGA DELLE CATEGORIE
 *
 * Il filetto e' in cima e non in fondo: in fondo alla testata ce n'e' gia'
 * uno — il bordo di `.st-header` — e due righe sottili a dodici pixel di
 * distanza si leggono come un errore di stampa. Qui separa i comandi dalla
 * merce, che e' la divisione che conta.
 * ------------------------------------------------------------------ */
.st-header__categorie {
  border-top: 1px solid var(--st-p-riga);
}

.st-header__categorie-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--st-catrow-h);
}

/* ------------------------------------------------------------------ *
 * LE VOCI SONO ALTE QUANTO LA RIGA
 *
 * Non e' un vezzo di allineamento, risolve due cose insieme.
 *
 * La barretta della voce attiva era posizionata a una distanza fissa dalla
 * linea di base — 22 px, misurati quando la navigazione stava nella riga dei
 * comandi. Spostata quaggiu' quella distanza la faceva cadere mezzo pixel
 * dentro la riga e il resto fuori: a schermo restava un puntino color rame
 * sotto la voce, che sembrava una macchia. Ora la barretta e' ancorata al
 * bordo inferiore della voce, e la voce e' alta quanto la riga: si appoggia
 * dove deve, e ci resta anche se domani la riga cambia altezza.
 *
 * E il pannello a tendina scende da `top: 100%` della voce. Con la voce alta
 * quanto il testo, il pannello partiva da meta' riga e per raggiungerlo si
 * attraversavano venti pixel scoperti — cioe' il pannello si chiudeva mentre
 * ci si andava. Ora parte dal bordo della riga.
 * ------------------------------------------------------------------ */
.st-header__categorie .st-nav__item { display: flex; }

/* Tre classi, e non e' pignoleria: `global.css` dichiara `.st-nav__list a`, che
   vale una classe **e un elemento**. Un selettore a due classi passava il
   `display` e si faceva rifiutare l'altezza — mezzo effetto, cioe' il modo piu'
   confuso possibile di fallire. E' la lezione gia' annotata piu' sotto:
   un'eccezione va scritta precisa almeno quanto la regola che corregge. */
.st-header__categorie .st-nav__list .st-nav__link {
  display: inline-flex;
  align-items: center;
  height: var(--st-catrow-h);
  padding-block: 0;
  margin-block: 0;
}

/* --- marchio ---------------------------------------------------------- */

.st-header__logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

/*
 * SESSANTASEI E NON QUARANTA
 *
 * Il marchio e' impilato — monogramma sopra, «SOLUZIONE TENDE» sotto — e a
 * quaranta pixel le due righe si dividevano quell'altezza in parti che nessuna
 * delle due bastava: il disegno diventava un graffio e le lettere una riga
 * grigia.
 *
 * La barra non cresce lo stesso. `--st-header-h` e' 76 px ed e' un **minimo**:
 * dentro ci stanno i pulsanti, che sono alti 44. Portando il marchio a 66 il
 * contenuto piu' alto resta sotto i 76, e la testata misura esattamente quello
 * che misurava prima — cinque pixel di respiro sopra e sotto il logo.
 *
 * Sessantasei e non di piu': il lockup e' ritagliato stretto, l'inchiostro
 * tocca il bordo dell'immagine, e oltre questa misura il marchio sfiorerebbe il
 * filetto della testata. Per farlo crescere ancora bisogna alzare
 * `--st-header-h`, che pero' non e' solo la testata: da quel numero dipendono
 * l'inizio dell'hero e la fascia delle garanzie.
 */
.st-header__logo svg,
.st-header__logo img {
  height: 66px;
  width: auto;
}

/* --- menu ------------------------------------------------------------- */

/*
 * Il menu occupa lo spazio residuo e si centra dentro di esso.
 *
 * Non e' centrato nella pagina: e' centrato fra il marchio e le icone. La
 * differenza si vede quando il marchio e le icone hanno larghezze diverse — e
 * le hanno sempre — e un menu centrato sulla pagina risulta spostato rispetto
 * a cio' che ha accanto, che e' l'unica cosa con cui viene confrontato.
 */
.st-nav {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.st-nav__list {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-nav__link {
  position: relative;
  display: inline-block;
  padding: 0;
  font: 500 var(--st-fs-micro)/1 var(--st-font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-p-inchiostro);
  text-decoration: none;
  white-space: nowrap;
}

.st-nav__link:hover { color: var(--st-p-rame-testo); }

.st-nav__item.is-active .st-nav__link { color: var(--st-p-rame-testo); }

/* ------------------------------------------------------------------ *
 * LA SOTTOLINEATURA
 *
 * Una sola regola per due stati: cresce dal centro quando il puntatore passa,
 * e resta distesa sulla voce della pagina in cui si e'. Larga quanto la
 * parola, non quanto la voce — e' un sottolineato, e un sottolineato che
 * sborda dalla parola smette di indicarla.
 *
 * `scaleX` e non `left`/`right` al 50%. La stesura precedente collassava la
 * barretta portandone i due lati al centro, ma due lati al cinquanta per cento
 * non fanno larghezza zero: fanno **un pixel**, per arrotondamento. Sotto ogni
 * voce del menu restava un trattino color rame largo un pixel — troppo poco
 * per sembrare un difetto, abbastanza per sembrare sporco. Con `scaleX(0)` la
 * barretta e' larga zero perche' e' scalata a zero, e in piu' l'animazione non
 * ridisegna la pagina a ogni fotogramma.
 * ------------------------------------------------------------------ */
.st-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--st-p-rame);
  transform: scaleX(0);
  transition: transform .18s ease;
}

.st-nav__link:hover::after,
.st-nav__link:focus-visible::after,
.st-nav__item.is-active .st-nav__link::after { transform: scaleX(1); }

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

/* --- icone ------------------------------------------------------------ */

.st-header__actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex: none;
}

/*
 * IL DISEGNO E' 20 PX, L'AREA TOCCABILE E' 44
 *
 * Le icone erano larghe e alte venti pixel e basta: su un telefono sono un
 * bersaglio che si manca, e l'icona del carrello e' l'ultimo posto dove si
 * puo' chiedere a qualcuno di mirare.
 *
 * L'area si allarga con l'imbottitura e si riprende con un margine negativo,
 * cosi' il glifo resta di venti pixel e la fila di icone conserva i suoi
 * ventidue di distacco: cresce cio' che si preme, non cio' che si vede.
 */
.st-iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--st-p-inchiostro);
  cursor: pointer;
}

.st-iconbtn svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.5;
}

.st-iconbtn:hover { color: var(--st-p-rame-testo); }

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

/* Il pallino esce dall'icona di sei pixel per angolo: dentro sarebbe illeggibile
   a diciassette pixel, fuori si stacca e si conta a colpo d'occhio. */
.st-iconbtn__badge {
  position: absolute;
  /* Riferito al riquadro da 44, non piu' a quello da 20: il glifo e' centrato,
     quindi il suo angolo alto-destro cade a 12 px dai bordi del riquadro. */
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--st-r-pieno);
  background: var(--st-p-rame);
  color: #fff;
  /* IL CONTATORE NON E' UN TESTO
     Dieci px sotto il minimo che il sito si e' dato, e resta cosi': e' il
     numero dentro la bollicina del carrello, larga 17 px. E' un glifo dentro
     una forma, come il pallino del filtro colore — la scala vale per cio'
     che si legge, non per cio' che si conta a colpo d'occhio. */
  font: 600 10px/1 var(--st-font-body);
  font-variant-numeric: tabular-nums;
}

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

/*
 * Sta **dentro** il contenitore e ha gli angoli arrotondati.
 *
 * Nei mockup non e' una fascia da bordo a bordo: e' un riquadro crema largo
 * quanto il contenuto, che galleggia sul bianco. Portarlo a tutta larghezza —
 * come faceva prima — lo trasforma in un piano di appoggio del piede, e la
 * pagina finisce con due zone colorate attaccate.
 */
/* `.st-trust` **e'** il riquadro: nel markup e' l'elenco stesso, non un
   involucro con dentro una lista. Vestire un contenitore che non esiste era
   il motivo per cui la fascia restava alta 86 px invece di 74. */
.st-trust {
  display: flex;
  align-items: center;
  min-height: var(--st-trust-h);
  margin: 0;
  padding: 14px 0;
  list-style: none;
  border: 0;
  border-radius: var(--st-r-scheda);
  background: var(--st-p-crema);
}

.st-trust__item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
  text-align: left;
}

.st-trust__item + .st-trust__item {
  border-left: 1px solid var(--st-p-riga);
}

.st-trust__icona {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--st-p-rame);
}

.st-trust__icona svg { width: 26px; height: 26px; }

/*
 * LA SCALA SI USA, NON SI RISCRIVE A MANO
 *
 * Qui c'erano `13px` e `12px` scritti direttamente. Il secondo sta **sotto il
 * pavimento** che il progetto si e' dato — tredici pixel, con «sotto non si
 * scende» annotato accanto al token — e nessuno se n'era accorto perche' il
 * valore non passava dalla scala: una scala che si puo' scavalcare scrivendo
 * un numero non e' una scala, e' un suggerimento.
 *
 * E la gerarchia era sbagliata anche a prescindere dal pavimento: titolo 13 e
 * sottotitolo 12 sono un pixel di differenza, che a schermo non si legge come
 * gerarchia — si legge come due testi della stessa importanza, uno dei quali
 * per caso piu' pallido. Ora 14 e 13: un gradino intero della scala.
 */
.st-trust__testo strong {
  display: block;
  font: 500 var(--st-fs-small) / 1.35 var(--st-font-body);
  color: var(--st-p-inchiostro);
}

.st-trust__testo > span {
  display: block;
  margin-top: 2px;
  font: 400 var(--st-fs-micro) / 1.45 var(--st-font-body);
  color: var(--st-p-grigio);
}

@media (max-width: 900px) {
  .st-trust {
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 18px;
    gap: 18px 0;
  }

  .st-trust__item {
    flex: 0 0 50%;
    justify-content: flex-start;
    padding: 0 12px;
  }

  /* Le linee verticali su due righe diventano una griglia storta: via. */
  .st-trust__item + .st-trust__item { border-left: 0; }
}

/*
 * SOTTO I 560 PX LA FASCIA VA IN COLONNA
 *
 * A due colonne su uno schermo da 390 ogni voce e' larga centocinquantatre
 * pixel, e tolti l'icona e i margini al testo ne restano **settantacinque**.
 * «Pagamenti sicuri» ne vuole settantotto, quindi si spezzava: «Pagamen /
 * ti sicuri», «Produzion / e italiana». Non una parola a capo — una parola
 * **rotta a meta'**, che e' il difetto tipografico che si nota per primo anche
 * senza saperlo nominare.
 *
 * Si spezzava perche' da qualche parte piu' in alto vale
 * `overflow-wrap: break-word`, che e' una difesa giusta contro le parole
 * lunghissime — un indirizzo, un codice — e qui stava rattoppando una colonna
 * troppo stretta. La difesa non e' il problema: il problema e' chiedere a due
 * parole normali di stare in settantacinque pixel.
 *
 * In colonna singola il testo ne ha duecentocinquanta e non si rompe niente.
 * La fascia diventa piu' alta: e' il prezzo giusto, perche' cinque righe
 * leggibili valgono piu' di dieci mezze parole.
 */
@media (max-width: 560px) {
  .st-trust .st-trust__item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .st-trust { gap: 14px 0; }
}

/* ==================================================================== *
 * PIEDE
 * ==================================================================== */

.st-footer {
  background: #fff;
  border-top: 1px solid var(--st-p-riga);
}

.st-footer__main {
  display: grid;
  grid-template-columns: 250px repeat(4, minmax(0, 150px)) minmax(0, 280px);
  gap: 32px;
  padding: 40px 0;
  align-items: start;
}

.st-footer__brand p {
  margin: 16px 0 0;
  font: 400 var(--st-fs-micro)/1.6 var(--st-font-body);
  color: var(--st-p-grigio);
  max-width: 34ch;
}

.st-footer__col h3,
.st-footer__title {
  margin: 0 0 16px;
  /* Anche qui il pavimento: un titolo di colonna maiuscolo e spaziato a dodici
     pixel e' fra le cose meno leggibili di una pagina, perche' il maiuscolo
     toglie gia' gli appigli delle lettere alte e basse. */
  font: 500 var(--st-fs-micro) / 1 var(--st-font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-p-inchiostro);
}

.st-footer__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.st-footer__col a {
  font: 400 var(--st-fs-micro)/1.4 var(--st-font-body);
  color: var(--st-p-grigio);
  text-decoration: none;
}

.st-footer__col a:hover {
  color: var(--st-p-rame-testo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- newsletter: campo e pulsante uniti -------------------------------- */

.st-footer__news p {
  margin: 0 0 14px;
  font: 400 var(--st-fs-micro)/1.5 var(--st-font-body);
  color: var(--st-p-grigio);
}

.st-footer__newsform {
  display: flex;
  align-items: stretch;
}

.st-footer__newsform input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--st-p-riga);
  border-right: 0;
  border-radius: var(--st-r-campo) 0 0 var(--st-r-campo);
  background: #fff;
  font: 400 13px/1 var(--st-font-body);
}

.st-footer__newsform input::placeholder { color: var(--st-p-debole); }

.st-footer__newsform button {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0 var(--st-r-campo) var(--st-r-campo) 0;
  background: var(--st-p-rame);
  color: #fff;
  cursor: pointer;
}

.st-footer__newsform button svg { width: 16px; height: 16px; }
.st-footer__newsform button:hover { background: var(--st-p-rame-scuro); }

.st-footer__newsform input:focus-visible,
.st-footer__newsform button:focus-visible {
  outline: 2px solid var(--st-p-rame);
  outline-offset: 1px;
  position: relative;
  z-index: 1;
}

.st-footer__social {
  display: flex;
  gap: 14px;
  margin-top: 20px;
}

.st-footer__social a { color: var(--st-p-grigio); }
.st-footer__social a:hover { color: var(--st-p-rame-testo); }
.st-footer__social svg { width: 18px; height: 18px; }

/* --- barra legale ------------------------------------------------------ */

.st-footer__legal {
  border-top: 1px solid var(--st-p-riga);
}

.st-footer__legal .st-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
  flex-wrap: wrap;
}

.st-footer__legal,
.st-footer__legal a,
.st-footer__legal p {
  font: 400 var(--st-fs-micro)/1.6 var(--st-font-body);
  color: var(--st-p-debole);
}

.st-footer__legal a { text-decoration: underline; text-underline-offset: 3px; }
.st-footer__legal a:hover { color: var(--st-p-rame-testo); }

@media (max-width: 1080px) {
  .st-footer__main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
  }
  .st-footer__brand { grid-column: 1 / -1; }
  .st-footer__news { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .st-footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==================================================================== *
 * SOTTO I 1140 IL MENU NON C'E'
 *
 * `header.css:471` lo nasconde da li' in giu' e lascia il posto al pannello
 * che si apre dal pulsante. Questo foglio pero' si carica **dopo** e dichiara
 * `.st-nav { display: flex }` senza condizioni: la regola vinceva per ordine,
 * il menu restava disteso, e a 390 px sei voci in fila con `nowrap` spingevano
 * la pagina a 550 px di larghezza. Il sintomo era uno scorrimento orizzontale
 * su **tutte** le pagine, che sembrava un difetto della scheda prodotto.
 *
 * La soglia e' la stessa del foglio comune: due numeri diversi si
 * disallineerebbero alla prima modifica.
 * ==================================================================== */

@media (max-width: 1140px) {
  /* La riga delle categorie sparisce tutta: le voci sono nel cassetto. Basta
     nascondere il contenitore — `.st-nav` non ha piu' bisogno di una regola
     sua, e averne due che dicono la stessa cosa e' il modo piu' comune di
     ritrovarsi con un menu che sparisce anche dove doveva restare. */
  .st-header__categorie { display: none; }
  .st-header__lato--sx { display: flex; }
  .st-burger { display: inline-grid; }

  /* Il campo esce dalla barra e torna la lente: un campo di testo in una
     testata da 390 px lascia una trentina di pixel al marchio. */
  .st-header__cerca { display: none; }
}

/* --- il telefono nella barra superiore --------------------------------- */

.st-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: var(--st-topbar-h);
  padding: 0 24px;
  max-width: var(--st-container);
  margin-inline: auto;
}

.st-topbar__inner .st-topbar__list {
  flex: 0 1 auto;
  padding: 0;
  min-height: 0;
}

.st-topbar__aiuto {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  flex: 0 0 auto;
  font: 400 var(--st-fs-micro)/1 var(--st-font-body);
  color: var(--st-p-grigio);
  white-space: nowrap;
}

.st-topbar__aiuto svg { width: 14px; height: 14px; color: var(--st-p-rame-testo); flex: none; }

.st-topbar__tel {
  color: var(--st-p-inchiostro);
  font-weight: 600;
  text-decoration: none;
  /* Area toccabile piena senza alterare l'altezza della barra. */
  padding: 12px 2px;
  margin: -12px 0;
}

.st-topbar__tel:hover { color: var(--st-p-rame-testo); }

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

/*
 * Su schermo stretto sparisce la frase, non il numero: «Serve aiuto con le
 * misure?» e' cortesia, il numero e' la funzione. E sotto i 780 px la barra
 * superiore era nascosta del tutto — ora resta, con il solo telefono, perche'
 * e' proprio su telefono che serve di piu'.
 */
@media (max-width: 1180px) {
  .st-topbar__aiuto-testo { display: none; }
}

@media (max-width: 780px) {
  .st-topbar { display: block; }
  .st-topbar__list { display: none; }
  .st-topbar__inner { justify-content: center; gap: 0; }
  .st-topbar__aiuto { font-size: 13px; }
  .st-topbar__aiuto-testo { display: inline; }
}

/* ==================================================================== *
 * PAVIMENTO TIPOGRAFICO E BERSAGLI
 *
 * La specifica fissa 12 px come minimo per il contenuto, lasciando 10,5 solo
 * alle etichette accessorie. Un audit su sei pagine ne ha trovati otto sotto
 * soglia nel configuratore, cinque in categoria, tre nella scheda — e sono
 * quasi tutti nella barra legale: indirizzo, PEC, preferenze cookie. Cioe' le
 * informazioni che uno cerca **quando vuole verificare chi sei**, scritte piu'
 * piccole di tutto il resto.
 *
 * Stessa cosa per i bersagli: quei collegamenti erano alti venti pixel. Si
 * allargano con l'imbottitura, senza cambiare il disegno della barra.
 * ==================================================================== */

.st-footer__legal,
.st-footer__legal a,
.st-footer__legal p,
.st-footer__legal span,
.st-consent-revoke {
  /*
   * Tredici, non dodici. La riga legale in fondo e' l'ultimo posto dove uno
   * guarda e il primo dove deve poter leggere: partita IVA, indirizzo, PEC,
   * preferenze sui cookie. Sono le informazioni che si cercano quando si vuole
   * capire con chi si ha a che fare — cioe' esattamente prima di fidarsi.
   */
  font-size: var(--st-fs-micro);
}

.st-footer__legal a,
.st-consent-revoke {
  display: inline-block;
}

/* Il conteggio dei risultati e le intestazioni dei filtri: sono contenuto, non
   decorazione — dicono quanti prodotti ci sono e cosa si sta filtrando. */
.woocommerce-result-count { font-size: var(--st-fs-micro); }
.st-filters__group legend { font-size: var(--st-fs-micro); }

/* «Schermo intero» e' un comando, e un comando si legge. */
.st-galleria__zoom { font-size: var(--st-fs-micro); }

/*
 * Lo `skip-link` resta 1x1 e non e' un difetto: e' il salto al contenuto, che
 * deve essere invisibile finche' non riceve il fuoco. Contarlo fra i bersagli
 * piccoli e' un falso positivo del controllo, non un problema della pagina.
 */

/*
 * GLI ULTIMI BERSAGLI PICCOLI
 *
 * Sono quattro, e sono tutti collegamenti che contano: il telefono e l'email
 * dell'assistenza nel piede, e i due link a cookie e privacy policy. Alti
 * venti-ventitre pixel, cioe' sotto il minimo, e proprio quelli che uno cerca
 * col pollice quando ha un dubbio o vuole verificare chi siamo.
 *
 * Si allargano con l'imbottitura e si riprende lo spazio con un margine
 * negativo: cresce l'area che si preme, non l'aspetto della riga.
 */
.st-footer a[href^="tel:"],
/*
 * L'AREA TOCCABILE DEI COLLEGAMENTI DEL PIEDE
 *
 * Era `padding-block: 4px` con `min-height: 24px`: sommati alla riga davano
 * **ventinove pixel**, misurati su tutte le pagine del sito. Sotto i
 * quarantaquattro il bersaglio e' piu' piccolo del polpastrello che lo deve
 * colpire.
 *
 * «Preferenze cookie» in particolare non e' un collegamento qualunque: e' il
 * comando con cui si revoca un consenso, e deve costare quanto e' costato
 * darlo — che e' un pulsante grande in mezzo allo schermo.
 *
 * Il margine negativo pareggia il riempimento: l'area cresce verso l'esterno
 * e la riga legale non si sposta di un pixel.
 */
.st-footer a[href^="mailto:"],
.st-footer__legal a,
.st-consent-revoke,
.st-footer__col a {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
  min-height: 44px;
}

/* I collegamenti del piede stanno in colonna: l'imbottitura in piu' li
   avvicinerebbe fra loro fino a farli sembrare un blocco unico. Si compensa
   sul passo verticale. */
.st-footer__col ul { gap: 12px; }

/* ====================================================================
 * LA TESTATA SU TELEFONO
 *
 * Com'era: menu, logo e **quattro** icone — ricerca, conto, preferiti,
 * carrello — in trecentonovanta pixel. Sei bersagli in fila su una barra alta
 * settantasette: nessuno di loro aveva lo spazio per essere premuto con
 * sicurezza, e la barra si leggeva come una fila di simboli invece che come una
 * testata.
 *
 * Quattro icone non sono quattro scorciatoie: sono quattro decisioni chieste a
 * chi ha appena aperto la pagina e non ha ancora deciso niente. Conto e
 * preferiti servono **dopo** — a chi torna, a chi ha gia' scelto — e stanno
 * gia' nel pannello del menu, dove hanno anche il nome scritto accanto.
 *
 * Restano ricerca e carrello: la prima e' l'unica scorciatoia utile a chi
 * arriva sapendo cosa cerca, il secondo dice se c'e' qualcosa in sospeso. Due
 * bersagli, larghi, in fondo alla barra.
 * ==================================================================== */

@media (max-width: 1140px) {
  /*
   * Sparisce solo cio' che si raggiunge anche altrove.
   *
   * `--secondaria` adesso e' un'icona sola: i preferiti, che si mettono da
   * parte navigando e si ritrovano nel menu. Il conto invece **resta**: era
   * marcato secondario insieme ai preferiti, e il risultato era che da
   * telefono non si arrivava piu' al proprio account — ne' per entrare, ne'
   * per vedere un ordine.
   *
   * La regola generale, sbagliata la prima volta: prima di nascondere una
   * scorciatoia si controlla che esista **un'altra strada per la stessa
   * stanza**. Per i preferiti c'era, per il conto no.
   */
  .st-header .st-iconbtn--secondaria { display: none; }

  /* Con due icone in meno lo spazio si ridistribuisce: i bersagli arrivano a
     quarantaquattro pixel, che e' la misura sotto la quale un dito sbaglia. */
  .st-header .st-iconbtn {
    width: 44px;
    height: 44px;
  }

  /* ------------------------------------------------------------------ *
   * IL MARCHIO AL CENTRO, E PERCHE' PRIMA NON CI ANDAVA
   *
   * Com'era: pulsante del menu, marchio, lente e carrello tutti appoggiati al
   * bordo sinistro dentro i primi duecento pixel, e la meta' destra della
   * barra vuota. Su uno schermo da 390 non si legge come una scelta: si legge
   * come una testata a cui manca qualcosa.
   *
   * La cosa istruttiva e' che **la regola giusta era gia' scritta**.
   * `header.css` dichiara da tempo `grid-template-columns: auto 1fr auto` e
   * `justify-self: center` sul marchio. Non funzionava perche' questo foglio
   * si carica dopo e dichiara `.st-header__inner { display: flex }` senza
   * condizioni: in un contenitore flex `grid-template-columns` non esiste e
   * `justify-self` non ha effetto. Due proprieta' corrette, ignorate in
   * silenzio, senza un errore da nessuna parte — il tipo di guasto che si
   * cerca nel posto sbagliato per mezz'ora.
   *
   * E' lo stesso inciampo gia' annotato piu' su a proposito di `.st-nav`, e
   * conferma la regola: quando due fogli descrivono lo stesso elemento, le
   * proprieta' di impaginazione stanno **nel foglio che vince**. Qui il foglio
   * che vince e' questo.
   *
   * Tre colonne: il menu a sinistra dove arriva il pollice, il marchio al
   * centro dove si guarda per capire dove si e', le azioni a destra.
   *
   * `1fr auto 1fr`, e non `auto 1fr auto` come avevo scritto al primo
   * tentativo. La differenza non e' di stile ed e' l'unica che conta qui:
   * con le colonne laterali `auto` ognuna prende la larghezza del suo
   * contenuto, e i due lati **non** hanno lo stesso contenuto — a sinistra un
   * pulsante da 44, a destra due. Il marchio finiva centrato rispetto allo
   * spazio che avanzava, cioe' ventun pixel a sinistra del centro vero: non
   * abbastanza per gridare al difetto, abbastanza perche' la barra sembri
   * storta senza che si capisca perche'.
   *
   * Con le laterali a `1fr` le due colonne sono uguali per costruzione,
   * qualunque cosa ci sia dentro, e il marchio sta al centro della barra. Se
   * domani si aggiunge o si toglie un'icona, resta al centro da solo.
   * ------------------------------------------------------------------ */
  .st-header__inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
  }

  /* ------------------------------------------------------------------ *
   * MENU E LENTE INSIEME, A SINISTRA
   *
   * Sono le due porte per andare da qualche parte — sfogliare o cercare — e
   * stanno una accanto all'altra dalla parte da cui si tiene il telefono.
   * A destra restano il conto e il carrello: quelli non servono per trovare
   * qualcosa, servono dopo averlo trovato.
   *
   * Prima la lente stava a destra in mezzo alle altre tre icone, e la fila
   * chiedeva di distinguere «cerca» da «guarda cos'hai» a colpo d'occhio,
   * fra quattro disegni della stessa misura e dello stesso colore.
   * ------------------------------------------------------------------ */
  .st-header__lato--sx {
    grid-column: 1;
    justify-self: start;
    gap: 4px;
  }

  .st-burger {
    justify-self: start;
    /* Il rientro negativo faceva sporgere il pulsante fuori dalla colonna del
       contenuto: allineato al bordo del contenuto, la testata ha gli stessi
       margini di tutto il resto della pagina. */
    margin-inline: 0;
  }

  .st-header__logo {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
  }

  .st-header__actions,
  .st-header__azioni {
    grid-column: 3;
    justify-self: end;
    gap: 2px;
  }

  /* ------------------------------------------------------------------ *
   * DUE BERSAGLI DA 44 CHE SI SOVRAPPONEVANO DI VENTIQUATTRO
   *
   * `.st-iconbtn` usa un trucco elegante: quarantaquattro pixel di area
   * premibile con `margin: -12px` per riprenderseli, cosi' il disegno resta di
   * venti e la fila conserva la sua spaziatura. Funziona **finche' la distanza
   * fra due icone e' almeno ventiquattro**, che e' quanto il margine negativo
   * toglie.
   *
   * Portando la distanza a pochi pixel per far stare tutto su un telefono, le
   * due aree premibili sono finite una dentro l'altra per ventiquattro pixel:
   * a schermo sembrava giusto, e chi mirava alla lente apriva il carrello. Un
   * difetto che nessuna schermata mostra, perche' l'area premibile non si
   * disegna.
   *
   * Su telefono il trucco si spegne: il pulsante occupa i suoi
   * quarantaquattro pixel per davvero, e la distanza fra i due la fa `gap`.
   * Cio' che si perde e' la spaziatura ottica di ventidue pixel del desktop,
   * che su una barra da 390 non serviva a niente.
   * ------------------------------------------------------------------ */
  .st-header .st-iconbtn {
    margin: 0;
  }

  /*
   * Il marchio non tocca mai le estremita'.
   *
   * Senza il limite, su uno schermo stretto il marchio si allarga finche' non
   * sfiora il pulsante del menu, e «centrato» diventa «incastrato». Con il
   * limite si rimpicciolisce invece di spingere.
   */
  .st-header__logo svg,
  .st-header__logo img {
    max-width: 100%;
    /* Qui il `<picture>` ha gia' sostituito il lockup con il solo monogramma,
       che essendo quadrato di altezza ne chiede meno: 44 e non 58. */
    height: 44px;
  }
}

/*
 * Sotto i 400 px si toglie distanza fra le icone, mai ai bersagli: un
 * bersaglio piu' piccolo di quarantaquattro pixel e' un bersaglio che il dito
 * sbaglia, e su una testata sbagliarlo vuol dire aprire il carrello quando si
 * voleva cercare.
 */
@media (max-width: 400px) {
  .st-header__inner { gap: 4px; }
  .st-header__logo svg,
  .st-header__logo img { height: 38px; }
}

/* ====================================================================
 * I BERSAGLI SU TELEFONO
 *
 * Misurati, non stimati: un giro su undici pagine a 390 px ha trovato dieci
 * comandi alti fra i venti e i ventisei pixel. Non sono link dentro un
 * discorso — quelli si toccano col dito appoggiato sulla riga e vanno bene
 * cosi' — sono **comandi**: le briciole di navigazione, i collegamenti del
 * piede, il marchio che riporta alla home, il salto al contenuto.
 *
 * Quarantaquattro pixel e' la misura sotto la quale un dito sbaglia. Non e'
 * una nostra opinione: e' il minimo dichiarato sia da Apple sia da Google, ed
 * e' gia' quello che questo foglio usa per le icone della testata.
 *
 * LA TECNICA, E PERCHE' NON SI TOCCA L'ASPETTO
 * --------------------------------------------
 * Riempimento verticale piu' margine negativo uguale: l'area premibile cresce,
 * la riga resta dov'era. Alzare l'interlinea o il corpo del testo avrebbe
 * ottenuto lo stesso numero cambiando l'aspetto di mezzo sito — che e' il modo
 * in cui una correzione di accessibilita' diventa un rifacimento grafico.
 *
 * La soglia e' la larghezza e non `pointer: coarse`. Il motivo e' pratico:
 * `pointer` descrive il **dispositivo**, e un browser senza schermo tattile —
 * quello con cui si misura — dichiara sempre `fine`. Una regola agganciata a
 * `coarse` sarebbe corretta e non verificabile, cioe' si romperebbe senza che
 * nessun collaudo se ne accorga.
 * ==================================================================== */


/*
 * I COMANDI CHE VALGONO A OGNI LARGHEZZA
 *
 * Briciole, nomi di categoria dentro la tabella della guida, rimandi
 * all'informativa accanto a una casella di consenso: sono comandi, non
 * collegamenti dentro un discorso, e un comando alto ventiquattro pixel si
 * manca anche con il mouse — costa una mira a ogni navigazione.
 *
 * Riempimento verticale piu' margine negativo: cresce cio' che si preme, la
 * riga resta dov'era. Non c'e' una soglia perche' non c'e' una larghezza alla
 * quale mirare a una striscia sottile diventi comodo.
 */
.st-breadcrumb a,
.st-cfgintro__briciole a,
.st-tabella-misure tbody th a,
.st-domanda__risposta .st-link,
.st-pagina a[href^="tel:"],
.st-pagina a[href^="mailto:"],
.st-modulo__consenso a,
.st-nl__consenso a,
.st-consenso a,
.st-assist__consenso a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 11px;
  margin-block: -11px;
}

@media (max-width: 900px) {
  /* Il marchio e' il collegamento alla home, ed era alto trentaquattro pixel:
     il piu' premuto della testata e il piu' piccolo. */
  .st-header__logo {
    min-height: 44px;
    align-items: center;
  }

  /*
   * Il piede: quattro colonne di collegamenti alti ventisei pixel, incolonnati
   * a dodici l'uno dall'altro. Portandoli a quarantaquattro le aree si
   * toccherebbero, e due bersagli attaccati sono peggio di due bersagli
   * piccoli: si preme quello sopra credendo di premere quello sotto. Si alza
   * anche il passo della colonna, che e' l'unica cosa che cambia a vedersi.
   */
  .st-footer__col ul { gap: 4px; }

  .st-footer__col a,
  .st-footer__list a,
  .st-footer__legal a,
  .st-footer a[href^="tel:"],
  .st-footer a[href^="mailto:"],
  .st-consent-revoke {
    min-height: 44px;
    padding-block: 12px;
    margin-block: -4px;
  }

  /* I recapiti dentro le pagine di contatto e assistenza: si chiamano e si
     scrivono dal telefono, cioe' proprio da qui. */
  .st-pagina a[href^="tel:"],
  .st-pagina a[href^="mailto:"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 11px;
    margin-block: -11px;
  }
}

/*
 * Il salto al contenuto, quando compare.
 *
 * Vive nascosto e appare solo a chi naviga con la tastiera: e' la prima cosa
 * che quella persona incontra sulla pagina, ed era alta ventisei pixel. Chi ci
 * arriva col tabulatore non ha un dito da appoggiarci, ma chi usa un puntatore
 * assistito si', e in ogni caso un bersaglio piu' grande e' piu' facile da
 * vedere — che e' meta' del suo lavoro.
 */
.st-skip:focus {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
}

/*
 * DUE SALTI AL CONTENUTO SONO UNO DI TROPPO
 *
 * Ce n'erano due: il nostro («Vai al contenuto») e quello del tema padre
 * («Salta al contenuto»), che porta allo stesso posto. Chi naviga con la
 * tastiera li incontra entrambi prima di qualunque altra cosa, e il secondo
 * non aggiunge niente: aggiunge una pressione di tasto a ogni pagina, per
 * sempre, proprio a chi ne ha gia' piu' degli altri.
 *
 * Si toglie quello del tema padre e si tiene il nostro, perche' il nostro e'
 * l'unico dei due che risponde ai colori e alle misure di questo sito.
 */
.skip-link.screen-reader-text { display: none !important; }

/*
 * LE VOCI DEL MENU SU SCHERMO LARGO
 *
 * Erano alte ventiquattro pixel dentro una testata di settantasei: sopra e
 * sotto la parola c'erano ventisei pixel di niente che non facevano niente,
 * e il puntatore doveva centrare la riga di testo.
 *
 * Con il riempimento verticale la voce si prende tutta l'altezza della barra:
 * il bersaglio triplica e la testata non si muove di un pixel, perche' il
 * margine negativo restituisce lo spazio. Vale anche col mouse — mirare a una
 * striscia alta ventiquattro pixel e' un piccolo costo pagato a ogni
 * navigazione.
 *
 * La barretta della voce attiva e' ancorata a `top: calc(100% + 22px)`, cioe'
 * al fondo del testo: crescendo la scatola, quel calcolo la spingerebbe fuori
 * dalla testata. Si riporta al fondo della scatola nuova.
 */
/* Le regole che stavano qui — altezza e imbottitura delle voci, posizione
   della barretta — sono confluite nella riga delle categorie, piu' su: da
   quando la navigazione ha una riga sua, l'altezza gliela da' la riga e non
   c'e' piu' niente da correggere a parte. Resta pero' la lezione che le aveva
   generate, ed e' scritta li' dove serve: `global.css` dichiara
   `.st-nav__list a`, che vale una classe e un elemento, e un'eccezione meno
   precisa di cosi' passa a meta'. */


/*
 * IL PIEDE SU TELEFONO E' UNA COLONNA SOLA
 *
 * Le regole delle colonne richiudibili stanno in `footer.css`, ma la
 * disposizione va dichiarata **qui**: piu' su in questo stesso foglio c'e'
 * `.st-footer__main { grid-template-columns: repeat(2, ...) }`, e `chrome.css`
 * si carica dopo `footer.css`. Il risultato era tre righe richiudibili
 * disposte su due colonne — «Shop» e «Informazioni» affiancate e «Assistenza»
 * da sola sotto, con mezza riga vuota accanto.
 *
 * E' lo stesso ordine di caricamento gia' annotato per la testata e per la
 * navigazione. Quando due fogli descrivono lo stesso elemento, la
 * disposizione sta nel foglio che vince.
 */
@media (max-width: 720px) {
  .st-footer__main {
    display: block;
    padding-block: 26px 8px;
  }
}

/* ====================================================================
 * IL CARRELLO NON E' UN ARTICOLO DI TESTO
 *
 * Arrivava largo **820 pixel** in una pagina da 1440: tolti i 340 del
 * riepilogo e i 40 di distacco, alla colonna delle righe ne restavano 440. In
 * 440 pixel ci stanno una miniatura, una quantita', un importo e — quel che
 * avanza — il nome del prodotto con dodici righe di configurazione, che
 * andavano a capo una parola per volta. Il carrello sembrava rotto, e non era
 * rotto: era stretto.
 *
 * La larghezza veniva dalla misura di lettura che `pagine.css` applica al
 * contenuto di ogni pagina — sessantacinque battute per riga, giusta per la
 * guida alle misure. `commerce.css` la corregge gia', ma con la **stessa**
 * precisione (due classi e un elemento) e si carica **prima**: a parita' vince
 * l'ultimo, e l'ultimo era `pagine.css`.
 *
 * Qui la regola sta in un foglio che si carica dopo entrambi, e porta il
 * `body` davanti per non dipendere dall'ordine. E' la quinta volta che questo
 * progetto inciampa nella stessa cosa: quando due fogli descrivono lo stesso
 * elemento, l'eccezione va scritta piu' precisa **e** nel foglio che vince.
 * ==================================================================== */

/* Le due negazioni ci sono entrambe di proposito: la regola da battere e'
   `.page .entry-content > *:not(.alignwide):not(.alignfull)`, che vale
   **quattro classi**. Con una sola negazione qui se ne contano tre e si perde
   lo stesso — ed e' quello che e' successo al primo tentativo: la regola
   sembrava giusta e il carrello restava largo 820. La precisione si conta,
   non si intuisce. */
body.woocommerce-cart .entry-content > *:not(.alignwide):not(.alignfull),
body.woocommerce-checkout .entry-content > *:not(.alignwide):not(.alignfull) {
  /* `!important` qui, e con una ragione precisa.

     La misura di lettura di `pagine.css` e questa regola descrivono la stessa
     cosa con la stessa precisione, e la prima e' pensata per **tutte** le
     pagine. Vincere per ordine di caricamento o per un selettore piu' lungo
     significherebbe legare il carrello a una gara che si perde al primo
     riordino dei fogli — ed e' gia' successo due volte in questa stessa
     modifica.

     Il carrello non e' un caso limite della pagina di testo: e' un'altra
     cosa. Dichiararlo qui, una volta, e' piu' onesto di una catena di
     selettori che finge di essere una coincidenza. */
  /* La misura e' quella di `.st-container` — la stessa colonna su cui stanno
     l'intestazione e il piede — scritta con la stessa formula e non con un
     numero copiato a mano. Era `min(1240px, 100%)`: a 1280 il carrello
     partiva da 20 px e l'intestazione da 24, e sopra i 1336 la differenza
     diventava di 48 px per lato. Un numero scritto due volte diverge sempre;
     un token no. */
  /* Serve dichiarare la larghezza, non solo il tetto. Blocksy assegna a ogni
     figlio di `.entry-content` una `width: var(--theme-block-width)`, che vale
     `min(100%, 90vw)`: a 1280 px fa 1152, e la larghezza usata e' il minore
     fra `width` e `max-width` — un tetto piu' alto non allarga niente. La
     colonna restava di 80 px piu' stretta di quella dell'intestazione, che
     e' la differenza che si vedeva a occhio senza saperla misurare. */
  width: min(100% - 2 * var(--st-container-margine, 24px), var(--st-container, 1336px)) !important;
  max-width: none !important;
  margin-inline: auto;
}

/* Le proporzioni della griglia del carrello stanno in `commerce.css`, accanto
   a quelle della cassa, e leggono `--st-col-riepilogo`. Qui c'era una quarta
   dichiarazione — 360 px e 36 di distacco — che vinceva su tutte e faceva del
   riquadro dei totali un pannello diverso da quello della cassa: passando da
   una pagina all'altra cambiava larghezza e si spostava di sessanta pixel.
   Non serve un'eccezione qui: `.woocommerce-cart .ct-woocommerce-cart-form`
   e' gia' piu' preciso della regola di Blocksy, e vince senza dipendere
   dall'ordine dei fogli. */

/* --- la riga del prodotto --------------------------------------------- *
 *
 * La miniatura era larga 84 px accanto a un nome su quattro righe e dodici
 * righe di configurazione: la fotografia, che e' l'unica cosa che fa
 * riconoscere una tenda in un colpo d'occhio, era la meno leggibile della
 * riga.
 */
body.woocommerce-cart table.shop_table td.product-thumbnail { width: 132px; }

body.woocommerce-cart table.shop_table td.product-thumbnail .ct-media-container,
body.woocommerce-cart table.shop_table td.product-thumbnail img {
  width: 112px;
  max-width: 112px;
  border-radius: 10px;
}

body.woocommerce-cart .product-name > a {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

/*
 * LE SCELTE DELLA CONFIGURAZIONE, IN DUE COLONNE
 *
 * Sono dodici voci: larghezza, altezza, tessuto, staffe, colori, comando,
 * catene, verso, guide, terminale, accessori. In una colonna sola diventano
 * dodici righe alte due, cioe' quattrocento pixel di elenco sopra un prezzo.
 *
 * Non si nascondono dietro un «mostra dettagli»: sono **le misure che
 * qualcuno sta per far tagliare**, e l'ultimo momento utile per accorgersi di
 * un errore e' questo. Si stringono, non si tolgono.
 */
body.woocommerce-cart .variation {
  display: grid;
  /* Le due colonne hanno una misura, non `auto`.
     Con `auto` la prima si dimensiona sull'etichetta piu' lunga —
     «Configurazioni di azionamento:» — e su una colonna da 500 px si prendeva
     tutto, lasciando al valore **un carattere per riga**: l'elenco delle
     scelte diventava una colonna verticale di lettere alta cinquemila pixel.
     Un difetto che si vede solo con i dati veri: con etichette corte la
     stessa regola sembra perfetta. */
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 2px 10px;
  margin: 8px 0 0;
  font-size: .8125rem;
  line-height: 1.45;
}

body.woocommerce-cart .variation dt {
  margin: 0;
  font-weight: 500;
  color: var(--st-p-debole, #726C64);
}

body.woocommerce-cart .variation dd {
  margin: 0;
  color: var(--st-p-inchiostro, #23201D);
}

body.woocommerce-cart .variation dd p { margin: 0; }

/* «Modifica» e' un comando, non una nota: torna al configuratore con la
   configurazione gia' dentro, ed e' la funzione piu' utile di questa pagina
   su un prodotto che si compone in dieci scelte. */
/* La classe giusta e' `.st-cart__edit` — quella che stampa
   `CartEditing`. Al primo tentativo avevo scritto anche
   `a[href*="configura"]`, credendo di prendere il collegamento «Modifica»:
   ha preso **il nome del prodotto**, che punta anch'esso al configuratore, e
   il titolo dell'articolo e' diventato una pastiglia col bordo mentre
   «Modifica» restava testo nudo. Due elementi scambiati di posto da un
   selettore scritto a naso invece che sulla classe che c'e'. */
body.woocommerce-cart .product-name .st-cart__edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1px solid var(--st-p-riga, #EAE4DC);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--st-p-rame-testo, #AE4C0B);
  text-decoration: none;
}

body.woocommerce-cart .product-name .st-cart__edit:hover {
  border-color: var(--st-p-rame, #B45A17);
  background: var(--st-p-rame-tenue, #FBF1E8);
}

/* --- il riepilogo ------------------------------------------------------ */

body.woocommerce-cart .cart_totals {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--st-p-riga, #EAE4DC);
  border-radius: var(--st-r-grande, 12px);
}

body.woocommerce-cart .cart_totals table {
  margin: 0 0 16px;
  border: 0;
}

/* I corpi di queste celle stanno in `acquisto.css`, sezioni 7 e 14: erano
   descritti qui, in `commerce.css` e in `acquisto.css` con tre valori
   diversi, e vinceva questo per un elemento di precisione in piu'. La riga
   del totale, poi, la si prendeva con `tr:last-child`, che e' vero finche'
   nessuno aggiunge una riga sotto. */
body.woocommerce-cart .cart_totals table th,
body.woocommerce-cart .cart_totals table td {
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--st-p-riga-chiara, #F2EDE6);
  background: none;
}

body.woocommerce-cart .cart_totals table tr:last-child th,
body.woocommerce-cart .cart_totals table tr:last-child td {
  border-bottom: 0;
  padding-top: 14px;
}

body.woocommerce-cart .cart_totals td { text-align: right; }

body.woocommerce-cart .checkout-button {
  display: flex;
  width: 100%;
  justify-content: center;
  min-height: 52px;
  font-size: 1rem;
  font-weight: 600;
}

/* --- il codice sconto e l'aggiornamento -------------------------------- *
 *
 * Erano due comandi della stessa misura e dello stesso peso in fondo alla
 * tabella: «Applica codice promozionale» in rame pieno accanto a «Aggiorna
 * carrello» in rame slavato. Il primo lo usa una persona su venti, il secondo
 * quasi nessuno — la quantita' si cambia con i pulsanti della riga e il
 * carrello si aggiorna da solo.
 *
 * Il codice sconto diventa una riga discreta; l'aggiornamento resta perche'
 * senza JavaScript e' l'unico modo di confermare una quantita' cambiata a
 * mano, ma smette di gridare.
 */
body.woocommerce-cart .coupon {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

body.woocommerce-cart .coupon .input-text {
  flex: 1 1 200px;
  min-height: 44px;
  max-width: 260px;
}

body.woocommerce-cart .coupon .button {
  min-height: 44px;
  background: #fff;
  border: 1px solid var(--st-p-riga, #EAE4DC);
  color: var(--st-p-inchiostro, #23201D);
  font-weight: 600;
}

body.woocommerce-cart .coupon .button:hover {
  border-color: var(--st-p-rame, #B45A17);
  background: var(--st-p-rame-tenue, #FBF1E8);
  color: var(--st-p-rame-scuro, #8F3D08);
}

body.woocommerce-cart button[name="update_cart"] {
  min-height: 44px;
  background: none;
  border: 1px solid var(--st-p-riga, #EAE4DC);
  color: var(--st-p-grigio, #6F6A64);
  font-weight: 500;
}

body.woocommerce-cart button[name="update_cart"]:disabled { opacity: .45; }

/* --- su schermo stretto: la tabella diventa schede --------------------- *
 *
 * Una tabella a cinque colonne in 390 px non e' una tabella: e' cinque
 * colonne da settanta pixel. Ogni riga diventa una scheda con la fotografia a
 * sinistra e tutto il resto a destra, e le intestazioni spariscono perche' su
 * una scheda sola non intestano niente.
 */
@media (max-width: 780px) {
  body.woocommerce-cart table.shop_table thead { display: none; }

  body.woocommerce-cart table.shop_table,
  body.woocommerce-cart table.shop_table tbody,
  body.woocommerce-cart table.shop_table tr,
  body.woocommerce-cart table.shop_table td {
    display: block;
    width: auto;
  }

  body.woocommerce-cart table.shop_table tr.woocommerce-cart-form__cart-item {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0 14px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--st-p-riga, #EAE4DC);
    border-radius: var(--st-r-grande, 12px);
  }

  body.woocommerce-cart table.shop_table td.product-thumbnail {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: auto;
    padding: 0;
  }

  body.woocommerce-cart table.shop_table td.product-thumbnail .ct-media-container,
  body.woocommerce-cart table.shop_table td.product-thumbnail img {
    width: 96px;
    max-width: 96px;
  }

  body.woocommerce-cart table.shop_table td.product-name {
    grid-column: 2;
    padding: 0;
  }

  body.woocommerce-cart table.shop_table td.product-quantity,
  body.woocommerce-cart table.shop_table td.product-subtotal {
    grid-column: 2;
    display: flex;
    align-items: center;
    padding: 10px 0 0;
  }

  /* Su schermo stretto la riga si impila e il prezzo diventa la cosa da
     leggere della scheda: sale di un gradino, non di un valore inventato —
     17 px era l'unico corpo fuori scala rimasto in pagina. */
  body.woocommerce-cart table.shop_table td.product-subtotal {
    justify-content: flex-start;
    font-size: var(--st-fs-lead);
    font-weight: 600;
  }

  /* Togliere una riga e' l'azione piu' facile da premere per sbaglio: sta in
     alto a destra, lontana dai pulsanti della quantita'. */
  body.woocommerce-cart table.shop_table td.product-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 0;
  }

  body.woocommerce-cart table.shop_table td.product-price { display: none; }

  body.woocommerce-cart .cart_totals { margin-top: 18px; }

  body.woocommerce-cart .coupon .input-text { max-width: none; }
}

/* --- ancora sulla riga del carrello ------------------------------------ */

/*
 * Il nome del prodotto e' un titolo, non un pulsante.
 *
 * Punta al configuratore — e' giusto che ci punti — ma deve leggersi come il
 * nome della cosa che si sta comprando. Il pulsante di quella riga e' uno
 * solo, «Modifica», e deve essere l'unico a sembrarlo.
 */
body.woocommerce-cart .product-name > a:first-child {
  display: block;
  margin-bottom: 2px;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--st-p-inchiostro, #23201D);
}

body.woocommerce-cart .product-name > a:first-child:hover {
  color: var(--st-p-rame-testo, #AE4C0B);
}

/*
 * La quantita' e il subtotale non stanno piu' in fondo alla riga.
 *
 * Con la tabella larga 844 px le due colonne finivano a destra, separate dal
 * prodotto da duecento pixel di niente: il prezzo di una riga si leggeva a
 * mezzo schermo di distanza da cio' a cui si riferisce. Si stringono e si
 * avvicinano al contenuto.
 */
@media (min-width: 781px) {
  body.woocommerce-cart table.shop_table td.product-quantity { width: 130px; }
  body.woocommerce-cart table.shop_table td.product-subtotal { width: 130px; text-align: right; }
  body.woocommerce-cart table.shop_table td.product-remove { width: 56px; }

  /* L'immagine e il testo si allineano in alto: centrati verticalmente
     dentro una riga alta cinquecento pixel, la fotografia finiva a meta'
     dell'elenco delle scelte, lontana dal nome che descrive. */
  body.woocommerce-cart table.shop_table td { vertical-align: top; }
  body.woocommerce-cart table.shop_table td.product-quantity,
  body.woocommerce-cart table.shop_table td.product-subtotal { padding-top: 18px; }
}

/*
 * Il codice sconto e l'aggiornamento sulla stessa riga.
 *
 * Erano due blocchi impilati con un vuoto in mezzo, e l'aggiornamento
 * galleggiava a destra sopra il codice sconto. Sono due comandi accessori
 * della stessa importanza: stanno sulla stessa riga, agli estremi.
 */
/* Questa riga e' descritta una volta sola, piu' avanti in questo stesso
   foglio, sull'involucro dentro la cella. Qui c'era un secondo blocco scritto
   in un altro momento che rimetteva il `display: flex` **sulla cella**, e
   vinceva: la cella usciva dal meccanismo delle tabelle, perdeva il proprio
   `colspan` e si stringeva alla prima colonna. */
body.woocommerce-cart .woocommerce-cart-form .actions .coupon { margin: 0; }

/*
 * LA COLONNA DEL PRODOTTO DEVE AVERE UNA LARGHEZZA, NON PRENDERE QUEL CHE RESTA
 *
 * Con la disposizione automatica della tabella, la cella del prodotto si
 * riduce al minimo che il suo contenuto tollera. E il suo contenuto — la
 * griglia delle scelte — tollera moltissimo: una colonna di etichette da 190
 * px e i valori spezzati a due lettere per riga. Il browser considerava quel
 * risultato accettabile e regalava lo spazio alle colonne accanto, che
 * restavano vuote.
 *
 * Si dichiara una larghezza minima per la cella e si stringono le etichette.
 * Non e' una misura estetica: e' l'unica cosa che dice alla tabella quanto
 * spazio serve **prima** che decida come spezzare il testo.
 */
@media (min-width: 781px) {
  /* 360 e non 420: la tabella vive in una colonna da 844, e tolti miniatura,
     quantita', subtotale e cestino ne restano meno di quattrocento. Chiedendone
     420 la tabella sbordava dalla sua colonna e finiva **sotto la scheda del
     riepilogo**, che la copriva per una trentina di pixel. Una larghezza
     minima piu' grande dello spazio disponibile non e' un minimo: e' un
     traboccamento. */
  body.woocommerce-cart table.shop_table td.product-name { min-width: 360px; }
  body.woocommerce-cart .variation { grid-template-columns: minmax(0, 160px) minmax(0, 1fr); }
}

/* Le due righe senza etichetta — «Catena o Motore a sinistra», «Discesa verso
   l'Esterno» — sono `dd` orfani: attraversano tutte e due le colonne invece di
   incolonnarsi sotto i valori, dove sembrerebbero il seguito della voce
   precedente. */
body.woocommerce-cart .variation dt:empty { display: none; }
body.woocommerce-cart .variation dt:empty + dd { grid-column: 1 / -1; }

/*
 * LA RIGA DEI COMANDI IN FONDO ALLA TABELLA
 *
 * WooCommerce la stampa dentro una cella — `td.actions` in fondo al corpo
 * della tabella — non in un `div` accanto. La regola scritta su `.actions` non
 * agganciava niente, e i due comandi restavano impilati con il codice sconto
 * dentro un riquadro grigio e «Aggiorna carrello» sotto, spostato a sinistra.
 */
/* Il `flex` sta sull'involucro (lo aggiunge `inc/commercio.php`), non sulla
   cella: una cella con `display: flex` esce dal meccanismo delle tabelle e si
   porta via il proprio `colspan`, ritrovandosi larga quanto la prima colonna
   con dentro un bottone spezzato una sillaba per riga. */
body.woocommerce-cart table.shop_table td.actions {
  padding: 18px 14px;
  background: none;
  border-top: 1px solid var(--st-p-riga, #EAE4DC);
}

body.woocommerce-cart table.shop_table td.actions > .st-carrello__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body.woocommerce-cart table.shop_table td.actions .coupon {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

body.woocommerce-cart table.shop_table td.actions .coupon .button {
  white-space: nowrap;
}

@media (max-width: 620px) {
  body.woocommerce-cart table.shop_table td.actions > .st-carrello__azioni {
    flex-direction: column;
    align-items: stretch;
  }
  body.woocommerce-cart table.shop_table td.actions .coupon { flex-wrap: wrap; }
  body.woocommerce-cart table.shop_table td.actions .coupon .input-text { max-width: none; }
}

/* ====================================================================
 * LA TABELLA DEL CARRELLO A LARGHEZZE FISSE
 *
 * Con la disposizione automatica ho provato due strade e sbagliate entrambe:
 * senza una larghezza minima la colonna del prodotto si riduceva a 190 px e i
 * valori si spezzavano a due lettere per riga; con una larghezza minima la
 * tabella sbordava dalla sua colonna e quantita', subtotale e cestino
 * finivano **sotto la scheda del riepilogo**.
 *
 * Il problema non era il numero: era il metodo. `table-layout: auto` decide le
 * colonne guardando il contenuto, e il contenuto qui e' un elenco di dodici
 * scelte che «sta» in qualunque larghezza pur di starci — quindi il browser
 * gliene dava sempre troppo poca e regalava il resto alle colonne vuote.
 *
 * Con `table-layout: fixed` le larghezze le decidiamo noi: quattro colonne di
 * servizio con la loro misura, e al prodotto tutto quello che resta. Nessuna
 * negoziazione, nessun traboccamento.
 * ==================================================================== */

@media (min-width: 781px) {
  body.woocommerce-cart table.shop_table {
    table-layout: fixed;
    width: 100%;
  }

  /* Le larghezze stanno sul `colgroup` (lo aggiunge `inc/commercio.php`): in
     `table-layout: fixed` le celle del corpo non contano, conta la prima riga,
     e la prima riga qui e' un'intestazione dove «Prodotto» ha `colspan="2"` e
     si divide lo spazio in parti uguali fra miniatura e nome. Le regole sulle
     celle restano per il caso in cui il `colgroup` non ci sia. */
  body.woocommerce-cart table.shop_table col.st-col--foto { width: 132px; }
  body.woocommerce-cart table.shop_table col.st-col--quantita { width: 120px; }
  body.woocommerce-cart table.shop_table col.st-col--subtotale { width: 120px; }
  body.woocommerce-cart table.shop_table col.st-col--togli { width: 52px; }

  body.woocommerce-cart table.shop_table td.product-thumbnail,
  body.woocommerce-cart table.shop_table th.product-thumbnail { width: 132px; }

  /* `auto` sull'unica colonna che deve prendersi il resto. */
  body.woocommerce-cart table.shop_table td.product-name,
  body.woocommerce-cart table.shop_table th.product-name { width: auto; min-width: 0; }

  body.woocommerce-cart table.shop_table td.product-quantity,
  body.woocommerce-cart table.shop_table th.product-quantity { width: 120px; }

  body.woocommerce-cart table.shop_table td.product-subtotal,
  body.woocommerce-cart table.shop_table th.product-subtotal { width: 120px; }

  body.woocommerce-cart table.shop_table td.product-remove,
  body.woocommerce-cart table.shop_table th.product-remove { width: 52px; }

  /* Con le colonne fisse il testo lungo deve poter andare a capo dentro la
     sua cella invece di allargarla: qui non la allargherebbe piu', la farebbe
     traboccare. */
  body.woocommerce-cart table.shop_table td { overflow-wrap: anywhere; }
}

/* ====================================================================
 * LE SCELTE DELLA CONFIGURAZIONE: UNA RIGA PER VOCE, NON DUE COLONNE
 *
 * La griglia a due colonne l'ho provata in tre misure e ha sbagliato tutte e
 * tre: con la prima colonna `auto` si prendeva tutto, con 190 px lasciava al
 * valore due lettere, con 160 px dentro una tabella a larghezze fisse il
 * secondo binario finiva a novanta pixel comunque.
 *
 * Il motivo di fondo: la larghezza di quella cella dipende dalla tabella, la
 * tabella dipende dal contenuto, e il contenuto e' una griglia che si adatta a
 * qualunque cosa. Tre livelli che si rincorrono, e ogni numero che scrivo e'
 * giusto per una sola combinazione di etichette.
 *
 * Etichetta e valore sulla stessa riga, in linea, e a capo quando serve: non
 * c'e' nessuna colonna da dimensionare, quindi non c'e' niente che possa
 * sbagliare misura. Si perde l'incolonnamento dei valori — che su dodici voci
 * di lunghezza diversa non aiutava comunque — e si guadagna una cosa che si
 * legge sempre.
 * ==================================================================== */

body.woocommerce-cart .variation {
  display: block;
  margin: 10px 0 0;
  font-size: .8125rem;
  line-height: 1.55;
}

body.woocommerce-cart .variation dt {
  display: inline;
  margin: 0;
  font-weight: 500;
  color: var(--st-p-debole, #726C64);
}

/* Uno spazio unificatore, non uno normale: uno spazio scritto in `content`
   viene compresso insieme a quello che il markup ha gia' intorno, e
   «Larghezza:» finiva attaccato a «120 cm». */
body.woocommerce-cart .variation dt::after { content: '\00a0'; }

body.woocommerce-cart .variation dd {
  display: inline;
  margin: 0;
  color: var(--st-p-inchiostro, #23201D);
}

/* Ogni coppia va a capo: `dd` in linea seguito da un blocco vuoto e' il modo
   piu' semplice di ottenere una riga per voce senza tornare a una griglia. */
body.woocommerce-cart .variation dd::after {
  content: '';
  display: block;
}

body.woocommerce-cart .variation dd p { display: inline; margin: 0; }

/*
 * SU TELEFONO IL TESTO TORNA A SINISTRA
 *
 * WooCommerce, quando la tabella si impila, allinea le celle a destra e mette
 * l'intestazione della colonna davanti al valore con un `::before`. E' la
 * scelta giusta per la sua impilatura — etichetta a sinistra, valore a destra
 * — e sbagliata per la nostra, che e' una scheda con la fotografia a sinistra
 * e il testo a destra: il risultato era il nome del prodotto e dodici scelte
 * allineate a destra, con «Prodotto» scritto sopra.
 */
@media (max-width: 780px) {
  /* Con `!important`, perche' la regola da battere ce l'ha:
     WooCommerce dichiara `text-align: right !important` sulle celle della
     tabella impilata, e nessuna precisione di selettore vince contro un
     `!important`. Non e' una scorciatoia — e' l'unico strumento che il
     linguaggio lascia quando dall'altra parte c'e' gia'. */
  body.woocommerce-cart table.shop_table td { text-align: left !important; }
  body.woocommerce-cart table.shop_table td::before { display: none !important; }
  body.woocommerce-cart table.shop_table td.product-name > a:first-child { font-size: .9375rem; }
}

/* ====================================================================
 * LE SPINTE ALLA CHIUSURA SUL CARRELLO
 * ==================================================================== */

.st-carrello__continua {
  margin: 14px 0 0;
  font-size: .9375rem;
}

.st-carrello__continua a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--st-p-rame-testo, #AE4C0B);
  text-decoration: none;
  font-weight: 600;
}

.st-carrello__continua a:hover { text-decoration: underline; }

/* --- «un'altra finestra?» ---------------------------------------------- */

.st-carrello__ancora {
  margin: 34px 0 0;
  padding: 24px;
  background: var(--st-p-crema, #FAF6F1);
  border: 1px solid var(--st-p-riga, #EAE4DC);
  border-radius: var(--st-r-grande, 12px);
}

.st-carrello__ancora h2 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.st-carrello__ancora-sotto {
  margin: 0 0 18px;
  font-size: .9rem;
  color: var(--st-p-grigio, #6F6A64);
}

.st-carrello__ancora-lista {
  display: grid;
  /* `auto-fit`, non `auto-fill`: con tre suggerimenti in una riga da 1232 px
     `auto-fill` apparecchiava cinque colonne e ne lasciava due vuote — le tre
     schede restavano strette a sinistra e mezza riga era bianca. `auto-fit`
     chiude le colonne che non servono e le tre si prendono lo spazio. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.st-carrello__ancora-lista a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--st-p-riga, #EAE4DC);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.st-carrello__ancora-lista a:hover {
  border-color: #DCCFC0;
  box-shadow: 0 8px 20px -14px rgba(35, 32, 29, .4);
}

.st-carrello__ancora-lista img {
  width: 64px;
  height: 64px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  background: var(--st-p-sabbia, #F4F0EB);
}

.st-carrello__ancora-testo { min-width: 0; }

.st-carrello__ancora-testo strong {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--st-p-inchiostro, #23201D);
  /* Due righe: i nomi di questo catalogo sono lunghissimi, e una scheda alta
     il doppio delle altre fa sembrare la fila storta. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.st-carrello__ancora-testo > span {
  display: block;
  margin-top: 3px;
  font-size: .8125rem;
  color: var(--st-p-debole, #726C64);
}

/* --- il carrello vuoto -------------------------------------------------- */

.st-carrello__vuoto {
  padding: 48px 24px;
  text-align: center;
}

.st-carrello__vuoto h2 { margin: 0 0 8px; font-size: var(--st-fs-h3); }

.st-carrello__vuoto p {
  max-width: 56ch;
  margin: 0 auto 20px;
  color: var(--st-p-grigio, #6F6A64);
  line-height: 1.6;
}

.st-carrello__vuoto-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* --- la barra fissa su telefono ---------------------------------------- *
 *
 * Solo dove serve. Su schermo largo il riepilogo e' gia' in vista, appiccicato
 * in alto mentre si scorre: una seconda barra in fondo direbbe la stessa cosa
 * due volte.
 */
.st-carrello__barra { display: none; }

@media (max-width: 780px) {
  /* LA BARRA E' FISSA, QUINDI LO SPAZIO GLIELO SI DEVE DARE
     Un elemento fisso non occupa posto nel flusso: la pagina finisce sotto di
     lui come se non ci fosse. Il collaudo a 360 px l'ha misurato — il comando
     «Modifica» di una riga del carrello era esattamente sotto il pulsante
     «Procedi con l'ordine», e chi lo toccava andava alla cassa invece di
     correggere la sua tenda.
     Novantotto: i settantaquattro della barra piu' l'aria che serve a non
     farci finire il contenuto a filo. */
  .woocommerce-cart .site-main,
  .woocommerce-cart #main-container { padding-bottom: 98px; }

  .st-carrello__barra {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--st-p-riga, #EAE4DC);
    box-shadow: 0 -8px 20px -14px rgba(35, 32, 29, .45);
  }

  .st-carrello__barra-tot { flex: 1 1 auto; min-width: 0; }

  .st-carrello__barra-tot > span {
    display: block;
    font-size: var(--st-fs-micro);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--st-p-debole, #726C64);
  }

  .st-carrello__barra-tot strong {
    display: block;
    font-size: var(--st-fs-lead);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--st-p-inchiostro, #23201D);
  }

  .st-carrello__barra .st-btn {
    flex: 0 0 auto;
    min-height: 48px;
    padding-inline: 20px;
  }

  /* Lo spazio che la barra occupa va restituito in fondo alla pagina, o il
     piede ci finisce sotto. */
  body.woocommerce-cart .st-footer { padding-bottom: 84px; }
}

/* ==========================================================================
   LA BOLLA D'AIUTO
   ==========================================================================

   SI CHIAMA `st-soccorso` E NON `st-aiuto`, PER FORZA
   ---------------------------------------------------
   `st-aiuto` esisteva gia': e' il riquadro «Hai un dubbio» appiccicato nella
   colonna delle schede prodotto, in `product-layout.css`. Scritta col nome
   ovvio, la bolla ereditava padding, bordo e fondo di quel riquadro — a 390 px
   veniva larga 316 invece di 366, con venticinque pixel di scarto per parte
   che nessuna regola di questo blocco spiegava.

   Il collaudo l'aveva pure misurata e dichiarata «dentro lo schermo»: dentro
   c'era, solo piu' stretta del dovuto. Una collisione di nome non rompe niente
   in modo rumoroso — lascia una grafica quasi giusta, che e' il modo peggiore
   di sbagliare. Prima di battezzare un componente si cerca il nome.

   DOVE STA, E PERCHE' PROPRIO LI'
   -------------------------------
   In basso a destra, dove tutti la cercano: e' la posizione che vent'anni di
   assistenza online hanno reso una convenzione, e disobbedire a una
   convenzione utile costa un utente che non trova l'aiuto.

   L'ANGOLO E' CONTESO, E LA PRECEDENZA E' DECISA
   ----------------------------------------------
   Nello stesso angolo, sotto i 780 px, vive la barra del carrello
   (`.st-carrello__barra`, z-index 900). Non si sovrappongono mai perche' non
   coesistono: `st_soccorso_si_mostra()` toglie la bolla da carrello e cassa, che
   sono le uniche pagine dove quella barra compare.

   La bolla sta comunque **sotto** in ordine di livello (890 contro 900): se un
   domani quella barra comparisse altrove, a coprire sarebbe il pulsante che
   chiude l'ordine, non quello che fa una domanda.
   ========================================================================== */

/* ======================================================================
 * LA BOLLA D'AIUTO NON DEVE RUBARE I TOCCHI
 *
 * Il collaudo a 360 px ha scoperto che sul telefono questa bolla stava **sopra
 * il pulsante «Avanti»** del configuratore e ne intercettava il tocco: si
 * premeva «Avanti» e si apriva l'aiuto. Un difetto che a schermo grande non
 * esiste e che nessuno screenshot avrebbe mostrato, perche' i due elementi si
 * vedono benissimo tutti e due — e' il tocco che finisce nel posto sbagliato.
 *
 * Due cose, e servono tutte e due.
 *
 * 1. Il contenitore non prende piu' i tocchi, solo i suoi figli. E' una colonna
 *    flex che tiene la bolla e il pannello: larga quanto il pannello anche
 *    quando il pannello e' chiuso, e per tutta quella larghezza catturava i
 *    tocchi con un'area vuota e invisibile.
 *
 * 2. La bolla si alza dove c'e' una barra di comandi sotto. Il punto 1 non
 *    basta: dove la bolla si vede davvero, il tocco e' suo di diritto — e li'
 *    l'unico rimedio e' non stare nello stesso posto.
 * ====================================================================== */
.st-soccorso {
    position: fixed;
    right: 20px;
    bottom: 20px;
    pointer-events: none;
    /* Sotto la barra d'acquisto (900) e sotto la ricerca a schermo pieno
       (200 ma con `inset: 0`, quindi coprirebbe comunque). */
    z-index: 890;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.st-soccorso > * { pointer-events: auto; }

/* --- il pulsante ---------------------------------------------------- */

.st-soccorso__bolla {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 20px 0 17px;
    border: 0;
    border-radius: var(--st-r-pieno, 999px);
    background: var(--st-p-rame, #B45A17);
    color: #fff;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .005em;
    cursor: pointer;
    /* L'ombra e' piu' marcata di quella delle schede: questo elemento
       galleggia davvero sopra la pagina, e deve sembrarlo — un pulsante
       piatto appoggiato sul testo si legge come parte del contenuto. */
    box-shadow: 0 10px 26px -10px rgba(35, 32, 29, .55), 0 2px 6px rgba(35, 32, 29, .18);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.st-soccorso__bolla:hover {
    background: var(--st-p-rame-scuro, #93470F);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -10px rgba(35, 32, 29, .6), 0 2px 6px rgba(35, 32, 29, .2);
}

.st-soccorso__bolla:focus-visible {
    outline: 2px solid var(--st-p-inchiostro, #23201D);
    outline-offset: 3px;
}

.st-soccorso__bolla-icona { display: inline-flex; }
.st-soccorso__bolla-icona svg { display: block; }

/* Aperto il pannello, il pulsante diventa una chiusura: ruota l'icona e
   perde la parola, perche' «Aiuto» sopra un aiuto gia' aperto non dice
   niente. */
.st-soccorso.is-aperto .st-soccorso__bolla { padding-inline: 15px; }
.st-soccorso.is-aperto .st-soccorso__bolla-testo { display: none; }
.st-soccorso.is-aperto .st-soccorso__bolla-icona { transform: rotate(8deg); }

/* Il pallino delle richieste aperte: e' l'unica cosa personale che questa
   bolla sappia, e va vista prima di aprirla. */
.st-soccorso__pallino {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: var(--st-r-pieno, 999px);
    background: var(--st-p-inchiostro, #23201D);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 21px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/* --- il pannello ---------------------------------------------------- */

.st-soccorso__pannello {
    width: min(380px, calc(100vw - 40px));
    /* Il tetto e' relativo allo schermo e non fisso: su un portatile basso
       un pannello alto 600 px uscirebbe dalla finestra, e la parte che si
       perde e' sempre quella in fondo — cioe' i due pulsanti per chiedere
       davvero aiuto. */
    max-height: min(560px, calc(100dvh - 140px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--st-p-riga, #EAE4DC);
    border-radius: 14px;
    box-shadow: 0 24px 48px -20px rgba(35, 32, 29, .45), 0 4px 12px rgba(35, 32, 29, .1);
}

.st-soccorso__pannello[hidden] { display: none; }

.st-soccorso__testa {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 12px 14px 18px;
    border-bottom: 1px solid var(--st-p-riga, #EAE4DC);
    background: var(--st-p-crema, #FAF6F1);
}

.st-soccorso__titolo {
    font-family: var(--st-font-display, 'Cormorant Garamond', Georgia, serif);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--st-p-inchiostro, #23201D);
}

.st-soccorso__chiudi {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    /* Il bersaglio arriva a 44 px senza allargare il quadrato visibile: la
       testata e' alta 50 px e un pulsante da 44 la spingerebbe a 60. */
    margin: -4px;
    padding: 4px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--st-p-inchiostro, #23201D);
    cursor: pointer;
    transition: background-color .15s ease;
}

.st-soccorso__chiudi:hover { background: rgba(35, 32, 29, .07); }
.st-soccorso__chiudi svg { display: block; }

.st-soccorso__corpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
}

/* Il richiamo alle richieste aperte, in cima a tutto: chi ha una pratica in
   corso e riapre l'aiuto sta quasi sempre tornando per quella. */
.st-soccorso__inCorso {
    display: block;
    margin-bottom: 12px;
    padding: 11px 13px;
    border: 1px solid var(--st-p-rame, #B45A17);
    border-radius: var(--st-r-scheda, 10px);
    background: var(--st-p-rame-tenue, #FBF1E8);
    text-decoration: none;
}

.st-soccorso__inCorso strong {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    color: var(--st-p-rame-testo, #AE4C0B);
}

.st-soccorso__inCorso span {
    display: block;
    margin-top: 2px;
    font-size: .8125rem;
    color: var(--st-p-inchiostro, #23201D);
}

.st-soccorso__inCorso:hover { background: #F8E7D8; }

/* --- la ricerca ----------------------------------------------------- */

.st-soccorso__cerca {
    display: flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--st-p-riga, #EAE4DC);
    border-radius: var(--st-r-campo, 8px);
    background: var(--st-p-sabbia, #F4F0EB);
    color: #6E655C;
    transition: border-color .15s ease, background-color .15s ease;
}

.st-soccorso__cerca:focus-within {
    border-color: var(--st-p-rame, #B45A17);
    background: #fff;
}

.st-soccorso__cerca svg { flex: 0 0 auto; display: block; }

.st-soccorso__cerca input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    background: none;
    /* 16 px pieni: sotto questa misura Safari su iPhone ingrandisce da solo
       la pagina quando il campo prende il fuoco, e non la rimpicciolisce
       piu' — l'aiuto resterebbe zoomato per tutto il resto della visita. */
    font-size: 1rem;
    font-family: inherit;
    color: var(--st-p-inchiostro, #23201D);
}

.st-soccorso__cerca input:focus { outline: none; }

/* La crocetta che i browser aggiungono nei campi `search` litiga con il
   nostro riquadro: la togliamo, Esc e la cancellazione bastano. */
.st-soccorso__cerca input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* --- l'elenco delle risposte ---------------------------------------- */

.st-soccorso__lista {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.st-soccorso__lista > li { border-top: 1px solid var(--st-p-riga, #EAE4DC); }
.st-soccorso__lista > li:first-child { border-top: 0; }
.st-soccorso__lista > li[hidden] { display: none; }

.st-soccorso__lista summary {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 2px;
    /* Il triangolino di serie e' minuscolo e diverso su ogni browser: al suo
       posto un segno disegnato da noi, che ruota. */
    list-style: none;
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--st-p-inchiostro, #23201D);
}

.st-soccorso__lista summary::-webkit-details-marker { display: none; }

.st-soccorso__lista summary::before {
    content: '';
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-top: 6px;
    border-right: 2px solid var(--st-p-rame, #B45A17);
    border-bottom: 2px solid var(--st-p-rame, #B45A17);
    transform: rotate(-45deg);
    transition: transform .18s ease;
}

.st-soccorso__lista details[open] summary::before { transform: rotate(45deg); }
.st-soccorso__lista summary:hover { color: var(--st-p-rame-testo, #AE4C0B); }

.st-soccorso__lista details > div { padding: 0 2px 13px 15px; }

.st-soccorso__lista details p {
    margin: 0;
    font-size: .84375rem;
    line-height: 1.6;
    color: #4A443E;
}

.st-soccorso__lista details a {
    display: inline-block;
    margin-top: 8px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--st-p-rame-testo, #AE4C0B);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.st-soccorso__niente {
    margin: 16px 2px;
    font-size: .875rem;
    line-height: 1.55;
    color: #6E655C;
}

.st-soccorso__niente[hidden] { display: none; }

/* --- il fondo, dove si chiede a una persona -------------------------- */

.st-soccorso__piede {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--st-p-riga, #EAE4DC);
    background: var(--st-p-crema, #FAF6F1);
}

.st-soccorso__azione {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--st-p-rame, #B45A17);
    border-radius: var(--st-r-campo, 8px);
    background: #fff;
    color: var(--st-p-rame-testo, #AE4C0B);
    font-size: .84375rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    /* I due pulsanti stanno affiancati e i numeri di telefono sono lunghi:
       senza questo, un numero con i prefissi manda il pulsante a capo e la
       riga diventa alta il doppio. */
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}

.st-soccorso__azione svg { flex: 0 0 auto; display: block; }
.st-soccorso__azione:hover { background: var(--st-p-rame-tenue, #FBF1E8); }

.st-soccorso__azione--primaria {
    background: var(--st-p-rame, #B45A17);
    border-color: var(--st-p-rame, #B45A17);
    color: #fff;
}

.st-soccorso__azione--primaria:hover {
    background: var(--st-p-rame-scuro, #93470F);
    color: #fff;
}

/* --- da telefono ----------------------------------------------------- */

@media (max-width: 600px) {
    /* IL PANNELLO DIVENTA UN FOGLIO ANCORATO IN BASSO

       A 380 px di larghezza il pannello riquadrato lascia margini di dieci
       pixel per parte: sono margini che non servono a niente e tolgono
       spazio al testo. Sotto i 600 px prende tutta la larghezza e si
       appoggia al fondo, che e' anche la zona dove arriva il pollice. */
    .st-soccorso {
        right: 12px;
        left: 12px;
        bottom: 12px;
        align-items: flex-end;
    }

    .st-soccorso__pannello {
        width: 100%;
        max-height: calc(100dvh - 120px);
        border-radius: 16px;
    }

    /* Il pulsante resta compatto: chiuso non deve mai occupare tutta la
       riga, o sembrerebbe un pulsante della pagina. */
    .st-soccorso__bolla { align-self: flex-end; }

    /* APERTO, IL PULSANTE SPARISCE
       Il gruppo cresce verso l'alto e il pulsante e' il primo della colonna:
       con il pannello aperto finiva **sopra la testata**, a coprire il
       carrello, che e' l'ultima icona da coprire. La chiusura c'e' gia'
       dentro il pannello — una crocetta in alto a destra, dove tutti la
       cercano — e Esc, e il tocco fuori: tenerne una quarta costava
       l'angolo della testata. */
    .st-soccorso.is-aperto .st-soccorso__bolla { display: none; }

    /* I DUE PULSANTI IN FONDO VANNO IN COLONNA
       Affiancati su 366 px non ci stanno: «Apri una richiesta» piu' un
       numero di telefono completo fanno una riga piu' larga del pannello, e
       il numero usciva tagliato dal bordo destro. Uno sopra l'altro sono
       due bersagli larghi tutto il foglio, che su un telefono e' meglio. */
    .st-soccorso__piede { flex-direction: column; }
    .st-soccorso__azione { flex: 0 0 auto; }
}

/* Chi ha chiesto meno movimento non lo riceve nemmeno qui: la bolla e' una
   delle poche cose che si muovono sempre sotto il dito. */
@media (prefers-reduced-motion: reduce) {
    .st-soccorso__bolla,
    .st-soccorso__lista summary::before { transition: none; }
    .st-soccorso__bolla:hover { transform: none; }
}

/* ====================================================================
 * IL CARRELLO SUL TELEFONO AVEVA DUE SELETTORI DI QUANTITA'
 *
 * Blocksy, sotto i 1000 px, ricompone la riga: nasconde la cella della
 * quantita' e stampa al suo posto un blocco `product-mobile-actions` con il
 * contatore e il cestino su una riga sola. Le nostre regole per il telefono —
 * scritte prima, guardando la tabella e non il modello — rimettevano in vista
 * quella cella sotto i 780 px. Risultato: fra 320 e 780 comparivano **due**
 * contatori uno sotto l'altro, il secondo con il «+» che usciva dal riquadro.
 *
 * Fra 780 e 1000 il carrello era gia' giusto: qui si estende quel
 * comportamento anche piu' in basso, invece di inventarne un terzo.
 * ================================================================== */
@media (max-width: 780px) {
  body.woocommerce-cart table.shop_table td.product-quantity { display: none; }
}

/* ======================================================================
 * L'INGRESSO: LA TENDA SI ALZA
 *
 * Il velo e' nascosto per impostazione predefinita e si mostra solo quando lo
 * script d'apertura ha marcato `<html>`. Non e' una precauzione teorica: un
 * velo a tutto schermo che resta su perche' il JavaScript non e' arrivato non
 * e' un difetto estetico, e' un sito irraggiungibile. La regola numero 4 di
 * `motion.css`, applicata dove conta di piu'.
 *
 * Si muovono solo `transform` e `opacity`, come ovunque nel sito.
 * ==================================================================== */

.st-ingresso { display: none; }

.st-ingresso-attivo { overflow: hidden; }

.st-ingresso-attivo .st-ingresso {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--st-p-avorio, #F7F4EF);
  /* Il velo se ne va per ultimo: parte fermo, aspetta che la tenda dentro
     abbia finito, poi si alza. `forwards` lo lascia fuori schermo anche nel
     fotogramma fra la fine dell'animazione e la rimozione dal documento. */
  animation: st-ingresso-esce 460ms var(--st-ease, cubic-bezier(.22, .61, .36, 1)) 760ms forwards;
  will-change: transform;
}

.st-ingresso__marchio {
  position: relative;
  /* `overflow: hidden` e' quello che rende la tenda una tenda: il pannello
     che scopre il marchio esce da questo riquadro e sparisce, invece di
     continuare a scorrere sopra la pagina. */
  overflow: hidden;
  padding: 10px 4px;
  opacity: 0;
  animation: st-ingresso-marchio 220ms ease-out 40ms forwards;
}

.st-ingresso__marchio .st-logo {
  display: block;
  width: auto;
  height: clamp(56px, 9vw, 92px);
}

/* La tenda. Copre il marchio e si alza scoprendolo dal basso, con il bilancino
   in terracotta sul bordo inferiore — la barra di zavorra che ogni tenda a
   rullo ha in fondo al telo, ed e' l'unico pezzo di questo disegno che si
   muove sotto gli occhi di chi guarda. */
.st-ingresso__tenda {
  position: absolute;
  inset: 0;
  background: var(--st-p-avorio, #F7F4EF);
  border-bottom: 2px solid var(--st-copper, #AE4C0B);
  transform: translateY(0);
  animation: st-ingresso-tenda 560ms var(--st-ease, cubic-bezier(.22, .61, .36, 1)) 120ms forwards;
  will-change: transform;
}

@keyframes st-ingresso-marchio {
  to { opacity: 1; }
}

/* `101%`, non `100%`: a schermi con rapporto di pixel frazionario un pannello
   fermato esattamente sul bordo lascia una riga di un pixel del suo bilancino
   appesa sopra il marchio. */
@keyframes st-ingresso-tenda {
  to { transform: translateY(-101%); }
}

@keyframes st-ingresso-esce {
  to { transform: translateY(-100%); }
}

/* Chi ha chiesto di non far muovere niente non vede il velo affatto: lo dice
   gia' lo script d'apertura, che in quel caso non marca `<html>`. Questa
   regola e' la seconda serratura, per il caso in cui l'impostazione cambi a
   pagina aperta. */
@media (prefers-reduced-motion: reduce) {
  .st-ingresso-attivo { overflow: auto; }
  .st-ingresso-attivo .st-ingresso { display: none; }
}

/* ======================================================================
 * IL PULSANTE D'AIUTO SU TELEFONO: UN CERCHIO, NON UNA PASTIGLIA
 *
 * Misurato a 390 px: la pastiglia «Aiuto» e' larga 210 px e galleggia a
 * quarantaquattro pixel dal fondo, sopra il contenuto. Su un telefono quella
 * e' la fine di ogni riga di testo che le passa sotto — nel configuratore
 * copriva l'ultima parola dell'avvertenza sul reso.
 *
 * Resta dov'e' ed e' altrettanto premibile: quarantotto pixel di diametro
 * sono oltre la soglia del bersaglio. La parola sparisce dalla vista e
 * rimane per chi naviga a voce, dove serve davvero.
 * ==================================================================== */

@media (max-width: 700px) {
    .st-soccorso__bolla {
        width: 52px;
        height: 52px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .st-soccorso__bolla-testo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ======================================================================
 * I BERSAGLI SUL TELEFONO
 *
 * Misurato con `tools/collaudo_telefono.py` a 390 px: quattordici comandi
 * sotto i 44 px di altezza, su undici pagine. Non sono collegamenti in mezzo
 * a una frase — quelli la norma li esclude apposta, e ingrandirli spezzerebbe
 * la riga — sono **azioni che stanno da sole**: «Vedi tutte le collezioni»,
 * «Guida alle misure», «Torna al sito», il numero di telefono, la
 * numerazione delle pagine del catalogo.
 *
 * Ventuno pixel di altezza sono meta' di un polpastrello. Su un collegamento
 * che porta al catalogo o che compone una telefonata, mancarlo non e' un
 * fastidio: e' la visita che finisce li'.
 *
 * L'area cresce, il testo no: e' `min-height` con il contenuto centrato,
 * quindi nulla si sposta di posto — cambia solo quanto e' facile prenderlo.
 * ==================================================================== */

@media (max-width: 700px) {
    .st-link-freccia,
    .st-product__category,
    .st-accesso2__ritorno,
    .st-footer__col a,
    .st-topbar__tel {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Un numero di telefono su un telefono e' il bersaglio piu' importante
       della pagina: e' l'unico che si preme quando qualcosa non torna. */
    a[href^="tel:"],
    a[href^="mailto:"] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* Un collegamento che occupa da solo il suo paragrafo e' un'azione, non
       una parola dentro un discorso: `:only-child` distingue i due casi senza
       un elenco di eccezioni, e lascia in pace i collegamenti in mezzo al
       testo — che devono restare inline, se no spezzano la riga. */
    p > a.st-link:only-child,
    p > a:only-child {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* La numerazione del catalogo: «Prec» e «Succ» erano alti 40. */
    [data-pagination] .prev,
    [data-pagination] .next,
    [data-pagination] .page-numbers {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    /* Le caselle di spunta erano tredici pixel: sulla pagina d'accesso
       «Ricordami» si prendeva con l'unghia. Il quadrato cresce e la riga
       intera diventa premibile, che e' il vero rimedio. */
    input[type="checkbox"],
    input[type="radio"]:not(.st-visually-hidden) {
        /* `flex: none` non e' decorazione: dentro un'etichetta a flex la
           casella si lasciava schiacciare dal testo accanto — misurata 13
           px di larghezza per 18 di altezza sulla pagina di registrazione,
           cioe' un rettangolo dove doveva esserci un quadrato. */
        flex: none;
        width: 22px;
        height: 22px;
    }

    label:has(> input[type="checkbox"]),
    .st-campo--spunta,
    .woocommerce-form__label-for-checkbox {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
    }
}

/* Con il menu aperto il pulsante d'aiuto sparisce.
   E' ancorato in basso a destra e resta sopra il pannello: misurato a 390 px,
   copriva il numero di telefono che il cassetto scrive in fondo. Due cose che
   chiedono la stessa attenzione nello stesso angolo, e una copre l'altra.
   Il corpo prende `st-menu-open` all'apertura — lo mette `menu.js`. */
body.st-menu-open .st-soccorso {
    display: none;
}