/***************************
    2. HEADER > colores menu
****************************/
.bs-grid-header, 
.bs-grid-header-sm, 
.bs-grid-header-md,
.bs-grid-header-lg,
.bs-grid-header-xl {
    --margin: .5rem;
    display:grid;
    grid-template-columns:[toggle-menu]1fr  [logo] auto [search] 1fr [cart] 1fr;
    align-items:center;
    gap:0 var(--margin);
    padding:var(--margin) 0;
}

.bs-grid-header__search {
	grid-area: search;
}

.bs-grid-header__logo{
    grid-area:logo;
    text-align:center;
}

.bs-grid-header__cart{
    grid-area:cart;
    justify-self: start;

}
.bs-grid-header__toggle-menu{
    grid-area:toggle-menu;
    justify-self: end;
    display:flex;


}

.logo-header{
    width: var(--logo-width);
    height: var(--logo-height);
}
.search-container,
.bs-grid-header__login{
        display:none;
}
.search-container.show{
    display:flex;
    align-items:center;
    z-index:1050;
    background:var(--header-bg-color);
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    border-radius:none;
}
.bs-login .text-truncate{
    max-width:100%;
}



.btn-shopping-bag:hover{
    text-decoration:none;
}

.bs-sticky-header{
    /*se aplica automatiamente cuando el header tiene data-info="sticky" */
    box-shadow: 0px 2px 10px -4px rgba(0,0,0,0.75);
}
.bs-header { 
    background:var(--header-bg-color);
    color:var(--header-txt-color);

}
.bs-header .dropdown-menu{
    border-radius: var(--dropdown-menu-border-radius);
    padding:0;
}

.bs-header-navbar{
    background:var(--header-navbar-bg-color);
    padding-bottom:0;
    padding-top:0;
}

.navbar-toggler{
    margin:.25rem 0;
    color:inherit;
} 
.bs-menu__lv1.bs-login{
    margin: 0 1rem;
}
.bs-menu__lv1.bs-login,
.show > .bs-menu__lv1.bs-login{
    background: var(--primary-color);
    color: var(--primary-contrast);
    border-radius:var(--default-border-radius);
}
.bs-menu__lv1.bs-login:hover{
    background: var(--primary-hover-color);
    color: var(--primary-hover-contrast);
}



.bs-menu__lv1, .bs-menu__lv2, .bs-menu__lv3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all .25s ease;
}

/* bs-menu__lv1 */

.bs-menu__lv1{
padding:.75rem;  
}
.bs-menu__lv1 {
    white-space: normal;
    color: var(--lv1-txt-color);
    background: var(--lv1-bg-color);
    font-size: var(--lv1-size);
    text-align: center;
}

.bs-menu__lv1:hover,
.show > .bs-menu__lv1{
    color: var( --lv1-hover-txt-color);
}

/* bs-menu__lv2 */
.bs-menu__lv2,
.bs-header .dropdown-item{
    padding:.5rem 1rem;
    color:var(--lv2-txt-color);
    background:var(--lv2-bg-color);
    font-size:var(--lv2-size);
}

.bs-menu__lv2:hover,
.dropdown__lv2.show .bs-menu__lv2{
    background:var(--lv2-hover-bg-color);
    color:var(--lv2-hover-txt-color);
}


/* bs-menu__lv3 */
.bs-menu__lv3 {
    padding:.5rem 1rem;
    color: var(--lv3-txt-color);
    font-size:var(--lv3-size);
    background: var(--lv3-bg-color);
  
}
.bs-menu__lv3:hover {
    background: var(--lv3-hover-bg-color);
    color: var(--lv3-hover-txt-color);
}

/* toggle */

.dropdown .dropdown-toggle::after{
    margin-left:.5rem;
}

/* dropdown*/
.dropleft .dropdown-toggle::before{
    content:none;
}
.dropright .dropdown-toggle::after,
.dropleft .dropdown-toggle::after {
    display: inline-block;
    margin-right: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}


.cart-items{
    position:absolute;
    right:-.3rem;
    top:-.3rem;
    background:var(--primary-hover-color);
    color:var(--primary-hover-contrast);
    border-radius:5rem;
    font-size:.8rem;
    min-width:1.5rem;
    padding:.125rem .375rem ;
    border:2px solid var(--header-bg-color);
}
.cart-items:empty{
    display:none;
}


.btn-cart, .btn-login, .navbar-toggler{
    height: 3rem;
    min-width:3rem;
    border-radius:5rem;
    align-items:center;
    justify-content:center;
    position:relative;
}
.btn-cart, .btn-login{
    color: var(--secondary-color);
    background: var(--element-bg-color);
    
}
.btn-cart:hover, .btn-login:hover{
    background:var(--secondary-color);
    color:var(--primary-contrast);
}

/***********************************
   2. HEADER > social media
************************************/
.bs-header .bs-social-media a {
    padding: .5rem;
}
/*se eliminan los margenes del navbar para permitir ordenar elementos con col*/
.bs-header-navbar .container .navbar {
    margin: 0;
    padding:0;
}

