/* --- Banner 区域 --- */
.product-banner {
  width: 100%;
  height: 130px; /* 根据需要调整高度 */
  background-color: #f5a738; /* 你的主题橙色 */
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: 60px;
}

.product-banner-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;
}

/* 产品图：做成悬浮效果，突出 Banner */
.banner-product-img {
  width: 120px;
  height: 120px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.banner-product-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.banner-text h1 {
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  margin: 0;
}

/* 返回按钮 */
.btn-back {
  display: inline-block;
  padding: 8px 30px;
  border: 2px solid #fff;
  border-radius: 20px;
  color: #fff !important;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s;
}

.btn-back:hover {
  background-color: #fff;
  color: #f5a738 !important;
}

/* --- 通用内容区域 --- */
.product-main-content {
  padding-bottom: 80px;
}

.product-section {
  margin-bottom: 60px;
}

.description-box p {
  font-size: 16px;
  line-height: 2;
  color: #333;
  text-align: justify;
  text-indent: 2em;
}

/* --- 技术特点 (ZDS-300 样式 - 完美闭合版) --- */
.feature-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.feature-img {
  width: 250px;
}

/* 中间的黄色竖条 */
.feature-bar-title {
  background-color: #eadd93;
  width: 40px;
  padding: 20px 0;
  text-align: center;
  border-radius: 5px;
  /* 这里的 height: 300px 建议去掉或者改为 min-height，由内容撑开更灵活 */
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #555;
  font-weight: bold;
  writing-mode: vertical-lr;
  letter-spacing: 5px;
  position: relative;
}

/* 增加一个小横线，把黄色竖条和右边的列表连起来 */
.feature-bar-title::after {
  content: "";
  position: absolute;
  right: -22px; /* 伸到右边去连接 */
  top: 50%;
  width: 22px;
  height: 2px;
  background-color: #eadd93;
}

/* 右侧列表容器 */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-left: 20px;
  /* 这一行是那根贯穿的竖线 */
  border-left: 2px solid #eadd93;
  position: relative;
}

.feature-list li {
  background-color: #eadd93;
  padding: 10px 20px;
  border-radius: 4px;
  color: #333;
  font-size: 14px;
  position: relative;
}

/* 每个 Li 左侧的小横线连接杆 */
.feature-list li::before {
  content: "";
  position: absolute;
  left: -22px; /* 连到左边的竖线上 */
  top: 50%;
  width: 20px;
  height: 2px;
  background-color: #eadd93;
}

/* === 核心修改：闭合线头逻辑 (遮罩法) === */

/* 1. 挡住第一个元素上半截的线 */
.feature-list li:first-child::after {
  content: "";
  position: absolute;
  left: -24px; /* 定位到边框的位置 (-20px padding - 2px border - 2px extra) */
  top: -20px; /* 从上面一点开始挡 */
  bottom: 50%; /* 挡到中间位置停止 */
  width: 4px; /* 宽度足够覆盖 2px 的线 */
  background-color: #fff; /* 使用背景色(白色)遮挡 */
  /* 如果你的背景是灰色，请改成对应的颜色，比如 #f9f9f9 */
}

/* 2. 挡住最后一个元素下半截的线 */
.feature-list li:last-child::after {
  content: "";
  position: absolute;
  left: -24px;
  top: 50%; /* 从中间开始挡 */
  bottom: -20px; /* 挡到下面去 */
  width: 4px;
  background-color: #fff;
}

/* 微调：避免遮挡住中间的小横线，稍微让开 1px */
.feature-list li:first-child::after {
  bottom: calc(50% + 1px);
}
.feature-list li:last-child::after {
  top: calc(50% + 1px);
}

/* --- 应用领域 --- */
.product-section.application-container {
  width: 100%;
  overflow-x: auto;
  padding-bottom: 20px;

  /* 核心修复：让里面的内容（包括标题）居中 */
  text-align: center;

  /* 配合 Flex 布局防止内容溢出时左侧被切掉 */
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 确保标题不会被压缩 */
.app-bar-title {
  flex-shrink: 0;
  /* 保持之前的样式 */
  background-color: #eadd93;
  display: inline-block;
  padding: 10px 40px;
  font-size: 18px;
  color: #333;
  font-weight: bold;
  border-radius: 4px;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}
/* 标题下方的中心竖线 */
.app-bar-title::after {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 2px;
  height: 30px;
  background-color: #bbb;
  transform: translateX(-50%);
}

.app-tree {
  display: flex;
  justify-content: center;
  /* 确保只有一根总竖线，去掉原来这里可能的 border-top */
  padding-top: 0;
  min-width: 100%; /* 保证容器撑开 */
}

/* 列表容器 */
.app-items {
  display: flex;
  justify-content: center;
  /* 关键 1：强制不换行，所有方块都在一排 */
  flex-wrap: nowrap;
  /* 关键 2：缩小元素之间的间距，防止太宽被挤出去 */
  gap: 10px;

  position: relative;
  padding-top: 20px;

  /* 保证内容居中，如果内容太宽，就靠左显示以便滚动 */
  width: max-content;
  margin: 0 auto;
}

/* 每一个应用领域的方块 */
.app-items span {
  background-color: #eadd93;
  /* 关键 3：缩小内边距和字号，节省空间 */
  padding: 8px 12px;
  font-size: 13px;
  white-space: nowrap; /* 防止方块里的文字换行 */

  color: #333;
  border-radius: 4px;
  position: relative;
  text-align: center;
  min-width: auto; /* 自动宽度 */
}

/* --- 连线逻辑 (修复开头结尾不封闭) --- */

/* 1. 每个元素上方的小竖线 */
.app-items span::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  width: 2px;
  height: 20px;
  background-color: #bbb;
  transform: translateX(-50%);
}

