/*
 * .jc-product-gallery 产品图库根容器
 * .jc-product-gallery__media 单媒体容器
 * .jc-product-gallery__viewport 主视口
 * .jc-product-gallery__slide 单个幻灯片
 * .jc-product-gallery__video 视频容器
 * .jc-product-gallery__main 主展示区
 * .jc-product-gallery__track 滑动轨道
 * .jc-product-gallery__thumbs 缩略图区
 * .jc-product-gallery__thumbs-viewport 缩略图视口
 * .jc-product-gallery__thumbs-track 缩略图轨道
 * .jc-product-gallery__thumb 缩略图按钮
 * .jc-product-gallery__thumb-media 缩略图媒体层
 * .jc-product-gallery__thumb-badge 缩略图标记
 * .jc-product-gallery__nav 翻页按钮
 * .jc-product-gallery__nav--prev 上一张按钮
 * .jc-product-gallery__nav--next 下一张按钮
 * .jc-product-gallery__dots 圆点导航组
 * .jc-product-gallery__dot 单个圆点
 */
.jc-product-gallery {
  --jc-product-gallery-column-gap: 1rem;
  --jc-product-gallery-thumb-gap: 0.75rem;
  --jc-product-gallery-thumb-size: 5rem;
  --jc-product-gallery-thumbs-height: calc(
    (var(--jc-product-gallery-thumb-size) * 4) +
      (var(--jc-product-gallery-thumb-gap) * 3)
  );
  width: 100%;
  min-width: 0;
}

.jc-product-gallery__media,
.jc-product-gallery__viewport {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fafafa;
}

.jc-product-gallery .ri-image-line {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 3.75rem;
  color: #d4d4d8;
}

.jc-product-gallery__media img,
.jc-product-gallery__media iframe,
.jc-product-gallery__slide img,
.jc-product-gallery__slide iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.jc-product-gallery__media img,
.jc-product-gallery__slide img {
  background: #fafafa;
  object-fit: cover;
}

.jc-product-gallery__media iframe,
.jc-product-gallery__slide iframe {
  border: 0;
}

.jc-product-gallery__media--video {
  overflow: hidden;
}

.jc-product-gallery--interactive {
  display: grid;
  grid-template-columns: var(--jc-product-gallery-thumb-size) minmax(0, 1fr);
  grid-template-areas: "thumbs main";
  gap: var(--jc-product-gallery-column-gap);
  align-items: start;
  opacity: 0;
  transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.jc-product-gallery--interactive.is-ready {
  opacity: 1;
}

.jc-product-gallery__thumbs {
  grid-area: thumbs;
  inline-size: var(--jc-product-gallery-thumb-size);
  block-size: var(--jc-product-gallery-thumbs-height);
  min-width: 0;
  overflow: hidden;
}

.jc-product-gallery__thumbs-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.jc-product-gallery__thumbs-track {
  display: flex;
  flex-direction: column;
  gap: var(--jc-product-gallery-thumb-gap);
}

.jc-product-gallery__thumb {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: var(--jc-product-gallery-thumb-size);
  flex: 0 0 var(--jc-product-gallery-thumb-size);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  appearance: none;
  border: 1px solid var(--jelly-color-border, #e5e7eb);
  border-radius: 0;
  background: #fafafa;
  opacity: 0.45;
  transition: opacity 0.2s ease;
  box-sizing: border-box;
}

.jc-product-gallery__thumb:hover {
  opacity: 0.8;
}

.jc-product-gallery__thumb:focus-visible {
  opacity: 1;
  outline: none;
}

.jc-product-gallery__thumb img,
.jc-product-gallery__thumb-media {
  display: block;
  width: 100%;
  height: 100%;
}

.jc-product-gallery__thumb img {
  object-fit: cover;
}

.jc-product-gallery__thumb.is-active {
  opacity: 1;
}

.jc-product-gallery__thumb-media {
  position: relative;
}

.jc-product-gallery__thumb-badge {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: flex;
  width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.75rem;
}

.jc-product-gallery__main {
  grid-area: main;
  position: relative;
  min-width: 0;
  border: 1px solid var(--jelly-color-border, #e5e7eb);
}

.jc-product-gallery__viewport {
  position: relative;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
}

.jc-product-gallery__viewport:active {
  cursor: grabbing;
}

.jc-product-gallery__track {
  display: flex;
  height: 100%;
  transition: transform 320ms ease;
  will-change: transform;
}

.jc-product-gallery__track.is-dragging {
  transition: none;
}

.jc-product-gallery__slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
  background: #fafafa;
}

.jc-product-gallery__video {
  width: 100%;
  height: 100%;
}

.jc-product-gallery__nav {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #000;
  font-size: 2.25rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}

.jc-product-gallery__nav:hover {
  opacity: 0.65;
}

.jc-product-gallery__nav:focus-visible {
  opacity: 1;
  outline: none;
}

.jc-product-gallery__nav[disabled] {
  pointer-events: none;
  opacity: 0.2;
}

.jc-product-gallery__nav--prev {
  left: 0.75rem;
}

.jc-product-gallery__nav--next {
  right: 0.75rem;
}

.jc-product-gallery__dots {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transform: translateX(-50%);
}

.jc-product-gallery__dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #000;
  opacity: 0.25;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.jc-product-gallery__dot:focus-visible {
  opacity: 1;
  outline: none;
}

.jc-product-gallery__dot.is-active {
  opacity: 1;
}

@media (min-width: 768px) {
  .jc-product-gallery--interactive.jc-product-gallery--thumbs-left {
    grid-template-columns: var(--jc-product-gallery-thumb-size) minmax(0, 1fr);
    grid-template-areas: "thumbs main";
  }

  .jc-product-gallery--interactive.jc-product-gallery--thumbs-right {
    grid-template-columns: minmax(0, 1fr) var(--jc-product-gallery-thumb-size);
    grid-template-areas: "main thumbs";
  }

  .jc-product-gallery--interactive.jc-product-gallery--thumbs-bottom {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "thumbs";
  }

  .jc-product-gallery--thumbs-bottom .jc-product-gallery__thumbs {
    inline-size: 100%;
    block-size: var(--jc-product-gallery-thumbs-height);
  }

  .jc-product-gallery--thumbs-bottom .jc-product-gallery__thumbs-track {
    flex-direction: row;
  }

  .jc-product-gallery--thumbs-bottom .jc-product-gallery__thumb {
    inline-size: var(--jc-product-gallery-thumb-size);
    block-size: var(--jc-product-gallery-thumb-size);
    flex: 0 0 var(--jc-product-gallery-thumb-size);
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 767px) {
  .jc-product-gallery {
    --jc-product-gallery-column-gap: 0.75rem;
    --jc-product-gallery-thumb-gap: 0.5rem;
  }

  .jc-product-gallery--interactive {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "thumbs";
  }

  .jc-product-gallery__thumbs {
    inline-size: 100%;
    block-size: auto;
    padding-bottom: 0.25rem;
  }

  .jc-product-gallery__thumbs-track {
    flex-direction: row;
  }

  .jc-product-gallery__thumb {
    inline-size: calc((100% - (var(--jc-product-gallery-thumb-gap) * 3)) / 4);
    block-size: auto;
    flex: 0 0 calc((100% - (var(--jc-product-gallery-thumb-gap) * 3)) / 4);
    aspect-ratio: 1 / 1;
  }

  .jc-product-gallery__nav {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.25rem;
  }

  .jc-product-gallery__dots {
    bottom: 0.5rem;
    gap: 0.375rem;
  }

  .jc-product-gallery__dot {
    width: 0.375rem;
    height: 0.375rem;
  }
}