/* ==========================================================================
   硬件产品页（/hardware 与 /hardware/<slug>）
   只放本页专属样式：页头 / 形态卡 / 参数对比 / 选型 / 参数表 / 问题对照 / 步骤。
   通用组件（按钮、表格、区块标题）在 site.css，这里不重复定义。
   ========================================================================== */

/* ---------------------------------------------------------- 01 页头 */

.hw-hero {
  position: relative;
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--c-line);
  background:
    radial-gradient(900px 320px at 88% -20%, var(--c-primary-soft), transparent 70%),
    var(--c-bg);
  overflow: hidden;
}
.hw-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: var(--sp-6);
  align-items: center;
}
.hw-hero__title {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h1);
}
.hw-hero__lead {
  margin: 0;
  max-width: 32em;
  font-size: var(--fs-h4);
  line-height: 1.75;
  color: var(--c-text-2);
}
.hw-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* 右栏：三种形态的缩略图并列，形态差别一眼看得出，比放数字有用 */
.hw-picker {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.hw-picker__item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  color: inherit;
  transition: background var(--t-fast) var(--e-out);
}
.hw-picker__item + .hw-picker__item { border-top: 1px solid var(--c-line); }
.hw-picker__item:hover { background: var(--c-bg-2); }
.hw-picker__item:hover .icon { color: var(--c-primary); }
.hw-picker__fig {
  display: block;
  width: 54px;
  color: var(--c-primary);
}
.hw-picker__fig svg { display: block; width: 100%; height: auto; }
.hw-picker__text b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.hw-picker__text em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--c-text-3);
}
.hw-picker .icon { color: var(--c-text-3); }

/* -------------------------------------------------- 02 形态示意图 */

.hw-fig {
  display: block;
  width: 100%;
  height: auto;
  color: var(--c-primary);
}

/* ------------------------------------------------ 03 商品卡（清单页）

   电商式商品卡：整块可点，图在上、文字在下。
   与之前的 article 结构不同 —— 现在整张卡是一个 <a>，
   所以没有独立的"查看详情"链接，改成卡片底部一行提示。
   图片容器固定比例，实拍图与示意图混排时高度一致，不参差。
*/
.hw-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
  align-items: stretch;
}

.hw-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--t-base) var(--e-out),
              box-shadow var(--t-base) var(--e-out),
              transform var(--t-base) var(--e-out);
}
.hw-card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--sh-2);
  transform: translateY(-2px);
}
.hw-card:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

/* 图区：固定 4:3，深一档底色让白底实拍图也有边界 */
.hw-card__fig {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--sp-3);
  background: var(--c-bg-2);
  border-bottom: 1px solid var(--c-line);
}
.hw-card__fig img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--t-base) var(--e-out);
}
.hw-card:hover .hw-card__fig img { transform: scale(1.03); }

/* 角标：压在图上左上角，不占文字区的行高 */
.hw-card__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  font-size: var(--fs-xs);
  color: var(--c-accent-ink);
  background: var(--c-accent-soft);
  border-radius: var(--r-full);
}

.hw-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}
.hw-card__name {
  font-size: var(--fs-h5);
  font-weight: 600;
  line-height: 1.45;
  color: var(--c-ink);
  transition: color var(--t-fast);
}
.hw-card:hover .hw-card__name { color: var(--c-primary); }

.hw-card__tagline {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-text-2);
}

/* 底部一行：左型号、右"查看详情"。型号可能为空，用 space-between 兜住 */
.hw-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  margin-top: auto;
  padding-top: var(--sp-2);
}
.hw-card__model {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--c-text-3);
}
.hw-card__go {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--c-primary);
}
.hw-card__go .icon { transition: transform var(--t-fast) var(--e-out); }
.hw-card:hover .hw-card__go .icon { transform: translateX(3px); }

/* 空清单兜底 */
.hw-empty {
  padding: var(--sp-7) 0;
  text-align: center;
  color: var(--c-text-2);
}

