/* ==========================================================================
   sub.css — 内页共用外壳与通用组件（数值来自 PSD 稿，1rem = 100 设计 px）
   首页样式仍在 page.css；本文件只服务内页，避免互相污染
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 内页 banner：601px 高，图上压深色渐变，标题居中（红斜块 + 中文 + 英文）
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  height: 6.01rem;
  overflow: hidden;
  color: var(--c-white);
}
.page-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.page-banner__mask {
  position: absolute;
  inset: 0;
  /* PSD 的 banner 压暗只有一层纯黑 30.2%（矩形 2，图层不透明度 77/255），
     10 个内页实测同值；原先的蓝黑渐变会把画面压偏（banner 分区差 8-11） */
  background: rgba(0, 0, 0, 0.302);
}
.page-banner__inner {
  position: relative;
  height: 100%;
}
.page-banner__inner .container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
/* banner 标题块：14 个内页在 PSD 里是同一个元素、同一组坐标，
   所以这里给出唯一一套数值，各页 p-*.css 只留 --pb-title 与本页 translateY。
   标题 80px / line-height 1.1 → 行盒 88，容器垂直居中后盒顶 256.5，
   再下移 27 得 283.5，正文墨迹落在 291 —— 与 PSD（墨迹 291~366）对齐。 */
.page-banner__box {
  position: relative;
  display: flex;
  align-items: flex-start;
  transform: translateY(0.27rem);
  --pb-title: 0.8rem;
}
/* 红斜块 = PSD「矩形 8」。几何取自该形状图层的 vector_mask（不是肉眼估的）：
     · 四个锚点换算到画布 px：左上(806.6,283) 右上(831.7,283)
       右下(816.1,326) 左下(791,326)
     · 即 40.7×43，上下边水平、左右边互相平行并向右倾 15.6 —— 是【平行四边形】
   原先 sub.css 写的是 polygon(0 0,100% 0,62% 100%,0 100%)：左边垂直、右边斜，
   那是梯形，形状不对；而且它当时是 h1 前面的 flex 兄弟，把标题整块推右 61px。
   设计稿里标题自身居中（墨迹 803→1117，中心 960），红块是压在文字【下层】的
   装饰，首字「关」的右半直接盖在红块上，所以改成绝对定位 + z-index 低于标题。
   尺寸全部用 em：mark 自己的 font-size 取 --pb-title，改字号时形状等比缩放，
   不必再逐个断点补 0.3/0.34 那种固定值（那组比例也是错的）。 */
.page-banner__mark {
  position: absolute;
  z-index: 0;
  left: -0.0725em;   /* 红块左缘(791) - 标题盒左缘(796.8) = -5.8 */
  top: -0.006em;     /* 红块顶(283) - 盒顶(283.5) = -0.5 */
  width: 0.5085em;   /* 40.7 / 80 */
  height: 0.5375em;  /* 43.0 / 80 */
  font-size: var(--pb-title);
  background: var(--c-accent);
  -webkit-clip-path: polygon(38.35% 0, 100% 0, 61.68% 100%, 0 100%);
  clip-path: polygon(38.35% 0, 100% 0, 61.68% 100%, 0 100%);
}
.page-banner__title {
  position: relative;
  z-index: 1;
  font-size: var(--pb-title);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0.02em;
}
/* 文字包在 div 里也要抬起一层，否则整块 div 的绘制层可能被红块压住 */
.page-banner__box > div { position: relative; z-index: 1; }
.page-banner__en {
  margin-top: 0.1rem;
  font-family: var(--ff-en);
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   2. 二级导航 + 面包屑
   ★ 全站唯一定义处。各 p-*.css 一律不要再写 .subnav / .subnav-inner /
     .subnav-list / .crumb —— 那些覆写特异性比本文件的断点规则高，
     曾经把移动端（纵向排列时）的标签行压成 0 高，看起来像"没有标签"。
   PSD 基准（1920 稿，15 个页面完全一致）：
     条顶 641 / 条底 700（高 59）、左右各留 240（栏宽 1440）
     标签文字贴顶，字色 #333，间距 55
     当前项红色下划线通栏（宽=文字宽）、高 4、压住条底那条灰线
     面包屑右对齐贴到 1680，末级 #005fb3
   -------------------------------------------------------------------------- */
.subnav {
  /* PSD「二级」组在 y=641..702，banner 底是 601 —— 中间空带正好 40。
     这里曾经被改成 0.3rem，全站 15 页就整体上移 10px，二级栏分区和页脚差分一起变差 */
  margin-top: 0.4rem;
  border-bottom: 1px solid #e5e5e5;
}
@media(max-width:768px){  
  .subnav {margin-top: 0.1rem;}
  .footer-nav {display:none;}
  .pro_subnav {display:none;}
}

.subnav-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
  width: min(14.42rem, calc(100% - 0.4rem));
  height: 0.59rem;
}
/* flex:1 让空标签栏（产品详情页）把面包屑顶到右边，与 PSD 一致 */
.subnav-list {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.55rem;
  font-size: var(--fs-body);
}
.subnav-list a {
  position: relative;
  display: block;
  height: 0.59rem;
  line-height: 0.18rem;
  color: var(--c-ink);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.subnav-list a:hover { color: var(--c-primary); }
.subnav-list a.is-active { color: var(--c-ink); }
.subnav-list a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.01rem;
  width: 100%;
  height: 0.04rem;
  background: var(--c-accent);
}
.crumb {
  flex: 0 0 auto;
  font-size: 0.18rem;
  line-height: 0.18rem;
  color: var(--c-ink-3);
}
/* 标签横向滚动时的两端渐隐提示。class 由 main.js 按「真的能滚」才加，
   滚到最左/最右时分别去掉一侧的渐隐，避免边缘文字被无谓地吃掉 */
