/* ⚠️ `hidden` 属性斗不过 class 上的 display。
   2026-07-30 实测：`#trnote` 明明 hidden=true，但 `.trnote{display:flex}` 让它
   照样占 20px，页面上是一条莫名其妙的空白横条。全站有 5 处用 hidden 属性
   （detail / category / search / subscribe），一条全局规则一起兜住，
   免得以后每加一个 hidden 元素都踩一次。 */
[hidden] { display: none !important; }
.item-risk { margin-top: 7px; display: flex; align-items: flex-start; gap: 6px;
  font-size: 11px; line-height: 1.45; color: var(--ink2); }
.item-risk b { flex: 0 0 auto; padding: 1px 6px; border-radius: 999px; font-size: 10px; }
.item-risk span { min-width: 0; }
.item-risk.warn b, .item-risk.ship b { color: #8A5A16; background: var(--warn-bg); }
.item-risk.bad b { color: var(--bad); background: var(--bad-bg); }
/* 只留日文字体做兜底子集。中文正文改用系统栈（见 body），
   不再远程拉 Zen Maru Gothic 的全量中文字重 —— 那是几百 KB 的阻塞请求，
   而设计稿定的中文字体本来就是系统自带的 PingFang SC。 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  /* ── 品牌色 ──
     ⚠️ 2026-08-03 主色下沉墨色，粉色缩到 CTA 与品牌标识。
        小程序 miniprogram/app.wxss 有**同一份**令牌，改一边等于两端分叉。
     三条规则（改任何页面前先读）：
       ① 金额一律墨色 + 等宽数字（.mono），不用彩色 ——
          彩色金额看着像促销，我们要的是像账单。
       ② 粉色只出现在：主 CTA 按钮、品牌标识、当前选中态。
          卡片背景、分隔线、图标底色都不用粉。
       ③ 大面积粉色底块（首页活动位、会员卡）用米白卡片 + 4px 粉色顶边。 */
  /* ⚠️ 2026-08-07 配色重构：整体下沉墨色，去掉残留粉调。变量名一个没改，
     只改值 —— 所以页面侧零改动。小程序 app.wxss 同步改了同一套值。 */
  --deer: #A63A56; --deer2: #D6CCD0; --cream: #F7EDF0; --ink: #2E2429;
  --sub: #8B7C83; --line: #E6DFE2; --card: #FFFFFF;
  --bg: #F4F2F3;          /* 页面背景（与小程序 --bg 同值） */
  /* 🔴 --deer2 从浅粉 var(--deer2) 改成中性灰 #D6CCD0。它 90 处用量里 60 处是
     hover 的 border-color —— 浅粉描边让按钮 hover 时反而"变淡"，读起来像被禁用。
     真正需要"品牌色浅一档"的地方（浅底、选中态）改用 --cream，逐处判过。
     🔴 --blush var(--info-bg) 废弃。它名字叫腮红、值却是天蓝，在墨色系里非常突兀。
     原来 3 处用量：两处是金额（人民币价、拍卖当前价）→ 按"金额一律墨色"改 --sub；
     一处是"即将开放"徽标 → 改 --info。 */
  --info: #3E5F80; --info-bg: #EDF1F5;

  /* ── 设计稿补齐的品牌深色与面板层 ──
     原来只有 deer / deer2 两档，链接和 hover 只能复用主色，
     压不出层次；面板也只有 cream 一个底色，卡片叠卡片时糊成一片。 */
  --deer-d: #85273F;      /* 链接、hover、按下态 */
  --panel:  #F7F5F6;      /* 面板底（比 cream 浅一档，用于卡中卡） */
  --line-d: #D6CCD0;      /* 面板描边（比 line 深一档） */
  --grid:   #E9E3E5;      /* 表格网格线：中性偏灰，不带粉，避免表格看起来在发光 */
  --hair:   #F0EBED;      /* 列表分隔发丝线 */

  /* ── 墨色三档 ──
     只有一个 --ink 时，正文和说明文字被迫共用同一个黑，
     信息层级全靠字号撑，长页面读起来很累。 */
  --ink2: #5C4F55;        /* 正文（文字次色） */
  --ink3: #8B7C83;        /* 说明、副标题（文字弱，与 --sub 同值） */

  /* ── 语义色 ──
     ⚠️ 之前全站没有语义色：成功/警示只能用粉色，失败散落着
     #C0392B / #8E2733 / #A73735 三个不同的红，同一个「错」在三个页面
     是三种颜色。这里统一，旧值逐页替换掉。 */
  --ok:      #2E8B62;  --ok-bg:   #EAF3EE;   /* 成功、有货、免费、省下的钱 */
  --warn:    #C98A2E;  --warn-bg: #FEF7EC;   /* 待处理、第二次付款、加载慢、倒计时 */
  --bad:     #C0392B;  --bad-bg:  #FBEDEA;   /* 失败、不可购、禁限运、护栏拦截 */

  /* ── 阴影：全站一处都没有（2026-08-20 产品口述「有这种阴影的全部去掉」）──
     🔴 2026-08-12 先把 `--sh-1/2/3` 三个令牌统一置 none；2026-08-20 把最后那批
        `box-shadow: var(--sh-*)` 与几处硬编码投影**连声明一起删掉**，
        三个令牌随之退役（web/ 下零引用）。
     ⚠️ 层级一律靠 **1px 描边 / 左侧色条 / 一道顶边** 表达：
        浮层（下拉 `.hdchp`、Toast `.ylt-toast`、弹窗 `.ysheet-box`、
        悬浮层 `.tb-cs-pop`、站头联想 `.hdsug`）本来就各带 1px border；
        吸底条（`.pick-summary` / `.detail-stickycta`）用 `border-top:2px`。
     ⚠️ **不要为了"层次感"把 box-shadow 加回来**，也不要重新引入 `--sh-*`。
        小程序 `miniprogram/app.wxss` 与运营后台 `admin/index.html` 各有自己的
        一套阴影令牌，那是另外两个端的事，不受这一条约束。 */

  /* ── 圆角双轨制 ──
     轨一：药丸 999px，只给「可点的小东西」——按钮、标签、芯片、徽章。
     轨二：阶梯 6→18px，给「有内容的面」——输入框、卡片、面板、弹层。
     混用会让页面看起来没规矩：设计稿里 999px 用了 198 次，
     其余全部落在这七个阶梯值上，没有第三种写法。 */
  /* ⚠️ 2026-08-07 收敛成四档（变量名全保留，页面侧零改动）：
     6 徽标/输入框 · 10 卡中卡/提示块 · 14 卡片 · 999 药丸。
     圆角越大越显软，20px+ 适合内容消费，不适合要付钱的页面。 */
  --r-pill: 999px;
  --r-xs: 6px; --r-sm: 6px; --r-md: 10px; --r-lg: 10px;
  --r-xl: 14px; --r-2xl: 14px; --r-3xl: 14px;

  /* ── 栅格 ──
     1080 → 1280 → 1560。1280 是「侧栏 + 每行 5 卡」时定的；筛选栏移到顶部、
     结果区改成整幅宽之后，1440/1600 的屏幕两侧各空出一大条。
     ⚠️ 1560 不是随便取的：常见的 1440 宽笔记本上，减去两侧 24px padding 还有
        1392，比 1560 小，所以那类屏幕仍是「贴边 + 24px」，不会出横向滚动条；
        1600 以上才真正吃到这次加宽。
     ⚠️ 别再往上加：正文（协议、指南）走 --wrap-narrow，但商详的主信息列是按
        这个宽度分栏的，再宽标题就会拉成一行 60 多个字，读起来要来回扫。
     --wrap-narrow 留给协议、指南这类长文页，正文太宽反而难读。 */
  --wrap: 1560px;
  --wrap-narrow: 860px;
  --col: 12;              /* 12 栏 */
  --gutter: 20px;
  --ico-search: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48Y2lyY2xlIGN4PSIxMC41IiBjeT0iMTAuNSIgcj0iNi41Ii8+PHBhdGggZD0iTTE1LjQgMTUuNCAyMSAyMSIvPjwvc3ZnPg==");
}
/* 🔴 滚动条位置常驻（2026-08-13）。
   没有这一条时：内容超过一屏的页面有滚动条、不超过的没有，两者版心宽度差 15px。
   于是**从长页跳到短页，整个版面会横着挪一下** —— 用户报的「到不同的页面
   高度不同导致的跳动」，横向那一半就是它。
   ⚠️ 用 `scrollbar-gutter` 而不是 `overflow-y: scroll`：后者在没内容时也画一条
      灰槽子，且会让 macOS 的覆盖式滚动条被强制成占位式，改变所有人的观感。
   ⚠️ 弹窗锁滚动时的补偿是另一套（`--ylt-scrollbar-gap`，见 lockYltOverlay），
      两者不冲突：这条管页与页之间，那条管同一页开弹窗的瞬间。 */
html { scrollbar-gutter: stable; }
/* 纵向那一半：内容少的页面页脚会往上跑，跳过去像换了一个网站。
   给正文一个「至少一屏减去站头」的下限，页脚位置就稳住了。
   ⚠️ 这不是把每页拉到等高（做不到，也不该做 —— 内容本来就不一样多），
      而是**保证下限**：短页不再让页脚上蹿，长页照常往下延。
   ⚠️ 用 min-height 不用 height：写死高度会让长页内容被截断。
   ⚠️ 260px 是站头（约 190）+ 面包屑与上下留白的实测值，不是拍的。 */
main { display: block; min-height: calc(100vh - 260px); }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
    'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  /* 页面底走 --bg（中性），不再用 --cream —— cream 现在的语义是「选中态底」，
     拿它当整站背景会让「选中」失去对比。 */
  color: var(--ink); background: var(--bg); line-height: 1.85; -webkit-font-smoothing: antialiased;
}

/* ⚠️ 日文必须单独挂字体栈。
   上面那串是**简体中文**字体（PingFang SC / Hiragino Sans GB / Noto Sans SC）。
   本站默认显示来源站原文，也就是满屏日文 —— 用中文字体渲染日文汉字会拿到
   中文字形：直・骨・今・角・者・海 这些字的写法中日两国是不同的，
   日本人一眼就看出别扭，中国用户看不出来但字确实印错了。
   所以凡是原文内容（商品标题、描述、成色原文、卖家名、日文关键词），
   标签上加 lang="ja" 或 .ja，走这条日文栈。 */
[lang="ja"], .ja {
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic',
    'Noto Sans JP', 'Meiryo', sans-serif;
}

/* 金额、货号、单号、重量一律等宽：
   数字不等宽时，列表里上下两行的价格对不齐，扫一眼比不出大小。 */
.num, .jpy, .cny, .amt { font-variant-numeric: tabular-nums; }
.mono { font-family: ui-monospace, Menlo, 'SF Mono', Consolas, monospace; font-variant-numeric: tabular-nums; }

a { color: var(--deer-d); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; }

/* ── 12 栏栅格（PC 布局骨架）──
   .wrap12 是页面主容器；.col-N 表示占多少栏。
   窄屏一律塌成单栏 —— 官网主力是 PC，移动端由小程序承担，
   这里只保证「能看、不横向滚动」，不做精细的中间断点。 */
.wrap12 { max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(var(--col), 1fr); gap: var(--gutter); }
.col-3 { grid-column: span 3; }  .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }  .col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }  .col-9 { grid-column: span 9; }
.col-12 { grid-column: 1 / -1; }
@media (max-width: 1000px) {
  .wrap12 { display: block; }
  .col-3, .col-4, .col-5, .col-6, .col-8, .col-9 { width: auto; }
}

/* ── 语义色工具类 ──
   给各页直接用，避免再往 HTML 里写死十六进制。 */
.t-ok { color: var(--ok); }     .bg-ok { background: var(--ok-bg); color: var(--ok); }
.t-warn { color: var(--warn); } .bg-warn { background: var(--warn-bg); color: var(--warn); }
.t-bad { color: var(--bad); }   .bg-bad { background: var(--bad-bg); color: var(--bad); }
/* 状态徽章：药丸轨，永远配语义底色，不裸放文字 */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px;
  font-weight: 700; border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap; }

/* header — 全站固定统一 */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--card); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 1440px; margin: 0 auto; padding: 12px 24px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 21px; color: var(--ink); line-height: 1.15; }
.brand:hover { text-decoration: none; }
.brand .deer { font-size: 29px; line-height: 1; }
.brand small { display: block; font-size: 10px; color: var(--sub); letter-spacing: 2.5px; font-weight: 500; }
/* 主导航（.navlinks）已整条移除：唯一一项「帮我买」在页脚已有入口，
   logo 右边的位置让给全站搜索框（样式见下方「站头搜索框」一节）。 */
/* 语言下拉 */
.langsw { margin-left: auto; }
#langSelect {
  -webkit-appearance: none; appearance: none; font: inherit; font-size: 13px; color: var(--ink);
  background-color: #fff;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23F0688E" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
  border: 1px solid var(--line); border-radius: 14px; padding: 8px 34px 8px 16px; cursor: pointer;
}
#langSelect:hover { border-color: var(--deer); }
#langSelect:focus { outline: none; border-color: var(--deer); }

