/* =============================================================================
 * PAGINA ELENCO PRODOTTI - FOGLIO 5 di 5: CONTORNO DELLA PAGINA E ALTRE PAGINE
 * -----------------------------------------------------------------------------
 * Regole che NON riguardano le righe prodotto: la sidebar delle categorie, la
 * tendina filtri, la barra ordinamento/ricerca, i contenitori alternativi non
 * piu' stampati e le classi usate da altre pagine del portale.
 *
 * E' la risposta al TODO 02 del file di partenza: qui dentro c'e' tutto quello
 * che, chiarite le dipendenze, puo' essere spostato in un foglio comune di sito.
 * Le voci sono ancora marcate [NON USATA] perche' non compaiono nei sei template
 * dell'elenco prodotti: e' la traccia da seguire per la verifica.
 *
 * 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. products-list-page-external.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.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * L'indice ragionato di queste classi, con la funzione di ognuna e i tuoi
 * commenti (TODO 01, TODO 02, le due ANNOTAZIONI), sta in fondo al foglio 1,
 * paginaelencoprodotti-1-base.css, dove e' stata riportata per intero
 * l'intestazione del file di partenza.
 * -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * 14.A  SIDEBAR SINISTRA DELLE CATEGORIE (ex categories.css)
 * Serve alle viste che stampano la colonna filtri: qui la colonna è renderizzata
 * da un altro template, quindi nessuna di queste classi compare in questo file.
 * -------------------------------------------------------------------------- */

/* [NON USATA] Riquadro dei filtri categoria nella versione compatta (<1200px). */
@media screen and (max-width: 1200px) {
    .filter-box-category-small-page {
        border: 2px solid #dddddd;
        box-shadow: 0px 0px 8px #cccccc !important;
        min-height: 9em;
        border-radius: 10px;
        background-color: #ffffff;
        padding: 1em;
    }
}
@media screen and (max-width: 768px) {
    .filter-box-category-small-page {
        min-height: 7em;
        padding: 0.9em;
    }
}
@media screen and (max-width: 600px) {
    .filter-box-category-small-page {
        min-height: 6.75em;
        padding: 1em 0.7em 0.7em 0.7em;
    }
}
@media screen and (max-width: 430px) {
    .filter-box-category-small-page {
        min-height: 6.35em;
        padding: 1em 0.7em 0.6em 0.7em;
    }
}
@media screen and (max-width: 350px) {
    .filter-box-category-small-page {
        min-height: 6em;
        padding: 1em 0.7em 0.5em 0.7em;
    }
}

/* [NON USATA] Etichetta sovrapposta al bordo superiore del riquadro filtri. */
.title-filter-box-category-small-page {
    position: absolute;
    background-color: #ffffff;
    top: -0.8em;
    padding: 0.4em 0.8em;
    border-radius: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    box-shadow: 0 -6px 8px -4px #cccccc !important;
    left: 1.15em;
}

/* [NON USATA] Lista delle categorie di primo livello nella sidebar. */
.category-tableproducts > ul {
    font-size: 12px;
    background-color: #ffffff;
    list-style-type: none;
    padding: 1.5em 0em 2.5em 0em;
    min-height: 10em;
}

.category-tableproducts > ul > li {
    padding: 0px 0px;
    text-transform: lowercase;
}

.category-tableproducts > ul > li:hover {
    background-color: #ebebeb !important;
}

.category-tableproducts > ul > li > a {
    padding: 10px 10px 5px 10px;
    color: #112A46 !important;
}

/* [NON USATA] Voci di sottocategoria della sidebar. */
.subcategory-tableproducts > ul > li > a {
    padding: 5px 5px;
    color: #112A46 !important;
}

/* [NON USATA] Stato hover del link categoria (testo bianco su fondo colorato). */
.category-tableproducts-hover-a:hover {
    color: #ffffff !important;
}

/* [NON USATA] Stato normale e hover del link sottocategoria. */
.subcategory-tableproducts-hover-a {
    padding: 5px 5px;
    color: #112A46 !important;
}

.subcategory-tableproducts-hover-a:hover {
    padding: 5px 5px;
    color: #ffffff !important;
}

/* [NON USATA] Targhetta con il nome categoria agganciata al bordo del box. */
.category-name-upper-box {
    font-size: 12px;
    padding: 0.4em 0.8em;
    font-weight: bold;
    border-radius: 5px;
    position: absolute;
    top: -1.5em;
    background-color: #ffffff;
    box-shadow: 0 -6px 8px -7px #cccccc;
}
@media screen and (max-width: 1200px) {
    .category-name-upper-box {
        background-color: #ffffff !important;
        padding: 0.4em 0.8em !important;
        left: 0em !important;
    }
}

/* [NON USATA] Come sopra, ma per la variante a tendina (fondo grigio). */
.category-name-upper-box-dropdown {
    font-size: 12px;
    padding: 0.4em 0.8em;
    font-weight: bold;
    border-radius: 5px;
    position: absolute;
    top: -1.5em;
    background-color: #ebebeb;
    box-shadow: 0 -6px 8px -7px #cccccc;
}
@media screen and (max-width: 1200px) {
    .category-name-upper-box-dropdown {
        background-color: #ebebeb !important;
        padding: 0.4em 0.8em !important;
        left: 0em !important;
    }
}

