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

.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 .dropdown-menu {
	border-radius: var(--dropdown-menu-border-radius);
	padding: 0;
}

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

.navbar {
	padding: 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(--body-txt-default-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(--lv1-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;
}

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

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

.btn-cart:hover,
.btn-login:hover {
	background: var(--primary-color);
	color: 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);
}

.bs-header-bottom {
	color: var(--lv1-txt-color);
	background: var(--header-bottom-bg-color);
}
@media screen and (max-width:768px) {
.bs-header-bottom {
	padding-bottom: 20px;
}
}
.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__logo {
	grid-area: logo;
	text-align: center;
}

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

.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__promo {
	grid-area: promo;
	margin: 0;
}

.bs-header-top .bs-grid-header {
	--margin: .5rem;
	grid-template-columns: [promo] auto [search] 300px [cart] min-content [login] min-content;
	grid-template-rows: 1fr;
	padding-top: var(--margin);
	padding-bottom: var(--margin);
	gap: 0 var(--margin);
}

.bs-header-bottom .bs-grid-header,
.bs-header-bottom .bs-grid-header-sm,
.bs-header-bottom .bs-grid-header-md,
.bs-header-bottom .bs-grid-header-lg,
.bs-header-bottom .bs-grid-header-xl {
	grid-template-columns: [cart] min-content [logo] auto [menu] min-content;
}