@charset "UTF-8";
/* ==========================================================================
   宏鼎五金 · 组件层  components.css
   --------------------------------------------------------------------------
   负责：按钮 / 产品卡 / 数据带 / 表格 / 表单 / 标签 / 分页 / 流程 / 手风琴
   依赖：base.css（令牌）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 按钮
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast) var(--ease-out-quart),
              box-shadow var(--t-base);
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:disabled { opacity: .5; pointer-events: none; }

/* 主按钮：回火橙，全站仅询价类动作用 */
.btn--primary {
  background: var(--temper);
  color: #fff;
  border-color: var(--temper);
}
.btn--primary:hover {
  background: var(--temper-hover);
  border-color: var(--temper-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(176, 74, 24, .7);
}

/* 次按钮：深色实心 */
.btn--dark {
  background: var(--c-900);
  color: #fff;
  border-color: var(--c-900);
}
.btn--dark:hover {
  background: var(--c-800);
  border-color: var(--c-800);
  transform: translateY(-1px);
}

/* 描边按钮：浅底 */
.btn--ghost {
  background: transparent;
  color: var(--ink-strong);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  border-color: var(--c-700);
  background: var(--c-0);
  box-shadow: var(--shadow-xs);
}

/* 描边按钮：深底反白 */
.btn--ghost-invert {
  background: rgba(255, 255, 255, .04);
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
}
.btn--ghost-invert:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .6);
}

.btn--lg { min-height: 52px; padding: 0 30px; font-size: var(--fs-body); }
.btn--sm { min-height: 36px; padding: 0 15px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* 文字链接箭头 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-strong);
  transition: color var(--t-fast);
}
.link-arrow svg {
  width: 15px; height: 15px;
  transition: transform var(--t-base) var(--ease-out-quart);
}
.link-arrow:hover { color: var(--temper); }
.link-arrow:hover svg { transform: translateX(4px); }
.link-arrow--invert { color: var(--on-invert-strong); }
.link-arrow--invert:hover { color: var(--temper-bright); }

/* --------------------------------------------------------------------------
   2. 产品卡
   -------------------------------------------------------------------------- */
.pcard {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  transition: border-color var(--t-base), box-shadow var(--t-base),
              transform var(--t-base) var(--ease-out-quart);
}
.pcard:hover {
  border-color: var(--c-400);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.pcard__figure {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-100);
  border-bottom: 1px solid var(--line);
}
.pcard__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease-out-quart);
}
.pcard:hover .pcard__figure img { transform: scale(1.04); }

/* 占位图：拉丝金属底 + 型号文字，客户换图后自动消失 */
.pcard__ph {
  position: absolute; inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  background: var(--metal-face);
  color: var(--c-600);
}
.pcard__ph::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--metal-brushed);
  opacity: .4;
}
.pcard__ph > * { position: relative; }
.pcard__ph svg { width: 30px; height: 30px; margin-inline: auto; opacity: .5; }
.pcard__ph span {
  font-family: var(--font-tech);
  font-size: var(--fs-2xs);
  letter-spacing: .12em;
  opacity: .8;
}

.pcard__flag {
  position: absolute; top: 0; left: 0;
  z-index: 2;
  padding: 5px 11px;
  background: var(--c-900);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: .06em;
}
.pcard__flag--temper { background: var(--temper); }

.pcard__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.pcard__code {
  font-family: var(--font-tech);
  font-size: var(--fs-2xs);
  letter-spacing: .13em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.pcard__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.4;
}
.pcard__title a:hover { color: var(--temper); }
.pcard__spec {
  display: grid;
  gap: 4px;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.pcard__spec div { display: flex; gap: 8px; }
.pcard__spec dt { flex: none; width: 4.6em; color: var(--ink-mute); }
.pcard__spec dd { margin: 0; }
.pcard__foot {
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* 分类磁贴 */
.tile {
  position: relative;
  display: block;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: border-color var(--t-base), transform var(--t-base) var(--ease-out-quart),
              box-shadow var(--t-base);
}
.tile::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--temper);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--t-base) var(--ease-out-quart);
}
.tile:hover {
  border-color: var(--c-400);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.tile:hover::before { transform: scaleY(1); }
.tile__icon { color: var(--c-500); margin-bottom: var(--sp-4); }
.tile__icon svg { width: 28px; height: 28px; }
.tile:hover .tile__icon { color: var(--temper); }
.tile__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink-strong);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tile__title svg {
  width: 14px; height: 14px;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-base), transform var(--t-base) var(--ease-out-quart);
  color: var(--temper);
}
.tile:hover .tile__title svg { opacity: 1; transform: none; }
.tile__desc {
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.62;
}
.tile__meta {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-tech);
  font-size: var(--fs-2xs);
  letter-spacing: .08em;
  color: var(--ink-mute);
}

