.nav ul,.mobile-menu ul{list-style:none;}


.top-bar{
  background:var(--color-tertiary);
  color:var(--color-black);
  text-align:center;
  padding:10px;
  font-size:14px;
}


.containerSupremeHeader{
  margin:0 auto;
  max-width:100%;
  padding: 15px 0px;
  background:var(--color-primary);
}


.containerMenuSup{
  margin:0 auto;
  max-width:1400px;
  background:var(--color-primary);
    position:relative;
}

.header{
  position:relative;
  display:none;
  align-items:center;
  justify-content:space-between;
  padding:15px 30px;
  width:100%;
}


.header-left,
.header-right{
  display:flex;
  align-items:center;
  gap:15px;


  width:10%;
    z-index: 1;
    position: relative;

}









.btnUbicanosMobile{
  background-color:var(--color-white);
  width:110px;
  border-radius:8px;
  border:2px solid var(--color-primary);
  font-size:14px;
  margin-top:-30px;
  color:var(--color-black);
  transition: all ease .3s;
}
.btnUbicanosMobile a{
  display: block;
  padding:5px 10px;
}

.btnUbicanosMobile a i{
   color:var(--color-primary) !important;
   transition: all ease .3s;
}


.btnUbicanosMobile:hover{
  background-color:var(--color-primary);
  color:var(--color-white) !important;
}

.btnUbicanosMobile:hover i, .btnUbicanosMobile:hover a{
   color:var(--color-white) !important;
}





.header-left{justify-content:flex-start;}
.header-right{justify-content:flex-end;}


.header-center{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}

.logo{
  display:flex;
  justify-content:center;
  align-items:center;
  width:160px; /*acomodar el ancho del contendor del logo*/
  height:auto;/*... el alto ... logo*/
}

.logo img{
  width:100%;
  height:100%;
  display:block;
}


.login{
  width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    background: var(--color-white);
    border: none;
    outline: none;
    border-radius: 5px;
    color: var(--color-primary);
    cursor: pointer;
}



/* carrito */
.openCart{
  position:relative;
}
.count{
  position:absolute;
  top:-12px;
  right:-9px;
  background: rgb(255 0 7);
    color: var(--color-white);
    border: 2px solid var(--color-white);
    border-radius: 50%;
    font-size: 10px;    min-width: 20px;
    display: flex;
    justify-content: center;
    padding: 1px 5px;
}



.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--color-primary);
  position:relative;
  margin: 0 auto;
  max-width: 1400px;
}


 .logoContainerPrinSupreme{
  width:15%;
    display:flex;
    justify-content:start;
 }


  .logoContainerPrin{
    width:180px;
    padding-left:10px;
    display:flex;
  align-items:center;
  }

    .logoContainerPrin img{
      width:100%;
    }

  .complementsButtonNavPrin{
    width:25%;
    display:flex;
    justify-content:end;
    margin-right:20px;
    gap:15px;
  }


.complementsButtonNavPrin .priBtns{
  width:30px;
  height:30px;
  display:flex;
  justify-content:center;
  align-items: center;
  font-size:15px;
  background:var(--color-white);
  border:none;
  outline:none;
  border-radius:5px;
  color:var(--color-primary);
  cursor: pointer;
}


.inputSearchM{
  height:30px;
  display:flex;
  justify-content:space-between;
  align-items: center;
  gap:10px;
  font-size:15px;
  background:var(--color-white);
  border:none;
  outline:none;
  border-radius:7px;
  color:var(--color-primary);
  cursor: pointer;
}

.inputSearchM input{
  height:100%;
  width:auto;
  margin-left:10px;
  max-width:100px;
  background-color:transparent;
  border:none;
  outline:none;
}

.inputSearchM .iconSearchS{
  width:20px;
}

.iconDeleteS{
  height:35px;width:15px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-size:15px;
  border:none;
  outline:none;
  border-radius:7px;
  color:var(--color-black);
  cursor: pointer;
}

.inputSearchM .iconDeleteS,.inputSearchM .iconSearchS{
  padding-top:3px;
}


  .menu{
    display:flex;
    width:60%;
    justify-content:center;
    gap:40px;
  }

