.product-detail__media-gallery {
    width: 100%;
  --padding-inline-start: calc(
    var(--detail-padding-inline-start, 0px) + var(--page-padding, 0px)
  );
  --padding-inline-end: calc(
    var(--detail-padding-inline-end, 0px) + var(--page-padding, 0px)
  );

  display: block;
  overflow: hidden;
}
.list-tile{
    width: 50%;
}
  .pc-none {
      display: none;
  }
  .product-detail__media-gallery .media-gallery__content {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
      width: 100%;
  }
@media (max-width: 959px) {
  /* .product-detail__media-gallery {
    margin-inline: calc(-1 * var(--padding-inline-start))
      calc(-1 * var(--padding-inline-end));
  } */
  .product-detail__media-gallery .media-gallery__content {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
      width: 100vw;
      overflow: hidden;
      /* position: relative;
      right: -20px; */
  }
}

.product-detail__media-gallery .media-gallery__placeholder {
  width: 100%;
  cursor: default;
  background-color: rgb(var(--color-image-background));
}

.product-detail__media-gallery .media-gallery__placeholder svg {
  width: 100%;
  height: 100%;
}



.product-detail__media-gallery .media-gallery__list-wrapper {
  --gap: 10px;

  position: relative;
  width: 100%;
}

.product-detail__media-gallery .media-gallery__sticky-wrapper {
  display: none;
}

.product-detail__media-gallery .media-gallery__list {
  gap: var(--gap, 0);
  align-items: center;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-y: hidden;
  list-style: none;
}

@media (min-width: 960px) {
  .product-detail__media-gallery .media-gallery__list {
    scroll-behavior: auto;
  }
}

.product-detail__media-gallery .media-gallery__list::before {
  display: block;
  flex-shrink: 0;
  width: 100%;
  height: auto;
  aspect-ratio: var(--min-aspect-ratio);
  content: "";
}

.product-detail__media-gallery .media-gallery__preview-icon {
  position: absolute;
  inset-block-end: 20px;
  inset-inline-end: 20px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10%;
  min-width: 30px;
  max-width: 60px;
  pointer-events: none;
  transition: opacity 0.2s;
}

@media (min-width: 960px) {
  .product-detail__media-gallery .media-gallery__preview-icon {
    opacity: 0;
  }
}

.product-detail__media-gallery .media-gallery__preview-icon .icon {
  width: 100%;
  height: 100%;
}

.product-detail__media-gallery .media-gallery__item {
  display: none;
  align-items: center;
  width: 100%;
  overflow: hidden;
  cursor: zoom-in;
}

.product-detail__media-gallery
  .media-gallery__item:hover
  .media-gallery__preview-icon {
  opacity: 1;
}

@media (max-width: 959px) {
  .product-detail__media-gallery
    .media-gallery__item:not(
      [data-media-type="video"],
      [data-media-type="external_video"]
    )
    .media-gallery__media::after {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0;
  }
}

