/* 详情页头部返回按钮 */
    .back-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--primary-color);
      text-decoration: none;
      margin-bottom: 20px;
      font-size: 16px;
    }
    .back-btn:hover {
      color: var(--primary-dark);
    }

    /* 产品详情页布局 */
    .product-detail-page {
      padding: 100px 0 80px;
      background: var(--bg-color);
    }
    .detail-container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 20px;
      background: var(--white);
      border-radius: 10px;
      box-shadow: var(--shadow);
      padding: 40px;
    }
    .product-title {
      font-size: 28px;
      color: var(--text-color);
      margin-bottom: 20px;
      border-bottom: 2px solid var(--primary-color);
      padding-bottom: 10px;
    }
    /* 产品图片展示*/
    .product-img-group {
     display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
      gap: 20px; 
      margin: 30px 0;
      }
    .product-img-item {
      width: 100%;
      height: 200px; 
      object-fit: contain; 
      background: #f9f9f9;
      border-radius: 8px;
      padding: 15px; 
      transition: all 0.3s ease; 
      cursor: zoom-in; 
      border: 1px solid #eee; 
      }

    /* 鼠标悬浮放大图片，查看细节 */
    .product-img-item:hover {
      transform: scale(1.03); 
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); 
    }

    /* 点击图片弹出大图查看*/
    .product-img-item.modal-trigger {
      cursor: zoom-in;
    }
    /* 大图弹窗样式 - 核心优化：动画和交互 */
    .img-modal {
      display: none; 
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.85);
      z-index: 9999;
      align-items: center;
      justify-content: center;
      padding: 20px;
      touch-action: none; 
      /* 新增：弹窗淡入动画 */
      opacity: 0;
      transition: opacity 0.2s ease;
    }
    .img-modal.show {
      display: flex;
      opacity: 1; /* 淡入效果 */
    }

    .modal-img-container {
      position: relative; 
      width: 90%;
      height: 90%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden; 
      touch-action: none; 
    }

    .modal-img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      /* 优化：更短的过渡时间，更丝滑 */
      transition: transform 0.02s ease-out; 
      transform-origin: center center; 
      cursor: grab;
    }
    .modal-img:active {
      cursor: grabbing; /* 按下时直接变抓取样式 */
    }
    /* 关闭按钮 - 优化层级和位置 */
    .close-modal {
      position: absolute;
      top: 20px;
      right: 20px;
      color: white;
      font-size: 36px;
      cursor: pointer;
      z-index: 100; /* 确保在最上层 */
      transition: color 0.2s ease;
    }
    .close-modal:hover {
      color: #ccc;
    }
    /* 翻页按钮样式 - 优化可点击区域和层级 */
    .modal-nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      color: white;
      border: none;
      font-size: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s ease;
      z-index: 100; /* 确保不被遮挡 */
      /* 新增：点击反馈 */
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .modal-nav-btn:hover, .modal-nav-btn:active {
      background: rgba(255, 255, 255, 0.6);
      transform: translateY(-50%) scale(1.05);
    }
    /* 图片索引提示*/
    .img-index {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color: white;
      font-size: 16px;
      background: rgba(0, 0, 0, 0.5);
      padding: 5px 15px;
      border-radius: 20px;
      z-index: 100;
    }
    /* 产品详情内容 */
    .detail-content {
      line-height: 1.8;
      color: var(--text-light);
    }
    .detail-content h4 {
      font-size: 20px;
      color: var(--primary-dark);
      margin: 25px 0 15px;
    }
    .detail-content p {
      margin-bottom: 15px;
    }
    .detail-content ul {
      padding-left: 20px;
      margin-bottom: 20px;
    }
    .detail-content li {
      margin-bottom: 8px;
    }
    /* 移动端适配 */
    @media (max-width: 768px) {
    .detail-container {
      padding: 20px;
    }
    .product-title {
      font-size: 24px;
    }
    .product-img-item {
      height: 220px; 
    }
    .product-img-group {
      grid-template-columns: 1fr;
    }
    /* 移动端弹窗按钮优化 */
    .modal-nav-btn {
      width: 40px;
      height: 40px;
      font-size: 20px;
    }
    .prev-btn {
      left: 10px !important; 
    }
    .next-btn {
      right: 10px !important; 
    }
    .close-modal {
      font-size: 30px;
      top: 15px;
      right: 15px;
    }
    .img-index {
      bottom: 15px;
      font-size: 14px;
      padding: 4px 12px;
    }
    }
    /* 产品锚点导航样式 */
    .product-nav {
      padding: 20px 0;
      background: #f8f9fa; /* 浅灰背景，更柔和 */
      border-radius: 8px;
      margin-bottom: 15px;
    }

    .nav-container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 20px;
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    /* 锚点链接基础样式 - 无阴影，更扁平 */
    .product-nav-link {
      display: inline-block;
      padding: 10px 24px;
      background: #00c896; /* 更亮的绿色，更有活力 */
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 500;
      transition: all 0.2s ease;
      border: none;
    }

    /* 悬浮效果 - 颜色加深，无阴影 */
    .product-nav-link:hover {
      background: #00a87d; /* 深一点的绿色 */
      transform: translateY(-1px); /* 轻微上浮，更轻盈 */
    }

    /* 激活状态 - 取消阴影 */
    .product-nav-link:active {
      transform: translateY(0);
    }

    /* 移动端适配 */
    @media (max-width: 768px) {
      .nav-container {
        flex-direction: column;
        gap: 12px;
      }
      .product-nav-link {
        text-align: center;
        width: 100%;
      }
    }
    /* 全局平滑滚动 */
    html {
      scroll-behavior: smooth;
    }
    /* 修复锚点跳转顶部遮挡问题 */
    .product-detail-page {
      scroll-margin-top: 20px;
    }



    /* 整体容器 */
    .equipment-select-wrapper {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 16px 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }

    /* 标签样式 */
    .select-label {
      font-size: 14px;
      color: #333;
      white-space: nowrap;
    }

    /* 下拉选择框 */
    .equipment-select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding: 8px 32px 8px 12px;
      font-size: 14px;
      color: #666;
      background-color: #fff;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      min-width: 180px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 12px;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    /* 聚焦状态 */
    .equipment-select:focus {
      outline: none;
      border-color: #409eff;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }

    /* 禁用状态 */
    .equipment-select:disabled {
      color: #c0c4cc;
      background-color: #f5f7fa;
      cursor: not-allowed;
    }

    /* 选项样式 */
    .equipment-select option {
      color: #333;
      padding: 8px;
    }