:root {
   --rad: .3rem;
   --dur: .3s;
   --color-dark: #2f2f2f;
   --color-light: #fff;
   --color-brand: #d82505;
   --height: 2.5rem;
   --btn-width: 2rem;
   --bez: cubic-bezier(0, 0, 0.43, 1.49);
}


* {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}


input:not(:-moz-placeholder-shown) {
   border-radius: var(--rad) 0 0 var(--rad);
   width: calc(100% - var(--btn-width));
}

input:not(:-ms-input-placeholder) {
   border-radius: var(--rad) 0 0 var(--rad);
   width: calc(100% - var(--btn-width));
}

input:not(:placeholder-shown) {
   border-radius: var(--rad) 0 0 var(--rad);
   width: calc(100% - var(--btn-width));
}

input:not(:-moz-placeholder-shown)+button {
   display: block;
}

input:not(:-ms-input-placeholder)+button {
   display: block;
}

input:not(:placeholder-shown)+button {
   display: block;
}

/* label {
   position: absolute;
   clip: rect(1px, 1px, 1px, 1px);
   padding: 0;
   border: 0;
   height: 1px;
   width: 1px;
   overflow: hidden;
} */

/* @media screen and (min-width: 240px) { */

/*STYLE ALL HEADER___________________________________*/



.header--before .header::before {
   content: "";
   position: absolute;
   left: 0;
   right: 0;
   /* height: 106px; */
   bottom: -1px;
}

.header .container {
   max-width: 1600px;
   width: 100%;
   padding: 0.3rem !important;
}

.header .wrapper {
   padding: 0 5px;
   /* display: none; */
}

.header__sections {
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   max-width: 100% !important;

   height: 100%;
}

.header__section {
   /* margin: 8px 0; */
   display: flex;
   align-items: center;
   justify-content: space-between;
   /* border: seagreen solid; */
}




/* la primera seccion despues del icono .nav-open necesita un margin-left igual al ancho del icono + gap regular*/
.nav-wrapper+.header__section {
   margin-left: 4rem;
}

.header__section-right {
   gap: 1rem;
}


.header__icon {
   display: flex;
}

.header__icon svg {

   opacity: 0.9;
   color: black;
   transition: all 0.2s linear;
}

.header__link {
   cursor: pointer;
   display: flex;
   color: white;
}

.header__link:hover svg,
.header__link:hover img {
   opacity: 1;
   transition: all 0.2s linear;
}

/*STYLE SECTION LEFT _______________________________________*/
.header__section-left {
   display: flex;
   width: 20%;
   /* max-width: 100%; */
   flex-basis: 25%;
   /* margin: 5px 10px; */
   align-items: center;
}




.header__image-logo {
   display: none;
}

.header__image-logomin {
   width: 2.5rem;
   min-width: 2.5rem;
   /*  un ancho minimo */
}

/*STYLE SECTION MIDDLE _______________________________________*/

.header__section-middle {
   z-index: 10;
   flex: 1;
   max-width: var(--searchbar-max-width, 40rem);
   /* margin-inline: auto; */
   /* margin-inline auto para centrarlo horizontalmente */
   padding-inline: 1rem;

}

.header__search {
   width: 100%;
   /* height: 2rem; */

   /* outline: 1px solid currentColor; */
   border-radius: 100vh;
   overflow: hidden;
}

.header__search,
.header__filter-search {
   display: none;
}


.header__search {
   transition: all .1s var(--bez);
}

/* .header__search:focus-within {
   box-shadow: 0px 0px 0px 3px rgb(85, 91, 255);
} */




.header__select-categorie {
   height: 100%;
   text-align: center;
   border-radius: 10px 0 0 10px;
   background-color: rgb(37, 37, 37);
   color: white;
   opacity: 0.7;
   cursor: pointer;
   border: none;
}

.header__select-categorie:focus-visible {
   outline: none;
}

.header__select-categorie:hover {
   opacity: 0.9;
   transition: all 0.2s linear;
}






/* Btn de lupa */

.btnSearch {
   display: none;
   position: absolute;
   top: 0;
   right: 0;
   border-radius: 100vh;
   z-index: 1;
   bottom: 0;
   width: 3rem;
}

.btnSearch svg {
   width: 1rem;
   color: currentColor;
}






