/* Minimal overrides to match demo arrow placement */
.swiper { position: relative; }
.item-media-swiper {
  --media-swiper-height: clamp(240px, 40vw, 520px);
  width: 100%;
  max-width: 100%;
  height: var(--media-swiper-height);
  position: relative;
  z-index: 1;
}
.item-media-swiper .swiper-wrapper {
  height: 100%;
  position: relative;
  z-index: 2;
}
.item-media-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.item-media-swiper img,
.item-media-swiper video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  pointer-events: auto !important;
  position: relative;
  z-index: 1;
}

/* On mobile, allow touches to pass through video for swiping */
@media (hover: none) and (pointer: coarse) {
  .item-media-swiper video {
    touch-action: pan-x pan-y;
  }
}
.item-media-swiper .swiper-button-next,
.item-media-swiper .swiper-button-prev {
  color: var(--color-px-amber, #D68F00);
}
.item-media-swiper .swiper-pagination-bullet-active {
  background-color: var(--color-px-amber, #D68F00) !important;
}
.item-media-swiper .swiper-pagination-bullet {
  background-color: var(--color-px-charcoal, #353839);
}
.item-media-swiper .swiper-pagination {
  pointer-events: none;
  bottom: 0 !important;
}
.item-media-swiper .swiper-pagination-bullet {
  pointer-events: auto;
}

@media (hover: none) and (pointer: coarse) {
  .item-media-swiper .swiper-button-prev,
  .item-media-swiper .swiper-button-next {
    display: none;
  }
}

.swiper-button-next,
.swiper-button-prev {
  top: 50%;
  transform: translateY(-50%);
}

.swiper-button-prev { left: 10px; right: auto; }
.swiper-button-next { right: 10px; left: auto; }