/* ============================================================
 * 「解决方案 / 选购指南」↔「产品」关联区块样式  v1.1.48
 *
 * 两个方向共用本文件：
 *   .sol-goods / .sg-*   方案页：本方案涉及的产品（sg = solution goods）
 *   .rp-rel    / .rp-*   产品页：本产品出现在哪些方案/指南里（rp = related posts）
 * 类名各自带前缀，不碰站内其它样式。
 * 配色沿用站点主题：主蓝 #0f88c4 / 青绿 #12b5a4 / 深蓝 #0b3b56 / 浅底 #f4f9fc
 * ============================================================ */

/* ---------- 方案页：本方案涉及的产品 ---------- */
.sol-goods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 12px;
}
.sg-item {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 12px; border: 1px solid #e9f1f7; border-radius: 6px;
  background: #fff; text-decoration: none; transition: border-color .15s;
}
.sg-item:hover { border-color: #0f88c4; }
.sg-item.is-out { background: #fbfdff; border-style: dashed; }
.sg-pic {
  display: flex; align-items: center; justify-content: center;
  height: 104px; background: #f8fbfd; border-radius: 4px; overflow: hidden;
}
.sg-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sg-no { font-family: Consolas, Menlo, monospace; font-size: 12px; color: #0f7396; word-break: break-all; }
.sg-nm { font-size: 13px; color: #35505f; line-height: 1.55; }
.sg-item:hover .sg-nm { color: #0f88c4; }
.sg-tag { margin-top: auto; font-size: 12px; color: #9ab0c0; }
.sg-item.is-out .sg-tag { color: #c8922a; }

@media (max-width: 640px) {
  .sol-goods { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .sg-pic { height: 88px; }
}

/* ---------- 产品页：相关解决方案 / 选购指南 ---------- */
.rp-rel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.rp-item {
  display: flex; gap: 12px; align-items: flex-start; min-width: 0;
  padding: 12px; border: 1px solid #e9f1f7; border-radius: 6px;
  background: #fff; text-decoration: none; transition: border-color .15s;
}
.rp-item:hover { border-color: #0f88c4; }
.rp-pic {
  width: 86px; height: 66px; flex: none; border-radius: 4px;
  background: #f8fbfd; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.rp-pic img { width: 100%; height: 100%; object-fit: cover; }
.rp-bd { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.rp-k {
  align-self: flex-start; padding: 1px 8px; border-radius: 3px;
  background: #eef7fd; color: #0f7396; font-size: 12px; line-height: 1.7;
}
.rp-t { font-size: 13px; color: #24455c; line-height: 1.55; }
.rp-item:hover .rp-t { color: #0f88c4; }

@media (max-width: 640px) {
  .rp-rel { grid-template-columns: 1fr; }
}