/* ------------------------------------------------------------------
   Interfaccia della sezione "Liquori commerciali".
   ------------------------------------------------------------------
   E' quella che Lorenzo ha scelto il 19/08/2026, e fino al 20/08 viveva in un
   mu-plugin che serviva la rotta fuori dal tema. Quel file e' stato tolto
   perche' la sua pagina era l'unica del sito senza age gate: qui c'e' solo la
   sua interfaccia, dentro il template dell'archivio.

   Tutto sta annidato sotto .lq-schede di proposito. I nomi sono generici
   (.scheda, .barra, .numeri, .griglia) perche' nella bozza avevano una pagina
   tutta per se': in una pagina del tema, senza confine, finirebbero addosso
   ad Astra e viceversa.
   ------------------------------------------------------------------ */

:root{
  /* Gli stati in design-system.md sono ancora TODO. Invece di importare un
     verde e un ambra estranei alla palette, i tre stati della provenienza si
     mappano sui colori che il sistema ha gia', e il significato ci sta bene:
       misurato -> blu, il colore di cio' che il sito afferma
       ricavato -> arancio, gia' usato per attirare l'occhio
       assente  -> muto, che e' letteralmente il grigio del secondario     */
  --st-misurato:var(--lq-blu);           --st-misurato-sf:#E4EBF1;
  --st-ricavato:#8F4E04;            --st-ricavato-sf:#FBEBD5;
  --st-assente:#4F5C66;             --st-assente-sf:#ECE8DC;
}

/* Astra mette il contenuto in un contenitore flex: senza una larghezza
   dichiarata la sezione si dimensiona sul proprio contenuto e resta a 965px
   dentro un contenitore da 1240, con la griglia schiacciata a una colonna
   sola. Misurato prima di scriverlo.

   ⚠️ La classe e' .lq-schede e non .lq-sezione, che pure descriverebbe bene
   questa pagina: nel child theme .lq-sezione e' il blocco-schermata della
   HOMEPAGE, e si porta dietro `scroll-snap-align:start` piu' un padding-top
   calcolato per centrare tre schede in una finestra. Su questa pagina quel
   nome dava 31px di stacco in piu' sotto l'header (misurato a 1280x720) e
   l'unico punto di aggancio dello scroll fuori dalla home -- la famiglia di
   difetti descritta in CLAUDE.md al paragrafo dello scroll-snap. */
