/* CATEGORÍAS */
.categories {
  padding: 10px 0;
  background-color: #141414;
}

.categories-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 5%;
}

.category {
  background-color: #222;
  color: #fff;
  border: none;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.3s;
}

.category.active {
  background-color: #7CFC00;
  color: #000;
}


/* PRODUCTOS */
.products {
  padding: 20px 0;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(4, 1fr); /* 4 columnas en desktop */
  transition: opacity 0.3s ease, transform 0.3s ease;
}
/* DESKTOP */
@media (min-width: 1300px) {
  .products {
    grid-template-columns: repeat(5, 1fr);
  }
}
/* TABLET */
@media (max-width: 1024px) {
  .products {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* TABLET PEQUEÑA */
@media (max-width: 768px) {
  .products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* MÓVIL */
@media (max-width: 480px) {
  .products {
    grid-template-columns: 1fr;
  }
}



.product-card{
background-color:#1c1c1c;
padding:15px;
border-radius:10px;

display:flex;
flex-direction:column;

gap:10px;

height:100%;
}
.product-card .whatsapp-btn{
margin-top:auto;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px rgba(124, 252, 0, 0.3);
}

.product-img{
width:100%;
border-radius:8px;
transition:0.3s;
}
.product-card:hover .product-img{
transform:scale(1.05);
}

.product-name {
  font-size: 0.9rem;
}

.product-price {
  font-weight: bold;
  color: #7CFC00;
}




/* BOTÓN VER PRODUCTO */

.details-btn{
display:block;
text-align:center;

margin-top:6px;

font-size:13px;

color:#39ff14;
text-decoration:none;

border:1px solid #39ff14;
border-radius:6px;

padding:6px 8px;

transition:0.3s;
}

.details-btn:hover{

background:#39ff14;
color:#000;

}


.variant-select {
  width: 100%;
  padding: 10px;
  margin: 12px 0;
  border-radius: 6px;

  background-color: #222;
  color: #fff;
  border: 1px solid #39ff14;

  font-size: 14px;
  outline: none;
  transition: 0.3s ease;
  font-weight:bold;
}

.variant-select:focus {
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
}

.badge {
  display: inline-block;
  background: #39ff14;
  color: #000;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.sort-container {
  margin: 15px 0;
}

#sortSelect {
  background: #222;
  color: #fff;
  border: 1px solid #39ff14;
}

.products.fade-out {
  opacity: 0;
  transform: translateY(10px);
}

.products.fade-in {
  opacity: 1;
  transform: translateY(0);
}


/* BUSCADOR */

.search-container{

margin:30px 0;
display:flex;
justify-content:center;

}

#productSearch{

width:300px;
padding:12px 15px;

background:#111;
border:1px solid #333;

border-radius:6px;

color:white;
font-size:16px;

}

#productSearch:focus{

outline:none;
border-color:#39ff14;

}