/* ======================================================================
   LAYOUT DESKTOP DEL WIZARD v3  —  31/8/2026
   ----------------------------------------------------------------------
   COSA FA
   Sopra i 1200px le tre schermate del wizard che hanno una barra in fondo
   (box, consegna, dati) diventano due colonne: il contenuto a sinistra e
   quella stessa barra, senza toccarne il markup, come riquadro fermo a
   destra. La ricerca e i filtri stanno sopra, su una riga sola.

   LE REGOLE CHE MI SONO DATO
   1. Niente markup nuovo e niente JavaScript: qui dentro si sposta e si
      ridisegna soltanto cio' che il telefono gia' ha. Il riquadro di destra
      E' la barra del box, non una copia.
   2. Ogni regola vive dentro @media (min-width:1200px). Sotto quella soglia
      il browser non legge una riga di questo file: il telefono resta identico.
      Lo verifica tools/check-v3-desktop.py, che fallisce se trovo una sola
      dichiarazione fuori da una media query.
   3. Ogni regola parte da html[data-vista="..."]: tocca solo le schermate
      dell'ordine. Home (che ha il suo v3-home-desktop.css) e area riservata
      non vengono sfiorate.
   4. Niente colori scritti a mano che valgano per un tema solo: dove serve
      un colore ci sono tutte e due le versioni, scura e chiara.

   PER TORNARE INDIETRO
   Rimettere il commento intorno al <link> in index.html (una riga). La v3
   torna a essere quella di prima ovunque, senza altre modifiche.
   ====================================================================== */

