@charset "UTF-8";
/* 产品中心专用样式(继承 newsite.css) */

/* ---- 页头横幅(内页通用) ---- */
.ph{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.ph::after{content:"";position:absolute;right:-100px;top:-140px;width:420px;height:420px;
  border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.16),transparent 70%)}
.ph-in{max-width:1200px;margin:0 auto;padding:52px 24px 56px;position:relative;z-index:1}
.ph .crumb{font-size:13px;color:rgba(255,255,255,.62);margin-bottom:12px}
.ph .crumb a{color:rgba(255,255,255,.62)}
.ph .crumb a:hover{color:#fff}
.ph h1{font-size:30px;font-weight:700;letter-spacing:.5px}
.ph p{margin-top:12px;font-size:15px;color:rgba(255,255,255,.78);max-width:720px}

/* ---- 分类侧栏 + 内容区 ---- */
.pl{display:grid;grid-template-columns:228px 1fr;gap:36px;padding:44px 0 70px;
  max-width:1200px;margin:0 auto}
.pl-side{align-self:start;position:sticky;top:84px}
.pl-side .st{font-size:13px;letter-spacing:2px;color:var(--cyan);font-weight:600;
  margin-bottom:14px}
.pl-nav{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:#fff}
.pl-nav a{display:block;padding:12px 16px;font-size:14.5px;color:var(--ink-2);
  border-bottom:1px solid var(--line);transition:.15s}
.pl-nav a:last-child{border-bottom:0}
.pl-nav a:hover{background:#F5F9FE;color:var(--cyan-d);padding-left:20px}
.pl-nav a.on{background:var(--navy);color:#fff;font-weight:600}
.pl-nav .g{padding:11px 16px;background:var(--bg);font-size:12.5px;color:var(--ink-3);
  font-weight:600;letter-spacing:.5px}
.pl-tip{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:16px}
.pl-tip h4{font-size:14px;color:var(--navy);margin-bottom:8px}
.pl-tip p{font-size:13px;color:var(--ink-2);line-height:1.7}
.pl-tip a{display:inline-block;margin-top:10px;color:var(--cyan-d);font-size:13.5px}

/* ---- 分类标题条 ---- */
.cat-hd{display:flex;align-items:baseline;gap:14px;margin-bottom:22px;padding-bottom:14px;
  border-bottom:2px solid var(--navy)}
.cat-hd h2{font-size:22px;color:var(--navy);font-weight:700}
.cat-hd .n{font-size:13.5px;color:var(--ink-3)}
.cat-hd .desc{font-size:14px;color:var(--ink-2);margin-left:auto}

/* ---- 产品卡片网格 ---- */
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:20px}
.pc{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  transition:.2s;display:flex;flex-direction:column}
.pc:hover{border-color:var(--cyan);box-shadow:var(--shadow);transform:translateY(-3px)}
.pc-img{height:186px;background:#FAFCFD;display:flex;align-items:center;
  justify-content:center;padding:14px;border-bottom:1px solid var(--line)}
.pc-img img{max-height:100%;max-width:100%;object-fit:contain;
  transition:transform .3s}
.pc:hover .pc-img img{transform:scale(1.05)}
.pc-b{padding:15px 16px 17px;flex:1;display:flex;flex-direction:column}
.pc-b .mdl{font-size:11.5px;color:var(--cyan);font-weight:700;letter-spacing:1px;
  margin-bottom:5px}
.pc-b h3{font-size:15.5px;color:var(--ink);line-height:1.5;margin-bottom:10px;flex:1}
.pc-b .go{font-size:13px;color:var(--ink-3);transition:.15s}
.pc:hover .pc-b .go{color:var(--cyan-d)}

/* ---- 没有图的兜底 ---- */
.pc-img.ph{background:linear-gradient(135deg,#F2F7FB,#E8F1F8);color:var(--ink-3);
  font-size:13px;flex-direction:column;gap:6px}
.pc-img.ph span{font-size:26px;opacity:.35}

/* ---- 空状态 ---- */
.no-prod{background:#fff;border:1px dashed var(--line);border-radius:4px;
  padding:52px;text-align:center;color:var(--ink-3)}
.no-prod h3{font-size:17px;color:var(--ink-2);margin-bottom:8px}
.no-prod p{font-size:14px}

/* ---- 响应式 ---- */
@media(max-width:900px){
  .pl{grid-template-columns:1fr;gap:24px}
  .pl-side{position:static}
  .pl-nav{display:flex;overflow-x:auto}
  .pl-nav a,.pl-nav .g{border-bottom:0;border-right:1px solid var(--line);
    white-space:nowrap}
  .cat-hd{flex-wrap:wrap}
  .cat-hd .desc{margin-left:0;width:100%}
}