/* ==========================================================================
   购物车 / 结算 / 订单结果（2026-10-12 新增在线支付）
   ========================================================================== */

/* ---------- 购物车表格 ---------- */
.cart-layout {
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 900px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

.cart-list { display: grid; gap: 12px; }

.cart-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cart-row__media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: .75rem;
}
.cart-row__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-row__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
/* ★ 第 97 轮：样品徽标。
   ⚠️ `.cart-row__body` 是 flex column，子项默认 `align-items: stretch` ——
      不加这一条，`<span class="pill">` 会被拉成**整行长条**（实测 660px 宽），
      看起来像一条橙色横幅而不是徽标。`align-self: flex-start` 让它按内容收窄。 */
.cart-row__body > .pill { align-self: flex-start; }
.cart-row__model { font-size: .75rem; color: var(--ink-3); font-weight: 600; }
.cart-row__title {
  font-size: .9375rem; font-weight: 400; color: var(--ink);
  line-height: 1.45;
}
.cart-row__title:hover { color: var(--primary); }
.cart-row__unit { font-size: .8125rem; color: var(--ink-3); }

/* ---------- 起订量下限提示（2026-10-12 第 29 轮修 bug）----------
   只在「后台把 MOQ 调高，客户车里的老行突然不合规」时出现 ——
   正常路径（加购 / 改数量 / 结算）三处都拦住了，进不来。
   提前告诉客户比让他提交后才被弹回来好。 */
.cart-warn {
  margin-block: 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--err-bg);
  border-inline-start: 3px solid var(--err);
  color: var(--err);
  font-size: .875rem;
  line-height: 1.5;
}
.cart-row__warn {
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--err-bg);
  color: var(--err);
  font-size: .75rem;
  font-weight: 600;
}
.cart-row__foot {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px; margin-block-start: auto; padding-block-start: 6px;
}
.cart-row__line { font-size: 1rem; font-weight: 700; color: var(--ink); }
.cart-row__remove {
  margin-inline-start: auto;
  background: none; border: 0; padding: 4px;
  color: var(--ink-3); font-size: .8125rem; cursor: pointer;
}
.cart-row__remove:hover { color: var(--err); text-decoration: underline; }

/* ---------- 阶梯价上下文（2026-10-12 第 20 轮新增）----------
   一行里的「当前档 + 下一档还差多少 + 一键跳档」。
   购物车是客户最愿意凑单的地方，把这层信息摆出来，转化直接受益。
   无 JS 时「跳到下一档」按钮不生效，但数量仍可手输提交，功能不丢。 */
.cart-tier {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-block-start: 2px; padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  border-inline-start: 3px solid var(--primary);
  font-size: .75rem; line-height: 1.5;
}
.cart-tier__now { color: var(--ink-2); font-weight: 600; }
.cart-tier__top { color: var(--ink-3); }
.cart-tier__next { color: var(--ink-2); }
.cart-tier__save {
  padding: 1px 7px; border-radius: 4px;
  background: var(--primary-soft); color: var(--primary);
  font-weight: 700; white-space: nowrap;
}
.cart-tier__jump {
  margin-inline-start: auto;
  padding: 3px 10px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  background: var(--bg); color: var(--primary);
  font-size: .75rem; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: background .15s, color .15s;
}
.cart-tier__jump:hover { background: var(--primary); color: #fff; }

/* 数量步进器（购物车行内） */
.qty-stepper {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--bg);
}
.qty-stepper button {
  width: 36px; min-height: 36px; border: 0; background: transparent;
  color: var(--ink-2); font-size: 1rem; cursor: pointer;
}
.qty-stepper button:hover { background: var(--bg-soft); color: var(--primary); }
/* 禁用态（数量已到起订量）—— 必须**看得出来**，
   否则客户点了「−」没反应会以为按钮坏了（2026-10-12 第 29 轮起订量守卫）。
   ⚠️ 用 `:disabled` 而不是 `.is-disabled` 类：JS 直接设的 `el.disabled`，
      不需要再维护一个类名，少一个不同步的地方。 */
.qty-stepper button:disabled,
.qty-stepper button:disabled:hover {
  color: var(--line);
  background: transparent;
  cursor: not-allowed;
}
.qty-stepper input {
  width: 56px; min-height: 36px; border: 0; text-align: center;
  font-size: .875rem; font-weight: 600; color: var(--ink);
  background: transparent; outline: none;
  border-inline: 1px solid var(--line);
}

/* 行内备注 */
.cart-row__note {
  width: 100%; margin-block-start: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .8125rem; font-family: inherit; color: var(--ink);
  resize: vertical; min-height: 38px;
}

