/* ==========================================================================
   产品详情页 - 顶部产品图片切换区域
   1. 去掉顶部 banner 大图
   2. 区域背景改为白色（原为图片 + 白色文字）
   3. 面包屑导航文字改为浅灰色
   4. 产品标题改为蓝色
   ========================================================================== */

/* ── 0. 顶部导航：蓝色背景 ──
   .zs-top 保持 all.min.css 里的 position:fixed，与其它内页行为一致
   （下滑时顶条收起、导航缩小悬浮在浏览器顶部）；
   页面用 <div class="top-cover"> 占位，避免内容被导航压住。
   原本导航背景透明是为了浮在 banner 大图上，banner 去掉后直接给蓝底。 */
.zs-top {
  background-color: #0a2463;
}

/* ── 1. 去掉 banner 背景大图 ── */
.zs-detail-banner > img,
.zs-detail-banner > img.zs-max-img {
  display: none !important;
}

/* ── 2. 区域整体改为白色背景 + 正常文档流布局 ──
   原布局依赖 banner 图撑高，内容用 .zs-absolute-center 绝对定位居中；
   图片去掉后必须改回普通流式布局，否则内容会重叠。 */
.zs-detail-banner {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
}

/* 面包屑在 HTML 中位于内容之后，视觉上需要提到最前面 */
.zs-detail-banner .zs-breadcrumb-wrap {
  position: static !important;
  top: auto !important;
  order: -1;
  background: #fff;
  border-top: 0;
}

/* 内容区（标题 + 图片切换）取消绝对定位 */
.zs-detail-banner > .zs-container {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  align-items: center;
  padding: 10px 0 60px;
}

/* ── 3. 面包屑导航：浅灰色文字 ── */
.zs-detail-banner .zs-breadcrumb-wrap .zs-breadcrumb {
  padding: 16px 0 16px 54px;
}

.zs-detail-banner .zs-breadcrumb-wrap .zs-container > i.zs-icon {
  top: 12px;
  color: #29b6d8;
  font-size: 20px;
}

.zs-detail-banner .zs-breadcrumb-wrap .zs-breadcrumb li,
.zs-detail-banner .zs-breadcrumb-wrap .zs-breadcrumb li a,
.zs-detail-banner .zs-breadcrumb-wrap .zs-breadcrumb li span,
.zs-detail-banner .zs-breadcrumb-wrap .zs-breadcrumb li:last-child a,
.zs-detail-banner .zs-breadcrumb-wrap .zs-breadcrumb li:last-child span {
  color: #aeaeae !important;
  font-size: 14px;
  font-family: inherit;
}

.zs-detail-banner .zs-breadcrumb-wrap .zs-breadcrumb > li + li:before {
  color: #c4c4c4;
  padding: 0 12px;
}

.zs-detail-banner .zs-breadcrumb-wrap .zs-breadcrumb li a:hover {
  color: #0a2463 !important;
  text-decoration: none;
}

/* ── 4. 左侧文字内容 ── */
.zs-detail-banner .zs-container .zs-content {
  color: #333;
}

/* 产品标题：蓝色 */
.zs-detail-banner .zs-container .zs-content .zs-title {
  color: #0a2463;
  font-size: 40px;
  line-height: 1.25em;
  margin: 0;
}

/* 产品简介：灰色 */
.zs-detail-banner .zs-container .zs-content .zs-richtext {
  margin: 20px 0 26px;
  font-size: 17px;
  line-height: 1.6em;
  color: #6b6b6b;
}

.zs-detail-banner .zs-container .zs-content .zs-richtext p {
  margin: 0 0 6px;
}

.zs-detail-banner .zs-container .zs-content .zs-richtext li::before {
  border-left-color: #29b6d8;
}

/* 型号 / 附件下载按钮：深蓝底白字 */
.zs-detail-banner .zs-detail-download-list {
  margin-left: 34px;
}

.zs-detail-banner .zs-detail-download-list .zs-download-item {
  background: #0a2463;
  border: 1px solid #0a2463;
  border-radius: 2px;
  color: #fff;
  font-size: 13px;
}

.zs-detail-banner .zs-detail-download-list .zs-download-item:hover {
  background: #29b6d8;
  border-color: #29b6d8;
  color: #fff;
}

/* 分享按钮适配白底 */
.zs-detail-banner .zs-container .zs-content .addthis_inline_share_toolbox {
  margin-top: 24px;
}

.zs-detail-banner .zs-container .zs-content .addthis_inline_share_toolbox .at-share-btn {
  background-color: rgba(10, 36, 99, .08) !important;
}

/* ── 5. 右侧图片切换区域（白底展示） ── */
.zs-detail-banner .zs-container .zs-ban-swiper {
  background: #fff;
}

.zs-detail-banner .zs-container .zs-ban-swiper img {
  height: 100%;
  object-fit: contain;
}

.zs-detail-banner .zs-container .zs-ban-swiper .zs-gallery-left {
  background: #fff;
}

.zs-detail-banner .zs-container .zs-ban-swiper .zs-gallery-thumbs .swiper-slide {
  border: 1px solid #e6e6e6;
  cursor: pointer;
  overflow: hidden;
}

.zs-detail-banner .zs-container .zs-ban-swiper .zs-gallery-thumbs .swiper-slide-thumb-active {
  border: 1px solid #5c5c5c;
}

