
/* =========================================
   Product List · 基础样式
========================================= */

.product-list-wrap{
  padding: 18px 0 40px;
}
.product-list-wrap a{ text-decoration:none; }
.product-list-wrap ul{ margin:0; padding:0; list-style:none; }

/* ===============================
   左侧目录（精修：更柔和、更有面板质感）
================================ */

/* 左侧目录 */
.product-list-wrap .side-nav{
  background:#dfdff;
  border:1px solid rgba(46,49,146,.06);
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.03);
}


/* 标题：降一点存在感，但仍清晰 */
.product-list-wrap .side-nav-title{
  padding:14px 18px;
  font-size:16px;
  font-weight:700;
  color:rgba(0,0,0,.78);
  border-bottom:1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0));
}

.product-list-wrap .side-nav-list{ padding:8px 0; }

.product-list-wrap .side-nav-item{
  border-bottom:1px solid rgba(0,0,0,.05);
}
.product-list-wrap .side-nav-item:last-child{ border-bottom:0; }

/* 二级菜单 */
.product-list-wrap .side-nav-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 18px;
  font-size:15px;
  color:rgba(0,0,0,.78);
  transition: background .18s ease, color .18s ease;
}

/* hover：用品牌色淡底，更柔和 */
.product-list-wrap .side-nav-link:hover{
  color:var(--brand);
  background: rgba(46,49,146,.05);
}

.product-list-wrap .side-nav-text{
  flex:1;
  min-width:0;
}

