/* =============================================================================
   BASE — reset, tipografia, shell dell'app (sidebar / topbar / tabbar).
   Due esperienze: desktop (>=1024px) con sidebar fissa e topbar;
   mobile (<768px) con header compatto, subbar e tab bar in basso.
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* ⚠️ `scrollbar-gutter: stable`: lo spazio della barra di scorrimento è sempre riservato.
   Senza, ogni volta che si apre un pannello il blocco dello scorrimento fa sparire la barra
   e la pagina dietro si allarga di colpo (misurato: 15px) — un sobbalzo a ogni «Dettagli».
   Sul telefono non cambia niente: lì la barra sta sopra al contenuto e non occupa spazio. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body {
  margin: 0;
  font: var(--fs-15)/var(--lh-base) var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;   /* iOS: la barra di Safari cambia l'altezza reale */
}
/* Blocco dello scorrimento — la via normale: la pagina resta dov'è e tutto ciò che è
   appiccicato al documento continua a funzionare. Vale ovunque tranne iOS (vedi `bloccaBody`). */
html.senza-scroll { overflow: hidden; }
/* ⚠️ SOLO iOS, che ignora `overflow: hidden` sullo scorrimento principale: qui il body viene
   fissato con `top: -Ypx`, cioè **spostando l'intero documento**. Le tre regole qui sotto
   esistono solo per rimediare a quello spostamento, e valgono solo in quel caso. */
body.bloccato { position: fixed; left: 0; right: 0; overflow: hidden; }
/* ⚠️⚠️ Con un pannello aperto il body diventa `position: fixed` con `top: -Ypx` — l'unico modo
   di bloccare lo scorrimento su iOS (vedi `bloccaBody` in ui.js). Quel `top` sposta in su TUTTO
   il documento, e a quel punto `sticky` non ha più niente a cui agganciarsi, perché il body non
   scorre: sidebar e testata scivolano fuori schermo **esattamente di quanto si era scorso**.
   Aprendo una scheda dopo aver scorso la pagina sparivano tutt'e due.
   Mentre il blocco è attivo si ancorano alla FINESTRA: il documento è fermo, quindi è la stessa
   posizione, solo calcolata rispetto a qualcosa che non si è spostato.
   ⚠️ La larghezza va ridichiarata: da elemento fuori flusso la sidebar non la prende più dalla
   colonna della griglia (la colonna resta, perché è dichiarata in `grid-template-columns`).
   ⚠️ Restano fuori `.sec-head` e `.carrello`, che pure sono sticky: stanno dietro al velo del
   pannello, e appuntarli darebbe un titolo fisso su una pagina che intanto non scorre. */
body.bloccato .sidebar { position: fixed; top: 0; left: 0; width: var(--w-sidebar); }
body.bloccato .testa { position: fixed; top: 0; left: 0; right: 0; }
/* ⚠️ La testata, diventando `fixed`, ESCE DAL FLUSSO e il contenuto sotto risale della sua
   altezza: aprendo un pannello la pagina dietro saliva di uno scatto e riscendeva chiudendolo.
   Se ne rimette lo spazio. `--h-top` è l'altezza reale di `.testa` (topbar + subbar), misurata
   dal JS in `misura()`; il ripiego serve al primo disegno, prima che quella misura esista. */
body.bloccato .shell { padding-top: var(--h-top, var(--h-topbar)); }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
/* iOS: niente stile nativo sui controlli, niente flash grigio al tocco, niente ritardo/doppio-tap-zoom */
button, input, select, textarea, a, [role="button"] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button, input:not([type="checkbox"]):not([type="radio"]), select, textarea { -webkit-appearance: none; appearance: none; border-radius: 0; }
input[type="search"] { -webkit-appearance: none; appearance: none; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--accent-ink); }
strong, b { font-weight: 600; }
:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 8px; top: -60px; z-index: 200; background: var(--primary); color: var(--on-primary); padding: 10px 14px; border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 700; text-decoration: none; }
.skip:focus { top: 0; }

/* micro-etichetta maiuscola: usata con parsimonia, mai come titolo di sezione */
.eyebrow { font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-ink); }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }
.txt-sm { font-size: var(--fs-13); }

/* ---------------------------------------------------------------------------
   SHELL
   --------------------------------------------------------------------------- */
.app { display: grid; grid-template-columns: 1fr; min-height: 100vh; min-height: 100dvh; }

/* Sidebar: solo desktop */
.sidebar {
  display: none;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  background: var(--brand-bg); color: var(--on-brand);
  flex-direction: column;
  border-right: 1px solid var(--brand-line);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--brand-line); }
/* ⚠️ Si dà l'ALTEZZA e si lascia libera la larghezza. Il file del logo è 320×237, cioè
   largo e basso: dentro un riquadro quadrato con `object-fit: contain` a comandare è la
   larghezza, e il segno risultava alto poco più della metà del riquadro — alzare il numero
   non cambiava niente di visibile. Così invece 64 sono 64 di logo. */
