/* =============================================================================
   LISTINO — griglia prodotti, scheda prodotto, dettaglio.
   Mobile: 1 colonna, immagine piccola a sinistra, descrizione su 3 righe.
   Desktop: griglia auto-fill da 360px, immagine più grande, tabella completa.
   ============================================================================= */
.griglia { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }

.prodotto { display: flex; flex-direction: column; overflow: hidden; transition: box-shadow var(--t-base), border-color var(--t-base); }
@media (hover: hover) { .prodotto:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); } }
.prodotto-top { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) 0; }
/* ⚠️ L'ANCORAGGIO DELLO SCORRIMENTO va spento nelle due liste, o il salto in cima dopo una
   ricerca non tiene. Il browser, quando il contenuto sopra al punto in cui si guarda cambia
   altezza, sposta lo scorrimento per tenere ferma la cosa che si stava guardando: di solito
   è un regalo, qui rimetteva la pagina 80-130 px più giù **subito dopo** che `inCima()`
   l'aveva portata a zero, e il primo risultato finiva sopra il bordo. Misurato il 13/09:
   con l'ancoraggio 133 px, senza 7. ⚠️ Non si perde niente: le foto hanno il riquadro di
   misura fissa (84 px), quindi caricandosi non spostano niente da ancorare. */
.listino, .ordine-lista { overflow-anchor: none; }

