.hero-visual #hero-product-image {
  width: 84%;
  height: 72%;
  object-fit: contain;
  mix-blend-mode: normal;
  border-radius: 0;
  -webkit-mask-image: none;
  mask-image: none;
  filter: saturate(.98) contrast(1.04) drop-shadow(0 35px 28px #000b) drop-shadow(0 0 24px #ffffff13);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .7s ease;
}

.hero-visual #hero-product-image.changing {
  opacity: .08;
  transform: translateY(14px) scale(.9) rotate(-1.5deg);
  filter: blur(14px) saturate(.65) drop-shadow(0 20px 24px #0006);
}

.hero-dots {
  display: flex;
  gap: 7px;
  margin-top: 14px;
}

.hero-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: #c8c8c8;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.hero-dots button.active {
  width: 24px;
  background: var(--red);
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual #hero-product-image { transition: none; }
}