/* css */
.magnifier-container {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.slideshow__slider-item {
  border-radius: 12px;
  overflow: hidden;
}
.product_color_item {
  display: flex;
  gap: 10px;
  opacity: 0.6;
}
.product_color2 > div {
  height: 100%;
  width: 50%;
}

.product_right_content {
  padding-top: 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product_main {
  display: flex;
  gap: 70px;
}
.product_color {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  overflow: hidden;
}
.product_left_iamge {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  width: 40%;
}
.magnifier-lens {
  position: absolute;
  z-index: 3;
  cursor: crosshair;
  display: none;
  background: rgba(255, 255, 255, 0.5);
}
.magnifier-preview {
  background-color: #fff;
  box-sizing: content-box;
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  transform: translateX(100%);
  border: 1px solid #000;
  background-image: url("");
  overflow: hidden;
  display: none;
  background-repeat: no-repeat;
  background-size: 900px 900px; /* 2x zoom */
}
.magnifier-preview img {
  position: absolute;
}
.product_content_button {
  display: flex;
  justify-content: center;
}
.product_slideshow__slider {
  height: 100%;
}
.image-property {
  top: 0px;
  left: 0px;
  position: absolute;
}
.previewImage {
  width: 360%;
  height: 360%;
}
.product_nav_tab {
  overflow-y: auto;
  display: flex;
  gap: 12px;
}
.product_nav_tab > div {
  width: 90px;
}
magnifier-component, official-magnifier-component {
  display: block;
  position: relative;
  flex: 1;
}
.product_nav_tab [data-image-ratio] {
  border: 2px solid #666;
  border-radius: 8px;
  cursor: pointer;
}
.product_nav_tab .active {
  border-color: rgb(var(--color-theme-background));
}
.product_info {
  width: 100%;
  align-items: center;
  margin-top: 40px;
  display: flex;
  gap: 100px;
  padding: 40px 15%;
  background-color: var(--background-color);
}
.product_info > div:nth-child(1) {
  flex: 1;
}
.products_main .for_tab_sticky {
  position: sticky;
  z-index: 20;
  transition: top 0.5s cubic-bezier(0.6, 0, 0.4, 1);
}
.product_for_tab {
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  position: sticky;
  width: 100%;
  justify-content: center;
}
.product_for_tab > a {
  background-color: #B9CEAC;
  flex: 1;
  color: #fff;
  --color-text: 255, 255, 255;
  text-align: center;
  padding: 10px;
}
.product_for_tab > a:not([href="javascript:;"]):hover {
  background-color: #82593D;
  color: #fff;
}
.product_for_tab .active {
  background-color: #82593D;
}
html {
  scroll-behavior: smooth; /* 实现平滑滚动 */
}

.products_main {
  display: flex;
  gap: 100px;
}
/* 侧边栏样式 */
.products_main .header__tools-mobile {
  grid-area: tools;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 22px;
  height: 22px;
  transition: all 0.3s;
  justify-content: center;
  position: relative;
}
.products_main .header__tools-mobile > div {
  display: block;
  width: 20px;
  border-radius: 2px;
  height: 4px;
  background: #fff;
  position: absolute;
  left: 50%;
  margin-left: -10px;
  top: 50%;
  transition: 0.8s;
}
.products_main .right_nav .active > div:first-child {
  --color-text: var(--color-theme-background);
  color: rgb(var(--color-theme-background));
}
.products_main .header__tools-mobile .nav1 {
  margin-top: -1px;
}
.products_main .header__tools-mobile .nav2 {
  margin-top: -8px;
}
.products_main .header__tools-mobile .nav3 {
  margin-top: 6px;
}
.products_main .main-category-left {
  flex: 1;
}
.main-slide-nav {
  box-shadow: 0px 0px 9px 1px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  background-color: #fff;
  border: 1px solid rgb(var(--color-theme-background));
}
.main-slide-nav__name {
  padding: 14px;
  display: flex;
  align-items: center;
  background-color: rgb(var(--color-theme-background));
  color: #fff;
}
.sorts_item {
  display: flex;
  gap: var(--grid-horizontal-space);
  align-items: center;
  justify-content: space-between;
}
.sorts_text {
  padding: 14px 20px;
}
.sorts_text:hover {
  --color-text: var(--color-theme-background);
  color: rgb(var(--color-theme-background));
}
.product_left_iamge .splide__arrows > button:nth-child(1) {
  transform: rotate(270deg);
}
.product_left_iamge .splide__arrows > button:nth-child(2) {
  transform: rotate(90deg);
}

.products_main .splide__arrows {
  position: revert;
}
.products_main .splide__arrows {
  position: revert;
}
.products_main .splide__arrows button {
  position: absolute;
  left: -90px;
  z-index: 20;
}
.products_main .splide__arrows button:first-child {
  top: 0px;
  transform: rotate(270deg);
}
.products_main .splide__arrows button:last-child {
  bottom: 0px;
}
.product_describe_list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
section {
  scroll-margin-top: 200px;
}
.product_describe_list [data-title-style="1"] {
  display: inline-block;
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 6px 12px;
  margin-left: 8px;
}
.product_describe_list [data-title-mian-style="1"] {
  border-bottom: 2px solid rgb(var(--color-theme-background));
}
.product_describe_list [data-title-style="1"]::before {
  z-index: -1;
  transform: skew(-20deg);
  content: "";
  width: 100%;
  top: 0;
  left: 0px;
  height: 100%;
  background-color: rgb(var(--color-theme-background));
  position: absolute;
}
.main-category-left menu-sorts {
  display: flex;
}
.main-category-left .box-fold {
  overflow: hidden;
  transition: all 0.3s;
}
.products_main box-fold {
  display: block;
  flex: none;
}
.for_tab_active {
  position: fixed !important;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 960px) {
  .product_for_tab a {
    font-size: 12px;
  }
  .product_main {
    flex-direction: column;
    gap: 10px;
  }
  .product_left_iamge {
    min-width: 0px;
    width: 100%;
  }
  .products_main .splide__arrows > button {
    width: 30px;
    height: 30px;
  }
  .product_nav_tab {
    width: 70px;
  }
  .splide__arrows > button > * {
    width: 10px;
    height: 10px;
  }
  .magnifier-container {
    display: none;
  }
  .products_main .splide__arrows button {
    left: -70px;
  }
}