/* ==========================================================================
   会员中心外壳（左导航 + 右内容）
   度量与视觉照 v4 视觉稿（member-center-v4.html）：240px 侧栏、64px 顶栏、
   白底主区 + #fbfcfd 侧栏、选中项白底描边 + 左侧外侧 2px 竖条。

   本文件只管外壳、令牌、断点；页面级样式留在各自文件
   （usercenter-home.css / parcel.css / wallet.css）。
   颜色走项目令牌并带兜底：主题改 --vn-primary 时这里跟着变。
   ========================================================================== */

.hp-body {
  /* v4 的灰阶（比通用前台更细腻：ink-4 专门给小字提示用） */
  --hp-ink: var(--tf-ink, #14161a);
  --hp-ink2: var(--tf-ink-2, #4b5160);
  --hp-ink3: var(--tf-ink-3, #8b90a0);
  --hp-ink4: #b6bac6;
  --hp-line: var(--tf-line, #e6e9ef);
  --hp-line2: #f0f2f7;
  --hp-soft: #f6f7f9;
  --hp-side-bg: #fbfcfd;
  /* 默认值只是兜底：真正的主色由 member_theme.html 按店铺主题注入 */
  --hp-accent: var(--vn-primary, #0a6b52);
  --hp-accent2: #0d8265;
  --hp-accent-soft: var(--vn-primary-bg, #e9f4f0);
  --hp-accent-line: #cfe6dd;
  --hp-warn-ink: #96620a;
  --hp-warn-bg: #fdf4e0;
  --hp-warn-line: #f3e2bc;
  --hp-info-ink: #22508f;
  --hp-info-bg: #eaf0fa;
  --hp-ship-ink: #0d6771;
  --hp-ship-bg: #e4f2f4;
  --hp-done-ink: #4b5160;
  --hp-done-bg: #eef0f5;
  --hp-after-ink: #6647a3;
  --hp-after-bg: #f0ebfa;
  --hp-r: 10px;
  --hp-r-lg: 14px;
  margin: 0;
  color: var(--hp-ink);
  font: 13px/1.55 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
        "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 各页内容高度不同，有没有竖向滚动条会让视口宽度差 15px，
   居中的外壳就会左右跳一下（点左侧栏目时特别明显）。
   scrollbar-gutter 给滚动条常驻预留位置，进出页面都不再位移。 */
html { scrollbar-gutter: stable; overflow-y: scroll; }

/* 老的会员页外面套着一层 .page-wrapper.vp-wrapper，它是 display:flex。
   在 flex 容器里外壳是 flex item，宽度和居中基准都会随内容变化 ——
   实测同一分辨率下左侧起点有 15 / 20 两种值，切栏目时会左右抖一下。
   这里统一改回 block，让外壳的父容器永远是「body 的内容盒」。 */
.hp-body .page-wrapper.vp-wrapper { display: block; width: 100%; }

/* 页面底色纯白：会员中心整块都是白底 + 细线，页外再压一层灰会在
   超宽屏两侧切出两条深色带（用户明确不要）。区分靠侧栏底色和边框，不靠底色。
   仍然排除 .theme-dark：暗色主题的 body 底色归主题管。 */
.hp-body:not(.theme-dark) { background: #fff; }

/* ============ 外壳 ============ */
.hp-shell {
  /* 全站顶栏的实际高度（桌面 66 / 手机 58）。
     侧栏 sticky、内容区标题条吸顶、hp-main 的最小高度都靠它算，
     改顶栏高度只改这一个值。 */
  --hp-top: 66px;
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  min-height: calc(100vh - var(--hp-top, 66px));
  align-items: start;
  /* 和顶部导航同一个盒子：顶栏的内容栅格是 .tk-wrap（max-width 1240 + 左右各 24），
     这里必须取同一个值，否则会员中心正文的左右边界会比顶栏每边少缩 20px，
     两段内容看起来「没对齐」—— 尤其是左侧栏那条竖线和顶栏品牌左边缘差一点点，
     人眼对这种 20px 的错位非常敏感。
     以前取的是 --tf-maxw(1200)，但全站顶栏用的是 kit 的 1240，两边对不上。 */
  max-width: var(--tk-max, 1240px);
  margin: 0 auto;
  padding-inline: 24px;
  background: #fff;
  /* width:100% 是必需的，不是保险：
     订单/地址/优惠券这些老页面外面还套着一层 .page-wrapper.vp-wrapper（display:flex），
     外壳作为 flex item 会被内容宽度收窄 —— 地址页实测只有 712 宽、居中悬在中间。
     概览页内容多，max-content 恰好顶到 1400，所以看不出问题。 */
  width: 100%;
}


/* ============ 顶部全站栏（theme-kit/kit-header.css）在会员页的两处适配 ============ */

/* 1. 常驻下划线。首页顶栏那条 border 是透明的，滚动后才显形 ——
      在首页成立，因为下面接着的是米色首屏；会员页正文是纯白，
      米色顶栏压在纯白上，不画线就是「顶栏浮在半空」。 */
.hp-body .tk-hd {
  border-bottom-color: var(--tk-line);
}

/* 2. 顶栏不在 .hp-shell 里面，页面高度要减掉它，否则会多出一条空滚动条 */

/* ============ 左侧导航 ============ */
.hp-side {
  position: sticky;
  /* 让开顶部那条全站顶栏（桌面 66 / 手机 58，见 --hp-top）。
     以前 top:0 + height:100vh 是「头顶没有别的东西」的前提，
     现在顶栏常驻在上面，不改就会被压掉最上面一截（SHOP 分组看不全）。 */
  top: var(--hp-top, 66px);
  height: calc(100vh - var(--hp-top, 66px));
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 14px;
  background: var(--hp-side-bg);
  border-right: 1px solid var(--hp-line);
  overflow-y: auto;
}

/* 店名块已移除：顶栏左侧就是品牌位，侧栏再挂一份等于一屏两个店标。
   删掉之后第一个分组标题挨得太靠上，把它的上内距收到 6px 补回来。 */
.hp-side > .hp-nav > .hp-nav__g:first-child { padding-top: 6px; }

/* 导航吃掉剩余空间，把下面几块（异常提醒 / 欠款 / 余额 / 退出）顶到底部。
   以前是每块自己写 margin-top:auto：只有余额卡时没问题，
   现在底下最多会有三张卡，三个 auto 会把空白平分掉，卡片散在中间。
   把推挤交给唯一一个元素，卡片只管自己之间的间距。 */
/* 导航不再吃掉剩余空间：提醒卡从侧栏搬走后，原来那条 margin-bottom:auto
   会在导航下面留一大片空白、再把余额卡孤零零推到最底。
   现在按「导航 → 余额 → 退出」自然往下排，只让退出区贴底。 */
.hp-nav { display: flex; flex-direction: column; gap: 2px; }
.hp-nav__g {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--hp-ink4);
  padding: 12px 10px 6px;
}
.hp-nav__i {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--hp-ink2);
  text-decoration: none;
  font-size: 13px;
}
.hp-nav__i i { width: 16px; text-align: center; font-size: 15px; color: var(--hp-ink3); }
.hp-nav__i span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-nav__i:hover { background: #f2f4f8; color: var(--hp-ink); }
/* v4 的选中态：白底 + 一圈描边 + 极淡投影，靠左外侧一根 2px 竖条定位 */
.hp-nav__i.is-on {
  background: #fff;
  color: var(--hp-ink);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--hp-line), 0 1px 2px rgba(20, 22, 26, .05);
}
.hp-nav__i.is-on::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 2px;
  background: var(--hp-accent);
}
.hp-nav__i.is-on i { color: var(--hp-accent); }
.hp-nav__n {
  margin-left: auto;
  flex: none;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: var(--hp-ink2);
  background: #eceff4;
  border-radius: 20px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}
.hp-nav__i.is-on .hp-nav__n { background: var(--hp-accent-soft); color: var(--hp-accent); }
/* 有欠款（含逾期）时角标转告警色：付款是整个会员中心最急的事，
   和「订单 3」这种纯计数用同一个灰底就分不出轻重了。 */
.hp-nav__i.is-due .hp-nav__n {
  background: var(--hp-warn-bg);
  color: var(--hp-warn-ink);
}
.hp-nav__i.is-on.is-due .hp-nav__n { background: var(--hp-warn-bg); color: var(--hp-warn-ink); }

/* 包裹有异常时，条目本身也跟着变（不只是加个角标）：
   侧栏扫一眼就知道「进包裹页有东西要处理」，而不是进去才发现。
   用图标而不是数字 —— 异常种类有四种，堆四个数字就没地方放名字了。 */
.hp-nav__w {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  color: var(--hp-warn-ink);
  font-size: 13px;
}
.hp-nav__i.is-alert { color: var(--hp-warn-ink); }
.hp-nav__i.is-alert i { color: var(--hp-warn-ink); }
.hp-nav__i.is-alert .hp-nav__n { margin-left: 5px; }
.hp-nav__i.is-on.is-alert { color: var(--hp-warn-ink); }
.hp-nav__i.is-on.is-alert i { color: var(--hp-warn-ink); }

/* ============ 顶栏通知中心 ============
   包裹异常 / 待付尾款 / 待评价原来做成侧栏卡片，把「去哪一页」的导航挤得看不出
   层级；现在收进顶栏铃铛的下拉面板，侧栏只管导航。 */
.hp-bell { position: relative; }
.hp-bell__pop {
  position: absolute;
  top: 42px;
  right: 0;
  z-index: 60;
  width: 300px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--hp-line);
  background: #fff;
  box-shadow: 0 10px 30px rgba(20, 30, 50, .14);
}
.hp-bell__pop[hidden] { display: none; }
.hp-bell__h {
  padding: 6px 10px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--hp-ink4);
  letter-spacing: .04em;
}
.hp-bell__i {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 9px;
  text-decoration: none;
  color: inherit;
}
.hp-bell__i:hover { background: #f5f7fa; }
.hp-bell__ic {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--hp-accent-soft);
  color: var(--hp-accent);
  font-size: 13px;
}
.hp-bell__ic--warn { background: var(--hp-warn-bg); color: var(--hp-warn-ink); }
.hp-bell__x { min-width: 0; flex: 1; }
.hp-bell__x b {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--hp-ink);
  line-height: 1.4;
}
.hp-bell__x b u { text-decoration: none; color: var(--hp-warn-ink); font-variant-numeric: tabular-nums; }
.hp-bell__x em {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  color: var(--hp-ink3);
  line-height: 1.5;
}
.hp-bell__x em span { white-space: nowrap; }
.hp-bell__x em span + span { position: relative; padding-left: 9px; }
.hp-bell__x em span + span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-top: -1px;
  border-radius: 50%;
  background: var(--hp-ink4);
}
.hp-bell__x em .is-bad { color: var(--hp-warn-ink); font-weight: 600; }
.hp-bell__i.is-due .hp-bell__ic { background: var(--hp-warn-bg); color: var(--hp-warn-ink); }
.hp-bell__go { flex: none; align-self: center; color: var(--hp-ink4); font-size: 12px; }
.hp-bell__all {
  display: block;
  margin-top: 4px;
  padding: 8px 10px 6px;
  border-top: 1px solid var(--hp-line2);
  text-align: center;
  font-size: 11.5px;
  color: var(--hp-accent);
  text-decoration: none;
}
.hp-bell__all:hover { text-decoration: underline; }

/* 侧栏底部区（余额卡 + 返回/退出）整体贴底。
   原来余额卡紧跟导航、退出用 margin-top:auto 单独沉底，
   中间会空出一大片，看着像两块互不相干的东西。 */
.hp-side__bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 余额卡（v4 那里是会员等级进度）。站里没有等级体系，换成真实数据：
   可用余额 + 积分。层级靠字号和颜色拉开：
   小字标签 → 大号金额 → 次要说明 → 链接，全部 11.5px 会糊成一片。 */
.hp-side__card {
  display: flex;
  flex-direction: column;
  padding: 12px 12px 11px;
  border-radius: 10px;
  background: #f4f6f9;
  line-height: 1.5;
}
.hp-side__c-l { font-size: 11px; color: var(--hp-ink4); letter-spacing: .02em; }
.hp-side__c-v {
  margin-top: 1px;
  font-size: 17px;
  font-weight: 600;
  color: var(--hp-ink);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.hp-side__c-s { margin-top: 2px; font-size: 11px; color: var(--hp-ink3); }
.hp-side__c-a {
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--hp-accent);
  text-decoration: none;
}
.hp-side__c-a:hover { text-decoration: underline; }
/* 旧结构兼容（别的模板可能还写着 b/.num 那套） */
.hp-side__card b {
  display: block;
  color: var(--hp-ink);
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
}
.hp-side__card .num { color: var(--hp-ink2); font-variant-numeric: tabular-nums; }
.hp-side__card a { color: var(--hp-accent); text-decoration: none; }
.hp-side__meter { height: 6px; border-radius: 4px; background: #eceff4; overflow: hidden; margin-top: 7px; }
.hp-side__meter i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--hp-accent), var(--hp-accent2));
}

