/* Video hero styles; the image slideshow keeps its own layout. */
.slideshow-container.video-hero {
  height: auto;
  min-height: 0;
  max-height: none;
  background: #eee6d6;
}

.video-hero__player {
  position: relative;
  width: 100%;
  max-width: 1600px;
  aspect-ratio: 16 / 9;
  margin: auto;
}

.video-hero--portrait .video-hero__player { aspect-ratio: 4 / 5; }

/* Fit the complete composition below the header on desktop screens only.
   Leave room for the header, shop link, and a little following content. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .video-hero__player {
    max-width: min(1137.778px, calc((100svh - 200px) * 16 / 9));
  }
}

.video-hero__poster,
.video-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.video-hero__video { opacity: 0; }
.video-hero__video.is-playing { opacity: 1; }

.video-hero__shop:focus-visible { outline: 3px solid #704720; outline-offset: 3px; }

.video-hero__actions { text-align: center; padding: 12px 16px 18px; }
.video-hero__shop {
  display: inline-block;
  padding: 8px 28px;
  background: #8b6335;
  border-radius: 6px;
  color: white;
}