CSS Styling for Card Badges

.product-badges {
  position: absolute;
  top: 10px;
  right: 10px; /* This moves badges to the right side */
  display: flex;
  gap: 8px; /* Space between badges */
}

.badge-product {
  background-color: rgb(255, 221, 153); /* This is for color for badges */
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 8px;
  font-weight: 600;
  text-align: center;
  padding-top: 5px;
  color: white;
  background-image: linear-gradient(rgb(133, 102, 244), rgb(133, 102, 244)); /* Example gradient */
  text-transform: uppercase;
}

.badge-product.best-seller {
  background-color: rgb(255, 153, 0);
  background-image: linear-gradient(#000, #ff2c2c); /* Choose the colors you prefer */
}

.badge-product.back-in-stock {
  background-color: rgb(102, 255, 153);
  background-image: linear-gradient(#000, #ff2c2c)
}

.badge-product.new-in {
  background-color: rgb(102, 153, 255);
  background-image: linear-gradient(#000, #ff2c2c);
}