/*
 * Verdelilla Home — filtri mobile a fisarmonica.
 * Riprende palette, misure e componenti del menu mobile v4.
 */

:root {
    --vh-filter-version: "10.0-stable-reopen";
    --vh-filter-bg: var(--vh-menu-bg, #fff);
    --vh-filter-text: var(--vh-menu-text, #333);
    --vh-filter-muted: var(--vh-menu-muted, #666);
    --vh-filter-primary: var(--vh-menu-primary, #9dcf28);
    --vh-filter-primary-dark: var(--vh-menu-primary-dark, #6f941c);
    --vh-filter-primary-text: var(--vh-menu-primary-text, #fff);
    --vh-filter-soft: var(--vh-menu-soft, #fafafa);
    --vh-filter-border: var(--vh-menu-border, #e5e5e5);
    --vh-filter-focus: var(--vh-menu-focus, #333);
    --vh-filter-shadow: var(--vh-menu-shadow, rgba(0, 0, 0, 0.26));
}

#vh-filter-app {
    display: none;
}

@media only screen and (max-width: 767px) {
    html.vhf-filter-open,
    html.vhf-filter-open body {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    html.vhf-filter-ready .block-layered-nav {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    html.vhf-filter-ready .block-layered-nav > .block-title.custom-block-title {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 46px !important;
        margin: 0 !important;
        padding: 0 44px 0 14px !important;
        overflow: hidden !important;
        color: var(--vh-filter-text) !important;
        background: var(--vh-filter-soft) !important;
        border: 1px solid var(--vh-filter-border) !important;
        border-radius: 0 !important;
        cursor: pointer;
        touch-action: manipulation;
    }

    html.vhf-filter-ready .block-layered-nav > .block-title.custom-block-title strong {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        background: transparent !important;
        font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
    }

    html.vhf-filter-ready .block-layered-nav > .block-title.custom-block-title::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        right: 18px !important;
        display: block !important;
        width: 9px !important;
        height: 9px !important;
        margin: 0 !important;
        background: none !important;
        border: 0 !important;
        border-top: 2px solid var(--vh-filter-primary-dark) !important;
        border-right: 2px solid var(--vh-filter-primary-dark) !important;
        transform: translateY(-50%) rotate(45deg) !important;
    }

    html.vhf-filter-ready .block-layered-nav > .block-title.custom-block-title:hover,
    html.vhf-filter-ready .block-layered-nav > .block-title.custom-block-title:active {
        color: var(--vh-filter-primary-dark) !important;
        background: var(--vh-filter-soft) !important;
    }

    #vh-filter-app,
    #vh-filter-app * {
        box-sizing: border-box;
    }

    #vh-filter-app {
        position: fixed !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        visibility: hidden;
        pointer-events: none;
        z-index: 100100 !important;
    }

    #vh-filter-app.is-open {
        visibility: visible;
        pointer-events: auto;
    }

    /*
     * Durante la chiusura il pannello resta renderizzato fino al termine
     * della transizione. Evita che la seconda apertura parta da uno stato
     * grafico incompleto.
     */
    #vh-filter-app.is-closing {
        visibility: visible;
        pointer-events: none;
    }

    #vh-filter-app .vhf-overlay {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        appearance: none !important;
        background: rgba(18, 24, 20, 0.58) !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        opacity: 0;
        cursor: pointer;
        transition: opacity 420ms linear;
    }

    #vh-filter-app.is-open .vhf-overlay {
        opacity: 1;
    }

    #vh-filter-app .vhf-drawer {
        position: absolute !important;
        inset: 0 0 0 auto !important;
        display: grid !important;
        grid-template-rows: 48px minmax(0, 1fr);
        width: min(90vw, 390px) !important;
        max-width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0) !important;
        color: var(--vh-filter-text) !important;
        background: var(--vh-filter-bg) !important;
        border: 0 !important;
        box-shadow: -12px 0 34px var(--vh-filter-shadow) !important;
        overflow: hidden !important;
        transform: translate3d(100%, 0, 0);
        will-change: transform;
        transition: transform 520ms cubic-bezier(0.40, 0, 0.20, 1);
    }

    #vh-filter-app.is-open .vhf-drawer {
        transform: translate3d(0, 0, 0);
    }

    #vh-filter-app .vhf-head {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 6px 52px !important;
        background: var(--vh-filter-bg) !important;
        border-bottom: 1px solid var(--vh-filter-border) !important;
        z-index: 8;
    }

    #vh-filter-app .vhf-title {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: var(--vh-filter-text) !important;
        font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        text-transform: none !important;
        white-space: nowrap !important;
    }

    #vh-filter-app .vhf-close {
        position: absolute !important;
        top: 7px !important;
        right: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
        appearance: none !important;
        color: var(--vh-filter-text) !important;
        background: var(--vh-filter-soft) !important;
        border: 1px solid var(--vh-filter-border) !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        cursor: pointer;
    }

    #vh-filter-app .vhf-close svg {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        fill: currentColor !important;
        pointer-events: none;
    }

    #vh-filter-app .vhf-close:hover,
    #vh-filter-app .vhf-close:active {
        color: var(--vh-filter-primary-text) !important;
        background: var(--vh-filter-primary) !important;
        border-color: var(--vh-filter-primary) !important;
    }

    #vh-filter-app .vhf-main {
        position: relative !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: var(--vh-filter-bg) !important;
    }

    #vh-filter-app .vhf-main::before,
    #vh-filter-app .vhf-main::after {
        content: "" !important;
        position: absolute !important;
        right: 11px !important;
        left: 0 !important;
        display: block !important;
        height: 14px !important;
        opacity: 0;
        pointer-events: none !important;
        transition: opacity 160ms ease;
        z-index: 6;
    }

    #vh-filter-app .vhf-main::before {
        top: 0 !important;
        background: linear-gradient(
            to bottom,
            rgba(51, 51, 51, 0.12),
            rgba(51, 51, 51, 0)
        ) !important;
    }

    #vh-filter-app .vhf-main::after {
        bottom: 0 !important;
        background: linear-gradient(
            to top,
            rgba(51, 51, 51, 0.12),
            rgba(51, 51, 51, 0)
        ) !important;
    }

    #vh-filter-app .vhf-main.vhf-can-scroll-up::before,
    #vh-filter-app .vhf-main.vhf-can-scroll-down::after {
        opacity: 1;
    }

    #vh-filter-app .vhf-content {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 4px 0 22px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: var(--vh-filter-primary-dark) var(--vh-filter-border);
        scrollbar-width: auto;
        background: var(--vh-filter-bg) !important;
    }

    #vh-filter-app .vhf-content::-webkit-scrollbar {
        width: 11px;
    }

    #vh-filter-app .vhf-content::-webkit-scrollbar-track {
        background: var(--vh-filter-border);
        border-left: 1px solid #d5d5d5;
    }

    #vh-filter-app .vhf-content::-webkit-scrollbar-thumb {
        background: var(--vh-filter-primary-dark);
        border: 2px solid var(--vh-filter-border);
        border-radius: 10px;
    }

    #vh-filter-app .block-subtitle--filter {
        display: none !important;
    }

    #vh-filter-app .block-subtitle:not(.block-subtitle--filter) {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 8px 14px !important;
        color: var(--vh-filter-text) !important;
        background: var(--vh-filter-bg) !important;
        border: 0 !important;
        border-top: 1px solid var(--vh-filter-border) !important;
        border-bottom: 1px solid var(--vh-filter-border) !important;
        font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-align: left !important;
        text-transform: none !important;
    }

    #vh-filter-app .currently {
        margin: 0 !important;
        padding: 8px 12px !important;
        background: var(--vh-filter-soft) !important;
        border: 0 !important;
    }

    #vh-filter-app .currently ol {
        display: grid !important;
        gap: 7px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #vh-filter-app .currently li {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 9px 56px 9px 12px !important;
        color: var(--vh-filter-text) !important;
        background: var(--vh-filter-bg) !important;
        border: 1px solid var(--vh-filter-border) !important;
        border-left: 4px solid var(--vh-filter-primary) !important;
        border-radius: 3px !important;
        box-shadow: none !important;
        font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        list-style: none !important;
    }

    #vh-filter-app .currently .custom-label {
        display: block !important;
        margin: 0 0 2px !important;
        padding: 0 !important;
        color: var(--vh-filter-muted) !important;
        background: transparent !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-transform: uppercase !important;
    }

    #vh-filter-app .currently .btn-remove {
        position: absolute !important;
        top: 50% !important;
        right: 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        color: var(--vh-filter-text) !important;
        background: var(--vh-filter-soft) !important;
        border: 1px solid var(--vh-filter-border) !important;
        border-radius: 50% !important;
        box-shadow: none !important;
        font-size: 0 !important;
        text-decoration: none !important;
        transform: translateY(-50%) !important;
    }

    #vh-filter-app .currently .btn-remove::after {
        content: "×" !important;
        display: block !important;
        font: 700 21px/1 Arial, sans-serif !important;
    }

    #vh-filter-app .currently .btn-remove:hover,
    #vh-filter-app .currently .btn-remove:active {
        color: var(--vh-filter-primary-text) !important;
        background: var(--vh-filter-primary) !important;
        border-color: var(--vh-filter-primary) !important;
    }

    #vh-filter-app .actions {
        margin: 0 !important;
        padding: 0 12px 10px !important;
        text-align: left !important;
        background: var(--vh-filter-soft) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--vh-filter-border) !important;
    }

    #vh-filter-app .actions a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 7px 13px !important;
        color: var(--vh-filter-primary-dark) !important;
        background: var(--vh-filter-bg) !important;
        border: 1px solid var(--vh-filter-primary-dark) !important;
        border-radius: 3px !important;
        font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
    }

    #vh-filter-app .actions a:hover,
    #vh-filter-app .actions a:active {
        color: var(--vh-filter-primary-text) !important;
        background: var(--vh-filter-primary-dark) !important;
    }

    #vh-filter-app #narrow-by-list {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--vh-filter-bg) !important;
    }

    #vh-filter-app #narrow-by-list > dt {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 9px 54px 9px 16px !important;
        color: var(--vh-filter-text) !important;
        background: var(--vh-filter-bg) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--vh-filter-border) !important;
        font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        text-transform: none !important;
        cursor: pointer !important;
        touch-action: manipulation;
    }

    #vh-filter-app #narrow-by-list > dt::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        display: block !important;
        width: 48px !important;
        height: auto !important;
        margin: 0 !important;
        background: var(--vh-filter-soft) !important;
        border: 0 !important;
        border-left: 1px solid var(--vh-filter-border) !important;
    }

    #vh-filter-app #narrow-by-list > dt::after {
        content: "+" !important;
        position: absolute !important;
        top: 50% !important;
        right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        color: var(--vh-filter-primary-dark) !important;
        background: transparent !important;
        border: 0 !important;
        font: 400 24px/1 Arial, sans-serif !important;
        transform: translateY(-50%) !important;
    }

    #vh-filter-app #narrow-by-list > dt[aria-expanded="true"]::after {
        content: "−" !important;
    }

    #vh-filter-app #narrow-by-list > dt:hover,
    #vh-filter-app #narrow-by-list > dt:active {
        color: var(--vh-filter-primary-dark) !important;
        background: var(--vh-filter-soft) !important;
    }

    #vh-filter-app #narrow-by-list > dt:hover::before,
    #vh-filter-app #narrow-by-list > dt:active::before {
        background: var(--vh-filter-primary) !important;
        border-left-color: var(--vh-filter-primary) !important;
    }

    #vh-filter-app #narrow-by-list > dt:hover::after,
    #vh-filter-app #narrow-by-list > dt:active::after {
        color: var(--vh-filter-primary-text) !important;
    }

    #vh-filter-app #narrow-by-list > dd {
        display: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--vh-filter-soft) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--vh-filter-border) !important;
    }

    #vh-filter-app #narrow-by-list > dd.vhf-group-open {
        display: block !important;
        animation: vhf-accordion-open 160ms ease-out;
    }

    #vh-filter-app #narrow-by-list ol,
    #vh-filter-app #narrow-by-list ul,
    #vh-filter-app #narrow-by-list li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        background: transparent !important;
        border: 0 !important;
    }

    #vh-filter-app #narrow-by-list li > a {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 8px 16px 8px 24px !important;
        color: var(--vh-filter-text) !important;
        background: var(--vh-filter-soft) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--vh-filter-border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        text-decoration: none !important;
        text-transform: none !important;
        white-space: normal !important;
    }

    #vh-filter-app #narrow-by-list li > a:hover,
    #vh-filter-app #narrow-by-list li > a:active {
        color: var(--vh-filter-primary-dark) !important;
        background: var(--vh-filter-bg) !important;
    }

    #vh-filter-app #narrow-by-list li > a.amshopby-attr-selected {
        color: var(--vh-filter-primary-dark) !important;
        background: #f5f9eb !important;
        box-shadow: inset 4px 0 0 var(--vh-filter-primary) !important;
        font-weight: 700 !important;
    }

    #vh-filter-app #narrow-by-list > dd.last > ol > li:first-child {
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 9px !important;
        margin: 0 !important;
        padding: 16px !important;
        color: var(--vh-filter-muted) !important;
        background: var(--vh-filter-soft) !important;
        border: 0 !important;
        font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
        font-size: 15px !important;
    }

    #vh-filter-app input.input-text[name="amshopby-price"] {
        flex: 1 1 88px !important;
        width: auto !important;
        min-width: 0 !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        color: var(--vh-filter-text) !important;
        background: var(--vh-filter-bg) !important;
        border: 1px solid #ccc !important;
        border-radius: 3px !important;
        box-shadow: none !important;
        font-size: 16px !important;
    }

    #vh-filter-app .amshopby-price-find {
        flex: 1 0 100% !important;
        width: 100% !important;
        min-height: 42px !important;
        margin: 3px 0 0 !important;
        padding: 8px 14px !important;
        color: var(--vh-filter-primary-text) !important;
        background: var(--vh-filter-primary-dark) !important;
        border: 0 !important;
        border-radius: 3px !important;
        box-shadow: none !important;
        font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
        cursor: pointer;
    }

    #vh-filter-app .amshopby-price-find span {
        display: inline !important;
        margin: 0 !important;
        padding: 0 !important;
        color: inherit !important;
        background: transparent !important;
        border: 0 !important;
    }

    #vh-filter-app .sorter.vhf-sorter {
        clear: both !important;
        display: block !important;
        float: none !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--vh-filter-text) !important;
        background: var(--vh-filter-soft) !important;
        border: 0 !important;
        border-top: 4px solid var(--vh-filter-border) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif !important;
        text-align: left !important;
    }

    #vh-filter-app .sorter.vhf-sorter .sort-by {
        display: flex !important;
        align-items: center !important;
        float: none !important;
        width: 100% !important;
        min-height: 56px !important;
        margin: 0 !important;
        padding: 7px 16px !important;
        gap: 10px !important;
        color: var(--vh-filter-text) !important;
        background: var(--vh-filter-bg) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--vh-filter-border) !important;
    }

    #vh-filter-app .sorter.vhf-sorter .limiter {
        display: none !important;
    }

    #vh-filter-app .sorter.vhf-sorter .sort-by label {
        flex: 0 0 76px !important;
        width: 76px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--vh-filter-text) !important;
        background: transparent !important;
        font-family: inherit !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        text-transform: none !important;
    }

    #vh-filter-app .sorter.vhf-sorter select {
        display: block !important;
        float: none !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 7px 34px 7px 10px !important;
        color: var(--vh-filter-text) !important;
        background-color: var(--vh-filter-bg) !important;
        border: 1px solid var(--vh-filter-border) !important;
        border-radius: 3px !important;
        box-shadow: none !important;
        font-family: inherit !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        text-transform: none !important;
    }

    #vh-filter-app .sorter.vhf-sorter .sort-by select {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    #vh-filter-app .sorter.vhf-sorter .amount {
        display: block !important;
        float: none !important;
        width: 100% !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        color: var(--vh-filter-muted) !important;
        background: var(--vh-filter-soft) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--vh-filter-border) !important;
        font-family: inherit !important;
        font-size: 14px !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }

    #vh-filter-app .sorter.vhf-sorter .amount strong {
        color: var(--vh-filter-text) !important;
        font-weight: 600 !important;
    }

    #vh-filter-app .sorter.vhf-sorter .vhf-amount-label {
        margin-right: 3px !important;
        color: var(--vh-filter-muted) !important;
        font-weight: 500 !important;
    }

    #vh-filter-app .sorter.vhf-sorter .view-mode {
        display: none !important;
    }

    #vh-filter-app .vhf-scroll-cue {
        position: absolute !important;
        right: 16px !important;
        bottom: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        appearance: none !important;
        color: var(--vh-filter-primary-text) !important;
        background: var(--vh-filter-primary) !important;
        border: 2px solid var(--vh-filter-primary-text) !important;
        border-radius: 50% !important;
        box-shadow: 0 4px 14px rgba(24, 42, 30, 0.3) !important;
        cursor: pointer;
        animation: vhf-scroll-arrow 1.05s ease-in-out infinite;
        z-index: 7;
    }

    #vh-filter-app .vhf-scroll-cue[hidden] {
        display: none !important;
    }

    #vh-filter-app .vhf-scroll-cue svg {
        display: block !important;
        width: 24px !important;
        height: 24px !important;
        fill: currentColor !important;
        pointer-events: none;
    }

    #vh-filter-app button:focus-visible,
    #vh-filter-app a:focus-visible,
    #vh-filter-app dt:focus-visible,
    html.vhf-filter-ready .block-layered-nav > .block-title.custom-block-title:focus-visible {
        outline: 3px solid var(--vh-filter-focus) !important;
        outline-offset: -3px !important;
        z-index: 10;
    }
}

