/* =============================================================================
 * PAGINA ELENCO PRODOTTI - FOGLIO 2 di 5: VISTA TABELLA
 * -----------------------------------------------------------------------------
 * Solo la griglia della vista TABELLA e il suo responsive. Template serviti:
 * view_from_category_table.php e products_list_table.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. Nessuno dei cinque ridefinisce le variabili globali del tema
 * (--primary-color, --tertiary-color, --primary-color-container-border,
 * --text-button-add-cart), che restano dove sono.
 * ========================================================================== */

/* =============================================================================
 * 3. SCHEDA PRODOTTO - IMPIANTO A GRIGLIA
 * -----------------------------------------------------------------------------
 * Una sola griglia sostituisce il vecchio impianto a position:absolute e le
 * ~130 media query che ne correggevano gli scostamenti di 0,25em alla volta.
 * Aree: thumb | title | specs | stock | price | actions (+ alert).
 * ========================================================================== */

.container-elenco-products {
    display: grid;
    grid-template-columns: var(--tp-thumb-size) minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    position: relative;
    min-height: var(--tp-row-min-height);
    margin-bottom: var(--tp-card-gap);
    padding: 12px 16px;
    overflow: hidden;
    background-color: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-card-radius);
    box-shadow: var(--tp-shadow-card);
    transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.container-elenco-products:last-child {
    margin-bottom: 0;
}

/* Filetto d'accento sul bordo sinistro, visibile al passaggio del mouse. */
.container-elenco-products::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background-color: var(--tp-accent);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.container-elenco-products:hover {
    border-color: #cddae4;
    box-shadow: var(--tp-shadow-hover);
    transform: translateY(-1px);
}

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

.container-elenco-products > .dx-area-data-product {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(var(--tp-col-stock), 1fr)
        minmax(var(--tp-col-price), 1fr)
        minmax(var(--tp-col-actions), 1.2fr);
    grid-template-rows: auto auto;
    /* Il blocco dei pulsanti occupa la colonna di destra su TUTTE E DUE le
       righe, quindi parte dalla quota del titolo invece che da quella delle
       specifiche: sale di 25px e si porta su il proprio bordo sinistro.
       Il titolo resta comunque troncato a 2 righe (line-clamp del foglio 1),
       percio' la colonna piu' stretta non puo' far crescere la scheda. */
    grid-template-areas:
        "title title title actions"
        "specs stock price actions";
    column-gap: 14px;
    row-gap: 8px;
    height: 100%;
    align-items: start;
    /* Il blocco titolo + riga dati parte dal bordo ALTO della scheda: cosi' il
       titolo e' sempre alla stessa quota del bordo superiore della miniatura.
       Prima era centrato verticalmente e, ogni volta che la colonna di destra
       era piu' bassa della scheda - tipicamente da utente non loggato, o senza
       la riga COLLO VOLUMINOSO - il titolo scendeva di una quarantina di pixel
       rispetto all'immagine. Lo spazio che avanza sulle schede corte ora sta
       tutto in fondo invece di essere diviso fra sopra e sotto. */
    align-content: start;
    left: auto;
}

/* Riga in cui un avviso sostituisce prezzo e pulsanti. */
.container-elenco-products > .dx-area-data-product:has(> .tp-row-alert) {
    grid-template-columns: minmax(0, 1fr) minmax(var(--tp-col-stock), 1fr) minmax(0, 2fr);
    grid-template-areas:
        "title title title"
        "specs stock alert";
}

.container-elenco-products .title-subtitle-container                 { grid-area: title; min-height: 0; overflow: hidden; }
.container-elenco-products .container-sku-minord-packaging           { grid-area: specs; min-height: 0; }
.container-elenco-products .container-available-quantity-bulky       { grid-area: stock; min-height: 0; }
.container-elenco-products .container-product-price                  { grid-area: price; }
.container-elenco-products .container-cart-favorite-quotation-button { grid-area: actions; min-height: 0; align-self: start; }
.container-elenco-products .tp-row-alert                             { grid-area: alert; }


