/* Accessibility Core by Clivo: copia di themes/v1_fashona_12/assets/css/abc-filtri-mobile.css con 3 colori cambiati */
/*
 * ABC - filtri di categoria.
 *
 * Caricato solo sulle pagine categoria da templates/_partials/head.tpl, insieme a
 * assets/js/abc-filtri-mobile.js e ai pulsanti di templates/catalog/_partials/products-top.tpl.
 *
 * 1. Gruppi a fisarmonica, nella colonna su desktop e nel pannello: si aprono con il «+».
 *    Di partenza sono aperti i primi tre e quelli con una scelta attiva. Lo stato di partenza lo
 *    decide questo foglio, non lo script, cosi' la colonna nasce gia' com'e'. Le liste fino a sei
 *    valori non scorrono; quelle piu' lunghe scorrono nel riquadro del tema (desktop) o mostrano i
 *    primi sei con «Mostra tutti» (pannello, dove una lista che scorre dentro un pannello che scorre
 *    trattiene il dito).
 *    Alessio: «al massimo ne lasciamo 2 o 3 già aperte e le altre ad apertura».
 *
 * 2. Sotto i 1200 px, e sempre su telefoni e tablet riconosciuti dal server, filtri e ordinamento
 *    stanno dietro i pulsanti «Filtra» e «Ordina» accanto al conteggio dei prodotti, ripetuti in una
 *    barra in basso quando si scende nella griglia. Sopra i 1200 px su desktop resta la colonna.
 *    Alessio: «nella versione mobile i filtri li dobbiamo allacciare ad un pulsante».
 */

/* ---- 1. gruppi a fisarmonica ------------------------------------------------------------- */

/* Un solo titolo per gruppo a ogni larghezza: quello con l'icona, che il tema usa sotto i 992 px. */
#search_filters .facet .facet-title.hidden-md-down {
    display: none !important;
}
#search_filters .facet .tvfilter-search-types-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 40px;
    cursor: pointer;
    user-select: none;
}
#search_filters .facet .tvfilter-search-types-title .facet-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
/* L'icona del tema (freccia) diventa un «+» che si fa «−» quando il gruppo e' aperto. */
#search_filters .facet .tvdropdown-btn {
    position: relative;
    float: none;
    flex: none;
    width: 20px;
    height: 20px;
}
#search_filters .facet .tvdropdown-btn i {
    display: none;
}
#search_filters .facet .tvdropdown-btn::before,
#search_filters .facet .tvdropdown-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 1px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: opacity 0.15s ease, transform 0.2s ease;
}
#search_filters .facet .tvdropdown-btn::before {
    width: 12px;
    height: 2px;
}
#search_filters .facet .tvdropdown-btn::after {
    width: 2px;
    height: 12px;
}

/* Chiusi... */
#search_filters .facet .tvfilter-search-types-dropdown {
    display: none !important;
}
/* ...tranne i primi tre e quelli con una scelta attiva, finche' non li si tocca. */
#search_filters .facet:nth-child(-n+3) .tvfilter-search-types-dropdown,
#search_filters .facet:has(input:checked) .tvfilter-search-types-dropdown,
#search_filters .facet.abc-aperto .tvfilter-search-types-dropdown {
    display: block !important;
}
#search_filters .facet:nth-child(-n+3) .tvdropdown-btn::after,
#search_filters .facet:has(input:checked) .tvdropdown-btn::after,
#search_filters .facet.abc-aperto .tvdropdown-btn::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}
/* Chiuso a mano vince su tutto (classe ripetuta per superare la specificita' di :has). */
#search_filters .facet.abc-chiuso.abc-chiuso .tvfilter-search-types-dropdown {
    display: none !important;
}
#search_filters .facet.abc-chiuso.abc-chiuso .tvdropdown-btn::after {
    opacity: 1;
    transform: translate(-50%, -50%);
}
/* Liste fino a sei valori: niente scorrimento, si vedono tutti. */
#search_filters .facet .tvfilter-search-types-dropdown:not(:has(> li:nth-child(7))) {
    max-height: none;
    overflow: visible;
}

/* ---- 2. pulsanti «Filtra» e «Ordina» ----------------------------------------------------- */