.lq-schede {
  width: 100%;
  flex: 1 1 100%;
  min-width: 0;
  /* Il contenitore del tema impagina gia': qui basta il respiro verticale. */
  /* ------------------------------------------------------------------
     Tema "Agrumeto": blu mediterraneo + agrumi, Fraunces display + Karla
     testo. I token sono quelli di design-system.md e del child theme, non
     una reinterpretazione: una bozza con colori suoi fa giudicare la bozza
     invece del componente.
     ------------------------------------------------------------------ */

  /* Gli stessi file del sito, self-hosted. Non fonts.googleapis.com: il child
     theme li ha portati in casa apposta per non chiamare Google prima del
     consenso, e una bozza che riaprisse quella porta insegnerebbe la cosa
     sbagliata a chi la copia. */

  *{box-sizing:border-box}

  /* Link alla scheda completa dentro il dettaglio. */
  .apri-scheda{display:inline-block;margin-top:14px;padding:9px 16px;border-radius:6px;
    background:var(--lq-blu);color:#FFFDF6;text-decoration:none;font-weight:700;font-size:13.5px}
  .apri-scheda:hover{background:var(--lq-arancio-hover);color:#FFFDF6}

  /* Il conteggio delle schede, in coda alla descrizione della sezione: e' una
     riga di servizio, non la presentazione, e si legge come tale. */
  .ast-archive-description .lq-schede__riassunto{margin-top:4px;font-size:.85rem}

  /* Niente padding sopra: lo stacco fra la testata e il contenuto e' uno solo,
     il margin-bottom di .ast-archive-description (18px), lo stesso che separa
     titolo e griglia su Ricette o Novita'. Sommandoci i 28px di qui, questa
     sezione staccava il doppio delle altre.
     E niente padding laterale: la gabbia la da' gia' il contenitore del tema,
     a ogni misura di schermo. Quando ce l'aveva, sotto i 900px il pannello dei
     filtri partiva 20px piu' a destra del titolo. */
  .guscio{display:grid;grid-template-columns:262px 1fr;gap:28px;padding:0 0 28px;
    align-items:start}
  @media (max-width:900px){.guscio{grid-template-columns:1fr;padding:0 0 20px}}
  .pannello{background:var(--lq-carta);border:1px solid var(--lq-linea);border-radius:6px;padding:18px}
  .pannello h2{margin:0 0 14px;font-size:11.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.13em;color:var(--lq-arancio)}
  .gruppo{margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--lq-linea)}
  .gruppo:last-child{border:0;margin:0;padding:0}
  .gruppo h3{margin:0 0 9px;font-family:Fraunces,Georgia,serif;font-size:15px;font-weight:600;
    color:var(--lq-blu)}
  label.voce{display:flex;align-items:center;gap:8px;font-size:14px;padding:3px 0;cursor:pointer}
  label.voce:hover{color:var(--lq-arancio)}
  label.voce input{accent-color:var(--lq-blu)}
  label.voce .n{margin-left:auto;color:var(--lq-muto);font-size:12px;font-variant-numeric:tabular-nums}
  input[type=range]{width:100%;accent-color:var(--lq-arancio)}
  .intervallo{display:flex;justify-content:space-between;font-size:12px;color:var(--lq-muto);
    font-variant-numeric:tabular-nums}

  /* Una barra sola, su una riga sola.
     Misurate prima di toccarle, le tre altezze erano 55,6px il campo di
     ricerca, 40 la tendina e 42,1 il tasto "Azzera filtri", su tre quote
     diverse: il tasto galleggiava 9px sopra il bordo inferiore degli altri
     due. Nessuna delle tre era una scelta -- erano tre padding scritti in
     tre punti, piu' uno di Astra (vedi .cerca input).
     Da qui in poi l'altezza e' una: --h. I 44px non sono un gusto, sono il
     bersaglio minimo per un dito, la stessa ragione per cui il campo passa a
     16px di carattere sotto i 700px.
     `align-items:end` e non `center` perche' l'etichetta "Ordina" sta SOPRA
     la sua tendina: quel blocco e' alto 20px in piu' degli altri, e centrarlo
     manderebbe la tendina sotto la linea di tutti. Allineati in basso, i tre
     comandi condividono bordo inferiore e superiore. */
  .barra{--h:44px;display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:18px}
  .barra select,.barra button{font:inherit;font-size:14px;height:var(--h);padding:0 12px;
    border-radius:4px;border:1px solid var(--lq-linea);background:var(--lq-carta);
    color:var(--lq-testo)}
  .barra button{cursor:pointer;font-weight:700;color:var(--lq-blu)}
  .barra button:hover{border-color:var(--lq-arancio);color:var(--lq-arancio)}
  /* "Cerca in": il menu dei campi.
     Stessa forma del blocco "Ordina" -- etichetta sopra, comando alto --h
     sotto -- perche' sulla barra fa lo stesso mestiere e deve stare sulla
     stessa linea. Il <details> fa da se' apertura, chiusura e tastiera: un
     menu costruito a mano andrebbe reinsegnato a Tab, a Invio e a Esc. */
  .campi{position:relative;display:flex;flex-direction:column}
  .campi__et{font-size:14px;line-height:20px}
  .campi__menu summary{display:flex;align-items:center;gap:8px;height:var(--h);
    padding:0 12px;border:1px solid var(--lq-linea);border-radius:4px;
    background:var(--lq-carta);color:var(--lq-testo);font-size:14px;
    cursor:pointer;list-style:none;white-space:nowrap}
  .campi__menu summary::-webkit-details-marker{display:none}
  /* Il triangolino: senza, il riquadro sembra un'etichetta e non un comando. */
  .campi__menu summary::after{content:'';width:0;height:0;margin-left:2px;
    border:4px solid transparent;border-top-color:var(--lq-muto);
    transform:translateY(2px)}
  .campi__menu[open] summary::after{transform:translateY(-2px) rotate(180deg)}
  .campi__menu summary:hover{border-color:var(--lq-arancio);color:var(--lq-arancio)}
  .campi__menu summary:focus-visible{outline:2px solid var(--lq-arancio);outline-offset:1px}
  /* Arancio quando la ricerca NON guarda piu' dappertutto: e' uno stato che
     cambia i risultati e resta nascosto dentro un menu chiuso, quindi il tasto
     deve dirlo da fermo. Rosso no: non e' un errore, e' una scelta. */
  .campi--ridotto .campi__menu summary,
  .campi--vuoto .campi__menu summary{border-color:var(--lq-arancio);color:var(--lq-arancio);
    font-weight:700}
  .campi--vuoto .campi__menu summary{background:var(--st-ricavato-sf)}
  /* Il pannello galleggia: se spingesse la riga, aprirlo sposterebbe la
     griglia sotto, cioe' la cosa che si sta guardando. */
  .campi__elenco{position:absolute;z-index:20;top:100%;left:0;margin-top:4px;
    min-width:210px;max-width:calc(100vw - 40px);padding:8px;
    background:var(--lq-carta);border:1px solid var(--lq-linea);border-radius:6px;
    box-shadow:0 6px 20px rgba(23,63,95,.16)}
  /* Su schermo stretto il menu prende una riga sua. Non e' estetica: il
     pannello si ancora al bordo sinistro del comando, e con il comando
     spinto a destra dalla riga finiva a filo del bordo dello schermo --
     misurato a 511px, ultimo pixel esatto. Da riga intera parte da sinistra
     e ci sta con margine, e il bersaglio da toccare diventa largo quanto la
     barra. */
  @media(max-width:700px){.campi{flex:1 1 100%}}
  .campi__elenco .voce{padding:5px 4px}
  .campi__elenco .voce--tutto{font-weight:700;color:var(--lq-blu);
    margin-bottom:5px;padding-bottom:8px;border-bottom:1px solid var(--lq-linea)}

  /* Il conteggio non e' un comando e non ha bordo, ma sta sulla stessa riga:
     senza un'altezza propria si appoggerebbe col suo fondo al fondo degli
     altri, cioe' col testo piu' in basso di tutto. */
  .barra .conteggio{height:var(--h);display:flex;align-items:center}
  .conteggio{color:var(--lq-muto);font-size:14px}

  /* Ricerca testuale. Le faccette coprono i campi chiusi; questa copre cio' che
     nessun vocabolario puo' contenere -- il nome di una bottiglia, un produttore,
     una parola della descrizione -- ed e' il modo in cui si arriva a una scheda
     di cui si sa gia' il nome, senza spuntare tre caselle per restringere. */
  .cerca{flex:1 1 280px;display:flex;align-items:center;gap:8px;height:var(--h);
    padding:0 12px;border:1px solid var(--lq-linea);border-radius:4px;
    background:var(--lq-carta)}
  .cerca:focus-within{border-color:var(--lq-arancio);
    box-shadow:0 0 0 2px rgba(233,138,21,.16)}
  .cerca svg{flex-shrink:0;color:var(--lq-muto)}
  /* ⚠️ `padding:0` non e' pleonastico: Astra dichiara
     `input[type=search]{padding:12px 16px}`, e questa regola il padding non lo
     nominava affatto -- quindi vinceva lui, senza contendere niente. Erano i
     55,6px del campo: 40 di input piu' i padding, in una barra dove tutto il
     resto ne misurava 40. Un valore che non si scrive e' un valore che decide
     qualcun altro. */
  .cerca input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;
    padding:0;font:inherit;font-size:14px;color:var(--lq-testo)}
  .cerca input::placeholder{color:var(--lq-muto)}
  .cerca input::-webkit-search-cancel-button{display:none}
  .cerca .svuota{flex-shrink:0;border:0;background:none;cursor:pointer;
    padding:0 2px;font-size:18px;line-height:1;color:var(--lq-muto)}
  .cerca .svuota:hover{color:var(--lq-arancio)}
  /* Su iOS un campo con carattere sotto i 16px fa ingrandire la pagina da solo
     appena lo si tocca, e da li' non torna indietro senza un gesto. I 16px
     servono a quello, non all'estetica -- e portano il campo a 44px di altezza,
     che e' anche il bersaglio minimo per un dito. */
  @media(max-width:700px){.cerca input{font-size:16px}}

  .griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
  .scheda{background:var(--lq-carta);border:1px solid var(--lq-linea);border-radius:6px;
    padding:17px;cursor:pointer;border-top:3px solid var(--lq-blu)}
  .scheda:hover{border-top-color:var(--lq-arancio);box-shadow:0 3px 12px rgba(23,63,95,.11)}
  .scheda h3{margin:0 0 3px;font-family:Fraunces,Georgia,serif;font-weight:600;font-size:19px;
    color:var(--lq-blu)}
  .sottotitolo{color:var(--lq-muto);font-size:12.5px;margin-bottom:13px}
  .numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:11px}
  .numero{background:var(--lq-fondo);border-radius:4px;padding:8px 10px}
  .numero .et{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
    color:var(--lq-muto)}
  .numero .vl{font-family:Fraunces,Georgia,serif;font-size:18px;font-weight:600;
    font-variant-numeric:tabular-nums;color:var(--lq-blu)}
  .bollo{display:inline-block;padding:2px 9px;border-radius:3px;font-size:10.5px;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;vertical-align:middle}
  .b-ok{background:var(--st-misurato-sf);color:var(--st-misurato)}
  .b-forse{background:var(--st-ricavato-sf);color:var(--st-ricavato)}
  .b-vuoto{background:var(--st-assente-sf);color:var(--st-assente)}
  .citazione{font-size:11px;line-height:1.4;color:var(--lq-muto);margin:-4px 0 10px;
    padding-left:9px;border-left:2px solid var(--lq-linea)}
  .citazione a{color:var(--lq-muto)}
  .citazione.terzi{border-left-color:var(--st-ricavato);color:var(--st-ricavato)}
  .citazione.terzi a{color:var(--st-ricavato)}
  .etichette{display:flex;flex-wrap:wrap;gap:5px}

  /* Piede della card: le etichette a sinistra, il tasto a destra.
     La card resta cliccabile per aprire il dettaglio, ma il tasto porta subito
     alla pagina: sono due intenzioni diverse — "fammi vedere" e "portami li'" —
     e chiederle allo stesso gesto costringe a passare da una finestra per
     arrivare a un link. */
  .piede{display:flex;align-items:center;gap:10px;margin-top:11px;
    padding-top:11px;border-top:1px solid var(--lq-linea)}
  .piede .etichette{flex:1;min-width:0}
  a.apri{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;
    padding:6px 12px;border:1px solid var(--lq-linea);border-radius:999px;
    background:var(--lq-carta);color:var(--lq-blu);
    font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap}
  a.apri:hover{background:var(--lq-blu);border-color:var(--lq-blu);color:#FFFDF6}
  a.apri span{font-size:14px;line-height:1}
  @media(max-width:420px){
    .piede{flex-wrap:wrap}
    a.apri{width:100%;justify-content:center}
  }

  .etichetta{font-size:11.5px;padding:2px 9px;border-radius:20px;background:var(--lq-fondo);
    border:1px solid var(--lq-linea);color:var(--lq-muto)}

  /* La veste della finestra -- cornice, testata, tabella, crocetta -- sta in
     nota.css dal 21/08/2026: la usano il dettaglio di una scheda e la nota
     metodologica, e la nota compare anche sulla scheda singola, dove questo
     foglio non viene caricato. Scritta due volte sarebbe divergita, e a
     divergere sarebbe stata quella guardata meno. */

  .vuoto-lista{padding:44px;text-align:center;color:var(--lq-muto);background:var(--lq-carta);
    border:1px dashed var(--lq-linea);border-radius:6px}

  /* Le due voci di riepilogo in cima al gruppo "Dato nutrizionale".
     Sono la somma delle altre, non una sorella: la linea sotto dice che quello
     che segue e' il dettaglio di queste due. */
  .voce--somma{font-weight:700;color:var(--lq-blu)}
  .voce--somma.voce--ultima{margin-bottom:6px;padding-bottom:7px;
    border-bottom:1px solid var(--lq-linea)}
}