/* --- Targhetta del catalogo, agganciata sotto la miniatura ------------------
 * La targhetta esce dal flusso della griglia e viene agganciata alla scheda,
 * che e' gia' position: relative, a una quota calcolata sull'altezza della
 * miniatura: resta quindi SEMPRE appena sotto l'immagine (7px) e centrata su
 * di essa, anche quando
 * la colonna di destra e' piu' alta e prima la faceva scendere piu' in basso.
 *
 * Fuori dal flusso la targhetta non e' piu' vincolata alla larghezza della
 * colonna della miniatura (128-180px secondo la fascia) e puo' usare tutta la
 * larghezza utile della scheda: il nome del catalogo si legge sempre per
 * intero. Prima "Catalogo Medicale" o "Catalogo Farmaceutico" venivano
 * troncati a meta' parola. La fascia orizzontale sotto la miniatura e' libera
 * in tutte le larghezze da 768px in su, quindi non copre nulla.
 *
 * Lo spazio dove si appoggia e' riservato dal margine inferiore della
 * miniatura (7px di stacco + 17px di targhetta): serve perche' la scheda ha
 * overflow: hidden e altrimenti, sulle schede basse, la targhetta finirebbe
 * tagliata dal bordo. Riservarlo sulla miniatura invece che con un min-height
 * sulla scheda tiene il calcolo esatto a prescindere da box-sizing.
 *
 * top e left partono dai valori del padding della scheda (12px e 16px), perche'
 * per un figlio in posizione assoluta di una griglia il riferimento e' il
 * riquadro del padding, non quello del contenuto. left punta al centro della
 * colonna della miniatura e translateX(-50%) ci centra sopra la targhetta.
 * -------------------------------------------------------------------------- */

.container-elenco-products > .tp-catalogue-chip {
    position: absolute;
    /* A CAVALLO DEL BORDO BASSO DELLA MINIATURA, non piu' staccata sotto.
       Il conto: 12px di padding + l'altezza della miniatura porta al suo bordo
       inferiore, meno meta' dell'altezza della targhetta la centra sul bordo.
       Cosi' spariscono i 24px che prima erano riservati sotto l'immagine, ed e'
       tutto guadagnato sull'altezza della scheda. */
    top: calc(12px + var(--tp-thumb-size) - (var(--tp-chip-h) / 2));
    left: calc(16px + var(--tp-thumb-size) / 2);
    transform: translateX(-50%);
    z-index: 2;
    margin: 0;
    max-width: calc(100% - 32px);
    height: var(--tp-chip-h);
    overflow: hidden;
    /* Fondo pieno e cornice chiara: la targhetta ora poggia sull'immagine, e
       senza questi due valori il testo si confonderebbe con la foto. */
    background-color: #eef3f7;
    border: 1px solid #ffffff;
    box-shadow: 0 1px 2px rgba(17, 42, 70, 0.10);
    text-overflow: ellipsis;
}

/* La miniatura sta SEMPRE in alto, alla stessa quota del titolo, e non riserva
   piu' i 24px per la targhetta: adesso la targhetta ci sta sopra.
   Prima la regola era condizionata a :has(> .tp-catalogue-chip), quindi le
   schede senza catalogo seguivano un'altra strada; ora e' una sola. */
.container-elenco-products .container-img-tableproducts {
    align-self: start;
    margin-bottom: 0;
}


/* --- Avvisi appoggiati in alto ----------------------------------------------
 * Il foglio 1 centra il riquadro dell'avviso dentro la propria area
 * (align-items: center), e quando l'area e' piu' alta del riquadro l'avviso
 * scende: da utente non loggato partiva 14px sotto la pillola della
 * disponibilita' (24px con il COLLO VOLUMINOSO). Qui parte in alto, alla
 * stessa quota della pillola. L'override sta nel foglio della TABELLA e non
 * nel foglio 1 perche' quest'ultimo serve anche a LISTATO e RIQUADRI, dove
 * l'avviso e' posizionato in un altro modo e va lasciato com'e'.
 * -------------------------------------------------------------------------- */
.container-elenco-products .tp-row-alert,
.container-elenco-products .external-info-alert-hide-action-user-nologged,
.container-elenco-products .external-info-alert-validation-account-progress,
.container-elenco-products .external-info-alert-not-available-product-message {
    align-items: flex-start;
}


/* =============================================================================
 * 11-bis. RITOCCHI DELLA RIGA PRODOTTO
 * -----------------------------------------------------------------------------
 * Tutto quello che sta qui vale SOLO per la vista TABELLA: le regole partono da
 * .container-elenco-products, che e' la scheda di questa vista. Il LISTATO
 * (.container-elenco-products-list) e i RIQUADRI (.container-elenco-products-box)
 * non vengono sfiorati, e nemmeno il foglio 1, che serve a tutte e tre.
 * ========================================================================== */

