/* 会员中心通用组件（照 v4）：按钮 / 卡片 / 表格 / 药丸 / 提示 / 空态
   概览页、包裹页、余额页共用；页面专属版式留在各自文件。
   类名统一 m- 前缀，避免撞 store-ui 里的通用类（.card/.btn/.table 那些）。
   令牌来自 member-shell.css（--hp-*），本文件不定义颜色。 */

/* ============ 页面容器 ============
   每个会员页的第一层，负责统一垂直节奏。
   放在共用件而不是 usercenter-home.css：订单/地址/券页都要用。 */
.m-page { display: flex; flex-direction: column; gap: 18px; }

/* ============ 按钮 ============ */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  background: #fff;
  color: var(--hp-ink);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.m-btn:hover { border-color: var(--hp-ink4); color: var(--hp-ink); }
.m-btn--primary { background: var(--hp-accent); border-color: var(--hp-accent); color: #fff; }
.m-btn--primary:hover { background: var(--hp-accent2); border-color: var(--hp-accent2); color: #fff; }
.m-btn--ghost { border-color: var(--hp-accent-line); background: #fff; color: var(--hp-accent); }
.m-btn--ghost:hover { border-color: var(--hp-accent); color: var(--hp-accent); }
.m-btn--sm { height: 32px; padding: 0 11px; font-size: 11.5px; border-radius: 7px; }
.m-btn--link { border: 0; background: transparent; color: var(--hp-accent); padding: 0 4px; height: auto; }
.m-btn--link:hover { color: var(--hp-accent2); }
.m-btn--block { width: 100%; }
/* 危险操作（删地址等）：描边 + 红字，和「编辑」那种中性按钮拉开距离，
   避免两个等宽按钮并排时点错 */
.m-btn--danger {
  color: var(--hp-warn-ink);
  border-color: var(--hp-warn-line);
  background: #fff;
}
.m-btn--danger:hover { background: var(--hp-warn-bg); border-color: var(--hp-warn-ink); }
.m-btn[disabled], .m-btn.is-off { opacity: .5; cursor: not-allowed; }

/* ============ 卡片 ============ */
.m-card { border: 1px solid var(--hp-line); border-radius: var(--hp-r-lg); background: #fff; overflow: hidden; }
.m-card__h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--hp-line2); }
.m-card__t { font-size: 13.5px; font-weight: 600; }
.m-card__s { font-size: 11.5px; color: var(--hp-ink3); white-space: nowrap; }
.m-card__h .m-btn--link { margin-left: auto; }
.m-card__b { padding: 4px 18px 10px; }
.m-card__f {
  padding: 11px 18px;
  border-top: 1px solid var(--hp-line2);
  background: #fbfcfd;
  font-size: 11.5px;
  color: var(--hp-ink3);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============ 表格 ============ */
.m-table {
  width: 100%;
  border-collapse: collapse;
  /* 必须固定布局：auto 时一条长商品名会把后面几列推出卡片外
     （表现是表头只剩第一列、行内容被裁掉）。 */
  table-layout: fixed;
}
.m-table td, .m-table th { overflow: hidden; }
.m-table th {
  padding: 10px 8px 8px;
  border-bottom: 1px solid var(--hp-line2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hp-ink4);
  text-align: left;
  white-space: nowrap;
}
.m-table td { padding: 12px 8px; border-bottom: 1px solid var(--hp-line2); font-size: 12.5px; vertical-align: middle; }
.m-table tr:last-child td { border-bottom: 0; }
.m-table .num { font-variant-numeric: tabular-nums; }
.m-table__r { text-align: right; }
.m-sn {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  color: var(--hp-ink2);
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-goods { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* 文本块必须 min-width:0 + overflow:hidden，否则 flex 子项按内容宽度算，不省略 */
.m-goods__m { min-width: 0; overflow: hidden; display: block; }
.m-thumb {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--hp-line2);
  background: #eef0f4;
  overflow: hidden;
  display: grid;
  place-items: center;
  color: var(--hp-ink4);
  font-size: 14px;
}
.m-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-goods__n {
  display: block;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-goods__s {
  display: block;
  font-size: 11.5px;
  color: var(--hp-ink3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-prog__1 { font-size: 11.5px; color: var(--hp-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-prog__2 { font-size: 11px; color: var(--hp-ink4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============ 药丸 ============ */
.m-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.m-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .8; }
.m-pill--pay { color: var(--hp-warn-ink); background: var(--hp-warn-bg); }
.m-pill--wait { color: var(--hp-info-ink); background: var(--hp-info-bg); }
.m-pill--ship { color: var(--hp-ship-ink); background: var(--hp-ship-bg); }
.m-pill--in { color: var(--hp-accent); background: var(--hp-accent-soft); }
.m-pill--done { color: var(--hp-done-ink); background: var(--hp-done-bg); }
.m-pill--after { color: var(--hp-after-ink); background: var(--hp-after-bg); }
.m-pill--plain { background: #f3f5f8; color: var(--hp-ink2); }
.m-pill--plain::before { display: none; }

/* 退运徽标：紧跟在状态徽标后面（包裹页 + 合箱详情页都要用，所以放在共用件里）。
   状态说的是「货在哪」，这个标说的是「货正在往回走」——
   两者会同时出现（已到仓 + 已退回），所以做成无圆点的小号字，和主徽标一眼分得开 */
.pc-rtag {
  display: inline-block;
  margin-left: 3px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 10px;
  line-height: 15px;
  white-space: nowrap;
  vertical-align: middle;
}
.pc-rtag--wait { color: var(--hp-info-ink); background: var(--hp-info-bg); }
.pc-rtag--in { color: var(--hp-accent); background: var(--hp-accent-soft); }
.pc-rtag--after { color: var(--hp-after-ink); background: var(--hp-after-bg); }

/* ============ 提示 / 空态 ============ */
.m-hint { display: flex; gap: 7px; font-size: 11.5px; color: var(--hp-ink3); line-height: 1.7; }
.m-hint i { flex: none; margin-top: 2px; color: var(--hp-ink4); font-size: 13px; }
.m-hint b { color: var(--hp-ink2); font-weight: 500; }

.m-empty { display: flex; align-items: center; gap: 10px; padding: 18px 0; font-size: 12.5px; color: var(--hp-ink3); }
.m-empty i { color: var(--hp-ink4); font-size: 16px; }
.m-empty a { color: var(--hp-accent); text-decoration: none; }

/* ============ 筛选标签 ============
   做成条目而不是下划线式 tab：标签数量会变（有单的状态才出现），
   下划线式一换行就分不清哪条属于哪个 tab。
   计数是真实条数，为 0 的标签由后端决定不出现，避免出现「点进去是空页」。 */
.m-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.m-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* 高度 30 + 上下 4 的内边距 = 38，手机上仍够点；
     只做 30 的话手指点不准中间的条目 */
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--hp-line);
  border-radius: 20px;
  background: #fff;
  color: var(--hp-ink2);
  font-size: 12.5px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .12s, color .12s, background .12s;
}
.m-tab:hover { border-color: var(--hp-ink4); color: var(--hp-ink); }
.m-tab.is-on {
  border-color: var(--hp-accent);
  background: var(--hp-accent-soft);
  color: var(--hp-accent);
  font-weight: 500;
}
.m-tab__n {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--hp-ink4);
}
.m-tab.is-on .m-tab__n { color: var(--hp-accent); }

/* ============ 分页 ============
   上一页/下一页 + 中间页码。页码最多给 5 个，多了在小屏上会换行。 */
.m-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.m-pg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  background: #fff;
  color: var(--hp-ink2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.m-pg:hover { border-color: var(--hp-ink4); color: var(--hp-ink); }
.m-pg.is-on {
  border-color: var(--hp-accent);
  background: var(--hp-accent-soft);
  color: var(--hp-accent);
  font-weight: 600;
}
.m-pg.is-off { opacity: .45; pointer-events: none; }
.m-pager__gap { color: var(--hp-ink4); padding: 0 2px; font-size: 12px; }

/* ============ 通用列表行 ============
   「左边两行文字 + 右边值 + 右边操作」，余额流水、消费记录、积分记录都是这个形状。
   以前 wallet.css / profile.css 各写一份 .wl-row / .pf-row，改一处漏一处。 */
.m-rows { display: flex; flex-direction: column; }
.m-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--hp-line2);
}
.m-row:last-child { border-bottom: 0; }
.m-row__m { flex: 1; min-width: 0; }
/* 这两行都是 <span>：不写 display:block 就还是 inline，
   标题和副标题会挤在同一行，overflow/省略号对 inline 元素也不生效。
   消费记录、订单详情、评价列表都走这条。 */
.m-row__t { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-row__d {
  display: block;
  font-size: 11.5px;
  color: var(--hp-ink3);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-row__v {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.m-row__v--in { color: var(--hp-accent); }
.m-row__v--out { color: var(--hp-ink); }
/* 收支方向的小圆标：颜色和金额同色，扫一眼就知道是进还是出，
   不用去读那个小小的 + / - 号 */
.m-row__ico { flex: none; width: 18px; text-align: center; }
.m-row__ico i { font-size: 14px; }
.m-row--in .m-row__ico i { color: var(--hp-accent); }
.m-row--out .m-row__ico i { color: var(--hp-ink4); }
/* 变动后的余额：弱化到不影响主金额，但对账时最有用 */
.m-row__b {
  flex: none;
  min-width: 92px;
  text-align: right;
  font-size: 11.5px;
  color: var(--hp-ink3);
  font-variant-numeric: tabular-nums;
}
.m-row__b em { font-style: normal; margin-right: 4px; color: var(--hp-ink4); }
@media (max-width: 992px) {
  .m-row__b { display: none; }
}

/* ============ 卡片流 ============
   订单卡、地址卡这类「一整块就是一条」的内容，纵向排一列。
   用卡片而不是表格：订单里有商品图、SKU、多个按钮，表格装不下。 */
.m-cards { display: flex; flex-direction: column; gap: 12px; }

/* ============ 页头 ============
   标题 + 一句说明 + 右侧主操作。标题已经在顶栏出现过一次，
   这里再放一次是为了和下面的卡片有归属关系，说明句解决「这页能干嘛」。 */
.m-head { display: flex; align-items: center; gap: 14px; }
.m-head__m { min-width: 0; }
.m-head__m h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.m-head__m p { margin: 2px 0 0; font-size: 11.5px; color: var(--hp-ink3); }
.m-head > .m-btn, .m-head > .m-btn--primary { margin-left: auto; flex: none; }

/* 卡片流的两列变体（地址簿、优惠券）。
   用 auto-fit 而不是固定 repeat(2)：只有一张地址/券时固定两列会让卡片
   只占左边一半、右边大片空着；auto-fit 会把空轨道折叠，单卡自然撑满。 */
.m-cards--2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
@media (max-width: 1100px) {
  .m-cards--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 地址卡 ---------- */
.m-addr {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-r-lg);
  background: #fff;
  overflow: hidden;
}
/* 默认地址：左侧竖条而不是换底色。换底色会在蓝色主题下把主色和默认色混在一起 */
.m-addr.is-def { border-color: var(--hp-accent-line); }
.m-addr.is-def .m-addr__b { box-shadow: inset 3px 0 0 var(--hp-accent); }
.m-addr__b { flex: 1; padding: 14px 16px 12px; min-width: 0; }
.m-addr__n {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}
.m-addr__p { font-size: 12px; color: var(--hp-ink2); font-variant-numeric: tabular-nums; }
.m-addr__a {
  margin-top: 6px;
  font-size: 12px;
  color: var(--hp-ink3);
  line-height: 1.65;
  /* 地址可能很长，两行后省略，别把卡片撑成两米高 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 邮编跟在地址后面，单独弱化：它只对清关有用，不该和地址抢注意力 */
/* 地址拆行后两行之间收紧一点，和「电话 / 地址」之间保持呼吸 */
.m-addr__a--s { margin-top: 2px; }
/* 列表末尾的虚线新增入口（v4 手机端同款） */
.m-addr-add {
  /* 放在地址卡网格之后（不进 grid）：混进去会逼出一列空轨道，单张地址缩回半宽 */
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 54px;
  border: 1px dashed var(--hp-line);
  border-radius: var(--hp-r);
  background: #fff;
  color: var(--hp-ink3);
  font-size: 12.5px;
  text-decoration: none;
}
.m-addr-add:hover { border-color: var(--hp-accent); color: var(--hp-accent); }
.m-addr-add i { font-size: 14px; }

.m-addr__z {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--hp-soft);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--hp-ink3);
}
.m-addr__f {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--hp-line2);
  background: #fbfcfd;
}
/* 按钮别跟着卡片一起拉宽：单张地址撑满 880 时，
   flex:1 会把「编辑/删除」各撑成 400px 的空壳大按钮。 */
.m-addr__f .m-btn { flex: 0 0 auto; min-width: 92px; }
/* 手机端卡片本身就窄，平分整行更好点 */
@media (max-width: 900px) {
  .m-addr__f .m-btn { flex: 1; min-width: 0; }
}

/* 小标签：卡片内联的短标记（「默认」），比药丸矮一档、不带圆点 */
.m-tag {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--hp-accent-soft);
  color: var(--hp-accent);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

/* ---------- 客服页 ---------- */
.m-cs { padding: 20px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.m-cs__qr { border: 1px solid var(--hp-line); border-radius: var(--hp-r); padding: 8px; background: #fff; }
.m-cs__qr img { display: block; width: 148px; height: 148px; object-fit: contain; }
.m-cs__tip { font-size: 12px; color: var(--hp-ink3); text-align: center; }
.m-cs__txt { font-size: 13px; line-height: 1.8; text-align: center; word-break: break-word; }
.m-cs__go { padding: 14px 16px; }

/* 自助入口卡：图标 + 两行说明 + 右侧角标 */
.m-go {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-r-lg);
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: border-color .12s, background .12s;
}
.m-go:hover { border-color: var(--hp-accent-line); background: var(--hp-accent-soft); }
.m-go__i {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--hp-soft);
  color: var(--hp-ink2);
  display: grid;
  place-items: center;
  font-size: 15px;
}
.m-go:hover .m-go__i { background: #fff; color: var(--hp-accent); }
.m-go__m { flex: 1; min-width: 0; }
.m-go__t { display: block; font-size: 13px; font-weight: 600; }
.m-go__d {
  display: block;
  font-size: 11px;
  color: var(--hp-ink3);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-go__n {
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--hp-warn-bg);
  color: var(--hp-warn-ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

/* ---------- 优惠券 ----------
   左右两段的票券造型：左边面额，右边条件。
   不用锯齿缺口（::before 画三角那套）：不同高度下锯齿会错位，
   而且过期和可用两种状态要各自画一遍。左侧一条分隔线足够。 */
.m-coupon {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-r-lg);
  background: #fff;
  overflow: hidden;
}
.m-coupon__l {
  flex: none;
  width: 104px;
  padding: 14px 10px;
  border-right: 1px dashed var(--hp-line);
  background: var(--hp-accent-soft);
  color: var(--hp-accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.m-coupon__v { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.m-coupon__k { font-size: 10.5px; opacity: .8; }
.m-coupon__r { flex: 1; min-width: 0; padding: 12px 14px; position: relative; }
.m-coupon__t { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-coupon__c { margin-top: 3px; font-size: 11.5px; color: var(--hp-ink2); }
.m-coupon__d { margin-top: 5px; font-size: 11px; color: var(--hp-ink4); font-variant-numeric: tabular-nums; }
.m-coupon__s {
  position: absolute;
  top: 12px;
  right: 14px;
  padding: 0 5px;
  border-radius: 4px;
  background: var(--hp-done-bg);
  color: var(--hp-ink3);
  font-size: 10.5px;
  line-height: 16px;
}
/* 过期券：整张降饱和度，但不隐藏 —— 藏起来用户会以为券被吞了 */
.m-coupon.is-off { filter: saturate(.25); opacity: .7; }
.m-coupon.is-off .m-coupon__l { background: var(--hp-soft); color: var(--hp-ink3); }

/* ---------- 订单卡 ----------
   三段的节奏是「单号 → 商品 → 合计与操作」。
   合计行必须和操作按钮同在一行：以前操作按钮在卡片右上角，
   手指在手机上要跨越大半个卡片才能点到。 */
.m-ord { border: 1px solid var(--hp-line); border-radius: var(--hp-r-lg); background: #fff; overflow: hidden; }
.m-ord__h {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hp-line2);
  background: #fbfcfd;
}
.m-ord__hl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.m-ord__no {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  color: var(--hp-ink2);
}
/* 下单时间：单号是内部 ID 排序，对买家没意义，时间才是他记得住的那个 */
.m-ord__t { font-size: 11.5px; color: var(--hp-ink4); }
.m-ord__h .m-pill { margin-left: auto; flex: none; }

.m-ord__b { display: flex; flex-direction: column; }
.m-ord__g {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hp-line2);
}
.m-ord__g:last-child { border-bottom: 0; }
.m-ord__g .m-goods__m { flex: 1; }
.m-ord__gp { flex: none; text-align: right; font-size: 12.5px; }
.m-ord__gp .num { font-variant-numeric: tabular-nums; }
.m-ord__gp em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--hp-ink4);
  font-variant-numeric: tabular-nums;
}
.m-ord__g > .m-btn { flex: none; }
/* 折叠：由 orderlist-fold.js 控制，JS 不跑时全部展开，不会丢内容 */
.m-ord__g.is-folded { display: none; }
.m-ord__b.is-open .m-ord__g.is-folded { display: flex; }
.m-ord__fold {
  align-self: flex-start;
  margin: -2px 0 8px 16px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--hp-accent);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.m-ord__f {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 11px 16px;
  border-top: 1px solid var(--hp-line2);
  background: #fbfcfd;
}
.m-ord__sum { font-size: 12px; color: var(--hp-ink3); }
.m-ord__sum b {
  margin-left: 6px;
  font-size: 14px;
  color: var(--hp-ink);
  font-variant-numeric: tabular-nums;
}
.m-ord__acts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 勾选框（待付款批量付款 / 设为默认地址都用）---------- */
.m-ck { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.m-ck__i { width: 15px; height: 15px; margin: 0; accent-color: var(--hp-accent); cursor: pointer; }
/* 订单号那段要等宽，其它地方的文案（「设为默认地址」）用正常字体 */
.m-ck__no {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 11.5px;
  color: var(--hp-ink2);
}

/* ============ 表单（地址簿编辑 / 新增共用）============
   标签固定宽、输入框占满剩余。热区按 44px 做：
   地址表单有 7 个字段，手指在 34px 的输入框里很容易戳错行。 */
.m-form__g { padding: 4px 18px 14px; border-bottom: 1px solid var(--hp-line2); }
.m-form__g:last-child { border-bottom: 0; padding-bottom: 4px; }
.m-form__gt {
  padding: 12px 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hp-ink4);
}
.m-frow { display: flex; align-items: flex-start; gap: 14px; padding: 6px 0; }
.m-fk {
  flex: none;
  width: 132px;
  padding-top: 12px;
  font-size: 12.5px;
  color: var(--hp-ink2);
}
.m-fk .req { color: var(--hp-warn-ink); margin-left: 2px; }
.m-fv { flex: 1; min-width: 0; }
.m-fhint { margin-top: 5px; font-size: 11px; color: var(--hp-ink4); line-height: 1.6; }

.m-fv input,
.m-fv select {
  width: 100%;
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  background: #fff;
  color: var(--hp-ink);
  font: inherit;
  font-size: 13px;
}
.m-fv input:focus,
.m-fv select:focus { outline: 0; border-color: var(--hp-accent); box-shadow: 0 0 0 3px var(--hp-accent-soft); }
.m-fv input::placeholder { color: var(--hp-ink4); }
.m-fv input[readonly] { background: var(--hp-soft); color: var(--hp-ink2); }
/* 省 / 州 和 城市 并列：两个下拉挨着放，省在左城市在右。
   用 float 而不是 inline-block：两个 wraper 之间的换行空白
   会在 50%-4px × 2 + 8px 正好等于容器宽时把第二个框挤到下一行，
   视觉上变成一上一下两个宽度不一的框。 */
#provice-select-wraper, #city-select-wraper { float: left; width: calc(50% - 4px); }
#city-select-wraper { margin-left: 8px; }
.m-fhint { clear: both; }

/* 手机号：区号框 + 号码框。区号是只读的，做成一个「+86」的小前缀块 */
.m-tel { display: flex; gap: 8px; }
.m-tel__cc {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 40px;
  border: 1px solid var(--hp-line);
  border-radius: 8px;
  background: var(--hp-soft);
  color: var(--hp-ink2);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.m-tel__cc-i {
  width: 44px !important;
  min-height: 40px !important;
  padding: 9px 6px !important;
  text-align: center;
  border-radius: 8px 0 0 8px !important;
  font-variant-numeric: tabular-nums;
}

/* 表单底部操作条 */
.m-form__foot { gap: 12px; flex-wrap: wrap; }
.m-form__acts { margin-left: auto; display: flex; gap: 8px; }

@media (max-width: 992px) {
  /* 窄屏上标签固定宽会把输入框挤成一条缝，改成上下排 */
  .m-frow { flex-direction: column; gap: 4px; }
  .m-fk { width: auto; padding-top: 0; }
  .m-form__g { padding: 4px 14px 12px; }
  .m-form__foot { flex-direction: column; align-items: stretch; }
  .m-form__acts { margin-left: 0; }
  .m-form__acts .m-btn { flex: 1; }
}

/* ============ 键值行（账号概览那种「标签 → 值」）============ */
.m-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--hp-line2);
  font-size: 12.5px;
}
.m-kv:last-child { border-bottom: 0; }
.m-kv > span { color: var(--hp-ink3); flex: none; }
.m-kv > b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============ 评价条目（商品评价列表）============
   一条评价拆成两行：第一行是「谁 + 几颗星 + 什么时候」，
   第二行是正文。合成一行的话长评价会把星级挤出卡片。 */
.rv-item { border-bottom: 0; padding-bottom: 6px; }
.rv-item .m-row__d { display: flex; align-items: center; gap: 8px; }
.rv-ava { border-radius: 50%; }
.rv-ava img { border-radius: 50%; }
/* 星级用图标字体而不是图片：以前是两排 <img width=12>，
   高分和低分只有文件名的区别，改样式得换图 */
.rv-stars { display: inline-flex; gap: 1px; }
.rv-stars i { font-size: 12px; color: var(--hp-line); }
.rv-stars i.is-on { color: #f0a020; }
.rv-body { padding: 0 18px 12px; }
.rv-body p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--hp-ink2); word-break: break-word; }
.rv-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.rv-imgs img {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  border: 1px solid var(--hp-line2);
  object-fit: cover;
  cursor: zoom-in;
}
@media (max-width: 600px) {
  .rv-body { padding: 0 12px 10px; }
}

/* ============ 弹窗 ============
   store-ui 的遮罩靠 flex 居中，但 order.js 打开弹窗用的是
   style.display = 'block'（不是加 class）。一旦被设成 block，
   居中就没了，弹窗会贴在页面左上角 —— 取消订单弹窗在订单列表和
   订单详情两页都会走到。这里在会员中心范围内把 block 拉回 flex。
   只作用域到 .hp-body，免得影响前台别处的弹窗。 */
.hp-body .vp-popup-overlay[style*="display: block"] { display: flex !important; }
.hp-body .vp-popup-overlay[style*="display:block"] { display: flex !important; }
/* 点遮罩空白处关闭：取消订单是破坏性操作，
   必须给一个「什么都不做就退出去」的退路，不能只有右上角那个叉 */
.hp-body .vp-popup-overlay { cursor: default; }

/* ============ 整页空态 ============
   卡片里的空态用 .m-empty（一行横排）；整页没数据时用这个，图在上文字在下居中。 */
.m-emptybox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 20px;
  text-align: center;
}
.m-emptybox__i {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--hp-soft);
  color: var(--hp-ink4);
  display: grid;
  place-items: center;
  font-size: 22px;
  margin-bottom: 2px;
}
.m-emptybox__t { font-size: 13.5px; font-weight: 600; }
.m-emptybox__d { font-size: 12px; color: var(--hp-ink3); max-width: 320px; line-height: 1.7; }
.m-emptybox .m-btn { margin-top: 6px; }

/* ============ 用途说明（「余额可以用在」）============
   纯文字三连，不配图标：图标在这里只会让人以为是三个可点的入口 */
.m-use { display: block; padding: 11px 18px; border-bottom: 1px solid var(--hp-line2); }
.m-use:last-child { border-bottom: 0; }
.m-use__t { font-size: 12.5px; font-weight: 500; }
.m-use__d { margin-top: 2px; font-size: 11.5px; color: var(--hp-ink3); line-height: 1.65; }

/* ============ 大数字卡（余额页 / 余额明细页共用）============
   只强调数字本身，不用深色大块：会员中心其它块都是「白底 + 1px 线」，
   单独一张深色大卡会把页面切成两半。
   右侧的积分块只在店铺开了积分时才渲染，所以不用处理空态。 */
.m-hero {
  padding: 16px 18px;
  border: 1px solid var(--hp-line);
  border-radius: var(--hp-r-lg);
  background: #fff;
}
.m-hero__row { display: flex; align-items: flex-start; gap: 12px; }
.m-hero__row > div:first-child { min-width: 0; flex: 1; }
.m-hero__k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-ink3); }
.m-hero__v {
  margin-top: 2px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.m-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hp-line2);
  font-size: 12px;
  color: var(--hp-ink3);
  font-variant-numeric: tabular-nums;
}
/* 余额卡重排：余额与操作按钮同一行，积分并进 meta 行
   原来积分竖排在右侧、还带一条竖分隔线，和左边 30px 的余额完全不成比例 */
.m-hero__top { display: flex; align-items: flex-start; gap: 14px; }
.m-hero__main { min-width: 0; flex: 1; }
.m-hero__acts { flex: none; display: flex; gap: 8px; }
.m-hero__pt { color: var(--hp-accent); }
.m-hero__pt b { font-weight: 600; font-variant-numeric: tabular-nums; }
.m-hero__tip { margin-top: 8px; font-size: 11px; color: var(--hp-ink4); }

.m-hero__pts { flex: none; text-align: right; padding-left: 12px; border-left: 1px solid var(--hp-line2); }
.m-hero__pv {
  margin-top: 2px;
  color: var(--hp-accent);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.m-hero__ps { margin-top: 1px; font-size: 11px; color: var(--hp-ink4); }

/* ============ 行动条 ============
   和顶部横幅（.m-banner）的区别：横幅讲的是「发生了什么事」，
   行动条讲的是「你可以做什么」，所以按钮必带、文案更短。 */
.m-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--hp-r-lg);
  background: var(--hp-accent-soft);
  border: 1px solid var(--hp-accent-line);
}
.m-cta__t { font-size: 13px; font-weight: 600; color: var(--hp-accent); }
.m-cta__d { margin-top: 2px; font-size: 11.5px; color: var(--hp-ink2); }
.m-cta > .m-btn { margin-left: auto; flex: none; }
/* 「刚发生的事」：加一条左侧色条，和常驻引导区分开 */
.m-cta--ok { border-left: 3px solid var(--hp-accent); }
.m-cta--warn { background: var(--hp-warn-bg); border-color: var(--hp-warn-line); }
.m-cta--warn .m-cta__t { color: var(--hp-warn-ink); }

/* ============ 说明条 ============
   规则/限制类文字统一放这里：卡片里说不清、也不该占一整张卡的那些话。 */
.m-note {
  padding: 11px 14px;
  border-radius: var(--hp-r);
  background: #fff;
  border: 1px solid var(--hp-line);
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--hp-ink3);
}
.m-note b { color: var(--hp-ink2); font-weight: 600; }

/* ============ 两列骨架（概览 / 包裹共用）：主区 + 344 侧列 ============ */
.m-grid2 { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.m-grid2__l, .m-grid2__r { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.m-grid2__r { gap: 14px; }

@media (max-width: 1180px) {
  .m-grid2 { grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; }
}

@media (max-width: 1100px) {
  /* 两列挤不开就上下排。侧列放前还是放后由页面决定：
     概览页的「账户/消息」该在前面，包裹页的「运费预估」该跟在列表后面。 */
  .m-grid2 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   响应式
   断点只有 992 / 600 两档，和前台主题组件层一致（kit.css）。
   会员页内容区本身就窄（1200 - 48 - 216 = 936），再切一档只会让规则互相打架。
   ========================================================================== */

@media (max-width: 992px) {
  .m-page { gap: 14px; }

  /* 订单卡：窄屏时状态徽标不再靠右（会和单号抢位置），改成跟在单号后面；
     底部合计行改成上下两段，按钮整行铺开更好点。 */
  .m-ord__h { flex-wrap: wrap; gap: 8px; }
  .m-ord__h .m-pill { margin-left: 0; }
  .m-ord__f { flex-direction: column; align-items: stretch; gap: 10px; }
  .m-ord__sum { text-align: left; }
  .m-ord__acts { margin-left: 0; }
  /* 手机端按钮平分会让「去支付」和「取消订单」一样大，主操作不突出；
     主按钮占两份宽（照 v4 手机端：支付尾款比看明细宽一倍） */
  .m-ord__acts .m-btn { flex: 1 1 auto; }
  .m-ord__acts .m-btn--primary { flex: 2 1 auto; }

  /* 分页：首尾页按钮在窄屏上是奢侈品，只留上一页 / 下一页 + 页码 */
  .m-pager .m-pg:first-child,
  .m-pager .m-pg:last-child,
  .m-pager .m-pg:nth-child(2),
  .m-pager .m-pg:nth-last-child(2) { display: none; }
}

@media (max-width: 600px) {
  /* 手机上筛选标签必须能横向滚：7 个标签换行会吃掉三行高度，
     把下面的列表整个推出首屏。横向滚动 + 不显示滚动条，手指能滑。 */
  .m-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .m-tabs::-webkit-scrollbar { display: none; }
  .m-tab { flex: none; }

  .m-ord__h { padding: 9px 12px; }
  .m-ord__g { padding: 9px 12px; gap: 8px; }
  .m-ord__f { padding: 10px 12px; }
  /* 商品行里「评价」按钮会挤掉数量，窄屏先让它换行到下一行右侧 */
  .m-ord__g > .m-btn { order: 3; }
  .m-row { padding: 10px 12px; }
  .m-kv { padding: 8px 12px; }
  .m-emptybox { padding: 32px 16px; }
  .m-hero { padding: 14px; }
  .m-hero__v { font-size: 26px; }
  /* 余额卡右侧的积分块在窄屏上会把余额挤成两行，落到下面变成横向排列 */
  .m-hero__row { flex-wrap: wrap; gap: 10px; }
  .m-hero__pts { padding-left: 0; border-left: 0; text-align: left; }
  .m-cta { flex-wrap: wrap; }
  .m-cta > .m-btn { margin-left: 0; width: 100%; }
}

/* ============ 钱包页：积分与最近变动并排 ============
   两张列表竖着堆会把页面拉到 1400px 以上，一屏只能看到一张。
   窄屏自动回落成单列（auto-fit）。 */
.m-wallet-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}
/* 居中说明：用途压缩成一行后放在余额卡下面 */
.m-hint--center { text-align: center; }