.product-list-wrap .side-nav-end{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

/* 纯 CSS 箭头 */
.product-list-wrap .side-nav-arrow{
  width:18px;
  height:18px;
  flex:0 0 18px;
  position:relative;
  opacity:.45;
  transition: opacity .18s ease;
}
.product-list-wrap .side-nav-arrow:before{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:8px;
  height:8px;
  border-right:2px solid rgba(0,0,0,.45);
  border-bottom:2px solid rgba(0,0,0,.45);
  transform:rotate(45deg);
  transition: border-color .18s ease;
}
.product-list-wrap .side-nav-link:hover .side-nav-arrow{
  opacity:.75;
}
.product-list-wrap .side-nav-link:hover .side-nav-arrow:before{
  border-color: var(--brand);
}

/* 当前二级（命中当前栏目或父栏目） */
.product-list-wrap .side-nav-item.is-open > .side-nav-link{
  color: var(--brand);
  font-weight:700;
  background: rgba(46,49,146,.06);
}

/* 当前展开（is-open）：箭头也高亮 */
.product-list-wrap .side-nav-item.is-open > .side-nav-link .side-nav-arrow{
  opacity:.8;
}
.product-list-wrap .side-nav-item.is-open > .side-nav-link .side-nav-arrow:before{
  border-color: var(--brand);
}


/* ============================
   三级子菜单：展开动效（更稳，不易被裁切）
============================ */

/* 默认收起：可过渡（不要写 display:none） */
.product-list-wrap .side-sub-list{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;

  transition: max-height .26s ease, opacity .18s ease, transform .26s ease;

  background: rgba(46,49,146,.03);
  padding: 0;
}

/* 展开：当前分支（is-open） */
.product-list-wrap .side-nav-item.is-open > .side-sub-list{
  max-height: 120px; /* 放宽：避免字体/换行/未来多条时被切 */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 桌面端 hover 也展开 */
@media (hover:hover){
  .product-list-wrap .side-nav-item:hover > .side-sub-list{
    max-height: 120px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* 三级链接 */
.product-list-wrap .side-sub-item{
  display:block;
  padding:9px 18px 9px 30px;
  font-size:13px;
  color:rgba(0,0,0,.62);
  background: transparent;

  transition: background .18s ease, color .18s ease;
}
.product-list-wrap .side-sub-item:hover{
  color:var(--brand);
  background: rgba(46,49,146,.06);
}

/* 当前三级 */
.product-list-wrap .side-sub-item.current,
.product-list-wrap .side-sub-item.active{
  color: var(--brand);
  font-weight:700;
  background: rgba(46,49,146,.07);
  position: relative;
}

.product-list-wrap .side-sub-item.current::before,
.product-list-wrap .side-sub-item.active::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:2px;
  background: var(--brand);
  border-radius:2px;
}

/* ===============================
   Right Head：SEO 标题 + 搜索（精修版）
================================ */

/* 容器：标题为主，搜索为辅 */
.product-list-wrap .product-right-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* SEO 主标题 */
.product-list-wrap .seo-h1{
  margin:0;
  font-size:19px;                  /* 比之前略小 */
  line-height:1.3;
  font-weight:600;                 /* 从 800 → 600 */
  color:rgba(0,0,0,.768);           /* 不用纯黑 */
  letter-spacing:.15px;
}

/* 可选副标题 */
.product-list-wrap .seo-sub{
  margin:8px 0 0;
  font-size:13px;
  color:rgba(0,0,0,.55);
}

/* ===============================
   搜索：图标嵌入输入框（不改 HTML）
================================ */

.product-list-wrap .search-form{
  position:relative;
  display:flex;
  align-items:center;
}

/* 输入框：右侧预留图标空间 */
.product-list-wrap .search-input{
  width:260px;
  height:36px;
  padding:0 42px 0 14px;           /* 右侧给放大镜让位 */
  border:1px solid rgba(0,0,0,.14);
  border-radius:999px;             /* 更像系统搜索框 */
  background:#fff;
  outline:none;
  font-size:13px;
  color:#111;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.product-list-wrap .search-input::placeholder{
  color:rgba(0,0,0,.38);
}

.product-list-wrap .search-input:focus{
  border-color: rgba(46,49,146,.55);          /* 降低边框存在感 */
  box-shadow: 0 0 0 2px rgba(46,49,146,.08);  /* 光更薄、更淡 */
}

/* 按钮：视觉上嵌入输入框右侧 */
.product-list-wrap .search-btn{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);

  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;

  font-size:0;                     /* 隐藏按钮文字 */
  display:flex;
  align-items:center;
  justify-content:center;

  transition: background .2s ease, box-shadow .2s ease;
}

/* 伪元素画放大镜（不依赖 iconfont/svg） */
.product-list-wrap .search-btn::before{
  content:"";
  width:12px;
  height:12px;
  border:2px solid rgba(0,0,0,.45);
  border-radius:50%;
}

.product-list-wrap .search-btn::after{
  content:"";
  width:7px;
  height:2px;
  background:rgba(0,0,0,.45);
  position:absolute;
  right:6px;
  bottom:6px;
  transform:rotate(45deg);
  border-radius:1px;
}

/* Hover：很轻的品牌反馈 */
@media (hover:hover){
  .product-list-wrap .search-form:hover .search-btn{
    background: rgba(46,49,146,.06);
  }
  .product-list-wrap .search-form:hover .search-btn::before{
    border-color: var(--brand);
  }
  .product-list-wrap .search-form:hover .search-btn::after{
    background: var(--brand);
  }
}

/* 键盘可用性 */
.product-list-wrap .search-btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 2px rgba(46,49,146,.18);
}

/* ===============================
   响应式
================================ */
@media (max-width: 992px){
  .product-list-wrap .search-input{ width:220px; }
}

@media (max-width: 576px){
  .product-list-wrap .product-right-head{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
  }
  .product-list-wrap .search-form{
    width:100%;
  }
  .product-list-wrap .search-input{
    width:100%;
    flex:1;
  }
}

/* ===============================
   右侧产品列表（品牌化卡片 + 科技感线条）
================================ */

/* 列表本体 */
.product-list-wrap .product-list{
  margin:0;
  padding:0;
}

/* 卡片本体：更克制、更高级 */
.product-list-wrap .product-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:22px;
  position:relative;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

/* 顶部科技感细线（默认很淡，hover 更明显） */
.product-list-wrap .product-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background: linear-gradient(90deg,
    rgba(46,49,146,0) 0%,
    rgba(46,49,146,.35) 18%,
    rgba(46,49,146,.10) 55%,
    rgba(46,49,146,0) 100%
  );
  opacity:.35;
  pointer-events:none;
}

/* 底部品牌线（关键：目录品牌感） */
.product-list-wrap .product-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background: linear-gradient(90deg,
    rgba(46,49,146,.10) 0%,
    rgba(46,49,146,.80) 55%,
    rgba(46,49,146,.18) 100%
  );
  opacity:.0;              /* 默认不抢戏 */
  transform: translateY(2px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events:none;
}

/* Hover：轻微抬升 + 品牌色点睛 */
.product-list-wrap .product-card:hover{
  transform: translateY(-4px);
  border-color: rgba(46,49,146,.35);
  box-shadow:
    0 8px 22px rgba(0,0,0,.08),
    0 2px 6px rgba(46,49,146,.08);
}

/* Hover：让科技线条“醒” */
.product-list-wrap .product-card:hover::before{
  opacity:.75;
}
.product-list-wrap .product-card:hover::after{
  opacity:1;
  transform: translateY(0);
}

/* 图片区 */
.product-list-wrap .product-img{
  padding:14px 14px 0;
}

/* 图片容器 */
.product-list-wrap .product-img .img-box{
  border-radius:12px;
  overflow:hidden;
  background:rgba(46, 49, 146, .12);
  position:relative;
}

/* 图片 */
.product-list-wrap .product-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  transition: transform .35s ease;
}

/* Hover：图片轻微放大，增强质感 */
.product-list-wrap .product-card:hover .product-img img{
  transform: scale(1.04);
}

