/* ==========================================================================
   知乐物 · pages.css
   各页面专属布局：首页 / 列表 / 详情 / 购物车 / 结算 / 收银台 / 结果 / 售后 / 关于
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. 首页
   -------------------------------------------------------------------------- */
.hero { padding-top: var(--sp-5); }
@media (min-width: 1024px) { .hero { padding-top: var(--sp-10); } }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 768px) {
  .hero__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 46fr 54fr; gap: var(--sp-7); }
}

.hero__media {
  order: -1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-sand-50);
  aspect-ratio: 4 / 3;
}
@media (min-width: 768px) {
  .hero__media { order: 0; aspect-ratio: 16 / 10; }
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

.hero__eyebrow {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-primary);
  margin-bottom: var(--sp-3);
}

.hero__title {
  font-size: var(--fs-h1);
  line-height: 1.28;
  font-weight: 700;
  color: var(--text-strong);
  letter-spacing: 0;
}
@media (min-width: 1024px) { .hero__title { font-size: var(--fs-h1); line-height: 1.24; } }

.hero__desc {
  margin-top: var(--sp-4);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 32em;
}
@media (min-width: 768px) { .hero__desc { font-size: var(--fs-body-lg); } }

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
@media (min-width: 480px) {
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .hero__actions .btn { flex: 1 1 auto; min-width: 0; }
}

.hero__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  line-height: 1.6;
}

/* 三卖点 */
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 768px) { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); } }

.why-item__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-sand-50);
  aspect-ratio: 16 / 9;
  margin-bottom: var(--sp-4);
}
.why-item__media img { width: 100%; height: 100%; object-fit: cover; }

.why-item__num {
  display: block;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent-strong);
  margin-bottom: var(--sp-1);
}

.why-item__title {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.44;
  margin-bottom: var(--sp-2);
}

.why-item__desc {
  font-size: var(--fs-body-sm);
  line-height: 1.75;
  color: var(--text-body);
}

/* 分类入口
   7 个分类在 3 列栅格下必然是「3+3+1」，末行孤零零一张、右侧空掉 2/3。
   让排在首位的「亲子教育咨询」通栏占满一行来消化缺口，同时把它和 6 个实物分类
   区分开（它卖的是线上咨询，不是一件可发货的玩具）。条数变化时自动失效：
   当分类数正好能被列数整除时，通栏规则不生效，不会多出空白。 */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--grid-gap);
}
@media (min-width: 768px) { .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 仅当分类数为 7（即存在余数）时才让首卡通栏，否则保持常规栅格 */
.cat-grid[data-count="7"] .cat-card:first-child { grid-column: 1 / -1; }

/* 通栏卡改为横向：左边图、右边文字，避免 900×900 方图在整行宽度下变成巨幅色块 */
@media (min-width: 768px) {
  .cat-grid[data-count="7"] .cat-card:first-child {
    flex-direction: row;
    align-items: stretch;
  }
  .cat-grid[data-count="7"] .cat-card:first-child .media {
    flex: 0 0 38%;
    aspect-ratio: auto;
    min-height: 240px;
  }
  .cat-grid[data-count="7"] .cat-card:first-child .cat-card__body {
    flex: 1 1 auto;
    justify-content: center;
    padding: var(--sp-5) var(--sp-6);
  }
  .cat-grid[data-count="7"] .cat-card:first-child .cat-card__name {
    font-size: var(--fs-h3);
  }
  .cat-grid[data-count="7"] .cat-card:first-child .cat-card__desc {
    -webkit-line-clamp: 3;
    font-size: var(--fs-body-sm);
    max-width: 46em;
  }
}

.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.cat-card:hover { color: inherit; }

@media (hover: hover) {
  .cat-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
  .cat-card:hover .media img { transform: scale(1.03); }
}

.cat-card__body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media (min-width: 1024px) { .cat-card__body { padding: var(--sp-4); } }

.cat-card__name {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.45;
}
@media (min-width: 1024px) { .cat-card__name { font-size: var(--fs-h4); } }

.cat-card__desc {
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1024px) { .cat-card__desc { font-size: var(--fs-caption); } }

.cat-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
  font-size: var(--fs-micro);
  font-weight: 600;
  color: var(--color-primary);
}

