/* Foglio di stile del negozio — provvisorio, ma non brutto.
   Verrà sostituito da quello condiviso con oceanlife.it.

   ⭐⭐ I COLORI STANNO TUTTI QUI SOTTO, IN VARIABILI, E NESSUNO È SCRITTO
   DENTRO UNA REGOLA — e questa non è più una buona intenzione: la pretende
   `strumenti/prova-token-colore.php`, che diventa rosso il giorno che qualcuno
   ne scrive uno a mano, e lo dice per nome.

   ⚠️ Fino al 6 settembre 2026 qui c'era scritta la stessa frase, ed era falsa:
   155 usi di var() e **149 colori scritti a mano**, 61 diversi. Era vera il
   giorno in cui è stata scritta e ha smesso di esserlo senza che nessuno se ne
   accorgesse.
   💡 Una regola che vive in un commento non è una difesa: è un'intenzione che
   invecchia in silenzio.

   ⚠️ IL NOME DICE IL RUOLO, NON IL VALORE. `--carta` e `--su-colore` oggi
   valgono tutti e due #fff, e sono due token apposta: il primo è una
   superficie, il secondo è una scritta sopra un pieno colorato. Nel tema scuro
   il primo diventa buio e il secondo resta chiaro. Unirli «perché sono uguali»
   fa sparire le scritte dai pulsanti. */
:root{
  --acqua:#754992; --acqua-scura:#57366d; --sabbia:#d9d7dc; --inchiostro:#1c2530;
  /* =====================================================================
     LA TAVOLOZZA E' UNA SOLA, e l'8 settembre e' diventata grigia e viola.
     =====================================================================
     Chiesto da Simone: «bisognerebbe uniformare di piu' la grafica del
     catalogo con quella del carrello e della pagina personale», e poi, dopo
     aver visto la proposta, «uniformiamo anche il pannello di
     amministrazione con gli stessi colori». Quindi qui, in `:root`: la
     vetrina chiara, il carrello, la cassa, l'area cliente E il pannello.
     ⭐ Il tema Notte (piu' sotto) resta l'unica eccezione, ed e' voluta.

     ⚠️⚠️ IL FONDO E' IL PIU' SCURO CHE REGGE, e il limite l'ha detto la
     misura, non il gusto. Simone aveva chiesto «a meta' fra il catalogo e
     la proposta», cioe' `#858489`: li' il testo fa 4,17:1, i link 1,81:1 e
     l'anello del fuoco 1,32:1 — tre coppie sotto soglia, e non si aggiusta
     scurendo il viola.
     💡 ***Un grigio medio e' il peggior fondo possibile per una pagina: e'
     troppo scuro per il testo scuro e troppo chiaro per quello chiaro.***
     Il muro sta a `#d5d3d8`; questo fondo e' quattro livelli sopra, e il
     banco il muro **se lo calcola** invece di ricordarselo.

     ⭐ E i cinque ruoli del colore d'azione non si toccano: restano
     `var(--acqua)`, e cambiando `--acqua` qui li seguono tutti. La `var()`
     si risolve **dove la dichiarazione sta** — qui — quindi funziona; e' il
     motivo per cui una tavolozza sola e' anche piu' semplice di due.
     ===================================================================== */

  /* ⛔ `--grigio` E' STATO SCURITO l'8 settembre, da `#6b7683` a `#4f5860`, e
     non e' un ritocco: il testo attenuato sulla PAGINA faceva **4,20:1**, cioe'
     era sotto soglia da sempre. Nessuno l'aveva visto perche' la guardia dei
     contrasti misurava `--grigio` su `--carta` (4,62:1) e **non su `--sabbia`**
     — e il testo attenuato sta anche fuori dalle schede: i sottotitoli, le
     note, «nessun risultato». Adesso fa **5,08:1** sulla pagina e **7,25:1**
     su una scheda, e la coppia mancante e' stata aggiunta a
     `Tavolozza::COPPIE`.
     ⚠️ Il valore e' `#4f5860` e non `#566069` perche' il fondo si e'
     scurito nello stesso giro: su `#d9d7dc` il primo fa 5,08:1, il secondo
     si fermava a 4,49 — un centesimo sotto. *Due modifiche nello stesso
     giro si misurano insieme, non una alla volta.*
     💡 ***Una guardia trova i difetti nelle coppie che qualcuno ha elencato:
     quelle fuori dall'elenco non sono sane, sono non guardate.*** */
  --grigio:#4f5860; --bordo:#e3dfe9; --ok:#1a7f5a; --no:#a32b2b; --attenzione:#9a6a00;

  /* ⭐ I COLORI CHE PRIMA ERANO SPARSI NELLE REGOLE (v1.155).
     Il nome dice il RUOLO, non il valore: `--carta` e `--su-colore`
     oggi sono tutti e due bianchi, ma il primo e' una superficie e il
     secondo e' una scritta sopra un pieno colorato — nel tema scuro il
     primo diventa buio e il secondo resta chiaro.
     💡 Due cose che oggi hanno lo stesso valore ma cambiano per ragioni
     diverse non sono la stessa cosa: sono due cose che si somigliano. */
  /* ⛔ `--acqua-chiara` e' STATO TOLTO l'8 settembre, e non e' una
     pulizia: era il colore di `.collegamento`, cioe' un colore da fondo
     scuro usato sulla carta bianca — 1,28:1, invisibile. Corretto il
     colore, il token non serviva piu' a nessuno, e il §3 di
     `prova-token-colore` (ogni token definito e' usato) l'ha detto subito.
     💡 *Un token che nessuno usa e' una risposta a una domanda che non
     esiste piu'.* */
  --acqua-cupa:#3f2a52;
  --acqua-tenue:#ece3f3;
  --acqua-velo:#f6f1fa;
  --ardesia:#33505c;
  --ardesia-chiara:#5a6b73;
  --ardesia-scura:#40525c;
  --ardesia-tenue:#9aa7ad;
  --attenzione-orlo:#e8cf95;
  --attenzione-velo:#fffaf0;
  --attesa-testo:#8a6100;
  --attesa-velo:#fff8e8;
  --bordo-campo:#cfc7dc;
  --bordo-carrello:#eef2f5;
  --bordo-cartella:#c7cfd6;
  --bordo-freddo:#d7dee3;
  --bordo-paniere:#e6ecf0;
  --bordo-riquadro:#e3e9ed;
  --carta:#fff;
  --carta-alzata:#fbf9fd;
  --catalogo-orlo:#d3bde6;
  --catalogo-velo:#f4eefb;
  --clp-attenzione:#8a5a00;
  --clp-pericolo:#b3261e;
  --collaudo-testo:#6b4c00;
  --collaudo-velo:#fff3d6;
  --due-aziende-orlo:#e8a33d;
  --due-aziende-velo:#fff8ec;
  --editor-orlo:#cfd8e3;
  --errore-orlo:#f3c7c7;
  --errore-velo:#fdecec;
  --fondo-spento:#e9edef;
  --gruppo-orlo:#dcdcd6;
  --gruppo-velo:#f6f4ee;
  --info-orlo:#ddcdec;
  --info-velo:#f4eefb;
  --linguette-orlo:#e3ded3;
  --nebbia:#f8f6fb;
  --nebbia-editor:#f6f8fa;
  --nebbia-galleria:#f4f7f8;
  --nebbia-premuta:#f0ecf6;
  --ok-orlo:#c2e3d3;
  --ok-velo:#eaf6f0;
  --orlo-spento:#ddd6e6;
  /* ⛔⛔ Era `#0b6` (cioe' #00bb66), e col numero bianco sopra faceva
     **2,53:1** — sotto perfino il 3:1 del testo grande, mentre quel numero e'
     piccolo. Non era ne' «voluto» ne' un troncamento: era un colore che
     nessuna guardia guardava, perche' `--pallino` non stava nell'elenco
     `Tavolozza::COPPIE`. Adesso c'e', e questa riga e' la conseguenza.
     ⚠️ Le sue prime tre cifre erano quelle di `#0b6e8a`, il colore del sito
     **di allora**: dopo la v1.162 («una tavolozza sola») quel verde era rimasto
     l'unico colore fuori tavolozza di tutto il foglio.
     ⭐ Adesso e' il viola della tavolozza: **6,72:1**, e il tema Notte il viola
     ce l'aveva gia'. */
  --pallino:var(--acqua);
  --pericolo:#a4262c;
  --pericolo-premuto:#7d1d22;
  --scelta-forte:#1f3864;
  --scelto:#653e91;
  --su-colore:#fff;
  --testo-spento:#7a8a91;


  /* ⭐⭐ I CINQUE RUOLI DEL COLORE D'AZIONE (v1.156).
     `--acqua` era usata come FONDO di un pulsante, come TESTO di un link e
     come BORDO del fuoco: tre mestieri con un nome solo. Nel tema chiaro
     funzionava; sullo scuro no — il viola del marchio va bene sotto una
     scritta bianca (6,72:1) e non va bene COME scritta (2,66:1).
     ⚠️ Qui i cinque nomi puntano ai due vecchi: nel tema chiaro non cambia
     un pixel, ed e' dimostrato. A cambiare sara' solo il tema scuro. */
  --azione:var(--acqua);
  --collegamento:var(--acqua);
  --orlo-azione:var(--acqua);
  --azione-premuta:var(--acqua-scura);
  --titolo:var(--acqua-scura);

  --raggio:10px; --ombra:0 1px 3px rgba(16,32,48,.08), 0 6px 18px rgba(16,32,48,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--sabbia);color:var(--inchiostro);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* ⛔⛔ I CONTROLLI NON EREDITANO IL COLORE DEL TESTO, E QUESTA RIGA LO IMPONE.
   Trovato da Simone il 7 settembre guardando la vetrina scura: la tendina delle
   lingue si leggeva NERA su fondo scuro. Misurato sulla sua schermata: le
   lettere di «Italiano» erano `#000000` su `#1f1d25`, cioe' **1,26:1**, e il
   segnaposto del campo di ricerca `#0e0d11`, cioe' **1,16:1**.

   La causa non era una svista in un punto: `<input>`, `<select>`, `<button>` e
   `<textarea>` NON ereditano `color` dal genitore — se non glielo si dice, il
   browser mette il suo nero. Nel foglio c'erano **nove** regole che davano lo
   sfondo a un controllo senza dargli il colore, e a funzionare era solo quella
   che se l'era ricordato (`.per-pagina select`, con `color:var(--inchiostro)`:
   misurata 13,57:1, mentre la gemella `.lingua select` faceva 1,26:1).

   ⭐ Percio' la correzione NON e' aggiungere il colore in nove punti: e' questa
   riga, che lo fa per tutti — compresi i controlli che nessuno ha ancora
   stilato e quelli che qualcuno stilera' domani.
   💡 ***Una regola che va ricordata in nove posti e' una regola che al decimo
   non c'e'.***
   ⚠️ `inherit` e non un token: cosi' un controllo dentro una barra colorata
   prende l'inchiostro DI QUELLA barra, e le regole che dichiarano un colore
   loro (i pulsanti pieni, con `--su-colore`) continuano a vincere perche'
   vengono dopo. */