/* 信息区 */
.product-list-wrap .product-info{
  padding:14px 16px 16px;
}

/* 标题：两行截断，更像目录 */
.product-list-wrap .product-title{
  margin:0 0 10px;
  font-size:15px;
  line-height:1.4;
  font-weight:700;
  color:#111;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 查看详情：默认克制，hover 才亮出品牌 */
.product-list-wrap .product-more{
  display:inline-flex;
  align-items:center;
  gap:6px;

  font-size:12px;
  font-weight:600;
  color:#666;

  padding:6px 10px;
  border-radius:999px;

  transition: all .25s ease;
}

.product-list-wrap .product-card:hover .product-more{
  color:#fff;
  background:var(--brand);
}

.product-list-wrap .text-secondary{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 260px;
  text-align:center;
  font-weight: 600px;
  font-size:16px;
  color:rgba(0,0,0,.52);
  letter-spacing:.3px;
}

/* ===============================
   换页器 双层胶囊（整体外壳 + 内部按钮）
================================ */

.product-list-wrap .product-pagebar{
  margin-top: 28px;
  text-align:center;
}

/* 外层：整体胶囊（缩小版） */
.product-list-wrap .pagination{
  display:inline-flex;
  align-items:center;
  gap:6px;                 /* 原来 8px → 6px */

  padding:6px 8px;         /* 原来 10px 12px → 更紧凑 */
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:#fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.025);
}


.product-list-wrap .pagination a,
.product-list-wrap .pagination span{
  min-width:32px;          /* 原来 38px */
  height:30px;             /* 原来 34px */
  padding:0 10px;          /* 原来 12px */

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  background:transparent;

  font-size:12px;          /* 略微收紧字体 */
  color:rgba(0,0,0,.68);
}

/* hover：轻品牌反馈 */
@media (hover:hover){
  .product-list-wrap .pagination a:hover{
    border-color: rgba(46,49,146,.22);
    color: var(--brand);
    background: rgba(46,49,146,.05);
  }
}

/* 当前页：更像“状态”，不做硬蓝块 */
.product-list-wrap .pagination span,
.product-list-wrap .pagination a.page-num-current{
  background: rgba(46,49,146,.10);
  border-color: rgba(46,49,146,.20);
  color: var(--brand);
  font-weight:700;
}

/* 工具按钮（首页 / 上一页 / 下一页 / 尾页）稍宽一点 */
.product-list-wrap .pagination .page-btn{
  padding:0 14px;
}

/* 不可用状态：Pboot 输出 javascript:; 时直接隐藏 */
.product-list-wrap .pagination a[href="javascript:;"],
.product-list-wrap .pagination a[href="javascript:"]{
  display:none !important;
}

/* 移动端：紧凑一点 */
@media (max-width:768px){
  .pd-banner{
    padding:40px 0 12px;
  }
  .pd-banner > .container{
    min-height:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  /* 移动端隐藏面包屑 */
  .pd-banner-breadcrumb{display:none;}

  .pd-banner-title{
    margin-left:0;
    text-align:left;
  }
}


/* ===============================
   Product Detail · pd-*
   仅作用于详情页结构
================================ */

/* =================================================
   产品详情 Banner
   - PC：左面包屑 / 右栏目名
   - Mobile：栏目名居中叠加在 Banner 上
================================================= */

/* ===== Banner 本体 ===== */
.pd-banner{
  position:relative;
  padding:80px 0 10px;
  background-position:center top;
  background-size:cover;
  background-repeat:no-repeat;
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* 遮罩层 */
.pd-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
  z-index:0;
}

/* ===== 内容容器（PC 默认） ===== */
.pd-banner > .container{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  min-height:88px;
}

/* ===== 左：面包屑 ===== */
.pd-banner-breadcrumb{
  flex:0 1 auto;
  min-width:0;
}
.pd-banner-breadcrumb .c-breadcrumb{
  justify-content:flex-start;
}

/* ===== 右：栏目名 ===== */
.pd-banner-title{
  flex:0 0 auto;
  margin-left:auto;
  text-align:right;
}

.pd-banner-title .pd-cat{
  margin:0;
  font-size:22px;
  font-weight:600;
  line-height:1.2;
  color:rgba(255,255,255,.68);
}

/* =================================================
   移动端（≤768px）
   - 栏目名居中叠加在 Banner 图上
================================================= */
@media (max-width:768px){

  .pd-banner{
    padding:40px 0 12px;
  }

  /* container 只作为定位参照 */
  .pd-banner > .container{
    min-height:88px;
    padding:0;
    display:block;              /* 关键：不再使用 flex */
  }

  /* 隐藏面包屑 */
  .pd-banner-breadcrumb{
    display:none;
  }

  /* 栏目标题：绝对定位叠加在 Banner 上 */
  .pd-banner-title{
    position:absolute;
    left:50%;
    bottom:14px;                /* 控制“靠下”的距离，可自行微调 */
    transform:translateX(-50%);
    margin:0;

    max-width:90%;
    text-align:center;
    pointer-events:none;        /* 防止挡住交互 */
  }

  .pd-banner-title .pd-cat{
    font-size:18px;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
    text-shadow:0 2px 6px rgba(0,0,0,.45);
  }
}




/* =========================================================
   产品详情 · 主卡（pd-card）整合优化版
   保留全部现有效果，仅去重 / 合并 / 精简
========================================================= */

/* ================= 主卡框 ================= */
/* ================= 主卡外层：只负责留白 ================= */
.pd-card{
  position:relative;
  margin:10px 14px 48px;
  padding:0;

  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible;
}

.pd-card>.container.fix{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:26px;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
  padding:22px;
  overflow:hidden;

  display:flex;
  gap:36px;
  align-items:flex-start;
  position:relative;
}

/* ================= 左侧图库 ================= */
.pd-gallery{
  flex:0 0 38.2%;max-width:38.2%;min-width:0;
  display:flex;flex-direction:column;gap:14px;
}

/* 主图 */
.pd-gallery-main{
  position:relative;width:100%;aspect-ratio:16/10;
  padding:8px;box-sizing:border-box;
  border-radius:16px;overflow:hidden;
  background:#fff;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 42px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.08);
}
.pd-gallery-main::after{
  content:"";position:absolute;inset:0;border-radius:16px;
  pointer-events:none;opacity:.55;mix-blend-mode:screen;
  background:
    linear-gradient(135deg,rgba(46,49,146,.22),transparent 40%),
    linear-gradient(315deg,rgba(255,255,255,.10),transparent 50%);
}

/* 主图图片 */
.pd-main-img{
  display:block;width:100%;height:100%;
  object-fit:contain;object-position:center;
  background:#fff;transform:none!important;
  transition:opacity .22s ease;
}
.pd-main-img.is-fade-out{opacity:0;}
.pd-main-img.is-fade-in{opacity:1;}
@media(hover:hover){.pd-gallery-main:hover .pd-main-img{transform:none!important;}}

/* ================= 缩略图区 ================= */
.pd-thumbs{
  display:flex;align-items:center;gap:10px;padding:10px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 22px rgba(0,0,0,.10);
}
.pd-thumbs-arrow{
  flex:0 0 32px;width:32px;height:32px;
  border-radius:9px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);color:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;line-height:1;
  transition:transform .15s,border-color .15s,background .15s,color .15s;
}
.pd-thumbs-arrow:hover{
  background:rgba(46,49,146,.18);
  border-color:rgba(46,49,146,.55);color:#fff;
  transform:translateY(-1px);
}
.pd-thumbs-arrow:active{transform:none;}
.pd-thumbs-viewport{
  flex:1 1 auto;min-width:0;
  overflow-x:auto;overflow-y:hidden;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.pd-thumbs-viewport::-webkit-scrollbar{height:8px;}
.pd-thumbs-viewport::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px;}
.pd-thumbs-viewport::-webkit-scrollbar-track{background:transparent;}
.pd-thumbs-list{
  display:flex;gap:10px;padding:2px 6px;margin:0;
  list-style:none;width:max-content;
}
.pd-thumb-item{flex:0 0 auto;}
.pd-thumb-link{
  display:block;width:72px;aspect-ratio:4/3;
  border-radius:8px;overflow:hidden;
  background:#fff;padding:2px;box-sizing:border-box;
  border:1px solid transparent;
}
.pd-thumb-img{width:100%;height:100%;object-fit:contain;object-position:center;background:#fff;}
.pd-thumb-link.is-active{border-color:rgba(46,49,146,.45);box-shadow:0 0 0 1px rgba(46,49,146,.18);}
@media(max-width:992px){.pd-thumb-link{width:clamp(56px,22vw,76px);}}

/* ================= 右侧信息区 ================= */
.pd-summary{
  position:relative;z-index:1;
  flex:1 1 61.8%;min-width:0;
  display:flex;flex-direction:column;
  padding-top:6px;
}

/* H1 */
.pd-summary-head{margin-bottom:18px;}
.pd-title{
  margin:0;font-size:34px;line-height:1.22;
  font-weight:950;letter-spacing:.2px;color:#0f1322;
}
.pd-summary-head::after{
  content:"";display:block;width:62px;height:4px;margin-top:12px;
  background:linear-gradient(90deg,var(--brand),rgba(46,49,146,.35));
  border-radius:999px;opacity:.95;
}

/* 信息主体 */
.pd-summary-body{display:flex;flex-direction:column;gap:22px;padding-top:8px;}
.pd-base-info{display:flex;flex-wrap:wrap;gap:12px 26px;}
.pd-base-item{display:inline-flex;align-items:center;gap:8px;}
.pd-base-item em{font-style:normal;font-size:14px;color:rgba(20,24,39,.42);}
.pd-base-item strong{font-size:13px;font-weight:650;color:rgba(20,24,39,.72);white-space:nowrap;}
.pd-desc{
  max-width:46em;font-size:16px;
  line-height:2.15;color:rgba(20,24,39,.82);
  text-align:justify;text-justify:inter-ideograph;
}

/* ================= 转化区 ================= */
.pd-actions{
  margin-top:28px;padding-top:18px;
  border-top:1px dashed rgba(0,0,0,.10);
  display:flex;align-items:center;gap:26px;
}
.pd-actions-main{display:flex;align-items:center;gap:18px;}
.pd-btn{
  appearance:none;display:inline-flex;
  align-items:center;justify-content:center;
  height:46px;padding:0 26px;line-height:46px;
  font-size:15px;font-weight:850;
  border-radius:14px;border:1px solid transparent;
  cursor:pointer;user-select:none;text-decoration:none;
  white-space:nowrap;
  transition:transform .15s,box-shadow .15s,background .15s,color .15s,border-color .15s;
}
.pd-btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--brand),rgba(46,49,146,.86));
  box-shadow:0 12px 22px rgba(46,49,146,.20);
}
.pd-btn-primary:hover{
  transform:translateY(-1px);
  color:#fff;
  box-shadow:0 16px 26px rgba(46,49,146,.24);
}
.pd-btn-ghost{
  color:#141827;
  background:rgba(46,49,146,.03);
  border-color:rgba(46,49,146,.22);
}
.pd-btn-ghost:hover{
  color:var(--brand);
  background:rgba(46,49,146,.06);
  border-color:rgba(46,49,146,.55);
  transform:translateY(-1px);
}