/* 服务保障 */
.promise-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 768px) {
  .promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .promise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.promise-item {
  padding: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}
.promise-item:first-child { border-top: 0; }

@media (min-width: 768px) {
  .promise-item { border-top: 1px solid var(--border-subtle); }
  .promise-item:nth-child(1),
  .promise-item:nth-child(2) { border-top: 0; }
  .promise-item:nth-child(odd) { border-right: 1px solid var(--border-subtle); }
}
@media (min-width: 1024px) {
  .promise-item { border-right: 1px solid var(--border-subtle); }
  .promise-item:nth-child(3n) { border-right: 0; }
  .promise-item:nth-child(1),
  .promise-item:nth-child(2),
  .promise-item:nth-child(3) { border-top: 0; }
  .promise-item:nth-child(2) { border-right: 1px solid var(--border-subtle); }
}

.promise-item__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.promise-item__head svg { color: var(--color-primary); flex-shrink: 0; }
.promise-item__title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.45;
}
.promise-item__desc {
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--text-muted);
}

/* 咨询引导 */
.consult {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
}
@media (min-width: 1024px) {
  .consult { grid-template-columns: 40fr 60fr; align-items: center; gap: var(--sp-7); padding: var(--sp-8); }
}

.consult__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.36;
}
.consult__desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-body-sm);
  line-height: 1.75;
  color: var(--text-body);
}
.consult__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (min-width: 480px) { .consult__actions { flex-direction: row; flex-wrap: wrap; } }

/* --------------------------------------------------------------------------
   B. 商品列表
   -------------------------------------------------------------------------- */
.list-head { padding-block: var(--sp-2) var(--sp-5); }
.list-head h1 { margin-bottom: var(--sp-2); }
.list-head__desc {
  font-size: var(--fs-body-sm);
  line-height: 1.72;
  color: var(--text-muted);
  max-width: 40em;
}

.list-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 1024px) {
  .list-layout { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: var(--sidebar-gap); }
}

.list-sidebar { display: none; }
@media (min-width: 1024px) {
  .list-sidebar {
    display: block;
    position: sticky;
    top: calc(var(--h-header) + var(--sp-4));
    align-self: start;
    /* 8 个分类 + 5 个价格区间共 13 个筛选项，在高屏笔记本（1366×768 / 1024×768）
       上侧栏高度会顶出视口，底部的「清除全部筛选」按钮被裁掉。给出可视区上限并允许滚动。 */
    max-height: calc(100vh - var(--h-header) - var(--sp-4) - var(--sp-4));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

.filter-group { margin-bottom: var(--sp-6); }
.filter-group:last-child { margin-bottom: 0; }

.filter-group__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-strong);
}
.filter-group__title::before {
  content: "";
  width: 3px;
  height: 14px;
  background: var(--color-primary);
  border-radius: 1px;
}

.filter-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--sp-2);
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.filter-option:hover { background: var(--bg-subtle); }
.filter-option[aria-pressed="true"] {
  color: var(--color-primary);
  font-weight: 600;
}
.filter-option__count {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.list-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
@media (min-width: 768px) {
  .list-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
}

.list-toolbar__search { width: 100%; max-width: 320px; }

.list-empty { padding-block: var(--sp-10); }

/* --------------------------------------------------------------------------
   C. 商品详情
   -------------------------------------------------------------------------- */
.pdp {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .pdp { grid-template-columns: 52fr 48fr; gap: var(--sp-7); }
}

.pdp__gallery { position: static; }
@media (min-width: 1024px) {
  .pdp__gallery { position: sticky; top: calc(var(--h-header) + var(--sp-4)); }
}

.pdp__title {
  margin-bottom: var(--sp-2);
  color: var(--text-strong);
  letter-spacing: 0;
}

.pdp__subtitle {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-muted);
}

