/* Listino del giorno Del Mar — colonna unica, foglio A4.
   Ricalca il modello approvato da Mattias (13/08/2026): testata col claim a destra, titolo
   grande, sezioni numerate, piede a tre blocchi.
   Revisione del 13/08: TUTTE le scritte nel blu del logo (prima il titolo era grigio) e le
   righe di separazione in corallo — il colore caldo passa da accento puntuale a struttura
   del foglio, ed e' quello che tiene insieme la pagina quando il testo e' tutto di un colore.
   Le stesse regole finiranno in app/views/pdf/pdf.css. */

/* I colori sono quelli del brand (docs/design_system.md), non scelti a occhio:
   navy #26327e e' il pesce del logo, corallo #e05a48 e' il secondo colore deciso il
   09/08/2026. Il grigio del titolo e' sparito: Mattias lo vuole nel blu del logo. */

:root {
  --navy: #26327e;
  --navy-scuro: #1d2661;
  --navy-tenue: #6a72a5;
  --corallo: #e05a48;
  --corallo-scuro: #b0402f;
  --corallo-soft: #fdece8;
  /* Il grigio della scritta "DelMar" del logo: il titolo lo riprende, cosi' la testata e
     il titolo sono la stessa voce e il blu resta a tutto il resto. */
  --grigio-logo: #7d8689;
  --azure-soft: #e9f5fc;
  --foglio: #ffffff;
  --fondo: #e9edf2;

  /* L'ACCENTO E' L'UNICA COSA CHE CAMBIA DA UN LISTINO ALL'ALTRO. Navy, grigio del logo,
     impaginato e tipografia restano identici: e' quello che tiene insieme la famiglia.
     Il corallo del brand resta il valore di partenza, gli altri temi lo sostituiscono. */
  --accento: var(--corallo);
  --accento-scuro: var(--corallo-scuro);
  --accento-velo: #fdf3f1;
}

/* Il PAT delle pescherie e quello dei ristoranti sono lo STESSO pescato a prezzi diversi:
   due file quasi identici che e' facilissimo scambiare mandandoli. Il colore diverso non
   e' decorazione, e' la sicurezza che a un ristorante non arrivi il prezzo delle pescherie. */
.lst-tema-acqua {
  --accento: #17879b;
  --accento-scuro: #10606f;
  --accento-velo: #eff8fa;
}

.lst-tema-mare {
  --accento: #2f7fc1;
  --accento-scuro: #205a8b;
  --accento-velo: #f0f6fc;
}

.lst-tema-ambra {
  --accento: #c98a2e;
  --accento-scuro: #8f6113;
  --accento-velo: #fdf7ec;
}

/* Le occasioni chiedono di essere lette adesso: il rosso e' piu' urgente del corallo,
   ed e' il solo listino dove serve davvero. */
.lst-tema-rosso {
  --accento: #c0392b;
  --accento-scuro: #8d2418;
  --accento-velo: #fdf1ef;
}

* {
  box-sizing: border-box;
}

/* L'attributo `hidden` vale quanto un `display: none` scritto dal browser, e QUALUNQUE
   `display` del foglio di stile lo batte. In una pagina dove mezza interfaccia si accende e
   si spegne da JavaScript — il piu' e lo stepper, i reparti e l'esito della ricerca — l'ho
   scoperto tre volte in tre punti diversi: una riga sola qui, e non succede piu'.
   `!important` e' voluto: e' l'unico modo perche' regga contro un `display` piu' specifico,
   ed e' quello che fanno tutti i fogli di reset seri. */
[hidden] {
  display: none !important;
}

.lst-body {
  margin: 0;
  padding: 24px 16px 60px;
  background: var(--fondo);
  color: var(--navy);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

/* --- il foglio --- */

.lst-foglio {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 46px 0;
  background: var(--foglio);
  box-shadow: 0 1px 3px rgba(20, 44, 84, 0.08), 0 12px 40px rgba(20, 44, 84, 0.14);
}

/* La riga navy-corallo in cima chiude il foglio a specchio con quella in fondo: il
   documento smette di essere una pagina che comincia e diventa un oggetto stampato. */
.lst-foglio::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(to right, var(--navy) 0%, var(--navy) 55%, var(--accento) 55%, var(--accento) 100%);
  content: "";
}

/* L'onda in filigrana dietro la testata. Sta sotto a tutto, tenuissima: si nota
   solo se la cerchi, ed e' esattamente il lavoro che deve fare. */
/* L'onda si taglia da SOLA, con la sua clip-path, invece di farsi tagliare dal foglio.
   Il foglio non puo' piu' avere `overflow: hidden`: un antenato con overflow nascosto e' un
   contenitore di scorrimento, e dentro un contenitore di scorrimento la barra dei reparti
   non si incolla in cima — resterebbe attaccata al foglio e uscirebbe di scena come prima. */
.lst-filigrana {
  position: absolute;
  top: -70px;
  right: -90px;
  z-index: 0;
  width: 420px;
  height: auto;
  clip-path: inset(70px 90px 0 0);
  color: var(--navy);
  opacity: 0.05;
  pointer-events: none;
}

.lst-foglio > *:not(.lst-filigrana) {
  position: relative;
  z-index: 1;
}

/* --- testata --- */

.lst-testata {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
}

.lst-logo {
  width: 200px;
  height: auto;
  flex-shrink: 0;
}

.lst-claim {
  margin: 0;
  padding-left: 26px;
  border-left: 2px solid var(--accento);
  color: var(--navy);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
}

/* --- titolo --- */

/* L'occhiello dice CHE COSA e' il documento, il titolo dice DI CHE COSA parla. Prima il
   titolo faceva tutti e due i lavori e non ne faceva bene nessuno: "Listino del giorno"
   non distingueva il pescato locale dalle occasioni. In corallo, come vuole il design
   system per gli occhielli. */
/* L'occhiello con la lineetta corallo davanti: un segno piccolo che aggancia il titolo
   alla riga in cima e alla spunta delle sezioni. Ripetere lo stesso gesto in tre punti
   e' quello che fa sembrare un foglio disegnato invece che composto. */
