/* =============================================================================
 * PAGINA ELENCO PRODOTTI - FOGLIO 3 di 5: VISTA LISTATO
 * -----------------------------------------------------------------------------
 * Solo la griglia della vista LISTATO e il suo responsive. Template serviti:
 * view_from_category_list.php e products_list_list.php.
 *
 * ORDINE DI CARICAMENTO (i cinque fogli vanno inclusi in questa sequenza)
 *   1. paginaelencoprodotti-1-base.css ..... comune alle tre viste
 *   2. paginaelencoprodotti-2-table.css .... solo vista TABELLA
 *   3. paginaelencoprodotti-3-list.css ..... solo vista LISTATO
 *   4. paginaelencoprodotti-4-boxes.css .... solo vista RIQUADRI
 *   5. paginaelencoprodotti-5-contorno.css . resto della pagina, e altre pagine
 *
 * I fogli 2, 3 e 4 si escludono a vicenda: ogni pagina ne carica uno solo,
 * quello della modalita' di visualizzazione scelta. I fogli 1 e 5 servono
 * sempre.
 *
 * DISPOSIZIONE (secondo le indicazioni in verde dello screenshot)
 *
 *   +------------------------------------------+---------------+----------+
 *   | titolo                                   |               |          |
 *   +------------------------------------------+ prezzo + q.ta |  icone   |
 *   | disponibilita' - codici - min. ordine -  |               |          |
 *   | packaging - collo voluminoso - promo     |               |          |
 *   +------------------------------------------+---------------+----------+
 *
 * Prezzo e icone occupano ENTRAMBE le righe e sono centrati verticalmente sul
 * blocco di sinistra. Fra titolo e riga informazioni non c'e' nessun filetto.
 *
 * COSA CAMBIA RISPETTO ALLA VERSIONE PRECEDENTE
 *   - il sottotitolo non si stampa piu' (deciso sul template);
 *   - codici, minimo d'ordine e packaging hanno la stessa identica formattazione
 *     della vista TABELLA: colore --tp-ink-soft e corpo --tp-fs-meta;
 *   - tolto il filetto di separazione fra titolo e informazioni;
 *   - riga piu' bassa: il blocco di destra non aggiunge piu' altezza, perche'
 *     sta a cavallo delle due righe invece che sopra di esse;
 *   - l'etichetta della promozione e' passata in coda alla riga informazioni,
 *     dove prima c'era una colonna dedicata.
 *
 * COSA CAMBIA RISPETTO ALLE REGOLE ANCORA PIU' VECCHIE
 * Le tre altezze fisse di .container-elenco-products-list (21em, 29.5em, 39em)
 * sono state tolte: la riga si adatta al contenuto.
 *
 * INDICE
 *   L1. Token della vista
 *   L2. Contenitore
 *   L3. Riga prodotto - impianto a griglia
 *   L4. Aree della riga
 *   L5. Responsive
 * ========================================================================== */


/* =============================================================================
 * L1. TOKEN DELLA VISTA
 * -----------------------------------------------------------------------------
 * Gli altri token (colori, raggi, ombre, corpi tipografici) arrivano dal foglio
 * di base: qui ci sono solo le misure proprie del listato.
 * ========================================================================== */