/* --------------------------------------------------------------------------
   3. 关键数据带
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line-invert);
  border-bottom: 1px solid var(--line-invert);
}
.stats__item {
  padding: var(--sp-6) var(--sp-5);
  border-right: 1px solid var(--line-invert);
}
.stats__item:last-child { border-right: 0; }
.stats__num {
  font-family: var(--font-tech);
  font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  letter-spacing: -.01em;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.stats__unit { font-size: .42em; font-weight: 500; color: var(--on-invert-mute); letter-spacing: .04em; }
.stats__label {
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--on-invert);
}
.stats--light { border-color: var(--line); }
.stats--light .stats__item { border-right-color: var(--line); }
.stats--light .stats__num { color: var(--ink-strong); }
.stats--light .stats__label { color: var(--ink-soft); }
.stats--light .stats__unit { color: var(--ink-mute); }

@media (max-width: 860px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__item:nth-child(2n) { border-right: 0; }
  .stats__item:nth-child(-n+2) { border-bottom: 1px solid var(--line-invert); }
  .stats--light .stats__item:nth-child(-n+2) { border-bottom-color: var(--line); }
}

/* --------------------------------------------------------------------------
   4. 规格表
   -------------------------------------------------------------------------- */
.spec-table {
  width: 100%;
  font-size: var(--fs-sm);
  border: 1px solid var(--line);
  background: var(--bg-surface);
}
.spec-table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-mute);
}
.spec-table th, .spec-table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.spec-table thead th {
  background: var(--c-850);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  border-bottom: 0;
  white-space: nowrap;
}
.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table tbody tr:hover { background: var(--c-50); }
.spec-table tbody th {
  font-weight: 600;
  color: var(--ink-strong);
  width: 22%;
  white-space: nowrap;
}
.spec-table .tech { color: var(--ink); }

/* 宽表格在小屏必须自带横向滚动。
   表头和行首是 white-space: nowrap，窄屏一定比视口宽；没有这层滚动容器，
   多出来的列会被页面级 overflow 裁掉 —— 内容既看不见也够不到。 */
.table-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* 让横向滚动条常驻可见 —— 这是"右边还有几列"的唯一提示。
     默认的自动隐藏滚动条会让用户以为表格就这么窄。 */
  scrollbar-width: thin;
  scrollbar-color: var(--c-400) var(--c-100);
}
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-track { background: var(--c-100); }
.table-scroll::-webkit-scrollbar-thumb {
  background: var(--c-400);
  border-radius: 4px;
}
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--c-500); }
.table-scroll:focus-visible {
  outline: 2px solid var(--c-600);
  outline-offset: 2px;
}

/* 参数键值列表（详情页） */
.kv {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.kv > div {
  display: flex;
  gap: var(--sp-3);
  padding: 13px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  background: var(--bg-surface);
}
.kv dt { flex: none; width: 6.4em; color: var(--ink-mute); }
.kv dd { margin: 0; color: var(--ink-strong); }
@media (max-width: 720px) { .kv { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   5. 表单
   -------------------------------------------------------------------------- */
.field { display: grid; gap: 7px; }
.field__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-strong);
  letter-spacing: .02em;
}
.field__label .req { color: var(--temper); }
.field__hint { font-size: var(--fs-2xs); color: var(--ink-mute); }

.input, .select, .textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  background: var(--c-0);
  border: 1px solid var(--line-strong);
  font-size: var(--fs-sm);
  color: var(--ink-strong);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { min-height: 118px; resize: vertical; line-height: 1.65; }
.input::placeholder, .textarea::placeholder { color: var(--ink-mute); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--c-600);
  box-shadow: 0 0 0 3px rgba(91, 99, 109, .12);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: #b3261e;
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .1);
}
.field__error {
  font-size: var(--fs-2xs);
  color: #b3261e;
  min-height: 1.2em;
}
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237d858f' stroke-width='1.6'%3E%3Cpath d='M4 6.5 8 10.5l4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
  padding-right: 36px;
}

