.vti-header-nav-wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    max-width: 1380px;
    margin: 0 auto;
    padding:0 16px;
}

.vti-header-nav-wrap > div{
    display:flex;
    gap:24px;
    align-items:center;
}

.vti-header-logo{
    width:288px;
}

.vti-header-nav{
    display:flex;
    padding:0;
    gap:24px;
}

.vti-header-nav ul, .vti-header-nav li{
    padding:0;
    list-style-type:none;
    margin: 8px 0;
}

.vti-subnav-wrap{
    /*display: flex;*/
    display:none;
    position: absolute;
    top: 54px;
    background: white;
    border-top:1px solid #ccc;
    border-bottom:1px solid #ccc;
    width: 100%;
    left: 0;
    margin: 0 auto;
    padding:48px 16px;
}

a.subnav-title {
    font-weight: bold;
    color:#000 !important;
}

a.subnav-title:hover {
    color: #ed1c24 !important;
}

.vti-header-nav > li > a {
    color: #000000 !important;
    display:flex;
    gap:4px;
}

.vti-header-nav > li > a .material-symbols-outlined{
    padding-top:2px;
}

.vti-header-nav > li > a:hover {
    color: #ed1c24 !important;
}


.vti-parent-nav > .vti-subnav-wrap > div{
    display: flex;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding:0;
}

.vti-parent-nav > .vti-subnav-wrap > div > ul{
    flex:3;
    display: flex;
    width: 100%;
    padding:0 16px 0 0;
    gap:16px;
}

.vti-parent-nav > .vti-subnav-wrap > div > ul > li{
    flex:1;
    max-width:290px;
}

.vti-parent-nav > .vti-subnav-wrap > div > ul > li > ul{
    margin-top:16px;
}
.vti-subnab-wrap > a { 
    font-weight: bold !important;
}

.vti-header-nav-promo-box{
    
    flex:1.5;
   
    .vti-header-nav-promo-card{
         display:flex;
         align-items:flex-end;
         min-height:100px;
         width:100%;
         background-position:center bottom;
         background-repeat:no-repeat;
         background-size:cover;
         padding:8px;
    }
    
    a,a:hover {
        color: #ffffff !important;
    }
    
    .vti-header-nav-promo-card:not(last-child){
        margin-bottom:8px;
    }
    
    i{
        display:inline-block;
        margin-left:4px;
    }
    
}


.vti-header-search{
    display:flex;
    position:relative;
    align-items:center;
    padding:8px 16px;
    background-color:#f2f2f2;
    gap:16px;
    border-radius:4px;
}

.vti-header-search > input{
    border:none !important;
    padding:0 !important;
    background:transparent;
    min-width:250px;
    font-size:16px;
}

.vti-header-search > input:focus{
    outline:none;
}

.vti-header-search > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    cursor:pointer;
}

.vti-header-search .vti-clear-search-icon{
   visibility:hidden;
    display:inline-flex;
    align-items:center;
    justify-content:center;
   
}

.vti-header-nav-group{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}


.vti-header-nav-button{
    
    display:inline-flex;
    cursor:pointer;

    
    > .vti-button-icon{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:20px;
        height:20px;
        font-size:20px;
    }
   
}

.vti-icon-button{
    align-items:center !important;
    gap:4px !important;
}

#vti-mobile-search-button, #vti-mobile-nav-button{
        display:none;
}


.vti-header-search-results{
    display:none;
    position:absolute;
    top:48px;
    left:0;
    width:100%;
    background-color:white;
    list-style-type:none;
    padding:20px;
    border-radius:4px;
    box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
    
    li:not(.vti-view-all-row) > a{
        color:black;
    }
    
    li:not(.vti-view-all-row) > a:hover{
        color:#676767;
    }
}


.vti-header-search-results li.vti-view-all-row{
    
    border-top: 1px solid #ccc;
    padding-top: 8px;
    margin-top: 8px;
    margin-bottom:-8px;
}


@media (max-width: 800px){
    
    .vti-header-left{
        margin-right:40px;
    }

    #vti-mobile-nav-button{
        display:inline-flex;
    }
    
    .vti-header-nav, #vti-cart-button label{
        display:none;
    }
    
    .vti-header-nav.active{
        
        display: flex;
        flex-direction:column;
        gap:0;
        position: absolute;
        left: 0;
        top: 50px;
        right: 0;
        bottom: 0;
        background-color: #fff;
        width: 100%;
        z-index: 1;
        padding: 20px;
        height:calc(100vh - 80px);
        border-top: 1px solid #ccc;
        overflow-y: auto;
        padding-bottom:40px;
        
        > li:first-child{
           border-bottom: 1px solid #ccc;
           padding-bottom:20px;
        }
        
        
        .vti-subnav-wrap{
            display:flex !important;
            position:relative;
            top: 0;
            border:none;
            padding:0;
            
            > div{ 
                flex-direction:column;
            }
            > div > ul{
                flex-direction:column;
                gap:0;
                margin-bottom:32px;
            } 
        }
        
        
    }
}

@media (max-width: 1024px){

    #vti-mobile-search-button{
        display:inline-flex;
    }
    
    .vti-header-search{
        display:none;
    }
    
    .vti-header-search-wrap.active{
        content:"";
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        width:100%;
        background-color:white;
        padding:0 20px;
        
        .vti-header-search{
            display:flex;
            max-width:500px;
            margin:-8px auto 0 auto;
        }
    }
    
    
}