.box-container-products-list,
.container-elenco-products-list {
    /* LE TRE COLONNE DI DESTRA SONO FISSE, E IN PIXEL.
     * -------------------------------------------------------------------------
     * Erano due cose insieme, ed erano tutte e due sbagliate.
     *
     * 1. ERANO IN REM. Il corpo base di questo portale non e' 16px ma circa 10
     *    (il classico font-size: 62.5%), quindi "11.5rem" non faceva 184px ma
     *    115, e "9rem" non 144 ma 90. Il minimo della colonna del prezzo era
     *    percio' piu' stretto del contenuto e non serviva a niente.
     *
     * 2. ERANO MINIMI, NON MISURE. La colonna del prezzo era minmax(min, auto) e
     *    quelle di quantita' e icone erano auto: ogni riga e' una griglia a se',
     *    quindi ognuna si dimensionava sul PROPRIO contenuto. Misurato sul banco
     *    con il corpo base a 10px: riquadro del prezzo 150px sulle righe con la
     *    promozione e 115 su quelle senza, casella quantita' 104 con "Conf" e 88
     *    con "Pz". E siccome la prima colonna e' 1fr, cioe' si mangia lo spazio
     *    che avanza, bastava che una colonna di destra cambiasse larghezza
     *    perche' TUTTE quelle alla sua sinistra si spostassero. E' il motivo per
     *    cui i bordi ballavano da una riga all'altra.
     *
     * Adesso sono tre misure fisse in pixel, uguali per tutte le righe.
     * I valori, misurati sulla larghezza naturale del contenuto:
     *
     *   prezzo   riga del prezzo con listino barrato a quattro cifre: 135px di
     *            testo piu' 20 di padding e 2 di bordo = 157. Messi 176 perche'
     *            la riga "Promo fino al gg/mm/aaaa" ne chiede una ventina in
     *            piu' e deve starci su una riga sola.
     *   quantita casella + riquadrino dell'unita' con la sigla piu' lunga
     *            ("Conf"): 104px.
     *   icone    quattro pulsanti da 30px con tre corridoi da 6: 138px.
     *
     * SONO TRE RIGHE DA CAMBIARE se li vuoi diversi: cambiando un numero si
     * spostano tutte le righe insieme, che e' esattamente quello che serviva.
     * ---------------------------------------------------------------------- */
    --lp-col-price: 176px;
    --lp-col-qty: 104px;
    --lp-col-actions: 138px;

    --lp-row-gap: 8px;          /* distanza fra una riga e la successiva */
}


/* =============================================================================
 * L2. CONTENITORE
 * -----------------------------------------------------------------------------
 * Eredita da .box-container-products (foglio 1) fondo trasparente, scorrimento
 * interno e barra sottile. Qui serve solo l'impilamento verticale.
 * ========================================================================== */

.box-container-products-list {
    display: flex;
    flex-direction: column;
    gap: var(--lp-row-gap);
}


/* =============================================================================
 * L3. RIGA PRODOTTO - IMPIANTO A GRIGLIA
 * -----------------------------------------------------------------------------
 * Due righe a sinistra (titolo, informazioni) e tre colonne a destra che le
 * attraversano entrambe: prezzo (con la promozione dentro), quantita', icone.
 *
 * NIENTE height, NIENTE min-height, NIENTE overflow: hidden.
 *   - height: auto !important neutralizza qualsiasi altezza imposta da fuori
 *     (per esempio le vecchie 21em / 29.5em / 39em, se il file monolitico
 *     fosse ancora incluso insieme ai cinque nuovi);
 *   - min-height NON va dichiarato: la riga e' un elemento flex del contenitore,
 *     e "min-height: 0" le toglie la protezione predefinita (min-height: auto)
 *     che impedisce a un elemento flex di rimpicciolirsi sotto il proprio
 *     contenuto. E' questo che schiacciava le righe nella sezione ORDINABILI;
 *   - flex-shrink: 0 chiude la questione anche in presenza di altri contenitori
 *     flex piu' esterni;
 *   - overflow: visible fa in modo che, se un giorno un'altezza esterna dovesse
 *     tornare, il contenuto esca dalla scheda invece di sparire in silenzio.
 * ========================================================================== */

.container-elenco-products-list {
    display: grid;
    /* Fisse, non auto: vedi il blocco dei token qui sopra. La prima colonna
       resta elastica e assorbe tutto quello che avanza. */
    grid-template-columns:
        minmax(0, 1fr)
        var(--lp-col-price)
        var(--lp-col-qty)
        var(--lp-col-actions);
    grid-template-rows: auto auto;
    grid-template-areas:
        "title price qty actions"
        "meta  price qty actions";
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    position: relative;

    height: auto !important;
    flex-shrink: 0;
    margin: 0;
    padding: 7px 12px;
    overflow: visible;
    background-color: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-card-radius);
    box-shadow: var(--tp-shadow-card);
    transition: background-color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* Filetto d'accento sul bordo sinistro, visibile al passaggio del mouse. Ha il
   raggio suo, cosi' non serve tagliare la scheda con overflow: hidden. */
