/***************************
    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{
    position:relative;
    background:var(--header-bg-color);
    padding-top:.125rem;
    padding-bottom:.125rem;
}
.bs-header .dropdown-menu {
	border-radius: var(--dropdown-menu-border-radius);
	padding: 0;
}
.bs-header .dropdown-menu >*:first-child,
.bs-header .dropdown-menu >*:first-child.dropdown__lv2 .bs-menu__lv2{
    border-radius: calc(var(--dropdown-menu-border-radius) - 2px) calc(var(--dropdown-menu-border-radius) - 2px) 0 0 ;
}

.bs-header .dropdown-menu >*:last-child,
.bs-header .dropdown-menu >*:last-child.dropdown__lv2 .bs-menu__lv2{
    border-radius: 0 0 calc(var(--dropdown-menu-border-radius) - 2px) calc(var(--dropdown-menu-border-radius) - 2px);
}

.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-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);
}


/* 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;
}

/* BOTONES CABECERA */ 
.navbar-toggler {
	color: var(--navbar-toggler-color, inherit);
	background: var(--navbar-toggler-bg, inherit);
	height: var(--btn-header-size,3rem);
	min-width: var(--btn-header-size,3rem);
	display: flex;
	align-items: center;
	justify-content: center;
}


.btn-cart,
.btn-login,
.btn-search{
    position: relative;
    border-radius: var(--btn-header-border-radius,5rem);
	height: var(--btn-header-size,3rem);
	min-width: var(--btn-header-size,3rem);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* BTN CART */
.btn-cart{	
	color:      var(--btn-cart-color,var(--primary-color));
	background: var(--btn-cart-bg,var(--element-bg));
}
.btn-cart:hover{
    background: var(--btn-cart-hover-bg, var(--primary-color));
	color:      var(--btn-cart-hover-color, var(--primary-contrast));
}
.cart-items {
	position: absolute;
	right: -.3rem;
	top: -.3rem;
	background: var(--cart-items-bg, var(--primary-hover-color));
	color:  var(--cart-items-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);
}

/* LOGIN */
.btn-login{	
	color:      var(--btn-login-color,var(--primary-color));
	background: var(--btn-login-bg,var(--element-bg));
}
.btn-login:hover{
    background: var(--btn-login-hover-bg, var(--primary-color));
	color:      var(--btn-login-hover-color, var(--primary-contrast));
}

/* BTN SEARCH */ 
/* el buscador funciona diferente, si estan en versión de celular no muestra el color fondo. */ 
.btn-search{	
	color:      var(--btn-search-mobile-color,var(--primary-color));
	background: var(--btn-search-mobile-bg, transparent);
}
.btn-search:hover{
	background: var(--btn-search-mobile-hover-bg, transparent);
	color:      var(--btn-search-mobile-hover-color, var(--primary-color-hover));
}
@media screen and (min-width:576px){
    .bs-grid-header-sm .invert-color-sm .btn-search{
        color:      var(--btn-search-color,var(--primary-color));
	    background: var(--btn-search-bg,var(--element-bg));
    }
    .bs-grid-header-sm .invert-color-sm .btn-search:hover{
        background: var(--btn-search-hover-bg, var(--primary-color));
	    color:      var(--btn-search-hover-color, var(--primary-contrast));
    }
}
@media screen and (min-width:768px){
    .bs-grid-header-md .btn-search{
        color:      var(--btn-search-color,var(--primary-color));
	    background: var(--btn-search-bg,var(--element-bg));
    }
    .bs-grid-header-md .btn-search:hover{
        background: var(--btn-search-hover-color, var(--primary-color));
	    color:      var(--btn-search-hover-bg, var(--primary-contrast));
    }
}
@media screen and (min-width:992px){
    .bs-grid-header-lg .btn-search{
        color:      var(--btn-search-color,var(--primary-color));
	    background: var(--btn-search-bg,var(--element-bg));
    }
    .bs-grid-header-lg .btn-search:hover{
        background: var(--btn-search-hover-color, var(--primary-color));
	    color:      var(--btn-search-hover-bg, var(--primary-contrast));
    }
}
@media screen and (min-width:1200px){
    .bs-grid-header-xl .btn-search{
        color:      var(--btn-search-color,var(--primary-color));
	    background: var(--btn-search-bg,var(--element-bg));
    }
    .bs-grid-header-xl .btn-search:hover{
        background: var(--btn-search-hover-color, var(--primary-color));
	    color:      var(--btn-search-hover-bg, var(--primary-contrast));
    }
}

/***********************************
   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-header-search {
	display: flex;
	width: 100%;
	min-width: 100px;
	background: var(--element-bg-color);
	border-radius: 50rem;
	padding: .25rem 1rem;
}

.bs-header-search .form-control {
	border: none;
	background: transparent;
	padding-left: 0;
	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.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);
}

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

 {
	color: var(--lv1-txt-color);
	background: var(--header-bg-color);
}


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

.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;
	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: [menu] min-content [logo] auto [search] min-content [cart] min-content;
}

.container-search{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:var(--search-bar-bg,var(--secondary-color));
    z-index:200;
    display:none;
    color:var(--search-bar-color, var(--secondary-contrast));
    display:flex;
    align-items:center;
    padding:.125rem 0;
}
.container-search.hide{
    display:none;
}
.btn-search-mobile{
    color:var(--secondary-contrast);
}
.btn-search-mobile:hover{
    color:var(--primary-color);
}

@media screen and (min-width: 576px) {
	 .bs-grid-header-sm {
		grid-template-columns: [logo] max-content [menu] auto [search] min-content [login] min-content [cart] min-content;
		column-gap:.5rem
	}
	.bs-grid-header-sm .bs-grid-header__mobile-hide{
        display:inherit;
    }
	.bs-grid-header-sm .bs-grid-header__logo {
		text-align: left;
	}
	.navbar-expand-sm {
		flex-flow: row wrap;
	}
	.navbar-expand-sm .bs-header-search {
		max-width: 300px;
	}
	.navbar-expand-sm .dropdown-menu {
		z-index: 1000;
	}
	.navbar-expand-sm .bs-menu__close {
		display: none;
	}
	.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__lv1 {
		height: 100%;
	}
	.navbar-expand-sm .bs-menu__lv1,
	.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;
	}
}

@media screen and (min-width: 768px) {
	 .bs-grid-header-md {
		grid-template-columns: [logo] max-content [menu] auto [search] min-content [login] min-content [cart] min-content;
		column-gap:.5rem
	}
	.bs-grid-header-md .bs-grid-header__mobile-hide{
        display:inherit;
    }
	.bs-grid-header-md .bs-grid-header__logo {
		text-align: left;
	}
	.navbar-expand-md {
		flex-flow: row wrap;
	}
	.navbar-expand-md .bs-header-search {
		max-width: 300px;
	}
	.navbar-expand-md .dropdown-menu {
		z-index: 1000;
	}
	.navbar-expand-md .bs-menu__close {
		display: none;
	}
	.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__lv1 {
		height: 100%;
	}
	.navbar-expand-md .bs-menu__lv1,
	.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;
	}
}

@media screen and (min-width: 992px) {
	 .bs-grid-header-lg {
		grid-template-columns: [logo] max-content [menu] auto [search] min-content [login] min-content [cart] min-content;
		column-gap:.5rem
	}
	.bs-grid-header-lg .bs-grid-header__mobile-hide{
        display:inherit;
    }
	.bs-grid-header-lg .bs-grid-header__logo {
		text-align: left;
	}
	.navbar-expand-lg {
		flex-flow: row wrap;
	}
	.navbar-expand-lg .bs-header-search {
		max-width: 300px;
	}
	.navbar-expand-lg .dropdown-menu {
		z-index: 1000;
	}
	.navbar-expand-lg .bs-menu__close {
		display: none;
	}
	.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__lv1 {
		height: 100%;
	}
	.navbar-expand-lg .bs-menu__lv1,
	.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;
	}
}

@media screen and (min-width: 1200px) {
	 .bs-grid-header-xl {
		grid-template-columns: [logo] max-content [menu] auto [search] min-content [login] min-content [cart] min-content;
		column-gap:.5rem
	}
	.bs-grid-header-xl .bs-grid-header__mobile-hide{
        display:inherit;
    }
	.bs-grid-header-xl .bs-grid-header__logo {
		text-align: left;
	}
	.navbar-expand-xl {
		flex-flow: row wrap;
	}
	.navbar-expand-xl .bs-header-search {
		max-width: 300px;
	}
	.navbar-expand-xl .dropdown-menu {
		z-index: 1000;
	}
	.navbar-expand-xl .bs-menu__close {
		display: none;
	}
	.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__lv1 {
		height: 100%;
	}
	.navbar-expand-xl .bs-menu__lv1,
	.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;
	}
}