/* 电话 */
.pd-tel{
  display:inline-flex;align-items:center;gap:8px;
  margin-left:18px;font-size:16px;font-weight:700;
  color:rgba(20,24,39,.55);text-decoration:none;
}
.pd-tel span{font-weight:900;letter-spacing:.3px;}
.pd-tel:hover{color:var(--accent);}

/* 主图 hover 时：指针变放大镜（仅 PC） */
@media (hover:hover){.pd-gallery-main:hover{cursor:zoom-in;}}

/* ================= 响应式 ================= */
@media(max-width:1200px){.pd-title{font-size:30px;}}

/* ===== ≤1180：转化区防挤压（按钮掉字修复） ===== */
@media (max-width:1180px){
  .pd-actions{flex-wrap:wrap;align-items:flex-start;gap:14px 18px;}
  .pd-actions-main{width:100%;flex-wrap:wrap;gap:12px;}
  .pd-btn{padding:0 18px;min-width:128px;}
  /* 手机端可不显示电话：保持你的策略 */
  .pd-tel{margin-left:0;flex:0 0 100%;}
}

/* ===============================
   ≤992：上下排布 + 隐藏缩略图条
=============================== */
@media (max-width:992px){
  .pd-card{margin:10px 12px 36px;padding:18px;border-radius:20px;}
  .pd-card>.container.fix{flex-direction:column;gap:18px;}
  .pd-gallery,.pd-summary{flex:0 0 auto;max-width:100%;}
  .pd-summary{padding-top:0;}
  .pd-gallery-thumbs,.pd-thumbs{display:none!important;}
  .pd-gallery-main{border-radius:14px;padding:8px;}
}