/* Il sito ufficiale del prodotto, sotto la citazione della fonte. Discreto:
   e' un riferimento per chi vuole controllare, non un richiamo. */
.lq-schede .lq-scheda__sito{margin:2px 0 0;font-size:11.5px;color:var(--lq-muto)}
.lq-schede .lq-scheda__sito a{color:var(--lq-muto);text-decoration:none;
  border-bottom:1px dotted var(--lq-linea)}
.lq-schede .lq-scheda__sito a:hover{color:var(--lq-arancio);border-bottom-color:var(--lq-arancio)}

/* Dichiarazione incoerente: il produttore ha scritto un numero e il numero non
   torna. Non e' l'assenza di un dato -- che e' muta e grigia -- ed e' per
   questo che ha un colore suo invece del grigio del "non dichiarato". */
.lq-schede .bollo.b-ko{background:#FBE3E1;color:#9B2C24;border-color:#E9B7B2}
.lq-schede .lq-scheda__respinta{margin:2px 0 0;padding:7px 9px;border-radius:4px;
  background:#FBE3E1;border:1px solid #E9B7B2;color:#7E241D;font-size:12px;line-height:1.45}
.lq-schede .lq-scheda__respinta b{color:#9B2C24}
.lq-schede .lq-scheda__respinta-fonte{display:block;margin-top:3px;opacity:.85}
.lq-schede .lq-scheda__respinta a{color:inherit}