/*Cambiar iconos de carrito: f07a f290 f847 f49c f49d*/
.fa-shopping-cart:before { content: "\f07a"!important; font-weight:var(--weight-fa);}

/*Cambiar iconos de carrito: f007 f0c0 f2bd f508 f582 f406 f7bd*/
.fa-user:before { content: "\f406"!important;  font-weight:var(--weight-fa);}
.fa-search:before{font-weight:var(--weight-fa);}


header {
    border-bottom: 1px solid var(--primary);
    background: linear-gradient(to top, var(--light2), #fff);
}

/* PreHeader */
header .preHeader { background: #f0f0f0;display:none; }
header .preHeader .preHeaderCont { padding: 4px 8px; display: flex; justify-content: space-between; align-items: center; font-weight: normal; font-size: 12px; line-height: 140%; max-width: var(--max-width); margin: 0 auto; }
header .preHeader .preHeaderCont .phcLeft { }
header .preHeader .preHeaderCont .phcLeft p { text-transform: uppercase; font-weight: var(--bold1); color: #333; font-size: 15px; }
header .preHeader .preHeaderCont .phcRight { flex-shrink: 0; margin-left: 12px; display: flex; flex-flow: row wrap; align-items: center; }


/*Header*/
header .header .headerCont .hcLeft{position:relative;}
header .header { position: relative; max-width: 100%; }
header .header .headerCont { padding:12px; display: grid; justify-content: space-between; align-items: center; max-width: var(--max-width); margin: 0 auto;   grid-template-columns:1fr auto 1fr;}
header .header .btnmenu { padding: 0; display: none; align-items: initial; position: relative; z-index: 6; transform: translateX(0); background-color: transparent; transition: all 300ms ease; }
header .header .btnmenu:first-child { margin-right: 12px}
header .header .btnmenu:last-child { margin-left: 12px;}
header .header .fndmenu { display: block; width: 0%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 2; transition: opacity 300ms ease; opacity: 0; padding: 0; }
header .header .headerCont .hcLeft { margin-right: 20px; max-width: 100%; flex-shrink: 0; display: flex; align-items: center;}
header .header .headerCont .hcLeft .hcLogo { /*width: 100%;*/ }
header .header .headerCont .hcLeft .hcLogo a { }
header .header .hcLogo a img { display: block; max-width: 220px; width: 100%; }
header .header .headerCont .hcCenter { display: flex; justify-content: center; width: 100%; }

/* Carrito */
#cart {margin-left: 30px;font-weight: var(--bold1); font-size: 16px; line-height: 140%; flex-shrink: 0;position: relative;}
#cart > a { text-decoration: none; display: flex; line-height: 28px; border: 0;  overflow: visible; align-items: center; position: relative; color:inherit;  }
#cart > a i { font-size: 20px; width: 28px; height: 28px; text-align: center; display: inline-flex; justify-content: center; align-items: center; color:var(--primary); border-radius: var(--radius1);}
#cart > a > span { padding: 0 0 0 4px; }
#cart > a > span .cant:before{content:'(';}
#cart > a > span .cant:after{content:')';}
#cart > a > span span:last-child{display:none;}
#cart .cart-prod-list:after{right:26px}

/* Usuario */
#user { margin-left: 20px; font-weight: var(--bold1); font-size: 16px; line-height: 140%; flex-shrink: 0; position: relative; }
#user > a { text-decoration: none; display: flex; line-height: 28px; border: 0; overflow: hidden; align-items: center; color:inherit; }
#user a i:not(#btLogout) { font-size: 22px; width: 28px; height: 28px;  text-align: center; display: inline-flex; justify-content: center; align-items: center;  color:var(--primary); border-radius: var(--radius1);  display:none;}
#user a #btLogout { margin: 4px 16px 4px 0; font-size: 12px; }
#user a > span {  padding: 0;  max-width: 140px; text-overflow: ellipsis; display: block; white-space: nowrap; overflow: hidden; }
#login_box:after{right:26px;}

.langSelector{ margin-left:30px;}

/* Buscador */
.searchCont{min-width:240px; width:100%;}
#search .searchBar { position: relative;}
#search .searchBar input {width: 100%;font-size: 15px; line-height: 24px; margin: 0; background:#eee; color:#333; border:0; padding:8px 8px 8px 42px; border-radius: 4px;}
#search .searchBar input:focus { outline: none; border-color: #b1c5ff; }
#search .searchBar a { display: block; width:22px; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #666; font-size: 20px;text-decoration:none; }
#search .searchBar a i{font-weight:300; color:#333;}
#searchbtn a i { font-size: 20px; width: 32px;height: 32px;  }

/* Menu */
header .menu { padding:8px 0;}
header .menu .menuCont{justify-content:center;}
.mcDestacado{width:auto;}
.mcPrincipal .navTrigger{display:none;}
.mcPrincipal .cd-dropdown-trigger{margin:0;}
.mcDestacado ul li{margin:0 4px;}

.navTrigger i{background:currentColor;}

/*################
##### 1 0 2 3 ####
################*/
@media screen and (min-width: 1024px) {

   

}

@media screen and (max-width: 1023px) {
    
    header .header .hcLogo a img{max-width:200px;}
    #user{margin-left:12px;}
    #cart{margin-left:8px;}
    .langSelector{margin-left:16px;}
    #user a > span { display: none; }
    #cart a > span { padding: 0; margin: 0; }
    #cart > a i{width:32px; height:32px;font-size:20px; } 
    #user a i:not(#btLogout){width:32px; height:32px;font-size:20px; display:flex; } 
    .searchCont{min-width:auto;}
}

/*################
#####  9 6 0  ####
################*/
@media screen and (max-width: 960px) {
 
}

/*################
#####  7 6 8  ####
################*/
@media screen and (min-width: 769px) {
    .cd-dropdown{top:calc(100% + 8px);}
    header .header .hcLogo a img {
        max-width: 180px;
    }
    
}

@media screen and (max-width: 768px) {
       header .header .btnmenu{display:flex;}
       header .header .headerCont .hcRight .langSelector{display:none;}
       .langSelector{margin:0;}
}

/*################
#####  6 4 0  ####
################*/
@media screen and (min-width: 640px) {
        
}

@media screen and (max-width: 640px) {
    header .header .hcLogo a img{max-width:140px;}

}

/*################
#####  4 8 0  ####
################*/
@media screen and (max-width: 480px) {
    header .header .headerCont{padding:8px 12px;}
    header .header .headerCont .hcLeft{margin-right:12px;}

}