/* -------------------------------------------------- 03b 分类导航（吸顶）

   清单页顶部的分类条。吸顶是为了滚动时还能跳分类；
   用链接锚点而不是筛选参数，一次能看到全部，链接也能直接分享。
*/
.hw-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
}
.hw-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: var(--fs-sm);
  color: var(--c-text);
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-full);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.hw-nav__item:hover {
  color: var(--c-primary);
  background: var(--c-primary-soft);
  border-color: var(--c-primary);
}
.hw-nav__item:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.hw-nav__n {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

/* 清单页页头：单列、比原来紧凑。原来右侧有一列形态缩略图，
   现在商品都在下面列出了，页头不该再重复一遍。 */
.hw-hero--shop { padding: var(--sp-5) 0 var(--sp-4); }
.hw-hero--shop .hw-hero__title { max-width: 22em; }
.hw-hero--shop .hw-hero__lead { max-width: 40em; font-size: var(--fs-body); }

/* -------------------------------------------------- 04 联动步骤（深） *//* -------------------------------------------------- 04 联动步骤（深） */

.hw-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-step {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-dark-line);
}
.hw-step__no {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--c-dark-info);
}
.hw-step h3 {
  margin: var(--sp-1) 0 var(--sp-1);
  font-size: var(--fs-h4);
}
.hw-step p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-dark-text);
}

/* ------------------------------------------------------ 04 产品目录

   两层结构：分类 → 型号。分类区块之间用留白分开，不加分割线 ——
   分类标题本身就是分隔符，再画线会显得零碎。

   分类本身不包成卡片：包了会和里面的型号卡形成两层框，
   视觉上分不清哪层可点。
*/
.hw-cat + .hw-cat { margin-top: var(--sp-7); }

.hw-cat__head { max-width: 46em; margin-bottom: var(--sp-4); }
.hw-cat__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--c-ink);
}
/* 型号数量：跟在标题后的浅色小字，一眼知道这个分类下有几款 */
.hw-cat__n {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-text-3);
  letter-spacing: 0;
}
.hw-cat__desc {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--c-text-2);
  text-wrap: pretty;
}

/* 分类内的折叠区：料架的对比与选型放这里，默认收起。
   目录页首先回答"有哪些"，横比是第二步，不该占顶层版面。 */
.hw-more {
  margin-top: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg-2);
  overflow: hidden;
}

/* 用 grid 而不是 flex-wrap：窄屏时提示文字会换行，
   flex-wrap 下它会左对齐到 padding 边缘，和标题文字起点错开，
   看着像两段不相关的内容。grid 固定两列（三角 + 内容），
   标题与提示都落在第二列，换行也自动对齐。 */
.hw-more__summary {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--sp-2);
  row-gap: 4px;
  padding: var(--sp-3);
  cursor: pointer;
  list-style: none;
}
/* 收起三角自绘，避免各浏览器位置不一致 */
.hw-more__summary::-webkit-details-marker { display: none; }
.hw-more__summary::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 0;
  height: 0;
  margin-right: 2px;
  border-left: 5px solid var(--c-text-3);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform var(--t-fast) var(--e-out);
}
.hw-more[open] .hw-more__summary::before { transform: rotate(90deg); }
.hw-more__summary:hover .hw-more__title { color: var(--c-primary); }
.hw-more__summary:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: -2px;
}

.hw-more__title {
  grid-column: 2;
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--c-ink);
  transition: color var(--t-fast);
}
.hw-more__hint {
  grid-column: 2;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

.hw-more__body {
  padding: 0 var(--sp-3) var(--sp-3);
  background: var(--c-bg);
}
.hw-more__part { padding-top: var(--sp-4); }
.hw-more__part + .hw-more__part {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.hw-more__h {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--c-ink);
}
.hw-more__lead {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-2);
}

/* ---------------------------------------------- 04b 详情页：三款怎么选

   从 /hardware 顶层搬来。这里是"挑哪一款"的场景，
   所以给足横比信息，不再折叠。
*/
.hw-compare-solo__head {
  max-width: 46em;
  margin-bottom: var(--sp-4);
}
.hw-compare-solo__head h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--c-ink);
}
.hw-compare-solo__head p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--c-text-2);
}

/* 当前这一列的列头加个标记，一眼知道自己在看哪一款 */
.hw-table thead th.is-self { background: var(--c-primary-soft); }
.hw-table__self {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  color: #fff;
  background: var(--c-primary);
  border-radius: 3px;
  letter-spacing: .04em;
}

/* 选型：跟在对比表后面，用一条线隔开 */
.hw-compare-solo__picks {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}
.hw-compare-solo__sub {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h4);
  color: var(--c-ink);
}
.hw-compare-solo__lead {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--c-text-2);
}
/* 选型卡里的标题是 h4，和原来的 h3 视觉一致 */
.hw-pick__state { margin: 0 0 var(--sp-1); font-size: var(--fs-h5); font-weight: 600; color: var(--c-ink); }

