/* =========================
   Product Gallery (Grid + Slider)
   ========================= */

/* Section */
.product-gallery { margin: 1.5rem 0 2rem; }
.product-gallery__title { margin: 0 0 .75rem; font-size: 1.25rem; line-height: 1.2; }

/* Reset any legacy inline styles */
#gallery { height: auto !important; margin-bottom: 1.5rem !important; }

/* ===== GRID (1–4 images) ===== */
.product-gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem; /* increased gap */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
  .product-gallery__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.product-gallery__item a,
.product-gallery__item img { display: block; width: 100%; }
.product-gallery__item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid #c1c1c1;  /* requested border */
}

/* ===== SLIDER (5+ images) ===== */
.product-gallery__swiper {
  position: relative;
  width: 100%;
  overflow: visible;          /* let arrows sit outside */
  padding-bottom: 28px;       /* room for dots */
  margin: 0 auto;
  line-height: 0;
  max-width: 1200px;
  overflow: hidden;
}

.product-gallery__swiper .swiper-wrapper {
  height: auto !important;
  align-items: stretch;
}
.product-gallery__swiper .swiper-slide {
  height: auto !important;
  flex: 0 0 auto;
  /* REMOVE padding here to avoid double spacing; Swiper handles spacing */
  padding: 0;
}
.product-gallery__swiper .swiper-slide a,
.product-gallery__swiper .swiper-slide img { display: block; width: 100%; }

.product-gallery__swiper .swiper-slide img {
  aspect-ratio: 16 / 10;     /* default on mobile */
  object-fit: cover;
  border: 1px solid #c1c1c1; /* requested border */
}
@media (min-width: 640px) {
  .product-gallery__swiper .swiper-slide img { aspect-ratio: 4 / 3; }
}
@media (min-width: 1024px) {
  .product-gallery__swiper .swiper-slide img { aspect-ratio: 3 / 2; }
}

/* ===== Controls (outside the slider) ===== */
.product-gallery .swiper-button-prev,
.product-gallery .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  z-index: 10;
  color: #333;
}

.product-gallery .swiper-button-prev::after,
.product-gallery .swiper-button-next::after {
  font-size: 18px;
  font-weight: bold;
}

/* Hover/focus */
.product-gallery .swiper-button-prev:hover,
.product-gallery .swiper-button-next:hover,
.product-gallery .swiper-button-prev:focus-visible,
.product-gallery .swiper-button-next:focus-visible {
  background: rgba(255,255,255,0.98);
  outline: none;
}

/* Disabled state */
.product-gallery .swiper-button-disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* Pagination dots */
.product-gallery .swiper-pagination { bottom: 8px; }