/* =============================================================================
   产品列表页 plp.css — v1.3.17 布局 + v1.3.19 列表下方四个模块
   布局 1:1 参照 gateopenerfactory.com/products 的实测规格（2026-10-09 从其 CSS/HTML 提取）：
   - Hero：#1A1A1A 暗底、400px 高、斜纹 overlay、内容居中 max-800、border-bottom 4px 强调色
     （本站换成 4px 主题蓝；红 label 在暗底上我们用浅蓝 #9CCBFF，对比 9.5:1）
   - 两栏：230px 侧栏 + 1fr；≥1280 容器放宽到 1360
   - 侧栏：白卡 radius16、阴影 0 2px 20px rgba(0,0,0,.07)、padding 20/16、sticky top 100
   - 卡片：radius16、1px #E8E8E8、图区 200px contain、分类眉标 11/700 大写、标题 16/700、
     摘要 clamp2、2×2 规格格（值 13/700 + 标签 10 大写）
   - 网格 3 列 gap20；≤1024 2 列；≤520 1 列；≤768 侧栏变左侧抽屉 + 顶部筛选条
   对比度决策（沿用全站口径）：白底上的强调文字/图标用 --brand-dark #0062cc（5.8:1），
   不用 #007bff（3.98:1）；暗底上的强调文字用 #9CCBFF。
   ========================================================================== */