.container-elenco-products-list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background-color: var(--tp-accent);
    border-radius: var(--tp-card-radius) 0 0 var(--tp-card-radius);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.container-elenco-products-list:hover {
    background-color: #fbfbfb;
    border-color: #cddae4;
    box-shadow: var(--tp-shadow-hover);
}

.container-elenco-products-list:hover::before {
    opacity: 1;
}

/* Riga in cui un avviso sostituisce prezzo, quantita' e pulsanti. */
.container-elenco-products-list:has(> .tp-row-alert) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas:
        "title alert"
        "meta  alert";
}


/* =============================================================================
 * L4. AREE DELLA RIGA
 * ========================================================================== */

.container-elenco-products-list > .title-subtitle-container       { grid-area: title; min-width: 0; }
.container-elenco-products-list > .container-product-price        { grid-area: price; align-self: center; }
.container-elenco-products-list > .lp-quantity                    { grid-area: qty; align-self: center; }
.container-elenco-products-list > .lp-actions                     { grid-area: actions; align-self: center; }
.container-elenco-products-list > .container-sku-minord-packaging { grid-area: meta; min-width: 0; }
.container-elenco-products-list > .tp-row-alert                   { grid-area: alert; align-self: center; }


/* --- Titolo ----------------------------------------------------------------
 * Nel listato il titolo sta SEMPRE su una riga sola: i titoli piu' lunghi del
 * catalogo arrivano a 68 caratteri e ci stanno. I puntini di sospensione sono
 * solo una rete di sicurezza per un eventuale titolo fuori standard: il testo
 * completo resta nel DOM e nel link.
 * -------------------------------------------------------------------------- */

.container-elenco-products-list .title-product {
    margin: 0;
}

.container-elenco-products-list .title-product > a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-line-clamp: none;
    line-clamp: none;
}

/* Targhetta del catalogo: resta sopra al titolo, alzata di 3px e portata a
   sinistra di 2px per allinearne il testo a quello del titolo, che il riquadro
   arrotondato faceva sembrare rientrato.

   Lo stacco dal titolo era di 1px soli: la targhetta sembrava appiccicata.
   Aumentarlo con un margine avrebbe spinto in basso titolo, codici e riga
   intera, quindi lo stacco si guadagna ALZANDO la sola targhetta con uno
   scostamento relativo: position: relative + top sposta solo il disegno,
   non lo spazio occupato. Il titolo resta esattamente dov'era, l'altezza
   della riga non cambia di un pixel e lo stacco visivo passa da 1px a 6px.
   La targhetta sale dentro il padding superiore della riga (7px), quindi
   resta comunque dentro il bordo e non tocca la riga precedente. */
.container-elenco-products-list .tp-catalogue-chip {
    position: relative;
    top: -5px;
    margin: -3px 0 1px -2px;
}


/* --- Prezzo, promozione e quantita' ----------------------------------------
 * Il riquadro azzurro contiene prezzo, prezzo barrato e riga della promozione.
 * Il campo quantita' sta FUORI dal riquadro, alla sua destra.
 *
 * white-space: nowrap sulla riga del prezzo: prezzo e prezzo barrato restano
 * affiancati anche sulle migliaia (5.687,00 EUR con 6.999,00 barrato), che e'
 * il caso peggiore. La larghezza minima della colonna e' tarata su quel caso.
 * -------------------------------------------------------------------------- */

.container-elenco-products-list > .container-product-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    width: auto;
    max-width: none;
    padding: 4px 10px;
    line-height: 1.15;
}

.container-elenco-products-list > .container-product-price > p {
    white-space: nowrap;
}

