/* Definir la animación del degradado con rotación */
@keyframes animarDegradado {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 300% 0%;
  }
}

/* Contenedor principal con borde animado luis */
.boosted-product.js-product-miniature {
  position: relative;
  z-index: 1;
}

/* Pseudo-elemento para crear el borde animado */
.boosted-product.js-product-miniature::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  z-index: -1;
  background: linear-gradient(90deg, #de288c, #9028dc, #32d7b9, #9028dc, #0bfc8b, #0096ff, #e900ff);
  /* */
  background-size: 300% 100%;
  animation: animarDegradado 5s linear infinite;
  border-radius: inherit; /* Hereda el border-radius si el contenedor lo tiene */
}

/* Contenido interno (opcional) */
.boosted-product.js-product-miniature::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff; /* Fondo del contenido, ajustar según sea necesario */
  z-index: -1;
  border-radius: inherit; /* Hereda el border-radius si el contenedor lo tiene */
}
/* Product Miniatures */
/* Sticker Miniature Boosted */
.majin-sticker-miniature {
  margin: 5px 0;
  text-align: center;
  background:linear-gradient(90deg,#de288c,#9028dc,#32d7b9,#9028dc,#0bfc8b,#0096ff,#e900ff);
  background-size: auto;
  display: inline-block;
  padding:0 5px;
  width: 100px;
  font-size: 14px;
  font-weight: bold;
  border: 2px solid #1a0e9d3d;
  animation:animarDegradado 5s linear infinite;
  background-size: 300% 100%;
  color: white;
  text-shadow: 1px 1px 2px black;
  pointer-events: none;
  user-select: none;
}

/* Delivery Info */

.delivery-info {
  font-size: 0.875rem;
  color: #4b5563;
  display: flex;
  align-items: center;
  padding: 0 10%;
}
.delivery-info svg {
  margin-left: 8px;
  margin-right: 8px;
}
/* Points Info */

.points-info {
  color: #f9a549;
  font-size: 0.875rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding: 0 10%;
}
.points-info img {
  width: 35px;
  height: 35px;
  background:none;
  margin-bottom: 4px;
}
@media (max-width: 767px) {
  .majin-sticker-miniature {
    width: 60px;
    margin: 3px 0;
    font-size: 12px;
  }
  .delivery-info span {
    font-size: 12px;
  }
  .points-info span {
    font-size: 12px;
  }
  .points-info img {
    width: 30px;
    height: 30px;
  }
}