.pdp__pricebox {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
}

.pdp__pricebox .price-row { gap: var(--sp-3); }

.pdp__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}
.pdp__meta span { display: inline-flex; align-items: center; gap: var(--sp-1); }

.pdp__free-note {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-accent-light);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--color-ink-700);
}
.pdp__free-note strong { display: block; color: var(--color-accent-strong); margin-bottom: var(--sp-1); font-size: var(--fs-body-sm); }

.pdp__rows {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
}

.pdp__row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-body-sm);
  line-height: 1.7;
}
.pdp__row-label {
  flex-shrink: 0;
  width: 44px;
  color: var(--text-muted);
  font-size: var(--fs-caption);
  padding-top: 2px;
}

.pdp__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.pdp__actions .btn { flex: 1; min-width: 0; }

.pdp__service {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}

.pdp__section { padding-top: var(--sp-7); }

.pdp__detail {
  max-width: 760px;
  margin-inline: auto;
}

.highlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
@media (min-width: 768px) { .highlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-6); } }

.highlight-item {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-body);
}
.highlight-item__num {
  flex-shrink: 0;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-body-sm);
  font-weight: 700;
  color: var(--color-accent-strong);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.detail-figure { margin-block: var(--sp-5); }
.detail-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--color-sand-50);
}
.detail-figure figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.kv-list { display: grid; gap: var(--sp-3); }
.kv-list__row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--sp-3);
  font-size: var(--fs-body-sm);
  line-height: 1.72;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.kv-list__row:last-child { border-bottom: 0; padding-bottom: 0; }
.kv-list__key { color: var(--text-muted); }
.kv-list__val { color: var(--text-body); }

.related { padding-top: var(--sp-7); }

/* 错误页（详情 id 不存在） */
.error-state { padding-block: var(--sp-10); text-align: center; }
.error-state__art { width: 120px; height: 120px; margin: 0 auto; color: var(--color-ink-400); }
.error-state__title { margin-top: var(--sp-6); font-size: var(--fs-h2); font-weight: 700; color: var(--text-strong); }
.error-state__desc { max-width: 380px; margin: var(--sp-3) auto 0; font-size: var(--fs-body-sm); line-height: 1.72; color: var(--text-muted); }
.error-state__actions { display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; margin-top: var(--sp-6); }
.error-state__actions .btn { width: 100%; max-width: 280px; }
@media (min-width: 480px) { .error-state__actions { flex-direction: row; justify-content: center; } .error-state__actions .btn { width: auto; } }

/* --------------------------------------------------------------------------
   D. 购物车
   -------------------------------------------------------------------------- */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 1024px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 368px; gap: var(--sp-7); }
}

.cart-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 44px;
  padding-block: var(--sp-1);
  border-bottom: 1px solid var(--border-subtle);
}
.cart-toolbar__selected {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
/* 触屏下批量操作按钮抬到 44px 热区 */
@media (max-width: 767px) {
  .cart-toolbar .btn { height: 44px; }
}

/* 购物车行：移动 3 列 / 桌面 6 列，单一套控件 */
.cart-item {
  display: grid;
  grid-template-columns: 20px 72px minmax(0, 1fr);
  grid-template-areas:
    "check media info"
    "check media qty";
  column-gap: var(--sp-3);
  row-gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
  align-items: start;
}

.cart-item:last-child { border-bottom: 0; }

@media (min-width: 768px) {
  .cart-item {
    grid-template-columns: 20px 88px minmax(0, 1fr) 104px 132px 44px;
    grid-template-areas: "check media info unit qty sub del";
    align-items: center;
    column-gap: var(--sp-4);
    row-gap: 0;
  }
}

.ci-check { grid-area: check; padding-top: 2px; }
.ci-media {
  grid-area: media;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-sand-50);
  border: 1px solid var(--border-default);
}
@media (min-width: 768px) { .ci-media { width: 88px; height: 88px; } }
.ci-media img { width: 100%; height: 100%; object-fit: cover; }