.abc-filtri-azioni {
    display: none;
    align-items: center;
    gap: 8px;
}
.abc-filtri-apri,
.abc-ordina-apri {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid #111f8f;
    border-radius: 4px;
    background: #111f8f;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
}
.abc-ordina-apri {
    background: #fff;
    color: #111f8f;
}
.abc-filtri-apri .material-icons,
.abc-ordina-apri .material-icons {
    font-size: 20px;
}
.abc-filtri-apri:hover {
    background: #0d1875;
    border-color: #0d1875;
}
.abc-ordina-apri:hover {
    background: #f1f3fb;
}
.abc-filtri-conta,
.abc-filtri-scelti {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #ca450c;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.abc-filtri-apri:focus-visible,
.abc-ordina-apri:focus-visible,
.abc-filtri-barra button:focus-visible,
.abc-filtri-pannello button:focus-visible,
.abc-filtri-pannello a:focus-visible,
.abc-ordina-foglio button:focus-visible,
.abc-ordina-foglio a:focus-visible,
#search_filters .tvfilter-search-types-title:focus-visible {
    outline: 2px solid #ca450c;
    outline-offset: 2px;
}

/* Quando valgono i pulsanti: telefoni e tablet riconosciuti dal server a ogni larghezza (il layout
   mette per loro la colonna dei filtri dopo tutti i prodotti), gli altri sotto i 1200 px. */
.abc-filtri-azioni.abc-sempre {
    display: flex;
}
body:has(.abc-filtri-azioni.abc-sempre) #left-column #search_filters_wrapper,
body:has(.abc-filtri-azioni.abc-sempre .abc-ordina-apri) .tvall-page-shortby {
    display: none;
}
.tv-left-search-totle-product:has(.abc-filtri-azioni.abc-sempre) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    max-width: none;
    flex: 1 1 100%;
}
@media (max-width: 1199.98px) {
    .abc-filtri-azioni {
        display: flex;
    }
    .tv-left-search-totle-product:has(.abc-filtri-azioni) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        max-width: none;
        flex: 1 1 100%;
    }
    /* Prima che lo script lo sposti nel pannello. */
    #left-column #search_filters_wrapper {
        display: none;
    }
    /* Il menu dell'ordinamento del tema, su telefono una freccia senza scritta: lo sostituisce «Ordina». */
    body:has(.abc-ordina-apri) .tvall-page-shortby {
        display: none;
    }
    /* Filtri attivi: una riga di etichette, non un riquadro sopra i prodotti. */
    #js-active-search-filters.active_filters {
        margin: 0 0 12px;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }
    #js-active-search-filters .active-filter-title {
        display: none;
    }
    #js-active-search-filters ul {
        display: flex;
        gap: 8px;
        margin: 0;
        padding: 2px 0 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }
    #js-active-search-filters ul::-webkit-scrollbar {
        display: none;
    }
    #js-active-search-filters .filter-block {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0 4px 0 12px;
        min-height: 36px;
        border: 1px solid #cbd5e1;
        border-radius: 18px;
        background: #fff;
        color: #0f172a;
        font-size: 13px;
        white-space: nowrap;
    }
    #js-active-search-filters .filter-block a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin: 0;
    }
    #js-active-search-filters .filter-block .close {
        margin: 0;
        font-size: 18px;
    }
}

/* ---- 2. barra in basso, quando i pulsanti in cima escono dallo schermo -------------------- */