/* Elenco delle categorie nel menu di sinistra. ALTEZZA FISSA E SCORRIMENTO
   INTERNO (22/09/2026, regola di Rubes per tutte le pagine con il filtro per
   categoria): con molte categorie, o con i "+" aperti, il riquadro non si
   allunga piu' fino in fondo alla pagina ma fa scorrere il suo contenuto. La
   barra di scorrimento compare solo quando le voci non ci stanno.
   25em con i 12px dell'elenco (.category-tableproducts > ul) fanno 300px; con
   il box-sizing di Bootstrap l'altezza comprende l'imbottitura. Vale per ogni
   pagina che usa questo contenitore, non solo per quelle gia' convertite. */
.container-list-under-box {
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0em;
    min-height: 12em;
    height: 25em;
    border-radius: 5px;
}

/* Nella tendina sotto i 1200px la stessa misura e' il massimo, non l'altezza:
   una tendina con due voci non resta un riquadro vuoto da 25em. */
.dropdown-products-page-sx-categories-filters-content .container-list-under-box {
    height: auto;
    max-height: 25em;
}

/* Percorso della categoria filtrata, sopra le sottocategorie (22/09/2026).
   Nella tendina i collegamenti sono a blocco e con imbottitura (vedi
   .dropdown-products-page-sx-categories-filters-content a): quelli del
   percorso restano in riga, con i separatori. */
.dropdown-products-page-sx-categories-filters-content .category-crumbs a {
    display: inline;
    padding: 0;
}

/* [NON USATA] Variante a tendina dell'area scrollabile categorie. */
.container-list-under-box-dropdown {
    overflow: auto;
    padding-right: 0em;
    min-height: 12em;
    border-radius: 5px;
    padding-left: 0em;
    padding-top: 1em;
}

/* [NON USATA] Titolo della pagina categoria. */
.category-page-title {
    margin-top: 0;
    text-align: center;
}

/* [NON USATA] Briciole di pane della pagina categoria. */
.category-breadcrumbs {
    text-align: center;
}

/* [NON USATA] Corpo della pagina categoria. */
.category-page-content {
    margin-bottom: 1em;
}

/* [NON USATA] Sidebar sinistra nella versione a schermo largo (>1200px). */
.category-page-left-sidebar-largepage {
    padding-left: 1em;
    padding-right: 1em;
}
@media screen and (max-width: 1200px) {
    .category-page-left-sidebar-largepage {
        display: none !important;
    }
}

/* [NON USATA] Titolo della sidebar nella versione a schermo largo. */
.category-page-left-sidebar-large-title {
    padding: 3px 10px;
}

/* Voce di menu della sidebar categorie: NOME TAGLIATO SULLA LARGHEZZA VERA E
   CONTEGGIO SEMPRE VISIBILE (23/09/2026, regola di Rubes). Prima il nome veniva
   tagliato a un numero fisso di caratteri - 35 nei template e 27 nelle voci che
   compone categorysidebar-FO.js - e i puntini cadevano sempre allo stesso
   punto: su un monitor largo restava spazio inutilizzato, su uno stretto la
   scritta usciva lo stesso. Ora il taglio lo fa il browser sulla larghezza
   effettiva della colonna, e il conteggio fra parentesi resta sempre leggibile.

   La voce e' un contenitore flessibile: il nome (.category-menu-name) si
   restringe fin dove serve e finisce con i puntini di sospensione, il conteggio
   (.category-menu-count) non si restringe mai. min-width: 0 sul nome serve
   perche' una voce flessibile, per impostazione predefinita, non scende sotto
   la larghezza del proprio contenuto e i puntini non comparirebbero.

   max-width lascia libero a destra lo spazio del pulsante «+»
   (.category-item-open, che fluttua a destra): senza, una voce lunga gli
   finirebbe sotto. Il nome intero resta nell'attributo title, quindi la parte
   tagliata si legge passandoci sopra.

   Vale per i template e per le voci dei sottorami: la classe la scrivono tutti
   e due. La sigla [NON USATA] che portava prima va letta come dice il commento
   di testa - non compare nei SEI template dell'elenco prodotti - ed era giusta:
   la classe la scrivono i template delle pagine marca e la funzione
   getSubcategories() di categorysidebar-FO.js. Ora che la regola regge il taglio
   del nome la sigla si toglie, per non farla sembrare rimovibile. */
.category-menu-item {
    color: #112A46 !important;
    float: left;
    text-decoration: none;
    display: flex;
    align-items: baseline;
    max-width: calc(100% - 2.75em);
}

.category-menu-item .category-menu-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-menu-item .category-menu-count {
    flex: 0 0 auto;
    padding-left: 0.35em;
}

/* Nella tendina sotto i 1200px i collegamenti sono a blocco per una regola piu'
   forte (.dropdown-products-page-sx-categories-filters-content a): senza questa
   riga la voce non sarebbe flessibile e il nome non verrebbe tagliato. */
.dropdown-products-page-sx-categories-filters-content .category-menu-item {
    display: flex;
}

/* [NON USATA] Pallino che precede la voce di menu. */
.category-bullet {
    padding-right: 0.7em;
    font-size: 0.8em;
}

/* [NON USATA] Freccia di apertura della categoria. */
.category-item-open {
    color: #112A46 !important;
    float: right;
    text-decoration: none;
}

/* [NON USATA] Elenco sottocategorie in stato aperto. */
.subcategory-item-open {
    color: #112A46 !important;
    list-style-type: none;
    padding-top: 0.25em !important;
    padding-bottom: 0.25em !important;
    padding-left: 1.35em;
}

.subcategory-item-open li:hover {
    background-color: #ffffff !important;
}

/* [NON USATA] Titolo della sidebar menu categorie. */
.category-page-left-sidebar-title {
    margin-left: 1em;
}


