/* Page/component styles; shared foundations are in styles.css. */
.card[data-boilie-carousel] {
  position: relative;
}

.card[data-boilie-carousel] > img {
  transition: opacity 1s ease-in-out;
}

.card[data-boilie-carousel] > .homeProductImageSecondary {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.card[data-boilie-carousel].isShowingSecondary > .homeProductImagePrimary {
  opacity: 0;
}

:where(.homePage) .card[data-boilie-carousel].isShowingSecondary > .homeProductImageSecondary.isCarouselActive,
:where(.boiliesPage) .card[data-boilie-carousel].isShowingSecondary > .homeProductImageSecondary {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .card[data-boilie-carousel] > img {
    transition: none;
  }
}