/* =============================================================================
   ORDINE — elenco articoli, gruppi, carrello.
   Mobile: elenco a tutta larghezza + barra azioni fissa sopra la tab bar;
           il carrello è uno sheet.
   Desktop (>=1024px): elenco + pannello carrello fisso a destra (più stretto fino a 1199).
   REGOLA: qui non esistono prezzi.
   ============================================================================= */
.ordine { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: start; }

/* capitoli come porta d'ingresso (mobile e tablet) */
.capitoli { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-5); }
.capitolo { text-align: left; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); }
.capitolo b { display: block; font-size: var(--fs-14); }  /* la card è il solo nome: il conteggio è stato tolto ovunque */
@media (hover: hover) { .capitolo:hover { border-color: var(--gold-500); } }

/* gruppi per prodotto */
.gruppo { margin-bottom: var(--sp-4); }
.gruppo-head { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 0 6px; border-bottom: 2px solid var(--line-strong); }
.gruppo-head h3 { font-size: var(--fs-15); font-weight: 700; flex: 1; min-width: 0; }
.gruppo-head .link { font-size: var(--fs-12); font-weight: 600; color: var(--accent-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.gruppo-head .link svg { width: 14px; height: 14px; }

/* riga articolo */
.riga { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 0; border-bottom: 1px solid var(--line); }
.riga:last-child { border-bottom: 0; }
.riga.dentro { background: linear-gradient(90deg, var(--gold-100), transparent 60%); margin: 0 calc(-1 * var(--sp-2)); padding-left: var(--sp-2); padding-right: var(--sp-2); border-radius: var(--r-sm); }
[data-theme="dark"] .riga.dentro { background: linear-gradient(90deg, rgba(200,153,46,.14), transparent 60%); }
/* ⚠️ LA RIGA SI ACCENDE sotto il mouse e quando il fuoco è dentro di lei (2026-09-13). Sul
   desktop fra il nome e la quantità c'erano circa 400 px, e con dieci righe uguali («Bianco
   2,5 / 5 / 14 L») era facile mettere il numero sulla riga sbagliata: così si vede sempre di
   quale riga è lo stepper che si sta toccando. La distanza ora è al massimo circa 200 px (la
   colonna è larga al più 440, vedi in fondo), ma le righe uguali restano uguali: il fondo serve
   ancora.
   Il fondo è `--surface`, bianco sul fondo pagina, e sborda di 8 px per lato con un'ombra
   piena invece che col padding: allargando il padding il testo si sposterebbe a ogni
   passaggio. `.dentro` ha già il suo margine, quindi lì basta sotto la sfumatura oro.
   ⚠️ `:focus-within` anche senza mouse: chi usa la tastiera ha lo stesso problema. */
@media (hover: hover) { .riga:hover { background: var(--surface); box-shadow: calc(-1 * var(--sp-2)) 0 0 var(--surface), var(--sp-2) 0 0 var(--surface); } }
.riga:focus-within { background: var(--surface); box-shadow: calc(-1 * var(--sp-2)) 0 0 var(--surface), var(--sp-2) 0 0 var(--surface); }
@media (hover: hover) { .riga.dentro:hover { background: linear-gradient(90deg, var(--gold-100), transparent 60%), var(--surface); box-shadow: none; } }
.riga.dentro:focus-within { background: linear-gradient(90deg, var(--gold-100), transparent 60%), var(--surface); box-shadow: none; }
[data-theme="dark"] .riga.dentro:focus-within { background: linear-gradient(90deg, rgba(200,153,46,.14), transparent 60%), var(--surface); }
@media (hover: hover) { [data-theme="dark"] .riga.dentro:hover { background: linear-gradient(90deg, rgba(200,153,46,.14), transparent 60%), var(--surface); } }
/* Il nome è un bottone (tocco = mostra il codice): gli si toglie tutto l'aspetto da bottone. */
.riga-info { flex: 1; min-width: 0; display: block; text-align: left; background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; border-radius: var(--r-sm); }
@media (hover: hover) { .riga-info:hover .riga-nome { color: var(--accent-ink); } }
.riga-nome { display: block; font-size: var(--fs-14); line-height: 1.3; }
.riga-nome b { font-weight: 600; }
.riga-nome .fmt { color: var(--ink-2); }
.riga-meta { display: flex; flex-wrap: wrap; gap: 4px var(--sp-2); align-items: center; margin-top: 2px; font-size: var(--fs-12); color: var(--muted); }
.riga-meta .mono { white-space: nowrap; }
/* Sotto il nome c'è solo il codice (la targhetta «base» è stata tolta il 2026-09-11): finché
   la riga non è `cod-on` la riga dei dettagli sparisce tutta — vuota lascerebbe 2 px di
   margine e un'altezza di riga in più su ogni articolo. */
.riga:not(.cod-on) .riga-meta { display: none; }
/* ⚠️ La stella spenta è `--line-field`, non `--line-strong`: è l'unico segno che lì c'è un
   comando, e a 1,63:1 si leggeva appena. */
.riga .pref { border: 0; background: none; color: var(--line-field); padding: 4px; border-radius: 50%; display: flex; }
.riga .pref svg { width: 18px; height: 18px; }
@media (hover: hover) { .riga .pref:hover { color: var(--gold-500); } }
.riga .pref.on { color: var(--gold-500); }
.riga .pref.on svg { fill: currentColor; }

/* barra azioni mobile */
/* sta sopra il dock della ricerca: la ricerca è l'elemento più in basso, il più raggiungibile */
.ordine-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--h-tabbar) + var(--h-dock, 0px) + env(safe-area-inset-bottom)); z-index: 43; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgba(0,0,0,.08); padding: 6px var(--sp-4); display: flex; gap: var(--sp-2); }
/* ⚠️ 6 px sopra e sotto e non 8 (2026-09-13), come il dock della ricerca: due barre fisse
   impilate, e ogni pixel si paga in elenco. I tasti restano alti 40. */
