/******************************************************
    I M P O R T A N T E
    Modificar cualquier cosa dentro de este archivo puede hacer que la cabecera deje de funcionar
******************************************************/


/*******************************+
	CARRO DESPLEGABLE
********************************/
[data-bs="cart.dropdown"]{
    position:fixed;
    height:100vh;
    bottom:0;
    z-index:9000;
	color:var(--cart-color, initial);
}
.containerItemCart{
	background:var(--cart-item-bg,var(--element-bg));
	border-radius:var(--cart-item-border-radius,var(--default-border-radius));
}
.detailItemCart .bs-img-square img{
	background:var(--cart-img-bg, white);
	border-radius:var(--cart-img-border-radius,var(--default-border-radius));
}
.detailItemCart .bs-discount{
	border-radius:var(--default-border-radius);
	margin:0;
}
.detailItemCart [data-bs="cart.item.oldPrice"]{
	font-size:.8rem;
}
.detailItemCart [data-bs="cart.item.unitPrice"]{
	font-weight:var(--font-bold);
	color:var(--cart-price-color, var(--primary-color));
}

/************************
	HEADER
*************************/

:root{
--grid-header-mobile:	[menu] min-content	[logo] auto	[search] min-content	[cart] min-content;     
--grid-header-desktop:	[logo] minmax(var(--logo-height, 80px),var(--logo-width,200px))[menu] auto;
--header-margin-y: 4px;
}

/* header top ------------------------- */

.bs-header-top {
	display:none;
	background: var(--header-top-bg);
	color: var(--header-top-color);
}
.btn-cart{
	position:relative;
	border-radius:10rem;
	height:1.5rem;
	width:1.5rem;
	align-items:center;
	justify-content:center;
	display:flex;
}

.cart-items {
	top:-8px;
	right:-15px;
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
	min-width: 1.4rem;
	height: 1.4rem;
	border-radius: 1.5rem;
	font-size: 60%;
	padding: 4px;
}
.cart-items:empty{display:none}
.bs-header-top .btn-cart{
		background:var(--cart-btn-bg);
		color:var(--cart-btn-color);
}
.bs-header-top .cart-items{
	background: var(--cart-items-bg,var(--primary-hover-color));
	color: var(--cart-items-color,var(--primary-hover-contrast));
	border: var(--cart-items-border, 2px solid var(--header-top-bg));
}
.bs-header-top .btn-cart:hover .cart-items{
	border-color: var(--cart-btn-bg);
}
.btn-header-social{
	color: var(--primary-contrast);
	border-radius:10rem;
	height:1.5rem;
	width:1.5rem;
	align-items:center;
	justify-content:center;
	display:flex;
	
}
.btn-header-social:hover{
	background: var(--primary-color);
	color: var(--primary-contrast);
	text-decoration:none;
}
.btn-header-outline{
	color:white;
}
.btn-header-outline:hover{
outline: 2px solid white;
}



