/* ============================================================
   WDELE — Products(/products)系列列表枢纽 · Series Selector
   页面私有 .ps-*;区块节奏/heading 复用 base.css 全局 .sec/.sec-tint/
   .sec-head/.eyebrow/.sect/.sect-sub/.btn。tokens 见 tokens.css。
   数据:卡全由 app.py 装配(series 活表 nav_order 序+core 硬指标+#04 关联计数)。
   单网格卡片样式统一;is_featured(#06)主推卡在媒体右上打 .ps-hot 角标。
   ============================================================ */

/* ---------- Hero(深色;唯一 h1 含 WDELE) ---------- */
.ps-hero{background:var(--dark);color:#fff;padding:74px 0 68px;overflow:hidden}
.ps-hero-eyebrow{color:#ffb39a}
.ps-hero-eyebrow::before{background:#ffb39a}
.ps-hero-in{max-width:940px}
.ps-hero h1{color:#fff;margin:14px 0 0;font-size:clamp(30px,4vw,46px);line-height:1.15;letter-spacing:-.015em}
.ps-hero-lede{color:rgba(255,255,255,.74);font-size:16px;line-height:1.75;margin:18px 0 0;max-width:700px}
.ps-hero-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.ps-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:rgba(255,255,255,.92);background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:7px 14px}
.ps-chip svg{color:#ff8a68;flex:none}

/* ---------- 卡片网格(单列表统一 3 列) ---------- */
.ps-grid{display:grid;gap:24px}
.ps-grid.cols3{grid-template-columns:repeat(3,1fr)}

.ps-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}
.ps-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}

/* 媒体 + code / HOT 徽标覆盖(左上 code,右上主推 hot) */
.ps-media{position:relative;aspect-ratio:1/1;background:var(--bg-2);border-bottom:1px solid var(--line)}
/* 系列卡图窗:同首页 cat —— 1:1 方形 + contain(源多为 800×800 方图,仅 wd-t 750×1000
   竖图):方图满幅整图无裁,竖图等高居中留底板;4:3 cover 切图、4:3 contain 缩图。 */
.ps-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.ps-media-ph{background:linear-gradient(160deg,#fff 0%,var(--bg-2) 60%,#fdeeea 100%)}
.ps-code{position:absolute;top:12px;left:12px;z-index:2;background:var(--dark);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.09em;padding:5px 10px;border-radius:6px}
.ps-hot{position:absolute;top:12px;right:12px;z-index:2;background:var(--red);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.08em;line-height:1;padding:6px 10px;border-radius:999px}

/* 正文
   flex:1 让正文吃掉「卡等高」剩下的空间 —— 没有它,.ps-foot 的 margin-top:auto 无处可分,
   CTA 会紧贴在内容后面,同一行三张卡的按钮就高低不齐(实测 1549/1585/1616)。
   .ps-name/.ps-desc 用 min-height 锁行高:系列名 1–2 行、描述 1–3 行不等,不锁的话
   下面 2×2 规格格与按钮的起点会跟着文字长度一行行错开(实测规格格 1378/1378/1399)。
   锁的是**行高倍数**,不写死 px —— 断点或字号变了照样对齐。 */
.ps-body{flex:1;display:flex;flex-direction:column;padding:18px 18px 20px;min-width:0}
.ps-name{font-size:16px;line-height:1.35;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink);
  min-height:calc(2 * 1.35em)}
.ps-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13px;line-height:1.6;color:var(--mut);margin:0 0 16px;min-height:calc(3 * 1.6em)}

/* 2×2 硬指标格(core 行;某系列无 core 整块不输出) */
.ps-spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 0 16px;padding:0;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ps-spec-cell{background:#fff;padding:11px 12px;min-width:0}
.ps-spec-k{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mut);margin:0;display:block}
.ps-spec-v{font-size:12px;font-weight:600;color:var(--ink);line-height:1.45;margin:5px 0 0;
  word-break:break-word;display:block}

/* 下缘 meta + 单 CTA */
.ps-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.ps-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;color:var(--mut)}
.ps-meta-dot{opacity:.5}
.ps-cta{width:100%;justify-content:center}

/* ---------- 底部 Custom OEM / ODM(全站 callout 口径;→ /oem-odm) ---------- */
.ps-oem{padding:88px 0}
.ps-oem-card{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:44px 48px}
.ps-oem-copy{max-width:660px}
.ps-oem-copy h2{color:var(--ink);font-size:clamp(21px,2.4vw,30px);letter-spacing:-.015em;margin:12px 0 0}
.ps-oem-body{font-size:14.5px;line-height:1.75;color:var(--mut);margin:12px 0 0}
.ps-oem .btn-dark{background:var(--ink);color:#fff;flex:none}
.ps-oem .btn-dark:hover{background:var(--red)}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .ps-grid.cols3{grid-template-columns:repeat(2,1fr)}
  .ps-oem-card{padding:34px 30px}
}
@media (max-width:620px){
  .ps-grid.cols3{grid-template-columns:1fr}
  .ps-hero{padding:60px 0 52px}
  .ps-oem{padding:60px 0}
  .ps-oem-card{flex-direction:column;align-items:flex-start;gap:22px}
}