/* =============================================================================
   ORDINE — elenco articoli, gruppi, carrello.
   Mobile: elenco a tutta larghezza + barra azioni fissa sopra la tab bar;
           il carrello è uno sheet.
   Desktop (>=1200px): elenco + pannello carrello fisso a destra.
   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%); }
.riga-info { flex: 1; min-width: 0; }
.riga-nome { 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; }
.riga-meta .badge { height: 16px; font-size: 10px; padding: 0 6px; }
.riga .pref { border: 0; background: none; color: var(--line-strong); 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: var(--sp-2) var(--sp-4); display: flex; gap: var(--sp-2); }
.ordine-bar .btn-primary { flex: 1; }

/* 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 «Il tuo ordine» 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); }
.crow-info .col { color: var(--accent-ink); font-weight: 600; }
.crow .x { border: 0; background: none; color: var(--muted); padding: 4px; border-radius: 50%; display: flex; }
.crow .x svg { width: 16px; height: 16px; }
@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); }

/* 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); }

@media (min-width: 1024px) {
  .capitoli { display: none; } /* su desktop i capitoli stanno nella sidebar */
  .ordine-bar { display: none; }
}
@media (min-width: 1200px) {
  .ordine { grid-template-columns: minmax(0, 1fr) var(--w-aside); }
  .carrello { display: block; }
}
@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; }