/* 复选框 */
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.6;
}
.check input {
  appearance: none;
  flex: none;
  width: 17px; height: 17px;
  margin-top: 1px;
  border: 1px solid var(--line-strong);
  background: var(--c-0);
  display: grid;
  place-content: center;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.check input::after {
  content: "";
  width: 9px; height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform var(--t-fast) var(--ease-out-quart);
  margin-top: -2px;
}
.check input:checked { background: var(--c-900); border-color: var(--c-900); }
.check input:checked::after { transform: rotate(-45deg) scale(1); }
.check a { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 2px; }

.form-status {
  padding: 12px 14px;
  border: 1px solid;
  font-size: var(--fs-sm);
  display: none;
}
.form-status.is-ok {
  display: block;
  border-color: #2f6b4f;
  background: rgba(47, 107, 79, .07);
  color: #24563f;
}
.form-status.is-err {
  display: block;
  border-color: #b3261e;
  background: rgba(179, 38, 30, .06);
  color: #8c1d17;
}

/* --------------------------------------------------------------------------
   6. 标签 / 药丸
   -------------------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  background: var(--c-50);
  font-size: var(--fs-2xs);
  color: var(--ink-soft);
  letter-spacing: .02em;
}
.tag--invert {
  border-color: var(--line-invert);
  background: rgba(255, 255, 255, .05);
  color: var(--on-invert);
}
.tag--temper {
  border-color: rgba(176, 74, 24, .3);
  background: var(--temper-wash);
  color: var(--temper);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. 筛选与分页
   -------------------------------------------------------------------------- */
.filterbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--line);
  margin-bottom: var(--sp-6);
}
.filterbar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filterbar__label {
  font-size: var(--fs-xs);
  color: var(--ink-mute);
  letter-spacing: .04em;
}
.filterbar__count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
}
.filterbar__count b { font-family: var(--font-tech); font-size: var(--fs-sm); color: var(--ink-strong); }

.chip {
  padding: 6px 13px;
  border: 1px solid var(--line-strong);
  background: var(--c-0);
  font-size: var(--fs-xs);
  color: var(--ink);
  transition: all var(--t-fast);
}
.chip:hover { border-color: var(--c-600); color: var(--ink-strong); }
.chip[aria-pressed="true"] {
  background: var(--c-900);
  border-color: var(--c-900);
  color: #fff;
  font-weight: 600;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: clamp(30px, 3.4vw, 52px);
}
.pager a, .pager span {
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding-inline: 10px;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  font-size: var(--fs-sm);
  font-family: var(--font-tech);
  color: var(--ink);
  transition: all var(--t-fast);
}
.pager a:hover { border-color: var(--c-500); color: var(--ink-strong); }
.pager [aria-current="page"] {
  background: var(--c-900);
  border-color: var(--c-900);
  color: #fff;
  font-weight: 600;
}
.pager .is-disabled { opacity: .4; pointer-events: none; }

/* --------------------------------------------------------------------------
   8. 流程步骤
   -------------------------------------------------------------------------- */
.flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.flow__step {
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-surface);
}
.flow__step:first-child { border-left: 1px solid var(--line); }
/* 序号角标移除后，标题作为第一个子元素时不留额外上边距（contact/capability 的
   flow__num 文字标签版式不受影响） */