.lst-occhiello {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 38px 0 4px;
  color: var(--accento);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lst-occhiello::before {
  width: 26px;
  height: 2px;
  background: var(--accento);
  content: "";
}

/* Il titolo e' l'unica cosa che non e' blu: riprende il grigio del logo. Non e' maiuscolo,
   e ha le lettere piu' strette del normale — a 52px la spaziatura di default sgrana la
   parola. */
.lst-titolo {
  margin: 0;
  color: var(--grigio-logo);
  font-family: "Century Gothic", Futura, "Trebuchet MS", system-ui, sans-serif;
  font-size: 52px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
}

.lst-aggiornamento {
  display: flex;
  gap: 9px;
  align-items: center;
  width: fit-content;
  margin: 16px 0 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 3px;
  background: var(--accento-velo);
  color: var(--navy-tenue);
  font-size: 13px;
}

/* L'ORA DELLA DISPONIBILITA'. Sta sotto la data e non dentro il riquadro con l'accento:
   la data del listino e' una promessa del documento, questa e' una fotografia che invecchia,
   e confonderle darebbe all'una l'autorevolezza dell'altra. Grigio e piccola apposta: si
   legge quando la si cerca, cioe' quando si trova una riga barrata. */
.lst-disponibilita {
  margin: 0 0 14px;
  padding-left: 12px;
  color: var(--navy-tenue);
  font-size: 11.5px;
  font-style: italic;
}

/* Le tessere del riepilogo: quante voci per reparto, prima ancora di scorrere.
   E' la sola cosa che il foglio dice PRIMA dei prezzi, ed e' la domanda vera di chi
   apre un listino — "che cosa c'e' oggi". */
/* LA BARRA DEI REPARTI RESTA IN CIMA MENTRE SI SCORRE (Mattias, 21/08/2026).
   Su un listino lungo tre schermate il riepilogo serviva una volta sola: appena si scendeva
   spariva, e per cambiare reparto bisognava risalire fino in testa. Bloccato in alto e'
   l'indice del foglio, e su un telefono e' l'unico modo di saltare da un reparto all'altro
   senza scorrere alla cieca.

   Il fondo pieno e il filo sotto non sono decorazione: senza, le righe dei prodotti si
   vedono passare attraverso la barra. I margini negativi la portano da bordo a bordo del
   foglio, cosi' quello che copre lo copre tutto.

   Il selettore e' figlio diretto apposta: `.lst-foglio > *` piu' sopra da' `position:
   relative` a tutti i figli, e con specificita' maggiore spegnerebbe lo sticky. */
.lst-foglio > .lst-riepilogo-guscio {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 -46px 20px;
  padding: 12px 46px;
  border-bottom: 1px solid #e2e9f2;
  background: var(--foglio);
}

/* Lo stacco di chi atterra su una sezione cliccando una tessera: senza, la fascia del
   reparto finisce ESATTAMENTE sotto la barra che l'ha portata li'. */
/* La misura e' quella VERA della barra — campo di ricerca, tessere, margini e filo — piu' un
   dito d'aria: era tarata su quando la barra conteneva i soli reparti, e da quando c'e' anche
   la ricerca chi toccava una tessera atterrava di nuovo sotto la barra. */
:root {
  --barra-reparti: 132px;
}


/* --- la ricerca nella barra dei reparti --- */

/* Il campo e' un blocco solo con la lente dentro, non un'etichetta piu' un riquadro: su una
   barra bloccata alta cinquanta pixel ogni elemento in piu' e' spazio tolto ai prezzi. */
.lst-cerca {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 0 8px;
}

.lst-cerca-lente {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--navy-tenue);
  pointer-events: none;
}

.lst-cerca-campo {
  width: 100%;
  padding: 9px 34px 9px 33px;
  border: 1px solid #dde4ee;
  border-radius: 4px;
  background: var(--foglio);
  color: var(--navy);
  font-family: inherit;
  font-size: 13.5px;
  /* 16px sotto i 720px, piu' sotto: un campo con testo sotto i 16px fa ingrandire la pagina
     a iOS appena lo si tocca, e da li' il listino resta zoomato. Vedi la regola nel blocco
     del telefono. */
  appearance: none;
}

.lst-cerca-campo::placeholder {
  color: var(--navy-tenue);
  opacity: 0.85;
}

.lst-cerca-campo:focus {
  border-color: var(--accento);
  outline: none;
  box-shadow: 0 0 0 3px var(--accento-velo);
}

/* La croce nativa dei campi `search` la mettono solo alcuni browser e in tre modi diversi:
   si spegne e se ne disegna una che c'e' sempre e si tocca uguale ovunque. */
.lst-cerca-campo::-webkit-search-cancel-button {
  appearance: none;
}