/* hero */
.hero { position: relative; overflow: hidden; background: linear-gradient(122deg,#FFD9E4 0%,var(--deer2) 55%,var(--info-bg) 100%); color: #6B4260; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; }
.hero::before { width: 420px; height: 420px; background: rgba(255,255,255,.22); top: -160px; right: -90px; }
.hero::after { width: 220px; height: 220px; background: rgba(255,255,255,.14); bottom: -90px; left: 8%; }
.hero .inner { position: relative; max-width: var(--wrap); margin: 0 auto; padding: 72px 24px 78px; display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); gap: 40px; align-items: center; }
.hero .eyebrow { color: #C2527A; margin-bottom: 14px; }
.hero h1 { font-size: clamp(30px,4.4vw,44px); line-height: 1.34; letter-spacing: 1px; text-wrap: pretty; }
.hero p { font-size: 16.5px; margin-top: 18px; max-width: 560px; color: #7A5570; text-wrap: pretty; }
.herobtns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--deer); padding: 14px 28px; border-radius: 14px; font-weight: 700; font-size: 15px; }
.cta:hover, .cta2:hover { text-decoration: none; }
.cta2 { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.28); color: #6B4260; padding: 14px 28px; border-radius: 14px; font-weight: 700; font-size: 15px; border: 1px solid rgba(255,255,255,.75); }
.cta2:hover { background: rgba(255,255,255,.5); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.chips span { background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); color: #7A5570; font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 14px; }
.heromascot { display: flex; justify-content: center; }
.heromascot div { width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle at 32% 28%,var(--card),#F7F5F6 70%); display: flex; align-items: center; justify-content: center; }

/* trust bar */
.trust { background: var(--card); border-bottom: 1px solid var(--line); }
.trust .inner { max-width: var(--wrap); margin: 0 auto; padding: 26px 24px; display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 20px; }
.trust b { display: block; font-size: 14.5px; color: var(--ink); }
.trust span { font-size: 12.5px; color: var(--sub); line-height: 1.7; }

/* sections */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 64px 24px 10px; }
.wrap.first { padding-top: 74px; }
.wrap.last { padding-bottom: 80px; }
.eyebrow { font-size: 12px; letter-spacing: 3.5px; font-weight: 700; color: var(--deer); }
.wrap h2 { font-size: clamp(23px,3vw,28px); margin-top: 8px; }
.wrap .lead { color: var(--sub); margin-top: 6px; margin-bottom: 32px; font-size: 15px; }

.steps { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 18px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px; }
.step .n { width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; background: var(--cream); color: var(--deer); font-weight: 700; border: 1px solid var(--line); }
.step h3 { font-size: 16.5px; margin: 16px 0 8px; }
.step p { font-size: 13px; color: var(--sub); line-height: 1.8; }

/* fees */
.feegrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(310px,1fr)); gap: 18px; align-items: start; }
.feetable { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.feetable .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 15px 22px; border-bottom: 1px solid var(--line); }
.feetable .row:last-child { border-bottom: none; }
.feetable .row.hi { background: var(--cream); }
.feetable .row b { flex: 0 0 42%; min-width: 130px; font-size: 14.5px; }
.feetable .row.hi b { color: var(--deer); }
.feetable .row span { font-size: 13px; color: var(--sub); line-height: 1.75; }
.feetable .row.hi span { color: var(--ink2); }
.feeside { display: flex; flex-direction: column; gap: 14px; }
.paycard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; }
.paycard b { font-size: 14.5px; }
.paycard p { font-size: 13px; color: var(--sub); margin-top: 6px; line-height: 1.8; }
/* 🔴 原来粉底粉字，可读性差；而且粉色在色板里的语义是「行动点」不是「注意」。 */
.notecard { background: var(--warn-bg); border-left: 3px solid var(--warn); border-radius: 0 10px 10px 0; padding: 16px 20px; font-size: 12.5px; color: var(--deer); line-height: 1.8; }

/* features */
.feat { display: grid; grid-template-columns: repeat(auto-fit,minmax(265px,1fr)); gap: 18px; }
.fc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; }
.fc .ico { font-size: 26px; }
.fc h3 { font-size: 16.5px; margin: 12px 0 8px; }
.fc p { font-size: 13px; color: var(--sub); line-height: 1.8; }

/* faq */
.faqgrid { display: grid; grid-template-columns: repeat(auto-fit,minmax(310px,1fr)); gap: 14px; align-items: start; }
details.faq { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; }
details.faq summary { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; list-style: none; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq .chev { color: var(--deer); font-weight: 700; font-size: 17px; line-height: 1.5; transition: transform .2s; }
details.faq .q { font-size: 15px; font-weight: 700; line-height: 1.6; }
details.faq[open] .chev { transform: rotate(45deg); }
details.faq[open] .q { color: var(--deer); }
details.faq p { font-size: 13px; color: var(--sub); line-height: 1.85; margin: 10px 0 2px 29px; }

/* compliance link cards */
.linkcards { display: grid; grid-template-columns: repeat(auto-fit,minmax(265px,1fr)); gap: 18px; }
.linkcard { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: block; color: var(--ink); }
.linkcard:hover { border-color: var(--deer); text-decoration: none; }
.linkcard b { font-size: 16.5px; }
.linkcard p { font-size: 13px; color: var(--sub); margin-top: 8px; line-height: 1.8; }
.linkcard .arrow { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--deer); }