/*para menu de ancho de pantalla*/
.dropdown-menu, 
.dropleft   .dropdown-menu,
.dropright  .dropdown-menu{
    margin:0;
    min-width:100%;
}

.dropdown-menu .dropdown-menu__lv3{
    top:-1px;/* si se elimina el border se debe corregir este parametro*/
}


/*el menu usa el 100% del ancho de su padre*/
.bs-nav-menu {
    width:100%;
}



.bs-header-search .input-group{
    width:100%;
    background: rgb(0 131 55 / 8%);
    border:1px solid var(--primary-color);
    border-radius:50rem;
    padding:.25rem 1rem;
}
/*reset search*/
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 {
  -webkit-appearance:none;
}
.bs-header-search .form-control{
    border:none;
    background:transparent;
    padding-left:0;
    padding-right:0;
}
.bs-header-search .btn-search {
    box-shadow: 2px 0px var(--primary-color) inset;
    color: var(--primary-color);
}

.bs-grid-header__search {
    color: var(--primary-color);
}
.bs-grid-header__search:hover {
    color: var(--primary-hover-color);
}




/* Boton login activado*/
.show>.btn-primary.dropdown-toggle {
  background:#664f7f; 
}

.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;
    background:var(--header-navbar-mobile-bg-color);
}


@media screen and (min-width:576px) {
    .navbar-expand-sm .navbar-collapse.collapse.show{
        background:transparent;
    }
    .bs-grid-header-sm{
        grid-template-columns: [logo] auto [search] 300px [login] min-content [cart] 3rem ;
    }
    .bs-grid-header-sm .bs-grid-header__logo{
        text-align:left;
    }
    .bs-grid-header-sm .bs-grid-header__toggle-menu{
        grid-area:toggle-menu;
        display:none;
    }
    .bs-grid-header-sm .search-container{
        grid-area: search;
        display:block;
        position:static;
    }
    .bs-grid-header-sm .bs-grid-header__login{
        grid-area: login;
        display:flex;
    }
    .navbar-expand-sm .bs-header-search{
        max-width:300px;
    }
    .navbar-expand-sm .dropdown-menu{
        z-index:1000;
    }
    .bs-login .text-truncate{
        max-width:100px;
    }
    .navbar-expand-sm{
        flex-flow: row wrap;
    }
    .navbar-expand-sm .bs-menu__close{
        display:none;
    }
    .navbar-expand-sm .bs-menu__lv1{
        height:100%;
    }
    .navbar-expand-sm .dropdown-menu__lv3.menu-grid-3.show,
    .navbar-expand-sm .dropdown-menu__lv3.menu-grid-2.show{
        display: grid;
        grid-auto-flow: row;
    }
    .navbar-expand-sm .dropdown-menu__lv3.menu-grid-3.show{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .navbar-expand-sm .dropdown-menu__lv3.menu-grid-2.show{
        grid-template-columns: 1fr 1fr;
    }

    .navbar-expand-sm .bs-menu__lv2,
    .navbar-expand-sm .bs-menu__lv3{
        white-space: nowrap;
    }

    .navbar-expand-sm .navbar-collapse.collapse,
    .navbar-expand-sm .navbar-collapse.collapsing,
    .navbar-expand-sm .navbar-collapse.collapse.show{
        position:static !important;
        overflow-y:initial;
        max-width:100%;
        padding:0;
        box-shadow:none;
        height:auto !important;
        width:auto;
        z-index:auto;
        width:100%;
    }
}/* min-width:576px */

@media screen and (min-width:768px) {
    .navbar-expand-md .navbar-collapse.collapse.show{
        background:transparent;
    }
    .bs-grid-header-md{
        grid-template-columns: [logo] auto [search] 300px [login] min-content [cart] 3rem ;

    }
    .bs-grid-header-md .bs-grid-header__logo{
        text-align:left;
    }
    .bs-grid-header-md .bs-grid-header__toggle-menu{
        grid-area:toggle-menu;
        display:none;
    }
    .bs-grid-header-md .search-container{
        grid-area: search;
        display:block;
        position:static;
    }
    .bs-grid-header-md .bs-grid-header__login{
        grid-area: login;
        display:flex;
    }
    .navbar-expand-md .bs-header-search{
        max-width:300px;
    }
    .navbar-expand-md .dropdown-menu{
        z-index:1000;
    }
    .bs-login .text-truncate{
        max-width:100px;
    }
    .navbar-expand-md{
        flex-flow: row wrap;
    }
    .navbar-expand-md .bs-menu__close{
        display:none;
    }
    .navbar-expand-md .bs-menu__lv1{
        height:100%;
    }
    .navbar-expand-md .dropdown-menu__lv3.menu-grid-3.show,
    .navbar-expand-md .dropdown-menu__lv3.menu-grid-2.show{
        display: grid;
        grid-auto-flow: row;
    }
    .navbar-expand-md .dropdown-menu__lv3.menu-grid-3.show{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .navbar-expand-md .dropdown-menu__lv3.menu-grid-2.show{
        grid-template-columns: 1fr 1fr;
    }

    .navbar-expand-md .bs-menu__lv2,
    .navbar-expand-md .bs-menu__lv3{
        white-space: nowrap;
    }

    .navbar-expand-md .navbar-collapse.collapse,
    .navbar-expand-md .navbar-collapse.collapsing,
    .navbar-expand-md .navbar-collapse.collapse.show{
        position:static !important;
        overflow-y:initial;
        max-width:100%;
        padding:0;
        box-shadow:none;
        height:auto !important;
        width:auto;
        z-index:auto;
        width:100%;
    }
}/* min-width:768px */

@media screen and (min-width:992px) {
    .navbar-expand-lg .navbar-collapse.collapse.show{
        background:transparent;
    }
    .bs-grid-header__search {
	display: none;
    }
    .bs-grid-header-lg{
        grid-template-columns: [logo] auto [search] 300px [login] min-content [cart] 3rem ;

    }
    .bs-grid-header-lg .bs-grid-header__logo{
        text-align:left;
    }
    .bs-grid-header-lg .bs-grid-header__toggle-menu{
        grid-area:toggle-menu;
        display:none;
    }
    .bs-grid-header-lg .search-container{
        grid-area: search;
        display:block;
        position:static;
    }
    .bs-grid-header-lg .bs-grid-header__login{
        grid-area: login;
        display:flex;
    }
    .navbar-expand-lg .dropdown-menu{
        z-index:1000;
    }
    .bs-login .text-truncate{
        max-width:100px;
    }
    .navbar-expand-lg{
        flex-flow: row wrap;
    }
    .navbar-expand-lg .bs-menu__close{
        display:none;
    }
    .navbar-expand-lg .bs-menu__lv1{
        height:100%;
    }
    .navbar-expand-lg .dropdown-menu__lv3.menu-grid-3.show,
    .navbar-expand-lg .dropdown-menu__lv3.menu-grid-2.show{
        display: grid;
        grid-auto-flow: row;
    }
    .navbar-expand-lg .dropdown-menu__lv3.menu-grid-3.show{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .navbar-expand-lg .dropdown-menu__lv3.menu-grid-2.show{
        grid-template-columns: 1fr 1fr;
    }

    .navbar-expand-lg .bs-menu__lv2,
    .navbar-expand-lg .bs-menu__lv3{
        white-space: nowrap;
    }

    .navbar-expand-lg .navbar-collapse.collapse,
    .navbar-expand-lg .navbar-collapse.collapsing,
    .navbar-expand-lg .navbar-collapse.collapse.show{
        position:static !important;
        overflow-y:initial;
        max-width:100%;
        padding:0;
        box-shadow:none;
        height:auto !important;
        width:auto;
        z-index:auto;
        width:100%;
    }
    
}/*min-width:992px*/

@media screen and (min-width:1200px) {
    .navbar-expand-xl .navbar-collapse.collapse.show{
        background:transparent;
    }
    .bs-grid-header-xl{
        grid-template-columns: [logo] auto [search] 300px [login] min-content [cart] 3rem ;
    }
    .bs-grid-header-xl .bs-grid-header__logo{
        text-align:left;
    }
    .bs-grid-header-xl .bs-grid-header__toggle-menu{
        grid-area:toggle-menu;
        display:none
    }
    .bs-grid-header-xl .search-container{
        grid-area: search;
        display:block;
        position:static;
    }
    .bs-grid-header-xl .bs-grid-header__login{
        grid-area: login;
        display:flex;
    }
    
    .navbar-expand-xl .dropdown-menu{
        z-index:1000;
    }
    .bs-login .text-truncate{
        max-width:100px;
    }
    .navbar-expand-xl{
        flex-flow: row wrap;
    }
    .navbar-expand-xl .bs-menu__close{
        display:none;
    }
    .navbar-expand-xl .bs-menu__lv1{
        height:100%;
    }
    .navbar-expand-xl .dropdown-menu__lv3.menu-grid-3.show,
    .navbar-expand-xl .dropdown-menu__lv3.menu-grid-2.show{
        display: grid;
        grid-auto-flow: row;
    }
    .navbar-expand-xl .dropdown-menu__lv3.menu-grid-3.show{
        grid-template-columns: 1fr 1fr 1fr;
    }
    .navbar-expand-xl .dropdown-menu__lv3.menu-grid-2.show{
        grid-template-columns: 1fr 1fr;
    }

    .navbar-expand-xl .bs-menu__lv2,
    .navbar-expand-xl .bs-menu__lv3{
        white-space: nowrap;
    }

    .navbar-expand-xl .navbar-collapse.collapse,
    .navbar-expand-xl .navbar-collapse.collapsing,
    .navbar-expand-xl .navbar-collapse.collapse.show{
        position:static !important;
        overflow-y:initial;
        max-width:100%;
        padding:0;
        box-shadow:none;
        height:auto !important;
        width:auto;
        z-index:auto;
        width:100%;
    }
}/*min-width:1200px */