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

:root{
                          /*|-------------------------------|-------------------|-----------------------|-----------------------|--------------------|*/
    --grid-header-mobile:   [cart] min-content              [logo] auto         [menu] min-content;
    --grid-header-desktop:  [logo] var(--logo-width,200px)  [menu] min-content  [search] auto           [login] min-content     [cart] min-content;
}
/*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 { display: none; }
.btn-shopping-bag:hover {
	text-decoration: none;
}


.bs-header.bs-sticky-header{
    /* centrar cabecera*/
    margin-top:.125rem;
    left: 50%;
    transform: translateX(-50%);
    
}




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

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

.navbar {
	padding: 0;
}



.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-header .bs-menu__close .btn{
    color: var(--lv1-txt-color);
	background: var(--lv1-bg-color);
	font-size: var(--lv1-size);
}
.bs-menu__lv1 {
	white-space: normal;
	color: var(--lv1-color);
	background: var(--lv1-bg);
	font-size: var(--lv1-size);
	padding: .75rem;
	font-weight:var(--font-bold);
}

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


/* bs-menu__lv2 */

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

.bs-menu__lv2:hover,
.dropdown.show > .bs-menu__lv2 {
	background: var(--lv2-hover-bg);
	color: var(--lv2-hover-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);
	text-decoration:underline !important;
}


/* dropdown*/
.dropdown-menu{
    padding:0;
}
.dropleft .dropdown-toggle::before {
	content: none;
}
.dropdown-toggle::after,
.dropright .dropdown-toggle::after,
.dropleft .dropdown-toggle::after {
	display:none;

}

.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);
}
.navbar-toggler,
.btn-cart,
.btn-login,
.btn-search{
	position: relative;
	color: var(--body-bg);
	background: var(--icon-header-bg);
	border-radius: 5rem;
	height: 3rem;
	min-width: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight:var(--font-bold);
}

.navbar-toggler:hover,
.btn-cart:hover,
.btn-login:hover,
.btn-search:hover{
	background: var(--primary-hover-color);
	color: var(--icon-header-hover-color);
	border-color: var(--primary-hover-color);
}




/***********************************
   2. HEADER > social media
************************************/

/*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-search__bar .form-control,
.bs-search__bar .form-control:focus{
	border: none;
	background: var(--header-search-bg);
	padding-left: .5rem;
	padding-right: 0;
}

.bs-header-search .btn {
	box-shadow: 2px 0px var(--lv1-txt-color) inset;
}


/* Boton login activado*/

.show>.btn-primary.dropdown-toggle {
	background: var(--lv1-txt-color);
}
.navbar-collapse{
    --max-w: 360px;
    background:rgba(0,0,0,0.5);
    display:grid;
    grid-template-columns: minmax(auto,var(--max-w)) auto;
    grid-template-rows: 3rem 100%;
    padding-bottom:3rem;
    z-index:7000;
}

.navbar__close{
    grid-column: 1/2;
    width:100%;
    height:100%;
    border: none;
    background: var(--header-navbar-mobile-bg-color);
}
.navbar__menu-mobile{
    grid-column:1/2;
    grid-row:2/3;
    height:100%;
    background: var(--header-navbar-mobile-bg-color);
    display: flex;
    flex-direction: column;
}
.navbar__menu-desktop{
    display:none;
}
.menu__group{
    position:static !important;
    transform:none !important;
}



.bs-header-top {
	background: var(--header-top-bg-color, var(--secondary-color));
	color: var(--header-top-txt-color, var(--primary-contrast));
	text-align:right;
	display:none;
}
.bs-header-top .btn{
    color:var(--header-top-txt-color, var(--primary-contrast));
    text-transform:capitalize;
    border-radius:0;
    padding: 0rem .5rem;
    margin: .25rem 0;
    font-size:0.7rem;
    font-weight:var(--font-bold);
}
.bs-header-top .btn:hover{
    text-decoration:underline;
}




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

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

.bs-grid-header__menu {
	grid-area: menu;
}

.bs-grid-header__cart {
	grid-area: cart;
}

.bs-grid-header__login {
	grid-area: login;
	display:none;
}
.bs-grid-header__login .dropdown-menu{
    border-radius:var(--default-border-radius);   
}
.bs-grid-header__search {
	grid-area: search;
	height:3rem;
	border:2px solid var(--header-search-border,var(--primary-color));
	background: var(--header-search-bg, var(--element-bg));
	border-radius:var(--btn-border-radius);
	display:none;
	margin:0 1rem;
    padding: 2px;
}
.bs-grid-header__search .input-group{
    height:100%;
    display:flex;
}