.ci-info { grid-area: info; min-width: 0; }

.ci-name {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-strong);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ci-name:hover { color: var(--color-primary); }

.ci-spec {
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  line-height: 1.5;
}

.ci-mobile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
}
@media (min-width: 768px) { .ci-mobile-meta { display: none; } }

.ci-unit { font-family: var(--font-num); font-variant-numeric: tabular-nums; color: var(--text-body); font-weight: 600; }
.ci-sub { color: var(--color-price); font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; }
.ci-del-m {
  display: inline-flex;
  margin-left: auto;
  margin-right: calc(var(--sp-2) * -1);
  min-height: 44px;
  min-width: 44px;
  padding-inline: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ci-del-m:hover { color: var(--color-danger); }

.ci-unit-d { grid-area: unit; display: none; }
@media (min-width: 768px) { .ci-unit-d { display: block; } }
.ci-unit-price {
  display: block;
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--text-body);
}

.ci-qty { grid-area: qty; justify-self: start; }
@media (min-width: 768px) { .ci-qty { justify-self: center; } }

.ci-sub-d { grid-area: sub; display: none; text-align: right; }
@media (min-width: 768px) { .ci-sub-d { display: block; } }
.ci-sub-price {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-strong);
}

.ci-del { grid-area: del; display: none; }
@media (min-width: 768px) { .ci-del { display: inline-flex; } }

.ci-del,
.ci-del-m {
  align-items: center;
  justify-content: center;
}
.ci-del {
  width: 44px;
  height: 44px;
  color: var(--text-muted);
  border-radius: var(--radius-md);
}
.ci-del:hover { color: var(--color-danger); background: var(--color-danger-bg); }

/* 购物车勾选：视觉仍 20×20，label 撑到 44×44 热区后用负边距抵消布局位移 */
.ci-check { margin-left: -12px; }
.check--bare {
  position: relative;
  width: 44px;
  height: 44px;
  margin-block: -12px;
  min-height: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
}

/* 桌面端表头 */
.cart-head { display: none; }
@media (min-width: 768px) {
  .cart-head {
    display: grid;
    grid-template-columns: 20px 88px minmax(0, 1fr) 104px 132px 44px;
    column-gap: var(--sp-4);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--border-strong);
    font-size: var(--fs-micro);
    font-weight: 600;
    color: var(--text-muted);
  }
  .cart-head > span:nth-child(4),
  .cart-head > span:nth-child(5) { text-align: right; }
  .cart-head > span:nth-child(5) { text-align: center; }
}

.shipping-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5);
  background: var(--color-accent-light);
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--color-ink-700);
}
.shipping-hint svg { margin-top: 2px; color: var(--color-accent-strong); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   E. 结算
   -------------------------------------------------------------------------- */
.checkout-form .field:last-of-type { margin-bottom: 0; }

.checkout-section { margin-bottom: var(--sp-6); }
.checkout-section:last-child { margin-bottom: 0; }

.checkout-card {
  padding: var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
@media (min-width: 1024px) { .checkout-card { padding: var(--sp-6); } }

.checkout-card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--text-strong);
}

.privacy-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--text-muted);
}
.privacy-note svg { margin-top: 2px; flex-shrink: 0; }

.delivery-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-primary);
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
}
.delivery-option__main { flex: 1; min-width: 0; }
.delivery-option__title { font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }
.delivery-option__desc { font-size: var(--fs-micro); color: var(--text-muted); margin-top: 2px; }
.delivery-option__price { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-body-sm); font-weight: 600; color: var(--text-strong); }