/* -----------------------------------------------------------------------------
 * 14.B  SIDEBAR RESPONSIVE E TENDINA FILTRI (<1200px)
 * -------------------------------------------------------------------------- */

/* [NON USATA] Contenitore della sidebar filtri sotto i 1200px. */
.category-page-left-sidebar-smallpage {
    padding-left: 1em;
    padding-right: 1em;
    margin-bottom: 1.5em;
    margin-top: 1em;
}
@media screen and (min-width: 1201px) {
    .category-page-left-sidebar-smallpage {
        display: none !important;
    }
}

/* [NON USATA] Testo accanto all'icona filtri, con scala tipografica responsive. */
.category-page-left-sidebar-smallpage-title-icon-filter {
    font-size: 12px;
    margin-bottom: 0.5em;
}
@media screen and (max-width: 992px) {
    .category-page-left-sidebar-smallpage-title-icon-filter { font-size: 11.5px; }
}
@media screen and (max-width: 768px) {
    .category-page-left-sidebar-smallpage-title-icon-filter { font-size: 11px; }
}
@media screen and (max-width: 600px) {
    .category-page-left-sidebar-smallpage-title-icon-filter { font-size: 10.5px; }
}
@media screen and (max-width: 430px) {
    .category-page-left-sidebar-smallpage-title-icon-filter { font-size: 10px; }
}

/* [NON USATA] Contenitore centrato dell'icona filtri. */
.category-page-left-sidebar-smallpage-icon-filter {
    text-align: center !important;
}

/* [NON USATA] Icona filtri responsive, ridotta progressivamente. */
.icon-responsive-left-filters {
    font-size: 4.5em;
    color: var(--primary-color) !important;
}
@media screen and (max-width: 768px) { .icon-responsive-left-filters { font-size: 3.5em !important; } }
@media screen and (max-width: 680px) { .icon-responsive-left-filters { font-size: 3.3em !important; } }
@media screen and (max-width: 600px) { .icon-responsive-left-filters { font-size: 3.1em !important; } }
@media screen and (max-width: 510px) { .icon-responsive-left-filters { font-size: 2.9em !important; } }
@media screen and (max-width: 430px) { .icon-responsive-left-filters { font-size: 2.7em !important; } }
@media screen and (max-width: 390px) { .icon-responsive-left-filters { font-size: 2.5em !important; } }
@media screen and (max-width: 350px) { .icon-responsive-left-filters { font-size: 2.3em !important; } }

/* [NON USATA] Involucro della tendina filtri categorie. */
.dropdown-products-page-sx-categories-filters {
    position: relative;
    display: inline-block;
    z-index: 999;
}

/* [NON USATA] Pannello a tendina dei filtri categorie. */
.dropdown-products-page-sx-categories-filters-content {
    display: none;
    position: absolute;
    width: 500px;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2);
    z-index: 2001;
    margin-top: 0.4em;
    background-color: #ebebeb;
    padding: 1em;
    border-radius: 10px;
}
@media screen and (max-width: 992px) { .dropdown-products-page-sx-categories-filters-content { width: 400px; } }
@media screen and (max-width: 480px) { .dropdown-products-page-sx-categories-filters-content { left: -2.35em; } }
@media screen and (max-width: 430px) { .dropdown-products-page-sx-categories-filters-content { width: 380px !important; left: -2.5em; } }
@media screen and (max-width: 415px) { .dropdown-products-page-sx-categories-filters-content { width: 370px !important; } }
@media screen and (max-width: 400px) { .dropdown-products-page-sx-categories-filters-content { width: 360px !important; } }
@media screen and (max-width: 390px) { .dropdown-products-page-sx-categories-filters-content { width: 350px !important; } }
@media screen and (max-width: 350px) { .dropdown-products-page-sx-categories-filters-content { width: 280px !important; } }

.dropdown-products-page-sx-categories-filters-content p {
    color: #112A46;
    padding: 0px 5px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 11px;
    margin-top: 0.5em !important;
}

.dropdown-products-page-sx-categories-filters-content a {
    color: #112A46;
    padding: 6px 10px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 11px;
}

.dropdown-products-page-sx-categories-filters-content li {
    list-style-type: none;
}

.dropdown-products-page-sx-categories-filters-content a:hover {
    background-color: #ddd;
}

.dropdown-products-page-sx-categories-filters:hover .dropdown-products-page-sx-categories-filters-content {
    display: block;
}


/* -----------------------------------------------------------------------------
 * 14.C  BARRA ORDINAMENTO / RICERCA INTERNA
 * Stampata da un template diverso, sopra l'elenco prodotti.
 * -------------------------------------------------------------------------- */

/* [NON USATA] Fondo bianco della barra ordinamenti. */
.bg-color-sorting-facets {
    background-color: #ffffff;
}

/* [NON USATA] Contenitore della barra ordinamenti con bordo sinistro colorato. */
.box-container-simple-sorting-facets {
    /* border-left: 4px solid var(--primary-color-container-border); */
    box-shadow: 0px 0px 8px #cccccc !important;
    margin-bottom: 0em !important;
    border-radius: 5px !important;
}

