/***************************
    2. HEADER > colores menu
****************************/


.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: 0 0 .5rem .5rem;
    padding:0;
}
.bs-header-navbar{
    background:var(--header-navbar-bg-color);
}

.navbar-toggler{
    margin:.25rem 0;
    color:inherit;
} 
.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, .btn-cart, .btn-login{
padding:.75rem;  
}
.bs-menu__lv1 {
    white-space: normal;
    color: var(--lv1-txt-color);
    background: var(--lv1-bg-color);
    font-size: var(--lv1-size);
    font-weight: var(--font-bold);
    text-align: center; 
}
.bs-menu__lv1:hover, 
.show > .bs-menu__lv1 {
    box-shadow: 0 -1px inset var(--lv1-hover-decoration);
    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:not(.bs-menu__title):hover,
.bs-header .dropdown-item:hover{
    background:var(--lv2-hover-backgorund);
    color:var(--lv2-hover-txt-color);
    padding-left:1.25rem;
}

/* 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);
    padding-left:1.25rem;
}
.btn-cart, .btn-login{
    color: var(--primary-bg-color);
}
.btn-cart:hover, .btn-login:hover{
    color: #dadada;
}

/*lv2 si tiene hijos lv3 */
.bs-menu__title{
    font-weight: var(--lv2-title-weight);
    font-size:var(--lv2-title-size);
    color: var(--lv2-title-txt-color);
    cursor:default;
}
.bs-menu__title:hover{
    color: inherit;
    background:inherit;
}

/***********************************
   2. HEADER > social media
************************************/
.bs-header .bs-social-media a {
    padding: .5rem;
    color: #edb836;
}
/*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{
    margin:0;
    overflow:hidden;
}
.dropdown-menu.show {
    width:100%;
}

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



.bs-header-search {
    display:flex;
    max-width:240px;
    width:100%;
    min-width:100px;
    border-bottom: 2px solid Var(--primary-color);    
}
.bs-header-search .form-control{
    border:none;
    background:transparent;
    padding-left:0;
    padding-right:0;
    color: var(--body-txt-default-color);
}
.collapse.show .bs-header-search {
    z-index:1000;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    padding:0 1rem;
}

/* 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(--primary-color);
}


@media screen and (min-width:576px) {
    .navbar-expand-sm .bs-menu__close{
        display:none;
    }
    .navbar-expand-sm .bs-menu__with-section.show{
        display:flex;
        flex-wrap:wrap;
    }
    .navbar-expand-sm .bs-menu__section{
        width:25%;
    }
    .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;
    }
    
    .navbar-expand-sm .navbar-collapse.collapse,
    .navbar-expand-sm .navbar-collapse.collapse.show,
    .navbar-expand-sm .navbar-collapse.collapsing {
        height:auto !important;
        width:auto;
    }
}/* min-width:576px */

@media screen and (min-width:768px) {
    .navbar-expand-md .bs-menu__close{
        display:none;
    }
    .navbar-expand-md .bs-menu__with-section.show{
        display:flex;
        flex-wrap:wrap;
    }
    .navbar-expand-md .bs-menu__section{
        width:25%;
    }
    .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;
    }
    
    .navbar-expand-md .navbar-collapse.collapse,
    .navbar-expand-md .navbar-collapse.collapse.show,
    .navbar-expand-md .navbar-collapse.collapsing {
        height:auto !important;
        width:auto;
    }
}/* min-width:768px */

@media screen and (min-width:992px) {
    .navbar-expand-lg .bs-menu__close{
        display:none;
    }
    .navbar-expand-lg .bs-menu__with-section.show{
        display:flex;
        flex-wrap:wrap;
    }
    .navbar-expand-lg .bs-menu__section{
        width:25%;
    }
    .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;
    }
    
    .navbar-expand-lg .navbar-collapse.collapse,
    .navbar-expand-lg .navbar-collapse.collapse.show,
    .navbar-expand-lg .navbar-collapse.collapsing{
        height:auto !important;
        width:auto;
    }
    
}/*min-width:992px*/

@media screen and (min-width:1200px) {
    .navbar-expand-xl .bs-menu__close{
        display:none;
    }
    .navbar-expand-xl .bs-menu__with-section.show{
        display:flex;
        flex-wrap:wrap;
    }
    .navbar-expand-xl .bs-menu__section{
        width:25%;
    }
    .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;
    }
    
    .navbar-expand-xl .navbar-collapse.collapse,
    .navbar-expand-xl .navbar-collapse.collapse.show,
    .navbar-expand-xl .navbar-collapse.collapsing {
        height:auto !important;
        width:auto;
    }
}/*min-width:1200px */