/* ══════════════════════════════════════════════════════════════
   MOKELING · 静态产品文档 · Mobile 样式
   适用范围：wp-content/uploads/ 下所有产品 HTML 文档
   加载方式：<link media="(max-width: 768px)">（浏览器原生分流）
   PC 样式：各 HTML 内联 <style>，本文件不干预
   修改规则：只写需要覆写 PC 的差异属性
   ══════════════════════════════════════════════════════════════ */

/* 全局容器 */
.page-wrap {
  padding: 32px 16px 48px;
}

/* 页头 */
.page-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
}
.page-title {
  font-size: 20px;
}
.page-sub {
  font-size: 13px;
}

/* 产品块 — 两侧 padding 从 40px 收到 16px */
.product-block {
  padding: 20px 16px;
  border-radius: 12px;
}

/* 产品名称 */
.prod-name {
  font-size: 18px;
}
.prod-tagline {
  font-size: 12px;
}

/* 描述文字 */
.prod-desc {
  font-size: 13px;
  margin-bottom: 20px;
}

/* 规格网格：强制 2 列 */
.specs-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.spec-card {
  padding: 12px;
}
.spec-label {
  font-size: 10px;
}
.spec-val {
  font-size: 13px;
}

/* 接线图区域 */
.wiring-diagram {
  padding: 12px 8px;
}

/* 特性列表 */
.features {
  gap: 8px;
  margin-bottom: 20px;
}
.feature-row span {
  font-size: 12px;
}

/* 标签 */
.tags {
  gap: 5px;
}
.tag {
  font-size: 11px;
  padding: 4px 10px;
}

/* 分隔线 */
.section-divider {
  margin-top: 20px;
}
.section-divider span {
  font-size: 10px;
}

/* 小程序 UI 容器竖排（21c 系列） */
.ui-container {
  flex-direction: column;
  gap: 24px;
  padding: 20px 16px;
}
.ui-mockup {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}