.container-elenco-products {
    /* Altezza della targhetta del catalogo: serve al conto che la centra sul
       bordo basso della miniatura, piu' su nel foglio. */
    --tp-chip-h: 17px;

    /* Altezza fissa del riquadro del prezzo. E' quella che il riquadro assume
       quando c'e' anche la riga "Promo fino al ...": 43px di contenuto + 10 di
       padding + 2 di cornice. Fissarla vuol dire che tutti i riquadri azzurri
       della pagina sono alti uguali, con o senza promozione, e le righe non
       ballano piu' passando da un prodotto all'altro. */
    --tp-price-h: 55px;
}

/* --- Il riquadro del prezzo ------------------------------------------------ */
.container-elenco-products .container-product-price {
    padding: 5px 10px;
    /* justify-content: center e' gia' nel foglio 1: quando la riga della
       promozione non c'e', il prezzo da solo si trova percio' a meta' altezza
       del riquadro invece che appoggiato in alto. */
}

/* L'altezza fissa vale SOLO da 768px in su, cioe' dove i riquadri stanno
   affiancati sulla stessa riga e devono essere alti uguali. Sotto, le schede
   sono impilate e nessuno confronta due riquadri fra loro: fissare l'altezza
   costerebbe 9px per ogni prodotto senza promozione, moltiplicati per tutta la
   pagina, in cambio di niente. */
@media screen and (min-width: 768px) {
    .container-elenco-products .container-product-price {
        height: var(--tp-price-h);
    }
}

/* --- Titolo, sottotitolo e blocco codici: spazi piu' stretti --------------- */

/* Fra il titolo e il sottotitolo: da 4px a 2px. */
.container-elenco-products .subtitles-shortdescription-product {
    margin-top: 2px;
}

/* Fra il sottotitolo e il blocco dei codici: e' il corridoio fra le due righe
   della griglia, da 8px a 6px. */
.container-elenco-products > .dx-area-data-product {
    row-gap: 6px;
}

/* Fra una voce e l'altra dentro il blocco codici: da 3px a 2px. */
.container-elenco-products .color-sku-minord-packaging p {
    margin-bottom: 2px;
}

/* --- La riga della quantita' ----------------------------------------------
 * Il campo e l'etichetta VOLUMINOSO stanno adesso sulla stessa riga: prima
 * l'etichetta era in fondo al blocco dei codici e gli aggiungeva una riga
 * intera, mentre qui c'e' spazio libero che non usava nessuno.
 * -------------------------------------------------------------------------- */
.container-elenco-products .tp-quantity-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    /* negativo: avvicina il blocco di 4px all'etichetta verde/arancione della
       disponibilita', che nel foglio 1 e' distante 8px. */
    margin-top: -4px;
}

/* --- Il campo quantita' con i pulsanti - e + ------------------------------- */
.container-elenco-products .tp-quantity-field {
    align-items: stretch;
}

.container-elenco-products .tp-quantity-field .form-control-view-product-quantity-table-mode,
.container-elenco-products .tp-quantity-field .input-space-quantity-table-mode {
    /* da 30 a 26px, e il campo si stringe perche' non deve piu' contenere le
       frecce di incremento del browser: ci pensano i due pulsanti. */
    width: 3.1em;
    height: 26px;
    padding: 2px 2px;
    /* niente angoli tondi a sinistra: adesso a sinistra c'e' il pulsante meno */
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

/* La casella CONF / PZ: padding da 9px a 5px per riga, e stessa altezza. */
.container-elenco-products .tp-quantity-field .form-control-view-product-packaging-table-mode {
    height: 26px;
    padding: 0 5px;
}

/* I due pulsanti. Stessa forma di quelli della scheda prodotto. */
.container-elenco-products .tp-qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 26px;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #f2f6f9;
    border: 1px solid var(--tp-border-strong);
    color: var(--tp-ink-soft);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.14s ease, color 0.14s ease;
}

.container-elenco-products .tp-qty-btn:first-of-type {
    border-radius: var(--tp-radius-sm) 0 0 var(--tp-radius-sm);
}

.container-elenco-products .tp-qty-btn:hover {
    background-color: var(--tp-accent);
    border-color: var(--tp-accent);
    color: #ffffff;
}

.container-elenco-products .tp-qty-btn:focus-visible {
    outline: 2px solid var(--tp-accent);
    outline-offset: -2px;
    z-index: 1;
}