.subnav-list.is-scrollable {--sub-fade-l: 0.3rem;--sub-fade-r: 0.3rem;-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--sub-fade-l),#000 calc(100% - var(--sub-fade-r)), transparent 100%);mask-image: linear-gradient(90deg, transparent 0, #000 var(--sub-fade-l),#000 calc(100% - var(--sub-fade-r)), transparent 100%);}
.subnav-list.is-scrollable.at-start { --sub-fade-l: 0rem; }
.subnav-list.is-scrollable.at-end { --sub-fade-r: 0rem; }
.crumb a { color: var(--c-ink-3); transition: color 0.2s ease; }
.crumb a:hover { color: var(--c-primary); }
.crumb .sep { padding-inline: 0.06rem; }
.crumb span { color: var(--c-primary); }

/* --------------------------------------------------------------------------
   3. 通用区块标题（与首页一致的红块 + 中文 + 英文）
   -------------------------------------------------------------------------- */
.sec-head { position: relative; }
.sec-head .head {
  display: flex;
  align-items: flex-start;
  gap: 0.16rem;
}
.sec-head .head-mark {
  flex: none;
  width: 0.44rem;
  height: 0.46rem;
  margin-top: 0.08rem;
  background: var(--c-accent);
  -webkit-clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%);
}
.sec-head .head-cn {
  font-size: var(--fs-h2);
  line-height: 1;
  color: var(--c-ink);
}
.sec-head .head-en {
  margin-top: 0.12rem;
  font-family: var(--ff-en);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* --------------------------------------------------------------------------
   4. 通用正文排版
   -------------------------------------------------------------------------- */
.rich-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
}
.rich-text p + p { margin-top: 0.28rem; }
.rich-text strong { color: var(--c-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   5. 产品卡网格（产品中心列表 / 相关推荐通用）
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.18rem;
}
.pcard {
  display: block;
  height: 4.22rem;
  border-radius: var(--radius-card);
  background: var(--c-card);
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.pcard:hover {
  transform: translateY(-0.06rem);
  box-shadow: 0 0.12rem 0.3rem rgba(0, 0, 0, 0.08);
}
.pcard__fig {
  display: block;
  height: 2.25rem;
  margin-top: 0.47rem;
  padding-inline: 0.4rem;
}
.pcard__fig img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pcard__name {
  display: block;
  margin-top: 0.42rem;
  padding-inline: 0.2rem;
  font-size: 0.2rem;
  line-height: 1;
  text-align: center;
  color: var(--c-ink);
}
.pcard__spec {
  display: block;
  margin-top: 0.19rem;
  padding-inline: 0.2rem;
  font-size: var(--fs-sm);
  line-height: 1;
  text-align: center;
  color: var(--c-ink-3);
}

/* --------------------------------------------------------------------------
   6. 分页（圆形页码，hover/选中深蓝）
   -------------------------------------------------------------------------- */
.pager {display: flex;align-items: center;justify-content: center;gap: 0.15rem;margin-top: 0.7rem;}
.pager button,
.pager a {display: grid;place-items: center;width: 0.44rem;height: 0.44rem;border: 1px solid var(--c-line);border-radius: 50%;font-family: var(--ff-en);font-size: var(--fs-sm);color: var(--c-ink-2);transition: background-color 0.2s ease, border-color 0.2s ease,color 0.2s ease;position: relative;}
.pager .pager-prev:before{position: absolute;width: 100%;height: 100%;content: '';background: url(../images/ico-chevron-left.svg) no-repeat center;background-size: 15px auto;left: 50%;top: 50%;transform: translate(-50%, -50%); filter:brightness(0);opacity:.28;}
.pager .pager-prev {background-color: var(--c-white); border: 1px solid var(--c-line);}
.pager .pager-prev:hover { background-color: #b8080e;border-color: #b8080e;}
.pager .pager-prev:hover:before{filter:none;opacity:1; }

.pager button:hover:not(:disabled),
.pager a:hover {border-color: #b8080e;
  background-color: #b8080e;

  color: var(--c-white);}
.pager .pager-dots {width: auto;border: 0;color: var(--c-ink-3);cursor: default;}
.pager .pager-dots:hover { background-color: none; color: var(--c-ink-3); }
.pager .a_cur {background: var(--c-white);box-shadow: inset 0 0 0 2px var(--c-accent);color: var(--c-accent);}
.pager .a_cur:hover { background-color: var(--c-white); color: var(--c-accent); }
.pager .pager-next { background-color: var(--c-white); border: 1px solid var(--c-line);}
.pager .pager-next:before { position: absolute;width: 100%;height: 100%;content: '';
  background: url(../images/ico-chevron-left.svg) no-repeat center;
  background-size: 15px auto;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(180deg);
   filter:brightness(0);opacity:.28;

  }
.pager .pager-next:hover { background-color: #b8080e; border-color: #b8080e;}
.pager .pager-next:hover:before{filter:none;opacity:1; }

/* --------------------------------------------------------------------------
   7. 侧栏（分类导航 / 筛选 / 搜索）
   -------------------------------------------------------------------------- */
.side {
  flex: none;
  width: 3.43rem;
}
.side-search {
  position: relative;
  margin-bottom: 0.3rem;
}
.side-search input {
  width: 100%;
  height: 0.62rem;
  padding-inline: 0.42rem 0.5rem;
  border: 1px solid var(--c-line);
  border-radius: 0.31rem;
  font-size: var(--fs-sm);
  color: var(--c-ink);
  background: var(--c-white);
}
.side-search input::placeholder { color: var(--c-ink-3); }
.side-search button {
  position: absolute;
  right: 0.22rem;
  top: 50%;
  width: 0.19rem;
  height: 0.19rem;
  transform: translateY(-50%);
}
.side-search button img { width: 100%; height: 100%; }

.side-block + .side-block { margin-top: 0.34rem; }
.side-title {
  position: relative;
  padding-left: 0.2rem;
  font-size: var(--fs-h5);
  line-height: 1;
  color: var(--c-ink);
}
.side-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.02rem;
  width: 0.06rem;
  height: 0.2rem;
  background: var(--c-primary);
}
.side-list { margin-top: 0.22rem; }
.side-list li + li { margin-top: 0.14rem; }
.side-list a {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  font-size: var(--fs-body);
  color: var(--c-ink-2);
  transition: color 0.2s ease;
}
.side-list a::before {
  content: "";
  flex: none;
  width: 0.19rem;
  height: 0.16rem;
  background: var(--c-line);
  -webkit-clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 62% 100%, 0 100%);
  transition: background-color 0.2s ease;
}
.side-list a:hover,
.side-list a.is-active { color: var(--c-primary); }
.side-list a:hover::before,
.side-list a.is-active::before { background: var(--c-primary); }

/* --------------------------------------------------------------------------
   8. 内容+侧栏两栏骨架
   -------------------------------------------------------------------------- */
.layout {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
}
.layout__main { flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   9. 响应式
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   2b. 产品分类：桌面侧栏列表 + 移动端「所有产品」下拉
   产品中心页桌面是左侧栏里的分类列表；≤768 收成下拉，点「所有产品」展开。
   产品详情页按 PSD 是整幅内容区、桌面没有侧栏，所以那份多一个 .cat-dd--pd，
   只在移动端出现。两页共用这套样式，故放在 sub.css（详情页不加载 p-product.css）。
   -------------------------------------------------------------------------- */
.cat-nav > ul > li + li {
  margin-top: 0;
}
.cat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.7rem;
  padding-right: 0.09rem;
}
.cat-link {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.17rem;
  min-width: 0;
  font-size: 0.2rem;
  color: var(--c-ink);
  transition: color 0.2s ease;
}
.cat-link:hover {
  color: var(--c-accent);
}
/* 当前分类：文字保持正文色，只把左侧图标点亮（PSD：主板黑字 + 红图标） */
.cat-link.is-active { color: var(--c-ink); }
/* 图标为 PSD 切图（19x16，导出 @3x）：未展开灰、展开红。
   红色「只」跟展开态走 —— 不绑 is-active、也不绑 hover。绑 is-active 会让收起后
   仍留一个红图标（看起来像没收起）；绑 hover 会让鼠标一扫又亮，同样误导。
   叠两层做 opacity 过渡，避免换图时红灰硬跳 */
.cat-mark {
  flex: none;
  position: relative;
  top: -0.01rem;          /* 设计稿里图标比文字中心线高 1px */
  margin-left: -0.01rem;  /* 图标框比版心左沿多出 1px */
  width: 0.19rem;
  height: 0.16rem;
  background: url("../images/cat-mark-off.png") no-repeat center / 100% 100%;
}
.cat-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/cat-mark-on.png") no-repeat center / 100% 100%;
  opacity: 0;
  transition: opacity 0.24s ease;
}
/* 只认最近一层 li，子项里再套 li 也不会被外层展开态带亮 */
li.is-open > .cat-row > .cat-link .cat-mark::after { opacity: 1; }

/* 加减号：18x4 横杠，展开态隐藏竖杠 */
.cat-toggle {
  position: relative;
  flex: none;
  width: 0.18rem;
  height: 0.18rem;
}
.cat-toggle.is-static {
  cursor: default;
}
.cat-toggle::before,
.cat-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--c-ink);
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
.cat-toggle::before {
  width: 0.18rem;
  height: 0.02rem;
}
.cat-toggle::after {
  width: 0.02rem;
  height: 0.18rem;
}
li.is-open .cat-toggle::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* 子项：收起时高度与外边距都为 0，所以「有子项但没展开」的一级行不会多出空隙
   （PSD 里收起的一级行是整 70px 一格）。展开时补上前后留白 */