/* solo dropdowns normales */
.menu li:not(.mega) {
  position: relative;
}

/* mega menú SIN relative */
.menu .mega {
  position: static;
  z-index:1;
}

.menu a{
  text-decoration:none;
  color:var(--color-white);
  position:relative;
}

.principalMenu .amenuprin{
    padding:15px 5px;
    color:var(--color-white) !important;
}

.item:hover a{
    color:var(--color-white) !important;
}

.principalMenu .amenuprin:hover{
  color:var(--color-white)!important;
}


/* línea animada */
.principalMenu .amenuprin::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0px;
  width:0;
  height:5px;
  background:var(--color-tertiary);
  transition:.3s;
}

.menu li:hover > a::after{
  width:100%;
}

/* dropdown */
.submenu{
  display:none;
  position:absolute;
  top:55px;
  left:0;
  background-color:rgba(255, 255, 255, 0.976);
  min-width:180px;
  padding:15px;
  z-index:1;
}

.submenu li{
    padding:8px 5px;
    transition:all ease .3s;
}

.submenu li a:hover{
 color:var(--color-primary)
}


.dropdown:hover .submenu{
  display:block;
}

/* MEGA MENU */
.mega-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  background-color:rgba(255, 255, 255, 0.976);
}

.mega:hover .mega-menu,
.mega-menu:hover {
  display: block;
}

.mega-inner{
  max-width:1400px;
  margin:auto;
  display:flex;
  justify-content:center;
  gap:100px;
  padding:40px;
  flex-wrap:wrap;
  max-height:400px;
  overflow-y: auto;
}



.auto-grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 150px;
  gap:10px;
  column-gap: 60px;
  transition: all ease .3s;
}

.auto-grid li a:hover{
 color:var(--color-primary);
}

.column{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.column h4{
  color:var(--color-primary);
}

.double-col{
  display:flex;
  gap:40px;
}

/* SEARCH */
.search-overlay{
  position:fixed;
  top:-100%;
  left:0;
  width:100%;
  height:100%;
  background:var(--color-white);
  display:flex;
  justify-content:center;
  align-items:start;
  transition:.3s;
  z-index:2000;
}

.search-overlay.active{top:0;}

.search-overlay input{
  width:80%;
  padding:15px;
  font-size:20px;
}

/* MOBILE */
.hamburger{display:none;}

.mobile-menu{
  position:fixed;
  left:-300px;
  top:0px;
  width:300px;
  height:100%;
  background:var(--color-white);
  transition:.3s;
  padding:20px;overflow: scroll;
  z-index:1000;
}

.mobile-menu.active{left:0;}

.overlay{
  position:fixed;
  top: 0px;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.5);
  display:none;
  z-index:900;
}

.overlay.active{display:block;}

/* acordeón */
.mobile-menu .item{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  cursor:pointer;
}

.mobile-menu .sub{
  display:none;
  padding-left:15px;
}

.mobile-menu .sub.active{
  display:block;
}

.mobile-menu i{
  transition:.3s;
}
.mobile-menu i.rotate{
  transform:rotate(180deg);
}



#openSearch{
  width:30px;
  height:30px;
  display:flex;
  justify-content:center;
  align-items: center;
  font-size:15px;
  background:var(--color-white);
  border:none;
  outline:none;
  border-radius:5px;
  color:var(--color-primary);
  cursor: pointer;
}

.openCart{
  width:30px;
  height:30px;
  display:flex;
  justify-content:center;
  align-items: center;
  font-size:15px;
  background:var(--color-white);
  border:none;
  outline:none;
  border-radius:5px;
  color:var(--color-primary);
  cursor: pointer;
}

#openMenu{
  width:30px;
  height:30px;
  justify-content:center;
  align-items: center;
  font-size:18px;
  background:var(--color-white);
  border:none;
  outline:none;
  border-radius:5px;
  color:var(--color-primary);
  cursor: pointer;
}

#closeMenu{
  width:30px;
  height:30px;
  justify-content:center;
  align-items: center;
  font-size:18px;
  background:var(--color-black);
  border:none;
  outline:none;
  margin-left:230px;
  border-radius:5px;
  color:var(--color-white);
  cursor: pointer;
}