.invoice-block {
  font-size: var(--fs-body-sm);
  line-height: 1.75;
  color: var(--text-body);
}
.invoice-block p { margin-bottom: var(--sp-3); }
.invoice-block p:last-child { margin-bottom: 0; }

.mini-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.mini-item:last-child { border-bottom: 0; }
.mini-item__media {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-sand-50);
  border: 1px solid var(--border-default);
}
.mini-item__media img { width: 100%; height: 100%; object-fit: cover; }
.mini-item__info { flex: 1; min-width: 0; }
.mini-item__name {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-strong);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-item__spec { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
.mini-item__price {
  flex-shrink: 0;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text-strong);
}
.mini-item__qty { font-size: var(--fs-micro); color: var(--text-muted); font-weight: 400; }

/* --------------------------------------------------------------------------
   F. 收银台
   -------------------------------------------------------------------------- */
.pay-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--sp-6) var(--sp-9);
}
@media (min-width: 1024px) { .pay-wrap { padding-block: var(--sp-8) var(--sp-10); } }

.pay-card {
  width: 100%;
  max-width: 640px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--sp-5) var(--sp-4);
}
@media (min-width: 1024px) { .pay-card { padding: var(--sp-8); box-shadow: var(--shadow-3); } }

.pay-card__merchant {
  text-align: center;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.5;
}
.pay-card__product {
  text-align: center;
  margin-top: var(--sp-1);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.pay-card__amount { text-align: center; margin-top: var(--sp-5); }
.pay-card__amount-label {
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.pay-card__countdown {
  text-align: center;
  margin-top: var(--sp-5);
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
}
.pay-card__countdown .num {
  font-weight: 600;
  color: var(--color-price);
  font-size: var(--fs-body);
}
.pay-card__countdown.is-expired .num { color: var(--color-danger); }

.pay-divider {
  margin-block: var(--sp-6);
  border-top: 1px solid var(--border-subtle);
}

.pay-method { display: grid; gap: var(--sp-2); }

.pay-method__row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: 64px;
}
.pay-method__row:hover { border-color: var(--border-strong); }
.pay-method__row:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
  background: var(--color-primary-light);
}
.pay-method__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pay-method__info { flex: 1; min-width: 0; }
.pay-method__name { font-size: var(--fs-body); font-weight: 600; color: var(--text-strong); line-height: 1.4; }
.pay-method__desc { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.5; }

.pay-info { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); }
.pay-info__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
.pay-info__key { color: var(--text-muted); flex-shrink: 0; }
.pay-info__val {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  text-align: right;
  word-break: break-all;
}
.pay-info__val--name { font-family: var(--font-sans); }

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  margin: -10px -10px -10px 0;
  color: var(--text-muted);
  border-radius: var(--radius-md);
}
.copy-btn:hover { color: var(--color-primary); background: var(--bg-subtle); }

.pay-actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }

.pay-safety { margin-top: var(--sp-5); }

.pay-back { margin-top: var(--sp-5); text-align: center; }

/* 支付中遮罩层 */
.pay-processing {
  position: fixed;
  inset: 0;
  z-index: 940;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background: rgba(22, 19, 15, 0.48);
  color: var(--color-white);
}

.pay-processing__ring {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: zl-spin 800ms linear infinite;
}
.pay-processing__text { font-size: var(--fs-body-sm); font-weight: 500; }

/* --------------------------------------------------------------------------
   G. 支付结果
   -------------------------------------------------------------------------- */
.result-wrap {
  max-width: 720px;
  margin-inline: auto;
  padding-block: var(--sp-6) var(--sp-9);
}

.result-head { text-align: center; padding-block: var(--sp-5); }

.result-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
@media (min-width: 1024px) { .result-icon { width: 76px; height: 76px; } }