/* ------------------------------------------------------ 05 参数对比 */

.hw-more .table-wrap {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
}
.hw-table { min-width: 640px; }
.hw-table thead th { background: var(--c-bg-2); }
.hw-table thead th a {
  color: var(--c-primary);
  text-decoration: none;
}
.hw-table thead th a:hover { color: var(--c-accent-ink); }
.hw-table thead th em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-weight: 400;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--c-text-3);
}
.hw-table tbody th {
  width: 128px;
  font-weight: 500;
  color: var(--c-text-3);
  white-space: nowrap;
}
.hw-table tbody td {
  color: var(--c-text);
  line-height: 1.7;
}
.hw-table tbody tr:last-child th,
.hw-table tbody tr:last-child td { border-bottom: 0; }


/* ---------------------------------------------------------- 06 选型 */

.hw-picks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-pick {
  display: flex;
  flex-direction: column;
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
}
.hw-pick__label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--c-text-3);
}
.hw-pick__state {
  margin: var(--sp-0) 0 var(--sp-1);
  font-size: var(--fs-h4);
}
.hw-pick__note {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-text-2);
}
.hw-pick__target {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-primary);
}
.hw-pick__target span {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.hw-pick__target b { font-weight: 600; }
.hw-pick__target:hover { color: var(--c-accent-ink); }

/* ================================================== 07 详情页 · 页头 */

.hw-hero--detail { padding: var(--sp-6) 0 var(--sp-5); }
.hw-hero--detail .hw-hero__grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
}

.hw-idcard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.hw-idcard__art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-3);
  background: linear-gradient(180deg, var(--c-bg-2), var(--c-bg));
}
.hw-idcard__art svg { width: 218px; height: auto; }
.hw-idcard__art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}
.hw-idcard__meta {
  padding: var(--sp-3);
  border-top: 1px solid var(--c-line);
}
.hw-idcard__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--c-accent-soft);
  font-size: var(--fs-xs);
  color: var(--c-accent-ink);
}
.hw-idcard__meta b {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-h3);
  color: var(--c-ink);
}
.hw-idcard__meta em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  color: var(--c-text-3);
}
.hw-idcard__meta p {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-sm);
  color: var(--c-text-2);
}

/* 三个事实数字：靠发丝线分隔，不做卡片 */
.hw-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
}
.hw-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--sp-3);
}
.hw-fact + .hw-fact {
  padding-left: var(--sp-4);
  border-left: 1px solid var(--c-line);
}
.hw-fact b {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.1;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.hw-fact span {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}

/* ------------------------------------------------------- 08 参数表 */

.hw-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-6);
  align-items: start;
}
.hw-spec {
  padding-top: var(--sp-2);
  border-top: 2px solid var(--c-primary);
}
.hw-spec__name {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-h4);
}
.hw-spec__list { margin: 0; }
.hw-spec__row {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
  border-bottom: 1px dashed var(--c-line);
}
.hw-spec__row dt {
  font-size: var(--fs-sm);
  color: var(--c-text-3);
}
.hw-spec__row dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-text);
}
.hw-specs__note {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}

/* ------------------------------------------------------ 09 问题对照 */

.hw-pain-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.hw-pain {
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  overflow: hidden;
}
.hw-pain__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
}
.hw-pain__no {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--c-primary);
}
.hw-pain__head h3 {
  margin: 0;
  font-size: var(--fs-h4);
}
.hw-pain__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--c-line);
}
.hw-pain__col { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.hw-pain__col--now { background: var(--c-bg-2); }
.hw-pain__col + .hw-pain__col { border-left: 1px solid var(--c-line); }
.hw-pain__tag {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  color: var(--c-text-3);
}
.hw-pain__col--after .hw-pain__tag { color: var(--c-success); }
.hw-pain__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--c-text-2);
}

/* -------------------------------------------------------- 10 适用场景 */

.hw-scene-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) var(--sp-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-scene {
  padding-left: var(--sp-3);
  border-left: 2px solid var(--c-primary);
}
.hw-scene__no {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--c-text-3);
}
.hw-scene h3 {
  margin: var(--sp-0) 0 2px;
  font-size: var(--fs-h4);
}
.hw-scene p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--c-text-2);
}

/* ------------------------------------------------------ 11 联动流程 */