.bs-search__bar, .bs-grid-header__search .form-control{
    background:var(--header-search-bg); 
}

 .bs-grid-header {
	display: grid;
	align-items: center;
	column-gap:.5rem;
	grid-template-columns: var(--grid-header-mobile);
	background:     var(--header-bg);
    border-radius:  var(--header-border-radius);
    padding:.25rem 1rem;
    margin-bottom:1rem;
    margin-top:1rem;
}
.bs-sticky-header .bs-grid-header{
    box-shadow: 0px 2px 10px -4px rgba(0, 0, 0, 0.75);
    top:0;
    margin-top:.25rem;
}
.bs-menu__show-all{
        font-weight: var(--font-bold);
    }

@media screen and (min-width:992px){
    .bs-header-top{
        display:block;
    }
    /* lv2 >= mobile */
    .navbar__menu-mobile .menu__group{
        display:none;
    }
    .navbar__menu-mobile .toggle__icon{
        transform:rotate(-90deg);
    }
    .navbar-toggler{
        color: var(--body-bg);
        border: 2px solid var(--primary-color);
        border-radius:var(--btn-border-radius);
        background-color: var(--primary-color);
    }
    .navbar-toggler i{
        width:1.5rem;
    }
    .navbar-toggler::after{
        content:var(--menu-toggler-txt,"Menú");
        margin-left:.5rem;
    }
    /*menu-desktop*/ 
    .bs-grid-header{
        grid-template-columns: var(--grid-header-desktop);
        padding-left:2rem;
        padding-right:2rem;
    }
    .bs-grid-header__logo{
	    text-align: left;
	    margin-right:2rem;
    }
    .bs-grid-header__login {
	    display:flex;
    }
    .bs-grid-header__search{
        display:block;
    }
    .navbar__menu-desktop{
        --menu-columns: 3;
        --item-w: 200px;
        align-self: start;
        grid-column:2/3;
        grid-row:2/3;
        max-width: calc(var(--menu-columns) * var(--item-w));
        width:100%;
        justify-self: start;
        background: var(--header-navbar-mobile-bg-color);
        display: flex;
        flex-direction: column;
        height:100%;
    }
    
    .navbar__menu-desktop__group{
        column-count: var(--menu-columns);
        column-gap: 0px;
        column-fill:balance;
        height:auto;
        padding-bottom:4rem;
    }
    .navbar__menu-desktop__group .menu__group{
        display: inline-block;
        width:100%;
        page-break-inside: avoid;
    }
    .navbar__menu-desktop__group .menu__group .dropdown-menu{
        border:none;
        position:static;
        display:block;
        padding:0;
    }
    .navbar__menu-desktop .bs-menu__lv2{
        color:inherit;
        background:inherit;
    }
    .navbar__menu-desktop .bs-menu__lv2:hover{
        text-decoration:underline;
    }
    .navbar__menu-desktop .navbar__menu-desktop__lv2-titles .bs-menu__lv2,
    .navbar__menu-desktop .navbar__menu-desktop__lv2-titles .bs-menu__lv2:hover{
        color:var(--primary-color);
        font-weight: var(--font-bold);
        font-size:1rem;
        padding-bottom:.25rem;
        text-decoration:none;
    }
    
    .navbar__menu-desktop__group .bs-menu__lv3{
        padding: .25rem 1rem;
    }
    .navbar__menu-desktop__group .menu__group .dropdown-toggle i{
        display:none;
    } 
    .navbar__menu-desktop:empty{
        display:none;
    }
    .navbar__menu-desktop__menu-title{
        width:100%;
        padding: 0rem 1rem;
        background: var(--primary-color);
        color:var(--primary-contrast);
        display:flex;
        justify-content:space-between;
        align-items:center;
        height:4rem;
        font-size:1rem;
        font-weight:var(--font-bold);
    }
    .navbar__menu-desktop__menu-title__link{
        background: var(--primary-color);
        color:var(--primary-contrast);
        border: var(--btn-border) var(--primary-contrast);
        font-size: 0.8rem;
        padding:.25rem .5rem;
        border-radius: var(--btn-border-radius);
    }
    .navbar__menu-desktop__menu-title__link:hover{
        color: var(--primary-color);
        background:var(--primary-contrast);
    }
}
.scroll-menu{
    border-top:1px solid #e9ecef;
    height: 100%;
    overflow-y: scroll;
}
@media screen and (min-width:1200px){
    .navbar__menu-desktop{
        --menu-columns: 4;
    }
}


/* animation */ 

.navbar-collapse.collapse,
.navbar-collapse.collapsing,
.navbar-collapse.collapse.show{
    position:fixed;
    height:100vh;
    width:0;
    top:0;
    left:0;
    transition:width .5s ease;
    overflow:hidden;
}

.navbar-collapse.collapse.show{
    width:100vw;
}


/*******************************+
 CARRO DESPLEGABLE
********************************/
[data-bs="cart.dropdown"]{
    position:fixed;
    height:100vh;
    bottom:0;
    z-index:9000;
}