input,select,textarea,button{color:inherit}

/* ⭐ E la meta' che il CSS da solo non copre: cio' che disegna il BROWSER.
   La tendina aperta di un `<select>`, le barre di scorrimento, le frecce di un
   campo numerico e il riempimento automatico li dipinge il browser, non noi, e
   senza questa dichiarazione li fa CHIARI anche su una pagina scura.
   ⚠️ Si dichiara per tema, non una volta sola: la vetrina scura e' scura, tutto
   il resto — pannello, carrello, cassa, area cliente — resta chiaro. */
:root{color-scheme:light}
body.centrato{display:grid;place-items:center;min-height:100vh}
.contenitore{max-width:900px;margin:0 auto;padding:2rem 1.25rem}
h1{font-size:1.5rem;margin:0 0 .35rem}
h2{font-size:1.05rem;margin:0 0 .85rem;color:var(--titolo)}
a{color:var(--collegamento)}
.sottotitolo{color:var(--grigio);margin:.25rem 0 1.25rem}

.scheda{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  box-shadow:var(--ombra);padding:1.5rem;margin-bottom:1.25rem}
.scheda--stretta{max-width:460px;margin-inline:auto}

.barra{background:var(--azione-premuta);color:var(--su-colore);padding:.7rem 1.25rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.marchio{font-weight:600;letter-spacing:.02em}
.barra__destra{display:flex;align-items:center;gap:.75rem;font-size:.9rem}
/* ⛔⛔ IL TESTO ATTENUATO DENTRO UNA BARRA PIENA NON PUO' USARE `--grigio`:
   quel token e' pensato per stare su una superficie CHIARA. Nella barra del
   pannello il numero di versione faceva **1,35:1** sul viola — e non e' un
   difetto nato oggi: col verdazzurro faceva 1,89:1, cioe' era gia' illeggibile
   e nessuno l'aveva visto. L'ha trovato una pagina disegnata in un browser,
   non un banco: la coppia «attenuato dentro un pieno colorato» non stava
   nell'elenco della guardia, perche' nessuno l'aveva pensata.
   ⭐ Si riusa `--acqua-tenue`, che e' gia' il colore delle voci del menu sulla
   STESSA barra (7,82:1): un ruolo che esisteva, applicato dove mancava —
   invece di un token nuovo che vorrebbe dire un'altra cosa da vestire nei temi.
   💡 ***Un colore «attenuato» non e' un colore: e' una relazione col fondo, e
   cambiando fondo va rifatta.*** */
.barra .attenuato{color:var(--acqua-tenue)}
.in-linea{display:inline}
/* ⛔⛔ IL COLORE QUI ERA `--acqua-chiara`, ED E' UN COLORE DA FONDO SCURO.
   Misurato in un browser vero l'8 settembre: `#cfe8f1` su carta bianca fa
   **1,28:1** — cioe' il testo non si vede. Non era un dettaglio di stile: nel
   tema chiaro sparivano «torna al carrello» (cassa), «vedi l'ordine»
   (cassa-fatto), «torna» (recesso), i collegamenti agli ordini nell'area
   cliente, e i due `<button type=button>` di avviso-dati e della pagina
   colori. Nel tema scuro lo stesso token fa `#d6c4e6` e si legge benissimo:
   ecco perche' la svista poteva durare — la vetrina scura, che e' quella che
   guardavamo, era a posto.
   ⭐ Adesso usa `--collegamento`, che e' il token dei collegamenti veri
   (`a{color:var(--collegamento)}` due righe piu' su) ed e' contrastato in
   tutti e due i temi: **5,81:1** chiaro, **5,85:1** scuro.
   💡 ***Un token con «chiaro» nel nome e' un colore PER il buio: usarlo sulla
   carta bianca e' scriverlo in bianco.*** */
.collegamento{background:none;border:0;color:var(--collegamento);text-decoration:underline;cursor:pointer;font:inherit;padding:0}

.riquadri{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-bottom:1.25rem}
.riquadro{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:1rem;box-shadow:var(--ombra);color:var(--grigio);font-size:.9rem}
.riquadro--attenzione{border-color:var(--attenzione-orlo);background:var(--attenzione-velo)}
.numero{display:block;font-size:1.9rem;font-weight:650;color:var(--inchiostro);line-height:1.1}
.riquadro small{display:block;margin-top:.2rem;color:var(--grigio)}

table.dati{width:100%;border-collapse:collapse;font-size:.94rem}
table.dati th,table.dati td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--bordo);vertical-align:top}
table.dati thead th{color:var(--grigio);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
table.dati tr:last-child td{border-bottom:0}

.segno{font-weight:600}
.segno--ok{color:var(--ok)} .segno--no{color:var(--no)} .segno--attenzione{color:var(--attenzione)}
/* ⭐ Il quarto: «in attesa» — «altro listino» e «dal <data>» nella scheda cliente.
   Senza di lui, fra tre stati colorati ce n'era uno che si vedeva come testo normale. */
.segno--attesa{color:var(--attesa-testo)}
.vuoto{color:var(--grigio);font-style:italic;margin:0}

label{display:block;margin:.9rem 0 .3rem;font-size:.88rem;color:var(--grigio)}
input[type=text],input[type=password]{width:100%;padding:.6rem .7rem;border:1px solid var(--bordo);
  border-radius:8px;font:inherit;background:var(--carta)}
input:focus{outline:2px solid var(--orlo-azione);outline-offset:1px;border-color:var(--orlo-azione)}
/* ⭐⭐ QUESTA REGOLA E' STATA ROVESCIATA il 9 settembre 2026 (T-175), e la
   storia di com'era serve a chi aggiunge un pulsante domani.

   Fino a ieri diceva anche `margin-top:1.15rem;width:100%`: due parole scritte
   per **il pulsante grande sotto un campo** che valevano invece per **ogni**
   `button[type=submit]` del sito. Un pulsante messo in una riga accanto a del
   testo nasceva largo quanto la riga e spostato in basso, e andava rimesso a
   posto a mano. Chi se l'era dimenticato scendeva: «Cambia» e «Applica» il 7
   settembre, e li ha visti Simone.

   ## ⭐⭐ E la misura ha detto una cosa che la scheda non sapeva

   La voce prevedeva «118 pulsanti in 58 modelli». Misurando nel browser i
   settecentosessanta submit che il negozio disegna davvero, la spartizione
   era un'altra:

     · `width:100%` vinceva **4 volte** — «Salva i colori della vetrina»,
       «Aggiorna il carrello», «Ricalcola le spese» e il pulsante della CASSA.
       In tutti gli altri posti un `width:auto` l'aveva gia' disfatto;
     · `margin-top:1.15rem` vinceva **644 volte**, e **637** di quelle stanno
       dentro `.scheda form`, cioe' i moduli in colonna del pannello.

   ⛔⛔ E come si e' scoperto che erano quattro e non uno: il primo giro ne
   trovava **uno solo**, perche' aveva misurato `/cassa` e `/carrello` col
   carrello **VUOTO** — e quella non e' la cassa, e' la pagina che dice «il tuo
   carrello e' vuoto». Il pulsante piu' importante del negozio non era stato
   guardato nemmeno una volta.
   💡 ***Una pagina misurata nello stato sbagliato non e' una misura prudente:
   e' la misura di un'altra pagina.***

   💡 ***La meta' rumorosa della trappola era gia' morta, e nessuno lo sapeva
   perche' la si leggeva invece di misurarla.***

   ⭐ Percio' la correzione non e' «una classe per 118 pulsanti»: il margine si
   e' spostato DOVE lo vogliono (`.scheda form button[type=submit]`, sette
   righe piu' giu'), la larghezza piena e' diventata `.bottone--pieno` e la
   porta un pulsante solo, e tutte le righe che disfacevano il predefinito —
   nove, piu' il cerotto `.bottone--riga` della v1.161 — sono sparite perche'
   non c'e' piu' niente da disfare.
   ⚠️ Restano fuori sette pulsanti che il margine lo prendevano dal predefinito
   pur stando fuori da una scheda: cinque sono `--piccolo` dentro una riga e il
   margine NON lo volevano (e adesso non ce l'hanno). Sono elencati nella
   scheda della v1.174.

   💡 ***Un valore predefinito che va disfatto e' un valore predefinito
   sbagliato: prima o poi qualcuno non lo disfa.*** Adesso il predefinito e' il
   pulsante normale, e chi vuole qualcosa di piu' lo chiede per nome. */
button[type=submit]{padding:.65rem;border:0;border-radius:8px;
  background:var(--azione);color:var(--su-colore);font:inherit;font-weight:600;cursor:pointer}
button[type=submit]:hover{background:var(--azione-premuta)}

/* ⛔⛔ `button.collegamento`, E STA QUI SOTTO PER FORZA: la sua ragione e' la
   SPECIFICITA', e la sua POSIZIONE e' parte della correzione.
   `button[type=submit]` (qui sopra) vale 0,1,1 — un tipo piu' un attributo — e
   `.collegamento` vale 0,1,0. Su un `<button type="submit" class="collegamento">`
   vinceva quindi il pulsante grande, e la classe non toccava NIENTE.
   ⚠️⚠️ Il risultato non era un disallineamento: «esci», che deve sembrare un
   collegamento, si disegnava come **il pulsante piu' importante della pagina** —
   viola pieno, largo, e piu' basso di 1,15rem del testo accanto. L'ha visto
   Simone il 7 settembre («l'unico disallineato e' il pulsante esci»), e vale in
   **sette** punti dei modelli.
   ⭐ `button.collegamento` vale 0,1,1 come il rivale: a parita' vince **chi
   viene dopo**, quindi deve stare DOPO `button[type=submit]`. La prima stesura
   l'aveva messa prima e non cambiava niente — misurato in un browser vero.
   ⚠️ E NON si alza la specificita' a 0,2,1 (`button[type=submit].collegamento`):
   scavalcherebbe anche `.testata__conto .collegamento` (0,2,0), che in testata
   decide il colore. *Vincere una gara di specificita' vuol dire vincerle tutte,
   comprese quelle che non si voleva vincere.*
   💡 ***Una classe che non alza la specificita' abbastanza non e' una classe
   debole: e' una classe che non c'e'.*** */
/* ⚠️ 8 settembre: dopo la v1.161 **nessun `<button type=submit>` porta piu'
   questa classe** — i sette sono diventati pulsanti veri, perche' Simone li
   voleva pulsanti. La regola resta lo stesso, e di proposito: e' la sicura
   della trappola qui sopra, e toglierla vorrebbe dire riarmarla per il
   prossimo che scrivera' `class="collegamento"` su un submit. Continua a
   servire ai due `<button type="button">` (avviso-dati, pagina colori), che
   `button[type=submit]` non tocca ma che di questa regola prendono il colore.
   */
button.collegamento{margin:0;width:auto;padding:0;background:none;border:0;
  border-radius:0;color:var(--collegamento);font:inherit;font-weight:400}
/* ⚠️⚠️ UN PULSANTE SPENTO DEVE SEMBRARE SPENTO, e senza queste due righe non lo
   sembra: `button[type=submit]` gli mette addosso l'acqua e il bianco, e il
   grigio che il browser dà da solo a un `disabled` non ha nessuna possibilità
   di vincere su una regola dichiarata. Il pulsante «Forza il cambio di
   anagrafica» è visibile sempre e premibile solo quando i dati divergono: se
   spento e acceso si disegnassero uguali, la decisione di mostrarlo sempre
   diventerebbe una promessa che la pagina non mantiene.
   ⚠️ `:hover` serve anche qui, o il pennello di `button[type=submit]:hover`
   ridipinge il pulsante spento appena ci si passa sopra col mouse — è la
   stessa classe di guasto dei modificatori inerti del 31 agosto.
   ⚠️ E la specificità è scelta, non capitata: `.scheda form
   button[type=submit]` è (0,2,2) e vive dentro le schede dell'area cliente,
   cioè proprio dove sta questo pulsante; `button[type=submit]:disabled` è
   (0,2,1) e perderebbe su padding e larghezza — che infatti NON si toccano
   qui: si tocca solo il colore, che nessuno degli altri due dichiara insieme
   a `:disabled`. */
button[type=submit]:disabled,
button[type=submit]:disabled:hover{background:var(--fondo-spento);color:var(--testo-spento);cursor:not-allowed}

.avviso{padding:.7rem .9rem;border-radius:8px;margin:0 0 1rem;font-size:.94rem}
.avviso--errore{background:var(--errore-velo);color:var(--no);border:1px solid var(--errore-orlo)}
.avviso--info{background:var(--info-velo);color:var(--titolo);border:1px solid var(--info-orlo)}
.codice-errore{font-size:3rem;font-weight:700;color:var(--bordo);margin:0;line-height:1}

.minuto{margin:1rem 0 0;font-size:.88rem;text-align:center}
.minuto a{color:var(--grigio)}
.minuto a:hover{color:var(--collegamento)}

/* Campo password con il pulsante mostra/nascondi */
.campo-password{position:relative;display:block}
.campo-password input{padding-right:5.4rem}
.occhio{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);
  border:0;background:transparent;color:var(--grigio);font:inherit;font-size:.82rem;
  cursor:pointer;padding:.3rem .45rem;border-radius:6px}
