/* 订单详情的样式 —— **深链页 order.html 与订单列表里的详情弹窗共用这一份。**
   ⚠️ 2026-08-13 从 order.html 的内联 <style> 抽出，内容一字未改。
   改样式改这里，不要在任一页面再开一份局部覆盖：两处必然漂移。 */
/* 说明块：功能在，但数据来源不完整时必须自报家门（降级态的文字形态） */
.degrade{background:var(--panel);border:1px dashed var(--line-d);border-radius:var(--r-md);
  padding:11px 13px;font-size:11.5px;color:var(--ink3);line-height:1.8}

/* ── P2 订单详情：整页单列 ──────────────────────────────────────────
   2026-08-13 产品定稿：**不分左右两块**，从上到下一条读下来 ——
   状态 → 商品（图 / 标题 / 订单金额 / 行动按钮）→ 订单信息 → 订单费用明细 → 其余。
   ⚠️ 原来主列摆费用卡、侧栏又摆一次金额块，同一个数在一屏里出现两遍；
      现在商品行只留一个金额，逐项费用在下面的「订单费用明细」卡片里
      （2026-08-19 之前那是一颗「看明细」按钮弹出来的一层）。
   ⚠️ 「取消订单」仍是文字链，不放右下角 —— 不可逆动作不该长得像主按钮。 */
.order-detail-page{min-width:0}
.detail-content-grid{display:flex;flex-direction:column;gap:14px;min-width:0}
.detail-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:18px 22px}
.detail-card > .hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.detail-card > .hd b{font-size:14px}
.detail-card > .hd .sub{font-size:11.5px;color:var(--sub)}
.detail-card > .hd .detail-link{margin-left:auto}
.detail-link{appearance:none;border:0;background:none;padding:0;cursor:pointer;font:inherit;
  font-size:12px;color:var(--deer-d);white-space:nowrap}
.detail-link:hover{text-decoration:underline}
/* 金额一律同一行、等宽数字，用户能把两笔数直接上下对齐着看。 */
.money{font-variant-numeric:tabular-nums;white-space:nowrap}

/* 状态头：顶边 4px 承担语气，底色同族浅一档。 */
/* ⚠️ 2026-08-13 去掉 4px 顶边（产品要求「头部不要用阴影」——指的就是这条
   压在卡片顶上的重色条）。语气改由**底色**单独承担，与全站「去阴影、去重描边」
   的方向一致（X5 那轮已经把 --sh-1/2/3 全置 none）。
   ⚠️ 别把顶边加回来当「强调」：这一屏的强调已经由状态词的字号和右上角的
   倒计时颜色承担了。 */
.detail-status{display:flex;align-items:flex-start;gap:14px;padding:15px 22px 17px;background:var(--warn-bg);
  border:1px solid var(--line);border-radius:var(--r-xl)}
.detail-status.pay{background:var(--cream)}
.detail-status.calm{background:var(--panel)}
.detail-status.bad{background:var(--bad-bg)}
.detail-status .tx{flex:1;min-width:0}
.detail-status .tx b{font-size:19px;line-height:1.4}
.detail-status .tx p{font-size:12.5px;color:var(--ink2);line-height:1.7;margin:5px 0 0}
.detail-status .time{font-size:15px;font-weight:700;color:var(--bad);white-space:nowrap;
  font-variant-numeric:tabular-nums}

.detail-product{display:flex;gap:14px;align-items:flex-start}
.detail-product img,.detail-product .noimg{width:76px;height:76px;object-fit:contain;background:var(--panel);
  border-radius:var(--r-md);flex:none}