.ordine-bar .btn-primary { flex: 1; min-width: 0; }
/* «Ordini inviati» a destra di «Carrello»: si prende il suo spazio senza accorciarsi, e
   «Carrello» — che è il comando principale — si stringe per lasciarglielo. */
.ordine-bar .btn-inviati { flex: 0 0 auto; }

/* pannello carrello (desktop) */
/* ⚠️ Lo `sticky` NON sta sull'elemento di griglia ma sul figlio, ed è il punto: appiccicare un
   elemento di griglia funziona solo se il browser gli dà come area l'intera riga, e lì i
   browser divergono — su Firefox il pannello del carrello risaliva con la pagina invece di
   restare fermo, mentre su Chromium stava. Qui la colonna si allunga quanto l'elenco
   (`align-self: stretch`, che vince sull'`align-items: start` del contenitore) e dentro di
   essa il figlio è appiccicato a un normale blocco: è il caso che tutti i browser fanno
   uguale. ⚠️ Senza lo `stretch` la colonna sarebbe alta quanto il pannello e non resterebbe
   un solo pixel in cui scorrere: lo sticky non avrebbe effetto da nessuna parte. */
.carrello { display: none; align-self: stretch; }
/* ⚠️ L'altezza massima è legata a `--sp-6` (la distanza da sotto la testata) e a `--sp-10`
   (il margine inferiore di `.main`), non a un numero scelto a occhio: la somma
   `top + max-height` deve restare **dentro** la finestra meno quel margine.
   Perché: uno `sticky` viene rilasciato quando finisce il suo contenitore, e il contenitore è
   la colonna della griglia, che si ferma 40px prima del fondo della pagina. Con un pannello
   alto — cioè quando nel carrello c'è parecchia roba — quei 40px non bastavano più e negli
   ultimi 116px di scorrimento il pannello veniva spinto su di 32px. Con un carrello corto non
   succedeva, ed è per questo che sembrava un difetto capriccioso.
   ⚠️ Se un giorno cambia il padding inferiore di `.main`, va cambiato anche qui. */
.carrello-box { position: sticky; top: calc(var(--h-top, var(--h-topbar)) + var(--sp-6)); display: flex; flex-direction: column; max-height: calc(100vh - var(--h-top, var(--h-topbar)) - var(--sp-6) - var(--sp-10)); max-height: calc(100dvh - var(--h-top, var(--h-topbar)) - var(--sp-6) - var(--sp-10)); }
.carrello-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
.carrello-head h2 { font-size: var(--fs-16); font-weight: 700; flex: 1; }
.carrello-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: var(--sp-3) var(--sp-4); }
.carrello-foot { padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); display: grid; gap: var(--sp-2); }

