/***************************
    2. HEADER > colores menu
****************************/
:root{
                          /*|-------------------------------|-------------------|-----------------------|-----------------------|--------------------|*/
    --grid-header-mobile:   [logo] auto                     [login] min-content [cart] min-content      [menu] min-content;
    --grid-header-desktop:  [logo] var(--logo-width,200px)  [menu] auto         [search] min-content    [login] min-content     [cart] min-content;
}

.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{
    transition:all .5s ease;
    position:relative;
    z-index: 1000;
    padding-top:.125rem;
    padding-bottom:.125rem;
    
}
.bs-header,
.bs-header.bs-sticky-header{
    background: var(--header-bg);
}
.special-header .bs-header{
    background: var(--header-bg-home, var(--header-bg));
}
.special-header .bs-header.bs-sticky-header{
    background:transparent;
}
.bs-header{
    transition: backdrop-filter 1s ease;
    backdrop-filter: blur(0);
}
.bs-header.bs-sticky-header{
    backdrop-filter: blur(0.5rem);
    
}
.special-header .bs-header.bs-sticky-header::before{
    opacity:1;
    transition:1s all ease;
}
.special-header .bs-header::before{
    position:absolute;
    content:"";
    display:block;
    width:100%;
    top:0;
    bottom:0;
    z-index:-1;
    opacity:0;
    background: var(--header-bg);
}

.special-header{
  position:relative;
}
.special-header + .bs-main{
    margin-top:0 !important;
}
.special-header .bs-header{
    position:absolute;
    width:100%;
    top:0;
    z-index:1000;
}
.special-header [data-bs='slider']{
   top:0;
}

/* dropdown menu */ 
.bs-header .dropdown-menu {
	border-radius: var(--dropdown-menu-border-radius);
	padding:2px;
}

.bs-header .bs-menu__lv2,
.bs-header .bs-menu__lv3{
    border-radius: var(--dropdown-menu-border-radius);
}

.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-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-txt-color);
	background: var(--lv1-bg-color);
	font-size: var(--lv1-size);
	padding: .75rem;
	font-weight:var(--font-bold);
	text-transform: var(--lv1-transform);
}

.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);
	text-transform: var(--lv2-transform);
}

.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);
	text-transform: var(--lv3-transform);
}

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


/* dropdown*/

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

.cart-items {
	position: absolute;
	right: -.25rem;
	top: -.25rem;
	display:flex;
	justify-content:center;
	align-items:center;
	min-width: 1.5rem;
	height:1.5rem;
	background: var(--cart-items-bg,var(--primary-hover-color));
	color: var(--cart-items-color,var(--primary-hover-contrast));
	border-radius: 5rem;
	font-size: .8rem;
	
	padding: .125rem .375rem;
	border: var(--cart-items-border, 2px solid var(--header-bg-color));
}
.navbar-toggler,
.btn-cart,
.btn-login,
.btn-search{
	position: relative;
	color: var(--icon-header-color);
	background: var(--icon-header-bg);
	border-radius: 5rem;
	height: 3rem;
	min-width: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.navbar-toggler .header-icon__svg,
.btn-cart .header-icon__svg,
.btn-login .header-icon__svg,
.btn-search .header-icon__svg{
    height:1.6rem;
    width:1.6rem;
    fill: var(--icon-header-color);
}
.navbar-toggler:hover,
.btn-cart:hover,
.btn-login:hover,
.btn-search:hover{
	background: var(--icon-header-hover-bg);
	color: var(--icon-header-hover-color);
}
.navbar-toggler:hover .header-icon__svg,
.btn-cart:hover .header-icon__svg,
.btn-login:hover .header-icon__svg,
.btn-search:hover .header-icon__svg{
    fill:  var(--icon-header-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-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 .form-control::placeholder {
	color:white;
}
.bs-header-search .form-control:focus{
    background:white;
    padding-left: .5rem;
}

.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-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: left;

}
.bs-grid-header__logo img{
    width: var(--logo-width);
    height: var(--logo-height);
}

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

.container-search{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:var(--secondary-color);
    z-index:200;
    display:none;
    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: var(--grid-header-desktop);
	}
	.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;
	    background:var(--header-navbar-bg-color);
	}
}

@media screen and (min-width: 768px) {
	 .bs-grid-header-md {
		grid-template-columns: var(--grid-header-desktop);
	}
	.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;
	    background:var(--header-navbar-bg-color);
	}
}

@media screen and (min-width: 992px) {
	 .bs-grid-header-lg {
		grid-template-columns: var(--grid-header-desktop);
	}
	.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;
	    background:var(--header-navbar-bg-color);
	}
}

@media screen and (min-width: 1200px) {
	 .bs-grid-header-xl {
		grid-template-columns: var(--grid-header-desktop);
	}
	.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;
		background:var(--header-navbar-bg-color);
	}
}

/*******************************+
 CARRO DESPLEGABLE
********************************/
[data-bs="cart.dropdown"]{
    position:fixed;
    height:100vh;
    bottom:0;
    z-index:9000;
}
@media screen and (min-width: 1200px){
    .bs-grid-header-xl{
        position:relative;
    }
   
    .navbar, .navbar-nav, .nav-item.with__lv3{
        position:static
    }
    
    .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;
    }
    .nav-item.with__lv3 > .dropdown-menu.show .bs-menu__lv2{
        align-self: start;
        font-weight: var(--font-bold);
        font-size:1rem;
    }
    .nav-item.with__lv3 > .dropdown-menu.show .bs-menu__lv2:hover{
        background:none;
        color:inherit;
        cursor:default;
    }
    .bs-menu__toggler-icon{
        margin-left:.5rem;
        width:1rem;
        height:1rem;
    }
    .nav-item.with__lv3 > .dropdown-menu.show .bs-menu__toggler-icon{
        display:none;
        
    }
    
    .nav-item > .dropdown-menu.show .dropdown-menu{
        display:block;
        position:relative;
        border:0 none
    }
}