.productslider-main-video {
  display: block;
  width: 100%;
  height: auto;
}

.an_productpage-slider-item {
  position: relative;
}

.an_video-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.an_video-play-badge::after {
  content: '';
  position: absolute;
  top: 8px;
  left: 11px;
  border-style: solid;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent #fff;
}

/*
 * arlg's lightSlider gallery. front.js swaps the poster <img> of the
 * active slide for this <video>; it needs to fill the slide the same way
 * that poster did (arlg sizes slides via inline width/height attributes,
 * which this inherits, but the source video's own aspect ratio can still
 * differ from the poster box arlg resized to).
 */
/*
 * Both the poster and the video fill the slide box exactly as a photo does, so
 * the gallery does not change height when the shopper reaches the video. The
 * poster needs this as much as the video: arlg renders it at the frame's own
 * 16:9 ratio, which is shorter than the square photo slides and visibly jumps.
 *
 * `cover` so the media fills the slide edge to edge like a photo does, rather
 * than sitting letterboxed inside it. Both rules must agree, or the swap from
 * poster to video is itself a visible jump - that mismatch was the original
 * defect, with the video on cover and the poster left unstyled.
 */
#lightSlider > li video.auksosalavideo-arlg-video,
#lightSlider > li[data-video="1"] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Deliberately NOT scoped to `li.lslide`. lightSlider adds that class during
 * its own init, which happens after arlg has appended the slides, so a rule
 * requiring it leaves the poster unstyled for a frame - it paints at the
 * clip's native 16:9 and then snaps to cover once the class lands. Matching
 * on the li alone styles it from the moment it enters the DOM.
 */