/* =============================================================================
 * PAGINA ELENCO PRODOTTI - FOGLIO 1 di 5: BASE COMUNE ALLE TRE VISTE
 * -----------------------------------------------------------------------------
 * Tutto cio' che TABELLA, LISTATO e RIQUADRI usano allo stesso modo: token di
 * design, contenitore dell'elenco, miniatura, titolo, specifiche, disponibilita',
 * prezzo, pulsanti, avvisi di stato, utility e paginazione. Non contiene nessuna
 * griglia: la disposizione degli elementi e' decisa dal foglio della vista.
 *
 * 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.
 * ========================================================================== */

/* =============================================================================
 * 1. TOKEN DI DESIGN
 * -----------------------------------------------------------------------------
 * Le variabili globali del tema (--primary-color, --tertiary-color,
 * --primary-color-container-border, --text-button-add-cart) NON vengono
 * ridefinite: qui si dichiarano solo i token locali dell'elenco prodotti, con
 * un fallback sui valori attualmente in uso nel sito.
 * ========================================================================== */

.box-container-products,
.container-elenco-products,
.container-elenco-products-list,
.container-elenco-products-box,
/* Anche la scheda di lista vuota usa i token: senza questo selettore le sue
   dichiarazioni con var() risulterebbero invalide, e questo azzererebbe lo
   sfondo bianco, il bordo e l'ombra che le arrivano da .box-container. */
.container-tableproducts-empty-page {
    --tp-ink: #112A46;
    --tp-ink-soft: var(--tertiary-color, #5b7488);
    --tp-accent: var(--primary-color, #16688B);

    --tp-surface: #ffffff;
    --tp-surface-price: rgba(0, 144, 158, 0.07);

    --tp-border: #e0e7ed;
    --tp-border-strong: #cfd9e1;
    --tp-border-price: rgba(0, 144, 158, 0.18);

    --tp-promo: #d0342c;

    --tp-radius: 8px;
    --tp-radius-sm: 6px;
    --tp-radius-pill: 999px;
    --tp-card-radius: 10px;

    --tp-shadow-card: 0 1px 2px rgba(17, 42, 70, 0.05), 0 1px 8px rgba(17, 42, 70, 0.04);
    --tp-shadow-hover: 0 2px 4px rgba(17, 42, 70, 0.07), 0 6px 18px rgba(17, 42, 70, 0.10);
    --tp-focus-ring: 0 0 0 3px rgba(22, 104, 139, 0.28);

    --tp-fs-title: 13px;
    --tp-fs-meta: 11px;
    --tp-fs-button: 11.5px;

    /* --- Geometria della scheda prodotto ---------------------------------
       Unico punto in cui regolare proporzioni e altezze.
       Le colonne di destra sono dichiarate come larghezza MINIMA: la griglia
       distribuisce poi lo spazio in eccesso fra tutte e quattro in modo
       proporzionale, invece di accumularlo tutto nella colonna delle
       specifiche. I minimi garantiscono che nessuna etichetta vada a capo. */
    --tp-thumb-size: 8.75rem;    /* 140px - miniatura */
    --tp-col-stock: 15rem;       /* 240px - "Disponibile magazzino esterno" su una riga */
    --tp-col-price: 17rem;       /* 272px - prezzo + prezzo barrato + riga promo */
    --tp-col-actions: 19.25rem;  /* 308px - colonna pulsanti (+20%) */

    /* Altezza fissa della scheda, SOLO da 1200px in su: tutte le righe sono
       identiche. Il valore e' tarato sul prodotto piu' completo (catalogo +
       titolo su due righe + sottotitolo + collo voluminoso + promozione),
       quindi nessun contenuto viene mai tagliato.
       Su tablet e smartphone la scheda si adatta invece al contenuto. */
    --tp-row-min-height: 10rem;      /* 160px. E' un pavimento, non un'altezza:
                                    la scheda si adatta sempre al contenuto e
                                    questo valore serve solo a non farla
                                    diventare piu' bassa della miniatura.
                                    Misure di riferimento a >=1200px: la
                                    miniatura da 140px + i 24px di padding
                                    impongono 164px, e la scheda piu' completa
                                    (catalogo + titolo su 2 righe + sottotitolo
                                    + collo voluminoso + promo) arriva a 177px.
                                    Quindi ogni valore fino a 10.25rem lascia la
                                    scheda liberamente adattiva; oltre, inizia
                                    ad aggiungere spazio vuoto (a 14rem erano
                                    circa 58px per scheda). */
    --tp-card-gap: 10px;         /* distanza fra una scheda e la successiva */

    /* Altezza massima dell'area scorrevole che contiene le schede. */
    --tp-list-height: 80em;
}


/* =============================================================================
 * 2. CONTENITORE DELL'ELENCO
 * -----------------------------------------------------------------------------
 * Il contenitore e' neutro: niente fondo bianco ne' bordo laterale. Ogni riga
 * prodotto e' una scheda a se' stante (sezione 3). Resta lo scorrimento
 * verticale interno.
 * ========================================================================== */

.box-container-products {
    margin-bottom: 2em;
    margin-top: 0.5em;
    padding: 3px;   /* respiro per ombre e barra di scorrimento */
    background: transparent;
    border: 0;
    box-shadow: none;
    max-height: var(--tp-list-height);
    overflow-x: hidden;
    overflow-y: auto;

    /* NON mettere qui overscroll-behavior: contain.
       Il riquadro e' piu' alto della finestra (80rem = 1280px contro i ~900px
       di un portatile), quindi il suo fondo sta fuori campo: quando lo scroll
       interno finisce, deve poter passare il testimone alla pagina, altrimenti
       le ultime schede restano sotto il bordo dello schermo e per vederle si e'
       costretti a spostare il cursore fuori dall'elenco. "auto" e' il valore
       predefinito ed e' quello che serve: lo scriviamo per memoria. */
    overscroll-behavior: auto;

    scrollbar-width: thin;
    scrollbar-color: #c0ccd6 transparent;
}

.box-container-products::-webkit-scrollbar {
    width: 10px;
}

.box-container-products::-webkit-scrollbar-track {
    background: transparent;
}

.box-container-products::-webkit-scrollbar-thumb {
    background-color: #c0ccd6;
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: var(--tp-radius-pill);
}

.box-container-products::-webkit-scrollbar-thumb:hover {
    background-color: #a3b3c1;
}

/* Variante rivenditore: il filetto dorato passa dal contenitore (ora
   trasparente) al bordo sinistro di ogni singola scheda. */
.box-container-products-reseller .container-elenco-products::before,
.box-container-products-reseller .container-elenco-products-list::before,
.box-container-products-reseller .container-elenco-products-box::before {
    opacity: 1;
    width: 4px;
    background: linear-gradient(to bottom, #FFEB88 0%, #feda37 12%, #daa520 30%, #C19014 50%, #9f7928 66%, #daa520 84%, #FFC940 100%);
}

.container-tableproducts-empty-page {
    margin-top: 0;
    padding: 2.5em 1.5em;
    background-color: var(--tp-surface);
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-card-radius);
    box-shadow: var(--tp-shadow-card);
    min-height: 20em;
}


/* =============================================================================
 * 4. MINIATURA
 * ========================================================================== */

.container-img-tableproducts {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tp-thumb-size);
    height: var(--tp-thumb-size);
    padding: 7px;
    background-color: #ffffff;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius);
    align-self: center;
    transition: border-color 0.18s ease;
}

.container-elenco-products:hover .container-img-tableproducts,
.container-elenco-products-box:hover .container-img-tableproducts {
    border-color: var(--tp-border-strong);
}

.img-tableproducts {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--tp-radius-sm);
}