/* [NON USATA] Variante rivenditore della barra ordinamenti. */
.box-container-simple-sorting-facets-reseller {
    border-left-style: solid;
    border-top-style: none;
    border-width: 3px;
    border-image: linear-gradient(to bottom, transparent 50%, #FFEB88 100%) 1;
}

/* [NON USATA] Titolo DISPONIBILI / ORDINABILI dei sorting facets. */
.sorting-facets-title {
    position: absolute;
    top: 0.65em;
    margin-left: 0.5em;
}

/* [NON USATA] Etichetta superiore DISPONIBILI/ORDINABILI. */
.available-ordinable-upper-box {
    font-size: 12px;
    background-color: #ffffff;
    padding: 0.45em 1em;
    font-weight: bold;
    margin-bottom: 0em !important;
    border-top-right-radius: 5px !important;
    border-top-left-radius: 5px !important;
}
@media screen and (max-width: 992px) { .available-ordinable-upper-box { font-size: 12px; } }
@media screen and (max-width: 780px) { .available-ordinable-upper-box { font-size: 11px; padding: 0.5em 1em; } }

/* [NON USATA] Correzioni di margine delle due etichette sopra l'elenco. */
@media screen and (max-width: 780px) {
    .ordinable-upper-box-margin { margin-right: 0em !important; }
}
@media screen and (max-width: 430px) {
    .available-upper-box-margin { margin-right: 0em !important; }
}

/* [NON USATA] Riquadro bianco del campo "cerca nella pagina". */
.box-right-cerca-tableproducts {
    background-color: #ffffff;
    border-radius: 5px !important;
}
@media screen and (max-width: 992px) { .box-right-cerca-tableproducts { margin-top: 0.9em !important; } }
@media screen and (max-width: 780px) { .box-right-cerca-tableproducts { margin-top: 0.80em !important; } }

/* [NON USATA] Input senza bordo del campo di ricerca interno. */
.form-control-no-border-tableproducts {
    box-shadow: none;
    background: #fff !important;
    border: 1px solid #dddddd !important;
    height: 31.5px;
    font-size: 14px;
    font-weight: 300;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 5px;
    width: 100% !important;
}

/* [NON USATA in questo template] Stato attivo/focus generico dei .form-control
   di Bootstrap: riguarda gli input di altri componenti della pagina. */
.form-control:active,
.form-control:focus {
    outline: none;
    box-shadow: none;
    border: 2px solid var(--primary-color);
}

/* [NON USATA] Pulsante "cerca" della barra di ricerca interna. */
.pulsante-cerca-tableproducts {
    height: 35px;
    border: 0px solid transparent;
    background-color: transparent;
    font-size: 14px;
    font-weight: 300;
    padding-left: 12px;
    padding-right: 15px;
    width: 100% !important;
}
@media screen and (max-width: 768px) { .pulsante-cerca-tableproducts { font-size: 12px; } }
@media screen and (max-width: 430px) { .pulsante-cerca-tableproducts { font-size: 11px; } }

/* [NON USATA] Pulsante "chiudi" della barra di ricerca interna. */
.pulsante-chiudi-tableproducts {
    height: 35px;
    border: 0px solid transparent;
    background-color: transparent;
    font-size: 14px;
    font-weight: 300;
    padding-left: 15px;
    padding-right: 15px;
    border-bottom-right-radius: 5px;
    width: 100% !important;
}
@media screen and (max-width: 768px) { .pulsante-chiudi-tableproducts { font-size: 12px; } }
@media screen and (max-width: 430px) { .pulsante-chiudi-tableproducts { font-size: 11px; } }

.pulsante-cerca-tableproducts:hover,
.pulsante-chiudi-tableproducts:hover {
    background-color: #ebebeb !important;
}


/* -----------------------------------------------------------------------------
 * 14.D  ALTRE VISTE DELL'ELENCO PRODOTTI (lista, box) E CONTENITORI ALTERNATIVI
 * Sono le viste "listato" e "a riquadri" servite da altri template.
 * -------------------------------------------------------------------------- */

/* [NON USATA] Contenitore generico scrollabile dell'elenco prodotti. */
.container-tableproducts {
    margin-top: 0em !important;
    height: 80em !important;
    overflow: auto;
    padding: 0.5em 0em;
}

/* [NON USATA] Contenitore dedicato agli schermi sotto i 768px. Con il markup
   unificato esiste un solo contenitore (.box-container-products), quindi questo
   template non lo stampa piu'. Potrebbe pero' essere usato dalle viste LISTATO
   e RIQUADRI: da verificare prima di eliminarlo. */
@media screen and (max-width: 768px) {
    .box-container-products-under-768 {
        border-left: 4px solid var(--primary-color-container-border);
        margin-bottom: 2em !important;
        background-color: #ffffff;
        box-shadow: 0px 3px 8px #cccccc;
        height: 80em !important;
        overflow-y: auto;
        overflow-x: hidden !important;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
}
@media screen and (min-width: 769px) {
    .box-container-products-under-768 {
        display: none !important;
    }
}

/* [NON USATA] Variante rivenditore del contenitore sotto i 768px. Non era
   applicata nemmeno nel template originale, che riusava per errore la classe
   .box-container-products-reseller anche sul blocco mobile. */
.box-container-products-under-768-reseller {
    border-left-style: solid;
    border-top-style: none;
    border-width: 3px;
    border-image: linear-gradient(to bottom, #FFEB88 5%, #feda37ec 10%, #daa520 20%, #D1B464 30%, #C19014 40%, #9f7928 50%, #8A6E2F 60%, #daa520 70%, #FFC940 80%, transparent 99%) 1;
}

/* [NON USATA] Riquadro bianco della quantità, versione compatta. */
.box-quantity-tableproducts {
    background-color: #ffffff;
    width: 4em;
    height: 1.5em !important;
    text-align: center;
    margin-left: 2em;
}
@media screen and (max-width: 768px) {
    .box-quantity-tableproducts {
        margin-left: 0em;
        padding-left: 0em;
        padding-right: 0em;
    }
}

/* [NON USATA] Pulsante "carrello salvato". */
.btn-primary3-tableproducts-savedcart {
    background: var(--primary-color);
    color: #ffffff !important;
    font-size: 12px;
    border-radius: 5px;
    font-weight: bold;
    padding: 3px 10px;
    border: 1px solid var(--primary-color) !important;
    width: 20em !important;
    display: block;
    float: left !important;
    text-align: center !important;
}
@media screen and (max-width: 430px) {
    .btn-primary3-tableproducts-savedcart { margin-top: 0.75em !important; }
}

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

/* -----------------------------------------------------------------------------
 * 14.E  ALTRE PAGINE CHE CONDIVIDONO QUESTO FOGLIO DI STILE
 * -------------------------------------------------------------------------- */

/* [NON USATA] Popup di avviso su quantità/disponibilità prodotto.
   NOTA: nel file originale il bordo era "1px solid cccccc", senza cancelletto,
   quindi non veniva applicato. Qui è corretto in #cccccc. */
.popup-products {
    width: 48em;
    font-weight: 400;
    position: fixed;
    bottom: 0;
    left: 27%;
    border: 1px solid #cccccc;
    border-radius: 5px;
    background-color: orange !important;
    z-index: 999;
    padding: 8px;
    margin-top: 1em !important;
    margin-bottom: 1em !important;
    color: #000000 !important;
    box-shadow: 2px 3px 5px #666666;
    text-align: center;
}

/* [NON USATA] Testo interno del popup. Il nome contiene un refuso storico
   ("prodcts"): va mantenuto finché non si aggiorna anche il template che lo usa. */
.popup-prodcts-text {
    color: #000000 !important;
}

/* [NON USATA] Colonna categorie della pagina VETRINA (/productsliders/showcase). */
.container-sx-category-showcase {
    font-size: 12px;
    padding: 0.5em 0em 0em 1em;
    list-style-type: none;
    min-height: 10em;
    margin-top: 0em;
}

.container-sx-category-showcase > ul {
    list-style-type: none;
    padding: 1em 0em 2.5em 0em;
}

/* [NON USATA] Targhetta del catalogo nella pagina VETRINA. */
.product-showcase-info-catalogue {
    font-weight: 900;
    background-color: rgba(22, 104, 139, 0.2);
    border-radius: 5px;
    padding: 0.5em;
    margin-right: 1em;
    margin-bottom: 0.5em;
}

/* [NON USATA] Riquadro dei filtri prodotto (suture ecc.). */
.container-filter-products {
    padding: 1em;
    border: 1px solid #dddddd;
    border-radius: 5px;
    margin-top: 2em;
}

.container-filter-products label {
    font-size: 12px;
}

.container-filter-products input {
    margin-right: 0em !important;
    margin-top: 1em;
}

.container-filter-products h4 {
    font-size: 16px;
    margin-bottom: 1em;
    font-weight: bold;
}

/* [NON USATA] Scritta "RIVENDITORE UFFICIALE / LISTINI PERSONALIZZATI" in
   gradiente dorato, presente nelle pagine prodotto dell'area riservata. */
.text-logged-user-reseller-info-products {
    font-size: 14px;
    text-align: left !important;
    float: left !important;
    padding: 0.25em 0.25em 0.25em 0.5em;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0em;
}

.text-logged-user-reseller-info-products i {
    font-size: 18px;
}

/* [NON USATA] Stessa scritta, versione centrata per la pagina viewallcommerce. */
.text-logged-user-reseller-info-products-viewallcommerce-page {
    font-size: 14px;
    text-align: center !important;
    padding: 0.25em 0.25em 0.25em 0.5em;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0em;
}

.text-logged-user-reseller-info-products-viewallcommerce-page i {
    font-size: 18px;
}


/* =============================================================================
 * 15. BARRA FILTRI SUPERIORE (SORTING FACETS)
 * -----------------------------------------------------------------------------
 * Serve i due element che stanno sopra all'elenco prodotti:
 *   - sorting_facets.php ....... famiglia VIEW-FROM-CATEGORY
 *   - products_page.php ........ famiglia PRODUCTS-LIST (piu' acquistati)
 *
 * Prima erano colonne Bootstrap incollate fra loro dentro un unico riquadro:
 * i due pulsanti in alto divisi da un filetto verticale, la ricerca sotto
 * divisa da un filetto orizzontale, e gli avvisi appiccicati sotto ancora.
 * Adesso e' una riga sola di elementi separati, ognuno con i suoi quattro
 * angoli arrotondati a 5px, che va a capo da sola quando lo spazio finisce.
 *
 * Tutti i comandi sono alti uguali (--sf-height) e distanziati uguale
 * (--sf-gap): non ci sono margini a mano, li tiene il gap della riga.
 * ========================================================================== */

.sf-toolbar {
    --sf-height: 38px;
    --sf-gap: 8px;
    --sf-radius: 5px;
    --sf-border: #d8e0e7;
    --sf-border-strong: #b9c7d3;
    --sf-ink: #112A46;
    --sf-ink-soft: #5b7488;
    --sf-accent: #16688B;

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--sf-gap);
    padding: 10px;
}

/* --- Elemento base: vale per pulsanti, flag, menu e link ------------------- */
.sf-toolbar .sf-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--sf-height);
    margin: 0;
    padding: 6px 11px;
    background-color: #ffffff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    color: var(--sf-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.sf-toolbar .sf-chip:hover {
    border-color: var(--sf-border-strong);
    box-shadow: 0 1px 3px rgba(17, 42, 70, 0.10);
}

