/* Starting page product carousel.
   The live page still renders the original Swiper (real catalog photos).
   An earlier overlay stylesheet hid `.swiper { display:none }`, which is why
   Starting looked empty even though the slides were in the DOM. */

.starting .h-\[400px\] {
  height: 400px !important;
  overflow: hidden;
}

.starting .swiper,
.starting .swiper-wrapper {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.starting .swiper {
  overflow: hidden !important;
}

.starting .swiper-slide {
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  opacity: 0.45;
}

.starting .swiper-slide-active {
  opacity: 1;
  z-index: 2;
}

.starting .swiper-slide .img-box {
  background: transparent !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

.starting .swiper-slide img {
  width: 110px !important;
  height: 110px !important;
  object-fit: contain !important;
  display: block !important;
}

.starting .swiper-slide-active img {
  width: 200px !important;
  height: 200px !important;
}

.starting .swiper-slide #content {
  display: none;
}

.starting .swiper-slide-active #content {
  display: block !important;
  text-align: center;
  margin-top: 8px;
}

/* Fallback if the Vue carousel path ever mounts instead of Swiper. */
.starting .ea-carousel {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 400px;
  overflow: hidden;
}

.starting .ea-slide {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  opacity: 0.45;
  transform: scale(0.66);
  transform-origin: center bottom;
}

.starting .ea-slide.is-active {
  flex-basis: 40%;
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.starting .ea-pic {
  width: 110px;
  height: 110px;
  object-fit: contain;
  display: block;
}

.starting .ea-slide.is-active .ea-pic {
  width: 200px;
  height: 200px;
}

.starting .bg-\[\#0A0A0B\] {
  margin-top: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 16px !important;
}