/* =============================================================================
 * 5. TITOLO E SOTTOTITOLO
 * -----------------------------------------------------------------------------
 * Il troncamento e' tipografico (line-clamp): il titolo completo resta nel DOM
 * e l'ellissi si adatta alla larghezza reale, invece delle sei varianti PHP
 * con substr() diverso per ogni fascia di schermo.
 * ========================================================================== */

.title-product {
    margin: 0;
    font-size: var(--tp-fs-title);
    font-weight: 700;
    line-height: 1.3;
}

.title-product > a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--tp-accent);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.title-product > a:hover,
.title-product > a:focus-visible {
    text-decoration: underline;
}

.tp-catalogue-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    padding: 1px 8px;
    background-color: #eef3f7;
    border-radius: var(--tp-radius-pill);
    color: var(--tp-ink-soft);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
}

.subtitles-shortdescription-product {
    position: static;
    max-width: 100%;
    margin: 4px 0 0;
    top: auto;
}

.subtitles-shortdescription-product a {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    overflow: hidden;
    background-color: #f1f4f7;
    border-radius: 4px;
    color: var(--tp-ink-soft);
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.5px;
    line-height: 1.4;
    text-overflow: ellipsis;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: top;
}

.subtitles-shortdescription-product a:hover {
    background-color: #e6ecf2;
}


/* =============================================================================
 * 6. SPECIFICHE: CODICI, MINIMO D'ORDINE, PACKAGING
 * ========================================================================== */

.container-sku-minord-packaging {
    margin: 0;
    left: auto;
}

.color-sku-minord-packaging p {
    margin: 0 0 3px;
    color: var(--tp-ink-soft);
    font-size: var(--tp-fs-meta);
    line-height: 1.45;
}

.color-sku-minord-packaging p:last-child {
    margin-bottom: 0;
}

.color-sku-minord-packaging span {
    color: inherit;
    font-size: inherit;
}

.color-sku-minord-packaging span[data-toggle="tooltip"] {
    cursor: help;
}

.color-sku-minord-packaging i {
    display: inline-block;
    width: 15px;
    margin-right: 5px;
    color: var(--tp-accent);
    text-align: center;
    opacity: 0.8;
}

.info-bulky-product {
    display: inline-block;
    margin-top: 4px !important;
    padding: 0px 2px;
    background-color: #fff3cd;
    border-radius: 4px;
    color: var(--tp-ink) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em;
    line-height: 1.6;
}


/* =============================================================================
 * 7. DISPONIBILITA' E QUANTITA'
 * ========================================================================== */