/* ── 切换箭头 ──
   原样式是 absolute + right:10% + top/bottom:-36px，会溢出到区域外压住面包屑；
   改为放在大图左右两侧垂直居中的圆形按钮。
   大图区占 73% 宽（左），缩略图占 22%（右），中间 5% 间距，
   所以右箭头距容器右侧 = 27% + 一点内缩。 */
.zs-detail-banner .zs-container .zs-ban-swiper .zs-swiper-button {
  display: block;
  position: absolute;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  margin: 0;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #e2e2e2;
  border-radius: 50%;
  color: #0a2463;
  font-size: 14px;
  line-height: 34px;
  text-align: center;
  z-index: 3;
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s, background-color .3s, color .3s, border-color .3s;
}

/* iconfont 字体里没有左箭头字形（eb59 / e641 都是右箭头），
   左键用右箭头旋转 180° */
.zs-detail-banner .zs-container .zs-ban-swiper .zs-swiper-button.zs-prev {
  left: 4px;
  right: auto;
  transform: translateY(-50%) rotate(180deg);
}

.zs-detail-banner .zs-container .zs-ban-swiper .zs-swiper-button.zs-next {
  left: auto;
  right: calc(27% + 4px);
}

/* 鼠标移入图片区域才显示，避免常态下干扰产品图 */
.zs-detail-banner .zs-container .zs-ban-swiper:hover .zs-swiper-button {
  opacity: 1;
}

.zs-detail-banner .zs-container .zs-ban-swiper .zs-swiper-button:hover {
  background: #0a2463;
  border-color: #0a2463;
  color: #fff;
}

/* 到头时置灰不可点 */
.zs-detail-banner .zs-container .zs-ban-swiper .zs-my-button-disabled,
.zs-detail-banner .zs-container .zs-ban-swiper .zs-my-button-disabled:hover {
  background: rgba(255, 255, 255, .92);
  border-color: #ededed;
  color: #d8d8d8;
  cursor: default;
}

/* ── 6. 响应式 ── */
@media (max-width: 1520px) {
  .zs-detail-banner .zs-breadcrumb-wrap .zs-breadcrumb {
    padding-left: 54px;
    margin-left: 20px;
  }

  .zs-detail-banner .zs-breadcrumb-wrap .zs-container > i.zs-icon {
    left: 20px;
  }

  .zs-detail-banner > .zs-container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 1080px) {
  /* 触屏没有 hover，箭头常显 */
  .zs-detail-banner .zs-container .zs-ban-swiper .zs-swiper-button {
    opacity: 1;
  }

  .zs-detail-banner .zs-container .zs-content .zs-title {
    font-size: 32px;
  }

  .zs-detail-banner .zs-container .zs-content .zs-richtext {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .zs-detail-banner > .zs-container {
    transform: none;
    padding: 20px 20px 40px;
  }

  .zs-detail-banner .zs-container .zs-content .zs-title {
    font-size: 24px;
  }

  .zs-detail-banner .zs-detail-download-list {
    margin-left: 0;
  }
}

/* ==========================================================================
   产品详情内容区（Specification 标题 + 富文本）
   原来 h2 没有 line-height（40px 大字多行时挤在一起），
   正文继承 body 的 line-height:normal，表格固定 line-height:20px，整体偏紧。
   ========================================================================== */
.zs-detail-product .zs-table {
  margin-top: 30px;
}

.zs-detail-product .zs-table h2 {
  margin: 0;
  line-height: 1.32em;
  letter-spacing: .2px;
}

/* 标题与正文之间的间距（原来是 HTML 行内 margin-top:20px，已移到这里） */
.zs-detail-product .zs-table .zs-table-content {
  margin-top: 34px;
  font-size: 16px;
  line-height: 1.85em;
  color: #444;
}

.zs-detail-product .zs-table .zs-table-content > *:first-child {
  margin-top: 0;
}

.zs-detail-product .zs-table .zs-table-content p {
  margin: 0 0 14px;
}

.zs-detail-product .zs-table .zs-table-content p:last-child {
  margin-bottom: 0;
}

.zs-detail-product .zs-table .zs-table-content ul,
.zs-detail-product .zs-table .zs-table-content ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

.zs-detail-product .zs-table .zs-table-content li {
  margin-bottom: 6px;
  line-height: 1.85em;
}

/* 正文里的小标题也要有呼吸感 */
.zs-detail-product .zs-table .zs-table-content h3,
.zs-detail-product .zs-table .zs-table-content h4,
.zs-detail-product .zs-table .zs-table-content strong {
  line-height: 1.5em;
}

.zs-detail-product .zs-table .zs-table-content h3,
.zs-detail-product .zs-table .zs-table-content h4 {
  margin: 28px 0 12px;
}

/* 规格表：原 line-height:20px 太挤 */
.zs-detail-product .zs-table table {
  line-height: 1.7em;
}

.zs-detail-product .zs-table table td {
  padding: 14px 18px;
  vertical-align: top;
}

@media (max-width: 1080px) {
  .zs-detail-product .zs-table .zs-table-content {
    margin-top: 26px;
  }
}

@media (max-width: 640px) {
  .zs-detail-product .zs-table h2 {
    line-height: 1.38em;
  }

  .zs-detail-product .zs-table .zs-table-content {
    margin-top: 20px;
    line-height: 1.8em;
  }
}

/* ==========================================================================
   详情页其它区块
   ========================================================================== */
.zs-detail-solution .zs-sol-swiper .swiper-slide .zs-img {
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.zs-detail-solution .zs-sol-swiper .swiper-slide .zs-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}