.result-icon--success { color: var(--color-success); background: var(--color-success-bg); }
.result-icon--fail { color: var(--color-danger); background: var(--color-danger-bg); }
.result-icon--pending { color: var(--color-warning); background: var(--color-warning-bg); }

.result-title { font-size: var(--fs-h1); font-weight: 700; color: var(--text-strong); line-height: 1.3; }
.result-desc {
  max-width: 34em;
  margin: var(--sp-3) auto 0;
  font-size: var(--fs-body-sm);
  line-height: 1.75;
  color: var(--text-muted);
}

.result-card {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
@media (min-width: 1024px) { .result-card { padding: var(--sp-6); } }

.result-amount {
  text-align: center;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
}
.result-amount__label { font-size: var(--fs-micro); color: var(--text-muted); margin-top: var(--sp-1); }

.result-rows { display: grid; gap: var(--sp-3); padding-top: var(--sp-4); }
.result-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
}
.result-row__key { color: var(--text-muted); flex-shrink: 0; }
.result-row__val {
  text-align: right;
  color: var(--text-strong);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
  min-width: 0;
}
.result-row__val--text { font-family: var(--font-sans); }

.result-items { margin-top: var(--sp-6); }

.result-actions {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
@media (min-width: 480px) {
  .result-actions--row { grid-template-columns: 1fr 1fr; }
}

.result-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5);
  font-size: var(--fs-body-sm);
}

.result-help {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
  line-height: 1.7;
  color: var(--text-muted);
}
.result-help a { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   H. 售后服务
   -------------------------------------------------------------------------- */
.doc-head { padding-block: var(--sp-3) var(--sp-5); }
.doc-head h1 { margin-bottom: var(--sp-3); }
.doc-head__desc {
  max-width: 38em;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--text-body);
}
@media (min-width: 1024px) { .doc-head__desc { font-size: var(--fs-body-lg); } }
.doc-head__date {
  margin-top: var(--sp-3);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  font-family: var(--font-num);
}

.promise4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--sp-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 768px) { .promise4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.promise4__item {
  padding: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}
.promise4__item:nth-child(1),
.promise4__item:nth-child(2) { border-top: 0; }
.promise4__item:nth-child(odd) { border-right: 1px solid var(--border-subtle); }

@media (min-width: 768px) {
  .promise4__item { border-top: 0; border-right: 1px solid var(--border-subtle); }
  .promise4__item:nth-child(odd) { border-right: 1px solid var(--border-subtle); }
  .promise4__item:nth-child(4n) { border-right: 0; }
  .promise4__item:nth-child(1),
  .promise4__item:nth-child(2) { border-top: 0; }
}

.promise4__num {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}
.promise4__num small { font-size: var(--fs-body-sm); font-weight: 600; }
.promise4__label {
  margin-top: var(--sp-1);
  font-size: var(--fs-caption);
  color: var(--text-body);
  line-height: 1.6;
}

.doc-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (min-width: 1024px) {
  .doc-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-8); }
}

.doc-toc { display: none; }
@media (min-width: 1024px) {
  .doc-toc {
    display: block;
    position: sticky;
    top: calc(var(--h-header) + var(--sp-4));
  }
}

.doc-toc__title {
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}

.doc-toc__list { display: grid; gap: 2px; }

.doc-toc__link {
  display: block;
  padding: 6px var(--sp-2);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--text-body);
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.doc-toc__link:hover { background: var(--bg-subtle); color: var(--color-primary); }
.doc-toc__link.is-active {
  color: var(--color-primary);
  font-weight: 600;
  border-left-color: var(--color-primary);
  background: var(--color-primary-light);
}

.doc-body { max-width: 760px; }
.doc-body .doc-section { padding-block: var(--sp-6); border-top: 1px solid var(--border-subtle); }
.doc-body .doc-section:first-child { padding-top: 0; border-top: 0; }

.doc-section h2 {
  font-size: var(--fs-h3);
  line-height: 1.4;
  margin-bottom: var(--sp-3);
}
@media (min-width: 1024px) { .doc-section h2 { font-size: var(--fs-h2); } }

