.product-gallery{
      width: 100%;
      max-width: 1270px !important;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-self: center;
      
    }
    .product-gallery-inner{
      width: 100%;
      max-width: 100%;
    }

/* example */
.product-gallery swiper-container {
  --swiper-navigation-color: #111;
  --swiper-navigation-size: 18px;
  --swiper-pagination-color: #111;
  --swiper-pagination-bottom: 10px;
}

/* this is the correct way to style the arrows in the Element build */
.product-gallery swiper-container::part(button-next),
.product-gallery swiper-container::part(button-prev) {
  background: rgb(255 255 255 / 87%);      /* will now show */
  padding: 10px 17px 10px 15px;     /* hit area */
  border-radius: 100%;     /* optional */
  /* other styles are fine here: box-shadow, border, etc. */
}
.product-gallery swiper-container::part(button-next){
    padding: 10px 15px 10px 17px;  
}
.product-gallery swiper-container::part(button-next):hover,
.product-gallery swiper-container::part(button-prev):hover{
    background-color: #ffff;
}
    swiper-container {
      width: 100%;
      height: 100%;
    }
    swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #ffff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      width:100%;
    }

    swiper-slide img {
      display: block;
      object-fit: cover;
      border-radius: 12px;

    }
.product-gallery swiper-container.mySwiper {
  display: block;           /* be explicit */
  border-radius: 24px;
  overflow: hidden;         /* <-- this actually clips slides */
}
.product-gallery swiper-container::part(bullet) {
  background: var(--primary-white); 
  opacity: 1;                   /* inactive bullet color */                            
}
.product-gallery swiper-container::part(bullet-active) {
  background: var(--primary-color);
}

/* Smooth in/out for images inside slides */
.product-gallery .mySwiper swiper-slide img {
  transition: filter 300ms ease, opacity 300ms ease;
}

/* DEFAULT (no preview) → nothing blurred */
.product-gallery .mySwiper:not(.preview-mode) swiper-slide img {
  filter: none;
  opacity: 1;
}

/* PREVIEW MODE → blur everything... */
.product-gallery .mySwiper.preview-mode swiper-slide img {
  filter: blur(4px);
  opacity: 0.7;
}

/* ...except the slide we mark as "applied" */
.product-gallery .mySwiper.preview-mode swiper-slide[data-variation-applied="1"] img {
  filter: none;
  opacity: 1;
}

/* Avoid blur getting clipped by the wrapper */
.product-gallery .mySwiper::part(wrapper) { overflow: visible; }

/* If your slides use background-image instead of <img>, swap selectors:
.product-gallery .mySwiper swiper-slide { transition: filter 300ms ease, opacity 300ms ease; }
.product-gallery .mySwiper:not(.preview-mode) swiper-slide { filter:none; opacity:1; }
.product-gallery .mySwiper.preview-mode swiper-slide { filter:blur(4px); opacity:.7; }
.product-gallery .mySwiper.preview-mode swiper-slide[data-variation-applied="1"] { filter:none; opacity:1; }
*/