/* ---------- 订单摘要侧栏 ---------- */
.summary {
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.summary__title { font-size: 1rem; margin-block-end: 14px; }
.summary__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding-block: 7px; font-size: .875rem; color: var(--ink-2);
}
.summary__row--total {
  margin-block-start: 8px; padding-block-start: 14px;
  border-block-start: 1px solid var(--line);
  font-size: 1.0625rem; font-weight: 700; color: var(--ink);
}
.summary__note {
  margin: 12px 0 0; padding: 10px 12px;
  background: var(--bg-soft); border-radius: var(--radius-sm);
  color: var(--ink-3); font-size: .75rem; line-height: 1.6;
}
/* ★ 第 97 轮：含样品时那句"运费另计"。不能跟普通小字同色 ——
   它解释的是"为什么总价不是到手价"，客户漏看就会在收到 PI 时觉得被加价。 */
.summary__note--sample {
  background: var(--primary-soft); color: var(--ink-2);
  font-weight: 600;
}
.summary__actions { margin-block-start: 16px; display: grid; gap: 10px; }

/* 摘要卡里的单字段（第 96 轮：备注挪到「提交订单」正上方）
   窄列里 textarea 不需要很高：两行足够，再高就把按钮推下去了。 */
.summary__field { margin-block-start: 14px; }
.summary__field .form__label { margin-block-end: 6px; font-size: .8125rem; }
.summary__field .form__textarea { min-block-size: 58px; font-size: .875rem; }

/* ---------- 结算页 ---------- */
.checkout-layout {
  display: grid;
  gap: 28px;
  align-items: start;
}
@media (min-width: 900px) {
  .checkout-layout { grid-template-columns: minmax(0, 1fr) 340px; }
}

/* ---------- 右侧订单摘要：跟着滚动「停靠」（购物车 + 结算页共用） ----------
   2026-10-12 第 21 轮先做在结算页；第 25 轮业主指出购物车页也该如此
   （「右侧的订单摘要菜单，其实应该随着 scrollbar 下来可以悬浮固定位置」），
   于是把选择器并列，两个页面一份规则，避免日后改一处漏一处。

   原来摘要是普通 grid 子项，随页面一起滚走。左边一长（购物车条目多 /
   结算页 4 个表单块），客户想确认"我买的啥、多少钱"时必须往回翻 —— 很烦。

   做法：`position: sticky`，两个约束都要给，缺一个就会出问题：
     ① `top` = 头部高度 + 间距 —— 否则会滑到 sticky 头部**底下**被盖住。
        头部本身是 `position: sticky; top: 0`（见 03-components.css），
        所以摘要必须让开这 60px。
     ② `max-height` + `overflow-y: auto` —— 摘要内容可能比视口还高
        （购物车条目多时尤其明显）。只给 top 不给 max-height 的话，
        超长摘要会有一部分永远卡在视口外，怎么滚都看不到底部按钮。
        给它自己一条内滚轴，是唯一稳妥的解。

   窄屏（<900px）不启用：单列时摘要排在表单下方，本来就在结尾，
   sticky 反而会挡住表单或变成横条。 */

@media (min-width: 900px) {
  .cart-layout > .summary,
  .checkout-layout > .summary {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    max-height: calc(100vh - var(--header-h) - 32px);
    overflow-y: auto;
    /* 内滚轴出现时不要挤掉卡片圆角与内边距 */
    overscroll-behavior: contain;
  }
  /* 摘要自身很窄，滚动条压住文字反而更明显 —— 给一点内嵌留白 */
  .cart-layout > .summary::-webkit-scrollbar,
  .checkout-layout > .summary::-webkit-scrollbar { width: 6px; }
  .cart-layout > .summary::-webkit-scrollbar-thumb,
  .checkout-layout > .summary::-webkit-scrollbar-thumb {
    background: var(--line); border-radius: var(--radius-pill);
  }
  .cart-layout > .summary::-webkit-scrollbar-track,
  .checkout-layout > .summary::-webkit-scrollbar-track { background: transparent; }

  /* 底部按钮一直贴在摘要底部 —— 摘要再长也够得着「去结算 / 提交订单」。
     不进位的旧浏览器（不支持 sticky）自动退化为普通文档流，不报错。 */
  .cart-layout > .summary .summary__actions,
  .checkout-layout > .summary .summary__actions {
    position: sticky;
    bottom: 0;
    margin-block-start: 16px;
    padding-block-start: 12px;
    background: var(--bg);
    /* 往上盖住滚动中的条目，避免按钮与文字叠在一起 */
    box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, .12);
  }
}

.checkout-block {
  padding: 20px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-block-end: 18px;
}
.checkout-block__title {
  font-size: 1rem; margin-block-end: 14px;
  display: flex; align-items: center; gap: 8px;
}
/* 区块下的一句说明（第 57 轮：收货地址区要写清"选一条才能下单"） */
.checkout-block__sub {
  margin: -8px 0 14px; color: var(--ink-3); font-size: .8125rem;
}
/* 提交区里的一句提示（如"请先选择收货地址"） */
.summary__hint {
  margin: 0; color: var(--warn); font-size: .8125rem; text-align: center;
}
.summary__hint[hidden] { display: none; }
.checkout-block__num {
  flex: 0 0 auto; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--primary-soft); color: var(--primary);
  font-size: .75rem; font-weight: 700; line-height: 1;
}