.occhio:hover{color:var(--collegamento);background:var(--acqua-velo)}
.occhio:focus-visible{outline:2px solid var(--orlo-azione);outline-offset:1px}

/* --- schermate dell'import ------------------------------------------ */
.nota{color:var(--grigio);font-size:.88rem;margin:.4rem 0 1.25rem}
.attenuato{color:var(--grigio)}
/* La colonna scorciatoia «IT · SM · VA» nella griglia dei costi Corals: si
   distingue perche' non e' una colonna di dati ma un campo che scrive altrove. */
.dati--griglia th.gruppo,.dati--griglia td.gruppo{background:var(--gruppo-velo);
  border-left:2px solid var(--gruppo-orlo);border-right:2px solid var(--gruppo-orlo)}

/* Il nome del paese sotto il codice, nelle intestazioni della griglia dei
   costi: il codice e' il dato, il nome serve a riconoscerlo a colpo d'occhio.
   `normal` sul peso perche' sta dentro un `th`, che sarebbe grassetto. */
.blocco{display:block;font-weight:normal;text-transform:none;letter-spacing:0}

.monospazio{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86rem;
  word-break:break-all}
.briciole{margin:0 0 .3rem;font-size:.9rem}
.briciole a{color:var(--grigio)}
.marchio a{color:inherit;text-decoration:none}
.marchio a:hover{text-decoration:underline}
table.dati tr.riga--attenzione td{background:var(--attenzione-velo)}
table.dati--verticale th{width:9.5rem;color:var(--grigio);font-weight:600;font-size:.86rem}
.avviso--attesa{background:var(--attesa-velo);color:var(--attesa-testo);border:1px solid var(--attenzione-orlo)}
.pagine{margin:.9rem 0 0;font-size:.92rem;display:flex;flex-wrap:wrap;gap:.5rem}
.pagine strong{background:var(--azione);color:var(--su-colore);border-radius:6px;padding:.1rem .45rem}
.minuto-in-linea{float:right;font-size:.82rem;font-weight:400}
table.dati tr.riga--motivo td{padding-top:0;font-size:.86rem}
table.dati tr.riga--motivo + tr td{border-top:0}
.numerico{text-align:right;font-variant-numeric:tabular-nums}
table.dati th.numerico{text-align:right}
.mezzo{text-align:center} table.dati th.mezzo{text-align:center}
.interruttore{display:inline-flex;align-items:center;gap:.35rem;margin:0;cursor:pointer}
.interruttore input{width:1.05rem;height:1.05rem;accent-color:var(--orlo-azione);cursor:pointer}
.interruttore span{font-size:.85rem;color:var(--grigio)}
table.dati tr.riga--figlia td:first-child{padding-left:1.3rem}
.scheda form button[type=submit]{margin-top:1.15rem;padding:.6rem 1.6rem}

/* --- catalogo -------------------------------------------------------- */
.barra-ricerca{display:flex;gap:.5rem;align-items:center;margin:0 0 1.1rem;flex-wrap:wrap}
.barra-ricerca input[type=text]{flex:1 1 18rem;width:auto;padding:.5rem .65rem}
.barra-ricerca select{padding:.5rem .5rem;border:1px solid var(--bordo);border-radius:8px;
  font:inherit;background:var(--carta)}
.barra-ricerca button[type=submit]{padding:.5rem 1.1rem}
h1 small,h2 small{font-size:.62em;font-weight:400}
input.importo{width:5.2rem;padding:.28rem .4rem;text-align:right;font-variant-numeric:tabular-nums}
input.stretto{max-width:9rem}
table.dati input[type=checkbox]{width:1.05rem;height:1.05rem;accent-color:var(--orlo-azione);cursor:pointer}
.galleria{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.9rem}
.galleria figure{margin:0}
.galleria img{width:100%;height:110px;object-fit:contain;background:var(--nebbia-galleria);
  border:1px solid var(--bordo);border-radius:8px}
.galleria__vuota{height:110px;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:.78rem;color:var(--grigio);background:var(--attenzione-velo);
  border:1px dashed var(--attenzione-orlo);border-radius:8px;padding:.4rem}
.galleria figcaption{font-size:.72rem;color:var(--grigio);margin-top:.25rem;word-break:break-all}
h1 .monospazio{font-size:1.5rem;word-break:normal}
.scheda form .interruttore{display:flex;margin:1rem 0 .2rem}
.scheda form label:not(.interruttore){margin-top:1rem}
.navigazione{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.25rem}
.navigazione a{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);
  padding:.5rem .9rem;text-decoration:none;color:var(--inchiostro);font-size:.92rem}
.navigazione a:hover{border-color:var(--orlo-azione);color:var(--collegamento)}

/* ====================================================================
   La vetrina. Aggiunto in fase 3.
   Griglia semplice e nessun impianto: quando arrivera' il foglio condiviso
   con oceanlife.it, questa parte si butta senza toccare il resto.
   ==================================================================== */
.contenitore--largo,.testata .contenitore,.piede .contenitore{max-width:1180px}
/* La vetrina al 90% dello schermo (Simone, 15/8): stesso criterio del
   pannello — max() tiene i 1180px come pavimento, cosi' su uno schermo
   piccolo non si restringe rispetto a prima. La testata e il piede seguono,
   o il contenuto risulterebbe piu' largo della barra che lo sovrasta. */
.vetrina .contenitore{max-width:max(1180px,90vw)}
.vetrina .testata .contenitore,.vetrina .piede .contenitore,
.vetrina .testata__riga,.vetrina .menu__riga{max-width:max(1180px,90vw)}
/* Il pannello lavora su tabelle larghe: 80% dello schermo (Simone, 10/8).
   max() tiene i 900px come pavimento, cosi' su uno schermo piccolo non si
   restringe rispetto a prima. */
.pannello .contenitore{max-width:max(900px,80vw)}

.testata{background:var(--carta);border-bottom:1px solid var(--bordo)}
.testata__riga{display:flex;align-items:center;gap:1.25rem;padding:.9rem 1.25rem;max-width:1180px}
.logo{font-weight:700;font-size:1.25rem;color:var(--titolo);text-decoration:none;letter-spacing:.01em}
/* ⚠️ Il marchio si serve alto 96 px (Marchio::ALTEZZA) e si mostra alto 48:
   su uno schermo a densita' doppia un'immagine servita alla misura in cui
   si vede esce sgranata. `width:auto` perche' i due marchi non hanno la
   stessa proporzione, e `display:block` toglie lo spazio che la riga di
   testo lascia sotto un'immagine in linea. */
.logo--marchio{display:flex;align-items:center;line-height:0}
.logo--marchio img{display:block;height:48px;width:auto}
@media (max-width:600px){.logo--marchio img{height:36px}}
.cerca{flex:1;display:flex;gap:.4rem;margin:0}
.cerca input[type=search]{flex:1;padding:.55rem .7rem;border:1px solid var(--bordo);border-radius:8px;font:inherit}
.cerca button{padding:.55rem 1rem;border:0;border-radius:8px;
  background:var(--azione);color:var(--su-colore);font:inherit;font-weight:600;cursor:pointer}
.testata__conto{display:flex;align-items:center;gap:.75rem;font-size:.92rem}
/* ⚠️ Dall'8 settembre questa regola non ha piu' nessuno: «esci» era l'unico
   `.collegamento` della testata ed e' diventato un pulsante. Si tiene perche'
   e' il posto dove il colore dei collegamenti in testata si decide — se domani
   ne torna uno, lo trova gia' smorzato invece di gridare — e perche' il
   commento di `button.collegamento` la cita come la (0,2,0) da non
   scavalcare. Che oggi sia senza utenti sta scritto qui, e non si indovina. */
.testata__conto .collegamento{color:var(--grigio)}
/* Il selettore di lingua in testata (18 agosto). La tendina e' stretta di
   proposito: i nomi delle lingue sono corti e la testata ha gia' la ricerca,
   il carrello e l'accesso. `flex-shrink:0` perche' schiacciandosi il bottone
   «Cambia» finiva sotto la tendina su schermi stretti. */
.lingua{display:flex;align-items:center;gap:.3rem;flex-shrink:0}
.lingua select{font:inherit;font-size:.88rem;padding:.25rem .35rem;border:1px solid var(--bordo);
  border-radius:6px;background:var(--carta);max-width:9rem}
/* ⭐ Qui stavano `margin:0;width:auto`, e disfacevano il predefinito: senza
   quelle due parole «Cambia» scendeva di 1,15rem e stava piu' in basso del
   testo accanto — visto da Simone il 7 settembre. Dal 9 settembre (T-175) il
   predefinito non le impone piu', quindi non c'e' piu' niente da disfare e le
   due parole se ne sono andate. */
