/***************************
    HEADER RESET
****************************/

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { 
    display: none;
}
.btn-shopping-bag:hover {
	text-decoration: none;
}
[data-bs="cart.dropdown"]{
    position:fixed;
    height:100vh;
    bottom:0;
    z-index:9000;
    color: #212529;
}
.nav-item{
    list-style-type:none;
    list-style-image:none;
    
}
.nav-item .dropdown-toggle::after{
    display:none;
}
/**********************************
    HEADER STYLES
***********************************/


.bs-header-top{
    background:var(--header-top-bg);
    text-align:right;
}

.bs-header{
    background:var(--header-bg);
    color:var(--header-color);
}

.bs-grid-header__logo img{
    max-width: var(--logo-width);
    max-height: var(--logo-height);
}

/*******************************
    HEADER GRID
********************************/
.bs-grid-header{
                          
    display:grid;
    grid-template-areas:"logo   login   cart" 
                        "search  search  search";
    grid-template-columns: minmax(var(--logo-width,200px),auto) repeat(2,min-content);
    
    column-gap:1rem;
    align-items:center;
    padding-top:.5rem;
    padding-bottom:.5rem;
}
.bs-grid-header__logo{grid-area: logo;}

/* buscador ******************************************************/
.bs-grid-header__search{
    grid-area: search;
    display:flex;
    background:var(--menu-bg);
    margin: auto -1.25rem -.5rem;
    padding:0 1rem;
    box-sizing:border-box;
    justify-content:center;
}
.bs-grid-header__search form{
    flex: 0 1 auto;
    display:block;
    width:100%;
    max-width:400px;
    margin:.5rem 0 .5rem .5rem;
}
.bs-grid-header__search .btn{
    --btn-padding:.375rem .75rem;
    --btn-bg: var(--primary-color);
    --btn-color: var(--primary-contrast);
    --btn-hover-color: var(--primary-hover-contrast);
    --btn-hover-bg: var(--primary-hover-color);
}
/* carro ********************************************************/
.bs-grid-header__cart {
    grid-area: cart;
    position: relative;
    padding: 9px;
}
.bs-grid-header__cart:hover{
    background: var(--header-color);
    color: var(--header-bg);
}
.cart-items{
    font-size:.8em;
    position:absolute;
    top:-.5em;
    right:-.5em;
    height:1.6em;
    min-width:1.6em;
    border-radius:1em;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--cart-items-bg);
    color:var(--cart-items-color);
    border:var(--cart-items-border);
}
.cart-items:hover{
    background:var(--cart-items-bg);
    color:var(--cart-items-color);
    border:var(--cart-items-border);
}
/* login *******************************************************/
.bs-grid-header__login{
    grid-area:login
}
.bs-grid-header__login:hover{
    background: var(--header-color);
    color: var(--header-bg);
}




/* logo ********************************************************/
[data-bs="header.logo"]{
    width: var(--logo-width, 250px);
    object-fit: contain;
}

/**************************************************************
    MENU LEVELS
**************************************************************/
.bs-grid-header__menu{
    grid-area: menu;
    padding:0;
}
.bs-grid-header__menu-desktop i,
.navbar-toggler i{ /*icons*/
    min-width:1rem;
    display:inline-block;
}
.navbar-toggler i{
    margin-right:.25rem;
}
.navbar-toggler{
    color: var(--menu-toggler-color,var(--lv1-color));
    background: var(--menu-toggler-bg,var(--lv1-bg));
    font-size: var(--menu-toggler-size,var(--lv1-size));
    border-radius:0;
    padding: .5rem .75rem;
    display:flex;
    align-items:center;
}
.bs-menu__login{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: .5rem .75rem;
    background:var(--header-bg);
    color:var(--header-color);
    font-size: var(--lv1-size);
}
.bs-menu__lv1{
    display:
    block;
    padding: .5rem .75rem;
    color: var(--lv1-color);
    background: var(--lv1-bg);
    font-size: var(--lv1-size);
    font-weight: var(--font-regular);
}

