/* Wrapper around the primary image */
.sds-hover-wrap {
  position: relative !important;
  display: block;
}

/* Secondary image sits above primary */
.sds-hover-secondary {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 220ms ease-in-out;
  pointer-events: none;
}

/* Fade in on hover (desktop only; JS won't enable on touch) */
.sds-hover-wrap.is-hovering .sds-hover-secondary {
  opacity: 1;
}

/* Optional: avoid flicker in some browsers */
.sds-hover-wrap img {
  backface-visibility: hidden;
}