/* 产品详情页专用样式 */

/* 面包屑 */
.crumb{font-size:13px;color:var(--ink-3);padding:18px 0 0}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--brand)}
.crumb span{color:var(--ink-2)}

/* 产品首屏 */
.phero{padding:26px 0 54px;border-bottom:1px solid var(--line)}
.phero-in{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.phero-img{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;display:flex;align-items:center;justify-content:center}
.phero-img img{max-height:400px;width:auto;object-fit:contain}
.phero-info h1{font-size:34px;letter-spacing:-.02em;margin:10px 0 14px}
.tag-now{display:inline-block;font-size:12px;font-weight:600;color:var(--brand);
  background:var(--brand-soft);padding:5px 11px;border-radius:3px;letter-spacing:.02em}
.phero-lede{font-size:16px;color:var(--ink-2);line-height:1.8;margin-bottom:24px}
.phero-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);margin-bottom:26px;overflow:hidden}
.phero-kpi>li,.phero-kpi>div{background:#fff;padding:16px 14px;text-align:center}
.phero-kpi b{display:block;font-size:22px;color:var(--brand);letter-spacing:-.02em;line-height:1.2}
.phero-kpi span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:5px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.cta-note{font-size:12.5px;color:var(--ink-3)}

/* 适合 / 不适合 */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.fit-col{background:#fff;padding:26px 24px}
.fit-col h3{font-size:15px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.fit-yes h3{color:#0f7a4a}
.fit-no h3{color:#b4442a}
.fit-col ul{display:flex;flex-direction:column;gap:11px}
.fit-col li{font-size:14.5px;color:var(--ink-2);line-height:1.65;padding-left:22px;position:relative}
.fit-yes li::before{content:"✓";position:absolute;left:0;top:0;color:#0f7a4a;font-weight:700}
.fit-no li::before{content:"→";position:absolute;left:0;top:0;color:var(--ink-3);font-weight:700}
.fit-col li a{color:var(--brand);font-weight:600}
.fit-col li a:hover{text-decoration:underline}

/* 正文段落 */
.ptext{font-size:15px;color:var(--ink-2);line-height:1.85;max-width:760px}
.ptext+.ptext{margin-top:14px}
.ptext b{color:var(--ink)}
.note-tight{margin-top:18px}

/* 技术卡下方的横排要点：卡片是 3 列，这一条铺满整行 */
.card-feat-wide{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;
  margin:22px 0 0;flex:none}
.card-feat-wide li{font-size:13.5px}
@media (max-width:1000px){.card-feat-wide{grid-template-columns:1fr}}

/* 参数表当前行高亮 */
.row-on{background:var(--brand-soft)}
.row-on td,.row-on th{font-weight:600;color:var(--ink)}

@media (max-width:980px){
  .phero-in{grid-template-columns:1fr;gap:30px}
  .phero-info h1{font-size:27px}
  .phero-img img{max-height:300px}
}
/* .fit 的单列降级卡在 640 以下：main.css 的平板层(641–1000)给了两列，
   product.css 在后面加载，写在 980 这一层会反过来把 iPad 压成单列。 */
@media (max-width:640px){
  .fit{grid-template-columns:1fr}
}
@media (max-width:560px){
  .phero{padding:18px 0 38px}
  .phero-info h1{font-size:23px}
  .phero-kpi{grid-template-columns:1fr}
  .phero-kpi b{font-size:19px}
  .cta-row .btn{width:100%;justify-content:center}
  .fit-col{padding:20px 18px}
}

/* ---------- 案例页：草稿提示条 ---------- */
.draft-bar{background:#fff8e6;border-bottom:1px solid #f0d9a0;padding:13px 0}
.draft-bar .wrap{display:flex;gap:11px;align-items:flex-start}
.draft-bar b{color:#8a6100;font-size:13.5px;flex-shrink:0}
.draft-bar p{font-size:13px;color:#6f5320;line-height:1.75}
.cta-row-center{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ---------- 合作伙伴 logo 墙 ---------- */
/* 纯展示，不做悬停明细 —— 合作年限/装机台数取不到可靠来源，不显示 */
.plogos{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.plogo{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  height:104px;display:flex;align-items:center;justify-content:center;padding:18px 20px}
.plogo img{max-height:52px;max-width:100%;width:auto;object-fit:contain}
@media (max-width:1000px){ .plogos{grid-template-columns:repeat(3,1fr)} }
@media (max-width:640px){ .plogos{grid-template-columns:repeat(2,1fr);gap:12px} }