.hw-link__grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: var(--sp-6);
  align-items: start;
}
.hw-link__intro .link-arrow { margin-top: var(--sp-1); }
.hw-flow {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-flow__item {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
}
.hw-flow__item:last-child { padding-bottom: 0; }
.hw-flow__item::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 0;
  width: 1px;
  background: var(--c-dark-line);
}
.hw-flow__item:last-child::before { display: none; }
.hw-flow__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-dark-line);
  border-radius: var(--r-full);
  background: var(--c-dark-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-dark-info);
}
.hw-flow__body h3 {
  margin: 3px 0 var(--sp-0);
  font-size: var(--fs-h4);
}
.hw-flow__body p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-dark-text);
}

/* ------------------------------------------------------ 12 其他形态 */

.hw-peers {
  display: grid;
  grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr);
  gap: var(--sp-6);
  align-items: center;
}
.hw-peers__intro h2 {
  margin: var(--sp-0) 0 var(--sp-1);
  font-size: var(--fs-h2);
}
.hw-peers__intro p:last-child {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--c-text-2);
}
.hw-peer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-peer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  color: inherit;
  transition: border-color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.hw-peer:hover {
  border-color: var(--c-line-2);
  box-shadow: var(--sh-1);
}
.hw-peer__fig {
  flex: 0 0 44px;
  width: 44px;
  color: var(--c-primary);
}
.hw-peer__fig svg { display: block; width: 100%; height: auto; }
.hw-peer__text { min-width: 0; }
.hw-peer__text b {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.hw-peer__text em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--c-text-3);
}
.hw-peer .icon { margin-left: auto; color: var(--c-text-3); }

/* -------------------------------------------------------- 13 响应式 */

@media (max-width: 1024px) {
  .hw-hero__grid,
  .hw-hero--detail .hw-hero__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .hw-picker { max-width: 520px; }
  .hw-cards,
  .hw-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); }
  .hw-link__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .hw-peers { grid-template-columns: 1fr; gap: var(--sp-3); }
  .hw-scene-list,
  .hw-spec-grid { gap: var(--sp-3) var(--sp-4); }
}

@media (max-width: 768px) {
  .hw-hero,
  .hw-hero--detail { padding: var(--sp-4) 0; }
  .hw-hero__title { font-size: var(--fs-h1); }
  .hw-hero__lead { font-size: var(--fs-body); }

  .hw-cards,
  .hw-picks,
  .hw-scene-list,
  .hw-spec-grid,
  .hw-peer-list { grid-template-columns: 1fr; }

  .hw-card__fig { height: 168px; }
  .hw-card__fig svg { width: 138px; }

  /* 窄屏左右两栏太窄，改成上下两段，标签留在各自段首 */
  .hw-pain__pair { grid-template-columns: 1fr; }
  .hw-pain__col + .hw-pain__col {
    border-left: 0;
    border-top: 1px solid var(--c-line);
  }

  .hw-facts {
    grid-template-columns: 1fr;
    margin-top: var(--sp-4);
    border-top: 0;
  }
  .hw-fact {
    padding: var(--sp-2) 0;
    border-top: 1px solid var(--c-line);
  }
  .hw-fact + .hw-fact {
    padding-left: 0;
    border-left: 0;
  }
  .hw-fact b { font-size: var(--fs-h3); }

  .hw-spec__row { grid-template-columns: 7.5em minmax(0, 1fr); }
  .hw-table tbody th { width: 96px; }
  .hw-steps { grid-template-columns: 1fr; }

  /* 窄屏不做横滑：表格转成「一个维度一行、三个值上下排」的列表，
     横滑看对比在手机上很难用，滚到右边就忘了左边是什么维度 */
  .hw-table,
  .hw-table thead,
  .hw-table tbody,
  .hw-table tr,
  .hw-table th,
  .hw-table td { display: block; }
  .hw-table { min-width: 0; }
  .hw-table thead { display: none; }
  .hw-table tbody tr {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--c-line);
  }
  .hw-table tbody tr:last-child { border-bottom: 0; }
  .hw-table tbody th {
    width: auto;
    padding: 0 0 var(--sp-1);
    border: 0;
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    color: var(--c-text-3);
  }
  .hw-table tbody td {
    display: flex;
    gap: var(--sp-2);
    padding: 2px 0;
    border: 0;
  }
  .hw-table tbody td::before {
    content: attr(data-hw);
    flex: 0 0 76px;
    font-size: var(--fs-xs);
    color: var(--c-text-3);
    padding-top: 3px;
  }
  .hw-more .table-wrap { border: 0; background: transparent; }
}