/* --- L'etichetta VOLUMINOSO nella sua nuova posizione ----------------------
 * La regola e' agganciata a .tp-quantity-row, non alla sola classe: l'etichetta
 * compare anche altrove (per esempio nelle righe dei preferiti, dove sta ancora
 * nel blocco dei codici) e li' deve restare come e'.
 * -------------------------------------------------------------------------- */
.container-elenco-products .tp-quantity-row .info-bulky-product {
    margin: 0 !important;
    padding: 3px 6px;
    /* help e non default: c'e' un tooltip che spiega cosa vuol dire */
    cursor: help;
    line-height: 1.2;
}


/* =============================================================================
 * 12. RESPONSIVE
 * -----------------------------------------------------------------------------
 * Tre disposizioni, contro le decine di soglie a 25px del file precedente:
 *
 *   >= 1200px   riga unica: miniatura | titolo, poi
 *               specifiche | disponibilita' | prezzo | pulsanti
 *               (unica fascia con altezza fissa: le righe sono tutte uguali)
 *   992-1199px  miniatura | titolo, poi specifiche | disponibilita' | prezzo,
 *               e i pulsanti a capo su una fascia a tutta larghezza, affiancati
 *   768-991px   due righe da due colonne
 *   < 768px     scheda verticale per smartphone
 * ========================================================================== */

/* --- Desktop stretto: minimi delle colonne un po' piu' bassi -------------- */
@media screen and (max-width: 1399px) {
    .container-elenco-products {
        --tp-thumb-size: 8rem;
        --tp-col-stock: 13.5rem;
        --tp-col-price: 15rem;
        --tp-col-actions: 17.4rem;
    }
}

/* --- Tablet orizzontale: pulsanti a capo su fascia a tutta larghezza ------ */
@media screen and (max-width: 1199px) {
    .container-elenco-products {
        /* Da qui in giu' l'altezza segue il contenuto: fissarla sul caso
           peggiore lascerebbe troppo spazio vuoto sulle schede semplici. */
        height: auto;
        --tp-thumb-size: 11.25rem;   /* +50% rispetto alla versione precedente */
        --tp-col-stock: 13.5rem;
        --tp-col-price: 14rem;
    }

    .container-elenco-products > .dx-area-data-product {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(var(--tp-col-stock), 1fr)
            minmax(var(--tp-col-price), 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "title   title   title"
            "specs   stock   price"
            "actions actions actions";
        /* La miniatura e' allineata in alto con il titolo: il contenuto parte
           dal bordo superiore invece di essere centrato. */
        align-content: start;
    }

    .container-elenco-products > .dx-area-data-product:has(> .tp-row-alert) {
        grid-template-columns: minmax(0, 1fr) minmax(var(--tp-col-stock), 1fr);
        grid-template-areas:
            "title title"
            "specs stock"
            "alert alert";
    }

    .container-elenco-products .container-img-tableproducts {
        align-self: start;
    }

    /* Pulsanti affiancati sulla fascia a tutta larghezza, non impilati. */
    .container-elenco-products .container-cart-favorite-quotation-button {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 4px;
        padding: 11px 0 0 !important;
        border-left: 0;
        border-top: 1px solid var(--tp-border);
    }

    .container-elenco-products .container-cart-favorite-quotation-button > .btn-primary3-tableproducts-cart,
    .container-elenco-products .container-cart-favorite-quotation-button > .btn-primary3-tableproducts-favquot {
        flex: 0 1 15rem;
    }

    .container-elenco-products .tp-actions-footer {
        margin: 0 0 0 auto;
    }

    .container-elenco-products .can-buy-all-products-info {
        flex-basis: 100%;
        margin: 0;
    }
}

/* --- Tablet verticale: due righe da due colonne --------------------------- */
@media screen and (max-width: 991px) {
    .container-elenco-products {
        height: auto;
        --tp-thumb-size: 10.5rem;
    }

    .container-elenco-products > .dx-area-data-product {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "title title"
            "specs stock"
            "price actions";
    }

    .container-elenco-products > .dx-area-data-product:has(> .tp-row-alert) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "title title"
            "specs stock"
            "alert alert";
    }

    .container-elenco-products .container-cart-favorite-quotation-button {
        flex-direction: column;
        align-items: stretch;
        margin-top: 0;
        padding: 0 0 0 14px !important;
        border-left: 1px solid var(--tp-border);
        border-top: 0;
    }

    .container-elenco-products .container-cart-favorite-quotation-button > .btn-primary3-tableproducts-cart,
    .container-elenco-products .container-cart-favorite-quotation-button > .btn-primary3-tableproducts-favquot {
        flex: 0 0 auto;
    }

    .container-elenco-products .tp-actions-footer {
        margin: 2px 0 0;
    }

    .container-elenco-products .container-product-price {
        align-self: start;
    }
}