/* LA RIGA DELLA PROMOZIONE E' L'UNICA CHE PUO' ANDARE A CAPO, ed e' la valvola
   di sicurezza della colonna fissa. La riga del prezzo non deve spezzarsi mai -
   "5.687,00" su una riga e "EUR" sull'altra sarebbe illeggibile - e per quella
   la colonna e' tarata con margine. La scritta della promozione invece e' una
   frase: se un domani il carattere del portale cambiasse, o la traduzione
   diventasse piu' lunga, va a capo su due righe (la riga cresce di 13px) invece
   di uscire dal riquadro. */
.container-elenco-products-list > .container-product-price > .promotion-alert-string {
    white-space: normal;
}

/* La riga della promozione sale di un paio di pixel verso il prezzo: appoggiata
   com'era sembrava staccata dal riquadro. */
.container-elenco-products-list > .container-product-price .promotion-alert-string {
    margin-top: -2px;
    line-height: 1.2;
}

.lp-quantity {
    display: flex;
    align-items: center;
}

/* LA CASELLA RIEMPIE LA COLONNA, e a cedere e' il campo del numero.
   La colonna e' fissa, ma dentro ci sono due pezzi di larghezza diversa: il
   campo (4,5em dal foglio 1) e il riquadrino dell'unita', che e' largo quanto
   la sigla - "Conf" occupa 16px piu' di "Pz". Senza queste tre righe la casella
   resterebbe larga quanto il suo contenuto e sarebbe allineata a sinistra nella
   colonna: il bordo destro tornerebbe a ballare fra una riga e l'altra, che e'
   proprio quello che dovevamo togliere. Cosi' invece la casella e' sempre larga
   come la colonna e la differenza fra "Conf" e "Pz" se la prende il campo del
   numero, che di spazio ne ha d'avanzo. */
.lp-quantity .tp-quantity-field {
    flex: 1 1 auto;
    min-width: 0;
}

.lp-quantity .form-control-view-product-quantity-list-mode,
.lp-quantity .input-space-quantity-table-mode {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}


/* --- Le quattro icone in fila --------------------------------------------- */

.lp-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
}

/* L'ETICHETTA "NON ACQUISTABILE" VA A CAPO invece di allargare la colonna.
   Sulle righe di un utente che non puo' comprare tutto, al posto del carrello
   compare questa scritta: su una riga sola chiede 210px invece dei 138 delle
   quattro icone, e - colonna fissa o no - allargava la fascia di destra
   spostando prezzo e quantita' di 43px verso sinistra SOLO su quelle righe.
   Misurato sul banco: era la terza delle tre cause del disallineamento.
   Su due righe ci sta nei 138px insieme alle due icone che restano. */
.lp-actions .can-buy-all-products-info {
    min-width: 0;
    line-height: 1.15;
    text-align: right;
    white-space: normal;
}

.lp-actions .can-buy-all-products-info strong {
    font-size: 9px;
}


/* --- Riga informazioni -----------------------------------------------------
 * Nessun filetto di separazione dal titolo. Le voci hanno la stessa identica
 * formattazione della vista TABELLA: nel foglio 1 quella formattazione sta su
 * .color-sku-minord-packaging p, e qui le voci sono <span> perche' devono
 * stare in fila su una riga sola, quindi la regola va ripetuta sugli <span>.
 * -------------------------------------------------------------------------- */

.container-elenco-products-list > .container-sku-minord-packaging {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    padding: 0;
    border: 0;
}

.container-elenco-products-list > .container-sku-minord-packaging > span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    color: var(--tp-ink-soft);
    font-size: var(--tp-fs-meta);
    line-height: 1.4;
}

/* L'icona sta attaccata alla propria scritta: niente riquadro da 15px con il
   margine da 5px, che nel listato lasciava troppo spazio vuoto. */
.container-elenco-products-list > .container-sku-minord-packaging > span > i {
    width: auto;
    margin-right: 0;
}


