/* --- 基础布局复用 --- */
/* 直接使用你提供的参考 CSS 中的 flex 布局来创建左右结构 */
#product-group-container.product-model {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4rem;
}

/* --- 左侧滑块区域修正 (关键部分) --- */
/* 1. 设置左侧容器的尺寸，与原版保持一致 */
#product-group-container .model-left {
  width: 9.6rem;
  height: 11.52rem;
  /* Swiper 需要一个明确的定位上下文来放置导航按钮 */
  position: relative; 
  background-color: #D9D9D9; /* 保留背景色，防止图片加载慢时一片空白 */
}

/* 2. 让 Swiper 实例完全填充父容器 (.model-left) */
#product-group-container .model-left .swiper.product-image-slider {
  width: 100%;
  height: 100%;
}

#product-group-container .swiper {
 margin-left: 0px;
 margin-right: 0px;
}

/* 3. 确保滑块内的图片能正确显示 */
#product-group-container .model-left .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 使用 cover 模式确保图片填充满容器且不变形 */
}


/* --- 右侧内容区域 --- */
/* 右侧容器的样式基本可以完全复用，只需确保选择器权重即可 */
#product-group-container .model-right {
  margin-left: 1.59rem;
  margin-top: 0.32rem;
  width: 5.4rem;
}

/* 复用所有 model-right 内部的元素样式 */
#product-group-container .model-right .name {
  font-size: 35px;
  line-height: 46px;
  margin-bottom: 21px;
}
#product-group-container .model-right .name span {
  font-size: 18px;
}
#product-group-container .model-right .line {
  width: 100%;
  height: 2px;
  margin-bottom: 28px;
  background-color: #000;
}
#product-group-container .model-right .line-02 {
  width: 100%;
  height: 2px;
  background-color: #e2e2e2;
}
#product-group-container .model-right .details {
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 40px;
}
#product-group-container .model-right .details .more {
  color: #000;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 1px solid #000;
}
#product-group-container .model-right .details .sup {
  font-size: 13px;
  color: #656565;
}
#product-group-container .model-right .accordion .title {
  color: #000;
  line-height: 37px;
  cursor: pointer;
  user-select: none;
}
#product-group-container .model-right .accordion .details {
  font-size: 13px;
  color: #656565;
  margin-bottom: 125px;
  padding-bottom: 12px;
  overflow: hidden;
}
#product-group-container .model-right .price {
  margin-top: 125px;
  font-size: 18px;
}
#product-group-container .model-right .buy {
  display: block;
  margin-top: 30px;
  width: 380px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #FFF;
  font-size: 18px;
  background-color: #000;
  margin-bottom: 40px;
  cursor: pointer;
}


/* --- Swiper 导航和分页器样式 --- */
/* 你可以根据你的 UI 设计调整颜色、大小和位置 */
#product-group-container .swiper-button-next,
#product-group-container .swiper-button-prev {
    color: #000; /* 按钮箭头颜色 */
    --swiper-navigation-size: 28px; /* 按钮箭头大小 */
}

#product-group-container .swiper-pagination-bullet {
    background: #000; /* 分页器圆点颜色 */
}
#product-group-container .swiper-pagination-bullet-active {
    background: #555; /* 当前激活圆点的颜色 */
}


/* --- 响应式布局调整 --- */
@media (max-width: 768px) {
  #product-group-container.product-model {
    flex-direction: column;
    padding: 0px 20px;
    box-sizing: border-box;
    margin-bottom: 120px;
  }
  #product-group-container .model-left {
    width: 100%;
    height: auto; /* 在移动端高度自适应 */
    aspect-ratio: 960 / 1152; /* 保持与原图相同的宽高比 */
    margin-bottom: 40px;
  }
  #product-group-container .model-right {
    width: 100%;
    height: auto;
    margin-left: 0px;
  }
}