.flow__step > .flow__title:first-child { margin-top: 0; }
.flow__num {
  font-family: var(--font-tech);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--c-400);
  line-height: 1;
  letter-spacing: .02em;
}
.flow__step:hover .flow__num { color: var(--temper); }
.flow__title {
  margin-top: var(--sp-5);
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink-strong);
}
.flow__desc {
  margin-top: 8px;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.65;
}
.flow__time {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
  font-family: var(--font-tech);
  font-size: var(--fs-2xs);
  letter-spacing: .08em;
  color: var(--temper);
}
@media (max-width: 1024px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__step:nth-child(odd) { border-left: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow__step { border-left: 1px solid var(--line); }
}

/* 四步流程：用于质检、到厂方式等四项内容 */
.flow--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .flow--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .flow--4 { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   9. 列表条目（新闻 / 资料下载）
   -------------------------------------------------------------------------- */
.entry {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.entry:first-child { border-top: 1px solid var(--line); }
.entry:hover { background: var(--c-50); }
.entry__date {
  text-align: center;
  padding-right: var(--sp-5);
  border-right: 1px solid var(--line);
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 2px;
}
.entry__day {
  font-family: var(--font-tech);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-strong);
}
.entry__ym {
  font-family: var(--font-tech);
  font-size: var(--fs-2xs);
  letter-spacing: .08em;
  color: var(--ink-mute);
}
.entry__title {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.5;
}
.entry:hover .entry__title { color: var(--temper); }
.entry__desc {
  margin-top: 7px;
  font-size: var(--fs-xs);
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 68ch;
}
.entry__meta {
  margin-top: 10px;
  display: flex;
  gap: var(--sp-4);
  font-size: var(--fs-2xs);
  color: var(--ink-mute);
  flex-wrap: wrap;
}
.entry__cta { align-self: center; }
@media (max-width: 720px) {
  .entry { grid-template-columns: 1fr; gap: var(--sp-3); }
  .entry__date {
    display: flex;
    align-items: baseline;
    gap: 8px;
    border-right: 0;
    padding-right: 0;
    text-align: left;
  }
  .entry__cta { justify-self: start; }
}

/* 资料下载行 */
.dl {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.dl:first-of-type { border-top: 1px solid var(--line); }
.dl__icon { color: var(--c-500); flex: none; }
.dl__icon svg { width: 20px; height: 20px; }
.dl__name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-strong); }
.dl__meta {
  font-family: var(--font-tech);
  font-size: var(--fs-2xs);
  color: var(--ink-mute);
  letter-spacing: .06em;
  margin-left: auto;
  flex: none;
}

/* --------------------------------------------------------------------------
   10. 徽标 / 认证
   -------------------------------------------------------------------------- */
/* 固定列数，避免 auto-fill 在宽屏下留出空白轨道 */
.certs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
/* 6 列只在宽屏成立。窄屏若仍按 6 列排，每格只剩 40px 左右，
   "ISO 9001:2015" 这类词直接顶出格子、被裁掉。按屏宽降列数。 */
@media (max-width: 1000px) {
  .certs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .certs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.certs__item {
  background: var(--bg-surface);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}
.certs__item svg { width: 30px; height: 30px; margin-inline: auto; color: var(--c-500); }
.certs__name {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-strong);
  overflow-wrap: break-word;
}
.certs__desc {
  margin-top: 5px;
  font-family: var(--font-tech);
  font-size: var(--fs-2xs);
  letter-spacing: .07em;
  color: var(--ink-mute);
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   11. 侧栏卡片
   -------------------------------------------------------------------------- */
.sidecard {
  background: var(--bg-surface);
  border: 1px solid var(--line);
}
.sidecard__head {
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-850);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
}
.sidecard__body { padding: var(--sp-5); }
.sidecard__body > * + * { margin-top: var(--sp-4); }

.contact-list { display: grid; gap: 13px; font-size: var(--fs-sm); }
.contact-list li { display: flex; gap: 11px; align-items: flex-start; }
.contact-list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--c-500); }
.contact-list dt { color: var(--ink-mute); font-size: var(--fs-xs); }
.contact-list b { color: var(--ink-strong); font-weight: 600; }

/* --------------------------------------------------------------------------
   12. 提示条
   -------------------------------------------------------------------------- */
.notice {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  background: var(--temper-wash);
  border-left: 3px solid var(--temper);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.notice svg { width: 18px; height: 18px; flex: none; color: var(--temper); margin-top: 2px; }
.notice b { color: var(--ink-strong); }