/* ==========================================================================
   hardware-accessories.css — 配件与配套页（页级样式）
   全站组件层（.cp-*）定义在 styles.css；本文件只补本页特有版式，不重定义 cp-*。
   ========================================================================== */

/* ---- 首屏：全页唯一深色区 ---- */
.page-hero{position:relative;overflow:hidden;padding:calc(var(--envbar-h) + var(--header-h) + clamp(4rem,8vh,7rem)) 0 9rem;text-align:center;background:var(--deep-grad);color:var(--hero-text)}
.page-hero .container{position:relative;z-index:2}
.page-hero .eyebrow{display:block;margin-bottom:2.4rem;font-family:var(--font-mono);font-size:1.3rem;letter-spacing:.14em;color:#8fd6dd}
.page-hero h1{max-width:1000px;margin:0 auto;font-size:clamp(42px,6vw,64px);font-weight:600;line-height:1.14;letter-spacing:-.01em;color:var(--hero-text)}
.page-hero h1 .dim{opacity:.82}
.page-hero .hero-sub{max-width:700px;margin:2.4rem auto 0;font-size:1.7rem;line-height:1.8;color:var(--text-light-2)}
.page-hero .hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;margin-top:4rem}
.page-hero .btn-primary{border-color:var(--cyan-border)}
.page-hero .btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24);color:#fff}
.page-hero .btn-ghost:hover{background:rgba(255,255,255,.14)}

/* ---- 图片与图注 ---- */
.hws-fig{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.hws-fig img{display:block;width:100%;height:auto}
.hws-fig figcaption{padding:1.2rem 1.6rem;border-top:1px solid var(--line);background:#fbfdfe;font-size:1.3rem;line-height:1.65;color:var(--ink-3)}

/* ---- 图文并排 ---- */
.hws-split{display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:3.6rem;align-items:center}
.hws-split h3{margin:0;font-size:2rem;font-weight:600;line-height:1.32;color:#0a2540}
.hws-split p{margin-top:1.2rem;font-size:1.5rem;line-height:1.8;color:#505050}
.hws-split.is-flip>.hws-fig{order:2}

/* ---- 段落内清单 ---- */
.hws-list{margin:1.6rem 0 0;padding:0;list-style:none;display:grid;gap:1rem}
.hws-list li{position:relative;padding-left:1.8rem;font-size:1.4rem;line-height:1.75;color:#505050}
.hws-list li:before{content:"";position:absolute;left:0;top:.72rem;width:.7rem;height:.7rem;border-radius:2px;background:rgba(14,147,163,.14);border:1px solid rgba(14,147,163,.5)}
.hws-list li b{color:#0a2540;font-weight:600}

/* ---- 配件条目卡 ---- */
.acc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
.acc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-card);padding:2.2rem}
.acc-card h3{margin:1.2rem 0 0;font-size:1.7rem;font-weight:600;line-height:1.35;color:#0a2540}
.acc-card p{margin-top:.8rem;font-size:1.4rem;line-height:1.75;color:#505050}
.acc-card .acc-meta{margin:1.6rem 0 0;padding-top:1.4rem;border-top:1px solid var(--line);display:grid;gap:.7rem}
.acc-card .acc-meta div{display:flex;gap:1rem;font-size:1.3rem;line-height:1.65;color:#505050}
.acc-card .acc-meta dt{flex:none;width:6.4rem;font-family:var(--font-mono);font-size:1.1rem;letter-spacing:.06em;color:var(--ink-3);padding-top:.15rem}
.acc-card .acc-meta dd{margin:0}

/* ---- 随机附带 / 单独采购 标注 ---- */
.acc-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.2rem .6rem;border-radius:4px;border:1px solid var(--line);background:#f6fafd;font-family:var(--font-mono);font-size:1.05rem;letter-spacing:.06em;color:var(--ink-3);white-space:nowrap}
.acc-badge.is-in{border-color:rgba(14,147,163,.38);background:rgba(14,147,163,.08);color:var(--cyan-ink)}
.acc-badge.is-buy{border-color:#e4d4b4;background:#fbf6ec;color:#8a6a2f}
.acc-legend{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin-top:1.8rem;font-size:1.3rem;line-height:1.7;color:var(--ink-3)}

/* ---- 表格补充（不覆盖 .cp-table 定义） ---- */
.hws-table td:first-child{white-space:nowrap}
.hws-table .hws-sub{display:block;margin-top:.5rem;font-size:1.2rem;line-height:1.6;color:var(--ink-3)}
.hws-table td b{color:#0a2540}

/* ---- 提示块 ---- */
.hws-callout{margin-top:2.4rem;padding:2rem 2.4rem;border:1px solid rgba(14,147,163,.26);border-left:.3rem solid var(--cyan);border-radius:var(--radius-tile);background:linear-gradient(180deg,rgba(14,147,163,.06),rgba(14,147,163,.02))}
.hws-callout .hws-callout-title{display:block;margin-bottom:.8rem;font-family:var(--font-mono);font-size:1.15rem;letter-spacing:.12em;color:var(--cyan-ink)}
.hws-callout p{margin:0;font-size:1.4rem;line-height:1.78;color:#3d5a6b}
.hws-callout p + p{margin-top:.8rem}
.hws-callout b{color:#0a2540;font-weight:600}

/* ---- 小字说明 ---- */
.hws-note{margin-top:2rem;font-size:1.3rem;line-height:1.7;color:var(--ink-3)}
.hws-note a{color:var(--cyan-ink);text-decoration:none;border-bottom:1px solid rgba(14,147,163,.4)}

/* ---- 按钮行 ---- */
.hws-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem;margin-top:3.2rem}

@media (max-width:900px){
  .hws-split{grid-template-columns:1fr;gap:2.4rem}
  .hws-split.is-flip>.hws-fig{order:0}
  .acc-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .acc-grid{grid-template-columns:1fr}
}