.abc-filtri-barra {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 2147482000;
    display: flex;
    overflow: hidden;
    border-radius: 24px;
    background: #111f8f;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.3);
    transform: translate(-50%, 160%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
}
.abc-filtri-barra.abc-attivo {
    transform: translate(-50%, 0);
    visibility: visible;
    transition: transform 0.2s ease;
}
.abc-filtri-barra button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    margin: 0;
    padding: 0 20px;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.abc-filtri-barra button + button {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.abc-filtri-barra .material-icons {
    font-size: 20px;
}

/* ---- 2. pannello dei filtri e foglio dell'ordinamento ------------------------------------ */

.abc-filtri-velo {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483000;
    background: rgba(15, 23, 42, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.abc-filtri-velo.abc-attivo {
    opacity: 1;
}
.abc-filtri-pannello {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483001;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    background: #fff;
    box-shadow: 0 0 24px rgba(15, 23, 42, 0.2);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}
.abc-filtri-pannello.abc-attivo {
    transform: none;
}
.abc-ordina-foglio {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483001;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 12px 12px 0 0;
    background: #fff;
    box-shadow: 0 0 24px rgba(15, 23, 42, 0.2);
    transform: translateY(100%);
    transition: transform 0.25s ease;
}
.abc-ordina-foglio.abc-attivo {
    transform: none;
}
.abc-filtri-velo[hidden],
.abc-filtri-pannello[hidden],
.abc-ordina-foglio[hidden],
.abc-filtri-azzera[hidden] {
    display: none !important;
}
html.abc-bloccato,
html.abc-bloccato body {
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .abc-filtri-velo,
    .abc-filtri-pannello,
    .abc-ordina-foglio,
    .abc-filtri-barra,
    #search_filters .facet .tvdropdown-btn::before,
    #search_filters .facet .tvdropdown-btn::after {
        transition: none;
    }
}

.abc-filtri-testa {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 0 6px 0 16px;
    border-bottom: 1px solid #eef0f3;
}
.abc-filtri-titolo {
    margin: 0;
    color: #0f172a;
    font-size: 18px;
    font-weight: 700;
}
.abc-filtri-chiudi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: #0f172a;
    cursor: pointer;
}
.abc-filtri-corpo {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
}
.abc-filtri-piede {
    flex: none;
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid #eef0f3;
    background: #fff;
}
.abc-filtri-azzera {
    flex: none;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    color: #0f172a;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.abc-filtri-mostra {
    flex: 1 1 auto;
    min-height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: 4px;
    background: #111f8f;
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
}
.abc-filtri-mostra[aria-busy="true"] {
    opacity: 0.7;
}

.abc-ordina-elenco {
    display: flex;
    flex-direction: column;
    padding: 4px 0 12px;
}
.abc-ordina-elenco a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 16px;
    color: #0f172a;
    font-size: 15px;
    text-decoration: none;
}
.abc-ordina-elenco a:hover {
    background: #f6f7fb;
}
.abc-ordina-elenco a.current {
    color: #111f8f;
    font-weight: 700;
}
.abc-ordina-elenco a.current::after {
    content: "";
    width: 8px;
    height: 14px;
    margin-right: 4px;
    border: solid #ca450c;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ---- i filtri del modulo, dentro il pannello --------------------------------------------- */

.abc-filtri-pannello #search_filters_wrapper {
    display: block;
}
/* Il tema nasconde #search_filters fuori dalla colonna di sinistra (lo apre solo il suo pulsante
   «Filtro» in cima alla lista) e dispone i gruppi in fila: nel pannello si vedono, uno sotto l'altro. */
.abc-filtri-pannello #search_filters {
    display: block !important;
    height: auto !important;
}
.abc-filtri-pannello #search_filters .tvsearch-filter-content-wrapper {
    display: block;
    overflow: visible;
}
/* Titolo «Filtro» della colonna e «Cancella tutto»: nel pannello li sostituiscono la testa e «Azzera». */
.abc-filtri-pannello #search_filters .tvleft-right-title-wrapper,
.abc-filtri-pannello #search_filters .clear-all-wrapper {
    display: none !important;
}
/* Nella colonna il tema disegna un riquadro con bordo e angoli arrotondati: nel pannello farebbe
   un riquadro dentro il riquadro e ruberebbe larghezza. */
.abc-filtri-pannello #search_filters .tvleft-right-penal-all-block,
.abc-filtri-pannello #search_filters .tvserach-filter-wrapper {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}
.abc-filtri-pannello #search_filters .facet {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 8px;
    border-bottom: 1px solid #eef0f3;
}
.abc-filtri-pannello #search_filters .facet .tvfilter-search-types-title {
    min-height: 52px;
    margin: 0;
    padding: 0;
    border: 0;
}
.abc-filtri-pannello #search_filters .facet .tvfilter-search-types-title .facet-title {
    padding: 0;
    border: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 600;
    text-transform: none;
}
.abc-filtri-pannello #search_filters .facet .tvdropdown-btn {
    color: #0f172a;
}
/* Nel pannello le liste non scorrono: i primi sei valori, poi «Mostra tutti». Le scelte attive
   restano visibili anche oltre il sesto. */