.bs-menu__lv1:hover,
.show > .bs-menu__lv1,
.navbar-toggler:hover{
    color: var(--lv1-hover-color);
    background: var(--lv1-hover-bg);
}
.navbar .bs-menu__lv1,
.bs-menu__lv2, .bs-menu__lv3{
    padding: .375rem .75rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.bs-menu__lv1 i{
    margin-left:.25rem;
    font-size:.8rem;
    
}
.bs-menu__lv2{
   color: var(--lv2-color);
    background: var(--lv2-bg);
    font-size: var(--lv2-size); 
}
.bs-menu__lv2:hover{
   color: var(--lv2-hover-color);
    background: var(--lv2-hover-bg);
}


.bs-menu__lv3{
   color: var(--lv3-color);
    background: var(--lv3-bg);
    font-size: var(--lv3-size); 
}

.bs-menu__lv3:hover{
   color: var(--lv3-hover-color);
    background: var(--lv3-hover-bg);
}
.navbar-collapse .bs-menu__lv2{
    padding-left:1.75rem;
}
.navbar-collapse .bs-menu__lv3{
    padding-left:1.75rem;
    justify-content:flex-start;
}
.navbar-collapse .bs-menu__lv3::before{
    content:"\25CF";
    margin-right:.25rem;
    color:var(--primary-color);

}
.bs-header .dropdown-menu{
    padding:0;
    border-radius:0;
    margin:0;
    min-width:100%;
}
.navbar-collapse .dropdown-menu{
    padding-bottom:.5rem;
}
.toggle__icon{
    min-width:1rem;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:.8rem;
    margin-left:.25rem;
    display:inline-block;
}
.bs-grid-header__menu-desktop .with__lv3{
    position:static;
}
.bs-special-navbar-desktop .nav-item.with__lv3 > .dropdown-menu.show{
    display:grid;
    grid-template-columns: repeat(var(--menu-columns, 5),minmax(0,1fr));
    left:0;
    right:0;
    min-width:auto;
}
.bs-special-navbar-desktop .nav-item.with__lv3 .dropdown-menu .dropdown-toggle{
    white-space:normal;
}
@media screen and (min-width:576px){
    .bs-special-navbar-desktop .nav-item.with__lv3 > .dropdown-menu.show{
        grid-template-columns: repeat(var(--menu-columns-sm, var(--menu-columns, 5)),minmax(0,1fr));
    }
   
}
@media screen and (min-width:768px){
    .bs-special-navbar-desktop .nav-item.with__lv3 > .dropdown-menu.show{
        grid-template-columns: repeat(var(--menu-columns-md,var(--menu-columns-sm, var(--menu-columns, 5))),minmax(0,1fr));
    }
   
}
@media screen and (min-width:922px){
    .bs-special-navbar-desktop .nav-item.with__lv3 > .dropdown-menu.show{
        grid-template-columns: repeat(var(--menu-columns-lg,var(--menu-columns-md,var(--menu-columns-sm, var(--menu-columns, 5)))),minmax(0,1fr));
    }
}
@media screen and (min-width:1200px){
    .bs-special-navbar-desktop .nav-item.with__lv3 > .dropdown-menu.show{
        grid-template-columns: repeat(var(--menu-columns-xl,var(--menu-columns-lg,var(--menu-columns-md,var(--menu-columns-sm, var(--menu-columns, 5))))),minmax(0,1fr));
    }
}

        

.bs-special-navbar-desktop  .dropdown-menu__lv3{
    top:0;
    padding:0;
}
.bs-special-navbar-desktop    .nav-item.with__lv3 > .dropdown-menu.show .bs-menu__lv2{
        align-self: start;
        font-weight: var(--font-bold);
        font-size:1rem;
    }
.bs-special-navbar-desktop     .nav-item.with__lv3 > .dropdown-menu.show .bs-menu__lv2:hover{
        background:none;
        color:inherit;
        cursor:default;
    }
.bs-special-navbar-desktop    .bs-menu__toggler-icon{
        margin-left:.5rem;
        width:1rem;
        height:1rem;
    }
.bs-special-navbar-desktop    .nav-item.with__lv3 > .dropdown-menu.show i{
        display:none;
        
    }
    
.bs-special-navbar-desktop    .nav-item > .dropdown-menu.show .dropdown-menu{
        display:block;
        position:relative;
        border:0 none
    }



/* mobile menu **************************************************/ 
.navbar-collapse.collapse,
.navbar-collapse.collapse.show,
.navbar-collapse.collapsing {
	position: fixed !important;
	top: 0;
	left: 0;
	height: 100vh !important;
	z-index: 1000;
	overflow-y: scroll;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
	transition: all .25s ease;
}

.navbar-collapse.collapse,
.navbar-collapse.collapsing {
	width: 0;
	max-width: 0;
	padding: 0;
}

.navbar-collapse.collapse.show {
	max-width: 360px;
	width: 100%;
	padding: 0 0 4rem;
	
}
.navbar-collapse .btn-close{
    background:var(--header-bg);
    border:none;
    display:flex;
    justify-content:flex-end;
    padding:.5rem 1rem;
    width:100%;
}
@media screen and (min-width:430px){
    .navbar-collapse .btn-close{
        position:fixed;
        background:rgba(0,0,0,0.5);
        color:transparent;
        right:0;
        top:0;
        bottom:0;
        left:0;
        
        padding:1rem;
        font-size:2rem;
        align-items:flex-start;
        justify-content:flex-start;
        transition: all .25s ease;
    }
}
.navbar-collapse.collapse.show .btn-close{
    left: 360px;
    color:white;
}





.bs-grid-header__menu-desktop, .navbar-collapse{
    background:var(--menu-bg, var(--primary-color));
}
.bs-special-navbar{
    display:none;
}
.bs-grid-header__menu-desktop .navbar-toggler,
.bs-special-navbar-desktop{
    display:none;
}
.bs-grid-header__menu-desktop .navbar{
    padding:0;
}
@media screen and (min-width:576px){
    .bs-grid-header__menu-desktop .navbar-toggler{
        display:flex;
    }
    .navbar-expand-sm .bs-grid-header__menu-desktop{
        display:flex;
    }
    .bs-grid-header__search{
        padding:0;
        background:transparent;
        margin:0;
    }

    .bs-special-navbar-desktop{
        margin:0;
        padding:0;
        display:flex;
        justify-content:flex-start;
        width:100%;
    }
    .bs-grid-header{
        grid-template-areas: "logo search login cart";
        grid-template-columns: var(--logo-width,200px) auto  repeat(2,min-content);
        column-gap:1rem
    }
    .bs-grid-header .bs-grid-header__menu{
        display:none;
    }
}