.doc-section h3 {
  font-size: var(--fs-h4);
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}

.doc-section > p {
  font-size: var(--fs-body-sm);
  line-height: 1.78;
  color: var(--text-body);
  max-width: 38em;
}
@media (min-width: 1024px) { .doc-section > p { font-size: var(--fs-body); } }

.doc-section > p.lead {
  font-size: var(--fs-body);
  color: var(--text-body);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  max-width: none;
}

.doc-section .table-wrap { margin-block: var(--sp-4); }

.doc-section .notice { margin-block: var(--sp-4); }

/* 售后 FAQ */
.faq { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   I. 关于我们
   -------------------------------------------------------------------------- */
.about-hero { padding-block: var(--sp-3) var(--sp-5); }
.about-hero h1 { margin-bottom: var(--sp-3); }
.about-hero__slogan {
  font-size: var(--fs-body-lg);
  font-weight: 500;
  line-height: 1.7;
  color: var(--color-primary);
  margin-bottom: var(--sp-3);
}

.about-intro {
  max-width: 40em;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--text-body);
}
.about-intro p { margin-bottom: var(--sp-4); }
.about-intro p:last-child { margin-bottom: 0; }

.about-section { padding-block: var(--sp-6); border-top: 1px solid var(--border-subtle); }
.about-section:first-of-type { border-top: 0; }
.about-section h2 { margin-bottom: var(--sp-3); }

.about-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-sand-50);
  border: 1px solid var(--border-default);
  aspect-ratio: 3 / 2;
  margin-top: var(--sp-4);
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.contact-item {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}
.contact-item svg { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; }
.contact-item__key { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.5; }
.contact-item__val {
  margin-top: 2px;
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-strong);
  line-height: 1.5;
  word-break: break-all;
}
.contact-item__val--num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.contact-item a.contact-item__val { text-decoration: underline; text-underline-offset: 3px; color: var(--color-primary); }

.biz-block {
  padding: var(--sp-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  font-size: var(--fs-body-sm);
  line-height: 1.8;
  color: var(--text-body);
}
.biz-block + .biz-block { margin-top: var(--sp-3); }
.biz-block__title {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: var(--sp-1);
}

/* --------------------------------------------------------------------------
   J. 通用页面头
   -------------------------------------------------------------------------- */
.page-head { padding-block: var(--sp-2) var(--sp-5); }
.page-head h1 { margin-bottom: var(--sp-2); }
.page-head__desc {
  font-size: var(--fs-body-sm);
  line-height: 1.72;
  color: var(--text-muted);
  max-width: 40em;
}

/* --------------------------------------------------------------------------
   K. 优惠信息条
   -------------------------------------------------------------------------- */
.info-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  font-size: var(--fs-caption);
  color: var(--text-body);
  line-height: 1.6;
}
.info-strip span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.info-strip svg { color: var(--color-primary); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   L. 补充：列表页紧凑筛选 / 通用工具
   -------------------------------------------------------------------------- */
.list-toolbar__sort { flex-shrink: 0; }

/* 移动 / 平板专用（≥1024 由侧栏接管） */
.only-compact { display: block; }
@media (min-width: 1024px) { .only-compact { display: none; } }

.select--sm {
  height: 40px;
  padding-inline: var(--sp-3);
  font-size: var(--fs-body-sm);
  background-position: right var(--sp-2) center;
}

/* 移动端分类 Tab 吸顶条 */
.tabs-bar { border-bottom: 1px solid var(--border-subtle); }
.tabs-bar .tabs { border-bottom: 0; }
@media (min-width: 1024px) {
  .tabs-bar { position: static; border-bottom: 0; }
}

/* 详情页加入成功态 */
.btn.is-added {
  color: var(--color-success);
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

/* 滚动锁定（弹层 / 抽屉 / 大图） */
body.no-scroll { overflow: hidden; }

/* 详情页推荐区 */
.related .product-grid { margin-top: var(--sp-5); }

/* 结算页右栏在移动端跟随（不做固定） */
.checkout-aside-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-micro);
  line-height: 1.7;
  color: var(--text-muted);
}

