@charset "UTF-8";
.pling-product-gallery {
  position: relative;
  padding-bottom: var(--spacing-03, 15px);
  /* Slides are as wide as their media, so the track would otherwise report a
     max-content width of the whole strip and push its layout column open.
     The gallery column takes the free space instead of its content size. */
  flex: 1 1 0;
  min-width: 0;
  /* Makes 100cqw below the gallery's own width. Safe against circularity:
     inline-size containment only fixes the inline axis, which the flex line
     already decides without asking the content. */
  container-type: inline-size;
  /* The stage height is fixed, so the carousel never changes height — not
     between slides of different ratios, not when a set switch swaps them.
     Each slide is then only as wide as its own media needs at that height.
     Below the cap the height follows the gallery's own width (not the
     viewport's: page padding and the scrollbar make 100vw wider than the
     column, which would letterbox a square instead of filling it).
     Overridable per site/theme. */
  --pg-media-height: min(100cqw, 600px);
}

.pling-product-gallery__slide {
  box-sizing: border-box;
  height: var(--pg-media-height);
  width: auto;
  max-width: 100%;
  border: 1px solid #d4d4d4;
  border-radius: var(--border-radius-width, 5px);
  overflow: hidden;
}

/* A set with one slide leaves the rest of the stage empty, and a lone image
   pinned to the left edge reads as a layout mistake rather than as a carousel
   with nothing to scroll to. Centre it instead.

   Stated as :has() rather than a state class on purpose: a set switch changes
   the slide count, and this way the layout follows without the rendering code
   having to know about it. */
.pling-product-gallery__main .swiper-wrapper:has(> .pling-product-gallery__slide:only-child) {
  justify-content: center;
}

/* Swiper writes spaceBetween as an inline margin-right on every slide, so the
   centred slide would otherwise sit half a gap off. Inline styles only lose to
   !important. */
.pling-product-gallery__main .swiper-wrapper > .pling-product-gallery__slide:only-child {
  margin-right: 0 !important;
}

/* Carousel slides are all exactly --pg-media-height tall so the stage never
   changes height, and max-width clamps the rare slide too wide for its column.
   For a lone slide that clamp is a problem rather than a safety net: the box
   keeps the full cap height while losing width, stops matching its own ratio,
   and object-fit letterboxes the image inside it. Derive the width from the cap
   instead and let aspect-ratio give back the height, so the box fits the image
   at any ratio — landscape gets shorter, portrait narrower, neither is boxed.
   --pg-ratio is written alongside aspect-ratio by the template and gallery.js;
   the fallback keeps square behaviour if only one of them has been updated. */
.pling-product-gallery__main .swiper-wrapper > .pling-product-gallery__slide:only-child {
  width: min(100%, var(--pg-media-height) * var(--pg-ratio, 1));
  height: auto;
}

/* Nothing in the footer has a job to do for a single slide: the strip holds one
   thumbnail that only re-selects the image already shown, and both arrows are
   permanently disabled. Keyed off the slide count rather than the thumb count,
   so it stays in step with the centring above. */
.pling-product-gallery:has(.pling-product-gallery__main .pling-product-gallery__slide:only-child) .pling-product-gallery__footer {
  display: none;
}

/* A set switch replaces every slide at once. Swapping them in place cuts the
   outgoing images away in a single frame, which reads as a glitch next to the
   column width gliding to its new split — so the stage is faded out first and
   the swap happens while it is transparent. gallery.js drives the class and
   waits FADE_MS, which must stay in step with the duration here.

   The footer fades with the stage: dropping to a single slide hides it outright
   (display is not animatable), and at zero opacity that is no longer visible. */
.pling-product-gallery__main,
.pling-product-gallery__footer {
  transition: opacity 0.16s ease;
}

.pling-product-gallery.is-switching .pling-product-gallery__main,
.pling-product-gallery.is-switching .pling-product-gallery__footer {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pling-product-gallery__main,
  .pling-product-gallery__footer {
    transition: none;
  }
}
.pling-product-gallery__media {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f4;
  overflow: hidden;
}

.pling-product-gallery__media img,
.pling-product-gallery__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pling-product-gallery__media {
  position: relative;
}

/* No native controls; the video must never intercept drag gestures. */
.pling-product-gallery__media video {
  pointer-events: none;
}

.pling-product-gallery__mute {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  cursor: pointer;
}

.pling-product-gallery__mute .pling-product-gallery__mute-off {
  display: none;
}

.pling-product-gallery__mute.is-muted .pling-product-gallery__mute-off {
  display: block;
}

.pling-product-gallery__mute.is-muted .pling-product-gallery__mute-on {
  display: none;
}

.pling-product-gallery__footer {
  display: flex;
  /* Top, not centre: the arrows are shorter than the thumbnails, and centring
     them drops them away from the stage as the thumbnails grow. */
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
}

.pling-product-gallery__thumbs {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.pling-product-gallery__thumb {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #f5f5f4;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.pling-product-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pling-product-gallery__thumb:hover,
.pling-product-gallery__thumb.is-active {
  opacity: 1;
}

.pling-product-gallery__thumb.is-active {
  border-color: currentColor;
}

.pling-product-gallery__thumb--video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='rgba(0,0,0,0.45)'/><path d='M10 8l6 4-6 4z' fill='white'/></svg>") center/24px 24px no-repeat;
}

.pling-product-gallery__nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.pling-product-gallery__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.pling-product-gallery__arrow.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}

.pling-product-gallery--placeholder img {
  max-width: 100%;
  max-height: var(--pg-media-height);
  height: auto;
}

/*# sourceMappingURL=gallery.css.map */