.lingua button{font:inherit;font-size:.85rem;padding:.28rem .6rem;
  border:1px solid var(--bordo);
  border-radius:6px;background:var(--nebbia);cursor:pointer;white-space:nowrap}
.lingua button:hover{background:var(--nebbia-premuta)}
.bottoncino{background:var(--azione);color:var(--su-colore)!important;padding:.4rem .75rem;border-radius:8px;
  text-decoration:none;font-weight:600;font-size:.88rem;white-space:nowrap}
.bottone{display:inline-block;background:var(--azione);color:var(--su-colore);padding:.6rem 1.1rem;border-radius:8px;
  text-decoration:none;font-weight:600}
.bottone:hover{background:var(--azione-premuta)}

/* ⚠️⚠️ `--piccolo` e `--spento` erano USATI in otto modelli del pannello e non
   esistevano. Una classe che il foglio di stile non conosce non da' errore da
   nessuna parte: Twig non la valida, il browser la ignora, e un banco che cerca
   la classe nell'HTML la TROVA — quindi resta verde. Risultato: ogni comando
   del pannello si disegnava grande e pieno, e «cancella» era identico a
   «spedito, avvisa il cliente». L'ha vista Simone guardando la pagina, il 30
   agosto — l'unica misura che poteva prenderla era guardare.
   💡 Lo stile piccolo esisteva gia', sotto un altro nome: `.bottoncino`, che
   usa solo la vetrina. Due nomi per la stessa idea, e il pannello aveva scelto
   quello mai definito. Qui si definisce il nome che i modelli gia' scrivono,
   invece di riscrivere trentasette modelli. */
.bottone--piccolo{padding:.4rem .75rem;font-size:.88rem}
/* ⚠️ Serve anche `:hover`, o il pennello di `.bottone:hover` (classe + pseudo,
   quindi piu' specifico) ridipingerebbe di acqua un pulsante smorzato appena
   ci passi sopra: sarebbe spento da fermo e principale al passaggio. */
.bottone--spento{background:var(--nebbia);color:var(--ardesia);border:1px solid var(--orlo-spento)}
.bottone--spento:hover{background:var(--nebbia-premuta);color:var(--ardesia)}
/* ⭐ `--pieno`: il pulsante che deve essere largo quanto il modulo che chiude.
   Fino al 9 settembre non era una classe: era il valore PREDEFINITO di ogni
   `button[type=submit]` del sito. ⚠️⚠️ E misurandolo prima di toglierlo e'
   venuto fuori che quel predefinito vinceva **una volta su settecentosessanta**
   — «Salva i colori della vetrina» — perche' in tutti gli altri posti qualcuno
   l'aveva gia' disfatto con un `width:auto`.
   💡 ***Un valore predefinito che nel 99,9% dei casi viene disfatto non e' un
   predefinito: e' una regola scritta al contrario, e il lavoro di disfarla lo
   paga chi scrive il pulsante numero 761.***
   ⚠️ Adesso la larghezza piena si CHIEDE, e chi la chiede si vede.
   ⭐ E la classe porta anche lo STACCO sopra, non solo la larghezza: quel
   pulsante li' e' «il pulsante che chiude un modulo in colonna», e le due cose
   vanno insieme. La prima stesura dava solo `width` e i tre pulsanti della
   vetrina — «Aggiorna il carrello», «Ricalcola le spese» e la CASSA — si sono
   incollati al campo sopra. Visto nel confronto prima/dopo, non dedotto. */
.bottone--pieno{margin-top:1.15rem;width:100%}
/* ⚠️⚠️ E il gemello, che NON e' un doppione. E' la lezione del 31 agosto:
   una classe che non vince e' una classe che non c'e'. `.bottone--pieno` da
   sola vale (0,1,0), e oggi le basta — nessun'altra regola dichiara la
   larghezza di un submit. Ma «oggi le basta» e' una condizione, non una
   proprieta': il giorno che qualcuno scrive `.scheda form button[type=submit]
   {width:auto}` per un caso suo, questa classe smette di funzionare in
   silenzio, e il pulsante della CASSA diventa stretto senza che niente lo
   dica.
   ⭐ `prova-scrittura` §3 pretende proprio questo per ogni modificatore usato
   su un submit — che il css nomini il caso — e la pretesa e' giusta. */
button[type=submit].bottone--pieno{margin-top:1.15rem;width:100%}

/* ⭐⭐⭐ IL ROVESCIO DELLA MEDAGLIA, e sta qui sotto per la SPECIFICITA'.
   Il margine adesso vive in `.scheda form button[type=submit]` (0,2,2), che e'
   il modulo in colonna del pannello. Ma dentro una scheda ci sono anche moduli
   IN LINEA — una casella di ricerca, un «esci» accanto al nome, un «Calcola»
   in fondo a una riga — e li' lo stacco sopra non lo vuole nessuno.
   ⛔ Le vecchie righe sparse (`.in-riga button[type=submit]`, 0,2,1) NON
   bastavano: perdevano contro (0,2,2), e «Calcola» e «Crea» delle spedizioni
   si staccavano di 1,15rem dalla riga. Misurato, non dedotto.
   ⭐ Questa vale (0,2,2) come la rivale e viene DOPO: a parita' vince chi
   viene dopo, che e' la stessa regola con cui `button.collegamento` sta sotto
   `button[type=submit]` piu' in su. Nessuna gara di specificita' vinta con la
   forza — vincerle tutte vuol dire vincere anche quelle che non si volevano.
   ⚠️⚠️ E c'e' `form.in-linea`, che non aveva MAI avuto una riga sua: da li'
   passano l'«esci» dell'area cliente (sei pagine) e le due caselle «cerca» del
   pannello, che stavano 1,15rem piu' in basso del testo che avevano accanto —
   lo stesso difetto che Simone aveva visto il 7 settembre su «Cambia», rimasto
   in altri otto posti perche' nessuno li aveva guardati.
   💡 ***Un difetto corretto dove qualcuno l'ha visto e' un difetto corretto in
   un posto: quello che lo trova negli altri sette e' un conto, non un occhio.*** */
form.in-riga button[type=submit],
form.in-linea button[type=submit],
.barra button[type=submit],
.barra-ricerca button[type=submit]{margin:0}

/* ⭐⭐ QUI STAVA `.bottone--riga`, e il 9 settembre e' stato tolto (T-175).
   Era un cerotto DICHIARATO dalla v1.161: serviva solo a disfare il
   `margin-top` che il predefinito metteva addosso a ogni pulsante, e la sua
   scheda diceva che il giorno del rovesciamento sarebbe diventato inutile.
   ⭐ E' successo: adesso un pulsante nasce senza margine, quindi un pulsante
   dentro una riga di testo non ha piu' niente da dichiarare. I sette modelli
   che lo scrivevano non lo scrivono piu'.
   💡 ***Un cerotto con una data di scadenza scritta sopra e' l'unico genere
   di cerotto che si toglie davvero.*** */

/* ⚠️⚠️⚠️ E DEFINIRLI NON BASTAVA: su un `<button>` non VINCEVANO.
   Simone, 31 agosto: «Ctrl-F5 non ha modificato la visualizzazione dei
   pulsanti». Misurato: il css del server e' identico a questo (stesso md5) e
   le due righe qui sopra ci sono — quindi la mia diagnosi «CSS vecchio in
   cache» era sbagliata. La causa e' la SPECIFICITA':

     .scheda form button[type=submit]   (0,2,2)  riga 107 — vince
     button[type=submit]                (0,1,1)  riga 50  — vince
     .bottone--piccolo / --spento       (0,1,0)  qui sopra — perde

   ⭐ E il segnale era in pagina: il comando «rimborso» E' diventato rosso,
   perche' quello e' un `<a>` — gli anchor non incontrano nessuna delle due
   regole di elemento. Un pulsante e un collegamento con le STESSE classi che
   si disegnano diversi erano la misura, e l'avevo letta come «meta' cache».

   ⚠️ Perche' NON si toccano invece le due regole di elemento (la forma piu'
   pulita sarebbe `button[type=submit]:not(.bottone)`): quelle danno
   `width:100%` a **38** pulsanti che dichiarano gia' `.bottone`, e fra loro
   c'e' il pulsante della CASSA. Escluderli lo farebbe diventare stretto — una
   modifica alla vetrina che nessuno ha chiesto, per riparare il pannello.
   💡 *Una correzione si misura dal suo raggio, non dalla sua eleganza.*

   ⚠️ Qui si sale di specificita' apposta — `button[type=submit].bottone.X` e'
   (0,3,1) e batte (0,2,2) — e si tocca **solo** cio' che porta gia' tutte e
   due le classi. E' una scelta fragile e va saputa: e' per questo che
   `prova-scrittura` §3 adesso pretende, per ogni modificatore usato su un
   `<button type=submit>`, che il css abbia un selettore che quel caso lo
   nomina. Il guardiano vecchio provava che il NOME esiste; non poteva provare
   che vince, ed e' esattamente il difetto che e' rimasto. */
button[type=submit].bottone.bottone--piccolo{padding:.4rem .75rem;font-size:.88rem}
button[type=submit].bottone.bottone--spento{background:var(--nebbia);color:var(--ardesia);
  border:1px solid var(--orlo-spento);font-weight:600}
button[type=submit].bottone.bottone--spento:hover{background:var(--nebbia-premuta);color:var(--ardesia)}
button[type=submit].bottone.bottone--pericolo{background:var(--pericolo);color:var(--su-colore)}
button[type=submit].bottone.bottone--pericolo:hover{background:var(--pericolo-premuto)}
/* ⭐ E questo l'ha trovato il guardiano NUOVO, un minuto dopo essere nato: e'
   il pulsante della CASSA, e non l'aveva chiesto nessuno. `--principale`
   dichiara `padding:.7rem 1.4rem` e non l'ha mai avuto, perche' la riga di
   elemento (0,1,1) batteva la classe (0,1,0) e imponeva `.65rem`. Il pulsante
   resta largo quanto il modulo (`width:100%` viene da li' e non si tocca):
   cambia **mezzo millimetro** di altezza, e la classe smette di mentire.
   💡 *Una difesa nuova non trova solo i difetti nuovi: trova quelli vecchi
   che nessuno guardava* — come l'impronta della configurazione il 25 agosto. */
button[type=submit].bottone.bottone--principale{padding:.7rem 1.4rem}
/* ⭐ E il gemello a (0,3,1) di `--riga` se n'e' andato con lui: esisteva
   perche' `.bottone--riga` da solo valeva (0,1,0) e perdeva su
   `button[type=submit]` (0,1,1), che il margine ce l'aveva scritto dentro.
   💡 *Meta' delle gare di specificita' di questo foglio si vincevano contro
   una riga sola. Tolta quella, le gare non si giocano.* */