.detail-product .noimg{display:grid;place-items:center;color:var(--sub);font-size:12px}
.detail-product .main{flex:1;min-width:0}
.detail-product .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.detail-product .meta span{background:var(--panel);color:var(--ink2);font-size:10.5px;padding:2px 8px;border-radius:4px}
.detail-product .meta .src-com{background:var(--cream);color:var(--deer-d);font-weight:700}
.detail-com p{font-size:12.5px;color:var(--ink2);line-height:1.8;margin:7px 0 0}
.com-acts{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.com-acts .ybtn{font-size:13px;padding:8px 18px}
.detail-product .nm{font-size:14px;font-weight:700;line-height:1.55}
/* 商品右侧是**订单总金额**（含手续费与境内运费），不是商品单价 ——
   用户拿来做决定和对账的是要付的那个数。逐项费用在下面的「订单费用明细」卡片里。 */
.detail-product .price{flex:none;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.detail-product .price .ph{display:flex;align-items:baseline;justify-content:flex-end;gap:12px;
  font-variant-numeric:normal}
.detail-product .price .lb{font-size:12px;color:var(--ink2)}
.detail-product .price b{display:inline-block;margin-top:5px;font-size:26px;line-height:1.15}
.detail-product .price span{font-size:12px;font-weight:400;color:var(--ink2);margin-left:3px}
/* 🔴 手机上这一行必须换行。三格是 76 图 + 弹性标题 + `flex:none` 的金额，
   金额那格自己就要 197px（26px 的数字 + `white-space:nowrap`），
   375px 下 76+197+两道 14 的间距 = 301 > 293 —— 标题那格被压成
   **宽度 0**，商品名于是一个字一行竖着排下来，金额还压在它上面（实测截图）。
   ⚠️ 光给 .main 一个 min-width 不够：`nowrap` 下总宽仍然超，只会改成金额溢出。
      让金额整个掉到第二行，两边都完整。 */
@media (max-width:560px){
  .detail-product{flex-wrap:wrap}
  .detail-product .main{flex:1 1 140px}
  .detail-product .price{flex:1 1 100%;text-align:left}
  .detail-product .price .ph{justify-content:flex-start}
}
/* 行动区在商品卡底部：按钮紧挨着它要付的那个金额。 */
.detail-acts{display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  margin-top:16px;padding-top:15px;border-top:1px solid var(--hair)}
/* 主动作明显大一档：它是这一屏唯一要用户做的事。 */
.detail-acts .ybtn{font-size:14px;font-weight:700;border-radius:999px;padding:11px 26px}
.detail-acts .ybtn.primary{font-size:15.5px;padding:14px 42px}
.act-sp{flex:1 1 auto}
/* 同意句紧挨主按钮左侧，小字不抢戏。 */
/* ⚠️ **不换行**（2026-08-13）：原来 max-width:16em 把「支付即表示同意《跨境购买
   服务规则》」折成两行，书名号被切在两行之间，读起来像两句话。
   它和右边的按钮是同一次决定，必须在同一行上。窄屏由下面的媒体查询兜。 */
.detail-acts .side-agree{font-size:11.5px;color:var(--sub);line-height:1.7;
  text-align:right;white-space:nowrap}
/* 最后 60 秒：服务端已经不接受这笔付款（prepay 抛 EXPIRED），所以这里**不是按钮**。
   做成置灰按钮只会让人一直点；做成警示文字才说清「现在要做的是刷新，不是付款」。 */
.detail-acts .side-expiring{font-size:13px;font-weight:700;color:var(--warn);
  background:var(--warn-bg);border-radius:999px;padding:11px 22px;line-height:1.4}
/* 取消：灰色文字链，最左，不长成按钮。二次确认在 cancelOrder()。 */
.detail-acts .quit{appearance:none;border:0;background:none;padding:0;cursor:pointer;font:inherit;
  font-size:12.5px;color:var(--sub)}
.detail-acts .quit:hover{color:var(--bad);text-decoration:underline}
@media (max-width:700px){
  .detail-acts{flex-direction:column-reverse;align-items:stretch}
  .act-sp{display:none}
  .detail-acts .side-agree{text-align:center;white-space:normal}
  .detail-acts .ybtn.primary{width:100%}
}

/* 费用两列栅格：一格一个「名称 + 金额」，两列并排。 */
.fee-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;margin-top:13px;font-size:13px}
@media (max-width:620px){.fee-grid{grid-template-columns:1fr}}
.fee-grid .cell{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:9px;border-bottom:1px solid var(--hair)}
.fee-grid .cell .k{color:var(--ink2);min-width:0}
.fee-grid .cell .k i{display:block;font-style:normal;font-size:11px;color:var(--sub);margin-top:3px;line-height:1.6}
.fee-grid .cell .v{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.fee-total{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line-d)}
.fee-total .k b{font-size:13.5px}
.fee-total .k p{font-size:11px;color:var(--sub);line-height:1.65;margin-top:4px}
.fee-total .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}


