/* =============================================================================
   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; }
.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-16); 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-13); 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. */
.dett-2col { display: grid; gap: var(--sp-5); }

@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; }
}