/* ppw-plp-hover.css — second image on hover for PLP product tiles (Purple Panda) */
.ppw-hv-alt{
  position:absolute;
  display:block;
  /* A <span> with a background image, not an <img>: the theme forces
     opacity/mix-blend-mode on every tile <img> with !important, which made
     both pictures show on top of each other. */
  background-color:inherit;              /* same light grey as the tile */
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  background-blend-mode:multiply;        /* white photo backgrounds blend into the grey, like the main image */
  mix-blend-mode:normal;
  opacity:0;
  pointer-events:none;           /* quick view / lightbox buttons stay clickable */
  transition:opacity .25s ease;
  z-index:1;
}
.imgthumbnail.ppw-hv-on .list-attribute,
.imgthumbnail.ppw-hv-on .product-list-actions{position:relative;z-index:2}
.tile:hover .imgthumbnail.ppw-hv-ready .ppw-hv-alt,
.product-tile-image:focus-visible .imgthumbnail.ppw-hv-ready .ppw-hv-alt{opacity:1}
@media (prefers-reduced-motion:reduce){.ppw-hv-alt{transition:none}}
@media (hover:none),(pointer:coarse){.ppw-hv-alt{display:none!important}}

/* Pop-out photo dots (3+ photos) */
.image-hover-preview .ppw-hv-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;pointer-events:none;z-index:3}
.image-hover-preview .ppw-hv-dots[hidden]{display:none}
.image-hover-preview .ppw-hv-dots span{width:7px;height:7px;border-radius:50%;background:#D8D3EA;transition:background .2s,transform .2s}
.image-hover-preview .ppw-hv-dots span.is-on{background:#493493;transform:scale(1.25)}

/* Pop-out: fixed-size picture box, so photos of different shapes/sizes (or a small
   "Works with Teams" badge) sit in the same spot instead of making the box jump.
   scale-down = big photos shrink to fit, small ones stay sharp at their own size. */
.image-hover-preview.ppw-hv-fixed > img{width:100%!important;height:312px!important;max-height:312px!important;object-fit:scale-down!important;object-position:center!important;display:block}