/* Transparent background */
.m12-gallery {
  background-color: transparent;
  padding: 0px;
}

/* Main slider */
.gallery-top {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.gallery-top .swiper-slide img {
  width: 100%;
  display: block;
  object-fit: contain;
}

/* Main arrows */
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;                /* center vertically */
  transform: translateY(-50%);
  width: 22px;             /* half size */
  height: 22px;
  color: #fff;
  opacity: 0.7;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 1;
}

/* Thumbnail strip */
.gallery-thumbs {
  margin-top: 15px;
  position: relative;
  overflow: hidden; /* we’ll size slides manually */
}
.gallery-thumbs .swiper-wrapper {
  display: flex;
}
.gallery-thumbs .swiper-slide {
  aspect-ratio: 1 / 1;        /* each slide becomes a square */
  overflow: hidden;           /* crop the img to the square */
  position: relative;
  opacity: 0.4;
}

.gallery-thumbs .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* fill-and-crop the img inside its square */
  position: absolute;
  top: 0;
  left: 0;
}


.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}

/* absolutely fill that square with the image */
.gallery-thumbs .swiper-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* crop & fill without distortion */
  display: block;
}

/* Hide thumbnail arrows—they’re not needed once all thumbs fit */
.swiper-button-thumb-prev,
.swiper-button-thumb-next {
  display: none !important;
}

/* Thumbnail arrows */
/* Shrink thumbnail arrows */
.swiper-button-thumb-prev,
.swiper-button-thumb-next {
  top: 55% !important;             /* vertical center */
  transform: translateY(-50%) !important;
  width: 30px !important;          /* container size */
  height: 40px !important;
  opacity: 0.5 !important;
}

/* Override the icon inside via the ::after pseudo-element */
.swiper-button-thumb-prev::after,
.swiper-button-thumb-next::after {
  font-size: 25px !important;      /* half the default 24px */
  line-height: 25px !important;    /* vertically center the glyph */
}

.swiper-button-thumb-prev { left: 0px; }
.swiper-button-thumb-next { right: 0px; }

/* Hide only the main-gallery arrows (keep the thumbs arrows) */
.gallery-top .swiper-button-next,
.gallery-top .swiper-button-prev {
  display: none !important;
  pointer-events: none;
}

/* Rounded corners on main image */
.gallery-top .swiper-slide img {
  border-radius: 6px;
}

/* Rounded corners on thumbnails */
.gallery-thumbs .swiper-slide img {
  border-radius: 6px;
}

/* ── Enforce 4:3 on every main slide ── */
.gallery-top .swiper-slide {
  position: relative;    /* establish a positioning context */
  width: 100%;           /* full width of the container */
  padding-top: 75%;      /* height = 75% of width → 4:3 aspect ratio */
  overflow: hidden;      /* crop anything out of the box */
}

/* absolutely fill that box with the image */
.gallery-top .swiper-slide img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* crop & fill without distortion */
}


/* Credit label styling */
.m12-gallery-credit {
  text-align: right;
  font-size: 0.75em;
  margin-top: 10px;
}
.m12-gallery-credit-madewith {
  opacity: 0.5;
}
.m12-gallery-credit-plugin {
  opacity: 0.7;
}

/* Credit container below thumbnails, fixed height to avoid shifting */
.m12-gallery-credit-container {
  height: 1.5em; /* reserve space */
}
.m12-gallery-credit {
  font-size: 0.75em;
  text-align: right;
  opacity: 0;
  transition: opacity 3s;
}
.m12-gallery-credit.visible {
  opacity: 1;
}
.m12-gallery-credit-madewith {
  opacity: 0.3;
  margin-right: 4px;
}
.m12-gallery-credit-plugin {
  opacity: 0.5;
}

/* ── allow page pinch-zoom when touching *inside* any Swiper ── */
.m12-gallery .swiper, 
.m12-gallery .swiper-horizontal {
  touch-action: pan-y pan-x pinch-zoom !important;
  -ms-touch-action: pan-y pan-x pinch-zoom !important; /* legacy Edge/IE */
}