.product-detail__media-gallery .media-gallery__media {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.product-detail__media-gallery .media-gallery__image {
  display: block;
  width: 100%;
  height: auto;
}

.product-detail__media-gallery
  .media-gallery__video[data-loaded]
  + .media-gallery__preview-icon {
  display: none;
}

@media (max-width: 959px) {
  .product-detail__media-gallery
    .media-gallery__video
    + .media-gallery__preview-icon {
    display: none;
  }

  .product-detail__media-gallery
    .media-gallery__video
    .theme-video-media__play-button {
    inset-block-start: unset;
    inset-block-end: 20px;
    inset-inline-start: unset;
    inset-inline-end: 20px;
    width: 10%;
    min-width: 30px;
    max-width: 60px;
    transform: none;
  }
}

.product-detail__media-gallery .media-gallery__arrows {
  display: flex;
  gap: 14px;
  align-items: center;
}

.product-detail__media-gallery .media-gallery__arrow {
  display: flex;
  align-items: center;
  padding: 6px;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
}

.product-detail__media-gallery .media-gallery__arrow .icon {
  width: 10px;
  height: 10px;
}

.product-detail__media-gallery .media-gallery__arrow[name="previous"] .icon {
  transform: rotate(90deg);
}

.product-detail__media-gallery .media-gallery__arrow[name="next"] .icon {
  transform: rotate(-90deg);
}

.product-detail__media-gallery .media-gallery__arrow:disabled {
  cursor: not-allowed;
}

.product-detail__media-gallery .media-gallery__status {
  display: flex;
  align-items: center;
  line-height: 1;
}

.product-detail__media-gallery .media-gallery__pagination {
  display: flex;
  gap: 3px;
  align-items: center;
  justify-content: center;
  max-width: 85%;
  padding: 2px 0;
}

.product-detail__media-gallery .media-gallery__pagination button[name="pager"] {
  flex: 1 0 0;
  width: 30px;
  max-width: 30px;
  height: 2px;
  background-color: rgba(var(--color-text), 0.2);
  border: none;
  transition: background-color 0.3s;
}

.product-detail__media-gallery
  .media-gallery__pagination
  button[name="pager"].is-active {
  background-color: rgb(var(--color-text));
}

.product-detail__media-gallery .media-gallery__thumbnails {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 32px;
}

.product-detail__media-gallery .media-gallery__thumbnail-list {
  --gap: 10px;
  --columns: 5.6;
  --gap-columns: 6;

  gap: var(--gap, 0);
  width: 100%;
}

@media (max-width: 959px) {
  .product-detail__media-gallery .media-gallery__thumbnail-list {
    --columns: 3;
    --gap-columns: 3;
  }
  .pc-none{
    display: block;
  }
}

.product-detail__media-gallery .media-gallery__thumbnail {
  position: relative;
width: calc(50% - var(--gap, 0px)  / 2);
/* width: calc((100% - var(--gap, 0px) * (var(--gap-columns) - 1)) / var(--columns)); */
aspect-ratio: 2/3;  
/* aspect-ratio: 1; */
  padding: 0;
  background: none;
  border: none;
  outline: none;
}

.product-detail__media-gallery .media-gallery__thumbnail::after {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  content: "";
  box-shadow: inset 0 0 0 var(--border-thickness, 0) rgb(var(--color-text));
  transition: box-shadow 0.2s;
}

.product-detail__media-gallery .media-gallery__thumbnail:hover,
.product-detail__media-gallery .media-gallery__thumbnail:focus,
.product-detail__media-gallery .media-gallery__thumbnail.is-select {
  /* --border-thickness: 2px; */
}

.product-detail__media-gallery .media-gallery__thumbnail-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-detail__media-gallery
  .media-gallery__thumbnail-arrows
  button[name="previous"],
.product-detail__media-gallery
  .media-gallery__thumbnail-arrows
  button[name="next"] {
  position: absolute;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
}

.product-detail__media-gallery
  .media-gallery__thumbnail-arrows
  button[name="previous"] {
  inset-inline-start: 16px;
}

.product-detail__media-gallery
  .media-gallery__thumbnail-arrows
  button[name="next"] {
  inset-inline-start: calc(100% - 16px);
}

.product-detail__media-gallery .media-gallery__thumbnail-play-icon {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 50%;
}

.product-detail__media-gallery[data-init="true"] .media-gallery__item,
.product-detail__media-gallery .media-gallery__item.is-active {
  display: flex;
}

.product-detail__media-gallery[data-init="true"] .media-gallery__list::before {
  display: none;
}

.product-detail__media-gallery[data-disabled-preview="true"]
  .media-gallery__item {
  cursor: default;
}

.product-detail__media-gallery[data-disabled-preview="true"]
  .media-gallery__preview-icon {
  display: none;
}

@media (min-width: 960px) {
  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__list,
  .product-detail__media-gallery[data-desktop-layout="thumbnail-carousel"]
    .media-gallery__list {
    aspect-ratio: var(--aspect-ratio);
  }

  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__item,
  .product-detail__media-gallery[data-desktop-layout="thumbnail-carousel"]
    .media-gallery__item {
    height: 100%;
  }
  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__thumbnails {
    flex-wrap: wrap;
    padding: 0;
  }

  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__thumbnail-list {
    --gap: 10px;
    --columns: 6;
    --gap-columns: 6;
  }

  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__thumbnail-arrows {
    display: none;
  }

  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__arrows {
    display: none;
  }

  .product-detail__media-gallery[data-desktop-layout="thumbnail-flatten"]
    .media-gallery__pagination {
    display: none;
  }
  .product-detail__media-gallery[data-desktop-layout="thumbnail-carousel"]
    .media-gallery__arrows {
    display: none;
  }

  .product-detail__media-gallery[data-desktop-layout="thumbnail-carousel"]
    .media-gallery__pagination {
    display: none;
  }
  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__list-wrapper {
    --gap: 4px;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__item,
  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__sticky-wrapper {
    align-items: flex-start;
    width: calc((100% - var(--gap, 0)) / 2);
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__arrows {
    display: none;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__pagination {
    display: none;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__thumbnails {
    display: none;
  }
  .product-detail__media-gallery[data-desktop-layout="two-columns"][data-media-total="1"]
    .media-gallery__item,
  .product-detail__media-gallery[data-desktop-layout="two-columns"][data-media-total="1"]
    .media-gallery__sticky-wrapper {
    width: 100%;
  }
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__list-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, 0);
  }

  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__item {
    align-items: flex-start;
    width: calc((100% - var(--gap, 0)) / 2);
  }

  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__sticky-wrapper {
    width: 100%;
  }

  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__arrows {
    display: none;
  }

  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__pagination {
    display: none;
  }

  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__thumbnails {
    display: none;
  }
  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__list-wrapper,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__list-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap, 0);
    align-items: flex-start;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__sticky-wrapper,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__sticky-wrapper {
    display: block;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__sticky-wrapper
    .media-gallery__item,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__sticky-wrapper
    .media-gallery__item {
    display: flex;
    width: 100%;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__list,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__list {
    display: contents;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__list::before,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__list::before {
    content: unset;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__list
    .is-select,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__list
    .is-select {
    display: none;
  }

  .product-detail__media-gallery[data-desktop-layout="two-columns"]
    .media-gallery__item,
  .product-detail__media-gallery[data-desktop-layout="flatten"]
    .media-gallery__item {
    display: flex;
  }
}

@media (max-width: 959px) {
  .product-detail__media-gallery[data-mobile-layout="two-columns"]
    .media-gallery__list {
    padding: 0 var(--padding-inline-start);
    scroll-padding-left: var(--padding-inline-start);
  }

  .product-detail__media-gallery[data-mobile-layout="two-columns"]
    .media-gallery__item,
  .product-detail__media-gallery[data-mobile-layout="two-columns"]
    .media-gallery__list::before {
    width: calc((100% - var(--gap, 0)) / 2);
  }

  .product-detail__media-gallery[data-mobile-layout="two-columns"]
    .media-gallery__pagination {
    display: none;
  }

  .product-detail__media-gallery[data-mobile-layout="two-columns"]
    .media-gallery__thumbnails {
    display: none;
  }
  .product-detail__media-gallery[data-mobile-layout="two-columns"][data-media-total="1"]
    .media-gallery__item,
  .product-detail__media-gallery[data-mobile-layout="two-columns"][data-media-total="1"]
    .media-gallery__list::before {
    width: 100%;
  }
  .product-detail__media-gallery[data-mobile-layout="two-columns"]:not(
      [data-init="true"]
    )
    .media-gallery__item.is-active
    + .media-gallery__item {
    display: flex;
  }
  .product-detail__media-gallery[data-mobile-layout="hide-thumbnail"]
    .media-gallery__list {
    padding: 0 var(--padding-inline-start);
    scroll-padding-left: var(--padding-inline-start);
  }

  .product-detail__media-gallery[data-mobile-layout="hide-thumbnail"]
    .media-gallery__pagination {
    display: none;
  }

  .product-detail__media-gallery[data-mobile-layout="hide-thumbnail"]
    .media-gallery__thumbnails {
    display: none;
  }
  .product-detail__media-gallery[data-mobile-layout="show-thumbnail"]
    .media-gallery__list,
  .product-detail__media-gallery[data-mobile-layout="show-thumbnail-flatten"]
    .media-gallery__list {
    padding: 0 var(--padding-inline-start);
    scroll-padding-left: var(--padding-inline-start);
  }

  .product-detail__media-gallery[data-mobile-layout="show-thumbnail"]
    .media-gallery__arrows,
  .product-detail__media-gallery[data-mobile-layout="show-thumbnail-flatten"]
    .media-gallery__arrows {
    display: none;
  }

  .product-detail__media-gallery[data-mobile-layout="show-thumbnail"]
    .media-gallery__pagination,
  .product-detail__media-gallery[data-mobile-layout="show-thumbnail-flatten"]
    .media-gallery__pagination {
    display: none;
  }
  .product-detail__media-gallery[data-mobile-layout="show-thumbnail-flatten"]
    .media-gallery__list {
    padding: 0;
    scroll-padding-left: 0;
  }

  .product-detail__media-gallery[data-mobile-layout="show-thumbnail-flatten"]
    .media-gallery__thumbnails {
    flex-wrap: wrap;
    padding: 0 var(--page-padding);
  }

  .product-detail__media-gallery[data-mobile-layout="show-thumbnail-flatten"]
    .media-gallery__thumbnail-arrows {
    display: none;
  }
  .product-detail__media-gallery[data-mobile-layout="fullscreen"]
    .media-gallery__arrows {
    display: none;
  }

  .product-detail__media-gallery[data-mobile-layout="fullscreen"]
    .media-gallery__thumbnails {
    display: none;
  }
}
/* 修复视频缩略图与图片缩略图样式一致 */
.product-detail__media-gallery .media-gallery__thumbnail-video {
    width: 100%;
    /* 与图片一样占满容器宽度 */
    height: 100%;
    /* 与图片一样占满容器高度 */
    object-fit: cover;
    /* 保持比例并覆盖容器，不会拉伸 */
    display: block;
    /* 确保视频是块级元素 */
}

/* 确保视频容器正确定位 */
.product-detail__media-gallery .media-gallery__thumbnail {
    position: relative;
    overflow: hidden;
    /* 防止视频超出容器 */
}

/* 调整视频播放按钮位置（如果需要） */
.media-gallery__thumbnail-play-icon {
    z-index: 10;
    /* 确保播放按钮在视频上方 */
}

/* 确保视频缩略图在各种布局下都能正确显示 */
@media (max-width: 959px) {
    .product-detail__media-gallery .media-gallery__thumbnail-video {
        object-fit: cover;
    }
}

@media (min-width: 960px) {
    .product-detail__media-gallery .media-gallery__thumbnail-video {
        object-fit: cover;
    }
}
/* 修复手机端轮播图显示 */
@media (max-width: 959px) {

    /* 显示轮播容器 */
    .product-detail__media-gallery .media-gallery__list-wrapper.pc-none {
        display: block !important;
        width: 100%;
        overflow: hidden;
    }

    /* 确保轮播列表可见并设置为水平滚动 */
    .product-detail__media-gallery .media-gallery__list {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    /* 每个轮播项占满宽度并支持滚动对齐 */
    .product-detail__media-gallery .media-gallery__item {
        display: flex !important;
        min-width: 100% !important;
        scroll-snap-align: start;
    }

    /* 确保视频在手机端可见并自动播放 */
    .product-detail__media-gallery .media-gallery__thumbnail-video {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* 确保轮播箭头可见 */
    .media-gallery__arrows,
    .media-gallery__thumbnail-arrows {
        display: flex !important;
    }
}

/* 确保视频在手机端能自动播放 */
@media (max-width: 959px) {
    .product-detail__media-gallery video {
        object-fit: cover;
        aspect-ratio: 2/3;
    }

    /* 移除可能阻止视频显示的覆盖层 */
    .theme-video-media__poster {
        display: none !important;
    }
}

/* 保持桌面端原有效果 */
@media (min-width: 960px) {
    .product-detail__media-gallery .pc-none {
        display: none !important;
    }
}
/* 手机端轮播指示点样式 */
.mobile-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    /* 确保在图片上方 */
    padding: 5px 10px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    /* 半透明背景 */
}

.mobile-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    /* 未选中状态 */
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-indicator.is-active {
    width: 24px;
    border-radius: 4px;
    background-color: white;
    /* 选中状态 */
}

/* 确保手机端才显示这些指示点 */
@media (min-width: 960px) {
    .mobile-indicators {
        display: none;
    }
}

/* 确保轮播容器相对定位，让指示点可以绝对定位 */
.media-gallery__list-wrapper.pc-none {
    position: relative;
}
#media-mobile{
        position: relative;
}
#mediaid-1{
    position: relative;
}