.container-available-quantity-bulky {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    top: auto;
    left: auto;
}

/* display:flex elimina l'interlinea che la riga di testo aggiungerebbe sopra
   la pillola: cosi' il bordo superiore della pillola coincide esattamente con
   quello del riquadro prezzo, che sta nella stessa riga di griglia. */
.text-availability-tableproducts {
    display: flex;
    align-items: flex-start;
    width: auto;
    max-width: 100%;
    margin: 0;
    font-size: var(--tp-fs-meta);
    line-height: 1.4;
}

/* Il markup della pillola arriva da DisplayMessage::availability() e porta con
   se' il proprio foglio di stile: l'!important impedisce che l'etichetta vada
   a capo. La colonna e' dimensionata (--tp-col-stock) per contenerla. */
.text-availability-tableproducts,
.text-availability-tableproducts * {
    white-space: nowrap !important;
    max-width: none !important;
}

.tp-quantity-field {
    display: flex;
    align-items: stretch;
}

.tp-quantity-field .form-control-view-product-quantity-table-mode,
.tp-quantity-field .form-control-view-product-quantity-list-mode,
.tp-quantity-field .input-space-quantity-table-mode {
    width: 4.5em;
    height: 30px;
    margin: 0;
    padding: 4px 6px;
    background-color: #ffffff;
    border: 1px solid var(--tp-border-strong);
    border-right: 0;
    border-radius: var(--tp-radius-sm) 0 0 var(--tp-radius-sm);
    box-shadow: none;
    color: var(--tp-ink);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.tp-quantity-field .form-control-view-product-quantity-table-mode:focus,
.tp-quantity-field .form-control-view-product-quantity-list-mode:focus {
    border-color: var(--tp-accent);
    box-shadow: var(--tp-focus-ring);
    outline: none;
}

.tp-quantity-field .form-control-view-product-packaging-table-mode {
    position: static;
    display: flex;
    align-items: center;
    width: auto;
    height: 30px;
    top: auto;
    padding: 0 9px;
    background-color: #f2f6f9;
    border: 1px solid var(--tp-border-strong);
    border-radius: 0 var(--tp-radius-sm) var(--tp-radius-sm) 0;
    box-shadow: none;
    color: var(--tp-ink-soft);
    font-size: var(--tp-fs-meta);
    font-weight: 600;
    white-space: nowrap;
}


/* =============================================================================
 * 8. PREZZO E PROMOZIONE
 * ========================================================================== */

.container-product-price {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: auto;
    top: auto;
    left: auto;
    padding: 9px 12px;
    background-color: var(--tp-surface-price) !important;
    border: 1px solid var(--tp-border-price);
    border-radius: var(--tp-radius);
    line-height: 1.25;
}

.container-product-price p {
    margin: 0;
}

.promotion-alert-string {
    position: static;
    width: auto;
    margin: 0;
    top: auto;
    left: auto;
    color: var(--tp-promo) !important;
    font-size: var(--tp-fs-meta) !important;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}


/* =============================================================================
 * 9. AZIONI: CARRELLO, PREVENTIVO, ANTEPRIMA, PREFERITI
 * -----------------------------------------------------------------------------
 * Nella colonna dedicata (>=1200px) i pulsanti sono uno sotto l'altro e
 * riempiono la colonna. Quando la fascia va a capo a tutta larghezza
 * (992-1199px) si affiancano. Il testo non va mai a capo.
 * ========================================================================== */

.container-cart-favorite-quotation-button {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    top: auto;
    right: auto;
    left: auto;
    padding: 0 0 0 14px !important;
    border-left: 1px solid var(--tp-border);
}

.btn-primary3-tableproducts-cart,
.btn-primary3-tableproducts-favquot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto !important;
    min-height: 30px;
    margin: 0;
    padding: 6px 8px;
    float: none !important;
    border-radius: var(--tp-radius-sm);
    font-size: var(--tp-fs-button);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-align: center !important;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.btn-primary3-tableproducts-cart {
    background: var(--primary-color);
    border: 1px solid var(--primary-color) !important;
    color: var(--text-button-add-cart) !important;
}

.btn-primary3-tableproducts-cart i {
    color: var(--text-button-add-cart) !important;
    font-size: 1.1em;
}

.btn-primary3-tableproducts-cart:hover,
.btn-primary3-tableproducts-cart:focus,
.btn-primary3-tableproducts-cart:active {
    background: #ffffff !important;
    border-color: var(--primary-color) !important;
    color: var(--tp-ink) !important;
}

.btn-primary3-tableproducts-cart:hover i,
.btn-primary3-tableproducts-cart:focus i,
.btn-primary3-tableproducts-cart:active i {
    color: var(--tp-ink) !important;
}

.btn-primary3-tableproducts-favquot {
    background: #ffffff;
    border: 1px solid var(--tp-border-strong) !important;
    color: var(--tp-ink) !important;
}

.btn-primary3-tableproducts-favquot:hover,
.btn-primary3-tableproducts-favquot:focus,
.btn-primary3-tableproducts-favquot:active {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.btn-primary3-tableproducts-favquot:hover i,
.btn-primary3-tableproducts-favquot:focus i,
.btn-primary3-tableproducts-favquot:active i {
    color: #ffffff !important;
}

.text-richiedi-prev {
    font-size: var(--tp-fs-button) !important;
}

/* --- Variante rivenditore: il testo dorato --------------------------------
 *
 * PERCHE' IL GRADIENTE ORA STA SU UNO <span> E NON PIU' SUL PULSANTE
 *
 * Il dorato non e' un colore: e' un GRADIENTE messo come sfondo e poi
 * ritagliato sulla forma delle lettere (background-clip: text) con le lettere
 * rese trasparenti. Finche' quel trucco stava sul pulsante, sfondo del
 * pulsante e colore della scritta erano LA STESSA PROPRIETA', e non potevano
 * essere due cose diverse. Da qui i due difetti:
 *
 *  - a riposo il pulsante non aveva nessuno sfondo (il bianco della regola
 *    generica veniva sostituito dal gradiente, che pero' si vede solo dentro
 *    alle lettere): sembrava bianco solo perche' la pagina e' bianca;
 *  - al passaggio del mouse la regola generica sostituiva il gradiente con un
 *    colore pieno, e quel colore - ritagliato sulle lettere - diventava il
 *    colore della scritta. Grigio su grigio: la scritta spariva.
 *
 * Adesso il gradiente sta su uno <span> dentro al pulsante (.tp-gold-text):
 * il pulsante ha il suo sfondo, la scritta ha il suo dorato, e i due non si
 * toccano piu'. Al passaggio del mouse il fondo diventa grigio e la scritta
 * resta dorata, come chiesto.
 *
 * NOTA - lo <span> lo mettono i due template della vista TABELLA. Se un
 * domani ci si dimentica di aggiornarli, il pulsante non si rompe: mostra la
 * scritta nel colore normale invece che dorata.
 * ------------------------------------------------------------------------- */
.tp-gold-text {
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, #DAA520 80%), radial-gradient(ellipse farthest-corner at left top, #fffcc5 0%, #fcec55 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tp-gold-text > i {
    background-clip: text;
    -webkit-text-fill-color: #91793d;
}

.text-richiedi-prev-reseller {
    font-size: 11px !important;
}

/* Al passaggio del mouse: fondo grigio, bordo invariato. La scritta non viene
   nominata: e' lo <span> a tenersi il suo dorato. */
.text-richiedi-prev-reseller:hover,
.text-richiedi-prev-reseller:focus,
.text-richiedi-prev-reseller:active {
    background: #ebebeb !important;
    border-color: var(--tp-border-strong) !important;
}

.text-richiedi-prev-reseller > i {
    background-clip: text;
    -webkit-text-fill-color: #91793d;
}

/* Riga inferiore: anteprima + preferiti. */
.tp-actions-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.preview-product-modal-link {
    display: inline-flex;
    align-items: center;
    padding-right: 10px;
    border-right: 1px solid var(--tp-border-strong) !important;
    font-size: 11px;
}

.preview-product-modal-link a,
.tp-favorite-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--tp-ink-soft);
    font-size: 11px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.16s ease;
}