/* righe carrello (usate sia nel pannello sia nello sheet) */
.crow { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 0; border-bottom: 1px solid var(--line); }
.crow:last-child { border-bottom: 0; }
.crow-info { flex: 1; min-width: 0; font-size: var(--fs-14); line-height: 1.3; }
.crow-info small { display: block; color: var(--muted); font-size: var(--fs-12); }
/* I codici dell'anteprima si accendono tutti insieme con l'interruttore in cima
   (`.con-codici` sul contenitore: corpo del pannello, del foglio, o il riepilogo d'invio).
   Solo `.mono`: la riga «Colore: …» dei colorati resta sempre. */
.crow-info small.mono { display: none; }
.con-codici .crow-info small.mono { display: block; }
.carrello-codici { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); }
.crow-info .col { color: var(--accent-ink); font-weight: 600; }
/* Il cestino apre la riga, a sinistra del nome (2026-09-13): prima era una ✕ dopo lo stepper,
   con un margine apposta per non toccarla al posto del «+». Ora i due stanno ai capi opposti.
   ⚠️ Il margine negativo è uguale al rientro dell'icona nel suo tasto: così il disegno del
   cestino si allinea al titolo della sezione sopra («LAVABILI») invece di rientrare. */
.crow .x { flex: 0 0 auto; border: 0; background: none; color: var(--muted); padding: 4px; margin-left: -4px; border-radius: 50%; display: flex; }
.crow .x svg { width: 18px; height: 18px; }
@media (hover: hover) { .crow .x:hover { color: var(--danger); background: var(--danger-bg); } }
.carrello-sez { margin-top: var(--sp-4); }
.carrello-sez .eyebrow { margin-bottom: var(--sp-2); }
.carrello-vuoto { text-align: center; color: var(--muted); font-size: var(--fs-14); padding: var(--sp-6) var(--sp-3); }
.carrello-vuoto svg { width: 32px; height: 32px; margin: 0 auto var(--sp-2); color: var(--line-strong); }