@keyframes vhf-accordion-open {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes vhf-scroll-arrow {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

@media only screen and (max-width: 767px) and (prefers-reduced-motion: reduce) {
    #vh-filter-app .vhf-overlay,
    #vh-filter-app .vhf-drawer {
        transition: none !important;
    }

    #vh-filter-app #narrow-by-list > dd.vhf-group-open,
    #vh-filter-app .vhf-scroll-cue {
        animation: none !important;
    }
}

@media only screen and (min-width: 768px) {
    #vh-filter-app {
        display: none !important;
    }
}

/*
 * Contenimento definitivo dell'overflow orizzontale mobile.
 * Mantiene la pagina e il pannello filtri entro la larghezza del viewport.
 */
@media only screen and (max-width: 767px) {
    html.vhf-filter-ready,
    html.vhf-filter-ready body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-x: clip !important;
    }

    html.vhf-filter-ready .col-left,
    html.vhf-filter-ready .sidebar,
    html.vhf-filter-ready .block-layered-nav,
    html.vhf-filter-ready .block-layered-nav > .block-title.custom-block-title {
        box-sizing: border-box !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    #vh-filter-app {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    #vh-filter-app .vhf-drawer {
        right: 0 !important;
        left: auto !important;
        width: min(90vw, 390px) !important;
        max-width: 100vw !important;
    }
}