.abc-filtri-pannello #search_filters .facet .tvfilter-search-types-dropdown {
    max-height: none;
    overflow: visible;
}
.abc-filtri-pannello #search_filters .facet.abc-ridotta .tvfilter-search-types-dropdown > li:nth-child(n+7):not(.abc-altri):not(:has(input:checked)) {
    display: none;
}
.abc-filtri-pannello #search_filters .facet .facet-label {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    margin: 0;
}
.abc-filtri-pannello #search_filters .facet .facet-label a {
    flex: 1 1 auto;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px 8px 0;
}
.abc-filtri-pannello #search_filters .faceted-slider li {
    padding: 4px 8px 8px;
}
.abc-altri-btn {
    min-height: 40px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #111f8f;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ---- 3. sottocategorie in alto: riquadri su una riga, l'ultimo tagliato a meta' --------- */
/*
 * Il riquadro «Sottocategoria» del tema (templates/catalog/listing/category.tpl) e' un elenco a
 * scorrimento orizzontale, e sotto i 450 px ogni voce occupava tutta la larghezza: se ne vedeva
 * una sola e niente diceva che le altre erano di lato. Alessio: «da mobile non si capisce che si
 * puo' swipare, quindi boxiamo le categorie in alto, le stringi e ne lasci una a meta'».
 *
 * La larghezza dei riquadri e' calcolata sullo spazio visibile (2,4 / 3,4 / 4,4 / 5,4 riquadri):
 * cosi' l'ultimo visibile resta tagliato qualunque sia la lunghezza dei nomi, che vanno a capo
 * dentro il loro riquadro. Vale sugli schermi stretti e su ogni dispositivo a tocco, anche un
 * tablet in orizzontale; il desktop con il mouse resta com'era.
 */
@media (max-width: 991.98px), (hover: none) and (pointer: coarse) {
    .tv-category-main-div {
        --abc-sotto-visibili: 2.4;
        --abc-sotto-spazio: 8px;
        margin-bottom: 16px;
    }
    .tv-category-main-div .tv-sub-category-title-wrapper {
        padding: 10px 12px 0;
    }
    .tv-category-main-div .tv-sub-category-title-wrapper .tv-sub-category-title {
        font-size: 12px;
        letter-spacing: .04em;
        color: #4b5563;
    }
    .tv-category-main-div .tvcategory-name-image {
        gap: var(--abc-sotto-spazio);
        max-height: none;
        padding: 8px 12px 12px;
        cursor: auto;
        scroll-snap-type: x proximity;
        scroll-padding-left: 12px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tv-category-main-div .tvcategory-name-image::-webkit-scrollbar {
        display: none;
    }
    .tv-category-main-div .tv-sub-category-wrapper {
        float: none;
        display: flex;
        flex: 0 0 calc((100% - (var(--abc-sotto-visibili) - .4) * var(--abc-sotto-spazio)) / var(--abc-sotto-visibili));
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        scroll-snap-align: start;
    }
    .tv-category-main-div .tv-sub-category-inner {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        border: 1px solid #d5dae1;
        border-radius: 8px;
        background: #fff;
        box-shadow: none;
    }
    .tv-category-main-div .tv-sub-category-inner:hover,
    .tv-category-main-div .tv-sub-category-inner:focus-within {
        border-color: #111f8f;
    }
    .tv-category-main-div .tvcategory-name {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        padding: 0;
    }
    .tv-category-main-div .tvcategory-name a.category-name {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 6px 10px;
        color: #0f172a;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}
@media (min-width: 480px) and (max-width: 991.98px), (min-width: 480px) and (hover: none) and (pointer: coarse) {
    .tv-category-main-div {
        --abc-sotto-visibili: 3.4;
    }
}
@media (min-width: 768px) and (max-width: 991.98px), (min-width: 768px) and (hover: none) and (pointer: coarse) {
    .tv-category-main-div {
        --abc-sotto-visibili: 4.4;
    }
}
@media (min-width: 992px) and (hover: none) and (pointer: coarse) {
    .tv-category-main-div {
        --abc-sotto-visibili: 5.4;
    }
}

/* ---- 2. la riga «Filtra | Ordina | N prodotti» sugli schermi piu' stretti --------------- */
/* A 360 px il conteggio andava a capo in due righe e la barra si alzava di 170 px: il numero sta
   su una riga sola e, sotto i 400 px, i pulsanti si stringono un poco. */
.tv-left-search-totle-product:has(.abc-filtri-azioni) .tv-total-product,
.tv-left-search-totle-product:has(.abc-filtri-azioni) .tv-total-product-number {
    margin: 0;
    padding: 0;
    white-space: nowrap;
}
@media (max-width: 399.98px) {
    .abc-filtri-azioni {
        gap: 6px;
    }
    .abc-filtri-apri,
    .abc-ordina-apri {
        gap: 4px;
        padding: 0 11px;
    }
    .tv-left-search-totle-product:has(.abc-filtri-azioni) .tv-total-product-number {
        font-size: 13px;
    }
}

/* ---- 2. la barra dei prodotti su telefono: niente spazio vuoto sotto i pulsanti ---------- */
/* Misurata a 360 px: 106 px di barra per una riga da 44. Il resto erano spaziature (15 + 15 del
   riquadro, 15 sotto la riga) e la colonna griglia/lista del tema, vuota su telefono ma con il
   suo margine. Stretta a circa 64 px, con 12 px prima dei prodotti invece di 30. */
@media (max-width: 991.98px) {
    #js-product-list-top.products-selection:has(.abc-filtri-azioni) {
        margin-bottom: 12px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #js-product-list-top .tv-left-search-totle-product:has(.abc-filtri-azioni) {
        margin-bottom: 0;
    }
    #js-product-list-top:has(.abc-filtri-azioni) .tv-grid-list-all-wrapper {
        display: none;
    }
}
body:has(.abc-filtri-azioni.abc-sempre) #js-product-list-top.products-selection {
    margin-bottom: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}
body:has(.abc-filtri-azioni.abc-sempre) #js-product-list-top .tv-left-search-totle-product {
    margin-bottom: 0;
}
body:has(.abc-filtri-azioni.abc-sempre) #js-product-list-top .tv-grid-list-all-wrapper {
    display: none;
}