/* =============================================================================
   SCHEDA PRODOTTO — riquadri della stessa altezza
   Creato il 2026-08-04.

   IL PROBLEMA: nelle griglie (vetrina in home e pagine catalogo) il riquadro
   grigio di ogni prodotto aveva un'altezza diversa. Misurate 10 altezze distinte
   su 30 prodotti, da 336 a 460 px.

   Due cause indipendenti, entrambe di contenuto:
     1. il titolo occupa 1, 2 o 3 righe (su 30 prodotti: 15 · 13 · 2);
     2. sotto il prezzo alcuni prodotti hanno la riga con la descrizione del
        formato, altri no (13 su 30) — 27px di differenza.

   PERCHE' NON BASTA STIRARE LE COLONNE: in catalogo le colonne sono gia' celle
   flex e si stirano da sole, ma la scheda dentro non le riempiva. In home invece
   la griglia e' gestita da isotope, che posiziona le schede in ASSOLUTO: li' non
   esiste alcuna riga da stirare, e l'unica strada e' rendere uniforme il
   contenuto. Si fanno quindi tutte e due le cose.
   ========================================================================== */

/* -- La scheda riempie la cella (catalogo) ---------------------------------- */
/* Le colonne si stirano gia'; senza questa riga la scheda restava alta quanto il
   suo contenuto e il grigio finiva piu' corto della colonna. */
.prodlist .product,
.isotope .product {
    height: 100%;
}

/* NOTA: niente flex-column con `margin-top: auto` sul prezzo per spingerlo in
   fondo. `.product` non contiene solo `.product-body`: sotto c'e' anche
   `.product-button-wrap` (lente e carrello). Spingendo il prezzo al fondo del
   corpo si apriva un vuoto fra titolo e prezzo, ben visibile su telefono dove
   la scheda e' larga. Non serve: una volta reso uniforme il contenuto (figura,
   titolo, blocco prezzo) le schede sono gia' tutte alte uguale, e non c'e'
   nulla da spingere. */

/* -- Figura: altezza sempre uguale ------------------------------------------
   Il tema le da' solo un `min-height: 200px`, quindi l'altezza finiva per
   dipendere dalle proporzioni della foto: 200px con le immagini piccole, 233
   con quelle piu' alte. E' la causa piu' grossa di dislivello fra i riquadri.
   Si usa `aspect-ratio` e non un'altezza fissa: cosi' la figura scala con la
   larghezza della colonna e resta uniforme sia in home (colonne strette) sia in
   catalogo (colonne larghe), senza numeri buoni per una pagina sola. */
.product .product-figure {
    flex: 0 0 auto;
    aspect-ratio: 7 / 6;
    height: auto;
    justify-content: center;
    overflow: hidden;
}

/* La foto sta dentro il riquadro senza deformarsi ne' sbordare. Restano
   allineate in basso, com'erano: per bottiglie e vasetti e' l'appoggio che
   suggerisce il piano d'appoggio. */
.product .product-figure img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* -- Titolo: due righe sempre ----------------------------------------------
   Si riserva lo spazio di 2 righe e si taglia a 2 con i puntini. Su 30 prodotti
   ne toccava 2, quelli con il nome piu' lungo; il nome completo resta sulla
   scheda del prodotto. Riservarne 3 avrebbe lasciato una riga vuota su 28
   prodotti su 30, che e' il difetto opposto e piu' vistoso.
   Per passare a 3 righe: cambiare 2 in 3 qui sotto e 3.75rem in 5.6rem. */
.product .product-title {
    flex: 0 0 auto;
    min-height: 3.75rem;          /* 2 righe da 30px */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -- Prezzo: sempre in fondo, sempre della stessa altezza -------------------
   `margin-top: auto` incolla il blocco prezzo al fondo della scheda, cosi' i
   prezzi si allineano fra schede affiancate anche se i titoli hanno lunghezze
   diverse.
   `min-height` riserva la riga della descrizione del formato, che c'e' solo su
   alcuni prodotti: senza, quelle schede restavano 27px piu' basse. */
.product .product-price-wrap {
    /* 3.6rem = 57.6px: copre la piu' alta delle due varianti del blocco prezzo.
       Non differiscono solo per la riga descrizione: il prodotto scontato mostra
       due righe di prezzo senza margini (53px), quello con formato una riga di
       prezzo `my-2` piu' la descrizione `my-1` (57px). I 4px di scarto vengono
       dalle utility di margine di Bootstrap, non dal testo. */
    min-height: 3.6rem;
}

/* -- Schermi molto stretti --------------------------------------------------
   Sotto i 380px il titolo va a capo prima e due righe possono non bastare a
   mostrare un nome sensato: si lascia respirare di piu'. */
@media screen and (max-width: 380px) {
    .product .product-title {
        -webkit-line-clamp: 3;
        min-height: 5.6rem;
    }
}