/* 重置 & 基础布局 */

    .itemboxcontainer {
      width: 100%;
      margin: 0 auto;
      position: relative;
      display: flex;
      justify-content: space-between;
      margin-bottom: 50rem;
    }

    /* 左侧预览区 */
    .preview-section {
      width: 46%;
      /* max-width: 500rem; */
    }
    .main-img-wrap {
      position: relative;
      width: 100%;
      height: 560rem;
      margin-bottom: 20rem;
      border: 1rem solid #ddd;
      background: #fff;
      overflow: hidden;
      cursor: crosshair;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #main-img {
      max-width: 90%;
      max-height: 90%;
      object-fit: scale-down;
      display: block;
    }
    /* 放大镜指示器 */
    #magnifier {
      position: absolute;
      width: 150rem;
      height: 150rem;
      border: 2rem solid #991111;
      /* border-radius: 50%; */
      display: none;
      pointer-events: none;
      background: rgba(255,255,255,0.1);
    }

    /* 缩略图轮播 - 核心样式 */
    .thumb-carousel {
      display: flex;
      align-items: center;
      width: 100%;
      overflow: hidden;
      position: relative;
      padding: 0 40rem;
      padding-top: 5rem !important;
      padding-bottom: 5rem !important;
    }
    .thumb-track {
      display: flex;
      gap: 10rem;
      transition: transform 0.3s ease-out;
      will-change: transform;
    }
    .thumb-item {
      flex: 0 0 auto; /* 关键修复：不使用flex:1，改为固定宽度计算 */
      height: 113rem;
      cursor: pointer;
      border: 2rem solid transparent;
      transition: border-color 0.3s;
    }
    .thumb-item img {
      width: 100%;
      height: 100%;
      object-fit: scale-down;
      display: block;
    }
    .thumb-item.active {
      border-color: #991111;
      /* box-shadow: 0 0 0 2rem white, 0 0 0 4rem #991111; */
    }
    /* 轮播按钮 */
    .carousel-btn {
      width: 34rem;
      height: 34rem;
      border: none;
      background: #991111ad;
      color: #fff;
      cursor: pointer;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      z-index: 10;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

.carousel-btn img {
  width: 100%;
}
    .carousel-btn#prev-btn {
      left: 5rem;
    }
    .carousel-btn#next-btn {
      right: 5rem;
    }
    .carousel-btn:hover {
      background: #991111;
      transform: translateY(-50%) scale(1.1);
    }
    .carousel-btn:active {
      transform: translateY(-50%) scale(0.95);
    }
    .carousel-btn:disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: translateY(-50%);
    }

    /* 右侧区域 */
    .right-section {
      position: relative;
      width: 50%;
      background: #242933;
      background: url(../image/productviewbg.jpg) center no-repeat;
      background-size: cover;
      z-index: 1;
    }

.right-section:after {
content:"";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #9911119c;
z-index: -1;
background: #193668b3;
}

    /* 右侧放大区 */
    .zoom-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 300rem;
      height: 200rem;
      border: 3rem solid #ddd;
      background: #fff;
      overflow: hidden;
      z-index: 999;
      display: none;
    }
    #zoom-img {
      position: absolute;
      width: 326%;
      /* height: 300%; */
      display: block;
      object-fit: cover;
    }

    /* 右侧固定内容区 */
    .fixed-content {
      margin-top: 20rem;
      background: #fff;
      border: 1rem solid #ddd;
      padding: 20rem;
      border-radius: 4rem;
      position: relative;
      z-index: 20;
    }
    .product-title {
      font-size: 1.2rem;
      margin-bottom: 15rem;
      color: #333;
    }
    .product-price {
      color: #e53935;
      font-size: 1.4rem;
      margin-bottom: 15rem;
    }
    .contact-btn {
      display: inline-block; 
      padding: 10rem 20rem; 
      background: #991111; 
      color: #fff; 
      text-decoration: none; 
      border-radius: 4rem; 
      transition: opacity 0.3s;
      width: fit-content;
    }

    /* 更多右侧内容 */
    .additional-content {
      margin-top: 20rem;
      background: #fff;
      border: 1rem solid #ddd;
      padding: 20rem;
      border-radius: 4rem;
    }

    /* 响应式适配 */
    @media (max-width: 1100px) {
      .itemboxcontainer {
        flex-direction: column;
        width: 100%;
      }
      .right-section {
        position: static;
        width: 100%;
        max-width: 500rem;
        margin-top: 40rem;
        left: 0;
        align-self: center;
      }
    }