/* 售后 / 关于：页内小标题间距 */
.doc-section h3 + p { margin-top: 0; }
.doc-section .kv-list { margin-block: var(--sp-3); }

/* --------------------------------------------------------------------------
   I. 我的订单
   -------------------------------------------------------------------------- */
.orders-toolbar {
  position: sticky;
  top: var(--h-header);
  z-index: 50;
  margin-bottom: var(--sp-5);
  padding-block: var(--sp-2);
  background: var(--bg-page);
}

.orders-tabs {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* 右侧渐隐，提示还能横向滑 */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  padding-right: var(--sp-4);
}
.orders-tabs::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
  .orders-tabs {
    -webkit-mask-image: none;
    mask-image: none;
    padding-right: 0;
  }
}

.orders-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.orders-tab:hover { border-color: var(--border-strong); }
.orders-tab.is-active {
  color: var(--color-white);
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.orders-tab__num {
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--bg-inset);
  color: var(--text-muted);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro);
  line-height: 1;
}
.orders-tab.is-active .orders-tab__num {
  background: rgba(255, 255, 255, 0.22);
  color: var(--color-white);
}

/* ---- 订单卡片 ---- */
.orders-list { display: grid; gap: var(--sp-4); }

.order-card {
  padding: var(--sp-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) {
  .order-card { padding: var(--sp-5); }
}

.order-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.order-card__meta {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-4);
  flex-wrap: wrap;
  min-width: 0;
}

.order-card__no {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
  color: var(--text-body);
  word-break: break-all;
}

.order-card__time {
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

.order-card__status-desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-caption);
  color: var(--text-muted);
  line-height: 1.6;
}

.order-addr {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  line-height: 1.6;
}
.order-addr svg { flex: 0 0 auto; margin-top: 2px; }

.order-card__items {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}

.order-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: inherit;
  text-decoration: none;
}

.order-item__media {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-inset);
}
.order-item__media img { width: 100%; height: 100%; object-fit: cover; }

.order-item__info { flex: 1; min-width: 0; }

.order-item__name {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--text-strong);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.order-item__spec {
  margin-top: 2px;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.order-item__price {
  flex: 0 0 auto;
  text-align: right;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-body-sm);
  color: var(--text-body);
  white-space: nowrap;
}

.order-item__qty {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

.order-more {
  font-size: var(--fs-micro);
  color: var(--text-muted);
}
.order-more a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- 卡片底部：金额 + 操作 ---- */
.order-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}

.order-card__amount {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  min-width: 0;
}

.order-card__amount-label {
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.order-card__amount-note {
  font-size: var(--fs-micro);
  color: var(--text-faint);
}

.order-card__actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* 移动端：操作按钮撑满一行，保证 44px 热区 */
@media (max-width: 767px) {
  .order-card__foot { flex-direction: column; align-items: stretch; }
  .order-card__actions { width: 100%; }
  .order-card__actions .btn { flex: 1 1 0; min-height: 44px; }
}

.orders-filter-empty {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-body-sm);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.orders-filter-empty .text-link {
  display: inline-block;
  margin-top: var(--sp-3);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

/* ---- 底部说明 ---- */
.orders-note {
  margin-top: var(--sp-7);
  padding: var(--sp-4);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
}
.orders-note__title {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--text-strong);
}
.orders-note__list {
  margin-top: var(--sp-2);
  display: grid;
  gap: var(--sp-2);
  padding-left: 1.1em;
  list-style: disc;
  font-size: var(--fs-caption);
  line-height: 1.75;
  color: var(--text-muted);
}
.orders-note__list a {
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}