.lst-cerca-pulisci {
  position: absolute;
  right: 5px;
  display: flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eef2f7;
  color: var(--navy-tenue);
  font-family: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.lst-cerca-pulisci:hover {
  background: var(--accento-velo);
  color: var(--accento-scuro);
}

/* L'esito della ricerca sta dove stavano i reparti, e ne prende anche l'aria: e' la stessa
   riga della barra, cambia solo cosa dice. */
.lst-cerca-esito {
  margin: 0 0 4px;
  color: var(--navy-tenue);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Nessun risultato non e' un errore, ma va visto: prende il colore del listino, che qui e'
   l'unico modo di distinguerlo da un conteggio qualunque. */
.lst-cerca-vuota {
  color: var(--accento-scuro);
  text-transform: none;
}

/* Le righe che la ricerca esclude. Classe e non `hidden`, perche' le righe sono `display:
   grid` sul telefono e `table-row` da schermo grande: l'attributo avrebbe perso contro
   tutte e due. */
/* `!important` per la stessa ragione della regola generale su [hidden]: la fascia del reparto si
   ridichiara `display: block` piu' in basso, dentro la media query del telefono — stessa
   specificita' e posizione successiva, quindi vinceva lei. Cercando "gamberi" restavano in
   piedi tutte e cinque le fasce dei reparti sopra due righe di prodotto. */
.lst-nascosta {
  display: none !important;
}
/* A GRIGLIA, NON A PASTIGLIE. Le tessere stondate a piena curvatura sono la forma che
   prende qualunque interfaccia lasciata a se stessa, e su un foglio dove ogni altro angolo
   e' vivo — la fascia della sezione, il riquadro della data, la barra in fondo — stonavano
   come un adesivo su una carta intestata. Qui sono ETICHETTE SQUADRATE incolonnate: bordo
   sottile, spigolo netto, e un filetto d'accento sul fianco sinistro che le lega al colore
   del listino senza colorarle tutte.
   La griglia serve anche a non far ballare le righe: a flex libero "MOLLUSCHI E FRUTTI DI
   MARE" occupava una riga da solo e le altre si spostavano ad ogni listino. */
.lst-riepilogo {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

/* Le etichette sono larghe quanto il loro nome, non stirate a colonne uguali: "PESCATO" e
   "MOLLUSCHI E FRUTTI DI MARE" allineati alla stessa misura lasciavano nella prima un palmo
   di bianco fra la parola e il numero, e mandavano la seconda a capo su due righe. */
.lst-riepilogo li {
  flex: 0 1 auto;
  min-width: 0;
}

/* La tessera E' il collegamento, non ne contiene uno: cosi' l'area cliccabile e' tutta
   l'etichetta e non le sole parole. Su un listino da 140 voci il riepilogo diceva quanti
   crostacei c'erano e poi toccava cercarli scorrendo.
   Il conteggio sta all'estremita' opposta del nome, non attaccato: incolonnato a destra si
   leggono tutti insieme, che e' il modo in cui si guarda un indice. */
.lst-riepilogo a {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 7px 10px;
  border: 1px solid #dde4ee;
  border-left: 3px solid var(--accento);
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}

.lst-riepilogo a:hover {
  border-color: var(--accento);
  background: var(--accento-velo);
}

.lst-riepilogo a:focus-visible {
  outline: 2px solid var(--accento);
  outline-offset: 2px;
}

/* Lo stacco sopra la sezione quando ci si arriva da un'ancora: senza, la fascia finisce
   appiccicata al bordo dello schermo e non si capisce di essere atterrati su un titolo. */
.lst-sezione {
  scroll-margin-top: var(--barra-reparti);
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.lst-riepilogo b {
  color: var(--accento);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.lst-aggiornamento strong {
  color: var(--navy);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.lst-icona-piccola {
  width: 17px;
  height: 17px;
  color: var(--navy);
}

/* --- tabella --- */

.lst-tabella-guscio {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

thead th {
  padding: 9px 8px;
  border-top: 2px solid var(--accento);
  border-bottom: 2px solid var(--accento);
  color: var(--navy);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Il codice articolo apre la riga: e' quello che il cliente scrive nell'ordine, e cercarlo
   in fondo alla riga vuol dire rileggerla tutta. Tenue e monospaziato, cosi' non compete
   col nome ma le cifre restano incolonnate. */
.lst-col-codice {
  width: 96px;
  padding-left: 40px !important;
  text-align: left;
}

.lst-cella-codice {
  padding-left: 40px;
  color: var(--navy-tenue);
  font-family: "Consolas", "SF Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: -0.02em;
}

.lst-col-prodotto {
  text-align: left;
}

/* Meno spazio all origine e all unita di quanto ne prendevano: sono due colonne che spesso
   sono vuote o portano due lettere, e i pixel che si tenevano mandavano a capo i nomi dei
   prodotti — che sono la cosa che si legge davvero. */
.lst-col-origine {
  width: 168px;
  text-align: left;
}

.lst-col-um {
  width: 62px;
  text-align: center;
}

.lst-col-prezzo {
  width: 96px;
  text-align: right;
  padding-right: 12px !important;
}

/* Le due colonne dello sconto esistono solo sul listino B e C: altrove sarebbero due
   colonne vuote che rubano spazio ai nomi dei prodotti. */

.lst-col-pieno,
.lst-col-sconto,
.lst-cella-pieno,
.lst-cella-sconto {
  display: none;
}

.lst-con-sconto .lst-col-pieno,
.lst-con-sconto .lst-col-sconto,
.lst-con-sconto .lst-cella-pieno,
.lst-con-sconto .lst-cella-sconto {
  display: table-cell;
}

.lst-col-pieno {
  width: 76px;
  text-align: right;
}

.lst-col-sconto {
  width: 78px;
  text-align: center;
}

/* --- le due colonne nuove: disponibilita' e ordine --- */

/* IL FOGLIO SI ALLARGA quando c'e' schermo. Restava 860px anche su un monitor da 27", e con
   dentro nove colonne i nomi dei prodotti finivano su tre righe mentre a destra avanzava
   mezzo schermo bianco. Sotto quella soglia non cambia niente: il documento resta il foglio
   approvato, largo come prima. */
@media (min-width: 1100px) {
  .lst-foglio {
    max-width: 1080px;
  }
}

.lst-col-giacenza {
  width: 132px;
  text-align: right;
}

.lst-col-ordine {
  width: 66px;
  text-align: center;
}

/* L'intestazione della colonna dei pulsanti c'e' per chi legge con uno screen reader, e non
   si vede: sopra una colonna di "+" una parola sarebbe rumore. */
.lst-solo-lettori {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lst-cella-giacenza {
  text-align: right;
  white-space: nowrap;
}

.lst-cella-ordine {
  padding-right: 24px;
  text-align: center;
}

/* Il prezzo pieno barrato: e' il termine di paragone, quindi si vede ma non compete col
   prezzo vero — piu' piccolo, tenue, e con la riga sopra. */
.lst-cella-pieno {
  color: var(--navy-tenue);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-decoration: line-through;
}

/* Lo sconto e' l'unica cosa che sul listino B/C si legge prima del nome: pastiglia corallo
   piena, il colore caldo del brand usato dove serve davvero convincere. */
.lst-cella-sconto {
  text-align: center;
}

.lst-pastiglia {
  display: inline-block;
  min-width: 52px;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--accento);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.lst-pastiglia-vuota {
  color: var(--navy-tenue);
  font-size: 12px;
}

tbody td {
  padding: 8px;
}

tbody tr.lst-pari td {
  background: var(--azure-soft);
}

/* Il rilievo al passaggio del mouse: il foglio nasce per essere stampato, ma nove volte
   su dieci si legge a schermo, e seguire una riga fino al prezzo su 140 voci senza un
   aggancio e' faticoso. La lineetta corallo a sinistra e' lo stesso segno dell'occhiello. */
/* Solo dove c'e' un mouse. Su un vetro il "passaggio" non esiste: il browser lo simula al
   tocco e il colore resta incollato alla riga toccata anche dieci schermate piu' in giu' —
   e con le celle diventate blocchi di larghezze diverse usciva pure a macchie sfalsate. */
@media (hover: hover) and (pointer: fine) {
  tbody tr:not(.lst-sezione):hover td {
    background: var(--accento-velo);
  }

  tbody tr:not(.lst-sezione):hover .lst-cella-codice {
    box-shadow: inset 3px 0 0 var(--accento);
  }
}

.lst-cella-nome {
  color: var(--navy);
}

/* La condizione di acquisto accanto al nome: sul listino sushi lo stesso articolo compare
   piu' volte a prezzi diversi, e senza la quantita' minima le righe sembrerebbero un
   errore invece che uno scaglione. In corallo perche' e' la leva commerciale della riga. */
.lst-minimo {
  margin-left: 9px;
  padding: 2px 7px;
  border: 1px solid var(--accento);
  border-radius: 3px;
  color: var(--accento-scuro);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* LA MERCE FINITA. La riga resta e si spegne, non sparisce: chi ha visto l'articolo la
   mattina e a mezzogiorno non lo trova piu' penserebbe a una pagina rotta. Il prezzo si
   barra perche' e' l'unica cosa che non vale piu' — il resto della riga serve ancora a
   riconoscere l'articolo e a chiederlo domani.

   Grigio del logo e non rosso: "esaurito" non e' un allarme, e' uno stato. Il rosso su un
   foglio dove l'accento e' gia' il colore del listino griderebbe piu' delle offerte. */
/* Il navy tenue e non il grigio del logo: quel grigio su bianco sta a 3,7:1, sotto la soglia
   di leggibilita' per un testo normale — e qui sotto ci finisce il NOME del prodotto, cioe' la
   riga che questa funzione ha appena introdotto. Al sole, su un telefono, erano le righe meno
   leggibili della pagina. */
tbody tr.lst-esaurito td {
  color: var(--navy-tenue);
}

/* Il barrato sta sul NUMERO e non sulla cella, e non e' pignoleria: la disponibilita' vive
   nella stessa cella del prezzo, e la decorazione di un blocco si propaga ai discendenti
   senza che si possa togliere da dentro (`text-decoration: none` sul figlio non la annulla).
   Con la regola sulla cella usciva barrata anche l'etichetta "esaurito" — negata due volte. */
tbody tr.lst-esaurito .lst-cella-prezzo,
tbody tr.lst-esaurito .lst-cella-pieno {
  color: var(--grigio-logo);
}

tbody tr.lst-esaurito .lst-prezzo-valore,
tbody tr.lst-esaurito .lst-cella-pieno {
  text-decoration: line-through;
}

/* La pastiglia dello sconto su una riga finita e' una promessa che non si puo' mantenere:
   resta leggibile ma perde il pieno di colore. */
tbody tr.lst-esaurito .lst-pastiglia {
  background: var(--grigio-logo);
}

.lst-cella-origine {
  color: var(--navy-tenue);
  font-size: 12.5px;
}

.lst-cella-um {
  color: var(--navy-tenue);
  font-size: 12.5px;
  text-align: center;
}

/* QUANTO NE RESTA, sotto il prezzo e dentro la sua stessa cella.
   
   NON e' una colonna, ed e' stata una scelta obbligata: il foglio e' largo 768px utili e
   sulla variante con lo sconto le colonne sono gia' sette. L'ottava lasciava ai nomi dei
   prodotti 122px, cioe' "ALICI FRESCHE ADRIATICO" su due righe e ogni riga alta il doppio —
   provato e misurato. Sotto il prezzo lo spazio orizzontale costa zero, e le due domande
   restano vicine: quanto viene, quanto ne posso avere.

   E' UN'ETICHETTA CON UN PALLINO, non un numero grigio sotto il prezzo. Grigia e nuda si
   leggeva come una seconda cifra del prezzo — un peso di confezione, uno sconto — e la
   domanda "quanto ce n'e'" e' invece la seconda ragione per cui questa pagina esiste. Il
   pallino verde risponde prima delle parole: c'e' o non c'e'. Il pieno tenue la stacca dal
   prezzo senza gridare, che sul foglio di un listino conta.

   Il verde non e' un colore del brand ed e' voluto: l'accento cambia da un listino
   all'altro (corallo, acqua, ambra, rosso) e una disponibilita' colorata come il listino
   sarebbe letta come parte della grafica invece che come uno stato della merce. */
.lst-giacenza {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.lst-giacenza::before {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  content: "";
}

.lst-giacenza.lst-giacenza-viva {
  background: #e8f4ec;
  color: #1c7146;
}

/* La parola vive solo sul telefono: nella colonna del prezzo di un A4 manderebbe
   l'etichetta a capo, e li' c'e' gia' l'intestazione a dire cos'e' quel numero. */
.lst-giacenza-parola {
  display: none;
}

.lst-giacenza.lst-giacenza-viva::before {
  background: #2f9e63;
}

/* La merce finita si spegne, non si accende di rosso: e' uno stato, non un allarme, e il
   rosso su un foglio dove l'accento e' gia' il colore del listino griderebbe piu' delle
   offerte. */
.lst-giacenza.lst-giacenza-finita {
  background: #eceff4;
  color: #6d7686;
  text-transform: uppercase;
}

.lst-giacenza.lst-giacenza-finita::before {
  background: #aeb6c4;
}

.lst-cella-prezzo {
  padding-right: 12px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- intestazione di sezione --- */

/* LE SEZIONI SONO FASCE PIENE NEL COLORE DEL LISTINO, anche da schermo grande.
   Prima l'accento toccava solo dettagli da pochi pixel e i cinque fogli restavano
   indistinguibili a colpo d'occhio: il colore deve occupare superficie per farsi vedere.
   Sono l'elemento che si ripete cinque o sei volte per pagina, quindi sono anche il
   posto giusto per farlo. */
.lst-sezione td {
  padding: 11px 14px;
  border-bottom: 0;
  border-radius: 3px;
  background: var(--accento);
}

.lst-sezione {
  /* Lo stacco sopra la fascia: una riga di tabella non prende margini, quindi lo
     spazio lo fa una cella trasparente sopra. */
  border-top: 18px solid transparent;
}

.lst-sezione-titolo {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* L'icona dentro un cerchio: la stessa idea del bollo del modello, ridotta a un segno.
   Da' alle sezioni un peso che una riga di testo da sola non ha. */
.lst-sezione-icona {
  width: 26px;
  height: 20px;
  flex-shrink: 0;
  color: #ffffff;
}

.lst-sezione-spunta {
  width: 3px;
  height: 15px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.55);
}

/* Il numero grande e corallo: si conta a colpo d'occhio quante sezioni ha il listino. */
.lst-sezione-numero {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
}

/* --- piede --- */

.lst-piede {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 0;
  margin-top: 30px;
  padding: 18px 0 22px;
  border-top: 2px solid var(--accento);
}

.lst-piede-blocco {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 22px;
  border-left: 1px solid var(--accento);
}

.lst-piede-blocco:first-child {
  padding-left: 0;
  border-left: 0;
}

.lst-piede-icona {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--navy);
}

.lst-piede-titolo {
  margin: 0 0 3px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lst-piede-testo {
  margin: 0;
  color: var(--navy-tenue);
  font-size: 11.5px;
  line-height: 1.45;
}

.lst-piede-testo a {
  color: var(--navy-tenue);
  text-decoration: none;
}

/* La riga a due colori in fondo al foglio, come sul modello. */
.lst-barra {
  display: flex;
  height: 7px;
  margin: 0 -46px;
}

.lst-barra-navy {
  width: 72%;
  background: var(--navy);
}

.lst-barra-accento {
  width: 28%;
  background: var(--accento);
}

.lst-nota {
  max-width: 860px;
  margin: 14px auto 0;
  color: var(--navy-tenue);
  font-size: 11px;
  text-align: center;
}

@media print {
  .lst-body {
    padding: 0;
    background: #ffffff;
  }

  .lst-nota {
    display: none;
  }

  .lst-foglio {
    max-width: none;
    box-shadow: none;
  }

  .lst-sezione {
    break-after: avoid;
  }

  tbody tr {
    break-inside: avoid;
  }

  /* Su carta non si scorre: la barra dei reparti torna un blocco qualunque, e i suoi
     collegamenti non portano da nessuna parte. Il filo sotto sparisce con lei. */
  .lst-foglio > .lst-riepilogo-guscio {
    position: static;
    margin: 0 0 16px;
    padding: 0;
    border-bottom: 0;
  }

  thead {
    display: table-header-group;
  }
}

/* =========================================================================
   TELEFONO. La tabella a quattro colonne non si stringe: a 390px il prezzo
   finiva fuori schermo e "€/kg" andava a capo in mezzo. Qui la tabella smette
   di essere una tabella e ogni prodotto diventa un blocco: nome sopra, e sotto
   una riga di servizio col codice, l'origine e l'unita', col PREZZO grande a
   destra — che e' la cosa che si cerca quando si scorre un listino col pollice.
   ========================================================================= */

@media (max-width: 720px) {
  :root {
    --barra-reparti: 104px;
  }

  .lst-body {
    padding: 0 0 32px;
  }

  .lst-foglio {
    padding: 18px 18px 0;
    box-shadow: none;
  }

  /* LA TESTATA COSTAVA MEZZO SCHERMO prima di far vedere un prezzo, e su un telefono la
     prima schermata e' tutto quello che molti guardano. Logo piu' piccolo, claim piu'
     stretto, e ogni stacco verticale rifatto: erano margini pensati su un foglio A4, dove
     l'aria e' gratis perche' la pagina e' gia' tutta li'. */
  .lst-testata {
    gap: 12px;
    align-items: flex-start;
  }

  .lst-logo {
    width: 112px;
  }

  .lst-claim {
    padding-left: 12px;
    font-size: 12.5px;
    line-height: 1.25;
  }

  .lst-occhiello {
    margin-top: 16px;
    font-size: 10px;
    letter-spacing: 0.13em;
  }

  .lst-titolo {
    font-size: 26px;
    line-height: 1.05;
  }

  /* Il riquadro della data va a capo DENTRO il testo, non fra l'icona e il testo: a flex
     libero il calendario restava solo su una riga sua e sotto gli finivano due righe di
     sottotitolo, tre piani per una frase sola. */
  .lst-aggiornamento {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3px 7px;
    margin: 10px 0 6px;
    font-size: 11.5px;
    line-height: 1.25;
  }

  .lst-aggiornamento > span:not(.lst-punto) {
    flex: 1 1 0;
    min-width: 0;
  }

  .lst-icona-piccola {
    flex-shrink: 0;
    margin-top: 1px;
  }

  .lst-aggiornamento strong {
    font-size: 11.5px;
  }

  .lst-punto {
    display: none;
  }

  .lst-disponibilita {
    margin: 0 0 10px;
    padding-left: 0;
    font-size: 11px;
  }

  /* Via l'intestazione di colonna: senza colonne non ha piu' niente da intestare. */
  thead {
    display: none;
  }

  .lst-tabella-guscio {
    overflow-x: visible;
  }

  table,
  tbody,
  tbody tr,
  tbody td {
    display: block;
    width: auto;
  }

  /* NIENTE RIGHE ALTERNATE sul telefono. Lo sfondo stava sulle CELLE, e con le celle
     diventate blocchi di larghezze diverse usciva a macchie sfalsate invece che a righe.
     Al posto delle strisce, aria e un filo sottile: si legge meglio e sembra piu' curato. */
  tbody tr.lst-pari td,
  tbody tr td {
    background: transparent;
  }

  /* LA RIGA E' UNA GRIGLIA A QUATTRO PIANI, e ogni pezzo ha il suo posto invece di cadere
     dove capita. Prima l'unita' di misura era un blocco per conto suo, centrato in mezzo al
     nulla sotto l'origine: usciva un "· kg" appeso a niente che non si capiva a cosa si
     riferisse.

        01C000618                       7,00   −29%    <- codice / prezzo pieno / sconto
        GALLINELLE FRESCHE 200/400      5,00   €/kg    <- nome / prezzo con la sua unita'
        Croazia                                        <- origine
                              ● 15 kg disponibili      <- disponibilita', riga sua

     Terza colonna per l'unita': attaccata al prezzo, "9,50 €/kg" e' una cosa sola e si
     legge come si dice a voce. E' anche il posto dove ricompare il simbolo dell'euro, che
     sul telefono non ha piu' l'intestazione di colonna a dichiararlo.

     La colonna del prezzo ha una LARGHEZZA MINIMA fissa e non solo il suo contenuto: ogni
     riga e' una griglia a se', e a colonne libere "9,50" e "132,50" partivano da due punti
     diversi — scorrendo, i prezzi ballavano invece di incolonnarsi. */
  tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(74px, auto) auto;
    align-items: baseline;
    column-gap: 7px;
    padding: 11px 2px 12px;
    border-bottom: 1px solid #e9eef5;
  }

  tbody td {
    padding: 0;
  }

  /* Il codice sopra il nome, minuscolo: chi ordina lo cerca, chi legge lo salta. */
  .lst-cella-codice {
    grid-column: 1;
    grid-row: 1;
    padding-left: 0;
    font-size: 10.5px;
    letter-spacing: 0;
    opacity: 0.75;
  }

  .lst-cella-nome {
    grid-column: 1;
    grid-row: 2;
    margin: 1px 0 2px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.25;
  }

  /* Lo scaglione scende sotto il nome invece di stargli in fila: accanto si prendeva mezza
     riga e spezzava in due il nome del prodotto, che e' la cosa che si cerca scorrendo. */
  .lst-minimo {
    display: block;
    width: fit-content;
    margin: 3px 0 0;
    padding: 1px 6px;
    font-size: 9.5px;
  }

  .lst-cella-origine {
    grid-column: 1;
    grid-row: 3;
    align-self: center;
    font-size: 11px;
  }

  .lst-cella-origine.lst-vuota {
    display: none;
  }

  /* IL PREZZO. E' il motivo per cui si apre un listino: grande, a destra, e non si spezza
     mai — nemmeno fra il numero e la sua unita', che stanno su due caselle affiancate. */
  .lst-cella-pieno {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 12px;
    text-align: right;
  }

  .lst-cella-prezzo {
    grid-column: 2;
    grid-row: 2;
    padding-right: 0;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
  }

  .lst-cella-um {
    grid-column: 3;
    grid-row: 2;
    color: var(--navy-tenue);
    font-size: 11.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
  }

  .lst-cella-um::before {
    content: "€/";
  }

  /* QUANTO NE RESTA E QUANTO NE PRENDO, sulla stessa riga e alle due estremita': sono la
     domanda e la risposta, e la seconda si decide guardando la prima. Le due celle
     attraversano tutte e tre le colonne con l'allineamento opposto invece di occuparne una
     ciascuna, cosi' la larghezza dello stepper non gonfia la colonna del prezzo e i prezzi
     restano incolonnati da una riga all'altra. */
  /* Le due celle occupano una COLONNA CIASCUNA della riga, non la stessa: sovrapposte nello
     stesso spazio con allineamenti opposti non si riservavano posto a vicenda, e su uno schermo
     da 320px lo stepper con una lavorazione attiva finiva stampato sopra la scritta "12 casse
     disponibili" — testo su testo. Adesso l'etichetta si stringe (e' lei a cedere: la
     disponibilita' si legge anche troncata, un pulsante mezzo coperto no) e i due restano
     separati da un vero spazio.
     La colonna del prezzo, in mezzo, non c'entra: su questa riga non ha contenuto. */
  .lst-cella-giacenza {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    min-width: 0;
    margin-top: 7px;
    overflow: hidden;
  }

  .lst-cella-ordine {
    grid-column: 2 / -1;
    grid-row: 4;
    justify-self: end;
    padding-right: 0;
    margin-top: 4px;
  }

  .lst-giacenza {
    max-width: 100%;
    overflow: hidden;
    font-size: 11.5px;
    text-overflow: ellipsis;
  }

  .lst-giacenza-parola {
    display: inline;
    font-size: 11px;
    font-weight: 500;
  }

  /* L'origine cede il posto all'etichetta invece di spingerla a capo: e' l'informazione
     meno urgente della riga, e su un nome di zona lungo la disponibilita' finirebbe sotto
     al prezzo di un altro articolo. */
  .lst-cella-origine {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* LO SCONTO STA ACCANTO AL PREZZO PIENO, sulla stessa riga: sono la stessa frase — "veniva
     7,00, meno 29 per cento". Sotto al prezzo faceva un quarto piano a destra e la riga di un
     articolo scontato diventava alta il doppio delle altre. */
  .lst-cella-sconto {
    grid-column: 3;
    grid-row: 1;
    align-self: end;
    text-align: right;
  }

  /* Il trattino dello "sconto assente" spariva male: su desktop e' una colonna da
     riempire, sul telefono e' una riga vuota in piu' sotto ogni prezzo. */
  .lst-cella-sconto.lst-pastiglia-vuota {
    display: none;
  }

  .lst-pastiglia {
    min-width: 0;
    padding: 3px 9px;
    font-size: 12.5px;
  }

  /* LE SEZIONI DIVENTANO FASCE PIENE. Su un foglio A4 bastava una riga con un filetto;
     scorrendo col pollice serve un blocco che si riconosca senza leggerlo.

     Il padding a zero non e' pignoleria: la fascia e' una `tr` come le altre e si prendeva
     i 13px sopra e sotto delle righe di prodotto, che sommati al margine del blocco e allo
     stacco della tabella facevano 50px di bianco fra i reparti e la prima merce. */
  /* LA FASCIA NON E' UNA GRIGLIA. Le righe dei prodotti lo sono — nome, prezzo, unita' — e
     la fascia se la prendeva in eredita': il suo titolo finiva nella prima colonna, quella
     dei nomi, e il banner si fermava dove comincia il prezzo. Un banner che muore a tre
     quarti di riga sembra un errore di caricamento, non un titolo di reparto. */
  .lst-sezione {
    display: block;
    padding: 0;
    border-top: 0;
    border-bottom: 0;
    scroll-margin-top: var(--barra-reparti);
  }

  .lst-sezione td {
    margin: 16px 0 0;
    padding: 10px 12px;
    border-bottom: 0;
    border-radius: 3px;
    background: var(--navy);
  }

  .lst-sezione-titolo {
    color: #ffffff;
    font-size: 13px;
    letter-spacing: 0.06em;
    line-height: 1.2;
  }

  /* Sulla fascia piena il cerchio attorno all'icona non serve: il contrasto lo fa gia'
     il fondo navy, e un bordo bianco dentro una banda bianca sarebbe un doppio giro. */
  .lst-sezione-icona {
    width: 24px;
    height: 19px;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #ffffff;
  }

  .lst-sezione-spunta {
    height: 13px;
    background: var(--accento);
  }

  /* Il numero resta bianco: il corallo sul navy non si legge. */
  .lst-sezione-numero {
    color: #ffffff;
    font-size: 14px;
  }

  .lst-aggiornamento {
    width: auto;
    padding: 6px 10px;
  }

  /* LA BARRA DEI REPARTI SUL TELEFONO: una riga sola che scorre di lato, non una griglia.
     A griglia i reparti di un listino lungo occupavano due file e la barra bloccata si
     mangiava un decimo dello schermo per tutta la lettura. Di lato costa 40px fissi, e lo
     scorrimento orizzontale con l'aggancio e' il gesto che si fa gia' su ogni telefono.

     I margini negativi la portano da bordo a bordo: una barra che si ferma prima del bordo
     lascia vedere le righe passarle di fianco e sembra staccata dalla pagina. */
  .lst-foglio > .lst-riepilogo-guscio {
    margin: 0 -18px 10px;
    padding: 8px 0;
  }

  /* La ricerca e i reparti hanno il loro margine dentro la barra, non fuori: la barra va da
     bordo a bordo e il contenuto rientra. */
  .lst-cerca {
    margin: 0 18px 7px;
  }

  .lst-cerca-campo {
    padding: 10px 34px 10px 33px;
  }

  .lst-cerca-esito {
    margin: 0 18px 6px;
  }

  /* La sfumatura sul bordo destro dice che la fila continua: senza, una tessera tagliata di
     netto sembra un difetto di impaginazione e non un invito a scorrere. */
  .lst-foglio > .lst-riepilogo-guscio::after {
    position: absolute;
    top: 1px;
    right: 0;
    bottom: 1px;
    width: 24px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--foglio) 70%);
    content: "";
    pointer-events: none;
  }

  /* Lo stacco sopra una fascia separa DUE reparti; sulla prima non c'e' niente da separare,
     e sotto la barra faceva solo un buco bianco. */
  .lst-sezione:first-child td {
    margin-top: 4px;
  }

  .lst-riepilogo {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    padding: 0 18px;
    overflow-x: auto;
    scroll-padding-left: 18px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .lst-riepilogo::-webkit-scrollbar {
    display: none;
  }

  .lst-riepilogo li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .lst-riepilogo a {
    padding: 6px 9px;
    font-size: 10px;
  }

  .lst-riepilogo b {
    font-size: 12px;
  }

  .lst-filigrana {
    display: none;
  }

  .lst-piede {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 22px;
  }

  .lst-piede-blocco {
    padding: 0;
    border-left: 0;
  }

  .lst-piede-icona {
    width: 32px;
    height: 32px;
  }

  .lst-barra {
    margin: 0 -18px;
  }

  .lst-nota {
    padding: 0 18px;
  }
}

/* =========================================================================
   TABLET STRETTO E TELEFONI LARGHI (560-720px)
   Le righe restano schede, non tornano tabella — a 700px sette colonne
   spezzerebbero i nomi — ma qui lo spazio in orizzontale c'e': la
   disponibilita' risale accanto all'origine invece di prendersi una riga
   tutta sua, che a quella larghezza era mezza riga di bianco per articolo.
   ========================================================================= */

@media (min-width: 560px) and (max-width: 720px) {
  .lst-cella-giacenza {
    grid-column: 2 / -1;
    grid-row: 3;
    justify-self: end;
    margin-top: 0;
  }

  .lst-cella-ordine {
    grid-row: 4;
  }

  /* L'origine si ferma prima di arrivarle addosso: le due stanno sulla stessa riga di
     griglia, e senza un tetto un nome di zona lungo le finirebbe sotto. */
  .lst-cella-origine {
    max-width: 60%;
  }
}

/* =========================================================================
   L'ORDINE: il pulsante sulla riga, lo stepper, la striscia in fondo.
   Tutto quello che sta qui sotto e' l'unica parte della pagina che NON e' il
   documento: si vede a schermo e sparisce in stampa e nell'anteprima del
   link, dove un pulsante disegnato sarebbe un pulsante che nessuno preme.
   ========================================================================= */

/* Da schermo grande il comando dell'ordine ha la sua colonna, in fondo a destra: e' l'ultima
   cosa della riga perche' e' l'ultima che si fa — prima si guarda il prezzo, poi quanto ne
   resta, poi si prende. */
.lst-ordine {
  display: flex;
  justify-content: center;
}

/* IL PIU', non la parola "aggiungi" in un rettangolo. Ripetuta cento volte quella parola
   diventava la cosa piu' pesante della pagina: una colonna di pulsanti dove dovrebbe esserci
   un listino. Il segno da solo si capisce — e' il gesto di tutte le app in cui si mette
   qualcosa in un ordine — e restituisce la riga al prodotto.
   Tondo e pieno perche' e' l'unica cosa su cui si preme in mezzo a un foglio di testo: un
   contorno sottile su fondo bianco, alla dimensione di un pollice, non si vede. */
.lst-ordine-piu {
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Un pieno piatto e' una macchia; la sfumatura in diagonale e l'ombra della stessa tinta lo
     fanno stare SOPRA il foglio invece che dentro — che e' esattamente cosa fa un pulsante.
     La luce viene da sopra a sinistra come in tutto il resto della pagina. */
  background: linear-gradient(145deg, var(--accento) 0%, var(--accento-scuro) 100%);
  box-shadow: 0 2px 6px rgba(20, 44, 84, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #ffffff;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.lst-ordine-icona {
  width: 17px;
  height: 17px;
}

.lst-ordine-piu:hover {
  box-shadow: 0 4px 12px rgba(20, 44, 84, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  filter: brightness(1.06);
}

/* Si schiaccia e l'ombra si accorcia: la stessa cosa che fa un tasto vero premuto. */
.lst-ordine-piu:active {
  transform: scale(0.9) translateY(1px);
  box-shadow: 0 1px 3px rgba(20, 44, 84, 0.24);
}

/* LO STEPPER, come nelle app di consegna: due tasti e la quantita' in mezzo, niente campi da
   compilare. Un campo numerico su un telefono vuol dire aprire la tastiera, centrare un
   cursore e richiuderla — tre gesti dove ne basta uno.
   Bianco con un filo di bordo, non un blocco pieno di colore: sta dentro una riga di listino,
   e il colore acceso lo tiene il piu' — che e' quello che invita a premere. */
.lst-stepper {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid #d9e1ec;
  border-radius: 4px;
  background: #ffffff;
}

/* I DUE TASTI SONO IL FONDO NEUTRO, il centro e' quello acceso: e' il contrario di prima, ed
   e' il modo di dire "qui sotto c'e' dell'altro" senza scriverlo. Vedi `.lst-stepper-quantita`. */
.lst-stepper-tasto {
  width: 32px;
  border: 0;
  background: var(--foglio);
  color: var(--navy-tenue);
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.lst-stepper-tasto:hover {
  background: #f4f7fb;
  color: var(--accento-scuro);
}

.lst-stepper-tasto:active {
  background: var(--accento);
  color: #ffffff;
}

/* LA QUANTITA' E' UN PULSANTE, ed e' la porta di tutto il resto: apre la scheda della riga,
   dove si cambia l'unita' e si chiedono le lavorazioni. Cosi' il gesto veloce resta veloce —
   piu', piu', piu' — e quello lungo ha un posto suo invece di riempire la riga di comandi
   che nove volte su dieci non servono.
   La freccina in coda e' l'unico modo di dire che si puo' premere: senza, un numero fra due
   tasti sembra un'etichetta. */
/* IL CENTRO E' ACCESO, I LATI NO: e' cosi' che si dice "questo si preme, e fa un'altra cosa"
   senza scrivere una parola (Mattias 2026-08-21). Il velo del colore del listino sotto la
   quantita', i due tasti su fondo bianco, e un filo d'accento a separarli: l'occhio legge tre
   zone, non un blocco unico, e la zona colorata e' quella che invita.
   La freccina sotto e' dello stesso accento — piccola, ma e' il secondo segno che serve a chi
   il colore non lo distingue. */
.lst-stepper-quantita {
  display: flex;
  min-width: 76px;
  flex-direction: column;
  justify-content: center;
  padding: 4px 9px 3px;
  border: 0;
  border-right: 1px solid var(--accento);
  border-left: 1px solid var(--accento);
  background: var(--accento-velo);
  color: var(--navy);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.14s ease;
}

/* Il velo dei temi e' tarato per fondere sotto interi blocchi di testo, e sotto un pulsante
   da premere spariva: qui il colore del listino si mescola al bianco a una dose sua, appena
   piu' carica. Dove `color-mix` non arriva resta il velo — piu' pallido, ma la freccina e i
   due fili laterali dicono la stessa cosa. */
@supports (background: color-mix(in srgb, red 10%, white)) {
  .lst-stepper-quantita {
    /* I due fili laterali a mezza tinta: a colore pieno, su un listino rosso, sembravano la
       segnalazione di un errore invece del bordo di un pulsante. */
    border-color: color-mix(in srgb, var(--accento) 45%, #ffffff);
    background: color-mix(in srgb, var(--accento) 13%, #ffffff);
  }
}

.lst-stepper-quantita:hover {
  background: var(--foglio);
}

.lst-stepper-quantita:active {
  background: var(--accento);
  color: #ffffff;
}

.lst-stepper-quantita::after {
  margin-top: 1px;
  color: var(--accento);
  content: "▾";
  font-size: 10px;
  line-height: 1;
}

.lst-stepper-quantita:active::after,
.lst-stepper-quantita:active .lst-stepper-note {
  color: #ffffff;
}

/* Le lavorazioni chieste, sotto la quantita' e dentro lo stesso pulsante: sono la seconda
   meta' di cosa si e' ordinato di quella riga, e vederle solo aprendo la scheda vorrebbe
   dire non vederle mai. */
.lst-stepper-note {
  overflow: hidden;
  max-width: 120px;
  color: var(--accento-scuro);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  text-transform: lowercase;
}

/* LA STRISCIA IN FONDO. Compare con la prima riga aggiunta e resta agganciata al bordo
   basso: e' dove il pollice arriva senza spostare la mano, e su un listino lungo tre
   schermate un carrello in cima sarebbe un carrello che non si trova piu'.
   Il fondo pieno navy e non l'accento: e' l'unica cosa della pagina che non appartiene al
   listino, e deve leggersi uguale su tutti e cinque. */
.lst-carrello {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  background: var(--navy);
  box-shadow: 0 -6px 24px rgba(20, 44, 84, 0.22);
}

.lst-carrello-barra {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  max-width: 860px;
  margin: 0 auto;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}

/* Il conteggio E' il pulsante che apre l'elenco: una freccetta separata da premere sarebbe
   un bersaglio da otto pixel su un vetro. */
.lst-carrello-apri {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.lst-carrello-freccia {
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-bottom: 6px solid rgba(255, 255, 255, 0.75);
  border-left: 5px solid transparent;
}

.lst-carrello-aperto .lst-carrello-freccia {
  transform: rotate(180deg);
}

/* L'unico pieno d'accento della pagina: qui l'azione e' una sola. */
.lst-carrello-invia {
  padding: 10px 18px;
  border-radius: 2px;
  background: var(--accento);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.lst-carrello-invia:hover {
  background: var(--accento-scuro);
}

/* IL PANNELLO DELL'ORDINE si apre verso l'alto e si ferma a meta' schermo: e' il promemoria
   di quello che si sta per mandare, non una seconda pagina. Oltre quell'altezza scorre.
   Fondo piu' scuro della striscia che lo apre, cosi' si vede che e' un piano sopra e non la
   continuazione della barra. */
.lst-carrello-elenco {
  max-height: 52vh;
  overflow-y: auto;
  background: var(--navy-scuro);
  animation: lst-apre-carrello 0.2s ease-out;
}

@keyframes lst-apre-carrello {
  from {
    max-height: 0;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lst-carrello-elenco {
    animation: none;
  }
}

/* La testata del pannello: quando e' aperto non si sta piu' leggendo il listino, si sta
   controllando la richiesta — e una schermata diversa vuole un titolo suo. */
.lst-carrello-testa {
  display: flex;
  max-width: 860px;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 auto;
  padding: 14px 16px 8px;
}

.lst-carrello-titolo {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Svuotare e' un'azione da poco quando l'ordine e' appena partito, e da tanto quando non lo
   e': resta una scritta e non un pulsante, cosi' non invita nessuno. */
.lst-carrello-svuota {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.lst-carrello-svuota:hover {
  color: #ffffff;
}

.lst-carrello-righe {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px 12px;
}

/* LA VOCE E' UN PULSANTE e apre la scheda dell'articolo; la × che toglie e' un pulsante suo,
   fuori dalla voce — un interattivo dentro un interattivo gli screen reader non lo espongono in
   modo prevedibile, e da tastiera la riga si prendeva tutto il fuoco. Entrambi spogliati di
   quello che il browser mette addosso a un `button`, perche' qui devono leggersi come una voce
   di elenco. */
.lst-carrello-riga {
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.lst-carrello-voce {
  display: flex;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  gap: 12px;
  align-items: center;
  padding: 10px 4px;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.lst-carrello-riga:last-child {
  border-bottom: 0;
}

.lst-carrello-voce:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* IL BOLLO DELLA QUANTITA', a sinistra e incolonnato: nel pannello si controlla quanto si sta
   per chiedere, e i numeri in fondo a righe di lunghezza diversa vanno cercati uno per uno.
   Numero sopra, unita' sotto: cosi' il bollo resta della stessa larghezza con "3 kg" e con
   "12 casse", e la colonna non balla. */
.lst-carrello-bollo {
  display: flex;
  width: 46px;
  height: 46px;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: var(--accento);
  line-height: 1.05;
}

.lst-carrello-bollo b {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.lst-carrello-bollo span {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.lst-carrello-testi {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
}

.lst-carrello-nome {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Le lavorazioni sotto il nome, piu' tenui: sono la seconda meta' della richiesta, e sulla
   stessa riga del nome si sarebbero lette come parte del prodotto. */
.lst-carrello-note {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.66);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lst-carrello-gallone {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.42);
}

/* La × sta staccata dal resto e non e' un pulsante dentro un pulsante: cancellare per sbaglio
   una riga che si voleva solo correggere e' il modo piu' veloce di far rifare tutto. */
.lst-carrello-togli {
  display: flex;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.lst-carrello-togli:hover {
  background: rgba(255, 255, 255, 0.26);
  color: #ffffff;
}

/* Il fondo pagina si alza dell'altezza della striscia mentre il carrello e' aperto: senza,
   l'ultima riga del listino e il piede restano coperti da lei. */
.lst-con-carrello .lst-nota {
  padding-bottom: 76px;
}

/* SU CARTA E NELL'ANTEPRIMA DEL LINK non esiste niente di tutto questo. */
@media print {
  .lst-cella-ordine,
  .lst-col-ordine,
  .lst-ordine,
  .lst-carrello {
    display: none;
  }
}

.lst-scatto .lst-cella-ordine,
.lst-scatto .lst-col-ordine,
.lst-scatto .lst-ordine,
.lst-scatto .lst-carrello {
  display: none;
}


/* =========================================================================
   LA SCHEDA DELLA RIGA: sale dal basso, tiene quantita', unita' e lavorazioni.
   E' l'unico posto della pagina dove si DECIDE qualcosa invece di leggere, e
   si vede: fondo scuro in testa, numero grande in mezzo, un solo pieno di
   colore in fondo. Sale dal basso perche' sul telefono la meta' bassa dello
   schermo e' l'unica che il pollice raggiunge senza cambiare presa.
   ========================================================================= */

.lst-scheda {
  width: 100%;
  max-width: 520px;
  /* `auto auto 0` incolla il foglio al bordo basso: un dialog nasce centrato, e centrato
     avrebbe messo i comandi nella zona dello schermo che si raggiunge peggio. */
  margin: auto auto 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--foglio);
  box-shadow: 0 -10px 40px rgba(12, 22, 48, 0.35);
  color: var(--navy);
}

/* Dove il `<dialog>` non e' implementato (iOS prima della 15.4) l'elemento e' sconosciuto e il
   browser ne mostra i figli in mezzo alla pagina: in fondo al listino compariva un pannello
   sempre aperto, col nome vuoto e le sei lavorazioni. Una riga, e il degrado sparisce. */
.lst-scheda:not([open]) {
  display: none;
}

.lst-scheda[open] {
  animation: lst-sale 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lst-sale {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

.lst-scheda::backdrop {
  background: rgba(12, 22, 48, 0.6);
  backdrop-filter: blur(2px);
}

@media (prefers-reduced-motion: reduce) {
  .lst-scheda[open] {
    animation: none;
  }
}

/* LA TESTATA E' SCURA e taglia la scheda in due: sopra la merce di cui si parla, sotto le
   scelte da fare. Il navy e' quello del marchio, l'alone d'accento in alto a destra e' il
   colore del listino da cui si e' arrivati — un filo di identita' senza tingere tutto. */
.lst-scheda-testa {
  position: relative;
  padding: 10px 18px 16px;
  background: var(--navy);
  background-image: radial-gradient(120% 140% at 100% 0%, var(--accento) 0%, transparent 55%);
  color: #ffffff;
}

/* La maniglia: su ogni telefono quella barretta vuol dire "questo foglio si chiude tirandolo
   giu'". E' l'unica istruzione che si puo' dare senza scrivere una parola. */
.lst-scheda-maniglia {
  display: block;
  width: 38px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
}

.lst-scheda-intestazione {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.lst-scheda-identita {
  min-width: 0;
}

.lst-scheda-nome {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

/* Quanto ne resta, ripetuto qui sotto il nome: nella scheda la riga del listino non si vede
   piu', e la quantita' da chiedere si decide guardando quella. Verde anche sul fondo scuro,
   perche' e' lo stesso segnale della riga — cambiare colore all'informazione quando cambia
   lo sfondo vuol dire farla sembrare un'altra cosa. */
.lst-scheda-disponibile {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 8px 0 0;
  padding: 4px 10px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  color: #8ff0b8;
  font-size: 12px;
  font-weight: 600;
}

.lst-scheda-disponibile::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  content: "";
}

.lst-scheda-chiudi {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.lst-scheda-chiudi:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lst-scheda-corpo {
  padding: 0 0 calc(18px + env(safe-area-inset-bottom));
}

.lst-scheda-titoletto {
  margin: 20px 18px 10px;
  color: var(--navy-tenue);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lst-scheda-facoltativa {
  margin-left: 6px;
  color: var(--grigio-logo);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* LA QUANTITA' E' IL NUMERO PIU' GRANDE DELLA SCHERMATA, con i due tasti tondi ai lati e
   niente attorno: incastrato fra due rettangoli grigi si leggeva come il campo di un modulo,
   e invece e' il dato che si sta decidendo. */
.lst-scheda-quantita {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 18px;
}

.lst-scheda-tasto {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  padding: 0;
  border: 1.5px solid var(--accento);
  border-radius: 50%;
  background: var(--foglio);
  color: var(--accento);
  font-family: inherit;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.lst-scheda-tasto:hover {
  background: var(--accento-velo);
}

.lst-scheda-tasto:active {
  transform: scale(0.9);
  background: var(--accento);
  color: #ffffff;
}

.lst-scheda-numero {
  flex: 1 1 auto;
  color: var(--navy);
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: center;
}

/* LE UNITA' SONO UN INTERRUTTORE A TRE POSIZIONI, e si vede dalla FORMA prima che dal
   colore: un unico blocco diviso in tre. Le lavorazioni qui sotto invece sono pulsanti
   separati, perche' si sommano. Erano disegnate uguali, e uguali sembravano due liste dove
   si puo' fare la stessa cosa. */
.lst-scheda-unita {
  display: flex;
  gap: 3px;
  margin: 0 18px;
  padding: 3px;
  border-radius: 8px;
  background: #eef2f8;
}

/* Lo stile e' completo qui e non condiviso con le lavorazioni: le due cose si somigliavano in
   tutto tranne che nel significato, e la classe comune finiva per riscrivere il fondo
   dell'interruttore — con la posizione accesa indistinguibile dalle altre due. */
.lst-scelta-unita {
  flex: 1 1 0;
  padding: 10px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--navy-tenue);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}

.lst-scelta-unita:active {
  transform: scale(0.97);
}

.lst-scelta-unita.lst-scelta-attiva {
  background: var(--foglio);
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(20, 44, 84, 0.18);
}

/* Nell'interruttore la spunta non serve: la posizione dice gia' quale delle tre e' vera. */
.lst-scelta-unita.lst-scelta-attiva::before {
  content: none;
}

.lst-scheda-nota {
  margin: 9px 18px 0;
  color: var(--grigio-logo);
  font-size: 11.5px;
  line-height: 1.35;
}

/* LE LAVORAZIONI si sommano, e sono pulsanti separati con la loro spunta. Accese prendono il
   colore del listino: sono la cosa che si aggiunge alla merce, ed e' giusto che si vedano
   accanto al nome del prodotto anche quando la scheda e' chiusa. */
.lst-scheda-lavorazioni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 18px;
}

.lst-scelta {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid #dce3ed;
  border-radius: 6px;
  background: var(--foglio);
  color: var(--navy);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.14s ease, border-color 0.14s ease;
}

.lst-scelta:active {
  transform: scale(0.96);
}

.lst-scelta-lavorazione.lst-scelta-attiva {
  border-color: var(--accento);
  background: var(--accento);
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(20, 44, 84, 0.18);
}

/* La spunta compare solo sulla scelta presa: su un fondo pieno di colore serve un secondo
   segno, perche' chi non distingue bene i colori vede due rettangoli uguali. */
.lst-scelta-attiva::before {
  margin-right: 7px;
  content: "✓";
  font-size: 11px;
}

.lst-scheda-piede {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin: 24px 18px 0;
}

/* "Togli" non e' un pulsante rosso: e' una scelta, non un errore. Il rosso qui avrebbe
   gridato piu' di "Fatto", che e' quello che si preme quasi sempre. */
.lst-scheda-togli {
  padding: 12px 0;
  border: 0;
  background: transparent;
  color: var(--navy-tenue);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.lst-scheda-fatto {
  flex: 1 1 auto;
  max-width: 230px;
  padding: 15px 20px;
  border: 0;
  border-radius: 6px;
  background: var(--accento);
  box-shadow: 0 4px 14px rgba(20, 44, 84, 0.22);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.lst-scheda-fatto:hover {
  background: var(--accento-scuro);
}

.lst-scheda-fatto:active {
  transform: scale(0.985);
}

/* Da schermo grande la scheda smette di essere un foglio agganciato al bordo e torna una
   finestra: in mezzo a 1400px un pannello incollato in basso sembrerebbe caduto. */
@media (min-width: 721px) {
  .lst-scheda {
    margin: auto;
    border-radius: 12px;
  }

  .lst-scheda-maniglia {
    display: none;
  }

  .lst-scheda-testa {
    padding-top: 16px;
  }
}

@media print {
  .lst-scheda {
    display: none;
  }
}

/* =========================================================================
   IL DITO, NON LA LARGHEZZA. Alcune regole non dipendono da quanto e' largo
   lo schermo ma da come lo si tocca — e un telefono girato in orizzontale e'
   largo come un portatile.
   ========================================================================= */

@media (pointer: coarse) {
  /* SEDICI PIXEL, non uno di meno: sotto quella misura iOS ingrandisce la pagina appena si
     tocca un campo di testo, e da quello zoom il listino non torna piu' indietro da solo.
     Legata alla larghezza, la regola saltava proprio col telefono in orizzontale. */
  .lst-cerca-campo {
    font-size: 16px;
  }
}