/*STYLE SECTION RIGHT _______________________________________*/


.header__login-container,
.header__cart-container {
   position: relative;
}

/* .header__popup {
   position: absolute;
   top: 55px;
   z-index: -10;
   background-color: #000000bd;
   padding: 10px 7px;
   opacity: 0;
   color: white;
   transition: all 0.2s linear;
}

.header__popup-items-cart {
   width: 230px;
}

.header__popup-user {
   left: -31px;
   padding: 10px 7px !important;
}

.header__popup-items-cart {
   right: 0;
} */



/* btns como: inicia sesion, registrate */
/* .header__button {
   width: 100px;
   max-width: 100px;
   margin: 6px 0;
   border-radius: 10px;
   border: 3px solid silver;
   transition: all 0.2s linear;
} */

.header__link-button--1:hover .header__button {
   color: white;
   background-color: black;
   border: 3px solid rgb(22, 207, 22);
   transition: all 0.2s linear;
}

.header__link-button--2:hover .header__button {
   color: white;
   background-color: black;
   border: 3px solid rgb(224, 35, 35);
   transition: all 0.2s linear;
}

.header__icon--cart-shop,
.header__icon--login-user {

   border: 1px solid silver;
   border-radius: 10px;
   transition: all 0.2s linear;
}

.header__icon--cart-shop svg,
.header__icon--login-user svg {
   /* padding: 4px; */
   opacity: 0.6;

}

.header__link:hover .header__icon--login-user,
.header__link:hover .header__icon--cart-shop {
   transform: rotateY(180deg);
   background-color: rgb(39, 39, 39);
   mix-blend-mode: hard-light;
   transition: all 0.2s linear;
}

.header__link:hover .header__icon--login-user svg,
.header__link:hover .header__icon--cart-shop svg {
   color: white;
   transform: rotateY(180deg);
}


@media screen and (min-width: 530px) {

   /*STYLE ALL HEADER___________________________________*/
   .header__sections {
       justify-content: space-between;
   }


   /*STYLE SECTION LEFT _______________________________________*/


   .header__image-logo {
       display: none;
   }



   .header__image-logomin {
       display: block;
   }

   /*     .header__section-left {
       display: flex;
       flex-basis: 20%;
       justify-content: space-around;
   }
*/



}



@media screen and (min-width: 640px) {
   .header--before .header::before {
       content: none;
   }

   .header .wrapper {
       padding: 0 40px;
   }

   /* SECTION LEFT ----------------------- */
   .header__section-left {
       width: 30%;
       flex-basis: 30%;
   }

   /* solo a partir de los 640px se muestra el logo completo y el min se oculta */
   .header__image-logo {
       display: block;
       height: 2.5rem;
       width: auto;
   }

   .header__image-logomin {
       display: none;
   }

   .header__search {
       display: block;
   }

   .header__filter-search {
       display: block;
   }

}

/* @media screen and (min-width: 1080px) {
   .header__popup {
       top: 70px;
   }

.header {
   padding: 10px 0 !important;
}

.header .wrapper {
   padding: 0 15px;
}

.header__form-container {
   margin-top: 0;
}




*/

:root {
   --header-height: 5rem;
}

/* Todos los btnicons del header */
.header__icon,
.nav-open {
   width: 3rem !important;
   height: 3rem !important;
   display: grid !important;
   place-content: center;
   color: var(--color-dark-lighter) !important;
   border: none;
}

.header__icon:hover,
.nav-open:hover {
   background: #ffffff42;
}

.header__icon svg {
   width: 2rem;
   height: 2rem;
}



/* section left*/
.header__section-left {
   width: fit-content;
   flex-basis: auto !important;
   /* es como un width fit content */
}

.header__logo-container {
   height: var(--header-height);
   display: grid;
}

.header__image-logo {
   margin-top: 1.8rem;
   /* cambiar dependiendo de la imagen */
}

.header__image-logomin {
   align-self: center;
   /* se alinea al centro v y h */
}



/* siempre a la derecha */
.header__section-right {
   margin-left: auto;
}







/* Sidenav: */


/* btn con icono de sidenav que abre el sidenav*/
.nav-open {
   position: absolute;
   top: 1rem;
   left: var(--padding-regular);
   border-radius: 100vh;
}