.hp-side__foot { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--hp-line); }

.hp-side__back, .hp-side__quit {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--hp-ink3);
  font: inherit;
  font-size: 12.5px;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.hp-side__back:hover, .hp-side__quit:hover { background: #f2f4f8; color: var(--hp-ink2); }
.hp-side__back i, .hp-side__quit i { width: 16px; text-align: center; font-size: 13px; }

/* ============ 右侧主区 ============ */
.hp-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* 顶栏在 shell 外面（全站统一那条），这里减掉它的高度，
     否则两处 height:100vh 会把页面撑出一条多余的滚动条。 */
  min-height: calc(100vh - var(--hp-top, 66px));
  background: #fff;
}

/* ---------- 内容区首行标题（方案 C：标题从顶栏下沉到这里） ----------
   桌面 48px / 手机 44px，滚动时整条吸顶在顶栏下面，并收成 42px 细条
   （字号 17→15）：吸住之后它的角色从「页面标题」变成「你在这页的标志」，
   尺寸上就该比顶栏轻一档，否则两条 60+ 的横条压在一起，内容区没剩多少。 */
.hp-pagehead {
  position: sticky;
  top: var(--hp-top, 66px);
  z-index: 30;
  display: flex;
  /* 居中而不是基线对齐：基线和 34px 的圆形图标按钮对不齐，
     按钮会被压到标题条下沿外（图标半截露在外面，角标更是整个跑出去）。 */
  align-items: center;
  gap: 10px;
  flex: none;
  height: 48px;
  padding: 0 28px;
  background: #fff;
  border-bottom: 1px solid transparent;
  transition: height .18s ease, box-shadow .2s ease, border-color .2s ease;
  /* 吸顶会改自身高度（48→42），滚动锚定会为了"内容不跳"反过来调 scrollY，
     两头一凑就成了死循环：内容刚好比视口高几像素时，标题条会每秒抖好几次。 */
  overflow-anchor: none;
}
/* 吸顶后收成细条 + 描一条极浅的分界：底色和内容区都是白的，不画会糊成一片 */
.hp-pagehead.is-stuck {
  height: 42px;
  border-bottom-color: var(--hp-line);
  box-shadow: 0 6px 14px -12px rgba(22, 28, 38, .22);
}
.hp-pagehead h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--hp-ink);
  white-space: nowrap;
  transition: font-size .18s ease;
}
.hp-pagehead.is-stuck h1 { font-size: 15px; }
.hp-pagehead__crumb {
  font-size: 12px;
  color: var(--hp-ink4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* 标题和面包屑之间用基线对齐，两者视觉上才是一条线；
     整条用居中，只是把右边的图标按钮摆正。 */
  align-self: center;
  margin-top: 2px;
}
.hp-pagehead__r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* 标题条里的铃铛降一档：这里是内容区，不该长得比顶栏图标还重 */
.hp-pagehead .hp-iconbtn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border-color: transparent;
  font-size: 15px;
}
.hp-pagehead .hp-iconbtn:hover { background: #f2f4f8; border-color: transparent; }
/* 铃铛面板贴着标题条底部展开 */
.hp-pagehead .hp-bell__pop { top: 40px; right: 0; }

.hp-iconbtn {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--hp-line);
  background: #fff;
  color: var(--hp-ink2);
  display: grid;
  place-items: center;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.hp-iconbtn:hover { border-color: var(--hp-ink4); color: var(--hp-ink); }
.hp-iconbtn .n {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  background: var(--hp-accent);
  color: #fff;
  font-size: 9.5px;
  line-height: 15px;
  font-weight: 600;
  text-align: center;
  padding: 0 4px;
}


/* 身份：头像 + 昵称 + 邮箱（v4 里前面有一条竖线分隔） */
.hp-who {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 12px;
  border-left: 1px solid var(--hp-line);
  min-width: 0;
}
.hp-who__m { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hp-who__n {
  font-size: 12.5px;
  font-weight: 500;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hp-who__s {
  font-size: 10.5px;
  color: var(--hp-ink3);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-ava {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e6eaf1;
  color: var(--hp-ink2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  overflow: hidden;
}
.hp-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-ava--sm { width: 30px; height: 30px; font-size: 11.5px; }

/* 内容区：上下留白与 v4 一致（22 / 28 / 30） */
.hp-content { flex: 1; padding: 22px 28px 30px; min-width: 0; background: #fff; }

/* 老的会员页（订单/地址/优惠券…）都套了一层 .vp-user-main，它自带上下内边距，
   放进外壳后会和 .hp-content 叠成双倍留白，这里统一抹掉，不用逐页去改。 */
.hp-content .vp-user-main { padding: 0; }

/* 这些老页面还各自带着「左侧会员菜单」和「页面大标题」，
   进了外壳之后和左导航、顶栏标题完全重复。统一收掉：
   只保留它们自己的右侧内容（订单状态标签、地址列表是页内导航，要留）。 */
.hp-content .vp-user-sidebar { display: none; }
.hp-content .vp-page-header h2 { display: none; }
/* 页头通常只剩「添加地址 / 编辑」这类动作按钮，收成右对齐的工具条。
   只能在桌面改：手机上 store-ui 原本就把 .vp-page-header 整块隐藏了。 */
@media (min-width: 769px) {
  .hp-content .vp-page-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-height: 0;
    margin-bottom: 10px;
  }
}

/* 手机端顶部条已移除：手机上用的就是全站那条 58px 顶栏（汉堡 + 品牌 + 图标），
   和首页完全一致。会员页自己的「标题 + 返回」不再单独占一行，
   标题落在内容区首行（.hp-pagehead）。 */

/* 会员中心整块不显示站点页脚。
   桌面：应用式布局里挂一条通栏黑底页脚会把左右分界切得很脏；
   手机：底部已经有固定的 5 个 tab，再压一条黑色大页脚既重复又割裂，
   和 v4 的浅色语言也对不上。 */
.hp-foot { display: none; }

/* ============ 响应式（只处理外壳，内容的断点在各自文件） ============ */
/* 断点必须和 theme-kit/kit.css 对齐到 991：
   顶栏在 991 以下换成汉堡版（58px），外壳如果还在 900 才收侧栏，
   900~991 这一段就会出现「顶栏已经是手机版、左边还杵着侧栏」的错位。 */
@media (max-width: 1180px) {
  .hp-content { padding: 18px 20px 30px; }
  .hp-pagehead { padding: 0 20px; }
}

@media (max-width: 991px) {
  /* 侧栏收起：网格变单列 */
  .hp-shell { grid-template-columns: minmax(0, 1fr); padding-inline: 0; --hp-top: 58px; }
  .hp-side { display: none; }
  .hp-pagehead { height: 44px; padding: 0 12px; }
  .hp-pagehead.is-stuck { height: 40px; }
  .hp-pagehead h1 { font-size: 15.5px; }
  .hp-pagehead .hp-bell__pop { width: min(300px, calc(100vw - 24px)); }
  .hp-content { padding: 14px 12px 24px; }
  /* 底部有站点导航，留出高度，否则最后一块内容永远被压住 */
  .hp-main { padding-bottom: 64px; }
}

/* ============ PJAX 顶部进度条 ============ */
/* 局部刷新的代价是「点了没反应」比整页刷新更明显（没有浏览器自己的转圈），
   所以给一条 2px 的进度线，切换时一闪而过。 */
.hp-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--hp-accent);
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: width .25s ease, opacity .2s ease;
}
.hp-progress.is-on { width: 82%; opacity: 1; }