/* --- Smartphone: scheda verticale ------------------------------------------
 * .dx-area-data-product diventa display:contents, cosi' i suoi figli entrano
 * direttamente nella griglia della scheda e si dispongono liberamente insieme
 * alla miniatura.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .container-elenco-products {
        height: auto;
        --tp-thumb-size: 10.5rem;    /* +50% rispetto alla versione precedente */
        grid-template-columns: var(--tp-thumb-size) minmax(0, 1fr);
        grid-template-areas:
            "title   title"
            "thumb   specs"
            "thumb   stock"
            "price   price"
            "actions actions";
        align-content: start;
        column-gap: 14px;
        row-gap: 11px;
        padding: 14px;
    }

    .container-elenco-products > .dx-area-data-product,
    .container-elenco-products > .dx-area-data-product:has(> .tp-row-alert) {
        display: contents;
    }

    /* La miniatura parte dalla riga del codice prodotto, non dal centro. */
    .container-elenco-products .container-img-tableproducts {
        grid-area: thumb;
        align-self: start;
    }

    .container-elenco-products .tp-row-alert,
    .container-elenco-products .external-info-alert-hide-action-user-nologged,
    .container-elenco-products .external-info-alert-validation-account-progress,
    .container-elenco-products .external-info-alert-not-available-product-message {
        grid-area: actions;
        height: auto;
    }

    .container-elenco-products .title-subtitle-container {
        overflow: visible;
    }

    .container-elenco-products .title-product {
        font-size: 13.5px;
    }

    .container-elenco-products .title-product > a {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }

    /* Disponibilita' e campo quantita' allineati a sinistra. */
    .container-elenco-products .container-available-quantity-bulky {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

    /* Riquadro prezzo a tutta larghezza della scheda. */
    .container-elenco-products .container-product-price {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        column-gap: 12px;
        width: 100%;
        max-width: none;
        align-self: start;
    }

    .container-elenco-products .container-cart-favorite-quotation-button {
        flex-direction: column;
        align-items: stretch;
        margin-top: 0;
        padding: 11px 0 0 !important;
        border-left: 0;
        border-top: 1px solid var(--tp-border);
    }

    .container-elenco-products .tp-actions-footer {
        justify-content: flex-start;
        margin: 4px 0 0;
    }

}

@media screen and (max-width: 430px) {
    .container-elenco-products {
        --tp-thumb-size: 9rem;
        padding: 12px;

        /* Il blocco disponibilita' + quantita' esce da sotto la miniatura e
           prende una riga tutta sua a larghezza piena, come il prezzo e i
           pulsanti. Serve perche' la pillola della disponibilita' non puo' ne'
           andare a capo ne' restringersi (white-space: nowrap !important e
           max-width: none !important, richiesti perche' l'etichetta stia
           sempre su una riga sola): accanto alla miniatura le restavano 183px
           a 390px di viewport contro i ~205px dell'etichetta piu' lunga, e la
           coda finiva tagliata dall'overflow della scheda. A tutta larghezza
           ne ha oltre 330px, quindi il testo si legge sempre per intero. */
        grid-template-areas:
            "title   title"
            "thumb   specs"
            "stock   stock"
            "price   price"
            "actions actions";
    }
}