.bk-plp-hero{background:var(--ink);border-bottom:4px solid var(--brand);position:relative;overflow:hidden}
.bk-plp-hero::before{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 2px,transparent 2px 8px);pointer-events:none}
.bk-plp-hero-in{position:relative;z-index:1;min-height:400px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;max-width:800px;margin:0 auto;padding:64px 16px}
.bk-plp-hero-label{color:#9CCBFF;font-size:14px;font-weight:700;letter-spacing:.1em;margin-bottom:16px}
.bk-plp-hero-title{color:#fff;font-size:48px;font-weight:800;line-height:1.1;margin:0 0 24px}
.bk-plp-hero-sub{color:#C9CED6;font-size:18px;line-height:1.6;max-width:600px;margin:0 auto}

/* ---------- 两栏 ---------- */
.bk-plp-section{background:#F7F8FA;padding:40px 0 96px}
.bk-plp-layout{display:grid;grid-template-columns:230px 1fr;gap:24px;align-items:start}
@media (min-width:1280px){ .bk-plp-layout{max-width:1360px} }

/* ---------- 侧边筛选 ---------- */
/* 1.3.46：加了参数筛选三组后侧栏可能比视口高，sticky 状态下限高内滚动，最底组才滚得到 */
.bk-plp-side{background:#fff;border-radius:16px;box-shadow:0 2px 20px rgba(0,0,0,.07);
  padding:20px 16px;position:sticky;top:100px;max-height:calc(100vh - 120px);overflow:auto}
.bk-plp-side-close{display:none;position:absolute;top:14px;right:14px;background:none;border:0;
  font-size:20px;line-height:1;padding:4px 8px;cursor:pointer;color:var(--sec)}
.bk-plp-side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.bk-plp-side-title{font-size:17px;font-weight:800;color:var(--ink)}
.bk-plp-clear{background:none;border:0;padding:0;color:var(--brand-dark);font-size:13px;font-weight:600;
  cursor:pointer;text-decoration:underline}
.bk-plp-group-label{font-size:10px;font-weight:800;letter-spacing:.1em;color:#94A3B8;
  text-transform:uppercase;margin-bottom:12px}
.bk-plp-cb{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer;
  color:var(--ink);text-decoration:none;font-size:13px;line-height:1.3}
.bk-plp-cb:hover .bk-plp-box{border-color:var(--brand-dark)}
.bk-plp-box{width:16px;height:16px;border:2px solid #CBD5E0;border-radius:4px;flex-shrink:0;
  position:relative;transition:all .15s ease}
.bk-plp-cb.is-on .bk-plp-box{background:var(--brand-dark);border-color:var(--brand-dark)}
.bk-plp-cb.is-on .bk-plp-box::after{content:"";position:absolute;left:3px;top:0;width:5px;height:9px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(40deg)}
.bk-plp-cb.is-on .bk-plp-text{font-weight:700}
.bk-plp-text{flex:1}
.bk-plp-count{font-size:11px;color:#94A3B8;background:#F1F5F9;border-radius:10px;padding:1px 6px;font-weight:600}
/* 1.3.46 参数筛选：0 命中灰显不可点；已选条件胶囊（组内多选 OR、组间 AND，走服务端链接） */
.bk-plp-cb.is-off{pointer-events:none;opacity:.45;cursor:default}
.bk-plp-chips{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 14px}
.bk-plp-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#fff !important;
  text-decoration:none;background:var(--brand-dark);border-radius:999px;padding:3px 10px}
.bk-plp-chip:hover{background:#0056b3}
.bk-plp-chip i{font-style:normal;font-weight:800}
.bk-plp-divider{height:1px;background:var(--line);margin:16px 0}
.bk-plp-side-actions{display:flex;flex-direction:column;gap:10px}
.bk-plp-btn-solid{display:block;width:100%;padding:13px 0;background:var(--brand-dark);color:#fff !important;
  border-radius:10px;font-size:15px;font-weight:700;text-align:center;text-decoration:none;transition:background .2s}
.bk-plp-btn-solid:hover{background:#0056b3;color:#fff !important}
.bk-plp-btn-ghost{display:block;width:100%;padding:12px 0;background:transparent;color:var(--ink) !important;
  border:1.5px solid #CBD5E0;border-radius:10px;font-size:14px;font-weight:600;text-align:center;
  text-decoration:none;transition:border-color .2s}
.bk-plp-btn-ghost:hover{border-color:var(--ink);color:var(--ink) !important}

/* ---------- 右侧主栏 ---------- */
.bk-plp-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:20px}
.bk-plp-results{color:var(--sec);font-size:14px;font-weight:500}
.bk-plp-view{display:flex;background:#F1F5F9;border-radius:10px;padding:4px;gap:4px}
.bk-plp-vbtn{width:34px;height:34px;border:0;background:transparent;color:var(--sec);border-radius:7px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}
.bk-plp-vbtn.is-active{background:var(--brand-dark);color:#fff}

/* ---------- 产品网格与卡片（GOP 列表卡：200px 图区 + 眉标 + 2×2 规格） ---------- */
.bk-plp-grid.is-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bk-plp-grid.is-list{display:flex;flex-direction:column;gap:16px}
.bk-plp-card{background:#fff;border-radius:16px;border:1px solid #E8E8E8;overflow:hidden;
  position:relative;display:flex;flex-direction:column;transition:all .3s ease}
.bk-plp-card:hover{box-shadow:0 10px 40px rgba(0,0,0,.08);border-color:var(--brand);transform:translateY(-4px)}
.bk-plp-card-overlay{position:absolute;inset:0;z-index:10}
/* 1.3.37：主图框改**正方形**。原来是 `height:200px` 写死 → 框跟着列宽走（线上实测 337×200＝1.685:1，
   1000px 视口 330×200、700px 视口 307×200），客户看着就是"长方形"。现在用 `aspect-ratio:1/1`
   让高度＝宽度，三档视口分别是 337×337 / 330×330 / 307×307。
   1.3.61：图从 `contain`（上下留白）改成 `cover` 硬裁满框 —— 客户 2026-10-14 定稿。
   裁切方向（1.3.62 更正过注释，原来是写反的）：1.21:1 的横图进 1:1 方框，cover 是**上下贴满、
   左右各吃掉 ~8.7%**（(1−1/1.21)/2），不是「裁掉上下留白」—— 那三张 PNG 的上下白边是**图自带的**
   （内容纵向只占 25%~79%），CSS 裁不掉。实测三张横图裁完后的内容包围盒横 7%~90% / 21%~77% /
   18%~69%，两端都没贴到框边 = 产品本体没被切，整体放大 1.21 倍、更贴框，但框里仍有白边。
   要铺满只能重传裁紧的图。正方形那 11 张 cover == contain，像素不动。列表视图与手机端同一选择器，一并生效。 */
.bk-plp-card-img{aspect-ratio:1/1;height:auto;background:#fff;display:flex;align-items:center;justify-content:center;
  padding:16px;overflow:hidden;border-bottom:1px solid #E8E8E8}
.bk-plp-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bk-plp-card:hover .bk-plp-card-img img{transform:scale(1.08)}
.bk-plp-card-body{padding:20px;display:flex;flex-direction:column;flex:1}
.bk-plp-card-cat{color:var(--brand-dark);font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:8px}
.bk-plp-card-title{font-size:16px;font-weight:700;line-height:1.3;margin:0 0 8px}
.bk-plp-card-title a{color:var(--ink)}
.bk-plp-card-title a:hover{color:var(--brand-dark)}
.bk-plp-card-desc{color:var(--sec);font-size:14px;line-height:1.6;margin:0 0 16px;flex-grow:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bk-plp-card-specs{border-top:1px solid var(--line);padding-top:16px;
  display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}
.bk-plp-p{display:flex;align-items:flex-start;gap:8px;color:var(--brand-dark)}
.bk-plp-p svg{margin-top:2px;flex-shrink:0}
.bk-plp-p b{display:block;font-size:13px;font-weight:700;color:var(--ink);line-height:1.2}
.bk-plp-p span{display:block;font-size:10px;color:var(--sec);margin-top:1px;text-transform:uppercase;
  font-weight:500;letter-spacing:.05em}

/* 列表视图（GOP .list-view：图左文右）。1.3.37：这一视图同样要正方形 ——
   卡片是 row + align-items:stretch，只写 aspect-ratio 会被 stretch 拉高，所以直接锁 200×200 并脱离拉伸。 */
.bk-plp-grid.is-list .bk-plp-card{flex-direction:row;align-items:stretch}
.bk-plp-grid.is-list .bk-plp-card-img{width:200px;height:200px;align-self:flex-start;border-bottom:0;border-right:1px solid #E8E8E8;flex-shrink:0}
.bk-plp-grid.is-list .bk-plp-card-body{flex-direction:row;align-items:center;gap:24px;padding:24px}
.bk-plp-grid.is-list .bk-plp-card-desc{margin-bottom:0}
.bk-plp-grid.is-list .bk-plp-card-cat{margin-bottom:8px}
.bk-plp-grid.is-list .bk-plp-card-info{flex:1}

.bk-plp-empty{background:#fff;border:1px solid var(--line);border-radius:16px;padding:48px 24px;
  text-align:center;color:var(--sec);font-size:15px}
.bk-plp-empty a{color:var(--brand-dark);font-weight:600}

/* ---------- 列表下方四个模块（v1.3.19：1:1 照 GOP /products 网格下方）----------
   组件本体复用首页 home.css（.hg-sec-head / .hg-seg-card / .hg-why-grid / .hg-faq-* / .hg-cta），
   这里只补 GOP 在这页用的那几档差异：模块间距、灰底带描边、三列 showcase、单列 FAQ、CTA 装饰块。
   实测值：.industry-solutions-section{padding:80px 0;background:#f9f9f9;border-top/bottom:1px subtle}
           .solutions-showcase-grid{auto-fit minmax(300px,1fr) gap 28px margin-top 40px}
           .cta-section{padding:var(--spacing-20)=80px 0} + .dark 黑底 + bg-pattern 斜块 */
.bk-plp-mod{padding:80px 0}
.bk-plp-mod--gray{background:#F9F9FA;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bk-plp-mod .hg-sec-head{margin-bottom:40px}
/* .hg-seg-grid.three / .hg-faq-grid.one 已上移到 home.css（v1.3.20，详情页也要用） */
.bk-plp-mod .hg-seg-card h3{font-size:19px}
.bk-plp-cta{position:relative;overflow:hidden}
.bk-plp-cta .hg-cta-in{position:relative;z-index:2}
.bk-plp-cta-pat1{position:absolute;top:-50%;right:-5%;width:40%;aspect-ratio:1;transform:rotate(-15deg);
  border-radius:30px;background:linear-gradient(135deg,rgba(0,123,255,.15),rgba(255,255,255,0) 70%);pointer-events:none}
.bk-plp-cta-pat2{position:absolute;bottom:-30%;left:10%;width:25%;aspect-ratio:1;transform:rotate(25deg);
  border-radius:20px;border:2px solid rgba(255,255,255,.06);pointer-events:none}
@media (max-width:768px){
  .bk-plp-mod{padding:56px 0}
  .hg-seg-grid.three{margin-top:28px}
  .hg-cta{padding:56px 0}
}

/* 手机端筛选条（≤768 显示） */
.bk-plp-mbar{display:none;padding:12px 16px;background:#F1F2F4;border-bottom:1px solid var(--line)}
.bk-plp-mbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 20px;
  background:var(--brand-dark);color:#fff;border:0;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer}

/* ---------- 响应式 ---------- */
@media (max-width:1024px){
  .bk-plp-grid.is-grid{grid-template-columns:repeat(2,1fr)}
  .bk-plp-rec-grid{grid-template-columns:repeat(2,1fr)}
  .bk-plp-rec{padding:44px 0 64px}
  .bk-plp-rec-title{font-size:26px}
}
@media (max-width:768px){
  .bk-plp-hero-in{min-height:0;padding:72px 16px}
  .bk-plp-hero-title{font-size:36px}
  .bk-plp-hero-sub{font-size:16px}
  .bk-plp-mbar{display:block}
  .bk-plp-layout{grid-template-columns:1fr}
  .bk-plp-side{position:fixed;top:0;left:-320px;width:300px;height:100vh;max-height:100vh;
    overflow-y:auto;border-radius:0;z-index:300;transition:left .3s ease;box-shadow:4px 0 24px rgba(0,0,0,.15)}
  .bk-plp-side.is-open{left:0}
  .bk-plp-side-close{display:block}
  .bk-plp-grid.is-list .bk-plp-card{flex-direction:column}
  /* 1.3.37：≤768px 列表视图的卡片回到竖排 → 图框整幅宽 + 正方形；align-self 要显式回到 stretch，
     否则上面那条桌面列表视图的 flex-start 会让宽度缩到内容宽。 */
  .bk-plp-grid.is-list .bk-plp-card-img{width:100%;height:auto;aspect-ratio:1/1;align-self:stretch;border-right:0;border-bottom:1px solid #E8E8E8}
  .bk-plp-grid.is-list .bk-plp-card-body{flex-direction:column;align-items:stretch;gap:16px}
}
@media (max-width:520px){
  .bk-plp-hero-title{font-size:32px}
  .bk-plp-grid.is-grid{grid-template-columns:1fr}
  .bk-plp-rec-grid{grid-template-columns:1fr}
}