/* cta band */
.ctaband { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 40px 44px; display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: center; }
.ctaband h2 { font-size: clamp(21px,2.6vw,24px); }
.ctaband p { color: var(--sub); margin-top: 10px; font-size: 14.5px; max-width: 560px; line-height: 1.85; }
.ctaband .btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.btn-solid { display: inline-flex; align-items: center; gap: 8px; background: var(--deer); color: #fff; padding: 13px 26px; border-radius: 14px; font-weight: 700; font-size: 14.5px; }
.btn-solid:hover { background: #A85B2B; text-decoration: none; }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--deer); padding: 13px 26px; border-radius: 14px; font-weight: 700; font-size: 14.5px; border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--deer); text-decoration: none; }

/* legal doc pages */
.doc { max-width: 820px; margin: 0 auto; padding: 44px 24px 90px; }
.doc.wide { max-width: 900px; }
.doc h1 { font-size: 29px; }
.doc .updated { color: var(--sub); font-size: 13px; margin: 6px 0 24px; }
.doc h2 { font-size: 18px; margin: 32px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.doc p, .doc li { font-size: 15px; color: #4a3b2b; line-height: 1.9; }
.doc ul, .doc ol { padding-left: 22px; margin: 8px 0; }
.doc .note { background: var(--warn-bg); border-left: 3px solid var(--warn); border-radius: 0 10px 10px 0; padding: 14px 18px; font-size: 13px; color: var(--deer); margin: 18px 0; line-height: 1.8; }

/* tokushoho table（div 版，窄屏自动折行） */
.tsh { margin-top: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.tsh .tr { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tsh .tr:last-child { border-bottom: none; }
.tsh .th { flex: 0 0 32%; min-width: 180px; background: var(--cream); font-weight: 700; font-size: 14.5px; padding: 15px 20px; }
.tsh .td { flex: 1 1 320px; font-size: 14.5px; color: #4a3b2b; padding: 15px 20px; line-height: 1.85; }

/* footer */
.foot { background: #fff; border-top: 1px solid var(--line); }
.foot .inner { max-width: var(--wrap); margin: 0 auto; padding: 44px 24px; display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 28px; }
.foot .co .cohead { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.foot .co .cohead span { font-size: 24px; }
.foot .co .cohead img { width: 24px; height: 24px; display: block; object-fit: contain; }
.foot .co b { color: var(--ink); font-size: 15px; }
.foot .co .lines { font-size: 13px; color: var(--sub); line-height: 1.95; }
.foot h4 { font-size: 12.5px; font-weight: 700; color: var(--ink); letter-spacing: 1px; margin-bottom: 10px; }
.foot .fl { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.foot .fl a { font-size: 13.5px; color: var(--sub); }
.foot .fl a:hover { color: var(--deer); }
.foot .con { font-size: 13px; color: var(--sub); line-height: 1.95; }
.foot .cc { text-align: center; font-size: 12px; color: var(--sub); padding: 18px; border-top: 1px solid var(--line); }

@media (max-width: 760px) {
  .hero .inner { padding: 52px 20px 58px; }
  .nav { gap: 10px 12px; padding: 12px 16px; }
  .brand { font-size: 19px; }   /* .deer 尺寸见文末品牌标识区，这里不再用 font-size 控制 */
  .ctaband { padding: 30px 26px; }
  .wrap { padding: 48px 20px 8px; }
  .doc { padding: 32px 20px 70px; }
}

/* ===== 品牌标识 =====
   ⚠️ 2026-08-07：从「span + font-size:0 + base64 背景图」改成真正的 <img>，
      指向 assets/logo/app-icon.svg（仓库里一直有这套素材，只是没被用上）。
      原来 HTML 里那个 🦌 是 CSS 不可用时的兜底字符 —— 而系统 emoji 在
      苹果 / 安卓 / Windows 上是三只**完全不同**的鹿，品牌标识不能交给
      系统字体决定长什么样。
   ⚠️ 背景图必须清掉：img 是有内容的元素，留着 background 会两层叠在一起。 */
@keyframes ylt-bounce { 0%,100% { transform: translateY(0) } 30% { transform: translateY(-4px) rotate(-5deg) } 60% { transform: translateY(1px) } }
.brand .deer { width: 34px; height: 34px; display: block; flex: 0 0 auto; object-fit: contain; }
/* 动画只在悬停时跑 —— 常驻跳动会一直抢注意力，也不像成熟品牌 */
.brand:hover .deer { animation: ylt-bounce 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .brand:hover .deer { animation: none; } }

/* ===== 站头占位：消除页面切换时的内容下推（CLS）=====
   站头由 app.js 的 mountHeader() 渲染，脚本在 body 末尾，
   浏览器可能先按「没有站头」画一帧，站头插进来时整页被往下推 ——
   这就是点链接时感觉整个页面在跳的原因。
   这里让空的 #hd / #ft 先占住与真实站头等高的位置；mountHeader 用
   outerHTML 替换后占位符即消失，所以 :empty 只在渲染前生效，不影响成品。
   数值取自实测（topbar + site-head），断点与下方站头自身的断点一致：
     ≥761px   42 + 71  = 113   （品牌 + 搜索框同一行）
     ≤760px  112 + 114 = 226   （顶栏换两行 + 搜索框独占第二行）
   改站头结构时要同步核对这两个值。 */
/* ⚠️ 2026-08-07 重量：注释里那两个数（113 / 226）与站头现在的真实高度对不上了 ——
   生产站实测 1000px 宽 .topbar 42 + .site-head 82 = **124**（差 11px），
   420px 宽 73 + 145 = **218**（差 -8px）。差多少页面每次加载就跳多少。
   ⚠️ 这两个值是**会随站头改动而失效的**，上一次就是这么失效的。
      核对方法：任一页面跑
      `document.querySelector('.topbar').offsetHeight + document.querySelector('.site-head').offsetHeight`。 */
#hd:empty { display: block; min-height: 124px; }
#ft:empty { display: block; min-height: 260px; }
@media (max-width: 760px)  { #hd:empty { min-height: 218px; } #ft:empty { min-height: 420px; } }

/* 账号侧栏同理：它也是 outerHTML 替换掉一个零高度的占位 div，
   替换那一刻正文会整体下移一个侧栏的高度。
   ⚠️ 窄屏侧栏排到内容上方，预留高度会把正文推出屏外，所以只在宽屏预留。 */
#acctNav:empty { display: block; min-height: 300px; }
@media (max-width: 900px) { #acctNav:empty { min-height: 0; } }


/* ===== 站头搜索框（logo 右侧，全站每页都有）=====
   结构由 app.js 的 mountHeader() 输出：
     .hdsearch > select.hdch + input.hdq + button.hdja + button.hdgo
   一体化胶囊：渠道选择器和输入框共用同一个白底圆角框，中间用竖线分隔，
   视觉上是一个控件而不是三个控件并排。
   ⚠️ 站头样式只在本文件维护 —— shop.css 里曾有一份取值不同的副本，
      而它在部分页面排在后面胜出，导致同一个站头在两批页面里长得不一样。 */
/* 全站唯一的搜索输入，所以放大：高 52px、正文 15.5px、放大镜 40px。
   首页那个大搜索框删掉之后，这一个要承担原来两个框的分量。
   position:relative 是给聚焦下拉 .hdsug 定位用的。 */
.hdsearch {
  display: flex; align-items: center; background: #fff; margin-left: 14px;
  border: 2px solid var(--line); border-radius: var(--r-pill); padding: 4px 5px 4px 6px;
  flex: 1 1 auto; min-width: 0; max-width: none; min-height: 52px;
  position: relative;
  transition: border-color .18s;
}
.hdsearch:focus-within { border-color: var(--ink); }
/* 渠道选择器：原生 select（移动端直接调系统选择器，比自绘浮层稳），
   只把外观压平并自己画一个 ▾。 */
.hdch {
  -webkit-appearance: none; appearance: none; font: inherit; font-size: 14px;
  color: var(--ink); background-color: transparent;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23F0688E" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat; background-position: right 8px center; background-size: 11px;
  border: 0; border-right: 1px solid var(--line); border-radius: 0;
  padding: 7px 26px 7px 15px; margin-right: 10px; cursor: pointer;
  max-width: 132px; flex: 0 0 auto; text-overflow: ellipsis;
}
.hdch:focus { outline: none; }
/* 宽屏用自绘按钮盖住原生 select（option 里放不了 logo），窄屏仍走系统选择器。
   ⚠️ select 没被移除，它仍是唯一状态源：搜索页读 chSel.value、监听它的 change。 */
.hdchw { position: relative; flex: 0 0 auto; display: flex; align-items: center; }
.hdchbtn { display: none; }
@media (min-width: 761px) {
  .hdchw .hdch { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  .hdchbtn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px;
    color: var(--ink); background: none; border: 0; border-right: 1px solid var(--line);
    padding: 7px 14px 7px 13px; margin-right: 10px; cursor: pointer; max-width: 210px; }
  .hdchbtn:disabled { opacity: .55; cursor: default; }
  .hdchbtn .lg { width: 20px; height: 20px; flex: none; display: grid; place-items: center; }
  .hdchbtn .lg img { width: 20px; height: 20px; object-fit: contain; border-radius: 4px; }
  .hdchbtn .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* ▾ 自己画，跟原来 select 的那个一致 */
  .hdchbtn i { width: 11px; height: 11px; flex: none; border-right: 2px solid var(--deer);
    border-bottom: 2px solid var(--deer); transform: rotate(45deg) translate(-2px,-2px); }
}
.hdchp { position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; min-width: 260px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 6px; }
.hdchp[hidden] { display: none; }
.hdchp button { display: flex; align-items: center; gap: 9px; width: 100%; font: inherit;
  font-size: 13.5px; color: var(--ink2); background: none; border: 0; cursor: pointer;
  padding: 8px 10px; border-radius: 10px; text-align: left; }
.hdchp button:hover { background: var(--panel); color: var(--deer-d); }
.hdchp button.on { background: var(--cream); color: var(--deer-d); font-weight: 700; }
.hdchp button .lg { width: 22px; height: 22px; flex: none; display: grid; place-items: center; }
.hdchp button .lg img { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; }
.hdchp button .soon { margin-left: auto; font-size: 10.5px; color: var(--sub); }
.hdq {
  border: 0; outline: 0; background: transparent; flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 15.5px; color: var(--ink); padding: 8px 6px;
  -webkit-appearance: none; appearance: none;
  /* 🔴 窄屏上占位符会被**硬切**（2026-08-17 巡检第 62 轮，375px 实测）：
     这一档输入框只有 124px，而占位符是轮播的热词
     （「当前热门「亚克力立牌」」这种），切出来是「当前热门「小卡」——
     **收尾的引号没了，看着像页面坏了**，而不是像「太长省略了」。
     ⚠️ `text-overflow: ellipsis` 对 `::placeholder` 是生效的（实测 Chrome：
        「当前热门「C…」）。这一条只改**截断的样子**，不改任何布局尺寸。 */
  text-overflow: ellipsis;
}
.hdq::placeholder { color: var(--sub); }
/* Safari 给 type=search 加的清除按钮和内边距要压掉，否则和圆角框对不齐 */
.hdq::-webkit-search-decoration,
.hdq::-webkit-search-cancel-button { -webkit-appearance: none; }
/* 「日文」：显式手动翻译入口，做成次要按钮，不跟主搜索按钮抢 */
.hdja {
  border: 1px solid var(--line); background: var(--cream); color: var(--deer);
  font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1;
  padding: 8px 14px; border-radius: var(--r-pill); cursor: pointer; flex: 0 0 auto;
  white-space: nowrap; margin-right: 6px; transition: background .18s, border-color .18s;
}
.hdja:hover { border-color: var(--deer-d); background: var(--cream); }
.hdja:disabled { opacity: .55; cursor: default; }
/* 「日文」= 中文自动翻日文的开关，按下去（.on）表示开着。
   搜索页原来在搜索框下面另挂一条常驻开关条，同一件事两个入口，已并到这里。
   ⚠️ 只有搜索页会给它加 .on —— 其他页面这个按钮仍是「翻译并跳去搜索」的一次性动作，
      那里没有可切换的状态，不该显示成开着。 */
.hdja.on { background: var(--deer); border-color: var(--deer); color: #fff; }
.hdja.on:hover { background: var(--deer-d); border-color: var(--deer-d); }
/* 关闭态压成灰底描边，和开启态的实心深色拉开距离 —— 只靠深浅差看不出开关。
   文案本身也写着「开 / 关」（见 search.html 的 renderJaBtn）。 */
.hdja[aria-pressed="false"] { background: #fff; border-color: var(--line-d); color: var(--sub); }
.hdja[aria-pressed="false"]:hover { border-color: var(--deer); color: var(--deer-d); background: #fff; }
.hdgo {
  border: 0; cursor: pointer; width: 40px; height: 40px; border-radius: 50%;
  background: var(--deer); color: #fff; font-size: 0; flex: 0 0 auto;
  display: grid; place-items: center; transition: background .18s;
}
.hdgo::before {
  content: ''; width: 18px; height: 18px; display: block;
  background: currentColor;
  /* 放大镜用 mask 画，避免 emoji 在不同系统里长得完全不一样 */
  -webkit-mask: var(--ico-search) center/contain no-repeat;
          mask: var(--ico-search) center/contain no-repeat;
}
.hdgo:hover { background: var(--deer-d); }
.hdgo:disabled { opacity: .6; cursor: default; }

/* 窄屏：搜索框独占第二行铺满（.nav 本身是 flex-wrap:wrap）。
   min-width:0 是必须的 —— 否则 input 的固有宽度撑着不缩，
   右边的「日文」和放大镜会被挤出容器。 */
@media (max-width: 760px) {
  .brand .deer { width: 32px; height: 32px; }
  .hdsearch { order: 2; width: 100%; flex: 1 0 100%; max-width: none; margin-left: 0; }
  .hdch { max-width: 108px; font-size: 13px; padding-left: 11px; margin-right: 6px; }
  .hdja { font-size: 12px; padding: 7px 9px; }
}

/* ══════════ 功能栏（站头第一层）══════════
   把「汇率 / 下载App / 购物指南 / 购物车 / 我的订单 / 账户」从主导航里挪出来。
   主导航只留"去哪儿逛"，功能栏放"我的东西" —— 对齐挖煤姬/乐淘一番的双层结构。 */
/* ⚠️ 墨色底（2026-08-07）。原来 var(--cream) 与下面 .site-head 的
   rgba(255,241,245,.92) 是两片不同的粉叠在一起，色差小到像渲染错误。
   全站 37 页共用这一条，六个链接与文案一个都没动。 */
.topbar{background:#2E2429;border-bottom:1px solid #2E2429;font-size:12.5px}
.topbar .inner{max-width:var(--wrap);margin:0 auto;padding:6px 24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.topbar .sp{flex:1}
/* 汇率条：模块库 A07 —— 日元为主价，人民币只作参考，必须带更新时间 */
/* 汇率条：说明文字浅灰，数字纯白 + 等宽（它是这一行唯一的数字，
   要能一眼扫到，且位数变化时不左右跳）。 */
.fxline{color:#C9BDC2;font-size:12px;cursor:help;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.fxline b,.fxline strong{color:#FFFFFF;font-weight:700}
.fxline.bad{color:var(--bad);font-weight:700}
/* 墨底上的六个链接：常态浅灰、hover 与当前页纯白。
   ⚠️ 不能沿用 var(--deer) —— 品牌粉在墨底上对比度不足，而且顶栏里唯一
      该跳出来的是购物车/消息角标，链接抢了它就没层次了。 */
/* PC 上这层壳不存在：链接照旧是 .inner 的 flex 子元素，布局一像素不动。 */
.topbar .tbnav{display:contents}
.topbar .tb{color:#C9BDC2;white-space:nowrap;padding:3px 2px;position:relative}
.topbar .tb:hover{color:#FFFFFF;text-decoration:none}
.topbar .tb[data-on="1"]{color:#FFFFFF;font-weight:700}
.topbar .countbadge{display:inline-block;min-width:16px;height:16px;line-height:16px;padding:0 4px;
  margin-left:4px;border-radius:6px;background:var(--deer);color:#fff;font-size:10.5px;
  font-weight:700;text-align:center;vertical-align:1px}
/* 🔴 手机上这条栏是账户区的**唯一入口**（站头只有首页/帮我买/搜索），
   而 2026-08-15 实测它是最差的一处：七项折成两行 + 汇率一行 = 111px，
   「个人中心」孤零零落在第三行，每一项高只有 **28px**（触控下限是 44）。
   改成一条可横滑的行：整栏 111 → 78px，每项 28 → 44px。 */
@media (max-width:760px){
  .topbar .inner{padding:6px 16px;gap:10px;font-size:12px}
  .fxline{width:100%;order:-1}
  .topbar .sp{display:none}
  .topbar .tbnav{display:flex;align-items:center;gap:10px;width:100%;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .topbar .tbnav::-webkit-scrollbar{display:none}
  .topbar .tbnav > *{flex:none}
  /* 22px 文字 + 上下 11px = 44。左右也给到 6px，「消息」两个字才够宽。 */
  .topbar .tb{padding:11px 6px}
}

/* 🔴 iOS Safari 的硬规则：**字号小于 16px 的输入框，一聚焦就把整页放大**，
   而且松手也不缩回去 —— 用户从此在一张放大的、能左右拖的页面上填表。
   站内输入框普遍是 13px（登录的手机号/验证码、帮我买的链接与描述都是），
   而那几处正是手机上最需要打字的地方。
   ⚠️ 这里必须 `!important`：13px 写在各页自己的 `<style>` 里且都是类选择器
      （`.lgin input` 之类），普通的元素选择器压不过它，
      而这是平台约束不是设计选择，不该逐页去改、逐页去漏。
   ⚠️ 只压文字输入类：`select` 走系统选择器不触发放大，
      checkbox / radio / 按钮型 input 没有文字。 */
@media (max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),
  textarea{font-size:16px!important}
}

/* ⚠️ [hidden] 修正 —— 给元素写了 display:inline-block / flex / absolute 后，
   HTML 的 hidden 属性（默认 display:none）会被覆盖，元素照样显示出来。
   实测后果：购物车角标空车时显示「0」、「回到顶部」在页面顶部就出现。
   任何写了 display 的元素都必须显式补这条。 */
.topbar .countbadge[hidden]{display:none!important}

/* 站内消息未读角标（#msgNum）曾经随 .navlinks 一起消失过一段时间 —— 承载它的
   导航项被删了，而 app.js 的 refreshMsgNum() 还在找它，全站未读数恒不显示。
   2026-08-03 已按当时留下的建议恢复：角标挂在顶部功能栏的「消息」上，
   复用 .topbar .cartnum 这套样式，id 仍是 #msgNum，所以 refreshMsgNum() 一个字没改。
   ⚠️ 未读数只能有这一个写入方，别再加第二个取数函数。 */

/* 顶部功能栏里的语言选择器。
   原来只有首页有（首页手写 header 时带的 .langsw），现在并入共享功能栏，
   这样首页和其他页的 header 才是同一份。 */
.topbar .langsel{border:1px solid rgba(255,255,255,.28);background:transparent;color:#C9BDC2;
  font:inherit;font-size:11.5px;border-radius:10px;padding:2px 6px;margin-left:10px;
  outline:0;cursor:pointer}
.topbar .langsel:hover{border-color:rgba(255,255,255,.55);color:#FFFFFF}

/* ══ 日文 / 中文分段切换 ═══════════════════════════════════════════
   商品详情与卖家主页共用**同一种**控件（2026-08-13 产品要求「所有翻译的地方
   保持一样的按钮体验」）。
   ⚠️ 放在 style.css 是因为原来 detail.html 与 seller.html **各存一份逐字相同
      的拷贝** —— 改一处忘一处就会重新分叉，而这正是产品这次要消除的问题。
   ⚠️ 这是一次**回退**：2026-08 早些时候详情页曾把它换成单个「翻译 / 看日文原文」
      动作按钮，理由是分段控件里可点的那半是灰的、被读成禁用。产品在
      2026-08-13 决定两处统一成分段控件。**不要再拿那条旧理由改回去。** */
.trbar { display: inline-flex; border: 1px solid var(--line);
  border-radius: var(--r-pill); overflow: hidden; background: var(--card); }
.trbtn { border: 0; background: transparent; color: var(--sub); padding: 5px 13px;
  font: inherit; font-size: 12px; cursor: pointer; }
.trbtn + .trbtn { border-left: 1px solid var(--line); }
.trbtn.on { background: var(--deer); color: #fff; font-weight: 700; }
.trbtn:not(.on):hover { color: var(--deer); }
.trbtn:disabled { opacity: .55; cursor: default; }

/* toast —— 全站通用反馈。必须放在 style.css：app.js 里所有页面都调 toast()，
   而 shop.css 只有一半页面引，样式放那儿等于另一半页面的提示全是隐形的。

   🔴 **2026-08-13 改到页面正中**（原来在右上角）。理由是右上角那一版有两个
   实际问题：① 它压在站头「联系我们 / 我的收藏」那排链接上，提示一出来那几个
   入口就点不到；② 用户的视线在他刚点的那颗按钮上（多在页面中部），右上角
   完全在视野之外 —— 于是「点了没反应」。正中是唯一不需要用户去找的位置。

   ⚠️ **仍然不锚 bottom**：长页的页脚与移动端浏览器工具栏会让它看起来像掉出页面。
   ⚠️ stack 是 fixed 视口层，不参与正文布局。`pointer-events:none` 让它不挡住
      下面的内容 —— 正中位置如果吃掉点击，用户就点不到被盖住的按钮了。 */
.ylt-toast-stack { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 1100; width: min(420px, calc(100vw - 32px)); display: grid; gap: 10px;
  justify-items: center; pointer-events: none; }
.ylt-toast { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) 22px;
  align-items: center; gap: 10px; min-height: 52px; padding: 14px 14px 14px 16px;
  border: 1px solid var(--line-d); border-left: 4px solid var(--info); border-radius: var(--r-lg);
  background: rgba(255,255,255,.98); color: var(--ink2);
  font-size: 13.5px; line-height: 1.55; text-align: left; opacity: 0;
  /* 从正中略微放大出现。⚠️ 位移写在 stack 的 translate 上，这里只做 scale，
     两处都写 transform 会互相覆盖（元素只有一个 transform）。 */
  transform: scale(.96); transition: opacity .14s ease, transform .14s ease;
  pointer-events: auto; overflow: hidden; max-width: 100%; }
.ylt-toast.show { opacity: 1; transform: none; }
.ylt-toast.leaving { opacity: 0; transform: scale(.98); }
.ylt-toast.ok { border-left-color: var(--ok); }
.ylt-toast.warn { border-left-color: var(--warn); }
.ylt-toast.err { border-left-color: var(--bad); }
.ylt-toast-icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; line-height: 1; background: var(--info-bg); color: var(--info); }
.ylt-toast.ok .ylt-toast-icon { background: var(--ok-bg); color: var(--ok); }
.ylt-toast.warn .ylt-toast-icon { background: var(--warn-bg); color: #8A5A16; }
.ylt-toast.err .ylt-toast-icon { background: var(--bad-bg); color: var(--bad); }
.ylt-toast-text { min-width: 0; overflow-wrap: anywhere; }
.ylt-toast-close { width: 22px; height: 22px; border: 0; border-radius: 50%; padding: 0;
  background: transparent; color: var(--sub); font: inherit; font-size: 18px; line-height: 20px;
  cursor: pointer; }
.ylt-toast-close:hover, .ylt-toast-close:focus-visible { background: var(--panel); color: var(--ink); outline: 0; }
@media (max-width: 560px) {
  .ylt-toast-stack { width: min(420px, calc(100vw - 20px)); gap: 8px; }
  .ylt-toast { min-height: 48px; padding: 12px 12px 12px 14px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .ylt-toast { transition: none; } }

/* ══════════════════════════════════════════════════════════════
   商品详情标准化区块 —— detail.html（实时渠道）与 product.html（SNK 目录）共用。
   两个页面都引 style.css，样式只放这一份；区块顺序由 app.js 的 pdLayout() 决定。
   ⚠️ 只用 :root 里已有的变量配色（--deer/--deer2/--cream/--ink/--sub/--line/--card/--blush），
      不引入新颜色 —— 状态差异靠文字 + 字重 + 边框表达，不靠新色相。
   ══════════════════════════════════════════════════════════════ */
.pd-wrap { max-width: var(--wrap); margin: 0 auto; padding: 18px 24px 56px; }
.pd-grid { display: grid; grid-template-columns: minmax(0,440px) minmax(0,1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .pd-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ① 图片 */
.pd-media { position: sticky; top: 96px; }
@media (max-width: 860px) { .pd-media { position: static; } }
.pd-fig { aspect-ratio: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; position: relative; }
.pd-fig img { width: 100%; height: 100%; object-fit: contain; }
.pd-noimg { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px;
  text-align: center; color: var(--sub); font-size: 12.5px; line-height: 1.9; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.pd-thumbs img { width: 62px; height: 62px; flex: none; object-fit: cover; border-radius: 10px;
  border: 2px solid var(--line); cursor: pointer; }
.pd-thumbs img.on { border-color: var(--deer); }
/* ⚠️ .pd-thumbnote（「只有 1 张图」的说明）2026-08-13 三处全删，样式随之退役。
   别再加回来：拿不到的信息整行不渲染，不写讲我们自己缺什么的话。 */
/* 主图可点开大图：二手商品的成色细节在卡片尺寸下根本看不清。 */
.pd-zoomable { cursor: zoom-in; }
.pd-zoomhint { position: absolute; right: 10px; bottom: 10px; pointer-events: none;
  background: rgba(0,0,0,.52); color: #fff; font-size: 11.5px; border-radius: 999px;
  padding: 3px 10px; opacity: 0; transition: opacity .15s; }
.pd-fig:hover .pd-zoomhint { opacity: 1; }

/* 区块骨架 */
.pd-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pd-sec { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.pd-h { font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .6px; margin: 0;
  padding-bottom: 7px; border-bottom: 1px solid var(--line); }

/* 标准属性行 —— 缺失时走 .pd-na 显示原因，永远不留空行 */
.pd-row { display: flex; gap: 12px; font-size: 13px; align-items: flex-start; }
.pd-row .pd-k { flex: none; width: 88px; color: var(--sub); line-height: 1.75; }
.pd-row .pd-v { flex: 1; min-width: 0; color: var(--ink); line-height: 1.75; word-break: break-word; }
.pd-row .pd-v i { display: block; font-style: normal; font-size: 11.5px; color: var(--sub); line-height: 1.7; }
.pd-vlink { color: var(--deer); text-decoration: underline; text-underline-offset: 3px; }
.pd-vlink:hover { color: var(--deer); }
.pd-copy { margin-left: 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--sub); padding: 2px 9px; font: inherit; font-size: 11px; cursor: pointer; }
.pd-copy:hover { border-color: var(--deer); color: var(--deer); }
.pd-na { color: var(--sub); font-size: 12px; font-style: normal; }

/* ② 商品身份 */
.pd-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-tag { font-size: 11.5px; font-weight: 500; border-radius: 10px; padding: 4px 11px;
  letter-spacing: .3px; background: var(--card); color: var(--sub); border: 1px solid var(--line); }
/* 商品类型是「信息」不是「行动点」，占用品牌色会稀释真正的 CTA。 */
.pd-tag.type { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.pd-tag.ch { background: transparent; color: var(--sub); border-color: transparent; padding-inline: 2px;
  font-weight: 600; cursor: default; user-select: text; }
.pd-tag.sold { background: var(--card); color: var(--deer); border-color: var(--deer2); font-weight: 700; }
.pd-headtools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pd-headfav { border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
  padding: 5px 13px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px; }
.pd-headfav:hover { border-color: var(--deer); color: var(--deer); }
/* on 态：淡品牌色底 + 品牌色边。⚠️ 原来底色用的是 --cream（rgb(247,242,244)，
   几乎就是白的），两态只差一个边框颜色，在角落里的小按钮上根本分辨不出。
   真正的对比交给里面那颗实心 ♥（见下面的 .favh）。 */
.pd-headfav.on { border-color: var(--deer); color: var(--deer-d);
  background: rgba(176, 64, 95, .09); }
@media (max-width: 560px) {
  .pd-headtools { flex: 1 0 100%; justify-content: flex-end; margin-left: 0; }
}
h1.pd-name { font-size: 21px; line-height: 1.45; margin: 2px 0 6px; font-weight: 700;
  letter-spacing: -.2px; }

/* ③ 价格 */
.pd-pbox { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 15px 18px; display: flex; flex-direction: column; gap: 8px; }
.pd-pbox-inline { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 10px 16px; }
.pd-pbox-inline .pd-note { flex-basis: 100%; }
.pd-prow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
/* 🔴 34px 粉色大字是电商促销的写法。用户在这里要交几千上万日元的跨境预付款，
   金额该有的气质是「这是一笔账」。30:20 与人民币价形成层级，而不是 34:18。 */
.pd-pmain { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.1;
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums; }
.pd-pmain em { font-style: normal; font-size: 13px; font-weight: 500; color: var(--sub); margin-left: 3px; }
/* ⚠️ 人民币价原来是 13.5px 灰字，是全页最弱的一行 —— 而它才是用户
   真正拿来做决定的数字（日元价对中文买家是参考量）。升为并列主角：
   字号 13.5 → 18、颜色从 --sub 提到 --ink，并给一条竖线把两者分开，
   免得读成「1300 日元 57.94」这种一串数字。 */
/* 人民币才是中文买家真正会算的数，不该被压成免责小字。 */
.pd-palt { font-size: 20px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 5px; }
.pd-palt::before { content: ''; width: 1px; height: 15px; background: var(--line-d);
  margin-right: 11px; align-self: center; }
.pd-palt i { font-style: normal; font-size: 12px; font-weight: 500; color: var(--sub); }
@media (max-width: 560px) { .pd-palt::before { display: none; } }
.pd-note { font-size: 11.5px; color: var(--sub); line-height: 1.8; }
/* 专项商品「为什么不能买」。⚠️ 比普通 note 重一档但**不用红色报错样式**：
   这不是出错，是这件商品的属性，红框会让用户以为页面坏了。 */
.pd-note-block {
  font-size: 12.5px; color: var(--ink); background: var(--panel);
  border-left: 3px solid var(--deer); border-radius: 0 8px 8px 0;
  padding: 9px 12px; margin-top: 2px;
}
.pd-note strong { color: var(--ink); }

/* ④ 拍卖信息 */
.pd-tipbox { background: var(--cream); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 14px; font-size: 12.5px; line-height: 1.75; color: var(--ink); }

/* ⑤ 尺码 / 增值服务：页面上只有一行触发器，格子渲染在弹层里（见 ylSheet）。
   多属性一旦平铺，标准排版就被撑没了 —— 鞋类几十个码能顶掉一整屏。 */
.pd-pick { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; font-size: 13.5px;
  color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 10px 13px; cursor: pointer; text-align: left; }
.pd-pick:hover { border-color: var(--deer); }
.pd-pick.on { border-color: var(--deer); background: var(--cream); }
.pd-pick > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-pick > em { font-style: normal; font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.pd-pick.on > em { color: var(--deer); font-weight: 700; }
/* 弹层里的增值服务条目 */
.pd-optline { display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--line);
  border-radius: 10px; padding: 12px 13px; cursor: pointer; margin-bottom: 9px; }
.pd-optline:hover { border-color: var(--deer); }
.pd-optline input { width: 17px; height: 17px; accent-color: var(--deer); flex: none; margin-top: 1px; }
.pd-optline b { display: block; font-size: 13.5px; }
.pd-optline small { display: block; font-size: 11.5px; color: var(--sub); line-height: 1.65; margin-top: 3px; }
.pd-sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-size { border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 12px;
  cursor: pointer; font: inherit; font-size: 13px; color: var(--ink); text-align: center;
  line-height: 1.35; min-width: 82px; }
.pd-size b { display: block; font-weight: 700; }
.pd-size small { display: block; font-size: 10.5px; color: var(--sub); font-variant-numeric: tabular-nums; }
.pd-size:hover:not(:disabled) { border-color: var(--deer); }
.pd-size.on { border-color: var(--deer); background: var(--cream); }
.pd-size.on b { color: var(--deer); }
.pd-size:disabled { opacity: .42; cursor: not-allowed; text-decoration: line-through; }

/* ⑧ 详情说明卡片 */
.pd-tip { border-radius: 10px; padding: 11px 14px; font-size: 12.5px; line-height: 1.75;
  display: flex; gap: 9px; background: var(--cream); color: var(--ink); border: 1px solid var(--line); }
.pd-tip span { flex: none; }
.pd-tip a { color: var(--deer); font-weight: 700; }

/* 配送 / 取消 / 禁运 / 尺码 / 品相：每个详情入口都固定展示，避免规则散落在页脚。 */
.pd-rulegrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.pd-rulegrid > a, .pd-rulegrid > div { display: flex; flex-direction: column; gap: 4px;
  min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); }
.pd-rulegrid > a:hover { border-color: var(--deer); text-decoration: none; }
.pd-rulegrid b { font-size: 12.5px; }
.pd-rulegrid span { color: var(--sub); font-size: 11.5px; line-height: 1.7; }
.pd-rulegrid i { color: var(--deer); font-size: 11.5px; font-style: normal; }
@media (max-width: 560px) { .pd-rulegrid { grid-template-columns: 1fr; } }

/* ⑨ 购买区 */
.pd-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pd-acts button { width: 100%; min-width: 0; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  font-size: 14.5px; border-radius: 14px; padding: 13px 12px; text-align: center; white-space: nowrap; }

/* ⑩ 商品描述。描述是全页最长的日文块，顶部那份语言切换早滚出屏幕了，
   所以标题旁再放一份（两份共用同一个状态）。 */
.pd-descsec { margin-top: 30px; }
.pd-dhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-dhead .pd-h { margin: 0; }
.pd-dhead > .trbar { margin-left: auto; }
/* 译文覆盖率说明：翻不动就明说，不让「中文」亮着却原样显示日文 */
.pd-trnote { background: #FFF3E0; border: 1px solid #F3DFC0; border-radius: 10px;
  padding: 9px 13px; font-size: 12px; line-height: 1.75; color: #8A5A12; }
.pd-trnote a { color: #8A5A12; text-decoration: underline; }
.pd-descbody { background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; font-size: 13px; line-height: 1.9; color: var(--ink);
  white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow-y: auto; }
.pd-descbody.pd-na { white-space: normal; color: var(--sub); }
/* 代购流程条（两页共用，由 app.js 的 pdFlowHtml() 输出） */
.pd-flow { margin-top: 34px; }
.pd-flowh { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pd-flowh .pd-h { border-bottom: 0; padding-bottom: 0; }
.pd-flowh a { font-size: 12.5px; color: var(--deer); margin-left: auto; }
.pd-steps { display: flex; align-items: stretch; gap: 0; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 8px; overflow-x: auto; }
.pd-st { flex: 1 1 0; min-width: 128px; padding: 0 12px; text-align: center; }
.pd-st .pd-ic { width: 34px; height: 34px; margin: 0 auto 8px; display: grid; place-items: center;
  background: var(--cream); border-radius: 11px; color: var(--deer); }
.pd-st .pd-ic svg { width: 19px; height: 19px; display: block; }
.pd-st b { display: block; font-size: 13px; margin-bottom: 4px; }
.pd-st small { display: block; font-size: 11px; color: var(--sub); line-height: 1.65; }
.pd-st .pd-pay { display: inline-block; margin-top: 5px; font-size: 10.5px; font-weight: 700;
  background: var(--cream); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; color: var(--deer); }
.pd-st .pd-opt { display: inline-block; margin-top: 5px; font-size: 10.5px;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; color: var(--sub); }
.pd-ar { flex: none; width: 16px; display: grid; place-items: center; color: var(--deer2);
  font-size: 15px; padding-top: 8px; }
@media (max-width: 860px) {
  .pd-steps { padding: 14px 4px; }
  .pd-st { min-width: 116px; padding: 0 6px; }
  .pd-ar { width: 10px; }
}

/* 骨架 / 空状态（两页共用） */
/* ⚠️ 自带 keyframes：原来的 `pulse` 只定义在 channels.css 里，而 product.html
   不引 channels.css —— 共用骨架就不能依赖只有一半页面才有的动画。 */
@keyframes pd-pulse { 0%, 100% { opacity: .5 } 50% { opacity: .9 } }
.pd-skel { height: 380px; border-radius: 14px; background: var(--card); border: 1px solid var(--line);
  animation: pd-pulse 1.4s ease-in-out infinite; }
.pd-state { max-width: 520px; margin: 60px auto; text-align: center; }
.pd-state .mi { font-size: 48px; margin-bottom: 12px; }
.pd-state h3 { font-size: 18px; margin-bottom: 8px; }
.pd-state p { font-size: 13.5px; color: var(--sub); line-height: 1.8; }
.pd-state a { display: inline-block; margin-top: 16px; background: var(--deer); color: #fff;
  font-weight: 700; padding: 11px 26px; border-radius: 22px; font-size: 14px; }
.pd-state a:hover { text-decoration: none; background: var(--deer-d); }

/* ==================================================================
   通用弹层 ylSheet（app.js）—— 尺码、增值服务、确认与阻断统一收在这里。
   桌面居中卡片，窄屏从底部升起（拇指够得到）。
   ================================================================== */
.ysheet { position: fixed; inset: 0; z-index: 900; display: flex;
  align-items: center; justify-content: center; padding: max(24px, env(safe-area-inset-top, 0px))
  max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px))
  max(24px, env(safe-area-inset-left, 0px)); }
.ysheet-mask { position: absolute; inset: 0; background: rgba(40,26,33,.46); backdrop-filter: blur(2px); }
.ysheet-box { position: relative; width: min(540px, 100%); max-height: min(720px, calc(100vh - 48px));
  max-height: min(720px, calc(100dvh - 48px)); display: flex;
  flex-direction: column; background: #fff; border: 1px solid rgba(230,223,226,.92); border-radius: 16px; overflow: hidden;
  animation: ysheet-in .16s ease-out; }
@keyframes ysheet-in { from { opacity: 0; transform: translateY(10px) scale(.99) } to { opacity: 1; transform: none } }
/* 弹窗内进一层之后的返回条（sheetPush）。
   ⚠️ 跟着内容滚，不做成 sticky —— 贴在顶上会被读成站头的一部分。
   ⚠️ 做成文字链不做成按钮：它不是这一屏要用户做的事，只是回头路。 */
.ysheet-back { appearance: none; border: 0; background: none; padding: 0 0 12px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--sub); display: block; }
.ysheet-back:hover { color: var(--deer-d); }

.ysheet-hd { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 15px 18px;
  border-bottom: 1px solid var(--line); flex: none; }
.ysheet-hd b { font-size: 15px; letter-spacing: .1px; }
.ysheet-x { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
  font: inherit; font-size: 17px; color: var(--sub); cursor: pointer; line-height: 1; padding: 0; }
.ysheet-x:hover, .ysheet-x:focus-visible { background: var(--panel); color: var(--ink); outline: 0; }
.ysheet-bd { padding: 18px; overflow-y: auto; overscroll-behavior: contain; }
.ysheet-lg .ysheet-box { width: min(860px, 100%); max-height: min(86vh, calc(100vh - 48px)); }
/* ⚠️ 宽档还要给**高度下限**：券只有两三张时盒子会缩成窄窄一条，
   和「弹窗」这个形态对不上，也让人以为只有这么点内容。
   给正文一个 min-height，不够就留白，够了正常滚。 */
.ysheet-lg .ysheet-bd { min-height: min(48vh, 420px); }
.ysheet-ft { padding: 12px 18px; border-top: 1px solid var(--line); flex: none; background: #fff; }
/* ── 日本段物流轨迹（openJpTrack 的弹窗正文，订单列表与详情共用） ── */
.jpt-load, .jpt-empty { padding: 22px 4px; text-align: center; color: var(--ink2); }
.jpt-empty b { display: block; font-size: 15px; color: var(--ink); margin-bottom: 6px; }
.jpt-empty p { font-size: 13px; line-height: 1.75; margin: 0; }
.jpt-no { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.jpt-no .k { font-size: 12px; color: var(--sub); }
.jpt-no .v { margin-top: 4px; font-size: 14px; color: var(--ink); }
.jpt-no .v.mono { font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: .2px; }
.jpt-acts { display: flex; gap: 8px; margin-top: 10px; }
.jpt-acts .ybtn { font-size: 12.5px; padding: 6px 12px; }
.jpt-list { list-style: none; margin: 0; padding: 0; }
.jpt-node { display: flex; gap: 12px; }
.jpt-node:last-child .jpt-line { display: none; }
.jpt-rail { flex: none; display: flex; flex-direction: column; align-items: center; width: 10px; }
.jpt-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--hair); flex: none; }
.jpt-line { width: 1px; flex: 1 1 auto; background: var(--line); margin: 3px 0; }
/* 「当前节点」原来靠一圈 3px 的光晕（box-shadow）区分；全站去阴影之后改成
   实心圆点 + 同色描边环，配合下面那行 `.jpt-node.now .jpt-tx` 的加粗，
   与 `.todo` 的空心圈仍然一眼分得开。 */
.jpt-node.now .jpt-dot { background: var(--brand, #1f7a4d); outline: 3px solid rgba(31, 122, 77, .22); outline-offset: 0; }
.jpt-node.todo .jpt-dot { background: transparent; border: 1px solid var(--hair); }
.jpt-node > div { padding-bottom: 16px; min-width: 0; }
.jpt-tx { font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.jpt-node.now .jpt-tx { font-weight: 600; }
.jpt-at { margin-top: 3px; font-size: 12px; color: var(--sub); }
.jpt-note { border-top: 1px solid var(--line); padding-top: 11px; font-size: 12px; color: var(--ink3); }

.cs-sheet{text-align:center}
.cs-sheet img{width:180px;height:180px;object-fit:contain;border-radius:8px;display:inline-block}
.cs-sheet p{font-size:12.5px;color:var(--ink2);line-height:1.9;margin:12px 0 0}
.cs-sheet .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ── 站头「联系我们」的小程序码悬浮层 ────────────────────────────
   ⚠️ hover 与 click 两条路都能开（见 app.js 的 bindCsMenu）——
   手机上没有 hover，只做悬停就是桌面专属。 */
.tb-cs { position: relative; display: inline-block; }
.tb-cs > summary { list-style: none; cursor: pointer; }
.tb-cs > summary::-webkit-details-marker { display: none; }
.tb-cs-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 158px; padding: 12px; text-align: center; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; }
.tb-cs-pop img { width: 134px; height: 134px; display: block; object-fit: contain; border-radius: 6px; }
.tb-cs-pop b { display: block; font-size: 12.5px; color: var(--ink); margin-top: 8px; }
.tb-cs-pop small { display: block; font-size: 10.8px; color: var(--sub); line-height: 1.6; margin-top: 2px; }
.tb-cs-pop .na { font-size: 11.5px; color: var(--sub); line-height: 1.7; padding: 18px 4px; }

/* ── 图片占位：没加载出来时垫一个鹿头，而不是空白/破图 ────────────
   ⚠️ 用 `assets/logo/mascot.svg`（2026-08-13 全站统一形象）。
      原来用的是 `logo.svg` —— **那是另一只鹿**（粉色鹿头），而站头、页脚、
      头像用的都是棕色小鹿那一套。同一屏里两个不同的吉祥物，用户会以为
      其中一个是别家的。
   ⚠️ 原注释说「logo.svg 每页站头本来就要加载，走同一份缓存」——**这句已经
      不成立**：站头早就换成 app-icon.svg 了。现在改用 mascot.svg，它同样是
      站内到处都在用的那份（结果页、空态、加载标记），缓存复用的结论不变。
   ⚠️ 做成 background 而不是插一个 <img> 占位元素：
      ① 真图加载完直接盖在上面，不需要 JS 切换、也不会闪；
      ② 图片**加载失败**时鹿头仍然在（<img> 的 onerror 兜底要写 JS，还会漏）；
      ③ 不增加 DOM 节点，列表里几十张图不会变慢。
   ⚠️ 只给带 loading="lazy" 的商品图 —— 那正是「可能要等」的那一类。
      站头 logo、图标这些是同步小图，垫底反而闪一下。 */
img[loading="lazy"] {
  background: var(--panel) url(assets/logo/mascot.svg) center / 30% auto no-repeat;
}
/* 已经画好占位框的地方（自带底色/虚线框）不重复垫。 */
.pd-noimg img[loading="lazy"], .noimg img[loading="lazy"] { background: none; }

/* ── 加载态：鹿头跳动 ─────────────────────────────────────────────
   ⚠️ 只在两个地方用：区块首屏（ylBlockLoading）与跳页遮罩（ylNavLoading）。
   列表类首屏继续用骨架屏 —— 骨架预告了将出现什么，比转圈信息量大。 */
.ylt-load { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 56px 20px; }
.ylt-load-mk { width: 52px; height: 52px; animation: ylt-hop 1.05s ease-in-out infinite; }
.ylt-load p { font-size: 13px; color: var(--sub); margin: 0; }
@keyframes ylt-hop {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-11px) scale(1.04); }
  60%      { transform: translateY(0) scale(.97); }
}
@media (prefers-reduced-motion: reduce) { .ylt-load-mk { animation: none; opacity: .75; } }
/* 跳页遮罩：盖住整页，直到新页面把整个文档换掉。 */
.ylt-navload { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center;
  background: rgba(250, 247, 243, .92); backdrop-filter: blur(2px); }

/* 弹层打开时锁住背景滚动；app.js 会补滚动条宽度，正文不横向跳动。 */
body.ysheet-open { overflow: hidden; padding-right: var(--ylt-scrollbar-gap, 0px); }
@media (max-width: 560px) {
  .ysheet { align-items: flex-end; padding: 0; }
  .ysheet-box { width: 100%; max-height: 86vh;
    max-height: min(86dvh, calc(100dvh - env(safe-area-inset-top, 0px))); border-radius: 16px 16px 0 0; }
  .ysheet-hd { min-height: 56px; padding-inline: 16px; }
  /* 🔴 手机上这个 ✕ 常常是**唯一**的关闭方式（很多抽屉没有页脚按钮），
     30×30 够不着。撑到 44 并往右吃掉 7px 内边距，✕ 看上去还在原位。 */
  .ysheet-x { width: 44px; height: 44px; margin-right: -7px; }
  .ysheet-bd { padding: 16px; }
  .ysheet-ft { padding: 11px 16px max(11px, env(safe-area-inset-bottom, 0px)); }
  @keyframes ysheet-in { from { transform: translateY(100%) } to { transform: none } }
}
@media (prefers-reduced-motion: reduce) { .ysheet-box { animation: none; } }

/* 商品大图查看（pdZoom） */
.pdzoom { position: fixed; inset: 0; z-index: 210; background: rgba(20,12,16,.92);
  display: flex; align-items: center; justify-content: center; padding: 48px 16px; cursor: zoom-out; }
.pdzoom img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default;
  border-radius: 6px; }
.pdzoom-x { position: absolute; top: 14px; right: 16px; width: 38px; height: 38px; border: 0;
  border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 16px;
  cursor: pointer; line-height: 1; }
.pdzoom-x:hover { background: rgba(255,255,255,.28); }
.pdzoom-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 62px;
  border: 0; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; font-size: 30px;
  line-height: 1; cursor: pointer; }
.pdzoom-nav:hover { background: rgba(255,255,255,.28); }
.pdzoom-nav.prev { left: 14px; }
.pdzoom-nav.next { right: 14px; }
.pdzoom-n { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.85); font-size: 12.5px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .pdzoom { padding: 56px 8px; } .pdzoom-nav { width: 36px; height: 52px; font-size: 24px; } }

/* ==================================================================
   反馈三分法与四态的样式（配 app.js 的 confirmAsk / blockAsk / st*）
   ================================================================== */

/* 弹层里的通用按钮。药丸轨。 */
.ybtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 13.5px; font-weight: 700; border-radius: var(--r-pill);
  padding: 10px 22px; cursor: pointer; border: 1.5px solid transparent; white-space: nowrap; }
.ybtn.primary { background: var(--deer); color: #fff; }
.ybtn.primary:hover { background: var(--deer-d); text-decoration: none; }
/* 危险动作用危险色，不是品牌粉 —— 不可逆动作不能伪装成普通主操作 */
.ybtn.danger { background: var(--bad); color: #fff; }
.ybtn.danger:hover { filter: brightness(.94); }
.ybtn.ghost { background: #fff; color: var(--ink2); border-color: var(--line-d); }
.ybtn.ghost:hover { border-color: var(--deer); color: var(--ink); text-decoration: none; }
.ybtn:disabled { opacity: .5; cursor: not-allowed; }

.ysheet-desc { font-size: 13.5px; line-height: 1.85; color: var(--ink2); }
/* 「退出但不执行」在左，动作在右，永远这个顺序 */
.ysheet-acts { display: flex; gap: 10px; justify-content: flex-end; }
.ysheet-acts .ybtn { min-width: 96px; }
/* 阻断态：带感叹号图标 + 危险底，一眼区别于普通确认 */
.ysheet-block { display: flex; gap: 12px; align-items: flex-start;
  background: var(--bad-bg); border-radius: var(--r-lg); padding: 13px 15px;
  font-size: 13.5px; line-height: 1.85; color: var(--ink2); }
.ysheet-blockic { flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bad); color: #fff; font-weight: 700; font-size: 14px;
  display: grid; place-items: center; margin-top: 2px; }

/* ── 逐行增值服务的摘要药丸（购物车 + 确认订单共用）──
   摘要常驻（没选也显示「增值服务 未选」）：不显示这一行，用户根本不知道
   还能选这个 —— 那正是它原来只活在结算页的老问题。
   ⚠️ 两页必须用**同一份**定义。原来只写在 cart.html 的 <style> 里，
      确认订单页拿不到，那颗药丸就退化成一个方框 —— 同一个控件在前后脚
      两页长得不一样，用户会以为是两个东西。 */
.optrow { margin-top: 6px; }
.optsum { display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--line-d);
  background: transparent; border-radius: var(--r-pill); padding: 3px 11px; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--sub); }
.optsum:hover { border-color: var(--deer); color: var(--ink2); }
.optsum.on { border-style: solid; border-color: var(--deer); color: var(--deer); font-weight: 600; }
.optsum i { font-style: normal; font-size: 11px; line-height: 1; }

/* ── 三列价格的单元格（购物车 + 确认订单共用）──
   日元在上、人民币在下并用括号括起来（产品要求）。
   ⚠️ 汇率取不到时**不渲染括号那一行**，不显示（≈ 0 人民币）。
   ⚠️ 列名不在单元格里 —— 只在分组顶部的 .lhead 写一次；窄屏才由
      ::before 用 data-k 把标签补回来。 */
/* ⚠️ 居中，不是右对齐（2026-08-07）。列宽已经固定、表头与商品行也已经算出
   同样的宽度，但右对齐时「商品价」这类短标签的视觉重心明显偏离下面那串数字
   ——「日本境内运费」六个字比「0 日元」宽一倍，两者只有右边缘对齐，看着仍是歪的。
   居中让标签与数字共用同一条中轴线，这才是表头与值真正对上的写法。
   ⚠️ 一并去掉 .pcell b / i 的对齐依赖：它们是块级元素，继承 text-align 即可。 */
.pcell { text-align: center; font-variant-numeric: tabular-nums; min-width: 0; }
.pcell b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.pcell b em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--sub); margin-left: 3px; }
.pcell b s { font-size: 11px; font-weight: 500; color: var(--sub); margin-left: 6px; }
.pcell i { display: block; font-style: normal; font-size: 11px; color: var(--sub); white-space: nowrap; margin-top: 1px; }
/* 「包邮」写字不写 0 —— 0 看起来像取数失败 */
.pcell b.free { color: var(--ok); font-weight: 600; }
/* 真的算不出来时才用这个：弱化、且不摆成一个金额 */
.pcell b.na { font-size: 11.5px; font-weight: 400; color: var(--sub); }

/* ── 合计行（收起态常驻）+ 费用明细（默认折叠）──────────
   收起时只给「合计」这一个数字：它才是用户此刻要做决定的数。
   明细不是不给看，是不默认摊开 —— 摊开的六七行里有五行是 0 或恒定值。 */
.qsum{display:flex;align-items:flex-start;gap:12px;margin-top:12px}
.qsum-l{flex:1;min-width:0}
.qsum-l>span{display:block;font-size:12.5px;color:var(--ink3)}
.qsum-l>b{display:block;font-size:22px;line-height:1.3;font-variant-numeric:tabular-nums}
.qsum-l>i{display:block;font-style:normal;font-size:11.5px;color:var(--sub);
  font-variant-numeric:tabular-nums;margin-top:1px}
.feetgl{flex:none;align-self:center;border:1px solid var(--line-d);background:#fff;
  border-radius:var(--r-pill);padding:6px 12px;font:inherit;font-size:12px;color:var(--ink2);
  cursor:pointer;display:flex;align-items:center;gap:5px}
.feetgl:hover{border-color:var(--deer);color:var(--ink)}
.feetgl em{font-style:normal;font-size:10px;transition:transform .15s}
.feetgl[aria-expanded="true"] em{transform:rotate(180deg)}

.qtable{border:1px solid var(--grid);border-radius:var(--r-sm);margin-top:10px;overflow:hidden}
.qtable .qr{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;
  font-size:12.5px;border-bottom:1px solid var(--hair)}
.qtable .qr:last-child{border-bottom:0}
.qtable .qr .k{color:var(--ink3)}
/* 费用项下面那行灰字：说明这一项由哪几件 / 哪几项服务构成 */
.qtable .qr .k i{display:block;font-style:normal;font-size:11px;color:var(--sub);margin-top:2px}
.qtable .qr .v{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* 人民币参考值。⚠️ 取不到时调用处直接不渲染这个 <i>，绝不显示 0 */
.qtable .qr .v i{display:block;font-style:normal;font-weight:400;font-size:11px;color:var(--sub)}
.qtable .qr .v.free{color:var(--ok)}

/* ── 跨境代购风险提示（加购弹窗 + 提交订单前，同一份）──
   ⚠️ 用警示底而不是危险红：它不是「出错了」，是一条必须读到的交易条件。 */
/* 跨境风险告知。两段式（风险提示 / 购物提醒），每段一个标题 + 若干条。
   ⚠️ 段标题用 `.xbrisk > b`（直接子元素）而不是 `.xbrisk b` ——
      条目里的「易碎品」「无物流保障」也是 <b>，用后代选择器会把它们
      一起变成块级标题，每条都被劈成两行。 */
.xbrisk { background: var(--warn-bg); border-radius: var(--r-lg); padding: 12px 14px; }
.xbrisk > b { display: block; font-size: 13px; color: #8A5A16; margin-bottom: 6px; }
/* 第二段的标题要和上一段隔开，否则两段黏成一坨读不出层次 */
.xbrisk > b ~ b { margin-top: 12px; }
.xbrisk p { font-size: 12px; line-height: 1.85; color: var(--ink2); margin: 0; }
.xbrisk p + p { margin-top: 5px; }
/* 条目前缀（易碎品 / 无物流保障）：行内、加重，后面跟一个全角冒号的视觉间隔 */
.xbrisk p b { display: inline; font-size: inherit; color: #A4372C; margin: 0 4px 0 0; }
.xbrisk p b::after { content: '　'; }

/* ── 支付方式卡片 ──
   ⚠️ 确认订单页（选，写进 sessionStorage）与收银台（真正发起支付）共用这一套。
      原来只在 cashier.html 的 <style> 里，设计稿 03 给确认订单页也加了这块，
      于是收敛到这里 —— 前后脚两页的同一个控件长得不一样，用户会以为选错了地方。 */
.pmlist{display:flex;flex-direction:column;gap:10px}
.pm{display:flex;gap:12px;align-items:center;border:1px solid var(--line-d);
  border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;background:#fff}
.pm:hover:not(.off){border-color:var(--deer)}
.pm.on{border:1.5px solid var(--deer);background:var(--cream)}
.pm.off{cursor:not-allowed;border-color:var(--grid);background:var(--hair)}
.pm .ic{width:32px;height:32px;border-radius:var(--r-sm);font-size:13px;font-weight:700;
  display:grid;place-items:center;flex:none;background:var(--ok-bg);color:var(--ok)}
.pm .ic.ali{background:var(--panel);color:var(--deer-d)}
.pm .ic.bal{background:var(--grid);color:var(--sub)}
.pm .tx{flex:1;min-width:0}
.pm .tx b{font-size:13.5px;display:block}
.pm .tx small{font-size:11px;color:var(--sub);display:block;margin-top:2px}
.pm.off .tx b{color:var(--sub)}
.pm.off .tx small{color:var(--bad)}
.pm input{accent-color:var(--deer);flex:none}
/* 支付方式还没拉到时的占位。⚠️ 不画成灰色的假选项 —— 灰色方块看起来像
   「有两个渠道但当前禁用」，而事实是「还不知道有几个」。 */
.pmnone{font-size:12.5px;color:var(--sub);padding:14px 2px}

/* ── 加购确认弹层（设计稿 01）──
   排版顺序就是设计稿定的认知顺序：加了什么 → 要不要加服务 → 这次要付什么
   → 国际运费不在这里。顺序别调。 */
.ac-item { display: flex; gap: 12px; align-items: flex-start;
  background: var(--cream); border-radius: var(--r-lg); padding: 11px 12px; }
.ac-item .ph { flex: none; width: 56px; height: 56px; border-radius: var(--r-sm);
  overflow: hidden; background: var(--panel); }
.ac-item .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-item .bd { min-width: 0; flex: 1; }
.ac-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 4px; }
.ac-tags span { font-size: 10.5px; line-height: 1.7; padding: 0 6px; border-radius: var(--r-xs);
  background: var(--card); border: 1px solid var(--line); color: var(--ink2); }
.ac-nm { font-size: 12.5px; line-height: 1.5; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-pr { margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.ac-pr em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--sub); margin-left: 3px; }
.ac-pr i { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--sub); margin-left: 7px; }

/* 加购弹层里的跨境风险提示。⚠️ 孤品提示与「国际运费不在这里」两条
   已按产品要求移除，样式一并删掉，别留着当死代码。 */
.ac-risk { margin-top: 14px; }

.ac-h { margin: 16px 0 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
.ac-h small { font-weight: 500; font-size: 11px; color: var(--sub); margin-left: 7px; }
.ac-opt { display: block; border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: 10px 12px; cursor: pointer; }
.ac-opt + .ac-opt { margin-top: 8px; }
.ac-opt:hover { border-color: var(--deer); }
/* ⚠️ 选中态与结算页的 .cfm-opt 保持同一套（描边 --deer + 底 --panel）——
   同一个「增值服务」组件在两处长得不一样，用户会以为是两件事。
   ⚠️ 别拿 --blush 当粉色底：那个变量实际是浅蓝 var(--info-bg)，名字骗人。 */
.ac-opt.on { border-color: var(--deer); background: var(--panel); }
.ac-opt .top { display: flex; align-items: center; gap: 9px; }
.ac-opt input { width: 16px; height: 16px; accent-color: var(--deer); flex: none; }
.ac-opt .top b { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ac-opt .top em { margin-left: auto; font-style: normal; font-size: 12.5px; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums; }
/* ⚠️ 说明常驻，不是勾选后才出现（设计稿硬规则 ②）——
   它的作用是帮人**决定要不要勾**，藏在勾选后面就失去意义了。 */
.ac-opt .why { margin: 6px 0 0 25px; font-size: 11px; line-height: 1.7; color: var(--ink2); }
.ac-opt .why b { color: #A4372C; font-weight: 600; }

.ac-fees { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 11px; }
.ac-fee { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px;
  line-height: 2.05; color: var(--ink2); }
.ac-fee span { flex: 1; }
.ac-fee b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.ac-fee b.free { color: var(--ok); font-weight: 500; }
/* 「继续逛」是主动作之一，不是「取消」（设计稿硬规则 ③）—— 两颗按钮等宽 */
.ac-acts { display: flex; gap: 10px; }
.ac-acts .ybtn { flex: 1; min-width: 0; }

/* ── 四态 ── */
.st-load { display: flex; flex-direction: column; gap: 10px; }

/* 加载态的品牌标：会呼吸的鹿角标 + 一句话。
   几个没有内容的灰盒子和白屏在用户眼里是一回事 —— 它在动，才说明没坏。 */
.st-brand { display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 6px 0 2px; color: var(--sub); font-size: 12.5px; letter-spacing: .02em; }
.st-brand img { animation: st-breathe 1.5s ease-in-out infinite; }
@keyframes st-breathe {
  0%,100% { opacity: .45; transform: scale(.94) }
  50%     { opacity: 1;   transform: scale(1) }
}

.st-skel { border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line);
  /* 从整块闪烁改成一道扫光：整块变淡变浓像是"页面在闪"，
     扫光有方向，读起来是"内容正在填进来"。 */
  background-image: linear-gradient(100deg,
    transparent 30%, rgba(46,36,41,.045) 46%, rgba(46,36,41,.045) 54%, transparent 70%);
  background-size: 220% 100%;
  animation: st-sweep 1.5s linear infinite; }
@keyframes st-sweep { from { background-position: 120% 0 } to { background-position: -120% 0 } }

/* 用户开了「减少动态效果」就只留静态骨架，不做任何动画。 */
@media (prefers-reduced-motion: reduce) {
  .st-brand img, .st-skel { animation: none; }
  .st-brand img { opacity: .8; }
}

.st-box { text-align: center; padding: 42px 24px; background: var(--card);
  border: 1px dashed var(--line); border-radius: var(--r-2xl); }
.st-box .st-ic { font-size: 34px; line-height: 1; margin-bottom: 10px; }
/* 空态用吉祥物 svg 时，图本身带尺寸；这里只负责居中 */
.st-box .st-ic img { display: block; margin: 0 auto; }
.st-box h3 { font-size: 15.5px; margin-bottom: 6px; color: var(--ink); }
.st-box p { font-size: 13px; color: var(--ink3); line-height: 1.85; max-width: 460px; margin: 0 auto; }
.st-box .st-act { margin-top: 16px; }
/* 多个出路时并排；单个居中。stEmpty 的 actions 数组走这里。 */
.st-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.st-acts .st-act { margin-top: 0; }
/* 多来源失败时逐条列出各自原因 —— 挤成一行「A、B 失败」等于把最有用的信息扔了 */
.st-errs { list-style: none; margin: 8px auto 0; max-width: 460px; text-align: left;
  font-size: 12.5px; line-height: 1.85; color: var(--ink3); }
.st-errs li { padding: 5px 0; border-top: 1px solid var(--line-d); }
.st-errs li:first-child { border-top: 0; }
.st-errs b { color: var(--ink); margin-right: 6px; }

/* 错误态用危险色的圆点图标，和空态区分开：
   「没有数据」和「没能加载」是两件事，长得一样会误导排查方向 */
.st-err { border-style: solid; border-color: var(--line-d); background: var(--bad-bg); }
.st-err .st-ic { width: 34px; height: 34px; margin: 0 auto 10px; border-radius: 50%;
  background: var(--bad); color: #fff; font-size: 20px; display: grid; place-items: center; }

/* 降级条：贴在数据区上方，标明数据龄 */
.st-stale { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  background: var(--warn-bg); color: var(--warn); border-radius: var(--r-md);
  padding: 7px 12px; font-size: 12px; line-height: 1.7; }
.st-stale.expired { background: var(--bad-bg); color: var(--bad); }
.st-stale .st-dot { font-size: 9px; }
.st-refresh { margin-left: auto; border: 0; background: transparent; font: inherit;
  font-size: 12px; font-weight: 700; color: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }

/* 部分来源失败：整页照常，只在结果区顶部说明 */
.st-partial { background: var(--warn-bg); color: var(--warn); border-radius: var(--r-md);
  padding: 8px 12px; font-size: 12px; line-height: 1.7; margin-bottom: 12px; }
.st-partial b { font-weight: 700; }

/* 强提醒条：常驻页面顶部，直到用户处理完才消失。
   与 toast 的分工：toast 是「已经发生了」，这条是「你还欠一件事」。 */
.st-nudge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--warn-bg); border: 1px solid #F3DFC0; border-radius: var(--r-lg);
  padding: 10px 14px; font-size: 13px; color: var(--warn); margin-bottom: 14px; }
.st-nudge .badge { background: var(--warn); color: #fff; }
.st-nudge a { margin-left: auto; font-weight: 700; color: var(--warn); }

/* 一层主导航（站头 logo + 搜索框右侧）。
   设计稿规矩：导航只有一层，分类与来源都是搜索参数，不做独立页面模板。
   所以这里只有四项，没有下拉、没有二级菜单。 */
/* 导航紧贴 logo 右侧 14px，不再挂在整条最右端 ——
   原来「首页」正好挨着账户区，读起来像账户菜单的一项。 */
.hdnav { display: flex; align-items: center; gap: 2px; flex: none; margin-left: 14px; }
.hdnav a { font-size: 15px; font-weight: 700; color: var(--ink2);
  padding: 9px 15px; border-radius: var(--r-pill); white-space: nowrap; }
.hdnav a:hover { background: #fff; color: var(--deer-d); text-decoration: none; }
.hdnav a[data-on] { background: var(--deer); color: #fff; }
/* 窄屏：logo + 导航一行，搜索框独占第二行（它最重要，不该被挤成一小截）。 */
@media (max-width: 900px) {
  .nav { flex-wrap: wrap; }
  .hdnav { margin-left: 8px; }
  .hdsearch { order: 9; width: 100%; flex-basis: 100%; margin-left: 0; margin-top: 8px; }
}

/* ── 站头搜索的聚焦下拉 ──
   贴着搜索框下沿展开。两组都空时 JS 直接不展开，不画空面板。 */
.hdsug {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 70;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl);
  padding: 14px 18px 16px; max-height: 62vh; overflow-y: auto;
}
.hdsug-g + .hdsug-g { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--hair); }
.hdsug-t { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--sub); margin-bottom: 9px; }
/* 后端回的是内置种子词而不是真实热度时，如实标出来 */
.hdsug-t em { font-style: normal; font-size: 11px; color: var(--warn);
  background: var(--warn-bg); border-radius: var(--r-pill); padding: 1px 8px; }
.hdsug-clr { margin-left: auto; border: 0; background: transparent; font: inherit;
  font-size: 12px; color: var(--sub); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; }
.hdsug-clr:hover { color: var(--deer-d); }
.hdsug-ws { display: flex; flex-wrap: wrap; gap: 8px; }
/* 热搜词固定**最多两排**（2026-08-13 产品要求）。
   后端默认下发 18 个，宽屏能排成 11+7，但窄一点就会变成三四排 ——
   一个建议列表把搜索框下面撑掉半屏，反而挡住用户真正要看的东西。
   ⚠️ 41 是 chip 实测高度（padding 7+7 + 行高 27），8 是 gap。写成
      `calc(41px * 2 + 8px)` 而不是直接写 90，是为了改 chip 内边距时
      这里跟着对 —— 写死 90 的话，chip 一变高就会露出半排被切掉的词。
   ⚠️ **只对热搜词生效**，历史词不能切：那是用户自己的东西，藏起来等于丢了。 */
.hdsug-g:last-child .hdsug-ws { max-height: calc(41px * 2 + 8px); overflow: hidden; }
/* JS 掰断两排用的空元素（见 app.js 的 balanceHot）。
   ⚠️ 必须 `height:0`：给它高度会在两排之间多出一条空行。
   ⚠️ 这条只是**把断点从"填满才换"挪到"两排一样长"**，上面那条 max-height
      仍然留着兜底 —— JS 没跑到（比如量不到宽度）时还是两排，不会撑掉半屏。 */
.hdsug-br { flex-basis: 100%; height: 0; margin: 0; }
/* balanceHot 跑成功后解除上面那条兜底裁剪。
   ⚠️ 断行元素**自己也占一个 gap**，两排实高是 41+8+0+8+41=98px，
      而那条 max-height 只算了一个 gap（90px）—— 不解除的话第二排底部会被
      切掉 8px，看着像被下面的内容压住了。 */
/* ⚠️ 选择器必须**带上 `.hdsug-g:last-child`**：上面那条是 (0,3,0)（`:last-child`
      也算特异性），只写 `.hdsug-ws.balanced` 是 (0,2,0)，**会输**。
      输了的表现不是报错，是第二排底部继续被切掉 8px。 */
.hdsug-g:last-child .hdsug-ws.balanced { max-height: none; }
/* 历史词 + 单条删除。⚠️ 删除是与词**并列**的按钮，不是嵌在词里面 ——
   button 套 button 是非法 HTML，浏览器会把内层拆出去，点谁都不灵。 */
.hdsug-h { display: inline-flex; align-items: stretch; }
.hdsug-h .hdsug-w { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; }
.hdsug-x { border: 1px solid var(--line); border-left: 0; border-radius: 0 999px 999px 0;
  background: var(--panel); color: var(--sub); font: inherit; font-size: 10px; line-height: 1;
  padding: 0 9px 0 6px; cursor: pointer; }
.hdsug-x:hover { background: var(--bad-bg, #fdf1ec); color: var(--bad); border-color: var(--bad); }
.hdsug-h:hover .hdsug-w { border-color: var(--deer2); }
.hdsug-w { border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font: inherit; font-size: 13.5px; padding: 7px 15px; border-radius: var(--r-pill);
  cursor: pointer; white-space: nowrap; }
.hdsug-w:hover { border-color: var(--deer); background: var(--cream); color: var(--deer-d); }

/* ==================================================================
   三栏商详 pd3-* —— detail.html（实时渠道）与 product.html（SNK 目录）共用
   ------------------------------------------------------------------
   左图库 400 / 中主信息与交易面板 1fr / 右费用与服务 296。
   设计稿的硬要求是「四类商品同骨架，只换中栏」：新品、商家、二手、拍卖
   左右两栏一字不改，只有中间的交易面板不同。

   ⚠️ 这套样式原来在 detail.html 与 product.html 的 <style> 里各存了一份
      **逐字相同**的拷贝（约 100 行）。两份拷贝迟早会漂移 —— 改了一处忘了
      另一处，两个详情页就长得不一样了，而「长得一样」正是这次改造的目的。
      比对确认 product 的规则集是 detail 的真子集、零冲突后合并到这里。
   ================================================================== */
.pd3 { display: grid; grid-template-columns: minmax(0,400px) minmax(0,1fr);
  gap: 26px; align-items: start; }
.pd3-c { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* 中屏：图库收窄，主信息保持左右布局。 */
@media (max-width: 1200px) {
  .pd3 { grid-template-columns: minmax(0,340px) minmax(0,1fr); }
}
@media (max-width: 820px) {
  .pd3 { grid-template-columns: minmax(0,1fr); }
  /* 🔴 竖排之后**顺序要跟着变**：卖家条在 PC 上是商品上方一条 40px 的窄带，
     到 375px 会摊成 135px 的卡片，于是手机上第一屏是「这个卖家是谁」，
     商品标题和价格被顶到折线以下（实测标题 y=822，视口 812）。
     用户点开一个商品链接，第一眼要看的是商品。
     ⚠️ 只给 .pd3 一个负 order 就够：其余块（卖家条、推荐、流程条）留在 0,
     按 DOM 顺序排在它后面 —— 给卖家条设正 order 反而会把它甩到推荐后面。
     ⚠️ `:has(> …)` 是为了同时覆盖 detail 的 #root 与 product 的 #box。 */
  :has(> .pd3-sellerbar) { display: flex; flex-direction: column; }
  .pd3 { order: -1; }
  .pd3-sellerbar { margin: 14px 0 0; }
}

/* 中栏交易面板 */
.pd3-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-2xl);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 11px; }
.pd3-plabel { font-size: 11.5px; color: var(--sub); }

/* 数据实时性条 */
.pd3-live { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink3); }
.pd3-live > i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
.pd3-live.cache > i { background: var(--warn); }

/* 卖家卡（二手中栏）已删（2026-08-05）：.pd3-seller/.pd3-av/.pd3-sbody/.pd3-sname/
   .pd3-smeta/.pd3-slink 只被 product.html 的旧卖家块用过，那块与顶部
   pdSellerStripHtml 重复已移除；卖家条样式见下方 .pd3-sellerbar 一组。 */

/* 成色原文 / 瑕疵清单 */
.pd3-raw { background: var(--panel); border: 1px solid var(--line-d); border-radius: var(--r-md);
  padding: 9px 12px; font-size: 12.5px; line-height: 1.75; color: var(--ink2); word-break: break-word; }
.pd3-raw b { color: var(--sub); font-weight: 400; font-size: 11px; display: block; margin-bottom: 2px; }

/* 拍卖倒计时 */
.pd3-cd { display: flex; align-items: baseline; gap: 12px; background: var(--warn-bg);
  border: 1px solid var(--line-d); border-radius: var(--r-lg); padding: 10px 13px; flex-wrap: wrap; }
.pd3-cdn { font-size: 26px; font-weight: 700; color: var(--warn); letter-spacing: 1px;
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.pd3-cd small { font-size: 11px; color: var(--ink3); line-height: 1.65; flex: 1; min-width: 140px; }
.pd3-cd.over { background: var(--bad-bg); }
.pd3-cd.over .pd3-cdn { color: var(--bad); }

/* 当前价 / 一口价 */
.pd3-ppair { display: flex; gap: 26px; flex-wrap: wrap; }
.pd3-pcell > span { display: block; font-size: 11.5px; color: var(--sub); }
.pd3-pcell > b { display: block; font-size: 24px; font-weight: 700; color: var(--deer);
  font-variant-numeric: tabular-nums; line-height: 1.25; }
.pd3-pcell > b em { font-style: normal; font-size: 12px; font-weight: 500;
  color: var(--sub); margin-left: 3px; }
.pd3-pcell > b.na { font-size: 12.5px; font-weight: 400; color: var(--sub); line-height: 1.7; }

/* 我的最高出价 */
.pd3-bid { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pd3-bid input { flex: 1; min-width: 130px; border: 1.5px solid var(--line);
  border-radius: var(--r-md); padding: 9px 12px; font: inherit; font-size: 15px;
  font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; background: #fff; }
.pd3-bid input:focus { outline: none; border-color: var(--deer); }
.pd3-bstep { border: 1px solid var(--line); background: #fff; border-radius: var(--r-pill);
  padding: 6px 12px; font: inherit; font-size: 12px; color: var(--ink3); cursor: pointer; }
.pd3-bstep:hover { border-color: var(--deer); color: var(--deer); }

/* 四态：加载骨架 / 空态 / 错误态 / 降级态。四种都长这样，靠修饰类区分语气。 */
.pd3-skel { height: 13px; border-radius: var(--r-xs); background: var(--panel);
  animation: pd-pulse 1.4s ease-in-out infinite; }
.pd3-skel + .pd3-skel { margin-top: 8px; }
.pd3-skel.s2 { width: 72%; }
.pd3-msg { font-size: 11.5px; line-height: 1.75; color: var(--ink3); background: var(--panel);
  border: 1px solid var(--line-d); border-radius: var(--r-md); padding: 8px 11px; }
.pd3-msg.warn { background: var(--warn-bg); color: var(--warn); }
.pd3-msg.bad { background: var(--bad-bg); color: var(--bad); }
.pd3-msg.ok { background: var(--ok-bg); color: var(--ok); }
.pd3-msg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* 下单按钮行。用共享的 .ybtn，不再复用 .pd-acts —— 后者的
   `.pd-acts button{border:0}` 会把 .ybtn 的描边吃掉，ghost 态就没边框了。 */
.pd3-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pd3-acts .ybtn { width: 100%; min-width: 0; padding: 13px 12px; font-size: 14.5px; white-space: nowrap; }
/* 中栏里的商品描述与规格：不再拉到整页宽 */
.pd3-c .pd-descsec { margin-top: 0; }
.pd3-c .pd-descbody { max-height: 300px; }

/* 设计稿的共同第一段：卖家 / 店铺条。平台自营也保留这一段，避免用户
   只看到一个渠道标签却不知道实际由谁发货。 */
.pd3-sellerbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding: 13px 17px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); position: relative; z-index: 1; }
.pd3-seller-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; background: var(--panel); border: 1px solid var(--line); }
.pd3-seller-avatar.ph { display: grid; place-items: center; color: var(--deer);
  font-size: 15px; font-weight: 700; }
.pd3-seller-body { min-width: 0; flex: 1; }
.pd3-seller-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 700; }
.pd3-seller-name small { color: var(--sub); border: 1px solid var(--line-d);
  border-radius: var(--r-pill); padding: 2px 8px; font-size: 10.5px; font-weight: 500; }
.pd3-seller-meta { margin-top: 3px; color: var(--sub); font-size: 11.5px; line-height: 1.65;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd3-seller-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.pd3-seller-action { border: 1px solid var(--line); border-radius: var(--r-md); padding: 7px 11px;
  background: #fff; color: var(--ink2); font: inherit; font-size: 11.5px; cursor: pointer;
  white-space: nowrap; }
/* ⚠️ hover 与 on **必须分开**。原来两者共用一条规则 —— 鼠标划过去按钮就变成
   品牌色，和「已收藏」长得一模一样，等于把状态和悬停混为一谈。 */
.pd3-seller-action:hover { border-color: var(--deer); color: var(--deer); }
.pd3-seller-action.on { border-color: var(--deer); color: var(--deer-d);
  background: rgba(176, 64, 95, .09); font-weight: 600; }
.pd3-seller-action.favact { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.pd3-seller-action.subact { border-color: var(--deer2); background: var(--panel); color: var(--deer-d); font-weight: 600; }

/* ── 收藏按钮的两态（商品收藏 / 收藏卖家共用）──────────────────────
   ⚠️ 改之前两态只差**边框颜色**：未收藏灰边、已收藏品牌色边，底色是 --cream
      （rgb(247,242,244)，几乎就是白的）—— 在 81×35 的角落里根本看不出来。
   现在让**心形本身**承担对比：未收藏空心灰 ♡，已收藏实心品牌色 ♥。
   一个彩色实心图标远比边框颜色显眼；收藏是次要动作，不该比立即购买抢眼。 */
.favh { font-style: normal; font-size: 13.5px; line-height: 1; color: var(--sub);
  display: inline-block; transition: color .15s ease; }
.on .favh { color: var(--deer); }
/* 点击的 pop：状态切换要有一个明确的「发生了」的瞬间，
   否则用户不确定自己到底点上没有。 */
@keyframes favpop { 0% { transform: scale(1); } 42% { transform: scale(1.45); } 100% { transform: scale(1); } }
.favh.pop { animation: favpop .32s cubic-bezier(.34, 1.56, .64, 1); }
@media (prefers-reduced-motion: reduce) { .favh.pop { animation: none; } }
.pd3-seller-action.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.pd3-seller-action.primary:hover { background: var(--ink2); color: #fff; }

/* 设计稿的共同第五段：费用横条只保留商品价不含哪些项目。 */
/* ⚠️ 原来是四个 42px 高的方框、和标题同级的 14px 粗体 —— 视觉分量和
   价格、成色一样重，而它只是一句**免责说明**。四个空框子里各一个词，
   看着像功能入口，实际点不了。
   压成一行小灰药丸：信息一个字没少，但不再抢主信息的位置。 */
.pd3-fee-strip { margin-top: 16px; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--line-d); border-radius: var(--r-lg, 12px);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.pd3-fee-heading { display: flex; align-items: center; flex: none; }
.pd3-fee-heading strong { color: var(--sub); font-size: 12.5px; font-weight: 500; }
.pd3-fee-items { display: flex; flex-wrap: wrap; gap: 6px; }
.pd3-fee-items span { padding: 3px 9px; background: #fff;
  border: 1px solid var(--line-d); border-radius: var(--r-pill, 20px);
  color: var(--ink3); font-size: 12px; line-height: 1.5; white-space: nowrap; }

/* 第四类交易面板：商家店铺的资质提示使用中性冷色，和二手风险/拍卖提醒区分。 */
.pd3-panel-shop .pd3-shopproof { display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; background: var(--panel); border-radius: var(--r-md); }
.pd3-panel-shop .pd3-shopproof b { color: var(--ink2); font-size: 12px; }
.pd3-panel-shop .pd3-shopproof span { color: var(--ink2); font-size: 11px; line-height: 1.65; }
.pd-tag.type-new { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.pd-tag.type-used { background: #F1F6FC; border-color: #C9D9EE; color: #2C5B8F; }
.pd-tag.type-auction { background: var(--warn-bg); border-color: #E7C489; color: var(--warn); }
.pd-tag.type-shop { background: var(--panel); border-color: var(--line-d); color: var(--ink2); }

@media (max-width: 620px) {
  .pd3-sellerbar { align-items: flex-start; flex-wrap: wrap; }
  .pd3-seller-actions { width: calc(100% - 52px); margin-left: 52px; }
  .pd3-seller-action { flex: 1 1 0; min-width: 0; text-align: center; }
}


/* ── 账号页左侧菜单栏（全站唯一一份）──────────────────────────────
   ⚠️ 2026-08-07 从各页面收上来。原来这一段在 my / orders / parcels / address /
      coupons / favorites / messages / aftersale / order / parcel **十个页面各抄了
      一份**（九份逐字相同、my.html 多四行）。
      结果就是：订阅页改成账号页布局时侧栏渲染出来了，但因为那一页没有这份 CSS，
      整个菜单糊成一行纯文本（「我个人中心单我的订单0仓日本仓库址地址与实名…」）。
      抄十份必然漏第十一份 —— 所以收到这里，页面侧不再写。
   ⚠️ acctNavHtml() 输出的结构在 app.js，样式在这里，两边要一起改。 */
.acct-side{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;position:sticky;top:86px}
.acct-me{display:flex;gap:10px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--grid)}
/* 侧栏头像位现在是 <img>（avatar.svg），不再是居中的 emoji —— 去掉 grid 居中，
   加 object-fit。底色保留：头像 svg 是透明底的。 */
.acct-me .av{width:36px;height:36px;border-radius:50%;background:var(--cream);object-fit:cover;flex:none;display:block}
.acct-me .nm{font-size:13px;font-weight:700;color:var(--ink);line-height:1.4}
.acct-me .lv{font-size:10.5px;color:var(--sub);margin-top:2px;line-height:1.5}
.acct-link{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid var(--hair);color:var(--ink2);font-size:12.5px}
.acct-link:hover{background:var(--panel);text-decoration:none}
.acct-link .ic{width:20px;height:20px;border-radius:var(--r-xs);background:var(--cream);color:var(--deer-d);font-size:10px;font-weight:700;display:grid;place-items:center;flex:none}

/* 🔴 手机上账户导航**不能占满第一屏**（2026-08-15 在 375×812 实测）：
   十项竖排 + 头像卡一共 **482px**，而视口才 812 —— 打开「我的订单」
   第一屏全是菜单，订单列表被推到 y=1062，**要滚 1.3 屏才看得到第一张单**。
   用户点「我的订单」是来看订单的。
   ⚠️ 影响的是全部十个账户页（都走 acctNavHtml），所以改在这里而不是逐页改。
   ⚠️ 只在 ≤900 生效，PC 的左栏一个像素都不动。
   横向滚动的标签条是这类导航在手机上的常见形态：占一行，当前项高亮，可左右划。 */
@media (max-width: 900px) {
  .acct-side { position: static; display: flex; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .acct-side::-webkit-scrollbar { display: none; }
  /* 头像与昵称不是导航项：手机上让位给内容，个人中心里本来就有 */
  .acct-me { display: none; }
  .acct-link { flex: none; white-space: nowrap; border-bottom: 0;
    padding: 10px 13px; gap: 6px; }
  .acct-link.on { background: var(--cream); color: var(--deer-d); font-weight: 700; }
}
/* ⚠️ .acct-link .bd（侧栏角标）2026-08-13 连同它的取数一起删了 ——
   导航项不挂业务角标是有意决定，状态在页内的 Tab 与胶囊上表达。 */
.acct-link.on{background:var(--cream);color:var(--deer-d);font-weight:700}
.acct-link.on .ic{background:var(--deer);color:#fff}
/* 窄屏侧栏不再吸顶，改排在内容上方 */
@media (max-width:1000px){.acct-side{position:static;margin-bottom:18px}}
/* 个人中心底部那两个动作（退出登录 / 注销账号）只有 my.html 用 */
.acct-acts{padding:12px 14px 14px;background:var(--panel);border-top:1px solid var(--line)}
.acct-acts .ybtn{width:100%;justify-content:center}
.acct-acts .lnk-cancel{display:block;width:100%;margin-top:8px}
.acct-acts .tip{font-size:10.5px;color:var(--sub);line-height:1.65;margin-top:8px}

/* ⚠️ .logitabs（国际物流簇的跨页二级导航）已随 app.js 的 logiNavHtml() 一起删除
   （2026-08-10）：这一簇最后收成 logistics.html 一页，跨页 tab 没有第二页可去了。
   页内分节现在只靠下面的 .gnav .anchors。 */
/* 页内锚点：现在它是这一页唯一的目录 */
.gnav .anchors { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.gnav .anchors a { font-size: 12px; font-weight: 400; color: var(--sub); padding: 4px 11px;
  border-radius: 999px; background: transparent; border: 1px solid transparent; }
.gnav .anchors a:hover { color: var(--deer); background: #fff; border-color: var(--line); text-decoration: none; }

/* ── 国际物流簇：页面容器与阅读宽度 ───────────────────────────
   原来每个页面各写一份 `.gwrap { max-width: 940px }`，结果是：
     · 五个文件各一份，改一次要改五处；
     · 940 比站头（.nav 1440）和页脚（--wrap 1560）都窄一大截，
       内容挤在中间一条柱子里、上下却铺满，看着不像同一个站。
   现在容器对齐站头的 1440，**但正文单独收窄** ——
   style.css 顶部那条「正文太宽反而难读」的原则只对纯文字成立，
   对卡片、表格、试算器不成立，不该让两者共用同一个宽度。
   ⚠️ guide.html 自己的 <style> 里仍写着 880px，页面内联规则优先级更高，
      长文指南页保持窄栏不受影响，这是有意的。 */
.gwrap.wide { max-width: 1440px; margin: 0 auto; padding: 0 24px; }

/* 正文类：限制每行字数，宽容器里也保持可读的行长 */
.gwrap.wide .gsec > .lead,
.gwrap.wide .lhead p,
.gwrap.wide .faq .a,
.gwrap.wide .foot-note,
.gwrap.wide .incl { max-width: 74ch; }
.gwrap.wide .lhead p, .gwrap.wide .incl { margin-left: auto; margin-right: auto; }

/* 固定 4 张卡，现在直接在 1440 容器里（内宽 1392）。
   算一下：4 列需 minmax ≤ 337（4w+3×14=1392），5 列需 minmax > 267。
   取值必须落在 267–337 之间，300 居中最稳。
   ⚠️ 超过 337 会掉成 3+1，低于 267 会挤成 5 列。容器宽度变了这个数要重算。 */
.gwrap.wide .feat    { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* 面板与其他区块同宽（不再收到 1180）。
   ⚠️ 收窄面板会造成「上面窄下面宽」；而且面板原来还塞着四张保障卡与不包含说明，
      整块 1180×883、宽高比只有 1.34，是全页最方最高的一块。
      现在保障卡已拆成独立章节，面板只剩两张价格卡，自然横过来。 */
/* 试算器的输入行在宽屏下不该散成一长条 */
.gwrap.wide .calc .row { max-width: 900px; }
/* 吸顶导航内层与内容同宽，否则导航比正文窄一截、左边缘对不齐。
   ⚠️ 限定在物流簇：guide.html 也有 .gwrap/.gnav，但它是长文页、保持 880 窄栏。 */
.wide-nav .in { max-width: 1440px; margin: 0 auto; padding: 10px 24px; }

/* ══ 账户页的区块头（orders.html：我的订单）══════════════════════════
   ⚠️ 「待办事项」模块与它的页内锚点已撤（2026-08-12）：待办就是订单与包裹的
      一个视图，截止时间与逾期后果已下沉到订单卡的 .orddue 行。
      随之删掉的还有 .acct-sect（页内分区与 scroll-margin-top）、.acct-link.here
      （两项指同一页时的实态左标）与整段待办条样式 —— 别再加回来。 */
.secthead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.secthead h2 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; }
.secthead .sub { flex: 1; min-width: 240px; font-size: 11.5px; color: var(--sub);
  line-height: 1.7; margin: 0; }

/* ══ 订单卡的三处新增行 ═════════════════════════════════════════════ */
/* 费用构成默认收起：它是核对用的，不是常读信息，展开才占高度 */
.ordfee { margin-top: 8px; }
.ordfee > summary { list-style: none; cursor: pointer; font-size: 11.5px; color: var(--deer); }
.ordfee > summary::-webkit-details-marker { display: none; }
.ordfee > summary::after { content: ' ▾'; }
.ordfee[open] > summary::after { content: ' ▴'; }
.ordfee .row { display: flex; justify-content: space-between; gap: 16px;
  font-size: 11.5px; color: var(--ink2); line-height: 1.8; }
/* 关联包裹引用行：订单与它所在的那只实体箱的关系 */
.ordparcel { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  border-top: 1px dashed var(--hair); margin: 0 18px; padding: 9px 0;
  font-size: 11.5px; color: var(--ink2); }
.ordparcel .pno { color: var(--ink); }
/* 截止与逾期后果行：每个「等你」态都必须两样齐全。
   语气由「两样是否齐全」决定，不由流程阶段决定 ——
     warn 有截止有后果   calm 截止取不到（只写后果）   bad 已经超期 */
.orddue { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px;
  border-top: 1px dashed var(--hair); margin: 0 18px; padding: 9px 0; }
.orddue .k { font-size: 11px; color: var(--sub); white-space: nowrap; }
.orddue .v { font-size: 11.5px; color: var(--ink2); line-height: 1.7; }
.orddue .v.due { font-weight: 700; }
.orddue.warn .v.due { color: var(--warn); }
.orddue.bad .v.due { color: var(--bad); }
/* 卡头：单号 · 渠道 · 下单时间 · 状态徽标 */
.ordhead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 18px; border-bottom: 1px solid var(--hair); font-size: 11.5px; color: var(--sub); }
.ordhead .st { margin-left: auto; }
/* 动作行：最多三个，只有一个 Lv1 */
.ordacts { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end;
  padding: 0 18px 14px; }

@media (max-width: 760px) {
  /* 窄屏两列会把「何时到期」挤成竖排单字，改成上下两段。 */
  .orddue { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .orddue .v { margin-bottom: 4px; }
  .ordhead .st { margin-left: 0; }
  .ordacts { justify-content: stretch; }
  .ordacts .ybtn { flex: 1; text-align: center; justify-content: center; }
}

/* ══ L-2：「需要你补齐这些」清单 ═══════════════════════════════════
   🔴 后端 2026-08-14 把 `DECLARATION_PENDING` 拆成两个码，其中
      `DECLARATION_NEED_USER` 带 `missing[]` —— 用户自己能补的那几样。
      在此之前这类情形一律显示「暂时无法继续，请刷新后重试。」，
      而对缺实名/缺地址的用户，那是一句**做了也没用**的指示。

   ⚠️ 样式放这里（全局）而不是某一页：渲染它的 `declarationMissingHtml()`
      在 `app.js` 里，四个宿主页共用。放进单页 css 就会有页面拿到裸 HTML。
   ⚠️ 不做成按钮：它跟在一句「不能继续」后面，做成按钮会和主 CTA 抢视线；
      是文字链 —— 「可点」由下划线和颜色表达。 */
.dfix { margin-top: 9px; padding: 10px 12px; border-radius: var(--r-md);
  background: var(--panel); border: 1px solid var(--line); }
.dfix > b { display: block; font-size: 11.5px; color: var(--ink2); font-weight: 700; }
.dfix-rows { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; }
.dfix-item { font-size: 12px; color: var(--brand); text-decoration: underline;
  text-underline-offset: 2px; }
/* 认不出的 key 只显示文案不给链接 —— 不猜一个目的地。 */
.dfix-item.off { color: var(--ink3); text-decoration: none; }

/* ══ 线路的硬约束小字：尺寸上限 / 赔付上限 ════════════════════════
   🔴 2026-08-15 补回。删掉提交页那个永远为空的线路列表时，
      连带把全站唯一展示这两项的地方也删掉了 —— 而它们正是
      「这条线到底能不能寄我这一箱」的判据（EMS 最长边 1.8m、
      国际小包 1.5m；贵重件还要看赔付上限）。
   ⚠️ 渲染它的 `shippingLineLimitsHtml()` 在 app.js 里，三个选线页共用，
      所以样式放全局 —— 放进单页 css 就会有页面拿到裸 HTML。
   ⚠️ 不含税费：三处的 meta / chips 里都已经写了 taxMode，
      这里再写一遍就是同一句话在一屏出现两遍。 */
.qlim{display:flex;flex-wrap:wrap;gap:3px 12px;margin-top:5px}
.qlim i{font-style:normal;font-size:11px;color:var(--ink3);display:inline-flex;gap:4px}
.qlim em{font-style:normal;color:var(--sub)}

/* ══ 合箱估算的「不含哪些情况」（默认折叠）════════════════════════
   ⚠️ 默认折叠是有意的：产品 2026-08-13 把合箱建议精简成「省多少、以什么为准」，
      精简掉的是「这笔账是谁算的」。铺开四行会把那次精简作废；
      不说则是另一种不诚实。原生 details：默认一行，想看的点开。 */
.pick-advice .adv-caveats{margin-top:6px}
.pick-advice .adv-caveats summary{cursor:pointer;color:var(--sub);font-size:11.5px;
  list-style:none;display:inline-flex;gap:4px;align-items:center}
.pick-advice .adv-caveats summary::-webkit-details-marker{display:none}
.pick-advice .adv-caveats summary::before{content:'›';display:inline-block;
  transition:transform .15s;color:var(--ink3)}
.pick-advice .adv-caveats[open] summary::before{transform:rotate(90deg)}
.pick-advice .adv-caveats ul{margin:6px 0 0;padding-left:16px}
.pick-advice .adv-caveats li{font-size:11.5px;color:var(--ink3);line-height:1.8}

/* 复核申请卡（my.html appealsHtml）。只在真有申诉时渲染。
   ⚠️ 结论用粗体、原因跟在下一行且弱一档 —— 用户先要知道「过没过」，
      再看「为什么」。两者同级会让人一眼分不出哪句是结论。 */
.ov-appeal .ap-row{align-items:flex-start}
.ov-appeal .ap-row .v{text-align:right}
.ov-appeal .ap-row .v i{display:block;font-style:normal;color:var(--sub);
  font-size:11.5px;line-height:1.7;margin-top:2px;max-width:22em}
.ov-appeal .hd .more{font-size:11.5px;color:var(--sub);font-weight:400}
/* 收藏页的页面级说明（favorites.html #fvNote）。只在有收藏时出现。 */
.fvnote{font-size:12px;color:var(--sub);line-height:1.7;margin:-6px 0 14px}

/* 实名审核三态。🔴 这不是装饰：只有「已通过」才能报关出库（后端 identity.js:280
   只在 approved 时把身份证注入订单地址快照），所以三态必须一眼分得开。 */
.idrev-approved{color:var(--ok,#3E8E5A);font-weight:600}
.idrev-pending{color:var(--warn,#B8860B);font-weight:600}
.idrev-rejected{color:var(--danger,#C0392B);font-weight:600}
.idnote{margin-top:8px;font-size:12.5px;color:var(--sub);line-height:1.75}
.idnote.bad{color:var(--danger,#C0392B)}