/* --- Pillola della disponibilita': SOLA ICONA -------------------------------
 * Il markup della pillola arriva da DisplayMessage::availability() e non e'
 * modificabile da qui. Il testo viene nascosto azzerandone il corpo (resta nel
 * DOM, quindi lo screen reader lo legge ancora) e l'icona viene rimessa alla
 * sua misura. Il testo per esteso e' nel tooltip della pillola, che il template
 * ricava dall'output dell'helper: nessun component da toccare.
 * -------------------------------------------------------------------------- */

.container-elenco-products-list .text-availability-tableproducts {
    flex: 0 0 auto;
    cursor: help;
}

.container-elenco-products-list .text-availability-tableproducts,
.container-elenco-products-list .text-availability-tableproducts * {
    font-size: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

.container-elenco-products-list .text-availability-tableproducts i {
    font-size: 13px !important;
    line-height: 1;
}

/* La pillola diventa un quadratino: via il respiro laterale che serviva al testo. */
.container-elenco-products-list .text-availability-tableproducts > * {
    gap: 0 !important;
    padding: 4px 5px !important;
}


/* --- Voluminoso e promozione ----------------------------------------------
 * L'etichetta e' "VOLUMINOSO" (senza "COLLO") e di un pixel piu' piccola che
 * nelle altre viste, per non rubare spazio alla riga.
 * -------------------------------------------------------------------------- */

.container-elenco-products-list .info-bulky-product {
    margin-top: 0 !important;
    padding: 0 3px;
    color: var(--tp-ink) !important;
    font-size: 8.5px !important;
}


/* =============================================================================
 * L5. RESPONSIVE
 * -----------------------------------------------------------------------------
 *   >= 992px    titolo e informazioni a sinistra; prezzo, quantita' e icone a
 *               destra, tutto su una riga
 *   768-991px   il blocco di destra si impila: prezzo sopra, quantita' e
 *               pulsanti sotto. Il prezzo e' largo quanto quella fascia
 *   < 768px     tutto incolonnato
 * ========================================================================== */

@media screen and (max-width: 1199px) {
    /* Qui la colonna del prezzo veniva stretta a 9.5rem. Non si puo' piu' fare:
       adesso e' una misura, non un minimo, e stringerla taglierebbe il prezzo
       invece di lasciarlo respirare. E non serve: a 1200px di finestra, tolte
       le tre colonne di destra e i corridoi, al titolo restano 778px. */
    .container-elenco-products-list {
        column-gap: 10px;
    }
}

@media screen and (max-width: 991px) {
    /* Il blocco di destra resta a destra ma si impila: prezzo sopra, quantita'
       e pulsanti sotto. Titolo e informazioni tengono la colonna di sinistra.
       Il riquadro del prezzo occupa entrambe le colonne di destra, quindi e'
       largo ESATTAMENTE quanto la fascia quantita' + pulsanti: nessuna misura
       fissa da mantenere allineata a mano. */
    .container-elenco-products-list {
        /* Anche qui le due colonne di destra sono fisse: il riquadro del prezzo
           sta a cavallo di tutte e due, quindi e' largo esattamente quanto la
           fascia quantita' + icone - 252px - ed e' uguale in tutte le righe
           senza doverlo scrivere da nessuna parte. */
        grid-template-columns: minmax(0, 1fr) var(--lp-col-qty) var(--lp-col-actions);
        grid-template-rows: auto auto;
        grid-template-areas:
            "title price price"
            "meta  qty   actions";
        column-gap: 10px;
        row-gap: 4px;
        align-items: start;
    }

    .container-elenco-products-list > .container-product-price {
        align-self: start;
        justify-self: stretch;
        width: auto;
    }

    .container-elenco-products-list > .lp-quantity,
    .container-elenco-products-list > .lp-actions {
        align-self: end;
    }

    /* Titolo appoggiato al fondo della sua riga e informazioni appoggiate in
       cima alla propria: cosi' i due restano vicini anche quando la colonna di
       destra e' piu' alta, invece di allontanarsi. */
    .container-elenco-products-list > .title-subtitle-container {
        align-self: end;
    }

    .container-elenco-products-list > .container-sku-minord-packaging {
        align-self: start;
    }

    .container-elenco-products-list:has(> .tp-row-alert) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "title alert"
            "meta  alert";
    }
}