.brand img { height: 64px; width: auto; object-fit: contain; }
.brand b { display: block; font-size: var(--fs-16); letter-spacing: .04em; }
.brand span { display: block; font-size: var(--fs-12); color: var(--on-brand-2); }

.nav-main { padding: var(--sp-3); display: grid; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 12px; border-radius: var(--r-md);
  color: var(--on-brand-2); text-decoration: none; font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-item svg { width: 20px; height: 20px; flex: 0 0 auto; }
@media (hover: hover) { .nav-item:hover { background: rgba(255,255,255,.07); color: var(--on-brand); } }
.nav-item[aria-current="page"] { background: rgba(200,153,46,.16); color: var(--gold-400); }
.nav-item .badge { margin-left: auto; }

/* ⚠️ Il filo di separazione sta sul CONTENITORE che scorre, non sul suo contenuto: cosi'
   resta fermo per costruzione e divide sempre i tasti di navigazione dall'elenco sotto. */
.side-ctx { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 0 var(--sp-3) var(--sp-3); border-top: 1px solid var(--brand-line); }
/* ⚠️ «Capitoli» / «Categorie» sta DENTRO l'elenco che scorre: senza `sticky` se ne andava
   via al primo scorrimento e restava una colonna di nomi senza piu' un titolo che dicesse
   di cosa fossero — con 18 capitoli succede subito. Sticky a `top: 0` la tiene in cima e le
   fa fare da testata all'elenco.
   ⚠️ Il fondo deve essere PIENO (`--brand-bg`): le voci le passano sotto, e con un fondo
   trasparente si vedrebbero in trasparenza attraverso la scritta. */
/* ⚠️ NIENTE `opacity` qui. L'opacità si applica all'elemento intero, sfondo compreso: con
   `opacity: .9` questa testata è fissa ma **traslucida**, e le voci che le scorrono sotto si
   vedono in trasparenza attraverso la scritta. Finché non era `sticky` non si notava, perché
   sotto non ci passava niente. Se un giorno la si vuole più tenue si smorza il COLORE, non
   l'elemento. */
.side-ctx .eyebrow { position: sticky; top: 0; z-index: 1; background: var(--brand-bg); padding: var(--sp-3) 12px var(--sp-2); margin-bottom: 0; color: var(--gold-400); }
.side-link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; text-align: left; background: none; border: 0;
  padding: 7px 12px; border-radius: var(--r-sm);
  color: var(--on-brand-2); font-size: var(--fs-14); text-decoration: none;
}
@media (hover: hover) { .side-link:hover { color: var(--on-brand); background: rgba(255,255,255,.06); } }
.side-link.on { color: var(--on-brand); background: rgba(255,255,255,.10); font-weight: 600; }
.side-foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--brand-line); font-size: var(--fs-12); color: var(--on-brand-2); line-height: 1.45; }
.side-foot a { color: var(--on-brand-2); }

/* Contenitore principale */
.shell { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow-x: clip; }

/* Topbar. Mobile: due righe (titolo + azioni, poi la ricerca a tutta larghezza).
   Desktop: una riga, ricerca a larghezza fissa nel mezzo. Le altezze reali vengono
   misurate dal JS in --h-top / --h-sub per gli elementi sticky sottostanti. */
/* Il blocco .testa (topbar + subbar) è l'unico elemento sticky in alto: la loro
   posizione reciproca non dipende da nessuna misura. --h-top = altezza di .testa. */
.testa { position: sticky; top: 0; z-index: 40; }
.topbar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  min-height: var(--h-topbar);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding: calc(var(--sp-2) + env(safe-area-inset-top)) calc(var(--sp-4) + env(safe-area-inset-right)) var(--sp-2) calc(var(--sp-4) + env(safe-area-inset-left));
}
.topbar h1 { font-size: var(--fs-18); font-weight: 700; letter-spacing: -.01em; white-space: nowrap; line-height: 1.2; }
.topbar .titolo { flex: 1 1 0; min-width: 0; }
.topbar .sotto { display: none; font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .brand-mini { display: flex; align-items: center; gap: var(--sp-2); }
.topbar .brand-mini img { height: 50px; width: auto; object-fit: contain; }
.topbar .spacer { flex: 1; }
.topbar .actions { display: flex; align-items: center; gap: var(--sp-2); }
.topbar .search-slot { flex: 1 1 100%; order: 10; }
.topbar .solo-desktop { display: none; }
.nascondi-mobile { display: none !important; }

/* Subbar: riga sotto la topbar (mobile: chip categorie; desktop: vuota o tab) */
.subbar {
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4);
}
.subbar:empty { display: none; }

.main { flex: 1; width: 100%; max-width: var(--w-content); margin: 0 auto; padding: var(--sp-4) var(--sp-4) calc(var(--h-tabbar) + var(--h-dock, 0px) + var(--h-obar, 0px) + var(--sp-6)); }
.main:focus { outline: none; }

/* Dock: solo mobile, fisso sopra la tab bar. Ospita la ricerca. */
.dock {
  position: fixed; left: 0; right: 0; bottom: calc(var(--h-tabbar) + env(safe-area-inset-bottom)); z-index: 44;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-4);
}
.dock:empty { display: none; }
/* tastiera aperta (iOS): il JS misura visualViewport e mette --kb; il dock con la ricerca si alza
   sopra la tastiera, tab bar e barra azioni si nascondono perché sarebbero sotto o sprecherebbero spazio */