/* 入库照片：6 格铺满主列，第 6 格叠「+N」。没有照片整块不渲染。
   ⚠️ 订单详情那份「仓内实拍」已于 2026-08-19 删除；这套栅格现在只服务
      **包裹详情**的「入库实拍」（`parcel-detail.js`），别顺手一起删掉。 */
.shots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:13px}
@media (max-width:820px){.shots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.shots button{padding:0;border:0;background:var(--panel);border-radius:10px;overflow:hidden;
  aspect-ratio:1;cursor:zoom-in}
.shots img{width:100%;height:100%;object-fit:cover}
.shots .more{background:var(--cream);color:var(--deer-d);font-size:14px;font-weight:700;display:grid;place-items:center}

/* 日本段物流：左轨迹 + 1px 竖分隔 + 右 280 单号区。
   ⚠️ 这里的承运商是**日本境内段**（卖家选的）。国际段全站只出现日本邮政 / 一鹿专线。 */
.jp-body{display:flex;gap:18px;margin-top:13px;align-items:stretch}
.jp-track{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.jp-no{flex:0 0 280px;border-left:1px solid var(--hair);padding-left:18px}
@media (max-width:820px){
  .jp-body{flex-direction:column}
  .jp-no{flex:none;border-left:0;border-top:1px solid var(--hair);padding-left:0;padding-top:14px}
}
.jp-node{display:flex;gap:11px}
.jp-node .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none;margin-top:5px}
.jp-node.sub .dot{opacity:.42}
.jp-node b{display:block;font-size:12.5px;line-height:1.5}
.jp-node span{display:block;font-size:11px;color:var(--sub);margin-top:3px}
.jp-no .k{font-size:11.5px;color:var(--sub)}
.jp-no .cr{font-size:13px;font-weight:700;margin-top:7px}
.jp-no .no{display:flex;align-items:baseline;gap:10px;margin-top:5px;font-size:13px;
  font-variant-numeric:tabular-nums}
/* ⚠️ `.jp-no p`（免责句「这一段由卖家选择承运商…」）已随那句文案一起删除（2026-08-21）。 */

/* ── 原侧栏的几块，单列后就地复用 ─────────────────────────────────── */
/* ⚠️ `.side-count`（「超时订单自动关闭…」倒计时说明块）已随 sideCountdownHtml
   一起删除（2026-08-21）。 */
.side-kv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:12.5px;padding:8px 0;border-bottom:1px solid var(--hair)}
.side-kv:last-child{border-bottom:0;padding-bottom:0}
.side-kv .k{color:var(--sub);flex:none}
.side-kv .v{text-align:right;min-width:0;word-break:break-all}
.side-kv .ordno{appearance:none;background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:12.5px;color:var(--ink)}
.side-kv .ordno:hover{color:var(--deer-d);text-decoration:underline}
.side-agree{font-size:11px;color:var(--sub);line-height:1.7;text-align:center}
.side-links{display:flex;flex-direction:column;align-items:center;gap:11px;padding:2px 0 4px}
.side-links button{appearance:none;border:0;background:none;padding:0;cursor:pointer;font:inherit;
  font-size:12px;color:var(--ink2)}
.side-links button:hover{text-decoration:underline}
.side-links button.quit{color:var(--sub)}
.side-links button.quit:hover{color:var(--bad)}
/* ⚠️ `.side-store`（「这件在东京仓，等你安排发货」保管块）的样式已随那一块
   一起删除（2026-08-19）—— 在仓与仓储费归「我的包裹」。 */
/* ⚠️ `.fee-sheet-note`（卡片末尾「国际运费还没核算」那段说明）的样式已随那一块
   一起删除（2026-08-19）：订单页从入库起不再管运费，运费在「我的包裹」里说。 */