.preview-product-modal-link a:hover,
.preview-product-modal-link a:focus-visible {
    color: var(--tp-accent);
}

.preview-product-modal-link i {
    font-size: 1.25em;
}

.tp-favorite-link:hover,
.tp-favorite-link:focus-visible {
    color: #d0342c;
}

.tp-favorite-link:hover .heart-icon-favorites,
.tp-favorite-link:focus-visible .heart-icon-favorites {
    color: #d0342c;
    transform: scale(1.12);
}

.heart-icon-favorites {
    font-size: 1.2em;
    color: var(--tp-ink-soft);
    transition: color 0.16s ease, transform 0.16s ease;
}

.can-buy-all-products-info {
    position: static !important;
    margin: 2px 0 0;
    top: auto;
    left: auto;
    color: var(--tp-ink) !important;
    font-size: var(--tp-fs-meta);
    line-height: 1.3;
}



/* --- Azioni compatte a sola icona -------------------------------------------
 * NUOVE. Le usano la vista LISTATO e la vista a RIQUADRI, dove non c'e' spazio
 * per i pulsanti con l'etichetta. Stanno qui, e non nei due fogli delle viste,
 * proprio perche' sono in comune fra i due.
 *
 * COLORE DELLE ICONE. Le icone Font Awesome, soprattutto le duotone, portano
 * un colore proprio e non seguirebbero quello del pulsante: da qui i casi in
 * cui l'icona restava scura sul fondo blu. Le tre variabili --fa-* piu'
 * color: inherit le costringono a seguire sempre il colore del pulsante, cosi'
 * basta cambiare quello per avere il comportamento giusto in tutti gli stati.
 * -------------------------------------------------------------------------- */

.tp-icon-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background-color: #ffffff;
    border: 1px solid var(--tp-border);
    border-radius: var(--tp-radius-sm);
    color: var(--tp-ink-soft);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.tp-icon-action i {
    font-size: 1.05em;
}

