/* photoswipe - START */
.gallery-pswp-link_hover {
  position: relative;
  display: block;
  border-radius: var(--gallery-image-radius, 0);
  overflow: hidden;

  @media screen and (min-width: 768px) {
    &:not(:hover) .gallery-pswp-overlay {
      display: none;
    }
  }

  .gallery-pswp-overlay {
    display: flex;
    position: absolute;
    inset: 0;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    background: linear-gradient(0deg,rgba(24, 24, 56, 1) 0%, rgba(24, 24, 56, 0) 100%);
  }

  .btn_pswp {
    border-radius: 2em;
    padding: 10px 16px;
    background-color: var(--gallery-preview-color, rgba(0,0,0,.5));
    color: #fff;
    font-size: 14px;
    font-weight: 600;
  }
}
/* photoswipe - END */

/* swiper - START */
/* - swiper: navigation arrows - START */
.adv_comp-swiper-button-next,
.adv_comp-swiper-button-prev {
  z-index: 9;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width:  var(--gallery-nav-arrows-size, 32px);
  height:  var(--gallery-nav-arrows-size, 32px);
  border-radius: 60px;
  background-color: rgba(255,255,255,1);
  box-shadow: 0 0 8px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;

  &:before {
    content: '';
    display: inline-block;
    aspect-ratio: 1;
    width: calc(var(--gallery-nav-arrows-size) * 2 / 3);
    background-color: var(--gallery-nav-arrows-color);
    color: var(--gallery-nav-arrows-color, rgba(0,0,0,1));
    position: relative;
    opacity: 0.75;
    
    --mask-image-value: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 18L8 12L14 6L15.4 7.4L10.8 12L15.4 16.6L14 18Z" fill="black"/></svg>');
    mask-image: var(--mask-image-value);
    mask-repeat: no-repeat;
    mask-size: cover;
    mask-position: center;
    -webkit-mask-image: var(--mask-image-value);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    -webkit-mask-position: center;
  }
  &:hover:before {
    opacity: 1;
  }
}
.adv_comp-swiper-button-prev {
  inset-inline-start: 10px;
}
.adv_comp-swiper-button-next {
  inset-inline-end: 10px;
  &:before {
    transform: scaleX(-1);
  }
}
/* - swiper: navigation - END */

/* - swiper: pagination - START */
.adv_comp-swiper-pagination {
  --gallery-dot-unit: var(--gallery-nav-dots-size, 12px);
  display: flex;
  justify-content: center;
  padding: var(--gallery-dot-unit) 0 calc(var(--gallery-dot-unit) * 2);

  .adv_comp-bullet {
    transition: all 0.3s ease-in-out;
    width: calc(var(--gallery-dot-unit) * 2);
    height: calc(var(--gallery-dot-unit) * 2);
    padding: calc(var(--gallery-dot-unit) / 2);

    &:before {
      transition: all 0.3s ease-in-out;
      content: '';
      position: relative;
      display: block;
      width: var(--gallery-dot-unit);
      height: var(--gallery-dot-unit);
      background-color: var(--gallery-nav-dots-color, rgba(0,0,0,.25));
      border-radius: var(--gallery-dot-unit);
    }
    &:hover:before {
      background-color: var(--gallery-nav-dot-active-color, rgba(0,0,0,.50));
    }

    &.is-active {
      width: calc(var(--gallery-dot-unit) * 6);
      &:before {
        width: calc(var(--gallery-dot-unit) * 5);
        background-color: var(--gallery-nav-dot-active-color, rgba(0,0,0,.50));
      }
    }
  }
}
/* - swiper: pagination - END */
/* swiper adjustments - END */

/* gallery-preview-images - START */
.gallery-preview-images {
  max-width: 510px;
  margin: 20px auto 0;
  position: relative;

  .swiper-slide {
    display: flex !important;
    height: auto;
    align-items: center;
    justify-content: center;
    object-fit: cover;
    background-color: rgba(255,255,255,1);
    cursor: pointer;
    border: 2px solid var(--product-gallery-preview-border-color, transparent);

    &:not(.swiper-slide-thumb-active) {
      border-color: color-mix(in srgb, var(--product-gallery-preview-border-color, transparent) 50%, white);
    }

    img {
      height: 100%;
      width: 100%;
      object-fit: contain;
    }
  }

  .adv_comp-swiper-button-prev {
    inset-inline-start: -10px;
    transform: translateX(-100%) translateY(-50%);
  }
  .adv_comp-swiper-button-next {
    inset-inline-end: -10px;
    transform: translateX(100%) translateY(-50%);
  }
}
/* gallery-preview-images - END */