body.tastiera .dock { bottom: var(--kb, 0px); }
body.tastiera .tabbar, body.tastiera .ordine-bar { display: none; }

/* Tab bar: solo mobile */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--h-tabbar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface); border-top: 1px solid var(--line);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); text-decoration: none; font-size: var(--fs-11); font-weight: 600; position: relative;
}
.tab svg { width: 22px; height: 22px; }
.tab[aria-current="page"] { color: var(--accent-ink); }
.tab .badge { position: absolute; top: 6px; left: calc(50% + 6px); }

/* Pagine semplici (impostazioni, condizioni, storico) */
.page { max-width: 760px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.page-head h2 { font-size: var(--fs-24); font-weight: 700; letter-spacing: -.01em; }
.page-head p { color: var(--ink-2); margin-top: var(--sp-1); }
.section-title { font-size: var(--fs-16); font-weight: 700; margin: var(--sp-6) 0 var(--sp-3); }
.prose h3 { font-size: var(--fs-15); margin: var(--sp-5) 0 var(--sp-1); }
.prose p { color: var(--ink-2); font-size: var(--fs-14); }

/* ---------------------------------------------------------------------------
   BREAKPOINTS
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .topbar .sotto { display: block; }
  .main { padding: var(--sp-6) var(--sp-6) var(--sp-10); }
  .subbar { padding: var(--sp-2) var(--sp-6); }
  .topbar { padding: 0 var(--sp-6); }
}

@media (min-width: 1024px) {
  .app { grid-template-columns: var(--w-sidebar) 1fr; }
  /* Sul desktop la testata comincia dopo la sidebar, non dal bordo dello schermo. */
  body.bloccato .testa { left: var(--w-sidebar); }
  /* ⚠️ Togliendo la sidebar dal flusso resta un solo figlio in griglia, e la collocazione
     automatica lo mette nella PRIMA colonna: il contenuto si stringeva a 248px dietro al
     pannello, e all'apertura si vedeva la pagina rifluire. La colonna va detta a mano. */
  body.bloccato .shell { grid-column: 2; }
  .sidebar { display: flex; }
  .tabbar { display: none; }
  .dock { display: none; }
  .topbar { flex-wrap: nowrap; padding: 0 var(--sp-6); gap: var(--sp-4); }
  .topbar .brand-mini { display: none; }
  .topbar .titolo { flex: 0 1 auto; }
  /* La ricerca non sta più nella topbar: se ne va nella riga sotto, sopra all'elenco.
     ⚠️ NON a tutta larghezza: un campo di ricerca lungo mezzo schermo sembra un banner e non
     un campo, e il testo che ci si scrive resta abbandonato all'estremo sinistro. Larghezza
     fissa (`--w-search`, la stessa che aveva nella testata) e allineata a sinistra, dove
     comincia l'elenco che filtra. */
  /* ⚠️ `width` e `justify-self`, non `flex`: `.subbar` è una GRIGLIA, e le proprietà flex le
     ignora senza dire niente — la ricerca restava larga quanto la colonna. */
  .subbar .search-slot { width: min(var(--w-search), 100%); justify-self: start; }
  /* ⚠️ La ricerca deve cominciare dove cominciano i prodotti. `.main` è centrato dentro un
     massimo (`--w-content`), la subbar invece occupa tutta la larghezza: oltre i ~1490px di
     finestra le due sinistre divergevano (misurato a 1600: 272 contro 320). Qui si rifà lo
     stesso conto — metà dello spazio avanzato più il rientro di `.main` — così restano
     allineate a qualsiasi larghezza. Fondo e filo della riga restano a tutta pagina. */
  .subbar { padding-inline: max(var(--sp-6), calc((100% - var(--w-content)) / 2 + var(--sp-6))); }
  /* ⚠️ Su desktop la riga è una FILA: ricerca a sinistra e, accanto, i comandi che agiscono
     sull'elenco. Sul telefono resta una griglia a colonna, perché lì contiene le pastiglie
     delle categorie, che si scorrono di lato e vogliono una riga tutta per sé. */
  .subbar { display: flex; align-items: center; }
  .topbar .solo-desktop { display: inline; }
  .nascondi-mobile { display: inline-flex !important; }
  .subbar .solo-mobile { display: none; }
  .subbar:not(:has(> :not(.solo-mobile))) { display: none; } /* figli diretti: se ha solo blocchi solo-mobile, sparisce del tutto */
  .main { padding-bottom: var(--sp-10); }
}

/* ---------------------------------------------------------------------------
   STAMPA — a schermo #print non esiste; in stampa esiste solo lui
   --------------------------------------------------------------------------- */
#print { display: none; }
@media print {
  @page { margin: 12mm; }
  body { background: #fff; color: #1b1d22; }
  .app, .sheet-host, .toasts, .skip { display: none !important; }
  #print { display: block; }
}