/* ===============================
   ≤768：主卡贴屏（关键改动）
=============================== */
@media (max-width:768px){
  /* 主卡横向贴屏 */
  .pd-card{
    margin-left:0;margin-right:0;
    border-radius:0;
  }
  /* 内部内容保留安全边距 */
  .pd-card>.container.fix{
    padding-left:16px;padding-right:16px;
  }

  .pd-actions{flex-direction:column;align-items:flex-start;gap:14px;}
  .pd-actions-main{width:100%;}
  .pd-btn{flex:1 1 auto;}
  .pd-tel{display:none;} /* 你说手机端不用显示电话 */
}

/* ===============================
   ≤576：更贴合小屏
=============================== */
@media (max-width:576px){
  .pd-card>.container.fix{padding-left:12px;padding-right:12px;}
}

/* ===============================
   ≤480：进一步压紧节奏
=============================== */
@media (max-width:480px){
  .pd-card{margin:8px 0 28px;padding:16px;border-radius:0;}
  .pd-title{font-size:24px;line-height:1.25;}
  .pd-summary-body{gap:16px;}
  .pd-desc{font-size:15px;line-height:2;}
  .pd-actions{margin-top:18px;padding-top:14px;gap:12px;}
  .pd-actions-main{gap:12px;}
  .pd-btn{height:44px;line-height:44px;padding:0 18px;border-radius:12px;}
}

