.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.product-gallery .swiper {
  width: 100%;
  overflow: hidden;
}
.product-gallery .product-main {
  position: relative;
}
.product-gallery .product-main .main-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.product-gallery .product-main .main-nav.main-prev {
  left: 16px;
}
.product-gallery .product-main .main-nav.main-next {
  right: 16px;
}

.product-main .swiper-slide {
  clip-path: polygon(10% 0%, 100% 0%, 100% 90%, 93% 100%, 0% 100%, 0% 10%);
  overflow: hidden;
}
.product-gallery .product-main .swiper-slide img {
  aspect-ratio: 1/1;
  object-fit: cover;
  width: 100%;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition:
    transform 0.22s ease-out,
    transform-origin 0.14s ease-out;
  will-change: transform;
}

.product-gallery .product-main .swiper-slide.is-image-zoomed img {
  transition:
    transform 0.2s ease-out,
    transform-origin 0.08s linear;
}

.product-gallery .product-main .swiper-slide.is-zoom-resetting img {
  transition:
    transform 0.22s ease-out 0.09s,
    transform-origin 0.14s ease-out;
}
.product-gallery .product-thumbs .swiper-slide {
  position: relative;
  clip-path: polygon(10% 0%, 100% 0%, 100% 90%, 93% 100%, 0% 100%, 0% 10%);
}

/* fake border */
.product-gallery .product-thumbs .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff; /* default border color */
  z-index: -1;
  clip-path: polygon(10% 0%, 100% 0%, 100% 90%, 93% 100%, 0% 100%, 0% 10%);
}

/* inner content (to create border thickness illusion) */
.product-gallery .product-thumbs .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  clip-path: polygon(
    calc(10% + 2px) 2px,
    calc(100% - 2px) 2px,
    calc(100% - 2px) calc(90% - 2px),
    calc(93% - 2px) calc(100% - 2px),
    2px calc(100% - 2px),
    2px calc(10% + 2px)
  );
}

/* active state */
.product-gallery
  .product-thumbs
  .swiper-slide.swiper-slide-thumb-active::before {
  background: #8ca4ab;
}
.product-gallery .product-thumbs .swiper-slide img {
  aspect-ratio: 1/1;
  object-fit: cover;
}


@media (max-width: 1024px) {
    .product-gallery .product-thumbs {
        display: none;
    }
}