.cat-sub {
  margin-top: 0;
  margin-bottom: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, margin 0.35s ease;
}
li.is-open .cat-sub {
  margin-top: 0.03rem;
  margin-bottom: 0.11rem;
  max-height: 2rem;
}
.cat-sub li a {display: flex;align-items: center;height: 0.42rem;padding-left: 0.35rem;font-size: 0.18rem;color: var(--c-ink-2);transition: color 0.2s ease;}
.cat-sub li a:hover,
.cat-sub li.is-active a{color: var(--c-accent);}

/* 展开时子项逐条淡入上移（原智算中心的动效，两页共用） */
li.is-open .cat-sub a {animation: catIn 0.34s cubic-bezier(0.22, 0.8, 0.28, 1) both;}
li.is-open .cat-sub li:nth-child(1) a { animation-delay: 0.02s; }
li.is-open .cat-sub li:nth-child(2) a { animation-delay: 0.07s; }
li.is-open .cat-sub li:nth-child(3) a { animation-delay: 0.12s; }
@keyframes catIn {
  from { opacity: 0; transform: translateY(-0.04rem); }
  to { opacity: 1; transform: none; }
}

/* 下拉外壳：桌面只显示列表（按钮隐藏），移动端反过来 */
.cat-dd__btn { display: none; }
/* 详情页那份只在移动端出现 */
.cat-dd--pd { display: none; }