/* ===== ≤420：按钮全宽更稳 ===== */
@media (max-width:420px){
  .pd-actions-main{flex-direction:column;align-items:stretch;}
  .pd-btn{width:100%;min-width:0;}
}


/* ================= 放大镜小窗（JS用） ================= */
.pd-zoom-box{
  background:#fff; /* 其余由 JS 内联控制 */
}

/* 仅支持 hover 的设备（PC）才显示放大镜光标 */
@media (hover:hover) and (pointer:fine){
  .pd-gallery-main:hover{cursor:zoom-in;}
}

/*移动端：彻底禁用放大镜 */
@media (hover:none), (pointer:coarse){
  .pd-zoom-box{display:none!important;}
  .pd-gallery-main{cursor:default;}
}


/* ================= 响应式 ================= */
@media(max-width:1200px){.pd-title{font-size:30px;}}

/* ===============================
   产品卡 · 响应式（上下排布 + 隐藏缩略图条）
=============================== */

/* 平板及以下：上下排布 */
@media (max-width: 992px){
  .pd-card{margin:10px 12px 36px;padding:18px;border-radius:20px;}
  .pd-card>.container.fix{flex-direction:column;gap:18px;}
  /* 左右列改为全宽 */
  .pd-gallery,.pd-summary{flex:0 0 auto;max-width:100%;}
  .pd-summary{padding-top:0;}
  /* 不显示缩略图条 */
  .pd-gallery-thumbs,.pd-thumbs{display:none!important;}
  /* 主图更适合移动端的高度（保持 16:10，不裁切） */
  .pd-gallery-main{border-radius:14px;padding:8px;}
}

/* 手机：进一步压紧节奏 */
@media (max-width: 480px){
  .pd-card{margin:8px 10px 28px;padding:16px;border-radius:18px;}
  .pd-title{font-size:22px;line-height:1.25;}
  .pd-desc{font-size:15px;line-height:2.0;}
  .pd-actions{margin-top:18px;padding-top:14px;gap:12px;}
  .pd-actions-main{gap:12px;}
  .pd-btn{height:44px;line-height:44px;padding:0 18px;border-radius:12px;}
}

@media(max-width:768px){
  .pd-actions{flex-direction:column;align-items:flex-start;gap:14px;}
  .pd-actions-main{flex-wrap:wrap;}
  .pd-tel{display:none;}
}
@media(max-width:480px){
  .pd-title{font-size:24px;}
  .pd-summary-body{gap:16px;}
  .pd-desc{line-height:2;}
}


/* =================================================
   内容区通用样式
   模块：产品详情 / 产品推荐 / 留言表单
================================================= */

/* ===== 通用区块容器 ===== */
.pd-detail,.pd-related,.pd-message{margin:0 14px 20px;}
.pd-detail>.container,
.pd-related>.container,
.pd-message>.container{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
  padding:20px 40px 20px;
}

/* ===== 统一区块标题（极简高级版） ===== */
.pd-section-head{margin:0 0 16px;}
.pd-section-title{margin:0;}

/* 统一区块标题（微调版：更稳、更克制） */
.pd-section-title>span{
  display:inline-flex;
  align-items:center;
  gap:6px;                      /* ← 原来 8px，收紧 */
  font-size:20px;
  font-weight:700;
  line-height:1.2;
  color:rgba(15,19,34,.78);     /* ← 比纯色淡一点 */
}

.pd-section-title>span:before{
  content:"｜";
  color:var(--brand);
  font-weight:900;
  transform:translateY(-.5px) scaleX(1.35);
}

/* 去掉 after 横线（关键） */
/*.pd-section-title>span:after{display:none;}*/

/* =================================================
   产品详情区（编辑器内容兜底）
================================================= */
.pd-detail-body{
  color:rgba(20,24,39,.82);
  font-size:16px;
  line-height:2.05;
}
.pd-detail-body p{margin:0 0 14px;}
.pd-detail-body a{color:var(--brand);text-decoration:none;}
.pd-detail-body a:hover{color:var(--accent);}
.pd-detail-body strong{color:rgba(15,19,34,.92);}
.pd-detail-body img{
  max-width:100%;height:auto;
  display:block;margin:12px 0;
  border-radius:12px;
}
.pd-detail-body ul,
.pd-detail-body ol{
  margin:10px 0 14px 1.2em;
  padding:0;
}
.pd-detail-body li{margin:6px 0;}