@media (min-width: 1200px) {

  /* ------------------------------------------------------------------
     IL TELAIO
     Solo le tre schermate con la barra si allargano. La conferma
     dell'indirizzo resta una colonna stretta e centrata: li' non c'e'
     niente da riepilogare, e allargarla vorrebbe dire inventare contenuti.
     ------------------------------------------------------------------ */
  html[data-vista="/ordina/box"] .app,
  html[data-vista="/ordina/consegna"] .app,
  html[data-vista="/ordina/dati"] .app {
    max-width: 1280px;
    padding-left: 24px;
    padding-right: 24px;
  }
  html[data-vista="/ordina/indirizzo/conferma"] .app { max-width: 560px; }

  /* La barra di scorrimento compare e scompare cambiando schermata: senza
     questo la pagina salta di 15px a ogni passaggio. */
  html[data-vista^="/ordina/"] { scrollbar-gutter: stable; }

  /* ------------------------------------------------------------------
     LE DUE COLONNE
     #view e' il contenitore che la SPA riscrive a ogni schermata: i suoi
     figli diretti sono sempre gli stessi (contenuto, spaziatore, barra),
     quindi bastano loro per costruire la griglia.
     ------------------------------------------------------------------ */
  html[data-vista="/ordina/box"] #view,
  html[data-vista="/ordina/consegna"] #view,
  html[data-vista="/ordina/dati"] #view {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 384px;
    column-gap: 28px;
    align-items: start;
  }
  /* Nessun grid-column qui: un selettore con #view vincerebbe per specificita'
     su quelli a classe della barra, che finirebbe a sinistra. Il posto lo decide
     la griglia da sola — la colonna di destra e' occupata dalla barra su tutte
     le righe, quindi a ogni altro figlio resta la prima. */
  html[data-vista="/ordina/box"] #view > *,
  html[data-vista="/ordina/consegna"] #view > *,
  html[data-vista="/ordina/dati"] #view > * { min-width: 0; }

  /* Lo spaziatore serve solo a non farsi coprire dalla barra in fondo:
     con la barra di lato non ha piu' motivo di esistere. */
  html[data-vista="/ordina/box"] .box-spacer,
  html[data-vista="/ordina/consegna"] .box-spacer,
  html[data-vista="/ordina/dati"] .box-spacer { display: none; }

  /* ------------------------------------------------------------------
     RICERCA E FILTRI: DUE RIGHE, SOPRA LE DUE COLONNE
     Come sul telefono: la ricerca ha la sua riga tutta per se', i chip
     stanno sotto. Cambia solo la larghezza, che qui e' quella piena.
     ------------------------------------------------------------------ */
  html[data-vista="/ordina/box"] .filters {
    grid-column: 1 / -1;
    margin: 0 -24px 18px;
    padding: 14px 24px 13px;
  }
  html[data-vista="/ordina/box"] .search2 { margin-bottom: 11px; }
  html[data-vista="/ordina/box"] .fchips  { padding-bottom: 0; }
  /* I gettoni dei filtri attivi restano nascosti come sul telefono: qui i
     filtri scelti si vedono gia' accesi fra i chip. */

  /* ------------------------------------------------------------------
     LE SCHEDE: UNA PER RIGA, APERTA IN ORIZZONTALE
     Tre fasce nette — foto, descrizione, acquisto — cosi' il pulsante sta
     sempre nello stesso punto scendendo con l'occhio.
     ------------------------------------------------------------------ */
  html[data-vista="/ordina/box"] .wlist { gap: 14px; }

  html[data-vista="/ordina/box"] .wcard {
    flex-direction: row;
    align-items: stretch;
    gap: 22px;
    padding: 16px;
    overflow: visible;
  }
  html[data-vista="/ordina/box"] .wcleft {
    width: 156px;
    min-width: 156px;
    min-height: 184px;
    border-radius: 14px;
  }
  html[data-vista="/ordina/box"] .wcright {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
  }
  html[data-vista="/ordina/box"] .wc-info {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 22px;
  }
  html[data-vista="/ordina/box"] .wchem { align-self: flex-start; }
  /* Niente riga divisoria: a separare le tre fasce basta lo spazio. */
  html[data-vista="/ordina/box"] .wc-buy {
    flex: none;
    width: 232px;
    padding-left: 26px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
  }

  html[data-vista="/ordina/box"] .wc-buy .wprice { margin-top: 0; text-align: right; align-items: flex-end; }
  html[data-vista="/ordina/box"] .wc-buy .addbtn { margin-top: 0; }
  html[data-vista="/ordina/box"] .wc-buy .card-stepper { margin-top: 0; justify-content: flex-end; }

  /* ------------------------------------------------------------------
     LA BARRA DEL BOX DIVENTA IL RIQUADRO DI DESTRA
     Stesso elemento, stesso contenuto, stessa funzione: cambia solo dove
     sta e come si impagina. Perche' l'animazione della bottiglia finisca
     qui dentro non serve toccare niente: flyToBox() prende il bersaglio
     con getBoundingClientRect(), quindi segue le casse dove sono.
     ------------------------------------------------------------------ */
  html[data-vista="/ordina/box"] .boxbar,
  html[data-vista="/ordina/consegna"] .dlv-bar,
  html[data-vista="/ordina/dati"] .dlv-bar {
    grid-column: 2;
    position: sticky;
    left: auto;
    right: auto;
    bottom: auto;
    transform: none;
    width: auto;
    max-width: none;
    z-index: 20;
    align-self: start;
    flex-direction: column;
    align-items: stretch;
    border-radius: 18px;
    border: 1px solid var(--glass-bd);
    padding: 16px;
    /* Il riquadro deve stare tutto nella prima schermata: si ferma sotto la
       fascia dei filtri e non supera mai l'altezza della finestra. */
    max-height: calc(100vh - var(--dk-top) - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  html[data-vista="/ordina/box"] .boxbar {
    --dk-top: 84px;                 /* sotto la fascia della ricerca */
    grid-row: 2 / span 50;          /* la riga 1 e' dei filtri */
    top: var(--dk-top);
    gap: 12px;
  }
  html[data-vista="/ordina/consegna"] .dlv-bar,
  html[data-vista="/ordina/dati"] .dlv-bar {
    --dk-top: 20px;                 /* qui sopra non c'e' la fascia filtri */
    grid-row: 1 / span 50;
    top: var(--dk-top);
    gap: 14px;
  }

  /* Il fondo e l'ombra: la barra li ha pensati per stare appoggiata in
     basso (bordo solo sopra, ombra verso l'alto). Da riquadro servono
     chiusi su quattro lati — in tutti e due i temi. */
  html[data-vista="/ordina/box"] .boxbar,
  html[data-vista="/ordina/consegna"] .dlv-bar,
  html[data-vista="/ordina/dati"] .dlv-bar {
    border-top: 1px solid var(--glass-bd);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .38);
  }
  html[data-theme="light"][data-vista="/ordina/box"] .boxbar,
  html[data-theme="light"][data-vista="/ordina/consegna"] .dlv-bar,
  html[data-theme="light"][data-vista="/ordina/dati"] .dlv-bar {
    border: 1px solid rgba(15, 23, 42, .12);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .10);
  }

  /* --- dentro il riquadro del box: tutto incolonnato, casse a sinistra --- */
  html[data-vista="/ordina/box"] .bx-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    flex-wrap: nowrap;
  }
  html[data-vista="/ordina/box"] .bx-crates { justify-content: flex-start; }
  html[data-vista="/ordina/box"] .bx-crate  { padding: 6px; }
  html[data-vista="/ordina/box"] .bx-slot   { width: 19px; height: 23px; }
  html[data-vista="/ordina/box"] .bx-undo   { width: 44px; }

  html[data-vista="/ordina/box"] .bx-meta { gap: 3px; }
  html[data-vista="/ordina/box"] .bx-stat { font-size: 15px; }
  html[data-vista="/ordina/box"] .bx-cnt  { font-size: 13px; }
  html[data-vista="/ordina/box"] .bx-see  { font-size: 13px; }

  html[data-vista="/ordina/box"] .bx-col3 {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  html[data-vista="/ordina/box"] .bx-tot {
    font-size: 30px;
    line-height: 1;
    text-align: left;
  }
  html[data-vista="/ordina/box"] .bx-deliv { align-self: flex-start; }
  html[data-vista="/ordina/box"] .bx-cta,
  html[data-vista="/ordina/box"] .bx-cta.big {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    min-height: 48px;
  }

  /* --- dentro il riquadro di consegna e dati --- */
  html[data-vista="/ordina/consegna"] .dlv-bar,
  html[data-vista="/ordina/dati"] .dlv-bar { padding: 18px; }
  html[data-vista="/ordina/consegna"] .dlv-bar-l,
  html[data-vista="/ordina/dati"] .dlv-bar-l { gap: 4px; }
  html[data-vista="/ordina/consegna"] .dlv-bar-tot,
  html[data-vista="/ordina/dati"] .dlv-bar-tot { font-size: 30px; line-height: 1; }
  html[data-vista="/ordina/consegna"] .dlv-bar-sub,
  html[data-vista="/ordina/dati"] .dlv-bar-sub { font-size: 12.5px; }
  html[data-vista="/ordina/consegna"] .dlv-cta,
  html[data-vista="/ordina/dati"] .dlv-cta {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    min-height: 48px;
  }
  /* La maniglia da trascinare non ha senso col mouse; il riquadro resta
     cliccabile e "Vedi dettagli" apre lo stesso pannello di sempre. */
  html[data-vista="/ordina/consegna"] .dlv-grab,
  html[data-vista="/ordina/dati"] .dlv-grab { display: none; }

  /* ------------------------------------------------------------------
     IL PANNELLO DEI DETTAGLI
     Sul telefono sale dal basso: col mouse diventa una finestra al centro,
     con la sua X (che nel markup c'e' gia', nascosta) al posto della
     maniglia da trascinare.
     ------------------------------------------------------------------ */
  html[data-vista^="/ordina/"] .dsheet {
    top: 50%;
    bottom: auto;
    height: auto;
    max-height: 82vh;
    max-width: 560px;
    border-radius: 20px;
    transform: translate(-50%, -50%) scale(.96);
    opacity: 0;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .24s ease, visibility 0s linear .24s;
  }
  html[data-vista^="/ordina/"] .dsheet.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .24s ease, visibility 0s;
  }
  html[data-vista^="/ordina/"] .d-grab { display: none; }
  html[data-vista^="/ordina/"] .d-x    { display: flex; }

  /* Il messaggio che compare dopo l'aggiunta stava sopra la barra in
     fondo: ora la barra non e' li'. Torna in basso al centro, dove non
     copre ne' la lista ne' il riquadro. */
  html[data-vista="/ordina/box"] .box-toast { bottom: 28px; }

  /* QUANDO SI AGGIUNGE, SI MUOVE SOLO LA BOTTIGLIA.
     La pulsazione della barra (@keyframes bppulse) e' scritta per la barra
     centrata in fondo: ogni fotogramma rimette translateX(-50%), che qui
     spara il riquadro a mezza larghezza a sinistra e lo riporta indietro.
     Sul telefono resta com'e'; qui si spegne. */
  html[data-vista="/ordina/box"] .boxbar.pulse { animation: none; }

  /* ------------------------------------------------------------------
     USABILITA' COL MOUSE E CON LA TASTIERA
     ------------------------------------------------------------------ */
  html[data-vista="/ordina/box"] .wcard { transition: border-color .18s ease, box-shadow .18s ease; }
  html[data-vista="/ordina/box"] .wcard:hover { border-color: var(--sel-bd); }
  html[data-theme="light"][data-vista="/ordina/box"] .wcard:hover { border-color: rgba(112, 98, 255, .45); }

  html[data-vista^="/ordina/"] .btn-theme { display: flex; }
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  html[data-vista^="/ordina/"] .dsheet { transition: none; }
  html[data-vista="/ordina/box"] .wcard { transition: none; }
}