/**
 * Product pages: below md the background video covers only the top 85% of the
 * article (h-[85%] in node--product.html.twig), so keep the pause button on
 * the video instead of the article's bottom edge. Two classes so it outranks
 * Tailwind's bottom-2, which loads after this file.
 */
@media (max-width: 767.98px) {
  .video-toggle.product-video-toggle {
    bottom: calc(15% + 0.5rem);
  }
}

/**
 * Hero carousel pause/play (paragraph--slider.html.twig): on the dots' line,
 * just after them. Splide marks the toggle is-active while it plays.
 */
.slider.splide > .hero-autoplay-toggle {
  position: absolute;
  left: 125px;
  bottom: 44px;
  z-index: 20;
}
.splide__toggle .splide__toggle__pause,
.splide__toggle.is-active .splide__toggle__play {
  display: none;
}
.splide__toggle.is-active .splide__toggle__pause {
  display: block;
}