/* ⚠️ `.detail-note` 整套（`.bad` 采购失败 / `.doing` 退款处理中）已随
   `purchaseFailureHtml` 与 `refundFallbackHtml` 一起删除（2026-08-20）：
   订单详情只给一个最终状态，不再摆解释性说明块。留着就是死规则。 */
/* ⚠️ `.detail-exception`（「仓储处理异常」块）与它的
   `.detail-content-grid > .detail-exception` 覆盖规则已随那一块一起删除（2026-08-21）。 */
/* 费用明细顶部：订单金额 + 支付方式，再往下才是逐项费用。 */
.fee-sheet-head{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:4px}
/* 就地卡片形态：标题行（.hd）与下面的金额之间要有一口气，弹层里那份靠
   .ysheet-bd 的 padding 撑着，卡片里没有。 */
.detail-fees > .hd + *{margin-top:12px}
.fee-sheet-head .row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:6px 0}
.fee-sheet-head .k{font-size:12.5px;color:var(--ink2)}
.fee-sheet-head .v{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
/* ── 退款方案卡（P9）────────────────────────────────────────────────
   三段式：已付（2px 粗分隔）→ 逐笔扣除 → 扣除合计 → 实际退回（24px/700）。
   每笔扣费 = 名称 13/700 + 为什么 11.5/1.7 + 金额等宽，前缀「− 」。 */
.rf-card{border-top:4px solid var(--warn);background:var(--warn-bg)}
.rf-card > .hd .sub{font-size:11.5px;color:var(--sub)}
.rf-due{margin-top:10px;font-size:13px;color:var(--ink)}
.rf-due .k{color:var(--ink2)}
.rf-due b{font-variant-numeric:tabular-nums;color:var(--warn)}
.rf-due p{font-size:11.5px;color:var(--ink2);line-height:1.8;margin:6px 0 0}
.rf-why{margin-top:12px}
.rf-why b{font-size:13px;display:block}
.rf-why p{font-size:12.5px;color:var(--ink2);line-height:1.8;margin:4px 0 0}
.rf-sum{margin-top:14px;background:var(--card);border-radius:var(--r-md);padding:12px 14px}
.rf-sum .row{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--hair)}
.rf-sum .row:last-child{border-bottom:0}
.rf-sum .row .k{flex:1;min-width:0;font-size:12.5px;color:var(--ink2)}
.rf-sum .row .v{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);font-size:14px;font-weight:700}
.rf-sum .row.paid{border-bottom:2px solid var(--line)}
.rf-dedhead{font-size:11.5px;color:var(--sub);padding:9px 0 2px}
.rf-sum .row.ded .k b{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.rf-sum .row.ded .k i{display:block;font-style:normal;font-size:11.5px;color:var(--ink2);line-height:1.7;margin-top:2px}
.rf-sum .row.sub .v{color:var(--ink2)}
.rf-sum .row.total{padding-top:11px;border-top:1px solid var(--line)}
.rf-sum .row.total .k{font-size:13px;color:var(--ink);font-weight:700}
.rf-sum .row.total .v{font-size:24px;line-height:1.2}
.rf-note{font-size:11.5px;color:var(--ink2);line-height:1.8;margin:12px 0 0}
/* 两个按钮不能都做成主按钮（稿子定稿）：同意是主，不同意是次。 */
.rf-acts{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.rf-acts .ybtn{width:100%;border-radius:var(--r-pill);padding:11px 16px;font-size:14px}

/* ⚠️ `.refund-sum`（退款降级版里「已付总额 / 未退回部分 / 已退回」那张小表）
   已随 `refundFallbackHtml` 一并删除（2026-08-20）。带按钮的退款方案卡用的是
   上面的 `.rf-sum`，两者不是一回事 —— 别把 `.rf-*` 也当成死规则删掉。 */

/* 旧批次只读视图仍沿用下面的基础卡片样式。 */
.todo{border-radius:var(--r-xl);padding:15px 18px;margin-bottom:13px;display:flex;gap:16px;
  align-items:center;flex-wrap:wrap;background:var(--warn-bg);border:1px solid var(--warn)}
.todo.calm{background:var(--panel);border-color:var(--line-d)}
.todo.bad{background:var(--bad-bg);border-color:var(--bad)}
.todo .tx{flex:1;min-width:240px}
.todo .tx b{font-size:14.5px;color:var(--warn)}
.todo.calm .tx b{color:var(--ink)}
.todo.bad .tx b{color:var(--bad)}
.todo .tx p{font-size:12.5px;color:var(--ink2);line-height:1.75;margin-top:4px}
.todo .mo{text-align:right}
.todo .mo .v{font-size:22px;font-weight:700;color:var(--ink)}
.todo .mo .r{font-size:11px;color:var(--sub)}
.todo .todocta{display:flex;flex-direction:column;gap:8px}

.pane{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:16px 18px;margin-bottom:13px}
.pane > b{font-size:14px;display:block}
.pane .sub{font-size:11.5px;color:var(--sub);margin-top:3px;line-height:1.75}
/* 整单视图的商品行 */
.bitems{margin-top:11px;display:flex;flex-direction:column}
.bitem{display:flex;align-items:flex-start;gap:12px;padding:13px 0;text-decoration:none;color:inherit;
  border-top:1px solid var(--hair)}
.bitem:first-child{border-top:0;padding-top:4px}
.bitem.me{background:linear-gradient(90deg,rgba(176,64,95,.05),transparent 70%);
  border-radius:8px;padding-left:9px;padding-right:9px;margin-left:-9px;margin-right:-9px}
.bitem img,.bitem .bnoimg{width:64px;height:64px;border-radius:9px;object-fit:cover;
  flex:0 0 auto;background:var(--panel)}
.bitem .bi-c{flex:1;min-width:0}
.bitem .nm{font-size:13.5px;line-height:1.55;font-weight:600}
.bitem .mt{font-size:11.5px;color:var(--sub);margin-top:4px;line-height:1.6}
.bitem .bme{font-style:normal;font-size:10.5px;color:var(--deer-d);
  border:1px solid var(--deer);border-radius:5px;padding:1px 5px;margin-left:7px}
.bitem .bgo{font-size:11.5px;color:var(--deer-d);margin-left:7px}
.bitem .bi-r{text-align:right;flex:0 0 auto}
.bitem .bst{font-size:11px;color:var(--sub);margin-bottom:3px}
.bitem .bamt{font-size:13px;font-weight:600}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:13px;align-items:start}
@media (max-width:820px){.duo{grid-template-columns:1fr}}

/* ⚠️ 入库照片查看器（`.insp-viewer*`，看大图那层）的样式已随 order-detail.js 的
   `openInspectionViewer` 一起删除（2026-08-19）。包裹详情的入库照片走 app.js 的
   `pdZoom`，是另一套。 */

@media (max-width:620px){
  .detail-card{padding:16px}
  .detail-status{gap:10px;padding-left:16px;padding-right:16px}
  .detail-status .tx b{font-size:17px}.detail-status .time{font-size:13px}
}

/* ⚠️ 「验货结论」（`.detail-inspreport`）的样式已随那一块一起删除（2026-08-19）：
   订单详情不再展示验货报告，后端 `/inspections/:orderNo` 暂时没有消费方。 */

/* ★ C1 下游：用户选的线路后来怎么样了（app.js requestedLineNoticeHtml）。
   ⚠️ 「线路有调整」用醒目底色，「你的首选」不用 —— 前者是我们改了用户的决定，
      后者只是复述他自己的选择。同等分量会让每个正常包裹都像出了状况。 */
.side-note{font-size:11.5px;color:var(--sub);line-height:1.7;padding:6px 0 2px}
.line-changed{background:var(--warn-bg,#fff7ed);border:1px solid var(--warn-line,#fed7aa);
  border-radius:10px;padding:10px 12px;margin:2px 0 10px;font-size:12.5px;line-height:1.75}
.line-changed b{display:block;margin-bottom:2px}
.line-changed .why{color:var(--sub);margin-top:4px}