/**
 * Verdelilla Home - header compatto per smartphone
 * Versione: 1.0.3
 *
 * Nessuna regola viene applicata da 770px in su.
 */

@media only screen and (max-width: 769px) {
    html.vh-smartphone-header #header-container.header-mobile {
        top: 0 !important;
        width: 100% !important;
        background: #fff !important;
    }

    /* La barra promozionale rimane parte dello sticky header anche allo scroll. */
    html.vh-smartphone-header #header-container .wrapper-banner-promo {
        position: relative !important;
        z-index: 4 !important;
        display: block !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    html.vh-smartphone-header #header-container .header-m-primary-container {
        position: relative !important;
        z-index: 3 !important;
        background: #fff !important;
        box-shadow: none !important;
        transition: box-shadow 180ms ease !important;
    }

    html.vh-smartphone-header #header-container.vh-smartphone-has-scrolled
        .header-m-primary-container {
        box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14) !important;
    }

    html.vh-smartphone-header #header-container .header-m-primary,
    html.vh-smartphone-header #header-container .header-m-primary > .inner-container {
        min-height: 64px !important;
        height: 64px !important;
    }

    html.vh-smartphone-header #header-container .header-m-primary > .inner-container {
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Logo originale: viene solo centrato, senza duplicarlo nel DOM. */
    html.vh-smartphone-header #header-container .logo-wrapper--mobile {
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        clear: none !important;
        width: 150px !important;
        max-width: 150px !important;
        height: 64px !important;
        min-height: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateX(-50%) !important;
    }

    html.vh-smartphone-header #header-container .logo.logo--mobile {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        float: none !important;
        width: 150px !important;
        max-width: 150px !important;
        height: 64px !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        aspect-ratio: auto !important;
    }

    html.vh-smartphone-header #header-container .logo.logo--mobile img {
        display: block !important;
        width: 150px !important;
        max-width: 150px !important;
        height: auto !important;
        max-height: 48px !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }

    html.vh-smartphone-header #header-container .after-mobile-logo {
        display: none !important;
    }

    /*
     * I trigger Magento originali restano nel DOM e continuano a pilotare
     * menu, ricerca e carrello, ma non vengono visualizzati una seconda volta.
     */
    html.vh-smartphone-header #header-container
        .header-m-primary .skip-links-wrapper {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: visible !important;
    }

    html.vh-smartphone-header .vh-smartphone-source-trigger {
        position: absolute !important;
        width: 1px !important;
        min-width: 1px !important;
        max-width: 1px !important;
        height: 1px !important;
        min-height: 1px !important;
        max-height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        white-space: nowrap !important;
    }

    html.vh-smartphone-header #header-container .skip-links-clearer,
    html.vh-smartphone-header #header-container #mini-cart-marker-mobile,
    html.vh-smartphone-header #header-container #nav-marker-mobile,
    html.vh-smartphone-header #header-container #search-marker-mobile,
    html.vh-smartphone-header #header-container #account-links-marker-mobile {
        display: none !important;
    }

    /* Menu + ricerca | logo | account + carrello. */
    html.vh-smartphone-header .vh-smartphone-actions {
        position: relative !important;
        z-index: 3 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        align-items: center !important;
        /* Evita che il padding allarghi la barra e sposti a destra le icone. */
        box-sizing: border-box !important;
        width: 100% !important;
        height: 64px !important;
        margin: 0 !important;
        padding: 0 10px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: inset 0 -1px 0 #dedede !important;
        pointer-events: none !important;
    }

    html.vh-smartphone-header .vh-smartphone-actions-side {
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        gap: 0 !important;
        min-width: 0 !important;
        height: 64px !important;
        pointer-events: none !important;
    }

    html.vh-smartphone-header .vh-smartphone-actions-side--left {
        justify-content: flex-start !important;
    }

    html.vh-smartphone-header .vh-smartphone-actions-side--right {
        justify-content: flex-end !important;
    }

    html.vh-smartphone-header .vh-smartphone-action {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #333 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        appearance: none !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: transparent;
    }

    /*
     * Separa le icone interne lasciando fermi Menu e Carrello.
     * I margini sono compatibili anche con le versioni iOS prive di flex-gap.
     */
    html.vh-smartphone-header .vh-smartphone-action--search {
        margin-left: 8px !important;
    }

    html.vh-smartphone-header .vh-smartphone-action--account {
        margin-right: 8px !important;
    }

    html.vh-smartphone-header .vh-smartphone-action:hover,
    html.vh-smartphone-header .vh-smartphone-action:active,
    html.vh-smartphone-header .vh-smartphone-action.is-open {
        color: #6f941c !important;
        background: transparent !important;
    }

    html.vh-smartphone-header .vh-smartphone-action:focus-visible {
        outline: 2px solid #333 !important;
        outline-offset: -3px !important;
    }

    html.vh-smartphone-header .vh-smartphone-action-icon {
        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }

    html.vh-smartphone-header .vh-smartphone-cart-count {
        position: absolute !important;
        top: 5px !important;
        right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        color: #fff !important;
        background: #75ad10 !important;
        border-radius: 8px !important;
        font-family: Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: 400 !important;
        line-height: 16px !important;
    }

    html.vh-smartphone-header .vh-smartphone-cart-count[hidden] {
        display: none !important;
    }
}

@media only screen and (max-width: 359px) {
    html.vh-smartphone-header #header-container .logo-wrapper--mobile,
    html.vh-smartphone-header #header-container .logo.logo--mobile,
    html.vh-smartphone-header #header-container .logo.logo--mobile img {
        width: 132px !important;
        max-width: 132px !important;
    }

    html.vh-smartphone-header .vh-smartphone-actions {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    html.vh-smartphone-header .vh-smartphone-action {
        flex-basis: 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
    }
}

@media only screen and (max-width: 769px) and (prefers-reduced-motion: reduce) {
    html.vh-smartphone-header #header-container .header-m-primary-container {
        transition: none !important;
    }
}