.menu{background:var(--azione-premuta)}
.menu__riga{display:flex;gap:.25rem;padding:0 1.25rem;max-width:1180px;flex-wrap:wrap}
.menu a{color:var(--acqua-tenue);text-decoration:none;padding:.6rem .7rem;display:inline-block;font-size:.92rem}
.menu a:hover,.menu a.attivo{background:rgba(255,255,255,.12);color:var(--su-colore)}
.menu__voce{position:relative}
.menu__sotto{display:none;position:absolute;left:0;top:100%;background:var(--carta);border:1px solid var(--bordo);
  border-radius:0 0 var(--raggio) var(--raggio);box-shadow:var(--ombra);min-width:220px;z-index:20;padding:.3rem 0}
.menu__voce:hover .menu__sotto,.menu__voce:focus-within .menu__sotto{display:block}
.menu__sotto a{display:flex;justify-content:space-between;gap:1rem;color:var(--inchiostro);padding:.45rem .8rem}
.menu__sotto a:hover{background:var(--sabbia)}
.quanti{color:var(--grigio);font-size:.82rem}

.nastro-collaudo{margin:0;background:var(--collaudo-velo);border-bottom:1px solid var(--attenzione-orlo);color:var(--collaudo-testo);
  padding:.45rem 1.25rem;font-size:.88rem;text-align:center}

/* La fascia della modalità catalogo. ⚠️ Volutamente DIVERSA dal nastro di
   collaudo (che è giallo-avviso): questa non segnala un'anomalia, dice che una
   funzione è accesa. Un colore da errore su una cosa voluta insegna a ignorare
   i colori da errore. */
.nastro-catalogo{background:var(--catalogo-velo);border-bottom:1px solid var(--catalogo-orlo);color:var(--acqua-cupa);
  padding:.5rem 0;font-size:.9rem}
.nastro-catalogo .contenitore{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.nastro-catalogo form{margin:0}
.nastro-catalogo button{margin:0}

.apertura{margin-bottom:1.75rem}
.reparti{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem;margin-bottom:2rem}
.reparto{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);padding:.9rem 1rem;
  text-decoration:none;color:var(--inchiostro);box-shadow:var(--ombra)}
.reparto:hover{border-color:var(--orlo-azione)}
.reparto__nome{display:block;font-weight:600}
.reparto__quanti{display:block;color:var(--grigio);font-size:.85rem}

.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin-bottom:1.5rem}
.prodotto{background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--ombra)}
.prodotto__foto{display:block;aspect-ratio:1;background:var(--carta);display:grid;place-items:center;padding:.75rem}
.prodotto__foto img{max-width:100%;max-height:100%;object-fit:contain}
.prodotto__senzafoto{color:var(--bordo);font-weight:700;letter-spacing:.08em;font-size:.9rem}
.prodotto__senzafoto.grande{aspect-ratio:1;display:grid;place-items:center;font-size:1.6rem;
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio)}

/* ⭐⭐ IL SEGNAPOSTO COL SIMBOLO DELLA SOCIETA (7 settembre 2026, scelto da
   Simone): la boccetta per Ocean, il corallo per Corals. Il simbolo NON si
   disegna come immagine — si usa come **maschera**, e il colore lo mette
   `background-color`. Percio' del file conta solo la forma, e il segnaposto
   prende `--bordo`: lo stesso token che la parola usava qui, quindi la stessa
   presenza di prima e non un'aggiunta che grida.
   ⭐ E' anche il motivo della scelta: dipinto con un token, il simbolo segue il
   tema chiaro e quello scuro **e continua a seguirli quando i colori si cambiano
   dalla pagina del pannello**. Un PNG a colori fissi li' smetterebbe di
   intonarsi al negozio il giorno che qualcuno tocca il viola.
   ⚠️ Misurato: `--bordo` sul riquadro scuro fa 1,39:1, cioe' esattamente il peso
   che aveva la parola. Non e' un contrasto da leggere — un segnaposto non e' un
   testo — ed e' voluto che resti in secondo piano rispetto alle foto vere che
   gli stanno accanto.
   ⚠️⚠️ Dentro `@supports`: dove le maschere non ci sono, `background-color`
   dipingerebbe un RETTANGOLO PIENO al posto del simbolo — cioe' peggio di quel
   che c'era. Fuori di qui resta la parola, che e' il ripiego di sempre.
   ⚠️⚠️ E la maschera sta su un PSEUDO-ELEMENTO, non sull'elemento. Messa
   sull'elemento ritagliava anche la sua CORNICE: nella scheda prodotto il
   segnaposto grande e' lui stesso il riquadro (`background`, `border`,
   `border-radius`), e mascherarlo faceva sparire il riquadro lasciando la sola
   sagoma. 💡 *Una maschera taglia tutto quello che l'elemento dipinge, non solo
   la parte a cui stavi pensando.* */
@supports ((-webkit-mask-image:url(#s)) or (mask-image:url(#s))) {
  /* La parola resta nel DOM — cambia solo che non si vede. E' cio' che riempie
     il riquadro se un giorno l'immagine del simbolo non arrivasse. */
  .prodotto__senzafoto--simbolo{display:block;width:100%;font-size:0;color:transparent}
  .prodotto__senzafoto--simbolo::before{
    content:"";display:block;aspect-ratio:1;width:58%;margin:0 auto;
    background-color:var(--bordo);
    -webkit-mask:var(--simbolo) center/contain no-repeat;
            mask:var(--simbolo) center/contain no-repeat;
  }
  /* Nella scheda prodotto la cornice e' il `div` stesso, che resta una griglia
     centrata: qui si rimpicciolisce solo il simbolo che ci sta dentro. */
  .prodotto__senzafoto--simbolo.grande::before{width:52%;margin:0}
}
.prodotto__corpo{padding:.75rem .9rem 1rem;border-top:1px solid var(--bordo);flex:1;display:flex;flex-direction:column}
.prodotto__marca{margin:0;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--grigio)}
.prodotto__nome{font-size:.95rem;margin:.15rem 0 .3rem;line-height:1.35}
.prodotto__nome a{color:var(--inchiostro);text-decoration:none}
.prodotto__nome a:hover{color:var(--collegamento)}
/* La sintetica sotto il nome: 0,86 del nome (.95rem), grigia, per intero.
   Piu' piccola perche' e' una spiegazione, non un secondo titolo. */
.prodotto__breve{margin:0 0 .35rem;font-size:.82rem;color:var(--grigio);line-height:1.4}
.prodotto__codice{font-size:.78rem;color:var(--grigio);margin:0 0 .5rem}
.prodotto__prezzo{margin:auto 0 0;font-size:1.05rem}
.prodotto__prezzo .iva{display:block;font-size:.74rem;color:var(--grigio);font-weight:400}
.prodotto__prezzo--chiedi a{font-size:.92rem}
.pieno{color:var(--grigio);font-weight:400;font-size:.85rem;margin-right:.35rem}
/* ⭐⭐ IL PIENO E IL PREZZO SONO UNA COPPIA, E NON SI SEPARANO.
   Visto in un browser vero a 360px prima di consegnare (v1.167): sulla pagina
   della famiglia la riga andava a capo FRA i due, e la prima riga restava
   «da 36,90 €» — cioe' il prezzo di listino presentato come il «a partire da».
   Il barrato letto da solo dice l'opposto di quello che deve dire.
   ⚠️ `nowrap` sulla COPPIA, non sull'intera riga: la parola «da» e l'etichetta
   dell'IVA vanno a capo volentieri, le due cifre no.
   ⚠️ E `inline-block` con `max-width:100%`: cosi' su una scheda strettissima
   la coppia rimpicciolisce il suo spazio invece di sfondare la scheda.
   💡 *Due numeri che si spiegano a vicenda separati da un a capo sono due
   numeri diversi.* */
.coppia-prezzo{white-space:nowrap;display:inline-block;max-width:100%}
.prodotto__disp{margin:.4rem 0 0;font-size:.8rem}
.prodotto__disp.ok{color:var(--ok)} .prodotto__disp.attenzione{color:var(--attenzione)}

/* ⚠️ La colonna della foto ha un tetto (Simone, 15/8): con la vetrina al 90%
   dello schermo, «meta' e meta'» su un monitor largo dava una fotografia da
   780px e mezza pagina di bianco a destra. La foto smette di crescere, il
   testo si prende quel che avanza. */
.prodotto-pagina{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:2rem;
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--raggio);padding:1.5rem;
  box-shadow:var(--ombra);margin-bottom:1.25rem}
.prodotto-pagina__foto img{width:100%;object-fit:contain;max-height:420px}
.miniature{display:flex;gap:.4rem;margin-top:.6rem;flex-wrap:wrap}
.miniature img{width:56px;height:56px;object-fit:contain;border:1px solid var(--bordo);border-radius:6px;padding:2px}
.prezzo-grande{font-size:2rem;font-weight:650;margin:.75rem 0 .25rem}
.prezzo-grande .iva{display:block;font-size:.8rem;color:var(--grigio);font-weight:400}
.prezzo-grande--chiedi{font-size:1.3rem;color:var(--titolo)}
.disponibilita{font-weight:600;margin:.5rem 0}
.disponibilita.ok{color:var(--ok)} .disponibilita.attenzione{color:var(--attenzione)}
.testo{line-height:1.6}
.testo ul{padding-left:1.2rem}

.briciole{font-size:.85rem;color:var(--grigio);margin:0 0 .75rem}
.pagine{display:flex;gap:.35rem;flex-wrap:wrap;margin:1rem 0 2rem}
.pagine a,.pagine strong{padding:.35rem .65rem;border:1px solid var(--bordo);border-radius:6px;
  background:var(--carta);text-decoration:none}
.pagine strong{background:var(--azione);color:var(--su-colore);border-color:var(--orlo-azione)}

.due-colonne{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.gruppo{border:1px solid var(--bordo);border-radius:var(--raggio);padding:.5rem 1rem 1.1rem;margin:1.25rem 0}
.gruppo legend{font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--grigio);padding:0 .35rem}
.interruttore{display:flex;gap:.55rem;align-items:flex-start;margin:.6rem 0;color:var(--inchiostro);font-size:.95rem}
.interruttore input{margin-top:.25rem;flex:none}
.errore-campo{color:var(--no);font-size:.85rem;margin:.25rem 0 0}
.nota{color:var(--grigio);font-size:.86rem;margin:.5rem 0 0}
.attenuato{color:var(--grigio)}
.piccolo{font-size:.85rem}
.monospazio{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.nudo{list-style:none;padding:0;margin:.35rem 0}
.nudo li{margin:.25rem 0}
.avviso--ok{background:var(--ok-velo);color:var(--ok);border:1px solid var(--ok-orlo)}
.avviso--attenzione{background:var(--attenzione-velo);color:var(--attenzione);border:1px solid var(--attenzione-orlo)}
input[type=email],input[type=search],input[type=tel]{width:100%;padding:.6rem .7rem;
  border:1px solid var(--bordo);border-radius:8px;font:inherit;background:var(--carta)}

.piede{background:var(--carta);border-top:1px solid var(--bordo);margin-top:2.5rem}
.piede__riga{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2rem;padding:2rem 1.25rem}
.piede h3{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--grigio);margin:0 0 .5rem}
.newsletter{display:flex;gap:.4rem;margin:.5rem 0 0}
.newsletter input{flex:1}
.newsletter button{padding:.55rem .9rem;border:0;border-radius:8px;
  background:var(--azione);color:var(--su-colore);font:inherit;font-weight:600;cursor:pointer}