@media screen and (max-width: 767px) {
    /* -------------------------------------------------------------------------
     * SOTTO I 768px LA RIGA SI USA TUTTA.
     * Qui c'era justify-content: start con due colonne larghe 176 e 104: la
     * griglia era quindi larga 290px e basta, e SI PORTAVA DIETRO ANCHE TITOLO,
     * INFORMAZIONI E ICONE, che stanno a cavallo delle due colonne. Misurato a
     * 711px di finestra: il contenuto finiva a quota 303 e a destra restavano
     * 376px di bianco - la fascia che hai barrato nello screenshot. Il titolo
     * andava a capo dopo mezza riga pur avendo spazio d'avanzo.
     *
     * Adesso le colonne sono tre: le due misure di sempre piu' una terza
     * elastica che si prende quello che avanza. Titolo, informazioni e - finche'
     * ci stanno - le icone attraversano tutte e tre, quindi la riga e' piena da
     * un bordo all'altro a qualunque larghezza.
     *
     * A 711px le icone stanno ancora di fianco a prezzo e quantita': 176 + 104 +
     * 138 piu' due corridoi fanno 438px. Sotto i 480 non ci stanno piu' e vanno
     * a capo da sole, nel blocco qui sotto.
     * ---------------------------------------------------------------------- */
    .container-elenco-products-list {
        grid-template-columns: var(--lp-col-price) var(--lp-col-qty) minmax(0, 1fr);
        grid-template-areas:
            "title title title"
            "meta  meta  meta"
            "price qty   actions";
        row-gap: 8px;
        padding: 12px;
    }

    .container-elenco-products-list:has(> .tp-row-alert) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "meta"
            "alert";
    }

    /* Le icone partono da sinistra, subito dopo la quantita'. */
    .lp-actions {
        justify-content: flex-start;
    }

    .container-elenco-products-list > .container-product-price {
        width: 100%;
    }

    /* Su smartphone il titolo puo' andare a capo: la riga e' stretta e i
       puntini di sospensione toglierebbero troppo testo. */
    .container-elenco-products-list .title-product > a {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        white-space: normal;
    }
}

/* =============================================================================
 * SOTTO I 520px - LE ICONE VANNO A CAPO
 * -----------------------------------------------------------------------------
 * Prezzo, quantita' e icone in fila chiedono 438px piu' i 24 di padding della
 * riga. Misurato: sotto i 495px di finestra la colonna delle icone scende sotto
 * i 138px che le servono e i quattro pulsanti cominciano a schiacciarsi (30px
 * -> 29 -> 26). La soglia e' messa a 519 e non a 495 perche' il margine di 24px
 * copre la differenza fra il padding del banco e quello vero della pagina: sul
 * sito la riga puo' essere un po' piu' stretta a parita' di finestra.
 * Qui le icone vanno su una riga loro, a tutta larghezza.
 *
 * E il riquadro del prezzo diventa elastico: si prende tutto quello che avanza
 * accanto alla quantita'. La larghezza fissa serviva a tenere allineate le
 * righe fra loro, e continua a farlo - solo che adesso la misura e' la stessa
 * per tutte perche' e' la stessa frazione, non lo stesso numero. A 430px di
 * finestra il riquadro passa da 176 a 258px e il bianco a destra sparisce.
 * ========================================================================== */

@media screen and (max-width: 519px) {
    .container-elenco-products-list {
        grid-template-columns: minmax(0, 1fr) var(--lp-col-qty);
        grid-template-areas:
            "title   title"
            "meta    meta"
            "price   qty"
            "actions actions";
    }

    .container-elenco-products-list:has(> .tp-row-alert) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "title"
            "meta"
            "alert";
    }
}