/* 只修复编辑器注入的 nowrap，不动其它元素 */
.pd-detail-body span[style*="text-wrap: nowrap"],
.pd-detail-body span[style*="white-space: nowrap"]{
  text-wrap: wrap !important;     /* 新属性，支持就用 */
  white-space: normal !important; /* 兼容核心 */
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===============================
   参数表：table 本体圆角版（统一 PC / Mobile）
   - PC：两列比例（可换行）
   - Mobile：两列比例（可换行），不横滑
=============================== */

.pd-detail-body table{
  width:100%!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  table-layout:fixed!important;
  margin:14px 0!important;

  border:1px solid rgba(0,0,0,.18)!important;
  border-radius:10px!important;
  overflow:hidden!important;

  background:#fff!important;
}

/* ===== 单元格基础样式 ===== */
.pd-detail-body td{
  padding:8px 16px!important;
  font-size:15px!important;
  line-height:1.65!important;
  color:rgba(20,24,39,.86)!important;
  vertical-align:top!important;              /* 多行更自然：从上对齐 */

  background:transparent!important;
  font-weight:400!important;

  border:0!important;
  border-right:1px solid rgba(0,0,0,.18)!important;
  border-bottom:1px solid rgba(0,0,0,.18)!important;

  /* 关键：全表允许换行，长串也能断 */
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:break-word!important;
}

/* 最右列不画右边线 */
.pd-detail-body tbody tr td:last-child{border-right:0!important;}
/* 最后一行不画下边线 */
.pd-detail-body tbody tr:last-child td{border-bottom:0!important;}

/* 清理富文本写死宽度 */
.pd-detail-body td[width]{width:auto!important;}

/* ===== 两列比例（PC 也按比例走，和你说的“都按比例”一致） ===== */
.pd-detail-body td:first-child{
  width:32%!important;                        /* 左列比例 */
  font-weight:700!important;
  color:rgba(15,19,34,.92)!important;
}
.pd-detail-body td:last-child{
  width:auto!important;                       /* 右列吃剩余 */
}

/* 第一行（标题行）加重 */
.pd-detail-body tbody tr:first-child td{
  font-weight:900!important;
  font-size:15.5px!important;
  color:rgba(15,19,34,.95)!important;
}

/* 斑马纹：从标题行开始交替 */
.pd-detail-body tbody tr:nth-child(odd) td{background:rgba(0,0,0,.045)!important;}
.pd-detail-body tbody tr:nth-child(even) td{background:transparent!important;}

/* hover 行高亮（PC） */
@media (hover:hover){
  .pd-detail-body tbody tr:hover td{background:rgba(46,49,146,.055)!important;}
}

/* =================================================
   手机端：两列比例 + 可换行（参考图）
   - 不横滑
   - 更紧凑字号与 padding
================================================= */
@media (max-width:576px){

  .pd-detail-body table{
    display:table!important;
    overflow:visible!important;               /* 不走横滑 */
    table-layout:fixed!important;
  }

  .pd-detail-body td{
    padding:10px 12px!important;
    font-size:13.5px!important;
    line-height:1.6!important;
  }

  /* 手机端左列稍微限一下最小宽度，避免太窄 */
  .pd-detail-body td:first-child{
    width:34%!important;                      /* 手机略加一点，读起来舒服 */
    min-width:96px!important;
  }
}

/* =================================================
   产品推荐区 · 无位移 Hover 稳定版
   特点：
   - 不 translate，不裁切
   - hover 靠 边框 + 阴影 + 内容变化
   - 非电商风，更偏“设备目录 / 型号卡”
================================================= */

.pd-related{
  padding:56px 0 64px;
}

/* 轮播窗口：仍然裁切，但不会影响 hover */
.pd-related-track{
  overflow:hidden; padding: 2px;
}

.pd-related-list{
  display:flex;
  gap:24px;
  transition:transform .6s ease;
  will-change:transform;
}

.pd-related-item{
  flex:0 0 calc((100% - 72px) / 4);
}

/* ===== 卡片本体 ===== */
.pd-related-card{
  position:relative;
  display:flex;
  flex-direction:column;

  aspect-ratio:3 / 3.6;
  background:#fff;
  border-radius:12px;
  overflow:hidden;

  /* 默认边框 */
  border:1px solid rgba(0,0,0,.08);

  /* 动效只保留阴影 */
  transition:box-shadow .22s ease;
}

/* hover 边框：用伪元素，永不被切 */
.pd-related-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:12px;
  border:1px solid transparent;
  pointer-events:none;
  transition:border-color .22s ease;
}

/* hover 状态：不移动 */
.pd-related-card:hover{
  box-shadow:0 14px 30px rgba(0,0,0,.14);
}

.pd-related-card:hover::after{
  border-color: var(--brand)
  /* 想品牌一点可改成 var(--brand) */
}

/* ===== 图片区：4:3 + padding ===== */
.pd-related-img{
  width:100%;
  aspect-ratio:4 / 3;
  padding:12px;
  box-sizing:border-box;
  background:#f5f7fa;
  overflow:hidden;
}

.pd-related-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .35s ease;
}