.sf-toolbar .sf-chip-icon {
    flex: 0 0 auto;
    color: var(--sf-ink-soft);
    font-size: 14px;
}

/* L'etichetta dei due flag portava .sorting-facets-title, che nel vecchio
   impianto era in posizione assoluta: qui torna nel flusso. */
.sf-toolbar .sf-chip-label,
.sf-toolbar .sorting-facets-title {
    position: static;
    top: auto;
    margin: 0;
    white-space: nowrap;
    cursor: pointer;
}

/* --- Casella di ricerca ----------------------------------------------------
 * Un solo riquadro: campo di testo, filetto, lente, filetto, X. E' l'elemento
 * elastico della riga, si prende lo spazio che avanza e non scende mai sotto
 * i 240px. */
.sf-toolbar .sf-search {
    display: flex;
    align-items: stretch;
    flex: 1 1 300px;
    min-width: 240px;
    min-height: var(--sf-height);
    margin: 0;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid var(--sf-border);
    border-radius: var(--sf-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sf-toolbar .sf-search:focus-within {
    border-color: var(--sf-accent);
    box-shadow: 0 0 0 2px rgba(22, 104, 139, 0.12);
}

.sf-toolbar .sf-search-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 6px 12px;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    color: var(--sf-ink);
    font-size: 13px;
    font-weight: 400;
}

.sf-toolbar .sf-search-input::placeholder {
    color: #9aacba;
    font-weight: 400;
}

.sf-toolbar .sf-search-input:focus {
    outline: none;
    box-shadow: none;
}

/* Lente e X: stessa larghezza, divise dal filetto verticale. */
/* width con !important perche' le due classi storiche che i pulsanti portano
   ancora - .pulsante-cerca-tableproducts e .pulsante-chiudi-tableproducts -
   hanno width: 100% !important nella sezione 14.C: senza, le due icone si
   prendevano tutta la barra e il campo di testo restava largo 24px. Le classi
   storiche restano nel markup nel caso siano agganciate da JS o da altre
   pagine, e vengono semplicemente scavalcate qui. */
.sf-toolbar .sf-search-btn {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px !important;
    height: auto;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-left: 1px solid var(--sf-border);
    border-radius: 0;
    color: var(--sf-accent);
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.sf-toolbar .sf-search-btn:hover {
    background-color: #eef3f7;
}

.sf-toolbar .sf-search-clear:hover {
    background-color: #fdeeee;
    color: #c0392b;
}

/* --- I due flag DISPONIBILI / ORDINABILI -----------------------------------
 * Il verde e l'arancione sono gli stessi di prima (#59ac23 e #f36d2d): prima
 * erano una riga sotto l'etichetta, ora sono il bordo del pulsante acceso. */
.sf-toolbar .sf-chip-check {
    gap: 8px;
}

.sf-toolbar .sf-chip-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--sf-flag, var(--sf-accent));
    cursor: pointer;
}