/* --- Scostamento orizzontale del blocco disponibilita' + quantita' ---------
 * Registrazione fine richiesta sulla vista tabella: il blocco rientra a
 * sinistra sulle larghezze ampie e sporge leggermente a destra nella fascia
 * tablet. Sotto i 768px resta dov'e'.
 * translateX sposta solo il disegno: non altera la griglia ne' le colonne
 * vicine, quindi nessun rischio di sovrapposizioni o di testi a capo.
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
    .container-elenco-products .container-available-quantity-bulky {
        transform: translateX(-45px);
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .container-elenco-products .container-available-quantity-bulky {
        transform: translateX(15px);
    }
}



/* --- SOPRA I 768px: solo il nome del catalogo -------------------------------
 * Da 768px in su la targhetta perde l'icona e la parola "Catalogo": resta il
 * solo nome ("Medicale", "Farmaceutico"). Il senso si capisce lo stesso dalla
 * posizione - e' sotto la miniatura del prodotto - e la targhetta dimezza la
 * larghezza, quindi non arriva piu' a toccare il contenuto della colonna di
 * destra in nessuna delle situazioni che avevano dato problemi: ne' fra 768 e
 * 1199px, dove i pulsanti e il prezzo scendono a fianco della miniatura, ne'
 * sopra i 1200px sulle schede alte (sottotitolo, promozione, avviso).
 *
 * Le due parti sono elementi distinti nel template proprio per poterle
 * spegnere qui: <i> per l'icona, .tp-catalogue-chip-word per la parola. Sotto
 * i 768px non si applica niente di tutto questo e la targhetta resta com'era,
 * icona compresa, sulla sua fascia a larghezza piena.
 *
 * La targhetta e' allineata a SINISTRA a tutte le larghezze, come il bordo
 * sinistro della miniatura.
 * -------------------------------------------------------------------------- */
/* La parola "Catalogo" non si vede mai: resta nel markup - e quindi nel testo
   della pagina e per chi legge con la sintesi vocale - ma non a schermo. */
.container-elenco-products > .tp-catalogue-chip .tp-catalogue-chip-word {
    display: none;
}

/* L'icona invece sparisce solo da 768px in su: sotto, dove la targhetta ha
   piu' spazio, resta. */
@media screen and (min-width: 768px) {
    .container-elenco-products > .tp-catalogue-chip > i {
        display: none;
    }
}

/* Fra 768 e 1199px la colonna di destra scende a fianco della miniatura per
   tutta l'altezza della scheda: qui la targhetta non puo' superare la colonna
   della miniatura piu' lo spazio fra le colonne (16px), che e' vuoto per
   definizione. E' la stessa misura che definisce la colonna, quindi il limite
   resta esatto qualunque sia la dimensione della miniatura. */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .container-elenco-products > .tp-catalogue-chip {
        max-width: calc(var(--tp-thumb-size) + 16px);
    }
}


/* --- Sotto i 768px --------------------------------------------------------
 * Qui la scheda e' verticale e il titolo sta SOPRA la miniatura, quindi non si
 * sa in anticipo a che quota comincia l'immagine e la posizione assoluta non
 * si puo' usare. La targhetta torna nel flusso e va nella stessa area della
 * miniatura ("thumb"), appoggiata in alto e spinta giu' di
 * "miniatura + 7px": il risultato e' identico a quello delle larghezze
 * maggiori - 7px sotto l'immagine, centrata su di essa - ma ottenuto con il
 * margine invece che con top/left. L'area cresce da sola per contenerla,
 * quindi qui non serve nessuno spazio riservato sulla miniatura.
 *
 * Prima la targhetta aveva una fascia sua a tutta larghezza (area "catalog",
 * ora tolta dalle due griglie): lo stacco dall'immagine dipendeva dal gap
 * fra le righe e da quanto erano alte le colonne accanto, e veniva 15,8px
 * fra 431 e 767px e 11px sotto i 430. Adesso e' 7px ovunque, per costruzione.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    .container-elenco-products > .tp-catalogue-chip {
        position: static;
        transform: none;
        grid-area: thumb;
        justify-self: center;
        align-self: start;
        /* Anche qui la targhetta sta A CAVALLO DEL BORDO BASSO dell'immagine,
           come sopra i 768px: il margine la spinge giu' fino al bordo e poi la
           tira su di meta' della sua altezza. Prima il margine era
           "miniatura + 7px" e la targhetta restava staccata sotto. */
        margin: calc(var(--tp-thumb-size) - (var(--tp-chip-h) / 2)) 0 0;
        max-width: 100%;
        /* height: auto, non l'altezza fissa delle larghezze maggiori: qui un
           nome di due parole puo' andare a capo, e con l'altezza fissa la
           seconda riga verrebbe tagliata. */
        height: auto;
        min-height: var(--tp-chip-h);
        /* Qui la targhetta e' larga al massimo quanto la miniatura, e sotto i
           768px tiene ancora l'icona: un nome di due parole ("Igiene Ambienti")
           puo' non entrarci. In quel caso va a capo invece di essere tagliato -
           l'area cresce da sola per contenerlo - e le due righe restano
           centrate come il resto. */
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: center;
    }

    /* (La riga che azzerava il margine sotto la miniatura non serve piu':
       adesso il margine e' zero dappertutto, non solo qui.) */
}