/* contenedor */
.search-container{
  width: 100%;
  max-width: 1400px;
  display: flex;
  padding:40px;
  flex-direction: column;
  gap: 15px;
}

/* input wrapper */
.search-input-wrap{
  position: relative;
}

/* input */
.search-input-wrap input{
  width: 100%;
  padding: 14px 45px 14px 15px;
  font-size: 18px;
  border: 1px solid #ddd;
  border-radius: 8px;
  outline: none;
}

/* botón limpiar */
.clear-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  display: none;
}


.close-search{
  position: absolute;
  right: 10px;
  width:40px;
  height:40px;
  display:flex;
  justify-content:center;
  align-items:center;
  top:10px;
  font-size:20px;
  border: none;
  cursor: pointer;
  background-color:var(--color-white);
  border-radius:5px;
}


/* mostrar botón */
.clear-btn.active{
  display: block;
}


/* hint */
.search-hint{
  padding-top:20px;
  font-size: 20px;
  color: #888;
}


/* resultados */
.search-results{
  display: flex;
  max-height:70vh;
  overflow-y:scroll;
  flex-direction: column;
  gap: 10px;
}

.result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    transition: background 0.2s;
}

.result-item:hover {
    background: #f5f5f5;
}

.result-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-name {
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.product-price {
    font-size: 13px;
    color: #666;
}

.product-price.offer-price {
    color: #e74c3c;
    font-weight: 600;
}

.product-variant {
    font-size: 11px;
    color: #999;
}

.no-results {
    padding: 20px;
    text-align: center;
    color: #999;
}








/* RESPONSIVE */
@media(max-width:999px){

  .header{
    padding:15px;
    display:flex;
  }


  .menu{display:none;}

  .hamburger{display:block;}


  .top-bar{
    padding:5px;
    font-size:12px;
   }



    .header-left,.header-right{
        width:33%;
        top:0;
        z-index: 1;
        position: relative;
    }

    .search-hint{
        font-size:15px;
    }


    .search-container{
      padding:10px;
    }

    .logoContainerPrinSupreme,.complementsButtonNavPrin{
      display:none;
    }
}



@media(max-width:370px){
  .logo {width: 140px;}
  .header-left,
  .header-right{
    gap:10px;
  }
}


/* contenedor general */
.mobile-menu ul {
  margin-top:20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-top:1px solid #eeeeee;
  padding-top:20px;
}

/* ITEM PRINCIPAL */
.mobile-menu .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  transition: 0.3s;
  border-radius:5px;
  background-color:#fcfcfc;
}

/* hover */
.mobile-menu .item:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* activo (cuando está abierto) */
.mobile-menu .item.active {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
}

/* icono */
.mobile-menu .item i {
  transition: 0.3s;
}

/* rotación */
.mobile-menu .item i.rotate {
  transform: rotate(180deg);
}

/* SUBMENÚ */
.mobile-menu .sub {
  display: none;
  flex-direction: column;
  gap: 5px;
  margin-top: 5px;
  padding-left: 10px;
  border-left: 2px solid #f3f3f3;
}

/* sub activo */
.mobile-menu .sub.active {
  display: flex;
}

/* ITEMS INTERNOS */
.mobile-menu .sub li {
  padding: 10px 12px;
  border-radius: 6px;
  background: #fcfcfc;
  transition: 0.2s;
  text-decoration:none;
}

/* hover interno */
.mobile-menu .sub li:hover {
  background: #fcfcfc;
}

/* NIVEL 2 (sub dentro de sub) */
.mobile-menu .sub .sub {
  padding-left: 15px;
  border-left: 2px solid #f2f2f2;
}

/* nivel más profundo */
.mobile-menu .sub .sub li {
  background: #f5f5f5;
  font-size: 14px;
  text-decoration:none;
}

.has-sub .sub li a{
    text-decoration:none;
}


.item a{
    color:var(--color-secondary);
    text-decoration:none;
}



.menu li a,
.submenu li a,
.mega-menu a,
.mobile-menu a {
  display: block;
  width: 100%;
  color:var(--color-black);
}