@media (max-width: 1024px) {
  .side { width: 2.6rem; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 0.3rem 0.24rem; }
  /* 平板：栏宽缩放后 7 个标签会顶到面包屑，收一点间距字号并允许横滚兜底 */
  .subnav-inner { gap: 0.3rem; }
  .subnav-list {
    gap: 0.36rem;
    font-size: 0.17rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
  }
  .subnav-list::-webkit-scrollbar { display: none; }
  .subnav-list.is-scrollable { --sub-fade-l: 0.4rem; --sub-fade-r: 0.4rem; }
  .crumb { font-size: 0.16rem; line-height: 0.18rem; display: none; }
}

@media (max-width: 768px) {
  .page-banner { height: 3.2rem; }
  /* 标题与红斜块共用 --pb-title，只改这一个值两边一起缩，
     不要再单独写 .page-banner__mark 的宽高（原先 0.3x0.34 的比例也不对） */
  .page-banner__box { --pb-title: 0.4rem; }
  /* 移动端：标签一行横滚，面包屑另起一行，纵向不再被固定条高压扁 */
  .subnav-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    width: calc(100% - 0.4rem);
    height: auto;
    padding-block: 0.26rem 0.2rem;
  }
  .subnav-list {
    width: 100%;
    flex-wrap: wrap;
    gap: 0.22rem 0.44rem;
    font-size: 0.26rem;
    overflow: visible;
  }
  /* 条高放开后下划线要贴着文字，否则离字太远 */
  .subnav-list a {
    height: auto;
    line-height: 1.35;
    padding-bottom: 0.12rem;
    touch-action: pan-x;
  }
  .subnav-list a.is-active::after { height: 0.05rem; }
  .crumb {
    font-size: 0.22rem;
    line-height: 1.5;
  }
  .layout { flex-direction: column; gap: 0.5rem; align-items: stretch; }
  /* 竖排后 .layout__main 的 flex:1 会把 flex-basis 指到高度上，
     交叉轴又受 .layout 的 align-items:flex-start 影响，宽度会缩成内容宽 */
  .layout__main { flex: none; width: 100%; }
  .side { width: 100%; }
  .grid { grid-template-columns: 1fr; gap: 0.3rem; }
  .pcard__fig { height: 3rem; }
  .pcard__name { font-size: 0.28rem; }
  .pcard__spec { font-size: 0.22rem; }
  .pager { gap: 0.1rem; margin-top: 0.5rem; }
  .pager button,
  .pager a { width: 0.6rem; height: 0.6rem; font-size: 0.24rem; }

  /* ---- 产品类别下拉（移动端） ---- */
  .cat-dd--pd { display: block; }
  .cat-dd { margin-bottom: 0.3rem; }
  .cat-dd__btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
    width: 100%;
    height: 0.8rem;
    padding-inline: 0.26rem;
    border: 1px solid #edeeee;
    border-radius: 0.04rem;
    background: var(--c-white);
    font-size: 0.26rem;
    line-height: 1;
    color: var(--c-ink);
    text-align: left;
    cursor: pointer;
  }
  /* 展开箭头：两条边画的折角，收起朝下、展开朝上 */
  .cat-dd__caret {
    flex: none;
    width: 0.13rem;
    height: 0.13rem;
    margin-top: -0.05rem;
    border-right: 0.02rem solid var(--c-ink-3);
    border-bottom: 0.02rem solid var(--c-ink-3);
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }
  .cat-dd.is-open .cat-dd__caret {
    margin-top: 0.04rem;
    transform: rotate(-135deg);
  }
  .cat-dd__panel { display: none; }
  .cat-dd.is-open .cat-dd__panel {
    display: block;
    margin-top: 0.12rem;
    padding-inline: 0.26rem;
    border: 1px solid #edeeee;
    border-radius: 0.04rem;
    background: var(--c-white);
  }
  .cat-row { height: 0.9rem; }
  .cat-link { font-size: 0.3rem; gap: 0.2rem; }
  .cat-mark { width: 0.28rem; height: 0.24rem; }
  .cat-sub li a { height: 0.6rem; font-size: 0.26rem; }
}