#sabores .showcase-photo {
  position: relative;
}

#sabores[data-active-flavor="limon"],
.product-modal[data-active-flavor="limon"] {
  --product-accent: #b9f83d;
  --product-accent-deep: #203a0d;
}

#sabores[data-active-flavor="naranja"],
.product-modal[data-active-flavor="naranja"] {
  --product-accent: #ff7a18;
  --product-accent-deep: #61300a;
}

#sabores[data-active-flavor="fresa"],
.product-modal[data-active-flavor="fresa"] {
  --product-accent: #ff405a;
  --product-accent-deep: #59101d;
}

#sabores .showcase-photo img[data-showcase-image] {
  position: relative;
  z-index: 1;
  will-change: transform, opacity;
}

#sabores .showcase-photo .flavor-slide-ghost {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  will-change: transform, opacity;
}

#sabores.is-flavor-dragging .showcase-photo img[data-showcase-image] {
  opacity: var(--flavor-drag-opacity, 1);
  transform: translateX(var(--flavor-drag-x, 0px)) scale(0.992);
  transition: none;
}

#sabores.is-flavor-sliding-next .showcase-photo img[data-showcase-image] {
  animation: flavorIncomingNext 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#sabores.is-flavor-sliding-prev .showcase-photo img[data-showcase-image] {
  animation: flavorIncomingPrev 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#sabores.is-flavor-sliding-next .showcase-photo .flavor-slide-ghost {
  animation: flavorOutgoingNext 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

#sabores.is-flavor-sliding-prev .showcase-photo .flavor-slide-ghost {
  animation: flavorOutgoingPrev 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (max-width: 660px) {
  #sabores .showcase-thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    order: 2;
    gap: 9px;
    width: min(100%, 390px);
    margin-inline: auto;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  #sabores .flavor-thumb {
    width: 100%;
    min-width: 0;
    min-height: 70px;
  }

  #sabores .flavor-thumb.is-active {
    transform: translateY(-2px);
  }

  #sabores .showcase-main {
    touch-action: pan-y;
  }
}

@media (max-width: 480px) {
  #sabores .showcase-thumbs {
    gap: 7px;
    width: 100%;
  }

  #sabores .flavor-thumb {
    min-height: 78px;
    padding-inline: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sabores.is-flavor-sliding-next .showcase-photo img[data-showcase-image],
  #sabores.is-flavor-sliding-prev .showcase-photo img[data-showcase-image],
  #sabores.is-flavor-sliding-next .showcase-photo .flavor-slide-ghost,
  #sabores.is-flavor-sliding-prev .showcase-photo .flavor-slide-ghost {
    animation: none;
  }
}

@keyframes flavorIncomingNext {
  from {
    opacity: 0.2;
    transform: translateX(34%) scale(0.965);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes flavorIncomingPrev {
  from {
    opacity: 0.2;
    transform: translateX(-34%) scale(0.965);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes flavorOutgoingNext {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateX(-34%) scale(0.96);
  }
}

@keyframes flavorOutgoingPrev {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateX(34%) scale(0.96);
  }
}