/* hover 时图片轻微“内缩”，而不是放大 */
.pd-related-card:hover .pd-related-img img{
  transform:scale(0.98);
}

/* ===== 文案区 ===== */
.pd-related-info{
  flex:1 1 auto;
  padding:12px 14px 14px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid rgba(0,0,0,.06);
}

/* 标题强化 */
.pd-related-title{
  font-size:16px;
  line-height:1.5;
  font-weight:600;
  color:#1f2329;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;

  transition:color .2s ease;
}

.pd-related-card:hover .pd-related-title{
  color:#000;
}

/* 描述：两行 */
.pd-related-desc{
  font-size:13px;
  line-height:1.45;
  color:#666;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.pd-related-desc:empty::before{
  content:"实验室科研设备";
  color:#777;
}

/* 引导字 */
.pd-related-more{
  font-size:12.5px;
  color:#888;
  transition:color .2s ease;
}

.pd-related-card:hover .pd-related-more{
  color:var(--brand);
}


/* =================================================
   留言表单区
================================================= */

.pd-form{
  margin-top:6px;
}

/* ===== 表单网格 ===== */
.pd-form-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.pd-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.pd-field-wide{
  grid-column:1 / -1;
}

/* ===== label ===== */
.pd-field label{
  font-size:13px;
  font-weight:800;
  color:rgba(20,24,39,.62);
}

/* ===== 输入控件 ===== */
.pd-field input,
.pd-field textarea{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:12px 14px;
  font-size:14px;
  background:rgba(255,255,255,.92);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}

/* focus 状态 */
.pd-field input:focus,
.pd-field textarea:focus{
  border-color:rgba(46,49,146,.45);
  box-shadow:0 0 0 4px rgba(46,49,146,.10);
}

/* =================================================
   操作区：验证码 + 提交按钮 + 电话（同一行）
================================================= */

.pd-form-actions{
  margin-top:18px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

/* ===== 验证码横排 ===== */
.pd-verify-inline{
  display:flex;
  align-items:center;
  gap:10px;
}

/* 验证码输入框 */
.pd-verify-inline input{
  width:110px;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  font-size:14px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}

/* focus */
.pd-verify-inline input:focus{
  border-color:rgba(46,49,146,.45);
  box-shadow:0 0 0 4px rgba(46,49,146,.10);
}

/* 验证码图片 */
.pd-verify-inline img{
  height:40px;
  border-radius:8px;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.12);
}

/* ===== 提交按钮 ===== */
.pd-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 26px;
  border-radius:14px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  border:none;
  transition:background-color .2s, box-shadow .2s;
}

.pd-btn-primary{
  background:var(--brand);
  color:#fff;
}

.pd-btn-primary:hover{
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}

/* ===== 电话咨询 ===== */
.pd-form-tip{
  color:rgba(20,24,39,.55);
  text-decoration:none;
  font-weight:800;
  white-space:nowrap;
}

.pd-form-tip:hover{
  color:var(--accent);
}

/* =================================================
   响应式
================================================= */

/* 中屏：整体左右留白 */
@media(max-width:992px){
  .pd-detail,
  .pd-related,
  .pd-message{
    margin:0 12px 36px;
  }
}

/* 小屏：表单单列 + 操作区自动换行 */
@media(max-width:576px){
  .pd-detail>.container,
  .pd-related>.container,
  .pd-message>.container{
    padding:18px;
    border-radius:18px;
  }

  .pd-form-grid{
    grid-template-columns:1fr;
  }

  .pd-form-actions{
    align-items:flex-start;
    gap:12px;
  }

  .pd-verify-inline{
    width:100%;
  }

  .pd-verify-inline input{
    flex:1;
  }

  .pd-btn{
    width:100%;
  }

  .pd-form-tip{
    width:100%;
  }

  .pd-section-title>span{
    font-size:16px;
  }

  .pd-section-title>span:after{
    width:30px;
  }
}


/* ===============================
   手机端推荐区：横滑大卡（避免卡片太小）
=============================== */
@media (max-width: 768px){

  /* 让轨道可横滑 */
  .pd-related-track{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:6px;
  }

  /* 列表不再依赖 transform 动画（避免 JS/样式互相打架） */
  .pd-related-list{
    transform:none!important;
    transition:none!important;
    will-change:auto;
    width:max-content;
    gap:14px;
    scroll-snap-type:x mandatory;
  }

  /* 每张卡更大：一屏显示 1~1.3 张 */
  .pd-related-item{
    flex:0 0 clamp(220px, 78vw, 320px);
    scroll-snap-align:start;
  }

  /* 轻微收紧卡片比例，避免太高 */
  .pd-related-card{
    aspect-ratio:3 / 3.3;
  }
}

/* 超小屏：一屏一张更稳 */
@media (max-width: 420px){
  .pd-related-item{
    flex-basis: 86vw;
  }
}