/* COLORE DELL'ICONA - perche' serve tutta questa insistenza.
 *
 * Il colore non viene ereditato con "color", ma imposto con una variabile
 * dedicata, --tp-icon-ink, dichiarata sul pulsante e cambiata in ogni stato.
 * Il motivo e' che l'icona puo' essere disegnata in tre modi diversi, e ognuno
 * si colora a modo suo:
 *   - carattere Font Awesome normale  -> glifo in ::before
 *   - Font Awesome duotone            -> DUE glifi, ::before e ::after, ognuno
 *                                        con colore e opacita' propri
 *   - Font Awesome con sostituzione JS -> l'elemento <i> diventa un <svg>, e i
 *                                        selettori su "i" non lo raggiungono
 * piu': per questo qui sono elencati anche svg e i suoi figli.
 *
 * -webkit-text-fill-color e fill sono la parte che chiude la questione: sono
 * piu' forti di "color" nel decidere con che colore il glifo viene dipinto,
 * quindi vincono anche se un foglio di stile del sito impone un colore alle
 * icone con !important. E' lo scenario che spiegava il carrello invisibile sul
 * fondo blu e le altre tre icone invisibili al passaggio del mouse: l'icona
 * prendeva il colore primario del tema invece di quello del pulsante. */
.tp-icon-action {
    --tp-icon-ink: var(--tp-ink-soft);
}

.tp-icon-action i,
.tp-icon-action i::before,
.tp-icon-action i::after,
.tp-icon-action svg,
.tp-icon-action svg * {
    color: var(--tp-icon-ink) !important;
    -webkit-text-fill-color: var(--tp-icon-ink) !important;
    fill: var(--tp-icon-ink) !important;
    opacity: 1 !important;
    --fa-primary-color: var(--tp-icon-ink);
    --fa-secondary-color: var(--tp-icon-ink);
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 1;
}

/* Passaggio del mouse: fondo blu, icona bianca. Vale per anteprima, preventivo
   e preferiti, che partono tutti dal fondo bianco. */
.tp-icon-action:hover,
.tp-icon-action:focus-visible {
    background-color: var(--tp-accent);
    border-color: var(--tp-accent);
    color: #ffffff;
    --tp-icon-ink: #ffffff;
}

/* Il carrello e' l'azione principale: parte gia' colorato, con l'icona bianca,
   e al passaggio del mouse si inverte (fondo bianco, icona scura). */