/* el contenedor de los cabeceras del nav (contiene titulo y flecha o x)*/
.nav-cabecera {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   padding: 0.45em 0.6em;
   background-color: #c4060d;
   color: #fff;
   z-index: 100;
   cursor: pointer;
   transition: background-color 0.2s;
   pointer-events: none;

   height: var(--header-height, 5rem);


   display: flex;
   align-items: center;
   justify-content: start;
   padding-inline: 1.5rem;
}

.nav-close,
.nav-back {
   padding: 1rem;
}

.nav-close {
   pointer-events: auto;
}

.nav-cabecera.back-visible {
   pointer-events: auto;
   cursor: pointer;
}

.nav-back {
   display: none;
}

.back-visible .nav-back {
   display: block;
   opacity: 1;
}

.back-visible .nav-title {
   -webkit-transform: translateX(1rem);
   transform: translateX(1rem);
}

.back-visible .nav-close {
   display: none;
}

.nav-title {
   transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
   transition: transform 0.3s, -webkit-transform 0.3s;
   /* flex: 1; */
   /* para que ocupe todo el ancho que pueda */
   text-transform: uppercase;
   font-weight: bold;
   /* padding-top: .5rem; */

}

/* Para dar la ilusion de que el texto se desliza,sí se desliza */
.nav-title {
   -webkit-transform: translateX(2rem);
   transform: translateX(2rem);
}


/* se aplica a iconos que pueden estar dentro de botones que ya tienen un texto o aria-label que indica para qué son */
[aria-hidden=true] {
   pointer-events: none;
}


nav a:hover {
   color: #333;
}


/* contenedor */
.desplazable {
   list-style: none;
   transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
   transition: transform 0.3s, -webkit-transform 0.3s;
   background-color: #fafafa;
   position: absolute;
   /* usar top y no padding top, para no tapar al encabezado */
   top: var(--header-height, 5rem);
   left: 0;


   height: 100%;
   width: 100%;

}

/* por que al costado del a hay una lista */
.has-dropdown ul {
   display: none;

   position: absolute;
   top: 0;
   left: 100%;

   transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
   transition: transform 0.3s, -webkit-transform 0.3s;
}

li.nav-dropdown-open ul {
   display: block;
   /* altura y ancho no son necesarios, pero sirve para cambiar el bg */
   width: 100%;
   height: 100%;
   background: var(--color-light);

}


nav li.has-dropdown>a:after {
   content: '';
   position: absolute;
   top: 50%;
   right: 1.5rem;
   width: .8rem;
   height: .8rem;
   border: .1rem solid currentcolor;
   border-left-color: transparent;
   border-top-color: transparent;
   -webkit-transform: translateY(-90%) rotateZ(-45deg);
   transform: translateY(-90%) rotateZ(-45deg);
   transition: -webkit-transform 0.3s;
   transition: transform 0.3s;
   transition: transform 0.3s, -webkit-transform 0.3s;
   -webkit-transform-origin: 100%;
   transform-origin: 100%;
}


/* elementos de la lista que no sean enlaces */

#mainNav h4 {
   padding: 1rem 2rem;
   /* background: #eee5e1; */
}

#listaCategorias li {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}



.has-dropdown>ul {
   top: 0;
}



/* #mainNav {
   width: min(20rem, 100%);
height: 150vh;

overflow: hidden;
z-index: 10000;
background: var(--color-light);





transform: translateX(-100%);

}

*/
.overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 200vw;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   /* z-index: 9999; */
   z-index: 0;
   display: none;
}

.st-menu-is-open .overlay {
   display: block;
}

.nav-slided-on-top .overlay {
   display: block;
}



nav {
   position: absolute;
   top: 0;
   /* left: 0;  DEBERIA SER 0*/
   /* left: min(20rem, 100%); */
   z-index: 100;
   /* visibility: hidden; */

   -webkit-transition: all 0.5s;
   transition: all 0.5s;
}






/* slide*/


.no-scroll {
   overflow: hidden;
}


.desplazable {
   z-index: 999999;
}