.prodotto-img { flex: 0 0 84px; width: 84px; height: 84px; border-radius: var(--r-md); background: #fcfcfd; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 4px; }
.prodotto-img img { width: 100%; height: 100%; object-fit: contain; }
.prodotto-img.vuota { color: var(--muted); font-weight: 700; font-size: var(--fs-24); }
.prodotto-hd { flex: 1; min-width: 0; }
.prodotto-hd h3 { font-size: var(--fs-18); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -.01em; }
.prodotto-hd h3 button { all: unset; cursor: pointer; }
@media (hover: hover) { .prodotto-hd h3 button:hover { color: var(--accent-ink); } }
.prodotto-hd h3 button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.prodotto-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
/* ⚠️ I nomi di categoria arrivano a «Finiture minerali e al silicato di potassio» e
   «Rivestimenti silossanici ed elastomerici»: dentro una pastiglia a riga unica escono dal
   bordo della card e si leggono tagliati a metà parola. Qui la pastiglia va a capo e non
   supera mai la larghezza della colonna.
   ⚠️ L'altezza diventa minima e non fissa: `height: 20px` taglierebbe la seconda riga dentro
   la pastiglia stessa, cioè lo stesso difetto girato di novanta gradi. La regola è ristretta
   a queste pastiglie e non tocca le altre (quantità, «base», stati dello storico), che sono
   corte e stanno meglio su una riga sola. */
.prodotto-badges .badge { white-space: normal; max-width: 100%; height: auto; min-height: 20px; padding-top: 2px; padding-bottom: 2px; line-height: 1.3; text-align: center; justify-content: center; }
.prodotto-desc { margin-top: 6px; font-size: var(--fs-15); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prodotto-prezzi { padding: var(--sp-3); margin-top: auto; }
/* ⚠️ Una forma sola per le testate di sezione dei prezzi, sulla card e dentro la scheda:
   etichetta a sinistra, precisazione a destra. Se qui si scorpora la scheda, tornano due
   modi di scrivere la stessa riga. */
.prodotto-prezzi .eyebrow, .dett .eyebrow { margin-bottom: var(--sp-2); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.prodotto-prezzi .eyebrow small, .dett .eyebrow small { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.prodotto-foot { display: flex; gap: var(--sp-2); padding: 0 var(--sp-3) var(--sp-3); }
.prodotto-foot .btn { flex: 1; }

/* vista compatta: solo nome e prezzi */
.compatta .prodotto-desc, .compatta .prodotto-foot, .compatta .prodotto-badges { display: none; }
.compatta .prodotto-img { flex-basis: 52px; width: 52px; height: 52px; }
.compatta .prodotto-hd h3 { font-size: var(--fs-15); }
.compatta .prodotto-prezzi { padding-top: var(--sp-2); }
.compatta .prodotto-prezzi .eyebrow { display: none; }

/* QR del listino online */
.qr { text-align: center; padding: var(--sp-2) 0; }
.qr img { width: 260px; height: 260px; max-width: 70vw; max-height: 70vw; margin: 0 auto; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.qr-url { margin: var(--sp-3) 0 var(--sp-1); font-weight: 600; word-break: break-all; }

/* dettaglio (dentro lo sheet) */
.dett { display: grid; gap: var(--sp-5); }
.dett-top { display: flex; gap: var(--sp-4); align-items: flex-start; }
.dett-img { flex: 0 0 120px; width: 120px; height: 120px; border-radius: var(--r-md); background: #fcfcfd; border: 1px solid var(--line); padding: 6px; }
.dett-img img { width: 100%; height: 100%; object-fit: contain; }
.dett-top p { color: var(--ink-2); font-size: var(--fs-14); margin-top: var(--sp-2); }
/* `.dett h4` non ha più uno stile suo: porta la classe `.eyebrow`, come la card.
   Via anche `.dett-link*`: erano i due finti documenti del mockup, tolti il 2026-09-04. */
/* ⚠️ Sotto i 1024px le due colonne si impilano, e senza un gap proprio la tabella prezzi
   partiva incollata all'ultima pillola della scheda tecnica: due sezioni che sembravano una. */
/* ⚠️ `min-width: 0` sulle colonne, o la scheda scorre di lato sui telefoni stretti. Un elemento
   di griglia di suo NON si stringe sotto al proprio contenuto (`min-width: auto`): il numero del
   calcolatore non va a capo (`nowrap`), quindi la traccia si allargava fino a contenerlo — 343px
   dentro uno schermo da 320 — e il foglio intero si portava dietro una barra orizzontale.
   ⚠️ Il sintomo è ingannevole: si vede la TABELLA PREZZI tagliata a destra, e si va a cercare il
   difetto lì, dove invece `.tbl-wrap` scorre per conto suo ed è innocente. Misurato a 320px:
   colonna 343 -> 288, e il numero resta intero perché la riga va a capo come deve. */
.dett-2col { display: grid; gap: var(--sp-5); }
.dett-2col > div { min-width: 0; }

/* ---------- calcolatore di resa (scheda prodotto) ----------
   Sta sotto le pillole della scheda tecnica, nella stessa colonna: è la versione che si può
   usare della riga «Resa: …» che si legge due centimetri sopra.
   ⚠️ Il filo è ORO PIENO e il riquadro resta sul fondo della scheda: un fondo oro chiaro
   (l'altra strada provata) lo faceva somigliare alla testata della tabella prezzi, che è dello
   stesso colore e sta a due dita di distanza. Qui a spiccare è il numero, non la scatola. */
.resa-calc { margin-top: var(--sp-4); border: 1px solid var(--gold-500); border-radius: var(--r-md); padding: var(--sp-3); }
.resa-calc .eyebrow { margin-bottom: var(--sp-2); }
/* Campi e risultato sulla STESSA riga: il pannello resta basso, che sul telefono conta.
   Sotto i ~360px i tre pezzi vanno a capo da soli invece di stringersi. */
.resa-riga { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; }
.resa-campo { flex: 1 1 96px; min-width: 0; }
.resa-esito { flex: 1 1 auto; min-width: 0; text-align: right; }
.resa-etichetta { display: block; font-size: var(--fs-13); font-weight: 600; color: var(--ink-2); margin-bottom: var(--sp-1); }
/* Il numero è la risposta: si legge da lontano, con le cifre a larghezza fissa così non balla
   mentre si tocca − e +. ⚠️ Ha un'altezza minima sua: passando da «≈ 5–5,7 L» a «—» il pannello
   cambierebbe altezza e la scheda sotto salterebbe. */
/* ⚠️ `nowrap`: a 28px «≈ 2,9–3,3 L» andava a capo prima della L e il numero si leggeva su due
   righe. Se proprio non ci sta, è la riga intera a scendere sotto ai campi (`flex-wrap`), che è
   il modo giusto di non starci. */
.resa-litri { white-space: nowrap; min-height: 34px; font-size: var(--fs-28); font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.resa-campo .stepper { width: 100%; }
.resa-campo .stepper input { flex: 1 1 auto; width: auto; min-width: 0; }
.resa-calc .campo-hint { margin-top: var(--sp-2); }

@media (min-width: 640px) {
  .griglia { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--sp-4); }
}
@media (min-width: 1024px) {
  .prodotto-top { padding: var(--sp-4) var(--sp-4) 0; gap: var(--sp-4); }
  .prodotto-img { flex-basis: 104px; width: 104px; height: 104px; }
  .prodotto-hd h3 { font-size: var(--fs-18); }
  .prodotto-prezzi { padding: var(--sp-4); }
  .prodotto-foot { padding: 0 var(--sp-4) var(--sp-4); }
  .prodotto-foot .btn { flex: 0 0 auto; }
  .prodotto-foot .btn-primary { margin-left: auto; }
  .compatta .griglia { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .dett-top { gap: var(--sp-5); }
  .dett-img { flex-basis: 160px; width: 160px; height: 160px; }
  .dett-2col { grid-template-columns: 1fr 1fr; }
}