/* 支付方式单选卡片 */
.pay-methods { display: grid; gap: 10px; }
.pay-method {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.pay-method:hover { border-color: var(--primary-border); }
.pay-method.is-active,
.pay-method:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.pay-method input { flex: 0 0 auto; margin: 0; }
.pay-method__body { min-width: 0; }
.pay-method__name { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.pay-method__desc { font-size: .75rem; color: var(--ink-3); margin-block-start: 2px; }
.pay-method--off { opacity: .5; cursor: not-allowed; }

/* 订单行（★ 第 57 轮统一为 5 列：封面图 → 标题 → 单价 → 数量 → 金额，业主需求 3）
   结算页 / 下单成功页 / 买家订单详情 / 我的订单列表 四处**共用这一份**，
   所以顺序与对齐天然一致，不会"改了一处忘了另一处"。 */
.mini-lines { display: grid; gap: 10px; margin-block-end: 12px; }
/* ⚠️ 用 grid 而不是 flex：flex 下长标题会把单价/数量挤到下一行 → 列对不齐；
    grid 的列宽由所有行共享，天然对齐。
   ⚠️ `minmax(0, 1fr)` 而不是 `1fr`：`1fr` 的最小值是 auto，
      一个长英文型号会把整行撑破（第 56 轮"图片撑爆表格"的同类坑）。 */
.mini-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: 10px; align-items: center;
  font-size: .8125rem; color: var(--ink-2);
}
.mini-line__thumbwrap { display: flex; }
.mini-line__thumblink { display: flex; }
.mini-line__name { min-width: 0; overflow-wrap: anywhere; }
.mini-line__unit { color: var(--ink-3); white-space: nowrap; }
.mini-line__qty { color: var(--ink-3); white-space: nowrap; }
.mini-line__amt {
  font-weight: 600; color: var(--ink);
  text-align: end; white-space: nowrap;
}
.mini-line__link { color: var(--ink); text-decoration: none; }
.mini-line__link:hover { color: var(--primary); text-decoration: underline; }
/* 窄屏：三个数字列挤一挤，宁可缩小字也不让标题断成一条竖线 */
@media (max-width: 480px) {
  .mini-line { gap: 6px; font-size: .75rem; }
}

/* ---------- 下单成功 / 支付结果 ---------- */
.result-card {
  max-width: 620px; margin-inline: auto;
  padding: clamp(24px, 5vw, 40px);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.result-card__icon {
  width: 60px; height: 60px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  font-size: 1.75rem; line-height: 1;
}
.result-card__icon--ok   { background: var(--ok-bg);   color: var(--ok); }
.result-card__icon--warn { background: var(--warn-bg); color: var(--warn); }
.result-card__icon--err  { background: var(--err-bg);  color: var(--err); }
.result-card__title { font-size: 1.375rem; margin-block-end: 10px; }
.result-card__text { color: var(--ink-2); font-size: .9375rem; line-height: 1.7; }
.result-card__no {
  display: inline-block; margin-block: 14px;
  padding: 8px 16px; border-radius: var(--radius-sm);
  background: var(--bg-soft); border: 1px solid var(--line);
  font-size: 1rem; font-weight: 700; color: var(--ink);
  letter-spacing: .02em;
}
.result-card__actions {
  margin-block-start: 22px;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
/* ★ 第 60 轮：下单成功页 →「我的订单」的显眼入口（业主：要明显一点的按钮）
   独立成块，与订单号一起落在首屏，不和页面底部的次要操作混在一起。 */
.result-card__cta {
  margin-block-start: 20px;
  padding: 16px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.result-card__cta-text { margin: 0 0 12px; font-size: .9375rem; color: var(--ink-2); }
.result-card__cta-btn { min-width: 220px; }
/* 订单确认页里的「接下来什么会发生」—— 与正文左对齐，读起来像一段说明 */
.result-card__steps { margin-block-start: 22px; text-align: start; }

/* 订单状态徽标 */
.status-pill {
  display: inline-block; padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 600;
  background: var(--bg-soft); color: var(--ink-2);
}
/* 订单状态色：语义与全站一致（黄=待处理 / 蓝=进行中 / 绿=完成 / 灰=取消）。
   色值全部走令牌，换主题或调色时不用满文件找魔法色号。 */
.status-pill--pending   { background: var(--warn-bg);      color: var(--warn); }
.status-pill--quoted    { background: var(--info-deep-bg); color: var(--info-deep); }
.status-pill--paid      { background: var(--ok-bg);        color: var(--ok); }
.status-pill--shipped   { background: var(--info-bg);      color: var(--info); }
.status-pill--completed { background: var(--ok-bg);        color: var(--ok); }
.status-pill--cancelled { background: var(--bg-soft);      color: var(--ink-3); }

@media (max-width: 520px) {
  .cart-row { grid-template-columns: 68px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .cart-row__foot { gap: 8px; }
  .cart-row__remove { margin-inline-start: 0; }
}