/* Swiper + PhotoSwipe CSS from CDNs can stay separate if you want,
   but for layout we only need our custom rules. */

:root {
  --max-width: 1200px !important;
  --gap: 12px !important;
}

.gallery-shell {
  width: 100% !important;
  max-width: var(--max-width) !important;
  /*margin: 0 auto !important;*/
  box-sizing: border-box !important;
}

/* Main slider */
#mainSwiper {
  width: 100% !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}

/* Main slider */
#mainSwiper .swiper-slide {
  width: 35% !important;   /* was 85% */
  margin-right: var(--gap) !important;
}

@media (max-width: 992px) {
  #mainSwiper .swiper-slide {
    width: 85% !important; /* restore the original behavior on mobile/tablet */
  }
}

.slide-img {
  display: block !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  cursor: pointer !important;
}

/* Thumbnails slider */
#thumbsSwiper {
  height: 80px !important;
  margin-top: 8px !important;
}

#thumbsSwiper .swiper-slide {
  width: auto !important;
  height: 100% !important;
  opacity: 0.5 !important;
  cursor: pointer !important;
}

#thumbsSwiper .swiper-slide-thumb-active {
  opacity: 1 !important;
  border: none !important;
  border-radius: 6px !important;
}

#thumbsSwiper img {
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  width: auto !important;
}

.swiper-wrapper {
  height: inherit !important;
}

@media (max-width: 768px) {
  #thumbsSwiper {
    height: 50px !important;
  }
  #thumbsSwiper .swiper-slide img {
    height: 50px !important;
  }
}