/*
  Product details image zoom (desktop hover).

  Applies to .js-product-hover-zoom containers inside the main product slider.
*/

@media (hover: hover) and (pointer: fine) {
  .product-hover-zoom {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
  }

  .product-hover-zoom img {
    transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
    transition: transform 180ms ease;
    will-change: transform;
  }

  .product-hover-zoom:hover img {
    transform: scale(1.8);
  }
}