.nav-container {

   position: fixed;
   left: 0;
   /* background: pink; */
   transform: translateX(-100%);
   top: var(--header-height, 5rem);
   top: 0;
   bottom: 0;
   transition: all .3s ease;


   /* width: min(20rem,100%); */
   /* overflow-x:hidden; */
   width: 100%;
   z-index: 9999999;
}

/* .desplazable */
#mainNav {
   width: min(20rem, 100%);
   border-radius: 0;
   margin: 0;
   padding: 0;
   border: none;


   min-height: 100vh;
   overflow-y: hidden;
}

.nav-container.nav-slided-on-top {
   transform: none;
}


.ui.menu {
   /* background:green !important; */
}

#mainNav .item {
   padding: 1rem 1rem 1rem 2rem;
   /* para sobreescribir arriba der abajo izq*/

}

#mainNav .has-dropdown>.item {
   /* padding: 1rem 2rem; arriba y abajo    der e izq */
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   position: relative;
}






/* header  */
#mainHeader {

   position: fixed;
   top: 0;
   height: var(--header-height, 4rem);
   min-height: var(--header-height, 4rem);
   width: 100%;
   background: green;
   background: var(--color-light);
   z-index: 999;
   /* z-index alto pero no mayor a los modales popup */
   border-bottom: 1px solid silver;
   transition: all .2s ease;

}

#mainHeader.nav-up {
   top: -40px;
   top: calc(var(--header-height, 4rem) * -1);
}

body {
   padding-top: var(--header-height) !important;
}





/* search */


/* select sin flecha predeterminada  https://stackoverflow.com/questions/16603979/how-to-remove-the-default-arrow-icon-from-a-dropdown-list-select-element*/
#filter {
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
   background-image: none;
}


@media screen and (min-width: 640px) {
   .header__filter-search {
       display: block;
       background: #333;
   }


}

.header__form-container {
   display: flex;
   height: 3rem;
   height: 2.6rem;
}

.content-search {
   position: relative;
   width: 100%;
   display: flex;
   /* o grid, solo para que el input de dentro se estire en height */
}

.input-search:invalid {
   background: lightgray;
}



.input-search {
   width: 100%;
   border: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   transition: all var(--dur) var(--bez);
   transition-property: width;
   z-index: 1;
   position: relative;
   color: var(--color-dark);
   /* font-size: 1rem; */
   border-radius: 0 !important;

   padding-left: 1.5rem;
   box-shadow: #333 2px 2px;
}



input#search:focus-visible {
   /* box-shadow: 2px 2px 5px pink; */
   /* border: none; */
   outline: none;
}







/* header button */
.header__button {
   /* width: 100px; */
   /* max-width: 100px; */
   margin: 6px 0;
   border-radius: 10px;
   border: 3px solid silver;
   transition: all 0.2s linear;
   padding: 1rem;
   white-space: nowrap;
}




/* header popups */


/* .header__link:hover+.header__popup {
   opacity: 1;
   z-index: 20;
   transition: all 0.1s linear;
} */






/* triangulos absolutos al header__link, no usar .header__link porque se usa en otros elementos*/
.header__icon::after {
   content: "";
   position: absolute;
   width: 0;
   height: 0;
   border-right: 10px solid transparent;
   border-top: 10px solid transparent;
   border-left: 10px solid transparent;
   border-bottom: 10px solid #000000bd;
   /* top: -20px; */
   display: none;
   bottom: -10px;
   transform: translateX(50%);
   transition: all 0.1s linear;
   opacity: 0;

   visibility: hidden;
}

.header__login-container:hover .header__icon::after,
.header__cart-container:hover .header__icon::after {
   opacity: 1;

   display: block;
   visibility: visible;
}


:root {
   --padding-regular: 1rem;
}

@media screen and (min-width:768px) {
   :root {
       --padding-regular: 2rem;
   }

}

/* los popups fijos a la derecha */
.header__popup {
   width: min(20rem, 80vw);
   position: fixed;
   right: var(--padding-regular);
   top: 4.7rem;

   z-index: -10;
   background-color: #000000bd;
   padding: 10px 7px;
   opacity: 0;
   color: white;
   transition: all 0.1s linear;
   visibility: hidden;
}



.header__login-container:hover .header__popup,
.header__cart-container:hover .header__popup {
   opacity: 1;
   z-index: 20;
   /* transition: all .1ss linear; */
   visibility: visible;
}