/** Shopify CDN: Minification failed

Line 153:0 Unexpected "}"

**/
.product-image-gallery {
  overflow: hidden;
}

.product-image-gallery__accent {
  width: 100%;
  height: var(--pig-accent-height, 0.8rem);
  background: var(--pig-accent-color, #e8dff0);
  border: 0;
  margin: 0;
}

.product-image-gallery__inner {
  width: 100%;
}

.product-image-gallery__viewport {
  overflow: hidden;
  width: 100%;
}

.product-image-gallery__viewport--scroll {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.product-image-gallery__viewport--scroll::-webkit-scrollbar {
  display: none;
}

.product-image-gallery__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--pig-gap-mobile, 1.2rem);
}

.product-image-gallery__track--scroll {
  width: max-content;
  min-width: 100%;
  padding-inline: var(--product-inline-gutter, 24px);
  scroll-snap-type: x mandatory;
}

.product-image-gallery__track--grid {
  flex-wrap: wrap;
  overflow: visible;
  width: 100%;
  padding-inline: 0;
}

@media screen and (min-width: 750px) {
  .product-image-gallery__track--scroll {
    gap: var(--pig-gap, 1.6rem);
    padding-inline: max(var(--product-inline-gutter, 80px), calc((100% - var(--page-width, 120rem)) / 2 + var(--product-inline-gutter, 80px)));
  }
}

@media screen and (min-width: 990px) {
  .product-image-gallery__track--grid {
    display: grid;
    flex-wrap: unset;
    grid-template-columns: repeat(var(--pig-columns, 8), minmax(0, 1fr));
    gap: var(--pig-gap, 1.6rem);
  }
}

.product-image-gallery__track--marquee {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: 0;
  overflow: visible;
  scroll-snap-type: none;
  padding-bottom: 0;
  animation: product-image-gallery-marquee var(--pig-marquee-duration, 45s) linear infinite;
  will-change: transform;
}

.product-image-gallery__group {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--pig-gap-mobile, 1.2rem);
  padding-right: var(--pig-gap-mobile, 1.2rem);
  flex: 0 0 auto;
  min-width: max-content;
}

@media screen and (min-width: 750px) {
  .product-image-gallery__group {
    gap: var(--pig-gap, 1.6rem);
    padding-right: var(--pig-gap, 1.6rem);
  }
}

.product-image-gallery__item {
  flex: 0 0 var(--pig-item-width-mobile, 12rem);
  width: var(--pig-item-width-mobile, 12rem);
  scroll-snap-align: start;
  min-width: var(--pig-item-width-mobile, 12rem);
  max-width: var(--pig-item-width-mobile, 12rem);
}

@media screen and (min-width: 750px) {
  .product-image-gallery__track--marquee .product-image-gallery__item,
  .product-image-gallery__track--scroll .product-image-gallery__item {
    flex: 0 0 var(--pig-item-width, 14rem);
    width: var(--pig-item-width, 14rem);
    min-width: var(--pig-item-width, 14rem);
    max-width: var(--pig-item-width, 14rem);
  }
}

.product-image-gallery__track--grid .product-image-gallery__item {
  flex: unset;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.product-image-gallery__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.product-image-gallery__image-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: var(--pig-image-radius, 16px);
  background: rgba(var(--color-foreground), 0.06);
  aspect-ratio: var(--pig-aspect-ratio, 2 / 3);
}

.product-image-gallery__image-wrap img,
.product-image-gallery__image-wrap svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: var(--pig-object-fit, cover);
  object-position: center center;
  border-radius: inherit;
}
}

.product-image-gallery__caption {
  margin: 0.8rem 0 0;
  font-size: var(--pig-caption-size, 1.3rem);
  line-height: 1.4;
  color: var(--pig-caption-color, rgba(var(--color-foreground), 0.75));
  text-align: center;
}

.product-image-gallery__placeholder {
  margin: 0;
  font-size: 1.4rem;
  color: rgba(var(--color-foreground), 0.65);
}

@keyframes product-image-gallery-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media screen and (hover: hover) {
  .product-image-gallery__viewport--pause-on-hover:hover .product-image-gallery__track--marquee {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-image-gallery__track--marquee {
    animation: none;
  }
}