.tp-icon-action-cart {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-button-add-cart, #ffffff);
    --tp-icon-ink: var(--text-button-add-cart, #ffffff);
}

.tp-icon-action-cart:hover,
.tp-icon-action-cart:focus-visible {
    background-color: #ffffff;
    border-color: var(--primary-color);
    color: var(--tp-ink);
    --tp-icon-ink: var(--tp-ink);
}

/* Il cuore dei preferiti segue il comportamento comune: fondo blu e icona
   bianca. Il rosso resta solo sui pulsanti con etichetta della vista TABELLA. */
.tp-icon-action.tp-favorite-link:hover,
.tp-icon-action.tp-favorite-link:focus-visible {
    background-color: var(--tp-accent);
    border-color: var(--tp-accent);
    color: #ffffff;
    --tp-icon-ink: #ffffff;
}

.tp-icon-action.tp-favorite-link:hover .heart-icon-favorites,
.tp-icon-action.tp-favorite-link:focus-visible .heart-icon-favorites {
    transform: none;
}


/* =============================================================================
 * 10. AVVISI DI STATO (utente non loggato / in validazione / non disponibile)
 * ========================================================================== */

.tp-row-alert,
.external-info-alert-hide-action-user-nologged,
.external-info-alert-validation-account-progress,
.external-info-alert-not-available-product-message {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

.internal-info-alert-hide-action-user-nologged,
.internal-info-alert-validation-account-progress,
.internal-info-alert-not-available-product-message {
    width: 100%;
    margin: 0;
    padding: 5px 6px;
    border: 0;
    border-radius: var(--tp-radius);
    line-height: 1.4;
}

.internal-info-alert-hide-action-user-nologged,
.internal-info-alert-not-available-product-message {
    background-color: aliceblue !important;
}

.internal-info-alert-validation-account-progress {
    background-color: #fff3cd !important;
}

.internal-info-alert-hide-action-user-nologged p,
.internal-info-alert-validation-account-progress p,
.internal-info-alert-not-available-product-message p {
    margin: 0;
    font-size: var(--tp-fs-meta);
}


/* =============================================================================
 * 11. ACCESSIBILITA' E UTILITY
 * ========================================================================== */

.tp-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.container-elenco-products a:focus-visible,
.container-elenco-products input:focus-visible {
    outline: 2px solid var(--tp-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .container-elenco-products,
    .container-elenco-products::before,
    .container-img-tableproducts,
    .btn-primary3-tableproducts-cart,
    .btn-primary3-tableproducts-favquot,
    .heart-icon-favorites {
        transition: none !important;
    }

    .container-elenco-products:hover {
        transform: none;
    }
}


/* =============================================================================
 * 13. PAGINAZIONE
 * ========================================================================== */

.tp-pagination-nav .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tp-pagination-nav .pagination > li > a,
.tp-pagination-nav .pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--tp-border, #e0e7ed);
    border-radius: var(--tp-radius-sm, 6px);
    background-color: #ffffff;
    color: #112A46;
    font-size: 12px;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease;
}

.tp-pagination-nav .pagination > li > a:hover {
    background-color: #eef3f7;
    border-color: #cfd9e1;
}

.tp-pagination-nav .pagination > li.active > a,
.tp-pagination-nav .pagination > li.active > span {
    background-color: var(--primary-color, #16688B);
    border-color: var(--primary-color, #16688B);
    color: #ffffff;
    font-weight: 700;
}

.tp-pagination-nav .pagination > li.disabled > a,
.tp-pagination-nav .pagination > li.disabled > span {
    opacity: 0.45;
    pointer-events: none;
}

/* =============================================================================
 * 12. RESPONSIVE DEGLI ELEMENTI CONDIVISI
 * -----------------------------------------------------------------------------
 * Qui stanno solo le due regole che riguardano elementi comuni alle tre viste:
 * il contenitore dell'elenco e la scheda di lista vuota. Il responsive della
 * griglia di ciascuna vista sta nel foglio della vista.
 * ========================================================================== */

@media screen and (max-width: 767px) {
    /* Su smartphone l'elenco scorre con la pagina: niente scroll annidato. */
    .box-container-products {
        max-height: none;
        overflow: visible;
        padding: 0;
    }

    .container-tableproducts-empty-page {
        min-height: 16em;
    }
}

/* =============================================================================
 * INTESTAZIONE DEL FILE DI PARTENZA, RIPORTATA QUI INTEGRALMENTE
 * -----------------------------------------------------------------------------
 * Il file paginaelencoprodotti.css e' stato diviso in cinque fogli. Questa e'
 * la sua intestazione originale, lasciata parola per parola: contiene i tuoi
 * commenti TODO 01, TODO 02 e le due ANNOTAZIONI, e l'indice delle 57 classi
 * estranee al template della tabella.
 *
 * COSA E' CAMBIATO RISPETTO A QUELL'INDICE
 *   - Le sezioni 1-13 si sono divise fra questo foglio (1) e quello della vista
 *     tabella (2): qui il comune, li' la griglia.
 *   - La sezione 14.A, 14.B, 14.C ed E sono andate tutte nel foglio 5.
 *     Il TODO 02 e' quindi eseguito: il foglio 5 e' il "CSS comune" da spostare
 *     fuori quando le dipendenze saranno chiarite.
 *   - La sezione 14.D si e' divisa in tre: le regole del LISTATO nel foglio 3,
 *     quelle dei RIQUADRI nel foglio 4, il resto (contenitori alternativi non
 *     piu' stampati) nel foglio 5. Le voci di 14.D rese obsolete dal refactor
 *     delle due viste sono elencate in classi-obsolete-list-boxes.css, che NON
 *     va incluso nel sito.
 *   - Le classi di 14.D che ora sono davvero in uso hanno perso la marcatura
 *     [NON USATA]: la vista LISTATO e quella a RIQUADRI le stampano.
 * ========================================================================== */

/* =============================================================================
 * PAGINA ELENCO PRODOTTI
 * -----------------------------------------------------------------------------
 * NUOVO COMMENTO SVILUPPATORE - TODO 01 - Verificare le viste servite e inserire correttamente
 * quelle effettivamente richiamate
 *
 * NUOVO COMMENTO SVILUPPATORE - TODO 02 - Spostare fuori in un altro CSS comune tutte le classi che
 * sono utilizzate anche in pagine esterne alle viste prodotti (ad esempio COLLO VOLUMINOSO)
 * 
 * Viste servite: view-from-category / view-by-tag / showcase / products/search /
 *                searchproducts/search / mostpurchasedproducts/search
 * Template di riferimento: view_from_category_table.php | view_from_category_list.php | view_from_category_boxes.php
 *
 * INDICE
 *   1.  Token di design
 *   2.  Contenitore dell'elenco
 *   3.  Scheda prodotto - impianto a griglia
 *   4.  Miniatura
 *   5.  Titolo e sottotitolo
 *   6.  Specifiche (codici, minimo d'ordine, packaging)
 *   7.  Disponibilita' e quantita'
 *   8.  Prezzo e promozione
 *   9.  Azioni (carrello, preventivo, anteprima, preferiti)
 *   10. Avvisi di stato
 *   11. Accessibilita' e utility
 *   12. Responsive
 *   13. Paginazione
 *   14. Classi non utilizzate da questo template (regole lasciate attive)
 *
 * VARIABILI GLOBALI ATTESE DAL TEMA (non definite qui):
 *   --primary-color, --primary-color-container-border,
 *   --tertiary-color, --text-button-add-cart
 *
 * DA SAPERE PRIMA DI METTERE MANO
 *   - Tutte le misure della scheda prodotto (altezza riga, larghezza colonne,
 *     dimensione miniatura) sono nella sezione 1: si regola tutto da li'.
 * =============================================================================
 *
 *
 * =============================================================================
 * ELENCO DELLE CLASSI NON UTILIZZATE IN view_from_category_table.php
 * -----------------------------------------------------------------------------
 * 57 classi non compaiono nel template ma appartengono, con ogni probabilita',
 * ad altre viste che condividono questo foglio di stile. Le regole NON sono
 * state rimosse: si trovano nella sezione 14 in fondo al file, ciascuna marcata
 * [NON USATA] e commentata. Qui sotto l'indice con la funzione di ognuna.
 *
 * NUOVO COMMENTO SVILUPPATORE - ANNOTAZIONE - Le classi racchiuse di seguito nelle sezioni A) & B) & C)
 * riguardano un template (element) che gestisce i restanti elementi della pagina prodotti globale,
 * esterni alle righe prodotto, come i filtri in alto DISPONIBILE/ORDINABILE, la barra di ricerca,
 * i filtri laterali delle categorie ecc... .
 *
 * -- A) SIDEBAR SINISTRA DELLE CATEGORIE (stampata da un altro template) -------
 *   .filter-box-category-small-page ............ riquadro filtri versione compatta (<1200px)
 *   .title-filter-box-category-small-page ...... etichetta agganciata al bordo del riquadro
 *   .category-tableproducts .................... lista categorie di primo livello
 *   .subcategory-tableproducts ................. lista sottocategorie
 *   .category-tableproducts-hover-a ............ hover del link categoria
 *   .subcategory-tableproducts-hover-a ......... hover del link sottocategoria
 *   .category-name-upper-box ................... targhetta col nome categoria
 *   .category-name-upper-box-dropdown .......... come sopra, variante a tendina
 *   .container-list-under-box .................. area scrollabile dell'elenco categorie
 *   .container-list-under-box-dropdown ......... come sopra, variante a tendina
 *   .category-page-title ....................... titolo della pagina categoria
 *   .category-breadcrumbs ...................... briciole di pane
 *   .category-page-content ..................... corpo della pagina categoria
 *   .category-page-left-sidebar-largepage ...... sidebar su schermi larghi (>1200px)
 *   .category-page-left-sidebar-large-title .... titolo della sidebar larga
 *   .category-menu-item ........................ voce di menu della sidebar
 *   .category-bullet ........................... pallino che precede la voce
 *   .category-item-open ........................ freccia di apertura categoria
 *   .subcategory-item-open ..................... elenco sottocategorie aperto
 *   .category-page-left-sidebar-title .......... titolo del menu categorie
 *
 * -- B) SIDEBAR RESPONSIVE E TENDINA FILTRI (<1200px) -------------------------
 *   .category-page-left-sidebar-smallpage ................ contenitore sidebar compatta
 *   .category-page-left-sidebar-smallpage-title-icon-filter  testo accanto all'icona filtri
 *   .category-page-left-sidebar-smallpage-icon-filter ..... contenitore centrato dell'icona
 *   .icon-responsive-left-filters ......................... icona filtri, scala su 7 soglie
 *   .dropdown-products-page-sx-categories-filters ......... involucro della tendina filtri
 *   .dropdown-products-page-sx-categories-filters-content . pannello della tendina filtri
 *
 * -- C) BARRA ORDINAMENTO E RICERCA INTERNA (altro template) ------------------
 *   .bg-color-sorting-facets ................... fondo bianco della barra ordinamenti
 *   .box-container-simple-sorting-facets ....... contenitore della barra ordinamenti
 *   .box-container-simple-sorting-facets-reseller  variante rivenditore della barra
 *   .sorting-facets-title ...................... titolo DISPONIBILI / ORDINABILI
 *   .available-ordinable-upper-box ............. etichetta superiore disponibili/ordinabili
 *   .ordinable-upper-box-margin ................ correzione margine etichetta ORDINABILI
 *   .available-upper-box-margin ................ correzione margine etichetta DISPONIBILI
 *   .box-right-cerca-tableproducts ............. riquadro del campo "cerca nella pagina"
 *   .form-control-no-border-tableproducts ...... input del campo di ricerca interno
 *   .form-control .............................. focus generico degli input Bootstrap
 *   .pulsante-cerca-tableproducts .............. pulsante "cerca"
 *   .pulsante-chiudi-tableproducts ............. pulsante "chiudi"
 *
 * NUOVO COMMENTO SVILUPPATORE - ANNOTAZIONE - Le classi alle voci D) & E) rimangono da verificare,
 * e se non utilizzate o presenti in altre pagine oltre alle 3 viste TABLE, LIST, BOXES, andranno eliminate.
 *
 * -- D) ALTRE VISTE DELL'ELENCO (listato, riquadri) --------------------------
 *   .container-tableproducts ................... contenitore scrollabile generico
 *   .box-container-products-under-768 .......... contenitore per schermi <768px: con il
 *                                                markup unificato ne resta uno solo,
 *                                                ma potrebbe servire a LISTATO/RIQUADRI
 *   .box-container-products-under-768-reseller . variante rivenditore del precedente;
 *                                                non era applicata nemmeno prima
 *   .container-elenco-products-list ............ riga prodotto nella vista LISTATO
 *   .container-elenco-products-box ............. riga prodotto nella vista a RIQUADRI
 *   .form-control-view-product-quantity-list-mode  campo quantita' della vista LISTATO
 *   .box-quantity-tableproducts ................ riquadro compatto della quantita'
 *   .btn-primary3-tableproducts-savedcart ...... pulsante "carrello salvato"
 *   .price-subcontainer ........................ contenitore prezzo della vista LISTATO
 *   .quantity-subcontainer ..................... contenitore quantita' della vista LISTATO
 *   .preview-product-modal-link-list ........... link anteprima della vista LISTATO
 *   .preview-product-modal-link-list-row ....... riga del link anteprima, vista LISTATO
 *
 * -- E) ALTRE PAGINE CHE CONDIVIDONO QUESTO FOGLIO ---------------------------
 *   .popup-products ............................ popup disponibilita'/ordinabilita'
 *   .popup-prodcts-text ........................ testo interno del popup (refuso nel nome)
 *   .container-sx-category-showcase ............ colonna categorie della pagina VETRINA
 *   .product-showcase-info-catalogue ........... targhetta catalogo nella pagina VETRINA
 *   .container-filter-products ................. riquadro filtri prodotto (suture ecc.)
 *   .text-logged-user-reseller-info-products ... scritta "rivenditore ufficiale"
 *   .text-logged-user-reseller-info-products-viewallcommerce-page  idem, versione centrata
 *
 * NOTA OPERATIVA
 * Nessuna di queste 57 classi e' stata resa obsoleta da questo refactor: erano
 * gia' estranee a questo template. Prima di eliminarle vanno cercate nelle
 * rispettive viste. Alcune sono richiamate da piu' pagine (per esempio
 * la regola di "COLLO VOLUMINOSO" (.info-bulky-product) resta attiva nella
 * sezione 6 perche' questo template la usa): quando saranno chiarite tutte le dipendenze
 * conviene spostare le regole condivise in un foglio comune.
 * ========================================================================== */



/* =============================================================================
 * 13. IL SUGGERIMENTO DELLE SCHEDE - VISTA TABELLA
 * -----------------------------------------------------------------------------
 * PERCHE' NE SERVE UNO NOSTRO
 *
 * La scheda ha overflow: hidden - le servono, per gli angoli arrotondati, per
 * il filetto d'accento a sinistra e per i puntini di sospensione della
 * targhetta del catalogo - e il contenitore dell'elenco ha overflow-y: auto.
 * Il riquadro del suggerimento, invece, nasce DENTRO la scheda, perche' chi lo
 * monta non gli dice di appenderlo al <body>. Risultato: viene ritagliato dal
 * bordo della scheda, ed e' quello che si vedeva sotto al pulsante
 * "Richiedi offerta dedicata".
 *
 * Contro un ritaglio non c'e' z-index che tenga: e' una proprieta' di chi
 * contiene, non di chi sta sopra. L'unica soluzione e' portare il riquadro
 * fuori, ed e' quello che fa /js/suggerimenti-elenco-FO.js - lo stesso
 * meccanismo gia' in uso nella view-all-commerce.
 *
 * La classe .tp-suggerimento non esiste in nessun altro foglio: nessuna regola
 * del portale la puo' raggiungere, ne' restringere, ne' tenere su una riga.
 * Il colore e' #1987FF, l'azzurro dei suggerimenti di serie del portale.
 * ========================================================================== */

.tp-suggerimento {
    /* l'azzurro dei suggerimenti del portale */
    --tp-tip-sfondo: #1987FF;

    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 2147483647;
    display: none;
    max-width: 260px;
    padding: 7px 10px;
    background-color: var(--tp-tip-sfondo);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(17, 42, 70, 0.22);
    color: #ffffff;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    overflow-wrap: break-word;
    /* non deve mai rubare il mouse alla scheda che sta sotto */
    pointer-events: none;
}

.tp-suggerimento.e-visibile {
    display: block;
}

.tp-suggerimento-testo {
    display: block;
    color: inherit;
}

/* il testo puo' arrivare come HTML: qui dentro si comporta come testo
   semplice, senza nowrap e senza colori propri */
.tp-suggerimento-testo * {
    max-width: 100% !important;
    color: inherit !important;
    font-size: inherit !important;
    white-space: normal !important;
}

.tp-suggerimento-freccia {
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

/* la freccia sta sul lato rivolto verso l'elemento; lo script le da' la
   posizione lungo quel lato */
.tp-suggerimento.freccia-sotto .tp-suggerimento-freccia {
    bottom: -6px;
    border-bottom: 0;
    border-top-color: var(--tp-tip-sfondo);
}

.tp-suggerimento.freccia-sopra .tp-suggerimento-freccia {
    top: -6px;
    border-top: 0;
    border-bottom-color: var(--tp-tip-sfondo);
}

.tp-suggerimento.freccia-sinistra .tp-suggerimento-freccia {
    left: -6px;
    border-left: 0;
    border-right-color: var(--tp-tip-sfondo);
}

.tp-suggerimento.freccia-destra .tp-suggerimento-freccia {
    right: -6px;
    border-right: 0;
    border-left-color: var(--tp-tip-sfondo);
}