@media (max-width:820px){
  .testata__riga{flex-wrap:wrap}
  .cerca{order:3;flex-basis:100%}
  .prodotto-pagina{grid-template-columns:1fr}
  .due-colonne{grid-template-columns:1fr}
}

/* Il riquadro che segnala qualcosa da decidere adesso. */
.scheda--allarme{border-color:var(--attenzione-orlo);background:var(--attenzione-velo)}
.scheda--allarme > h2{color:var(--attenzione)}

/* ⚠️⚠️ SPENTA: la destinazione non servita, la scatola non attiva, il
   pagamento rimandato. Prima si vedeva IDENTICA a una accesa, in pagine
   dove si agisce su quello che si vede.
   ⭐ Il rosso e' una scelta di Simone (13 settembre), presa dopo aver visto
   le tre pagine affiancate in grigio e in rosso. ⚠️ Nella pagina dei
   pagamenti «Nexi — rimandato» e' una decisione, non un guasto: se un
   giorno quel riquadro sembrera' un allarme, la cura e' un secondo nome
   (`scheda--rimandata`), non lo sbiadire di questo. */
.scheda--spenta{background:var(--errore-velo);border-color:var(--errore-orlo)}
.scheda--spenta > h2{color:var(--no)}

/* ⭐ NOTA: il riquadro che SPIEGA, in mezzo a riquadri su cui si AGISCE.
   In spedizioni-ocean le tre note stanno fra le tariffe, ed erano
   indistinguibili da esse. */
.scheda--nota{background:var(--info-velo);border-color:var(--info-orlo)}
.in-riga{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.6rem 0}
.in-riga label{margin:0}
.in-riga select{padding:.5rem .6rem;border:1px solid var(--bordo);border-radius:8px;font:inherit;background:var(--carta);max-width:100%}
.in-riga button[type=submit]{padding:.5rem 1rem}
.riga--figlia td:first-child{padding-left:1.4rem}

/* ------------------------------------------------------------------ */
/* Carrello (fase 4)                                                   */
/*                                                                     */
/* Il pezzo che conta e' `.paniere`: su un carrello misto ci sono DUE   */
/* riquadri, e devono leggersi come due cose separate. Se sembrassero   */
/* un elenco unico con dei sottotitoli, l'avviso «riceverai due ordini» */
/* resterebbe una frase da ricordare invece di una cosa da vedere.      */
/* ------------------------------------------------------------------ */

.carrello-icona           { white-space: nowrap; }
.carrello-icona .pallino  { display: inline-block; min-width: 1.4em; padding: 0 .35em;
                            border-radius:1em; background:var(--pallino); color:var(--su-colore);
                            font-size: .8em; text-align: center; }

.destra        { text-align: right; }
.nascosto      { display: none; }
.solo-lettori  { position: absolute; width: 1px; height: 1px; overflow: hidden;
                 clip: rect(0 0 0 0); white-space: nowrap; }

.paniere              { margin: 1.5rem 0 2rem; padding: 1rem 1.1rem 1.2rem;
                        border:1px solid var(--bordo-freddo); border-radius:8px; background:var(--carta); }
.paniere__testa       { border-bottom:1px solid var(--bordo-paniere); margin-bottom: .6rem; }
.paniere__testa h2    { margin: 0 0 .1rem; font-size: 1.1rem; }

.avviso--due-aziende      { border-left:4px solid var(--due-aziende-orlo); background:var(--due-aziende-velo); }
.avviso--due-aziende h2   { margin: 0 0 .3rem; font-size: 1.05rem; }
.avviso--due-aziende p    { margin: 0; }

table.carrello            { width: 100%; border-collapse:collapse; }
table.carrello th,
table.carrello td         { padding: .5rem .4rem; border-bottom:1px solid var(--bordo-carrello);
                            vertical-align: top; }
table.carrello tfoot th,
table.carrello tfoot td   { border-bottom:none; }
table.carrello input.qta  { width: 5rem; text-align: right; }

.riga-articolo            { display: flex; gap: .7rem; align-items: flex-start; }
.riga-articolo img        { border-radius:4px; object-fit: cover; }
.riga-articolo p          { margin: .15rem 0 0; }

.carrello__chiusura       { margin: 1rem 0 2rem; padding: 1rem 1.1rem;
                            border:1px solid var(--bordo-freddo); border-radius:8px; background:var(--carta-alzata); }
.carrello__chiusura .totale { margin: 0 0 .3rem; font-size: 1.15rem; }
.carrello__chiusura .azioni { margin-top: .9rem; display: flex; gap: .6rem; align-items: center; }

form.svuota               { margin: 0 0 2.5rem; }
/* ⚠️ Le tre righe qui sotto vanno lette insieme, perche' il difetto era uno
   solo: `button[type=submit]` nasce `width:100%` — giusto nei moduli in
   colonna, sbagliato dentro una riga flex, dove il pulsante si prendeva tutto
   lo spazio avanzato, andava a capo su tre righe e ALZAVA la riga. La tendina
   dei formati, stirata a quell'altezza, veniva alta il triplo del testo che
   mostra (Simone, 15/8). Si rimette `width:auto` al pulsante e le altezze
   tornano quelle dei contenuti. */
form.aggiungi             { display: flex; gap: .4rem; margin: .5rem 0 0;
                            align-items: center; flex-wrap: wrap; }
form.aggiungi select      { height: auto; padding: .45rem .6rem; }
form.aggiungi input       { width: 4.2rem; text-align: right; padding: .4rem .5rem; }
form.aggiungi--grande button { padding: .65rem 1.3rem; font-size: 1.02rem; }
/* ⭐ Il selettore dentro una SCHEDA (v1.168). La tendina si prende una riga
   sua, quantita' e pulsante stanno sulla riga sotto: in una scheda larga
   ~250px i tre pezzi in fila spingerebbero il pulsante a capo da solo,
   allargando la riga in modo diverso da scheda a scheda a seconda di quanto
   e' lungo il nome della versione — cioe' una griglia che si scompone.
   ⚠️ `min-width:0` sulla tendina: senza, una `<select>` non scende sotto la
   larghezza della sua opzione piu' lunga e sfonda la scheda. Le opzioni qui
   portano il prezzo E il «(invece di …)», quindi sono lunghe davvero. */
form.aggiungi--scheda select { flex: 1 1 100%; min-width: 0; }
form.aggiungi--scheda button { flex: 1 1 auto; }
/* ⛔ QUI C'ERA UN `opacity:.55` SUL PULSANTE SPENTO, ed era sbagliato due volte.
   Il foglio ha GIA' la sua regola dichiarata — `button[type=submit]:disabled`
   con `--fondo-spento` e `--testo-spento`, scelti e misurati — e l'opacita' non
   la sostituiva: ci si MOLTIPLICAVA sopra, portando il contrasto misurato in
   Chromium sotto il 3,46:1 che quei due token danno.
   💡 ***Prima di aggiungere una regola per uno stato si cerca la regola che
   quello stato ce l'ha gia': una seconda descrizione non rinforza la prima, si
   compone con lei — e nessuna delle due sa dell'altra.*** */

/* --- la cassa -------------------------------------------------------
   ⚠️ `bottone--principale` esiste perche' alla cassa ci sono due pulsanti che
   fanno cose molto diverse — «ricalcola le spese» e «concludi l'ordine» — e
   distinguerli e' parte della sicurezza dell'interfaccia, non della grafica.
   Un pulsante che prende soldi non deve somigliare a uno che aggiorna un
   numero. */
.bottone--principale      { font-weight: 600; padding: .7rem 1.4rem; font-size: 1.05rem; }
.azioni--cassa            { margin: 1rem 0 0; }

.cassa__riepilogo         { margin: 0 0 1.6rem; padding: 1rem 1.1rem;
                            border:1px solid var(--bordo-freddo); border-radius:8px; background:var(--carta-alzata); }
.cassa__riepilogo h2      { margin-top: 0; font-size: 1.1rem; }
.cassa__riepilogo table   { width: 100%; }

.cassa__modulo fieldset   { border:1px solid var(--bordo-riquadro); border-radius:8px;
                            margin: 0 0 1.1rem; padding: .8rem 1rem 1rem; }
.cassa__modulo legend     { padding: 0 .4rem; font-weight: 600; }
.cassa__modulo p          { margin: .5rem 0; }
.cassa__modulo label      { display: inline-block; margin-bottom: .15rem; }
.cassa__modulo input[type=text],
.cassa__modulo input[type=email],
.cassa__modulo textarea,
.cassa__modulo select     { display: block; width: 100%; max-width: 26rem;
                            padding: .45rem .5rem; border:1px solid var(--bordo-campo);
                            border-radius:6px; font: inherit; }
.cassa__modulo input[size] { width: auto; }
.cassa__modulo .attenzione { display: block; font-size: .9rem; }

ul.riferimenti            { list-style: none; padding: 0; margin: .6rem 0 1.2rem; }
ul.riferimenti li         { padding: .35rem 0; }
ul.riferimenti .monospazio { font-size: 1.1rem; margin-right: .6rem; }

/* --- La sotto-navigazione delle sezioni a piu' pagine (Ocean/Corals) ------ */
.sotto-navigazione{display:flex;gap:.5rem;margin:0 0 1rem;flex-wrap:wrap}
.sotto-navigazione a{padding:.45rem .95rem;border:1px solid var(--bordo);border-radius:999px;
  background:var(--carta);text-decoration:none;color:var(--titolo)}
.sotto-navigazione a.attivo{background:var(--azione);border-color:var(--orlo-azione);color:var(--su-colore)}
.sotto-navigazione a:not(.attivo):hover{border-color:var(--orlo-azione)}

/* --- L'indice appiccicoso: resta in alto mentre la pagina scorre ----------
   Esiste per le pagine lunghe (tante nazioni, tante scatole): senza, trovare
   il blocco giusto vuol dire scorrere tutto. Le ancore stanno sui blocchi. */
.indice{position:sticky;top:.5rem;z-index:20;display:flex;flex-wrap:wrap;align-items:center;
  gap:.35rem;margin:0 0 1.25rem;padding:.55rem .7rem;background:var(--carta);
  border:1px solid var(--bordo);border-radius:var(--raggio);box-shadow:var(--ombra)}