.sf-toolbar .sf-chip-available  { --sf-flag: #59ac23; --sf-flag-soft: #f3f9ef; }
.sf-toolbar .sf-chip-orderable  { --sf-flag: #f36d2d; --sf-flag-soft: #fdf3ee; }

.sf-toolbar .sf-chip-check.is-on {
    background-color: var(--sf-flag-soft);
    border-color: var(--sf-flag);
    box-shadow: inset 0 -2px 0 var(--sf-flag);
}

.sf-toolbar .sf-chip-check.is-on .sf-chip-label {
    color: var(--sf-ink);
}

/* --- Menu ORDINA PER ------------------------------------------------------- */
.sf-toolbar .sf-chip-select {
    gap: 6px;
    padding-right: 6px;
}

/* Il menu si dimensiona da solo sulla voce piu' lunga ("Disponibilita'"):
   qui gli togliamo solo il padding di troppo, cosi' non ruba larghezza agli
   altri comandi quando devono stare tutti su una riga. */
.sf-toolbar .sf-select {
    height: auto;
    max-width: 8.5rem;
    margin: 0;
    padding: 1px 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    color: var(--sf-accent);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.sf-toolbar .sf-select:focus {
    outline: none;
}

/* --- Stato disabilitato (ORDINA PER e ALTRI FILTRI, per ora) ---------------
 * Grigino, visibile ma non cliccabile. Il tooltip "Funzione presto
 * disponibile" sta sul contenitore e non sul controllo, perche' un elemento
 * disabilitato non emette eventi del mouse e il tooltip non comparirebbe. */
.sf-toolbar .sf-chip.is-disabled,
.sf-toolbar .sf-chip[disabled] {
    background-color: #f2f4f6;
    border-color: #e4e9ed;
    color: #93a3b1;
    cursor: not-allowed;
}

.sf-toolbar .sf-chip.is-disabled:hover,
.sf-toolbar .sf-chip[disabled]:hover {
    border-color: #e4e9ed;
    box-shadow: none;
}

.sf-toolbar .sf-chip.is-disabled .sf-chip-icon,
.sf-toolbar .sf-chip[disabled] .sf-chip-icon,
.sf-toolbar .sf-chip.is-disabled .sf-select {
    color: #a8b6c2;
}

.sf-toolbar .sf-chip.is-disabled .sf-select,
.sf-toolbar .sf-chip.is-disabled .sf-chip-label {
    cursor: not-allowed;
}

/* --- ANNULLA FILTRI -------------------------------------------------------- */
.sf-toolbar .sf-chip-reset {
    color: var(--sf-accent);
}

.sf-toolbar .sf-chip-reset .sf-chip-icon {
    color: var(--sf-accent);
}

.sf-toolbar .sf-chip-reset:hover {
    background-color: #eef3f7;
    border-color: var(--sf-accent);
    color: var(--sf-accent);
    text-decoration: none;
}

/* --- ANNULLA FILTRI: la seconda parola --------------------------------------
 * Sopra i 1400px si legge il solo "ANNULLA" e la frase intera passa nel
 * suggerimento del browser (lo mette e lo toglie la funzione
 * sfAggiornaSuggerimentoAnnulla del template): servono quei pixel per tenere
 * tutti i comandi su una riga. Sotto i 1400px la riga e' gia' due, lo spazio
 * c'e', e l'etichetta torna intera.
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 1400px) {
    .sf-toolbar .sf-label-extra {
        display: none;
    }

    /* ...tranne quando nella barra non c'e' la casella di ricerca (pagina
       delle sezioni): li' lo spazio avanza, e non c'e' ragione di accorciare
       l'etichetta. */
    .sf-toolbar.sf-toolbar-no-search .sf-label-extra {
        display: inline;
    }
}


/* --- Responsive ------------------------------------------------------------
 *   >= 1200px  tutto su una riga sola
 *   992-1199   la ricerca si prende una riga sua, i comandi vanno sotto
 *   < 768px    i comandi si mettono due per riga
 *   < 480px    un comando per riga, a tutta larghezza
 * -------------------------------------------------------------------------- */
/* Da 992px in su i comandi condividono la riga con gli altri, quindi si
   stringono: corpo del testo a 11px, meno padding, meno spazio fra uno e
   l'altro, e il menu ORDINA PER tenuto sulla misura della sua voce piu' lunga.
   Sotto i 992px i comandi vanno a capo e tornano alla misura piena. */
@media screen and (min-width: 992px) {
    .sf-toolbar {
        --sf-gap: 6px;
    }

    .sf-toolbar .sf-chip {
        padding: 6px 9px;
        font-size: 11px;
    }

    .sf-toolbar .sf-chip-check {
        gap: 7px;
    }

    .sf-toolbar .sf-chip-icon {
        font-size: 13px;
    }

    .sf-toolbar .sf-select {
        max-width: 7.5rem;
        font-size: 11px;
    }

    .sf-toolbar .sf-search-input {
        font-size: 12px;
    }
}

/* Sopra i 1400px: TUTTO SU UNA RIGA SOLA, comandi e ricerca.
   E' il caso del portatile da 15 pollici, dove la barra ha circa 960px utili
   con la colonna delle categorie a fianco: misurato, i sei comandi ci stanno e
   alla ricerca restano 165px, che salgono a 240px a 1500 e a 540px a 1920.
   La ricerca e' l'elemento elastico: si prende quello che avanza e si ferma a
   130px, che e' il punto oltre il quale manderebbe a capo i comandi. */
@media screen and (min-width: 1400px) {
    .sf-toolbar .sf-search {
        flex: 1 1 130px;
        min-width: 130px;
    }

    .sf-toolbar .sf-search-input {
        padding: 6px 10px;
    }

    .sf-toolbar .sf-search-btn {
        flex: 0 0 34px;
        width: 34px !important;
        font-size: 13px;
    }
}

/* Sotto i 1400px la ricerca si prende una riga tutta sua - dove sta larga e
   comoda - e i cinque comandi si dispongono sulla riga sotto. */
@media screen and (max-width: 1399px) {
    .sf-toolbar .sf-search {
        flex: 1 1 100%;
    }
}

@media screen and (max-width: 767px) {
    .sf-toolbar {
        padding: 8px;
    }

    /* Sui telefoni stretti il minimo di 240px della ricerca farebbe sporgere il
       riquadro dalla barra: qui la ricerca si adatta a quello che c'e'. */
    .sf-toolbar .sf-search {
        min-width: 0;
    }

    /* Stessa ragione per il menu ORDINA PER, che di suo e' largo quanto la sua
       voce piu' lunga: su una barra molto stretta puo' restringersi. */
    .sf-toolbar .sf-chip-select {
        min-width: 0;
    }

    .sf-toolbar .sf-select {
        min-width: 0;
        max-width: 100%;
    }

    .sf-toolbar .sf-chip {
        flex: 1 1 calc(50% - var(--sf-gap));
        justify-content: flex-start;
        padding: 6px 10px;
    }

    .sf-toolbar .sf-chip-label {
        white-space: normal;
    }
}

@media screen and (max-width: 479px) {
    .sf-toolbar .sf-chip {
        flex: 1 1 100%;
    }
}


/* =============================================================================
 * 16. AVVISI SOPRA L'ELENCO PRODOTTI
 * -----------------------------------------------------------------------------
 * Gli avvisi (verde, azzurro, giallo) che i sei template dell'elenco stampano
 * sopra ai prodotti erano attaccati alla barra dei filtri e fra loro: adesso
 * sono riquadri separati, con i quattro angoli a 5px come i comandi.
 *
 * Il selettore ha due classi perche' nel markup l'avviso porta anche .mb-0 di
 * Bootstrap, che e' margin-bottom: 0 !important: due classi contro una fanno
 * vincere questa regola senza dover toccare i sei template.
 * ========================================================================== */

.box-container-simple-sorting-facets {
    margin-bottom: 10px !important;
}

.alert.alert-succes-inter-products-page {
    margin-bottom: 10px !important;
    border-radius: 5px !important;
}

.alert.alert-succes-inter-products-page:last-of-type {
    margin-bottom: 10px !important;
}


/* --- Barra senza casella di ricerca ----------------------------------------
 * La pagina delle sezioni non ha la ricerca: senza l'elemento elastico, i
 * comandi restavano attaccati al bordo sinistro con un vuoto lungo a destra.
 * Qui i due flag si prendono lo spazio che avanza fino a un tetto, cosi' la
 * barra e' piena come le altre senza che nessun comando diventi enorme.
 * -------------------------------------------------------------------------- */
.sf-toolbar.sf-toolbar-no-search .sf-chip-check {
    flex: 1 1 auto;
    max-width: 20rem;
    justify-content: center;
}


/* =============================================================================
 * 17. RIGA RISULTATI E FILTRO ATTIVO
 * -----------------------------------------------------------------------------
 * Serve l'element products/frontoffice/results_filters_line.php, che sta fra
 * la barra filtri (sezione 15) e gli avvisi (sezione 16). Sostituisce due cose:
 * la vecchia riga «Risultati della ricerca ottenuti», che era un <p> con lo
 * stile scritto nel template, e l'avviso azzurro «Filtro attivo per la
 * categoria», che era un riquadro a se'. Adesso sono due voci sulla stessa
 * linea, divise da un filetto verticale:
 *
 *   [lente] Risultati della ricerca ottenuti: ...  |  [categorie] Filtro attivo per la categoria X - ANNULLA FILTRO
 *
 * IL FILETTO. Non e' un elemento a se': e' il bordo sinistro di OGNI voce.
 * Il contenitore interno (.rf-items) e' spostato a sinistra esattamente di
 * margine + bordo + imbottitura di una voce (16 + 1 + 16 = 33px), e quello
 * esterno (.rf-line) taglia quello che esce. Cosi' la voce che apre una riga
 * ha il filetto fuori dal taglio, e la voce che la segue sulla stessa riga lo
 * mostra. Quando lo spazio non basta e la seconda voce va a capo, il filetto
 * sparisce da solo: niente filetto appeso in fondo alla prima riga, a nessuna
 * larghezza, e nessuna media query da tenere allineata. Se cambi i 16px,
 * cambia anche i 33px.
 *
 * IL MARGINE INFERIORE C'E' SEMPRE, 10px, TRANNE QUANDO SOTTO COMINCIA
 * L'ELENCO DEI PRODOTTI (24/09/2026, regola di Rubes, in due passi).
 *
 * Fino al 23/09 il margine c'era solo quando sotto la riga la pagina stampava
 * un avviso, e lo diceva la pagina con il parametro rfConAvvisoSotto. Negli
 * altri casi la riga restava ATTACCATA a cio' che aveva sotto: si vedeva sulla
 * ricerca senza risultati, dove il riquadro bianco «nessun risultato» tocca la
 * riga, perche' quel riquadro non porta un margine superiore proprio.
 *
 * Il margine e' quindi diventato fisso. Ma con i prodotti in pagina lo stacco
 * risultava DOPPIO: fra la riga e la prima riga prodotto uno spazio c'era gia',
 * e i 10px gli si sommavano. Quindi l'eccezione e' rimasta, rovesciata: il
 * margine c'e' sempre, e la riga lo perde solo quando subito sotto comincia
 * l'elenco dei prodotti, che il suo spazio ce l'ha. Lo dice la pagina con il
 * parametro rfElencoSubitoSotto, che accende la classe .con-elenco-sotto.
 * Il blocco dei prodotti non e' stato toccato: la regola sta tutta qui.
 *
 * I 10px sono gli stessi che la barra filtri e gli avvisi gia' usano fra loro
 * (sezione 16), quindi il passo della pagina resta uno solo.
 *
 *   sotto la riga c'e' un avviso          ->  10px
 *   sotto la riga c'e' il riquadro vuoto  ->  10px
 *   sotto la riga comincia l'elenco       ->  0, ce li mette l'elenco
 * ========================================================================== */

/* clear: both (22/09/2026). Nelle pagine vere la barra filtri che sta sopra la
   riga e' flottante (float), per una regola che non sta in questo foglio.
   Con overflow: hidden la riga e' un blocco che non puo' sovrapporsi ai float:
   il browser la metteva ACCANTO alla barra, larga zero, invece che sotto. Il
   testo andava a capo una parola per riga, veniva tagliato, e sotto la barra
   restava un vuoto alto quanto le parole: piu' alto con il filtro attivo.
   clear: both la manda sotto la barra; dove la barra non fluttua non cambia
   nulla. overflow: hidden invece resta: serve al taglio del filetto. */
.rf-line {
    clear: both;
    overflow: hidden;
    margin: 0 0 10px 0;
    color: var(--primary-color);
}

/* L'elenco dei prodotti ha gia' il suo spazio sopra: la riga toglie il proprio,
   altrimenti i due si sommano. Vale solo per l'elenco: con un avviso o con il
   riquadro «nessun risultato» il margine resta. */
.rf-line.con-elenco-sotto {
    margin-bottom: 0;
}

.rf-line .rf-items {
    display: flex;
    flex-wrap: wrap;
    row-gap: 4px;
    margin: 0 0 0 -33px;
    padding: 0;
    color: var(--primary-color);
}

.rf-line .rf-item {
    display: flex;
    align-items: baseline;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid rgba(22, 104, 139, 0.35);
}

/* Stessa misura e stesso colore della lente della vecchia riga. */
.rf-line .rf-icon {
    flex: 0 0 auto;
    margin-right: 8px;
    color: var(--primary-color);
    font-size: 15px;
}

/* Il testo di una voce va a capo accanto alla sua icona, non sotto. */
.rf-line .rf-text {
    min-width: 0;
}

.rf-line .rf-cancel {
    color: var(--primary-color);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.rf-line .rf-cancel:hover,
.rf-line .rf-cancel:focus {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom-style: solid;
}