/*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: "\f2bd"!important;  font-weight:var(--weight-fa);}
.fa-search:before{font-weight:var(--weight-fa);}


header{border-bottom:1px solid rgba(0,0,0,0.1); }

/* Estilo para diseņo 1B */
/*
.tiendaPortada header{position:absolute;top:0;left:0;width:100%; z-index:2; border:0; background:none;}
*/


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


/*Menu*/
.mcPrincipal .navTrigger{display:none;}
.mcPrincipal .cd-dropdown-trigger span:before{content:'\f0c9'; font-family:'Font Awesome 6 Pro'; margin-right:12px;}

/*Header*/
header .header { position: relative; max-width: 100%; }
header .header .headerCont { padding:12px; display: flex; justify-content: space-between; align-items: center; max-width: var(--max-width); margin: 0 auto; }
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 .headerCont .hcLeft .hcLogo a img { display: block; max-width: 140px; width: 100%; }
header .header .headerCont .hcCenter { display: flex; justify-content: flex-end; 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;}

/* Usuario */
#user { margin-left: 30px; 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); }
#user a #btLogout { margin: 4px 16px 4px 0; font-size: 12px; }
#user a > span {  padding: 0 0 0 8px;  max-width: 140px; text-overflow: ellipsis; display: block; white-space: nowrap; overflow: hidden; }



/* Buscador */
#searchbtn { display: none; }
#searchbtn a { text-decoration: none; display: flex; line-height: 32px; border: 0;  overflow: hidden; align-items: center;  display: block; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);  font-size: 20px;}
#searchbtn a i {  text-align: center; display: inline-flex; justify-content: center; align-items: center;   }
#searchbtn a i { font-size: 20px; width: 38px;height: 38px;  }
#search {display: none;}
#search .searchBar { position: relative;}
#search .searchBar input {padding: 4px 36px 4px 4px; border-bottom: 1px solid;width: 100%;font-size: 15px; line-height: 24px; margin: 0; border-radius:0; background:transparent;}
#search .searchBar input:focus { outline: none; border-color: #b9b9b9; }
#search .searchBar a { text-decoration:none; right:4px; display: block; position: absolute;  top: 50%; transform: translateY(-50%); color: inherit; font-size: 20px;}

header .menu .menuCont{align-items:center;}
.langSelector{padding-right:12px;}

/*################
##### 1 0 2 3 ####
################*/
@media screen and (min-width: 1024px) {
    #cart .cart-prod-list:after{right:26px;}
   

}

@media screen and (max-width: 1023px) {
    header .header .headerCont .hcLeft .hcLogo a img{max-width:140px;}
    #user{margin-left:8px;}
    #cart{margin-left:8px;}
    #user a > span { display: none; }
    #cart a > span { padding: 0; margin: 0; }
    #cart > a i{width:38px; height:38px;font-size:22px; } 
    #user a i:not(#btLogout){width:38px; height:38px;font-size:22px; } 
    header .header .headerCont .hcCenter{justify-content:flex-end;}
    .searchCont{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);}
    
}

@media screen and (max-width: 768px) {
       header .header .btnmenu{display:flex;}
}

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

@media screen and (max-width: 640px) {
    header .header .headerCont .hcLeft .hcLogo a img{max-width:100px;}
    header .header .headerCont .hcLeft { flex-shrink: 1; width: 100%; }
    header .header .headerCont .hcCenter { flex-shrink: 1; width: auto; }
}

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

}