/* buscador */
.bs-search:not(.container) {
	margin-top:8px;
	margin-bottom:8px;
}
.bs-search .form-control{
	background:var(--search-input-bg, #fff);
	border:none;
	height:1.75em;
	padding-top: 0;
	padding-bottom: 0;
}
.bs-search .btn{
	background:var(--search-btn-bg, white);
	color:var(--search-btn-color, var(--header-top-bg));
	border:none;
	position:relative;
	height:1.75em;
	padding-top: 0;
	padding-bottom: 0;
}
.bs-search .btn:hover,
.bs-search .btn:focus,
.bs-search .btn:active{
	background:var(--search-btn-hover-bg, white);
	color:var(--search-btn-hover-color, var(--header-top-bg));
}
.bs-search .btn:before{
	position:absolute;
	left:0;
	top:4px;
	bottom:4px;
	width:2px;
	content:" ";
	display:block;
	background:var(--search-decoration-bg, var(--element-bg));
}
.container-search{
background:var(--header-top-bg);
	color:var(--header-top-color);
    position:absolute;
    top:calc(var(--header-margin-y,0) * -1);
    bottom:calc(var(--header-margin-y,0) * -1);
    left:0;
    right:0;
    z-index:200;
    display:none;
    display:flex;
    align-items:center;
}
.container-search.hide{display:none;}

/* header down ------------------------*/

.bs-sticky-header {	/*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);
    transition:all .5s ease;
    position:relative;   
}
.btn-mobile-header{
	height:2rem;
	min-width:2rem;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:100px;
	padding:4px;
	background:var(--mobile-btn-bg);
	color:var(--mobile-btn-color);
}
.btn-mobile-header:hover, .btn-mobile-header:active {
	background:var(--mobile-btn-hover-bg);
	color:var(--mobile-btn-hover-color);
}
.bs-header .cart-items{
	background: var(---mobile-cart-items-bg,var(--primary-hover-color));
	color: var(--mobile-cart-items-color,var(--primary-hover-contrast));
	border: var(--mobile-cart-items-border, 2px solid var(--header-bg));
}

.bs-header .bs-menu__close .btn{
    color: var(--lv1-color);
	background: var(--lv1-bg);
	font-size: var(--lv1-size);
}





/* header menu ------------------------------------------- */ 
.navbar {
	padding: 0;
}
.bs-header-navbar {
	background: var(--header-navbar-bg-color);
}
.navbar-toggler {
	margin: .25rem 0;
	color: inherit;
}
.bs-header .dropdown-menu {
	border-radius: var(--dropdown-menu-border-radius, var(--default-border-radius));
}
.bs-header .dropdown-menu .dropdown-menu{
	border-radius:0;
	border-left:0;
	border-right:0;
}
.bs-menu__lv1,
.bs-menu__lv2,
.bs-menu__lv3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: all .25s ease;
}
.bs-menu__lv2,
.bs-menu__lv3{
    border-radius: var(--dropdown-menu-border-radius);
}

/* .bs-menu__lv1 -----------------------------------------------------*/
.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 {
	white-space: normal;
	color: var(--lv1-color);
	background: var(--lv1-bg);
	font-size: var(--lv1-size);
	padding: var(--lv1-padding, 6px 10px);
	font-weight:var(--lv1-font, var(--font-regular));
	text-transform: var(--lv1-transform);
}
.bs-menu__lv1:hover,
.show>.bs-menu__lv1 {
	color: var( --lv1-hover-color);
	background: var( --lv1-hover-bg);
}


/* bs-menu__lv2 -------------------------------------------*/

.bs-menu__lv2,
.bs-header .dropdown-item {
	padding: var(--lv2-padding, 4px 10px);
	color: var(--lv2-color);
	background: var(--lv2-bg);
	font-size: var(--lv2-size);
	text-transform: var(--lv2-transform);
}

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


/* bs-menu__lv3 */

.bs-menu__lv3{
	padding: var(--lv3-padding, 6px 10px);
	color: var(--lv3-color);
	font-size: var(--lv3-size);
	background: var(--lv3-bg);
	text-transform: var(--lv3-transform);
}

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


/* dropdown*/

.dropleft .dropdown-toggle::before {
	content: none;
}
.dropdown-toggle::after,
.dropright .dropdown-toggle::after,
.dropleft .dropdown-toggle::after {
	display:none;
}



.btn-login{
	position: relative;
	color: var(--icon-header-color, white);
	background: var(--icon-header-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn-login:hover{
	outline: 2px solid var(--icon-header-color, white);
}




/*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;
}
/*el menu usa el 100% del ancho de su padre*/
.bs-nav-menu {
	width: 100%;
}




/* Boton login activado*/
.show>.btn-primary.dropdown-toggle {
	background: var(--lv1-txt-color);
}

.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;
	margin-right:10px;
	background: var(--header-navbar-mobile-bg, var(--header-bg, white));
}



.bs-grid-header,
.bs-grid-header-sm,
.bs-grid-header-md,
.bs-grid-header-lg,
.bs-grid-header-xl {
	display: grid;
	align-items: center;
	column-gap:.5rem;
}
.bs-grid-header__mobile-hide{
    display:none;
}

.bs-grid-header__logo{
	grid-area: logo;
	text-align: var(--header-logo-align-mobile, center);
	margin-top:var(--header-margin-y);
	margin-bottom:var(--header-margin-y);

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

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

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

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



 .bs-grid-header,
 .bs-grid-header-sm,
 .bs-grid-header-md,
 .bs-grid-header-lg,
 .bs-grid-header-xl {
	grid-template-columns: var(--grid-header-mobile);
}
.nav-item.show-all.show .dropdown-menu__lv3{
	display:block;
}
.nav-item.show-all.show .bs-menu__lv2 i{
	display:none;
}
@media screen and (min-width: 576px) {
	 .bs-grid-header-sm {
	 	position:relative;
		grid-template-columns: var(--grid-header-desktop);
	}
	.bs-grid-header-sm .bs-grid-header__logo {
		text-align: var(--header-logo-align);
	}
	.bs-grid-header-sm .navbar,
	.bs-grid-header-sm .navbar-nav, 
	.bs-grid-header-sm .nav-item.with__lv3{
        position:static;
		height:100%;
    }


	.navbar-expand-sm {
		flex-flow: row wrap;
	}
	.navbar-expand-sm .nav-item-mobile{
	display:none;
	}
	.navbar-expand-sm .bs-header-search {
		max-width: 300px;
	}
	.navbar-expand-sm .dropdown-menu {
		z-index: 1000;
	}

	.navbar-expand-sm .bs-menu__lv1 {
		height: 100%;
	}
	.navbar-expand-sm .bs-menu__lv2,
	.navbar-expand-sm .bs-menu__lv3 {
		white-space: nowrap;
	}
	.navbar-expand-sm .nav-item.with__lv3 > .dropdown-menu.show{
        display:grid;
        grid-template-columns: repeat(var(--menu-columns, 5),1fr);
        left:1rem;
        right:1rem;
        min-width:auto;
    }
	.navbar-expand-sm .nav-item.with__lv3 > .dropdown-menu.show .bs-menu__lv2{
        align-self: start;
        font-weight: var(--font-bold);
        font-size:1rem;
    }
	.navbar-expand-sm .nav-item.with__lv3 > .dropdown-menu.show .bs-menu__lv2:hover{
        background:none;
        color:inherit;
        cursor:default;
    }
	
	.navbar-expand-sm .nav-item > .dropdown-menu.show .dropdown-menu{
        display:block;
        position:relative;
        border:0 none
    }
	.navbar-expand-sm .nav-item.with__lv3 > .dropdown-menu.show i{
		/*icono*/
		display:none;   
    }
	.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;
		background:var(--header-navbar-bg-color);
	}
}
@media screen and (min-width: 768px) {
	 .bs-grid-header-md {
	 	position:relative;
		grid-template-columns: var(--grid-header-desktop);
	}
	.bs-grid-header-md .bs-grid-header__logo {
		text-align: var(--header-logo-align);
	}
	.bs-grid-header-md .navbar,
	.bs-grid-header-md .navbar-nav, 
	.bs-grid-header-md .nav-item.with__lv3{
        position:static;
		height:100%;
    }


	.navbar-expand-md {
		flex-flow: row wrap;
	}
	.navbar-expand-md .nav-item-mobile{
	display:none;
	}
	.navbar-expand-md .bs-header-search {
		max-width: 300px;
	}
	.navbar-expand-md .dropdown-menu {
		z-index: 1000;
	}

	.navbar-expand-md .bs-menu__lv1 {
		height: 100%;
	}
	.navbar-expand-md .bs-menu__lv2,
	.navbar-expand-md .bs-menu__lv3 {
		white-space: nowrap;
	}
	.navbar-expand-md .nav-item.with__lv3 > .dropdown-menu.show{
        display:grid;
        grid-template-columns: repeat(var(--menu-columns, 5),1fr);
        left:1rem;
        right:1rem;
        min-width:auto;
    }
	.navbar-expand-md .nav-item.with__lv3 > .dropdown-menu.show .bs-menu__lv2{
        align-self: start;
        font-weight: var(--font-bold);
        font-size:1rem;
    }
	.navbar-expand-md .nav-item.with__lv3 > .dropdown-menu.show .bs-menu__lv2:hover{
        background:none;
        color:inherit;
        cursor:default;
    }
	
	.navbar-expand-md .nav-item > .dropdown-menu.show .dropdown-menu{
        display:block;
        position:relative;
        border:0 none
    }
	.navbar-expand-md .nav-item.with__lv3 > .dropdown-menu.show i{
		/*icono*/
		display:none;   
    }
	.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;
		background:var(--header-navbar-bg-color);
	}
}
@media screen and (min-width: 992px) {
	 .bs-grid-header-lg {
	 	position:relative;
		grid-template-columns: var(--grid-header-desktop);
	}
	.bs-grid-header-lg .bs-grid-header__logo {
		text-align: var(--header-logo-align);
	}
	.bs-grid-header-lg .navbar,
	.bs-grid-header-lg .navbar-nav, 
	.bs-grid-header-lg .nav-item.with__lv3{
        position:static;
		height:100%;
		display:flex;
		align-items:stretch;
    }


	.navbar-expand-lg {
		flex-flow: row wrap;
	}
	.navbar-expand-lg .nav-item-mobile{
	display:none;
	}
	.navbar-expand-lg .bs-header-search {
		max-width: 300px;
	}
	.navbar-expand-lg .dropdown-menu {
		z-index: 1000;
	}

	.navbar-expand-lg .bs-menu__lv1 {
		height: 100%;
	}
	.navbar-expand-lg .nav-item.show,
	.navbar-expand-lg .nav-item:hover{
		box-shadow:inset 0 -4px 0 0 var(--primary-color);
	}
	.navbar-expand-lg .bs-menu__lv2,
	.navbar-expand-lg .bs-menu__lv3 {
		white-space: nowrap;
	}
	.navbar-expand-lg .nav-item.with__lv3 > .dropdown-menu.show{
        display:grid;
        grid-template-columns: repeat(var(--menu-columns, 5),1fr);
        left:1rem;
        right:1rem;
        min-width:auto;
    }
	.navbar-expand-lg .nav-item.with__lv3 > .dropdown-menu.show .bs-menu__lv2{
        align-self: start;
        font-weight: var(--font-bold);
        font-size:1rem;
    }
	.navbar-expand-lg .nav-item.with__lv3 > .dropdown-menu.show .bs-menu__lv2:hover{
        background:none;
        color:inherit;
        cursor:default;
    }
	
	.navbar-expand-lg .nav-item > .dropdown-menu.show .dropdown-menu{
        display:block;
        position:relative;
        border:0 none
    }
	.navbar-expand-lg .nav-item.with__lv3 > .dropdown-menu.show i{
		/*icono*/
		display:none;   
    }
	.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;
		background:var(--header-navbar-bg-color);
	}
}
@media screen and (min-width: 1200px) {
	 .bs-grid-header-xl {
	 	position:relative;
		grid-template-columns: var(--grid-header-desktop);
	}
	.bs-grid-header-xl .bs-grid-header__logo {
		text-align: var(--header-logo-align);
	}
	.bs-grid-header-xl .navbar,
	.bs-grid-header-xl .navbar-nav, 
	.bs-grid-header-xl .nav-item.with__lv3{
        position:static;
		height:100%;
    }


	.navbar-expand-xl {
		flex-flow: row wrap;
	}
	.navbar-expand-xl .nav-item-mobile{
	display:none;
	}
	.navbar-expand-xl .bs-header-search {
		max-width: 300px;
	}
	.navbar-expand-xl .dropdown-menu {
		z-index: 1000;
	}

	.navbar-expand-xl .bs-menu__lv1 {
		height: 100%;
	}
	.navbar-expand-xl .bs-menu__lv2,
	.navbar-expand-xl .bs-menu__lv3 {
		white-space: nowrap;
	}
	.navbar-expand-xl .nav-item.with__lv3 > .dropdown-menu.show{
        display:grid;
        grid-template-columns: repeat(var(--menu-columns, 5),1fr);
        left:1rem;
        right:1rem;
        min-width:auto;
    }
	.navbar-expand-xl .nav-item.with__lv3 > .dropdown-menu.show .bs-menu__lv2{
        align-self: start;
        font-weight: var(--font-bold);
        font-size:1rem;
    }
	.navbar-expand-xl .nav-item.with__lv3 > .dropdown-menu.show .bs-menu__lv2:hover{
        background:none;
        color:inherit;
        cursor:default;
    }
	
	.navbar-expand-xl .nav-item > .dropdown-menu.show .dropdown-menu{
        display:block;
        position:relative;
        border:0 none
    }
	.navbar-expand-xl .nav-item.with__lv3 > .dropdown-menu.show i{
		/*icono*/
		display:none;   
    }
	.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;
		background:var(--header-navbar-bg-color);
	}
}
.bs-menu-hightlight{
	background: var(--menu-hightlight-bg);
	color: var(--menu-hightlight-color);
}
.bs-menu-hightlight:hover{
	background: var(--menu-hightlight-hover-bg);
	color: var(--menu-hightlight-hover-color);
}