/* 2. 每个元素上方的横线 */
.app-items span::after {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  height: 2px;
  background-color: #bbb;
  /* 线条宽度 = 自身宽度 + 间距(gap) */
  width: calc(100% + 10px);
  /* 向左偏移间距的一半，让线连起来 */
  left: -5px;
}

/* 3. 修复两端：第一个元素隐藏左半边线 */
.app-items span:first-child::after {
  width: calc(50% + 5px); /* 只显示右半边 + 间距修正 */
  left: 50%;
}

/* 4. 修复两端：最后一个元素隐藏右半边线 */
.app-items span:last-child::after {
  width: calc(50% + 5px); /* 只显示左半边 + 间距修正 */
  left: -5px;
}

/* 特殊情况：如果只有一个元素，不显示横线 */
.app-items span:only-child::after {
  display: none;
}
/* --- 技术参数 (表格) --- */
.section-title {
  width: 100%; /* 占满整行 */
  text-align: left; /* 强制左对齐 */
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;

  /* 左侧的黑色竖条 */
  border-left: 5px solid #333;
  padding-left: 15px;
}

.sub-title {
  font-size: 16px;
  color: #999;
  font-weight: normal;
  margin-left: 10px;
}
.specs-container .sub-title {
  font-size: 16px;
  color: #999;
  font-weight: normal;
  margin-left: 10px;
}

.specs-table {
  width: 100%;
  /* 1. 限制最大宽度，不再傻傻地撑满屏幕 */
  max-width: 900px;

  /* 2. 让表格在页面中间显示 */
  margin: 0 auto;

  border-collapse: collapse;
  font-size: 14px; /* 字体稍微改小一点点，更精致 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 加一点微弱阴影增加质感 */
}

.specs-table td {
  /* 3. 核心瘦身：减小内边距 (原来是 12px 20px) */
  padding: 8px 15px;

  border: 1px solid #eadd93;
  color: #333;
  line-height: 1.5; /* 控制行高 */
}

/* 第一列 (项目名) */
.specs-table td:first-child {
  /* 4. 给第一列设定一个固定宽度，或者较小的百分比，防止太宽 */
  width: 25%;
  min-width: 150px; /* 防止在手机上被压得太扁 */

  text-align: center;
  background-color: #fffbf0; /* 给左侧加一个极淡的黄色背景，区分度更好 */
  font-weight: 600;
}

/* 第二列 (参数值) */
.specs-table td:last-child {
  background-color: #fff;
  text-align: left;
}

/* 5. (可选) 鼠标经过某一行时高亮，方便看清是哪一行 */
.specs-table tr:hover td {
  background-color: #fffdf5;
}
/* --- 仪器外观图 (增强版) --- */
.product-section.appearance-container {
  width: 100%;
  margin-bottom: 60px;
  /* 确保整个区域的内容都居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.appearance-img-box {
  width: 100%;
  margin-top: 30px;
  text-align: center;
}

.appearance-img-box img {
  /* 强制居中显示 */
  display: block !important;
  margin: 0 auto !important;

  /* 限制最大尺寸，防止撑破屏幕 */
  max-width: 80%;
  max-height: 400px;

  /* 保持比例 */
  object-fit: contain;

  /* 加点阴影和圆角，让它看起来不像 broken image */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 10px;
  background-color: #fff;
}
/* 响应式调整 */
@media (max-width: 768px) {
  .feature-layout {
    flex-direction: column;
  }
  .feature-bar-title {
    writing-mode: horizontal-tb;
    width: 100%;
    height: auto;
    padding: 10px;
  }
  .feature-list {
    border-left: none;
    padding: 0;
  }
  .feature-list li::before {
    display: none;
  }
  .banner-product-img {
    display: none; /* 手机端隐藏左侧悬浮图，太挤了 */
  }
}