.indice__titolo{color:var(--grigio);font-size:.78rem;margin:0 .25rem 0 .1rem;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.indice a{padding:.15rem .6rem;border:1px solid var(--bordo);border-radius:999px;
  text-decoration:none;font-size:.85rem;color:var(--titolo);background:var(--sabbia)}
.indice a:hover{border-color:var(--orlo-azione);background:var(--carta)}
.indice a.indice--spento{color:var(--grigio);border-style:dashed;background:transparent}
.indice__sep{color:var(--bordo);margin:0 .2rem}

/* Il bersaglio di un'ancora non deve sparire sotto l'indice appiccicoso */
[id]{scroll-margin-top:5.5rem}
html{scroll-behavior:smooth}

/* ------------------------------------------------------------------
   I formati come collegamenti veri, sotto la tendina (17 agosto).

   ⚠️ Non sono un doppione del selettore: una <select> non è un
   collegamento, e senza questi <a> le pagine delle varianti non le
   trova nessun motore. Si disegnano piccoli e discreti — servono a
   Google e a chi vuole aprirne una in una scheda nuova, non a rifare
   la scelta che la tendina fa già.
   ------------------------------------------------------------------ */
.formati { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }
.formati__voce {
  font-size: .85rem; padding: .15rem .5rem; border:1px solid var(--bordo);
  border-radius:999px; color:var(--grigio); text-decoration: none;
}
.formati__voce:hover { color:var(--collegamento); border-color:var(--orlo-azione); }
.formati__voce--qui { color:var(--collegamento); border-color:var(--orlo-azione); font-weight: 600; }

/* ------------------------------------------------------------------
   Le linguette della scheda prodotto, e il blocco della sicurezza.

   ⚠️ Nessun JavaScript: input radio nascosti + label. Il testo delle
   linguette chiuse resta NELL'HTML — se lo inserisse un copione al clic,
   Google indicizzerebbe solo la prima (testi-labels-verso-monami.md §4).
   ------------------------------------------------------------------ */
.linguette { display: flex; flex-wrap: wrap; gap: 0; }
.linguette > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.linguette > label {
  order: 1;                      /* tutte le linguette sulla stessa riga */
  padding: .55rem 1.05rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
  color:var(--ardesia-chiara);
  border-bottom:3px solid transparent;
  white-space: nowrap;
}
.linguette > label:hover { color:var(--collegamento); }

/* la linguetta scelta, e il suo pannello: fratello immediato della label */
.linguette > input:checked + label { color:var(--collegamento); border-bottom-color:var(--orlo-azione); }
.linguette > .linguetta__testo { order: 2; width: 100%; display: none; padding-top: 1rem; }
.linguette > input:checked + label + .linguetta__testo { display: block; }

/* la riga delle linguette esiste solo se ce n'è più d'una */
.linguette::before {
  content: ""; order: 1; width: 100%; height: 0;
  border-bottom:1px solid var(--linguette-orlo); margin-top: -3px;
}
.linguette--sola > label, .linguette--sola::before { display: none; }
.linguette--sola > .linguetta__testo { display: block; padding-top: 0; }

/* ⚠️ Su schermo stretto le linguette diventano una fisarmonica: si toglie
   l'ordine, così ogni pannello sta sotto la SUA etichetta. */
@media (max-width: 640px) {
  .linguette { flex-direction: column; }
  .linguette > label { order: 0; border-bottom:1px solid var(--linguette-orlo); border-radius:0; }
  .linguette > label::after { content: " ▾"; color:var(--ardesia-tenue); }
  .linguette > input:checked + label::after { content: " ▴"; }
  .linguette > .linguetta__testo { order: 0; padding: .6rem 0 1rem; }
  .linguette::before { display: none; }
}

/* La riga dei pericoli. ⚠️ Sta DENTRO la linguetta «Sicurezza» (Simone, 15/8):
   prima era anche sopra il prezzo, e si vedeva due volte sulla stessa pagina. */
.clp-riga { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .6rem 0 .2rem; }
.clp-pittogramma { flex: none; }
.clp-avvertenza { font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; }
.clp-avvertenza--pericolo { color:var(--clp-pericolo); }
.clp-avvertenza--attenzione { color:var(--clp-attenzione); }
.clp-vai { font-size: .82rem; color:var(--ardesia-chiara); text-decoration: underline; }
.clp-riga--dentro { margin-top: 0; }

.clp-frasi { list-style: none; padding: 0; margin: .8rem 0 0; }
.clp-frasi li { margin-bottom: .45rem; line-height: 1.45; }
.clp-codice { font-size: .78rem; color:var(--ardesia-chiara); margin-right: .45rem; }
/* I consigli di prudenza sono l'altra meta' dell'etichetta (art. 17 lett. g),
   ma non sono pericoli: stanno sotto, un gradino piu' sommessi, senza che il
   lettore debba distinguerli leggendo la lettera iniziale del codice. */
.clp-titolo { margin: 1.1rem 0 0; font-size: .95rem; color:var(--ardesia-scura); }
.clp-frasi--prudenza { margin-top: .4rem; font-size: .93rem; color:var(--ardesia-scura); }

/* La lente: la foto della scheda si ingrandisce in un popup (negozio.js).
   Il collegamento .lente resta un collegamento vero: senza JS apre l'immagine. */
.lente { display: block; cursor: zoom-in; }
.miniatura { display: inline-block; line-height: 0; border-radius:6px; }
.miniatura--scelta img { border-color:var(--scelto); box-shadow:0 0 0 1px var(--scelto); }

.lightbox {
  position: fixed; inset: 0; z-index: 60;
  background:rgba(15, 23, 30, .88);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; background:var(--carta); border-radius:8px; }
.lightbox__chiudi, .lightbox__freccia {
  position: absolute; border:0; cursor: pointer;
  background:rgba(255, 255, 255, .12); color:var(--su-colore);
  font-size: 1.9rem; line-height: 1;
  width: 2.6rem; height: 2.6rem; border-radius:50%;
}
.lightbox__chiudi:hover, .lightbox__freccia:hover { background:rgba(255, 255, 255, .28); }
.lightbox__chiudi { top: 1rem; right: 1rem; }
.lightbox__freccia { top: 50%; transform: translateY(-50%); }
.lightbox__freccia--prima { left: 1rem; }
.lightbox__freccia--dopo { right: 1rem; }

/* --- «Scegli la cartella» di Mon Ami ------------------------------------
   ⚠️ `[hidden]` va DICHIARATO: il blocco nasce nascosto nel modello e lo
   scopre il JavaScript solo se il browser sa fare `webkitdirectory`. Con un
   `display` esplicito qui sopra, l'attributo `hidden` da solo non basterebbe
   piu' — e comparirebbe un campo che non funziona. */
.cartella-monami { border:1px dashed var(--bordo-cartella); border-radius:8px; padding: .75rem 1rem; margin: 0 0 1rem; }
.cartella-monami[hidden] { display: none; }
.cartella-monami__elenco { list-style: none; margin: .5rem 0; padding: 0; font-size: .9rem; }
.cartella-monami__elenco li { margin: .15rem 0; }
.cartella-monami__male { color:var(--no); }

/* --------------------------------------------------------------------
   La barra dei comandi degli elenchi (25 agosto): il filtro «solo
   esemplari unici» a sinistra, «quanti per pagina» a destra.

   ⚠️ Classi sue e non `.pulsante`: quella classe è usata dalla scheda
   prodotto ed è oggi SENZA REGOLE (il collegamento «Scegli la versione»
   è un link nudo). Dargliene qui vorrebbe dire cambiare l'aspetto di una
   cosa che nessuno ha chiesto di cambiare, di straforo.
   -------------------------------------------------------------------- */
.elenco-comandi{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.75rem;margin:0 0 1rem}
.elenco-comandi:empty{display:none}

.filtro{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  padding:.4rem .8rem;border:1px solid var(--bordo);border-radius:var(--raggio);
  background:var(--carta);color:var(--collegamento);font-size:.9rem}
.filtro:hover{border-color:var(--orlo-azione)}
.filtro--acceso{background:var(--azione);border-color:var(--orlo-azione);color:var(--su-colore)}
.filtro .quanti{font-size:.8rem;opacity:.75}
.filtro--acceso .quanti{opacity:.9}

.per-pagina{display:flex;align-items:center;gap:.4rem;margin:0;font-size:.85rem;
  color:var(--grigio)}
/* ⚠️ La targhetta non va a capo: «Per / pagina» su due righe fa saltare
   l'allineamento della barra e sembra un difetto. */
.per-pagina label{white-space:nowrap}
.per-pagina select{padding:.3rem .4rem;border:1px solid var(--bordo);border-radius:6px;
  background:var(--carta);color:var(--inchiostro)}
/* ⚠️ Discreto, non blu pieno: la tendina si manda da sola quando il
   JavaScript c'è, quindi questo pulsante è la riserva — e messo come
   «Aggiungi al carrello» competerebbe con l'unico pulsante che deve
   attirare l'occhio in quella pagina. */
.per-pagina button{padding:.3rem .7rem;font-size:.85rem;background:var(--carta);
  color:var(--collegamento);border:1px solid var(--bordo);font-weight:400}
.per-pagina button:hover{border-color:var(--orlo-azione)}

/* La riga «WYSIWYG — esemplare unico» nel riquadro dell'elenco. Verde come
   `avviso--ok` sulla scheda prodotto: è la stessa cosa detta in breve, e
   due colori per la stessa informazione la farebbero sembrare diversa. */
.prodotto__wysiwyg{margin:0 0 .35rem;font-size:.78rem;font-weight:600;color:var(--ok)}

/* Un pulsante che non si disfa non deve somigliare a uno che salva un campo.
   ⚠️ Il colore NON è la difesa — la difesa è la parola da scrivere a mano e il
   controllo nel controllore. È il preavviso: chi sta per premerlo lo vede
   diverso *prima* di leggere l'etichetta. */
.bottone--pericolo        { background:var(--pericolo); }
.bottone--pericolo:hover  { background:var(--pericolo-premuto); }

/* Lo sfondo delle righe e delle schede degli ordini — «a che punto è».
   ⚠️ Il colore NON porta niente che il testo non dica già: lo stato è scritto
   in chiaro accanto, e chi non distingue questi toni (o stampa in bianco e
   nero) non perde nessuna informazione. È un aiuto per l'occhio.
   ⚠️ Il caso NORMALE resta bianco apposta: un colore che c'è sempre smette di
   dire qualcosa, ed è la stessa ragione della soglia larga di GuardiaMappa. */
:root{ --fatto:#f1f7f3; --sospeso:#fffaf0; --spento:#f5f6f7; }
table.dati tr.riga--spedito td{background:var(--fatto)}
table.dati tr.riga--annullato td{background:var(--spento);color:var(--grigio)}
.scheda--pagato{background:var(--fatto)}
.scheda--attesa{background:var(--sospeso);border-color:var(--attenzione-orlo)}

/* ============================================================
   I BLOCCHI REDAZIONALI (migr. 078)

   ⭐⭐ QUESTA E' LA META' CHE RENDE VERA LA PROMESSA «SENZA CSS».
   Chi scrive l'avviso mette solo le parole: colori, bordo, spaziatura e
   larghezza li mette il negozio, qui. Se per far stare bene un avviso
   servisse uno `style=` nel campo, la promessa sarebbe gia' rotta — e
   infatti `style` e' fra gli attributi che il salvataggio RIFIUTA.
   ============================================================ */

/* ⚠️ Fondo TRASPARENTE e nessuna riga a sinistra (Simone, 2 settembre): il
   riquadro azzurro col bordo blu faceva sembrare il contenuto un «avviso del
   negozio» invece che la parte alta della pagina.
   ⭐ E via anche la spaziatura ai lati: senza sfondo, un padding orizzontale
   disallineerebbe il testo rispetto a tutto il resto della home — si vedrebbe
   solo il disallineamento, non il motivo. Resta il margine sotto, che separa
   dal contenuto seguente. */
.blocco-redazionale{margin:0 0 1.5rem;background:transparent;border:0;padding:0}
.blocco-redazionale > :first-child{margin-top:0}
.blocco-redazionale > :last-child{margin-bottom:0}

/* Il pop-up. ⚠️ `align-items:flex-start` con `padding-top`: centrato
   verticalmente, su un telefono un avviso lungo finirebbe con la testa
   e i piedi fuori schermo, e il pulsante per chiuderlo irraggiungibile. */
.avviso-fondo{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:flex-start;justify-content:center;
  padding:2rem 1rem;overflow-y:auto;
  background:rgba(0,0,0,.45)}
.avviso{
  max-width:34rem;width:100%;
  background:var(--carta);border-radius:6px;padding:1.5rem;
  box-shadow:0 8px 30px rgba(0,0,0,.25)}
.avviso__testo > :first-child{margin-top:0}
.avviso__testo > :last-child{margin-bottom:1rem}

/* ⚠️ `[hidden]` con `display:none !important`: `.avviso-fondo` porta
   `display:flex`, che da solo VINCE sull'`hidden` del browser — il pop-up
   resterebbe visibile dopo averlo chiuso, e la classe di guasto e' quella
   dei modificatori CSS inerti gia' vista il 31 agosto. */
.avviso-fondo[hidden]{display:none !important}

/* Le linguette delle lingue nel pannello: la sigla e un segno pieno/vuoto. */
.linguette{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0}
.linguetta--scelta{outline:2px solid var(--scelta-forte);outline-offset:1px}

.editor{width:100%}
.editor__barra{display:flex;gap:.3rem;flex-wrap:wrap;
  border:1px solid var(--editor-orlo);border-bottom:0;border-radius:4px 4px 0 0;
  padding:.35rem;background:var(--nebbia-editor)}

/* ⚠️ `min-height` E `display:block`: un contenteditable VUOTO non ha
   contenuto, quindi senza un'altezza minima si disegna alto zero — una barra
   di pulsanti sopra il nulla, che e' esattamente come si e' presentato il
   2 settembre. L'altezza minima non e' estetica: e' cio' che rende il campo
   CLICCABILE quando e' vuoto, cioe' sempre la prima volta. */
.editor__foglio{display:block;width:100%;min-height:9rem;padding:.75rem;
  background:var(--carta);border:1px solid var(--editor-orlo);border-radius:0 0 4px 4px;
  overflow-wrap:anywhere;box-sizing:border-box}
.editor__foglio:focus{outline:2px solid var(--scelta-forte);outline-offset:-2px}

/* ⚠️⚠️ `width:100%` da solo NON basta su una textarea: il browser le da'
   una larghezza propria in COLONNE (`cols`, 20 di serie) e un `box-sizing`
   che fa debordare i bordi. Servono tutti e tre — ed e' il motivo per cui
   la casella della home si vedeva larga un dito. */
.editor__grezzo{display:block;width:100%;box-sizing:border-box;
  min-height:9rem;font-family:monospace;font-size:.85rem;
  padding:.6rem;border:1px solid var(--editor-orlo);border-radius:4px;resize:vertical}

/* =====================================================================
   IL TEMA «NOTTE» — la vetrina al buio, il viola del marchio dove si preme
   =====================================================================
   Scelto da Simone il 6 settembre fra tre proposte: fondo grigio scuro,
   il viola del logo (#754992) su pulsanti e menu, e la cassa che resta
   chiara — «buio dove seduce, luce dove si lavora».

   ⚠️⚠️ SI DICHIARA, NON SI EREDITA. Vale solo dove il modello scrive
   `scura` nella classe del corpo: oggi home, catalogo e scheda prodotto.
   Una pagina aggiunta domani resta CHIARA finche' qualcuno non decide —
   che e' il verso giusto, perche' il carrello e la cassa non devono
   diventare scuri per distrazione.

   ⭐⭐ Ogni token definito qui sopra ha un valore qui sotto, e non per
   diligenza: il blocco lo genera un attrezzo che si FERMA se ne trova uno
   scoperto. Un tema costruito per elenco dimentica; uno costruito per
   esaurimento dell'elenco no.

   ⚠️ I contrasti sono MISURATI (regola 6 dell'8 agosto), non scelti a
   occhio. I due che decidono tutto: il viola del marchio come FONDO di un
   pulsante con la scritta bianca fa 6,72:1 e va bene; lo stesso viola come
   TESTO fa 2,66:1 e NON va bene — per questo `--azione` e `--collegamento`
   sono due token diversi.
   ===================================================================== */
body.vetrina.scura{
  /* ⭐ Quello che dipinge il BROWSER segue il tema: la tendina aperta del
     selettore di lingua, le barre di scorrimento, il riempimento automatico.
     Senza, restano chiari in mezzo a una pagina scura — e non e' una cosa che
     si corregge col colore, perche' quel disegno non e' nostro. */
  color-scheme:dark;
  --acqua:#754992;   /* il viola del logo diventa il colore di casa */
  --acqua-scura:#57366d;
  --sabbia:#17161b;   /* il fondo della pagina: grigio scuro, non nero (regola 1) */
  --inchiostro:#e9e7ec;   /* il testo: bianco al 91%, non puro (regola 3) */
  --grigio:#a49fae;   /* il testo attenuato — 7,1:1, si legge davvero */
  --bordo:#39353f;
  --ok:#5fc39a;
  --no:#e58b8b;
  --attenzione:#e0b062;
  --acqua-cupa:#c9a1e2;
  --acqua-tenue:#c9a1e2;
  --acqua-velo:#241f2d;
  --ardesia:#c3bfcb;
  --ardesia-chiara:#a49fae;
  --ardesia-scura:#d3cfda;
  --ardesia-tenue:#8b8695;
  --attenzione-orlo:#5c4a26;
  --attenzione-velo:#2a2318;
  --attesa-testo:#e0b062;
  --attesa-velo:#2a2318;
  --bordo-campo:#4a4553;
  --bordo-carrello:#332f3c;
  --bordo-cartella:#39353f;
  --bordo-freddo:#39353f;
  --bordo-paniere:#39353f;
  --bordo-riquadro:#39353f;
  --carta:#1f1d25;   /* la superficie di una scheda: si stacca SALENDO di luce */
  --carta-alzata:#292630;   /* un gradino piu' su ancora */
  --catalogo-orlo:#33475c;
  --catalogo-velo:#1b2530;
  --clp-attenzione:#e0b062;
  --clp-pericolo:#f08a84;   /* le frasi CLP sono avvertenze di sicurezza: si devono leggere */
  --collaudo-testo:#e0b062;
  --collaudo-velo:#2a2318;
  --due-aziende-orlo:#c98b3a;
  --due-aziende-velo:#2a2318;
  --editor-orlo:#3c3846;
  --errore-orlo:#5e3034;
  --errore-velo:#2a1a1c;
  --fondo-spento:#26232d;
  --gruppo-orlo:#3c3846;
  --gruppo-velo:#232029;
  --info-orlo:#33475c;
  --info-velo:#1b2530;
  --linguette-orlo:#3c3846;
  --nebbia:#26232d;
  --nebbia-editor:#26232d;
  --nebbia-galleria:#1f1d25;
  --nebbia-premuta:#302c39;
  --ok-orlo:#2c5a44;
  --ok-velo:#16281f;
  --orlo-spento:#3c3846;
  --pallino:#965bbe;
  --pericolo:#b8434a;   /* un pieno: ci va sopra il bianco */
  --pericolo-premuto:#8f2f35;
  --scelta-forte:#8db4ff;
  --scelto:#b17ed3;   /* la miniatura scelta era gia' viola: ora e' IL viola */
  --su-colore:#ffffff;   /* NON cambia: e' la scritta SOPRA un pieno colorato */
  --testo-spento:#7a7585;   /* spento deve SEMBRARE spento anche al buio */
  --azione:#754992;   /* il pieno di un pulsante: bianco sopra = 6,72:1 */
  --collegamento:#b17ed3;   /* il viola COME TESTO dev'essere schiarito: 5,78:1 */
  --orlo-azione:#965bbe;   /* bordi e anello del fuoco: 3,9:1, sopra il minimo di 3 */
  --azione-premuta:#8f5cb0;   /* col mouse sopra si SALE di luce, non si scende (regola 2) */
  --titolo:#c9a1e2;
  --ombra:0 1px 0 rgba(255,255,255,.06) inset, 0 6px 20px rgba(0,0,0,.55);   /* regola 2: i livelli si fanno con la luce, non con l'ombra */
  --fatto:#16281f;
  --sospeso:#2a2318;
  --spento:#26232d;
}

/* ---------------------------------------------------------------------
   La pagina dei COLORI della vetrina (T-174).
   ⚠️ Le anteprime dipingono SE STESSE: le variabili si applicano al
   riquadro, non alla pagina, cosi' il pannello non si tinge mentre si
   prova. E' la stessa ragione per cui le scelte salvate vivono su
   `body.vetrina` e mai su `:root`.
   --------------------------------------------------------------------- */
.colori-anteprime{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.anteprima{border:1px solid var(--bordo);border-radius:var(--raggio);overflow:hidden}
.anteprima__nome{margin:0;padding:.4rem .8rem;font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--grigio);background:var(--nebbia);
  border-bottom:1px solid var(--bordo)}
/* ⭐ Il riquadro usa i token COME LI USA LA VETRINA: fondo pagina fuori,
   scheda dentro. Un'anteprima che dipinge solo un quadrato di colore non
   dice se quel colore funziona. */
.anteprima__dentro{padding:1rem;background:var(--sabbia);color:var(--inchiostro)}
.anteprima__titolo{margin:0 0 .2rem;font-weight:600}
.anteprima__testo{margin:0 0 .5rem;font-size:.9rem;color:var(--grigio)}
.anteprima__link{margin:0 0 .7rem;font-size:.9rem}
.anteprima__link a{color:var(--collegamento)}
.anteprima__bottone{display:inline-block;padding:.4rem .8rem;border-radius:8px;
  background:var(--azione);color:var(--su-colore);font-size:.9rem;font-weight:600}
.anteprima__spento{display:inline-block;padding:.4rem .8rem;border-radius:8px;
  background:var(--fondo-spento);color:var(--testo-spento);font-size:.9rem;font-weight:600}
.anteprima__clp{margin:.7rem 0 0;font-size:.85rem;color:var(--clp-pericolo);font-weight:600}
.colore-pozzo{width:2.6rem;height:1.8rem;padding:0;border:1px solid var(--bordo);
  border-radius:6px;background:var(--carta);cursor:pointer}