/* riepilogo / conferma */
.riep { display: grid; gap: var(--sp-3); }
.riep-tot { display: flex; justify-content: space-between; font-weight: 600; padding: var(--sp-3); background: var(--surface-2); border-radius: var(--r-md); }
.riep-lista { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.riep-lista .crow { padding: 8px 12px; }
.riep-lista .q { font-weight: 700; font-variant-numeric: tabular-nums; }
.riep-lista .cat { padding: 6px 12px; background: var(--surface-2); font-size: var(--fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.inviato { text-align: center; padding: var(--sp-6) var(--sp-3); }
.inviato .ok { width: 56px; height: 56px; border-radius: 50%; background: var(--success-bg); color: var(--success); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-3); }
.inviato .ok svg { width: 28px; height: 28px; }
.inviato h3 { font-size: var(--fs-18); margin-bottom: var(--sp-1); }
.inviato p { color: var(--ink-2); font-size: var(--fs-14); }
.testo-ordine { width: 100%; min-height: 200px; font-family: var(--font-mono); font-size: var(--fs-13); }

/* ordine a colore */
.formati { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ---- bersagli al tocco (telefono e tablet) ----
   Stella 26 px accanto al «−», «Togli» 24 px (allora accanto al «+», oggi il cestino a sinistra
   del nome), «A listino» alto 18 px, formati
   del colorato alti 32: misurati il 2026-09-13, tutti sotto la misura di un polpastrello.
   Col mouse restano come sono (vedi lo stepper in components.css).
   ⚠️ «A listino» cresce col margine negativo: l'area da toccare si allarga, la testata del
   gruppo resta alta com'era — con 1.490 articoli ogni pixel di testata si ripete. */
@media (pointer: coarse) {
  .riga .pref { width: 40px; height: 40px; padding: 0; align-items: center; justify-content: center; }
  .crow .x { width: 36px; height: 36px; padding: 0; margin-left: -9px; align-items: center; justify-content: center; }
  .gruppo-head .link { padding: 10px 6px; margin: -10px -6px; }
  .formati .chip { height: 40px; padding: 0 var(--sp-4); }
}

/* storico */
.ord-item { padding: var(--sp-4); display: grid; gap: var(--sp-2); }
.ord-item-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.ord-item-head h3 { font-size: var(--fs-15); flex: 1; min-width: 0; }
.ord-item .meta { font-size: var(--fs-13); color: var(--muted); }
.ord-item .cosa { font-size: var(--fs-13); color: var(--ink-2); }
.ord-item .azioni { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-1); }
.ord-item details { font-size: var(--fs-13); }
.ord-item summary { cursor: pointer; color: var(--accent-ink); font-weight: 600; }
.ord-item ul { margin: var(--sp-2) 0 0; padding-left: 18px; color: var(--ink-2); }
.storico-lista { display: grid; gap: var(--sp-3); }

/* ⚠️⚠️ IL CARRELLO COMPARE DA 1024 PX, dove sparisce la barra «Carrello» — le due soglie
   devono essere LA STESSA (2026-09-13). Prima il pannello arrivava solo da 1200: fra 1024 e
   1199 non c'era né la barra né il pannello, e un ordine composto non si poteva né vedere né
   inviare. A 1100 px restava un «4» nella barra laterale e basta. È la larghezza di un
   portatile 1366 o 1280 con lo zoom di Windows al 125%, cioè il PC tipico di un negozio.
   Fra 1024 e 1199 il pannello è più stretto (320 px) e lo stacco più corto: a 1024 all'elenco
   restano 360 px, abbastanza per nome, stella e quantità. */
/* ⚠️ LA COLONNA DEGLI ARTICOLI NON SUPERA I 440 PX (2026-09-13). Allargandosi con lo schermo
   portava la quantità lontana dal nome: 398 px a 1440, 494 a 1920, e con dieci righe uguali
   («Bianco 2,5 / 5 / 14 L») l'occhio perdeva la riga passando dall'uno all'altra.
   Il numero non è a occhio: il nome più lungo dei 1.488 articoli («Ricambio Spugna Smalto H2O -
   10 cm») è largo 238 px, e il resto della riga — stella, stepper e i due spazi — ne prende 164.
   A 440 nessun nome va a capo; se un giorno ne arriva uno più lungo, va a capo lui e basta.
   ⚠️ Il carrello viene ACCANTO all'elenco (`justify-content: start`), non resta sul bordo
   destro: lasciarlo là avrebbe spostato il vuoto in mezzo, fra la quantità appena scritta e il
   carrello che la conferma. Sotto i 440 px (fra 1024 e 1279) la colonna si stringe come prima. */
@media (min-width: 1024px) {
  .capitoli { display: none; } /* su desktop i capitoli stanno nella sidebar */
  .ordine-bar { display: none; }
  .ordine { grid-template-columns: minmax(0, 440px) var(--w-aside); justify-content: start; }
  .carrello { display: block; }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .ordine { --w-aside: 320px; gap: var(--sp-4); }
}
@media (min-width: 1440px) {
  .ordine { --w-aside: 460px; }
}

/* foglio d'ordine per la stampa */
.foglio { color: #1b1d22; background: #fff; font-size: 12.5px; font-family: var(--font-sans); }
.foglio-head { display: flex; align-items: flex-start; gap: 14px; border-bottom: 2pt solid #c8992e; padding-bottom: 10px; }
.foglio-head img { width: 64px; }
.foglio-head h1 { font-size: 20px; margin: 0 0 3px; }
.foglio-head p { margin: 0; font-size: 10.5px; color: #444; }
.foglio-num { margin-left: auto; text-align: right; }
.foglio-num b { display: block; font-size: 14px; }
.foglio-rag { margin: 12px 0 10px; }
.foglio table { width: 100%; border-collapse: collapse; font-size: 12px; }
.foglio th { text-align: left; background: #e8eef7; color: #24395c; border: .5pt solid #b9c4d6; padding: 6px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.foglio td { border: .5pt solid #c9c9c9; padding: 6px 8px; vertical-align: top; }
.foglio td.q { text-align: right; white-space: nowrap; width: 70px; font-variant-numeric: tabular-nums; }
.foglio tr.cat td { background: #f3efe4; color: #24395c; font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.foglio .note { margin: 12px 0 0; font-size: 11.5px; }
.foglio .firme { display: flex; gap: 40px; margin: 34px 0 0; font-size: 11px; }
.foglio .firme div { flex: 1; border-top: .5pt solid #999; padding-top: 5px; }
.foglio .pie { margin: 16px 0 0; font-size: 9.5px; color: #555; }