/* ============================================================================
   店铺前台 · 组件层 v2（百搭 / 人性化 / 细节）
   ----------------------------------------------------------------------------
   定位：/Asset/tf-ui.css 是「token + 覆盖层」，这一份是**组件层**。
   加载顺序：style.css → iconfont.css → vp_common.css → tf-ui.css → store-ui.css
   必须最后加载，才能盖住 pixio 的老规则（各页面自己的内联 <style> 已逐页移除）。

   百搭原则
     1. 只吃 --tf-* token，全部带兜底值，换主题/换肤都不会崩；
     2. 不用品牌绿蓝当主色，CTA 走 --tf-cta（近黑），强调色只给价格与风险操作；
     3. 唯一断点 992px，和 vp-show-pc / vp-show-mobile 一致；
     4. 选择器最多两层，不和 pixio 的深层规则打架。

   人性化
     · 可点区域 >= 44px（--tf-tap），手机上不用瞄准；
     · 数字 tabular-nums，价格/数量滚动不抖；
     · :focus-visible 统一描边；
     · 底部固定条带 env(safe-area-inset-bottom)；
     · 尊重 prefers-reduced-motion。

   写法约定
     · 基础规则先写，媒体查询统一放文件末尾的「响应式层」，
       否则同权重下会被后面的基础规则盖掉（这里踩过）。
   ========================================================================== */

/* ---------- 0. 兜底 token（没加载 tf-ui.css 也不至于裸奔） ---------- */
:where(:root) {
  --tf-bg: #fff;
  --tf-surface: #f6f7f9;
  --tf-surface-2: #eef0f4;
  --tf-card: #fff;
  --tf-ink: #111318;
  --tf-ink-2: #5b6270;
  --tf-ink-3: #9ba2af;
  --tf-line: #edeff3;
  --tf-line-2: #e2e5eb;
  --tf-cta: #111318;
  --tf-cta-hover: #262a33;
  --tf-accent: #ff4d1c;
  --tf-accent-soft: #fff1ec;
  --tf-ok: #12a150;
  --tf-ok-soft: #eaf7ef;
  --tf-warn: #b7791f;
  --tf-warn-soft: #fdf6e7;
  --tf-danger: #d93025;
  --tf-danger-soft: #fdedeb;
  --tf-r-xs: 6px;
  --tf-r-sm: 10px;
  --tf-r: 16px;
  --tf-r-lg: 22px;
  --tf-r-pill: 999px;
  --tf-sh-1: 0 1px 2px rgba(17, 19, 24, .04);
  --tf-sh-2: 0 2px 10px rgba(17, 19, 24, .06);
  --tf-sh-3: 0 14px 36px rgba(17, 19, 24, .1);
  --tf-s1: 4px;
  --tf-s2: 8px;
  --tf-s3: 12px;
  --tf-s4: 16px;
  --tf-s5: 20px;
  --tf-s6: 24px;
  --tf-s7: 32px;
  --tf-s8: 40px;
  --tf-maxw: 1200px;
  --tf-gutter: 16px;
  --tf-tap: 44px;
  --tf-brand: #111318;
}

/* ---------- 1. 骨架与工具 ---------- */
.vp-wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--tf-bg);
  color: var(--tf-ink);
}

.vp-wrapper>main,
.vp-cart-main,
.vp-main {
  flex: 1 1 auto;
}

.container,
.vp-container {
  width: 100%;
  max-width: var(--tf-maxw);
  margin: 0 auto;
  padding-inline: var(--tf-gutter);
}

/* 通用隐藏工具类：页面里用了 d-none（原来靠内联样式兜的），
   删掉内联样式后不收口就会把 <input type="file"> 露出来，把表单撑宽 */
.d-none {
  display: none !important;
}

/* JS 用 classList 切换的工具类。各页内联样式抽走时必须一起收口，
   否则「配送方式」这类由脚本控制的区块会露着标题却没内容（结算页踩过）。 */
.hidden {
  display: none !important;
}

.disabled,
.is-disabled {
  opacity: .45;
  pointer-events: none;
}

/* 选品详情旧 partial 里用的次级按钮底色 */
.button-background-2 {
  background: var(--tf-surface);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 2. 按钮 ---------- */
.vp-btn,
.vp-btn-primary,
.vp-btn-outline,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tf-s2);
  min-height: var(--tf-tap);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--tf-r-sm);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease,
    color .18s ease, transform .12s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}

.vp-btn:active,
.vp-btn-primary:active,
.vp-btn-outline:active {
  transform: scale(.985);
}

.vp-btn:focus-visible,
.vp-btn-primary:focus-visible,
.vp-btn-outline:focus-visible,
.vp-qty-btn:focus-visible,
.vp-cart-remove:focus-visible,
.vp-mobile-cart-remove:focus-visible {
  outline: 2px solid var(--tf-cta);
  outline-offset: 2px;
}

.vp-btn-primary {
  background: var(--tf-cta);
  border-color: var(--tf-cta);
  color: #fff;
}

.vp-btn-primary:hover {
  background: var(--tf-cta-hover);
  border-color: var(--tf-cta-hover);
}

.vp-btn-outline {
  background: var(--tf-card);
  border-color: var(--tf-line-2);
  color: var(--tf-ink);
}

.vp-btn-outline:hover {
  border-color: var(--tf-ink);
}

.vp-btn-block {
  width: 100%;
}

.vp-btn[disabled],
.vp-btn-primary[disabled],
.vp-btn-outline[disabled] {
  background: var(--tf-surface-2);
  border-color: transparent;
  color: var(--tf-ink-3);
  cursor: not-allowed;
  transform: none;
}

/* ---------- 3. 顶部导航 ---------- */
.vp-pc-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--tf-card);
  border-bottom: 1px solid var(--tf-line);
}

@supports (backdrop-filter: blur(8px)) {
  .vp-pc-header {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(12px);
  }
}

.vp-pc-header-inner {
  max-width: var(--tf-maxw);
  margin: 0 auto;
  padding-inline: 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: var(--tf-s6);
}

.vp-pc-header-left {
  display: flex;
  align-items: center;
  gap: var(--tf-s7);
  min-width: 0;
}

.vp-pc-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: var(--tf-tap);
}

.vp-pc-logo img {
  max-height: 36px;
  max-width: 160px;
  object-fit: contain;
}

.vp-pc-logo span {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tf-ink);
  white-space: nowrap;
}

.vp-pc-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.vp-pc-nav-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--tf-r-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--tf-ink-2);
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease;
}

.vp-pc-nav-link:hover {
  color: var(--tf-ink);
  background: var(--tf-surface);
}

.vp-pc-header-right {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--tf-s2);
}

.vp-pc-cart,
.vp-mobile-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tf-tap);
  height: var(--tf-tap);
  border-radius: var(--tf-r-sm);
  color: var(--tf-ink);
  font-size: 20px;
  transition: background-color .18s ease;
}

.vp-pc-cart:hover,
.vp-mobile-cart:hover {
  background: var(--tf-surface);
}

.vp-cart-badge {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--tf-r-pill);
  background: var(--tf-accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px var(--tf-card);
}

/* 移动端顶栏 */
.vp-mobile-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--tf-card);
  border-bottom: 1px solid var(--tf-line);
}

.vp-mobile-header-inner {
  display: flex;
  align-items: center;
  gap: var(--tf-s2);
  height: 56px;
  padding-inline: var(--tf-s2);
}

.vp-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tf-tap);
  height: var(--tf-tap);
  border-radius: var(--tf-r-sm);
  color: var(--tf-ink);
  font-size: 20px;
  flex-shrink: 0;
}

.vp-back-btn:active {
  background: var(--tf-surface);
}

.vp-mobile-title {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vp-mobile-header-inner>.vp-mobile-cart {
  flex-shrink: 0;
}

/* ---------- 4. 页脚 ---------- */
.vp-pc-footer {
  margin-top: var(--tf-s8);
  background: var(--tf-surface);
  border-top: 1px solid var(--tf-line);
}

.vp-pc-footer-inner {
  max-width: var(--tf-maxw);
  margin: 0 auto;
  padding: var(--tf-s8) 24px var(--tf-s5);
}

.vp-footer-content {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr));
  gap: var(--tf-s7);
}

.vp-footer-section h4 {
  margin: 0 0 var(--tf-s3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tf-ink-3);
}

.vp-footer-section p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--tf-ink-2);
  max-width: 34em;
}

/* 页脚文字链：字号 13.5 行高只有 19px，手机上点不准，按 32 给最小热区 */
.vp-footer-section a,
.vp-footer-bottom a,
.vp-footer-content a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.vp-footer-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--tf-s2);
}

.vp-footer-section li a {
  font-size: 14px;
  color: var(--tf-ink-2);
}

.vp-footer-section li a:hover {
  color: var(--tf-ink);
}

.vp-footer-bottom {
  margin-top: var(--tf-s7);
  padding-top: var(--tf-s4);
  border-top: 1px solid var(--tf-line-2);
}

.vp-footer-bottom p {
  margin: 0;
  font-size: 12.5px;
  color: var(--tf-ink-3);
}

/* ---------- 5. 复选框（44×44 热区，容器是 label） ---------- */
.check-box-input,
input[type="checkbox"].vp-check {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--tf-line-2);
  border-radius: 6px;
  background: var(--tf-card);
  cursor: pointer;
  position: relative;
  transition: border-color .16s ease, background-color .16s ease;
}

.check-box-input::after,
input[type="checkbox"].vp-check::after {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(.6);
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
}

.check-box-input:hover,
input[type="checkbox"].vp-check:hover {
  border-color: var(--tf-ink-3);
}

.check-box-input:checked,
input[type="checkbox"].vp-check:checked {
  background: var(--tf-cta);
  border-color: var(--tf-cta);
}

.check-box-input:checked::after,
input[type="checkbox"].vp-check:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.check-box-input:focus-visible,
input[type="checkbox"].vp-check:focus-visible {
  outline: 2px solid var(--tf-cta);
  outline-offset: 2px;
}

.vp-cart-checkbox,
.vp-mobile-cart-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tf-tap);
  height: var(--tf-tap);
  flex-shrink: 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

/* ---------- 6. 数量步进器 ---------- */
.vp-qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-pill);
  background: var(--tf-card);
  overflow: hidden;
  height: 36px;
}

.vp-qty-btn {
  width: 34px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--tf-ink-2);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .16s ease, color .16s ease;
  -webkit-user-select: none;
  user-select: none;
}

.vp-qty-btn:hover {
  background: var(--tf-surface);
  color: var(--tf-ink);
}

.vp-qty-btn:active {
  background: var(--tf-surface-2);
}

.vp-qty-input {
  width: 42px;
  height: 100%;
  border: 0;
  border-inline: 1px solid var(--tf-line);
  background: transparent;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tf-ink);
  -moz-appearance: textfield;
  appearance: textfield;
}

.vp-qty-input::-webkit-outer-spin-button,
.vp-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.vp-qty-input:focus {
  outline: none;
  background: var(--tf-surface);
}

/* ---------- 7. 购物车 · PC ---------- */
.vp-cart-main {
  padding: var(--tf-s7) 0 var(--tf-s8);
}

.vp-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 356px;
  gap: var(--tf-s6);
  align-items: start;
}

.vp-cart-items {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  overflow: hidden;
}

.vp-cart-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 108px 132px 116px 44px;
  align-items: center;
  gap: var(--tf-s3);
  padding: 14px var(--tf-s5);
  background: var(--tf-surface);
  border-bottom: 1px solid var(--tf-line);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tf-ink-3);
}

.vp-cart-header-price,
.vp-cart-header-qty,
.vp-cart-header-total {
  text-align: center;
}

.vp-cart-header-action {
  width: 44px;
}

.vp-cart-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 108px 132px 116px 44px;
  align-items: center;
  gap: var(--tf-s3);
  padding: var(--tf-s4) var(--tf-s5);
  border-bottom: 1px solid var(--tf-line);
  transition: background-color .16s ease;
}

.vp-cart-item:last-child {
  border-bottom: 0;
}

.vp-cart-item:hover {
  background: var(--tf-surface);
}

.vp-cart-product {
  display: flex;
  align-items: center;
  gap: var(--tf-s4);
  min-width: 0;
}

.vp-cart-img {
  width: 84px;
  height: 84px;
  flex-shrink: 0;
  border-radius: var(--tf-r-sm);
  object-fit: cover;
  background: var(--tf-surface);
  border: 1px solid var(--tf-line);
}

.vp-cart-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vp-cart-info h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.005em;
}

.vp-cart-info h4 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--tf-ink);
}

.vp-cart-info h4 a:hover {
  color: var(--tf-ink-2);
}

.vp-cart-sku,
.vp-mobile-cart-sku {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tf-ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vp-cart-badge-proxy {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--tf-r-pill);
  background: var(--tf-accent-soft);
  color: var(--tf-accent);
  font-size: 11.5px;
  font-weight: 650;
}

.vp-cart-price,
.vp-cart-total {
  text-align: center;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--tf-ink-2);
}

.vp-cart-total .item-total {
  font-weight: 700;
  color: var(--tf-ink);
  font-size: 15.5px;
}

.vp-cart-qty {
  display: flex;
  justify-content: center;
}

.vp-cart-action {
  display: flex;
  justify-content: flex-end;
}

.vp-cart-remove,
.vp-mobile-cart-remove {
  width: var(--tf-tap);
  height: var(--tf-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--tf-r-sm);
  background: transparent;
  color: var(--tf-ink-3);
  font-size: 17px;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

.vp-cart-remove:hover,
.vp-mobile-cart-remove:hover {
  background: var(--tf-danger-soft);
  color: var(--tf-danger);
}

/* ---------- 8. 购物车 · 汇总卡 ---------- */
.vp-cart-summary {
  position: sticky;
  top: 88px;
}

.vp-summary-card {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s5);
  display: flex;
  flex-direction: column;
  gap: var(--tf-s4);
  box-shadow: var(--tf-sh-1);
}

.vp-summary-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.vp-summary-lines {
  display: grid;
  gap: 10px;
  padding-bottom: var(--tf-s4);
  border-bottom: 1px dashed var(--tf-line-2);
}

.vp-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tf-s3);
  font-size: 14px;
  color: var(--tf-ink-2);
}

.vp-line> :last-child {
  font-variant-numeric: tabular-nums;
  color: var(--tf-ink);
  text-align: end;
}

.vp-summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tf-s3);
  font-size: 15px;
  font-weight: 700;
}

.vp-summary-total> :last-child {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--tf-ink);
}

.totalprice-text,
.vp-totalprice-text {
  font-variant-numeric: tabular-nums;
}

/* ---------- 9. 购物车 · 移动 ---------- */
.vp-mobile-cart-list {
  display: grid;
  gap: var(--tf-s3);
  padding: var(--tf-s3) 0 var(--tf-s6);
}

.vp-mobile-cart-item {
  display: grid;
  grid-template-columns: 44px 76px minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--tf-s2);
  padding: var(--tf-s3);
  padding-inline-start: 0;
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
}

.vp-mobile-cart-img {
  width: 76px;
  height: 76px;
  border-radius: var(--tf-r-sm);
  object-fit: cover;
  background: var(--tf-surface);
  border: 1px solid var(--tf-line);
}

.vp-mobile-cart-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vp-mobile-cart-info h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.vp-mobile-cart-info h5 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--tf-ink);
  /* 文字链只有 20px 高，用 padding 把可点高度抬到 32，手指不容易点空 */
  padding-block: 6px;
}

.vp-mobile-cart-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tf-s2);
  margin-top: 2px;
}

.vp-mobile-cart-price {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tf-ink);
}

.vp-mobile-cart-item .vp-qty-control {
  height: 36px;
}

.vp-mobile-cart-item .vp-qty-btn {
  width: 34px;
  font-size: 16px;
  position: relative;
}

/* 视觉 36px，热区撑到 44×44 */
.vp-mobile-cart-item .vp-qty-btn::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: var(--tf-tap);
  height: var(--tf-tap);
  transform: translate(-50%, -50%);
}

.vp-mobile-cart-item .vp-qty-input {
  width: 38px;
  font-size: 13px;
}

.vp-mobile-cart-footer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: var(--tf-s3);
  padding: 10px var(--tf-gutter);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--tf-card);
  border-top: 1px solid var(--tf-line);
  box-shadow: 0 -6px 24px rgba(17, 19, 24, .06);
}

@supports (backdrop-filter: blur(10px)) {
  .vp-mobile-cart-footer {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(12px);
  }
}

.vp-mobile-footer-left {
  display: flex;
  align-items: center;
  gap: var(--tf-s2);
  min-width: 0;
  flex: 1 1 auto;
}

.vp-mobile-checkall {
  font-size: 13px;
  color: var(--tf-ink-2);
  white-space: nowrap;
  cursor: pointer;
}

.vp-mobile-footer-total {
  margin-inline-start: auto;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12.5px;
  color: var(--tf-ink-3);
  white-space: nowrap;
}

.vp-mobile-footer-total .totalprice-text {
  font-size: 17px;
  font-weight: 800;
  color: var(--tf-ink);
  letter-spacing: -.02em;
}

.vp-mobile-cart-footer .vp-btn-primary {
  flex-shrink: 0;
  min-width: 112px;
}

/* 有底部结算条时给内容留出让位，最后一张卡片不会被盖住 */
.vp-show-mobile .vp-cart-main {
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

/* ---------- 10. 空状态 ---------- */
.vp-cart-empty,
.vp-empty-state {
  text-align: center;
  padding: var(--tf-s8) var(--tf-s5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tf-s2);
}

.vp-cart-empty img,
.vp-empty-state img {
  width: 108px;
  height: 108px;
  margin: 0 0 var(--tf-s2);
  opacity: .9;
}

.vp-cart-empty h3,
.vp-empty-state h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--tf-ink);
}

.vp-cart-empty p,
.vp-empty-state p {
  margin: 0;
  font-size: 14px;
  color: var(--tf-ink-3);
  max-width: 30em;
}

.vp-cart-empty .vp-btn,
.vp-empty-state .vp-btn {
  margin-top: var(--tf-s3);
}

/* ---------- 11. 个人中心骨架（订单/地址/优惠券/消息共用） ---------- */
.vp-home-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tf-tap);
  height: var(--tf-tap);
  border-radius: var(--tf-r-sm);
  color: var(--tf-ink);
  font-size: 19px;
  flex-shrink: 0;
}

.vp-home-btn:active {
  background: var(--tf-surface);
}

.vp-pc-user {
  display: flex;
  align-items: center;
  gap: var(--tf-s2);
}

.vp-pc-user-info {
  display: inline-flex;
  align-items: center;
  gap: var(--tf-s2);
  height: var(--tf-tap);
  padding: 0 10px 0 4px;
  border-radius: var(--tf-r-pill);
  font-size: 13.5px;
  color: var(--tf-ink-2);
  transition: background-color .18s ease;
}

.vp-pc-user-info:hover {
  background: var(--tf-surface);
}

.vp-pc-user-info img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tf-surface-2);
}

.vp-pc-user-info span {
  max-width: 8em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-pc-login-btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tf-ink);
}

.vp-user-main {
  padding: var(--tf-s7) 0 var(--tf-s8);
}

.vp-user-layout {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: var(--tf-s6);
  align-items: start;
}

.vp-user-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--tf-s4);
  position: sticky;
  top: 88px;
}

.vp-user-profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--tf-s5) var(--tf-s4);
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
}

.vp-user-avatar-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tf-surface-2);
  border: 1px solid var(--tf-line);
}

.vp-user-avatar-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vp-user-name {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-user-menu {
  display: flex;
  flex-direction: column;
  padding: var(--tf-s2);
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  gap: 2px;
}

.vp-user-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: var(--tf-r-sm);
  font-size: 14px;
  color: var(--tf-ink-2);
  transition: background-color .16s ease, color .16s ease;
}

.vp-user-menu-item i {
  font-size: 15px;
  color: var(--tf-ink-3);
}

.vp-user-menu-item:hover {
  background: var(--tf-surface);
  color: var(--tf-ink);
}

.vp-user-menu-item.active {
  background: var(--tf-surface);
  color: var(--tf-ink);
  font-weight: 600;
}

.vp-user-menu-item.active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: var(--tf-r-pill);
  background: var(--tf-cta);
}

.vp-user-menu-item.active i {
  color: var(--tf-ink);
}

.vp-user-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tf-s4);
}

.vp-page-header h2 {
  margin: 0 0 2px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ---------- 12. 订单状态标签页 ---------- */
.vp-order-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.vp-order-tabs::-webkit-scrollbar {
  display: none;
}

.vp-order-tabs>a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--tf-r-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tf-ink-2);
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}

.vp-order-tabs>a:hover {
  background: var(--tf-surface);
  color: var(--tf-ink);
}

.vp-order-tabs>a.active {
  background: var(--tf-cta);
  color: #fff;
  font-weight: 650;
}

/* ---------- 13. 订单卡片 ---------- */
.vp-order-list {
  display: grid;
  gap: var(--tf-s4);
}

.vp-order-card {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.vp-order-card:hover {
  border-color: var(--tf-line-2);
  box-shadow: var(--tf-sh-2);
}

.vp-order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tf-s3);
  padding: 12px var(--tf-s5);
  background: var(--tf-surface);
  border-bottom: 1px solid var(--tf-line);
}

.vp-order-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.vp-order-no {
  font-size: 13px;
  color: var(--tf-ink-3);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-order-status {
  flex-shrink: 0;
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--tf-r-pill);
  background: var(--tf-surface-2);
  color: var(--tf-ink-2);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.vp-order-status.paid,
.vp-order-status.completed,
.vp-order-status.success {
  background: var(--tf-ok-soft);
  color: var(--tf-ok);
}

.vp-order-status.unpaid,
.vp-order-status.wait_pay,
.vp-order-status.pending {
  background: var(--tf-warn-soft);
  color: var(--tf-warn);
}

.vp-order-status.canceled,
.vp-order-status.cancelled,
.vp-order-status.closed {
  background: var(--tf-surface-2);
  color: var(--tf-ink-3);
}

.vp-order-body {
  padding: 0 var(--tf-s5);
}

.vp-order-goods {
  display: flex;
  align-items: flex-start;
  gap: var(--tf-s4);
  padding: var(--tf-s4) 0;
  border-bottom: 1px solid var(--tf-line);
}

.vp-order-goods:last-child {
  border-bottom: 0;
}

.vp-order-goods>img {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: var(--tf-r-sm);
  object-fit: cover;
  background: var(--tf-surface);
  border: 1px solid var(--tf-line);
}

.vp-order-goods-info {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vp-order-goods-info h4 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vp-order-sku {
  margin: 0;
  font-size: 12.5px;
  color: var(--tf-ink-3);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vp-order-review-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-pill);
  font-size: 12.5px;
  color: var(--tf-ink-2);
  transition: border-color .16s ease, color .16s ease;
}

.vp-order-review-btn:hover {
  border-color: var(--tf-ink);
  color: var(--tf-ink);
}

.vp-order-goods-price {
  flex-shrink: 0;
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tf-ink);
}

.vp-order-goods-price p {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--tf-ink-3);
}

.vp-order-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tf-s3);
  flex-wrap: wrap;
  padding: 14px var(--tf-s5);
  border-top: 1px solid var(--tf-line);
  background: var(--tf-card);
}

.vp-order-total {
  font-size: 13px;
  color: var(--tf-ink-3);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

.vp-order-total span {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tf-ink);
  font-variant-numeric: tabular-nums;
}

.vp-order-actions {
  display: flex;
  align-items: center;
  gap: var(--tf-s2);
  flex-wrap: wrap;
}

.vp-order-actions .vp-btn,
.vp-order-actions .vp-btn-primary,
.vp-order-actions .vp-btn-outline {
  min-height: 38px;
  padding: 0 14px;
  font-size: 13.5px;
  border-radius: var(--tf-r-sm);
}

/* 订单页的复选框跟购物车保持同一套观感 */
.vp-order-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid var(--tf-line-2);
  border-radius: 6px;
  background: var(--tf-card);
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}

.vp-order-checkbox:checked {
  background: var(--tf-cta);
  border-color: var(--tf-cta);
}

.vp-order-checkbox:checked::after {
  content: "";
  position: absolute;
  inset-inline-start: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- 14. 分页 ---------- */
.vp-pagination {
  display: flex;
  justify-content: center;
  padding: var(--tf-s5) 0 var(--tf-s2);
}

.vp-pagination ul.pagination {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vp-pagination ul.pagination li>a,
.vp-pagination ul.pagination li>span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tf-tap);
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-sm);
  background: var(--tf-card);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--tf-ink-2);
  transition: border-color .16s ease, color .16s ease;
}

.vp-pagination ul.pagination li>a:hover {
  border-color: var(--tf-ink);
  color: var(--tf-ink);
}

.vp-pagination ul.pagination li>a.active,
.vp-pagination ul.pagination li.active>a {
  background: var(--tf-cta);
  border-color: var(--tf-cta);
  color: #fff;
}

/* ---------- 15. 弹层（取消订单等） ---------- */
.vp-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--tf-gutter);
  background: rgba(17, 19, 24, .45);
}

.vp-popup-overlay.show,
.vp-popup-overlay.active {
  display: flex;
}

.vp-popup-panel {
  width: 100%;
  max-width: 420px;
  background: var(--tf-card);
  border-radius: var(--tf-r-lg);
  box-shadow: var(--tf-sh-3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 86vh;
  animation: tf-pop .18s ease-out;
}

@keyframes tf-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.99);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.vp-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tf-s3);
  padding: var(--tf-s4) var(--tf-s5);
  border-bottom: 1px solid var(--tf-line);
}

.vp-popup-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.vp-popup-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--tf-r-sm);
  background: transparent;
  color: var(--tf-ink-3);
  font-size: 16px;
  cursor: pointer;
}

.vp-popup-close:hover {
  background: var(--tf-surface);
  color: var(--tf-ink);
}

.vp-popup-body {
  padding: var(--tf-s5);
  overflow-y: auto;
  font-size: 14px;
  color: var(--tf-ink-2);
}

.vp-popup-footer {
  display: flex;
  gap: var(--tf-s2);
  padding: var(--tf-s4) var(--tf-s5);
  border-top: 1px solid var(--tf-line);
}

.vp-popup-footer .vp-btn,
.vp-popup-footer .vp-btn-primary,
.vp-popup-footer .vp-btn-outline {
  flex: 1 1 0;
}

/* ---------- 16. 结算页 ---------- */
.vp-checkout-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--tf-card);
  border-bottom: 1px solid var(--tf-line);
}

.vp-checkout-header-inner {
  max-width: var(--tf-maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--tf-s2);
  height: 56px;
  padding-inline: var(--tf-s2);
}

.vp-header-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tf-tap);
  height: var(--tf-tap);
  border-radius: var(--tf-r-sm);
  color: var(--tf-ink);
  font-size: 20px;
  flex-shrink: 0;
}

.vp-header-logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--tf-tap);
}

.vp-header-logo img {
  max-height: 28px;
  max-width: 120px;
  object-fit: contain;
}

.vp-header-logo span {
  font-size: 16px;
  font-weight: 700;
  color: var(--tf-ink);
  white-space: nowrap;
}

.vp-header-title {
  flex: 1 1 auto;
  text-align: center;
  font-size: 16px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vp-header-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tf-tap);
  height: var(--tf-tap);
  border-radius: var(--tf-r-sm);
  color: var(--tf-ink);
  font-size: 19px;
  flex-shrink: 0;
}

.vp-checkout-main {
  padding: var(--tf-s4) 0 var(--tf-s8);
}

.vp-checkout-container {
  width: 100%;
  max-width: var(--tf-maxw);
  margin: 0 auto;
  padding-inline: var(--tf-gutter);
}

.vp-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: var(--tf-s5);
  align-items: start;
}

.vp-checkout-form {
  display: grid;
  gap: var(--tf-s4);
  min-width: 0;
}

.vp-checkout-section {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s5);
}

.vp-checkout-section>h4,
.vp-section-title {
  margin: 0 0 var(--tf-s3);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: var(--tf-s2);
}

.vp-checkout-sidebar {
  position: sticky;
  top: 76px;
}

.vp-summary-items {
  display: grid;
  gap: var(--tf-s3);
  max-height: 320px;
  overflow-y: auto;
  padding-bottom: var(--tf-s3);
  border-bottom: 1px solid var(--tf-line);
}

.vp-summary-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--tf-s3);
  align-items: center;
}

.vp-item-img {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: var(--tf-r-xs);
  overflow: hidden;
  background: var(--tf-surface);
  border: 1px solid var(--tf-line);
}

.vp-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vp-item-qty {
  position: absolute;
  top: -6px;
  inset-inline-end: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--tf-r-pill);
  background: var(--tf-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.vp-item-info {
  min-width: 0;
}

.vp-item-info h4 {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vp-item-info p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--tf-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-item-price {
  font-size: 13.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vp-line-discount> :last-child {
  color: var(--tf-ok);
  font-weight: 600;
}

/* 地址 / 配送 / 支付：列表项通用观感 */
.vp-no-address,
.vp-no-delivery,
.vp-payment-empty {
  padding: var(--tf-s4);
  border: 1px dashed var(--tf-line-2);
  border-radius: var(--tf-r-sm);
  background: var(--tf-surface);
  font-size: 13.5px;
  color: var(--tf-ink-2);
  text-align: center;
}

.vp-delivery-wrap+.vp-delivery-wrap {
  margin-top: var(--tf-s4);
}

.vp-delivery-title {
  margin: 0 0 var(--tf-s3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tf-ink-3);
}

.vp-delivery-list {
  display: grid;
  gap: var(--tf-s2);
}

.vp-payment-list {
  display: grid;
  gap: var(--tf-s2);
}

.vp-payment-option {
  display: flex;
  align-items: center;
  gap: var(--tf-s3);
  padding: 12px var(--tf-s4);
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-sm);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}

.vp-payment-option:hover {
  border-color: var(--tf-ink-3);
  background: var(--tf-surface);
}

.vp-payment-option:has(input:checked) {
  border-color: var(--tf-cta);
  background: var(--tf-surface);
  box-shadow: inset 0 0 0 1px var(--tf-cta);
}

.vp-payment-option img {
  max-height: 26px;
  width: auto;
}

.vp-coupon-form {
  display: flex;
  gap: var(--tf-s2);
}

.vp-coupon-form .vp-input {
  flex: 1 1 auto;
}

.vp-coupon-applied {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--tf-s2);
  padding: 4px 10px;
  border-radius: var(--tf-r-pill);
  background: var(--tf-ok-soft);
  color: var(--tf-ok);
  font-size: 12.5px;
  font-weight: 600;
}

.vp-error-text {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--tf-danger);
}

/* 表单控件（结算/地址/profile 共用） */
.vp-input,
.vp-select,
.vp-textarea {
  width: 100%;
  min-height: var(--tf-tap);
  padding: 10px 14px;
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-sm);
  background: var(--tf-card);
  color: var(--tf-ink);
  font-size: 14.5px;
  font-family: inherit;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.vp-textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.6;
}

.vp-input:focus,
.vp-select:focus,
.vp-textarea:focus {
  outline: none;
  border-color: var(--tf-cta);
  box-shadow: 0 0 0 3px rgba(17, 19, 24, .08);
}

.vp-input::placeholder,
.vp-textarea::placeholder {
  color: var(--tf-ink-3);
}

/* 移动端底部下单条 */
.vp-mobile-order-bar {
  /* 桌面端必须藏起来：这块是手机端专用的固定下单条，
     原来只在 body 上写了定位，桌面会跟右侧卡片的「注文する」重复出现一条。 */
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 300;
  background: var(--tf-card);
  border-top: 1px solid var(--tf-line);
  box-shadow: 0 -6px 24px rgba(17, 19, 24, .06);
  padding-bottom: env(safe-area-inset-bottom);
}

.vp-mobile-order-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--tf-s3);
  padding: 10px var(--tf-gutter);
}

.vp-mobile-order-total {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  color: var(--tf-ink-3);
}

.vp-mobile-order-total strong,
.vp-mobile-order-total span {
  font-size: 18px;
  font-weight: 800;
  color: var(--tf-ink);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.vp-mobile-order-bar .vp-btn,
.vp-mobile-order-bar .vp-btn-primary {
  flex-shrink: 0;
  min-width: 128px;
}

/* 加载态 */
.vp-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(17, 19, 24, .32);
}

.vp-loading-overlay.show,
.vp-loading-overlay.active {
  display: flex;
}

/* 遮罩里的转圈（div 用） */
.vp-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tf-spin .8s linear infinite;
}

/* 页面里 <img class="vp-loading"> 是「提交中」的小转圈，原本靠各页内联样式
   display:none 藏着。这里必须单独收口，否则会被上面的圆环样式套上，
   变成一个盖住按钮文字的大圆圈（结算页/收银台踩过）。 */
img.vp-loading {
  display: none;
  width: 15px;
  height: 15px;
  margin-inline-start: 7px;
  border: 0;
  border-radius: 0;
  background: none;
  animation: none;
  vertical-align: -2px;
}

img.vp-loading.show,
img.vp-loading.is-on {
  display: inline-block;
}

@keyframes tf-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- 17. 收银台（order_pay） ---------- */
.vp-orderpay-main {
  padding: var(--tf-s6) 0 var(--tf-s8);
}

.vp-pay-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--tf-s5);
  align-items: start;
}

.vp-pay-main {
  display: grid;
  gap: var(--tf-s4);
  min-width: 0;
}

.vp-pay-card,
.vp-pay-methods-card {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s5);
}

.vp-pay-title {
  margin: 0 0 var(--tf-s2);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.vp-pay-subtitle {
  margin: 0 0 var(--tf-s4);
  font-size: 13.5px;
  color: var(--tf-ink-3);
}

.vp-pay-subtitle-mt {
  margin-top: var(--tf-s5);
}

.vp-pay-item {
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r-sm);
  overflow: hidden;
}

.vp-pay-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tf-s3);
  padding: 12px var(--tf-s4);
  background: var(--tf-surface);
  border-bottom: 1px solid var(--tf-line);
}

.vp-pay-item-left {
  display: flex;
  align-items: center;
  gap: var(--tf-s3);
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
}

.vp-pay-label {
  font-size: 12.5px;
  color: var(--tf-ink-3);
  font-weight: 400;
}

.vp-pay-accounts {
  display: grid;
  gap: var(--tf-s2);
  padding: var(--tf-s3) var(--tf-s4);
}

.vp-pay-account {
  display: flex;
  align-items: center;
  gap: var(--tf-s3);
  padding: 10px 12px;
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-sm);
  cursor: pointer;
  font-size: 14px;
  transition: border-color .16s ease, background-color .16s ease;
}

.vp-pay-account:hover {
  background: var(--tf-surface);
}

.vp-pay-account:has(input:checked) {
  border-color: var(--tf-cta);
  background: var(--tf-surface);
}

.vp-pay-account-info {
  min-width: 0;
  color: var(--tf-ink-2);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-pay-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tf-s3);
  padding-top: var(--tf-s4);
  border-top: 1px dashed var(--tf-line-2);
  font-size: 15px;
  font-weight: 700;
}

.vp-pay-amount {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.vp-pay-actual {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--tf-ink-3);
  text-align: end;
}

/* ---------- 18. 订单详情 ---------- */
.vp-orderdetail-main {
  padding: var(--tf-s5) 0 var(--tf-s8);
}

.vp-section {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s5);
  margin-bottom: var(--tf-s4);
}

.vp-info-card {
  display: flex;
  gap: var(--tf-s3);
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s4) var(--tf-s5);
  margin-bottom: var(--tf-s4);
}

.vp-address-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--tf-r-sm);
  background: var(--tf-surface);
  color: var(--tf-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.vp-address-info {
  min-width: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tf-ink-2);
}

.vp-address-info strong,
.vp-address-info b {
  color: var(--tf-ink);
  font-weight: 650;
}

.vp-info-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tf-s4);
  padding: 9px 0;
  border-bottom: 1px dashed var(--tf-line);
  font-size: 13.5px;
}

.vp-info-item:last-child {
  border-bottom: 0;
}

.vp-info-label {
  flex-shrink: 0;
  color: var(--tf-ink-3);
}

.vp-info-value {
  min-width: 0;
  text-align: end;
  color: var(--tf-ink);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.vp-info-value-text {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vp-goods-card {
  display: grid;
  gap: var(--tf-s3);
}

.vp-goods-list {
  display: grid;
  gap: var(--tf-s3);
}

.vp-goods-card>.vp-goods-img,
.vp-goods-list .vp-goods-img {
  width: 72px;
  height: 72px;
  border-radius: var(--tf-r-sm);
  object-fit: cover;
  background: var(--tf-surface);
  border: 1px solid var(--tf-line);
}

.vp-goods-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vp-goods-meta {
  font-size: 12.5px;
  color: var(--tf-ink-3);
}

.vp-goods-sku {
  font-size: 12.5px;
  color: var(--tf-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-goods-price {
  font-size: 14px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vp-goods-qty {
  font-size: 12.5px;
  color: var(--tf-ink-3);
}

.vp-cost-list {
  display: grid;
  gap: 10px;
}

.vp-cost-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tf-s3);
  font-size: 13.5px;
  color: var(--tf-ink-2);
}

.vp-cost-item> :last-child {
  font-variant-numeric: tabular-nums;
  color: var(--tf-ink);
}

.vp-cost-divider {
  height: 1px;
  background: var(--tf-line);
  margin: var(--tf-s2) 0;
}

.vp-cost-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tf-s3);
  font-size: 14px;
  font-weight: 700;
}

.vp-cost-total> :last-child {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.vp-discount {
  color: var(--tf-ok);
}

.vp-detail-footer {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--tf-s2);
  padding: 10px var(--tf-gutter);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--tf-card);
  border-top: 1px solid var(--tf-line);
  box-shadow: 0 -6px 24px rgba(17, 19, 24, .06);
}

.vp-cancel-popup-mask {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  background: rgba(17, 19, 24, .45);
}

.vp-cancel-popup-mask.show,
.vp-cancel-popup-mask.active {
  display: block;
}

.vp-cancel-popup {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 510;
  display: none;
  background: var(--tf-card);
  border-radius: var(--tf-r-lg) var(--tf-r-lg) 0 0;
  padding: var(--tf-s5);
  padding-bottom: calc(var(--tf-s5) + env(safe-area-inset-bottom));
  box-shadow: var(--tf-sh-3);
}

.vp-cancel-popup.show,
.vp-cancel-popup.active {
  display: block;
  animation: tf-pop .2s ease-out;
}

.vp-cancel-icon {
  font-size: 22px;
  color: var(--tf-warn);
  margin-bottom: var(--tf-s2);
}

.vp-cancel-notice {
  font-size: 13px;
  color: var(--tf-ink-3);
  line-height: 1.6;
  margin-bottom: var(--tf-s3);
}

.vp-cancel-textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 14px;
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-sm);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.vp-cancel-popup-btns {
  display: flex;
  gap: var(--tf-s2);
  margin-top: var(--tf-s4);
}

.vp-cancel-popup-btns .vp-btn,
.vp-cancel-popup-btns .vp-btn-primary,
.vp-cancel-popup-btns .vp-btn-outline {
  flex: 1 1 0;
}

/* ---------- 19. 个人中心首页 ---------- */
.vp-user-info-card {
  display: flex;
  align-items: center;
  gap: var(--tf-s4);
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s5);
}

.vp-user-info-avatar,
.vp-mobile-user-avatar {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tf-surface-2);
  border: 1px solid var(--tf-line);
}

.vp-user-info-avatar img,
.vp-mobile-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vp-user-info-text {
  min-width: 0;
  flex: 1 1 auto;
}

.vp-user-info-text h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-user-info-text p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--tf-ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-edit-profile-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-pill);
  font-size: 13px;
  color: var(--tf-ink-2);
  transition: border-color .16s ease, color .16s ease;
}

.vp-edit-profile-btn:hover {
  border-color: var(--tf-ink);
  color: var(--tf-ink);
}

.vp-order-quick-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--tf-s2);
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s4);
}

.vp-order-quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--tf-s2) 4px;
  border-radius: var(--tf-r-sm);
  font-size: 12.5px;
  color: var(--tf-ink-2);
  text-align: center;
  transition: background-color .16s ease;
}

.vp-order-quick-item:hover {
  background: var(--tf-surface);
}

.vp-order-quick-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--tf-r-sm);
  background: var(--tf-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--tf-ink);
}

.vp-function-section {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s2);
}

.vp-function-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.vp-function-item {
  display: flex;
  align-items: center;
  gap: var(--tf-s3);
  min-height: 52px;
  padding: 0 var(--tf-s3);
  border-radius: var(--tf-r-sm);
  font-size: 14px;
  color: var(--tf-ink-2);
  transition: background-color .16s ease, color .16s ease;
}

.vp-function-item:hover {
  background: var(--tf-surface);
  color: var(--tf-ink);
}

.vp-function-item i {
  font-size: 16px;
  color: var(--tf-ink-3);
}

.vp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--tf-r-pill);
  background: var(--tf-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.vp-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tf-s2);
  min-height: var(--tf-tap);
  margin-top: var(--tf-s4);
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r);
  background: var(--tf-card);
  font-size: 14px;
  color: var(--tf-danger);
  cursor: pointer;
}

.vp-logout:hover {
  background: var(--tf-danger-soft);
  border-color: var(--tf-danger-soft);
}

.vp-pc-search {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 40px;
  min-width: 190px;
  padding-inline: 4px;
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-pill);
  background: var(--tf-surface);
  transition: border-color .16s ease, background-color .16s ease;
}

.vp-pc-search:focus-within {
  border-color: var(--tf-cta);
  background: var(--tf-card);
}

.vp-pc-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding-inline: 12px;
  border: 0;
  background: transparent;
  color: var(--tf-ink);
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
}

.vp-pc-search input::placeholder {
  color: var(--tf-ink-3);
}

.vp-pc-search button {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tf-ink-2);
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.vp-pc-search button:hover {
  background: var(--tf-surface-2);
  color: var(--tf-ink);
}

/* 移动端个人中心 */
.vp-mobile-user-header {
  display: flex;
  align-items: center;
  gap: var(--tf-s4);
  padding: var(--tf-s5);
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
}

.vp-mobile-user-info {
  min-width: 0;
  flex: 1 1 auto;
}

.vp-mobile-function-list {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  overflow: hidden;
}

.vp-mobile-function-item {
  display: flex;
  align-items: center;
  gap: var(--tf-s3);
  min-height: 52px;
  padding: 0 var(--tf-s4);
  border-bottom: 1px solid var(--tf-line);
  font-size: 14.5px;
  color: var(--tf-ink);
}

.vp-mobile-function-item:last-child {
  border-bottom: 0;
}

.vp-mobile-function-item i {
  font-size: 16px;
  color: var(--tf-ink-3);
}

.vp-mobile-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tf-s3);
  padding: var(--tf-s3) var(--tf-s4);
  border-bottom: 1px solid var(--tf-line);
  font-size: 14px;
}

.vp-mobile-order-links {
  display: flex;
  gap: var(--tf-s2);
}

/* ---------- 20. 地址簿 ---------- */
.vp-address-list {
  display: grid;
  gap: var(--tf-s3);
}

.vp-address-card {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s4) var(--tf-s5);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.vp-address-card:hover {
  border-color: var(--tf-line-2);
  box-shadow: var(--tf-sh-1);
}

.vp-address-card .vp-address-info {
  font-size: 14px;
  line-height: 1.65;
  color: var(--tf-ink-2);
}

.vp-address-card .vp-address-info strong,
.vp-address-card .vp-address-info b {
  display: inline-block;
  margin-inline-end: 10px;
  color: var(--tf-ink);
  font-size: 15px;
  font-weight: 700;
}

.vp-default-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  margin-inline-start: 8px;
  border-radius: var(--tf-r-pill);
  background: var(--tf-ok-soft);
  color: var(--tf-ok);
  font-size: 11.5px;
  font-weight: 650;
  vertical-align: middle;
}

.vp-address-card-actions {
  display: flex;
  align-items: center;
  gap: var(--tf-s2);
  margin-top: var(--tf-s3);
  padding-top: var(--tf-s3);
  border-top: 1px dashed var(--tf-line);
}

.vp-address-card-actions .vp-btn,
.vp-address-card-actions .vp-btn-outline,
.vp-address-card-actions .vp-btn-primary {
  min-height: 36px;
  padding: 0 14px;
  font-size: 13px;
}

.vp-delete-btn {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--tf-r-sm);
  background: transparent;
  color: var(--tf-ink-3);
  font-size: 13px;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

.vp-delete-btn:hover {
  background: var(--tf-danger-soft);
  color: var(--tf-danger);
}

/* ---------- 21. 表单（地址编辑 / 个人资料共用） ---------- */
.vp-address-form,
.vp-profile-form {
  display: grid;
  gap: var(--tf-s4);
}

.vp-form-section {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s5);
  display: grid;
  gap: var(--tf-s4);
}

.vp-form-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--tf-ink);
}

.vp-form-group {
  display: grid;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
}

.vp-profile-form form,
.vp-address-form form {
  display: grid;
  gap: inherit;
  min-width: 0;
  max-width: 100%;
}

.vp-form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tf-ink-2);
}

.vp-form-label .req,
.vp-form-label em {
  color: var(--tf-danger);
  font-style: normal;
  margin-inline-start: 2px;
}

.vp-form-input,
.vp-form-select {
  width: 100%;
  height: var(--tf-tap);
  padding: 0 14px;
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-sm);
  background: var(--tf-card);
  color: var(--tf-ink);
  font-size: 14.5px;
  font-family: inherit;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.vp-form-select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--tf-ink-3) 50%),
    linear-gradient(135deg, var(--tf-ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.vp-form-input:focus,
.vp-form-select:focus,
.vp-cancel-textarea:focus {
  outline: none;
  border-color: var(--tf-cta);
  box-shadow: 0 0 0 3px rgba(17, 19, 24, .08);
}

.vp-form-input::placeholder {
  color: var(--tf-ink-3);
}

.vp-form-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tf-tap);
  font-size: 14px;
  color: var(--tf-ink-2);
  cursor: pointer;
}

.vp-form-checkbox input {
  width: 20px;
  height: 20px;
  accent-color: var(--tf-cta);
}

.vp-form-actions {
  display: flex;
  align-items: center;
  gap: var(--tf-s2);
  padding-top: var(--tf-s2);
}

.vp-form-actions .vp-btn,
.vp-form-actions .vp-btn-primary,
.vp-form-actions .vp-btn-outline {
  min-width: 132px;
}

/* 手机号：国家码 + 号码 */
.vp-phone-input {
  display: flex;
  gap: var(--tf-s2);
}

.vp-country-code {
  flex: 0 0 auto;
}

/* 头像上传 */
.vp-avatar-upload {
  display: flex;
  align-items: center;
  gap: var(--tf-s4);
  flex-wrap: wrap;
  min-width: 0;
}

.vp-avatar-upload .vp-btn,
.vp-avatar-upload .vp-btn-outline {
  min-width: 0;
  flex: 0 1 auto;
}

.vp-avatar-preview {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tf-surface-2);
  border: 1px solid var(--tf-line);
}

.vp-avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 22. 优惠券 ---------- */
.vp-coupon-list {
  display: grid;
  gap: var(--tf-s3);
}

.vp-coupon-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--tf-s4);
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s4) var(--tf-s5);
  overflow: hidden;
}

.vp-coupon-card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--tf-accent);
}

.vp-coupon-card.is-used::before,
.vp-coupon-card.is-expired::before {
  background: var(--tf-line-2);
}

.vp-coupon-left {
  flex: 0 0 auto;
  min-width: 108px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding-inline-start: 6px;
}

.vp-coupon-value {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--tf-accent);
  line-height: 1.1;
}

.vp-coupon-card.is-used .vp-coupon-value,
.vp-coupon-card.is-expired .vp-coupon-value {
  color: var(--tf-ink-3);
}

.vp-coupon-type {
  font-size: 12px;
  color: var(--tf-ink-3);
}

.vp-coupon-right {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding-inline-start: var(--tf-s4);
  border-inline-start: 1px dashed var(--tf-line-2);
}

.vp-coupon-right h4,
.vp-coupon-right h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.4;
}

.vp-coupon-right p {
  margin: 0;
  font-size: 12.5px;
  color: var(--tf-ink-3);
}

.vp-coupon-status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--tf-r-pill);
  background: var(--tf-ok-soft);
  color: var(--tf-ok);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}

.vp-coupon-card.is-used .vp-coupon-status,
.vp-coupon-card.is-expired .vp-coupon-status {
  background: var(--tf-surface-2);
  color: var(--tf-ink-3);
}

/* ---------- 23. 评价 ---------- */
.vp-reviews-container {
  display: grid;
  gap: var(--tf-s4);
}

.vp-reviews-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tf-s3);
  flex-wrap: wrap;
}

.vp-reviews-title {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.vp-reviews-list {
  display: grid;
  gap: var(--tf-s3);
}

.vp-review-item {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s4) var(--tf-s5);
  display: grid;
  gap: var(--tf-s3);
}

.vp-review-header {
  display: flex;
  align-items: center;
  gap: var(--tf-s3);
}

.vp-review-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--tf-surface-2);
  border: 1px solid var(--tf-line);
}

.vp-review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vp-review-user {
  min-width: 0;
  flex: 1 1 auto;
}

.vp-review-name {
  font-size: 14px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vp-review-time {
  font-size: 12px;
  color: var(--tf-ink-3);
  font-variant-numeric: tabular-nums;
}

.vp-review-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--tf-accent);
  font-size: 13px;
  letter-spacing: 1px;
}

.vp-review-content {
  font-size: 14px;
  line-height: 1.7;
  color: var(--tf-ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.vp-review-info {
  font-size: 12.5px;
  color: var(--tf-ink-3);
}

.vp-review-images {
  display: flex;
  gap: var(--tf-s2);
  flex-wrap: wrap;
}

.vp-review-img {
  width: 84px;
  height: 84px;
  border-radius: var(--tf-r-sm);
  object-fit: cover;
  background: var(--tf-surface);
  border: 1px solid var(--tf-line);
  cursor: zoom-in;
}

.vp-reviews-pagination {
  display: flex;
  justify-content: center;
  padding: var(--tf-s4) 0;
}

.vp-empty-text {
  font-size: 13.5px;
  color: var(--tf-ink-3);
  text-align: center;
}

/* ---------- 24. 写评价 ---------- */
.vp-content {
  display: grid;
  gap: var(--tf-s4);
  padding: var(--tf-s4) 0 var(--tf-s8);
}

.vp-card {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s5);
  display: grid;
  gap: var(--tf-s3);
}

.vp-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.vp-card-desc {
  margin: 0;
  font-size: 13px;
  color: var(--tf-ink-3);
}

.vp-goods-row,
.vp-goods-detail {
  display: flex;
  gap: var(--tf-s3);
  align-items: center;
  min-width: 0;
}

.vp-goods-row .vp-goods-img,
.vp-goods-detail .vp-goods-img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--tf-r-sm);
  object-fit: cover;
  background: var(--tf-surface);
  border: 1px solid var(--tf-line);
}

.vp-goods-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vp-goods-sku {
  font-size: 12.5px;
  color: var(--tf-ink-3);
}

.vp-goods-price {
  font-size: 13.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.vp-star-box {
  display: grid;
  gap: 8px;
}

.vp-star-list {
  display: flex;
  gap: 6px;
}

.vp-star-item {
  font-size: 26px;
  line-height: 1;
  color: var(--tf-line-2);
  cursor: pointer;
  transition: color .14s ease, transform .14s ease;
  -webkit-user-select: none;
  user-select: none;
}

.vp-star-item:hover {
  transform: scale(1.08);
}

.vp-star-item.active,
.vp-star-item.on {
  color: var(--tf-accent);
}

.vp-textarea {
  width: 100%;
  min-height: 104px;
  padding: 12px 14px;
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-sm);
  background: var(--tf-card);
  font-size: 14.5px;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
}

.vp-textarea:focus {
  outline: none;
  border-color: var(--tf-cta);
  box-shadow: 0 0 0 3px rgba(17, 19, 24, .08);
}

.vp-upload-area {
  display: flex;
  gap: var(--tf-s2);
  flex-wrap: wrap;
}

.vp-upload-btn {
  width: 84px;
  height: 84px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px dashed var(--tf-line-2);
  border-radius: var(--tf-r-sm);
  background: var(--tf-surface);
  color: var(--tf-ink-3);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}

.vp-upload-btn:hover {
  border-color: var(--tf-ink-3);
  color: var(--tf-ink);
}

.vp-upload-list {
  display: flex;
  gap: var(--tf-s2);
  flex-wrap: wrap;
}

.vp-submit-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: var(--tf-s2);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--tf-bg) 70%, transparent);
}

.vp-submit-bar .vp-btn-primary {
  flex: 1 1 auto;
}

.vp-user-area {
  display: flex;
  align-items: center;
  gap: var(--tf-s3);
}

.vp-user-info {
  min-width: 0;
  font-size: 13.5px;
  color: var(--tf-ink-2);
}

/* 写评价页自带的简易头部（vp-nav / vp-login-btn） */
.vp-nav {
  display: flex;
  align-items: center;
  gap: var(--tf-s2);
}

.vp-nav>a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: var(--tf-r-sm);
  font-size: 13.5px;
  color: var(--tf-ink-2);
  white-space: nowrap;
}

.vp-nav>a:hover {
  background: var(--tf-surface);
  color: var(--tf-ink);
}

.vp-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--tf-line-2);
  border-radius: var(--tf-r-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tf-ink);
  white-space: nowrap;
}

.vp-login-btn:hover {
  border-color: var(--tf-ink);
}

.vp-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tf-ink-2);
}

.vp-text-muted {
  font-size: 12.5px;
  color: var(--tf-ink-3);
}

/* ---------- 25. 消费/支付记录 ---------- */
.vp-records-list {
  display: grid;
  gap: var(--tf-s2);
}

.vp-record-card {
  display: flex;
  align-items: center;
  gap: var(--tf-s3);
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: 14px var(--tf-s5);
}

.vp-record-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: var(--tf-r-sm);
  background: var(--tf-surface);
  color: var(--tf-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.vp-record-info {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 13.5px;
  color: var(--tf-ink-2);
  line-height: 1.5;
}

.vp-record-amount {
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 26. 支付结果 / 失败引导 ---------- */
.vp-result-pc-wrap {
  display: flex;
  justify-content: center;
  padding: var(--tf-s8) 0;
}

.vp-result-card,
.vp-result-card-pc {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r-lg);
  padding: var(--tf-s7) var(--tf-s6);
  text-align: center;
  box-shadow: var(--tf-sh-2);
}

.vp-result-icon,
.vp-result-icon-pc {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--tf-s4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: var(--tf-ok-soft);
  color: var(--tf-ok);
}

.is-error .vp-result-icon,
.is-error .vp-result-icon-pc,
.vp-result-icon.is-error {
  background: var(--tf-danger-soft);
  color: var(--tf-danger);
}

.vp-result-title,
.vp-result-title-pc {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.vp-result-desc,
.vp-result-desc-pc {
  margin: 0 0 var(--tf-s5);
  font-size: 14px;
  color: var(--tf-ink-3);
  line-height: 1.7;
}

.vp-result-actions,
.vp-result-actions-pc {
  display: flex;
  flex-direction: column;
  gap: var(--tf-s2);
}

.vp-error-guide,
.vp-error-guide-pc {
  margin-top: var(--tf-s5);
  padding-top: var(--tf-s4);
  border-top: 1px solid var(--tf-line);
  text-align: start;
}

.vp-guide-content {
  display: grid;
  gap: 10px;
}

.vp-guide-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.vp-guide-num,
.vp-guide-num-pc {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--tf-surface-2);
  color: var(--tf-ink-2);
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.vp-guide-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  color: var(--tf-ink-2);
  line-height: 1.6;
}

.vp-guide-link,
.vp-guide-link-pc {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tf-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- 27. 状态页（店铺关闭 / 账号禁用 / 激活成功或失败 / 支付结果 …） ---------- */
.vresult-wrap {
  max-width: 480px;
  margin: clamp(32px, 8vh, 88px) auto;
  padding: 0 var(--tf-gutter);
  text-align: center;
}

.vresult-card {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r-lg);
  padding: clamp(32px, 6vw, 48px) clamp(20px, 5vw, 32px);
  box-shadow: var(--tf-sh-2);
}

.vresult-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--tf-s5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  background: var(--tf-surface-2);
  color: var(--tf-ink-2);
}

.vresult-icon.error {
  background: var(--tf-danger-soft);
  color: var(--tf-danger);
}

.vresult-icon.warn,
.vresult-icon.store {
  background: var(--tf-warn-soft);
  color: var(--tf-warn);
}

.vresult-icon.success {
  background: var(--tf-ok-soft);
  color: var(--tf-ok);
}

.vresult-icon.info {
  background: var(--tf-surface-2);
  color: var(--tf-ink-2);
}

.vresult-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--tf-ink);
}

.vresult-desc {
  margin: 0 0 var(--tf-s6);
  font-size: 14px;
  line-height: 1.7;
  color: var(--tf-ink-3);
}

.vresult-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* 状态页主按钮：这批页面统一用 chk-submit-btn 这个老类名，
   原来定义在 checkout.html 的内联样式里，抽走后就没人管了 —— 在这里收口 */
.chk-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tf-tap);
  padding: 0 20px;
  border: 1px solid var(--tf-cta);
  border-radius: var(--tf-r-sm);
  background: var(--tf-cta);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.chk-submit-btn:hover {
  background: var(--tf-cta-hover);
  border-color: var(--tf-cta-hover);
}

.chk-submit-btn:active {
  transform: scale(.985);
}

/* ---------- 28. 登录 / 注册 / 找回密码 ---------- */
/* 登录 / 注册 / 找回密码（原各页内联，令牌化后收口到这里） */

.vp-auth-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--tf-surface);
  display: flex;
  /* 不用 align-items:center：卡片比视口高时，flex 居中会把顶部（logo）顶出屏幕，
     而且滚不到。改成 flex-start + 卡片 margin:auto —— 有空间时照样居中，
     空间不够时从顶部开始排，整张卡片都能滚到。 */
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  box-sizing: border-box;
}

.vp-auth-card {
  width: 100%;
  max-width: 440px;
  margin: auto;
  background: var(--tf-card);
  border: 1px solid var(--tf-line-2);
  border-radius: 12px;
  padding: 40px 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.vp-auth-logo {
  display: block;
  text-align: center;
  margin-bottom: 24px;
}

.vp-auth-logo img {
  max-height: 40px;
  max-width: 160px;
  margin: 0 auto;
  display: block;
}

.vp-auth-logo span {
  font-size: 22px;
  font-weight: 700;
  color: var(--tf-ink);
}

.vp-auth-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--tf-ink);
  margin: 0 0 6px;
  text-align: center;
}

.vp-auth-subtitle {
  font-size: 13px;
  color: var(--tf-ink-2);
  margin: 0 0 28px;
  text-align: center;
  line-height: 1.6;
  /* 日文没有空格，balance 会从词中间断开（アカ / ウント），用 pretty 只做孤字回拉 */
  text-wrap: pretty;
  max-width: 34em;
  margin-inline: auto;
}

.vp-auth-field {
  margin-bottom: 18px;
}

.vp-auth-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--tf-ink);
  margin-bottom: 6px;
}

.vp-auth-input {
  position: relative;
}

.vp-auth-input i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #8c9196;
  font-size: 17px;
  pointer-events: none;
}

/* tf-ui.css 里有一条 `input[type="text"], input[type="password"], ...` 的 padding 通配规则，
   它在 store-ui 之后加载、特异性同为 (0,1,1)，会把这里的左内边距压回 16px，
   文字直接压在邮箱/密码图标上。加一个类型选择器把特异性提到 (0,2,1) 钉住。 */
.vp-auth-input input[type="text"],
.vp-auth-input input[type="password"],
.vp-auth-input input[type="email"],
.vp-auth-input input {
  width: 100%;
  padding: 12px 14px 12px 42px;
  border: 1px solid #d1d4d8;
  border-radius: 8px;
  font-size: 14px;
  color: var(--tf-ink);
  background: var(--tf-card);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.vp-auth-input input::placeholder {
  color: #9aa0a6;
}

.vp-auth-input input:focus {
  outline: none;
  border-color: #8c9196;
  box-shadow: 0 0 0 3px rgba(32, 34, 35, 0.06);
}

.vp-auth-row {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 20px;
}

.vp-auth-link {
  font-size: 13px;
  color: var(--tf-ink-2);
  text-decoration: none;
  transition: color 0.2s;
}

.vp-auth-link:hover {
  color: var(--tf-ink);
  text-decoration: underline;
}

.vp-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid var(--tf-ink);
  background: var(--tf-ink);
  color: var(--tf-card);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.vp-auth-btn:hover {
  background: #3a3b3d;
  border-color: #3a3b3d;
}

.vp-auth-btn:active {
  opacity: 0.9;
}

.vp-auth-footer {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.vp-auth-footer p {
  font-size: 13px;
  color: var(--tf-ink-2);
  margin: 0;
}

.vp-auth-footer a {
  color: var(--tf-ink);
  font-weight: 500;
  text-decoration: none;
}

.vp-auth-footer a:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .vp-auth-card {
    padding: 28px 20px;
    border-radius: 10px;
  }
}

@media (max-width: 480px) {
  .vp-auth-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .vp-auth-subtitle {
    margin-bottom: 22px;
  }
}

/* ---------- 29. 其余工具类页面的少量专属组件 ---------- */
/* 绑定邮箱：单卡片表单 */
.vp-pc-card {
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  border-radius: var(--tf-r);
  padding: var(--tf-s6) var(--tf-s5);
  max-width: 480px;
  margin: var(--tf-s6) auto;
}

/* 商品分类：两列卡片 */
.dz-category-card {
  display: block;
  overflow: hidden;
  border-radius: var(--tf-r);
  background: var(--tf-card);
  border: 1px solid var(--tf-line);
  text-align: center;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.dz-category-card:hover {
  border-color: var(--tf-line-2);
  box-shadow: var(--tf-sh-2);
}

.dz-category-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--tf-surface);
}

.dz-category-card span {
  display: block;
  padding: 10px 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tf-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 消息列表 */
.vp-pc-messages {
  display: grid;
  gap: var(--tf-s2);
  padding: var(--tf-s4) 0 var(--tf-s8);
}

/* 物流详情 */
.vp-pc-logistics {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--tf-s4) 0 var(--tf-s8);
}

/* 自提点列表 */
.vp-pc-stores {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--tf-s4) 0 var(--tf-s8);
}

/* 状态页 / 工具页面的头部（它们自带的简易 header 里也用了这些类） */
.vp-mobile-header-inner>i,
.vp-back-btn i,
.vp-home-btn i {
  font-size: 19px;
}

/* ===== 重发激活邮件（resend_email）===== */
.vform-wrap {
  max-width:440px; margin:40px auto 60px; padding:0 16px;
}
.vform-hd {
  text-align:center; margin-bottom:24px;
}
.vform-hd h1 {
  font-size:24px;font-weight:800;color:var(--tf-ink);margin:0 0 6px;
}
.vform-hd p {
  font-size:14px;color:var(--tf-ink-3);margin:0;
}
.vform-card {
  background:var(--tf-card);border:1px solid var(--tf-line);border-radius:16px;padding:32px 28px;box-shadow:0 2px 16px rgba(0,0,0,0.04);
}
.vform-step {
  display:none;
}
.vform-step.active {
  display:block;
}
.vform-field {
  margin-bottom:16px;
}
.vform-field label {
  font-size:13px;font-weight:600;color:var(--tf-ink);display:block;margin-bottom:6px;
}
.vform-field input {
  width:100%;padding:13px 14px;border:1px solid var(--tf-line-2);border-radius:10px;font-size:14px;outline:none;box-sizing:border-box;
}
.vform-field input:focus {
  border-color:var(--vn-primary);box-shadow:0 0 0 3px rgba(18,119,100,.12);
}
.vform-back {
  font-size:13px;color:var(--vn-primary);text-decoration:none;display:inline-flex;align-items:center;gap:4px;margin-bottom:14px;
}
.vcode-boxes {
  display:flex;gap:10px;justify-content:center;margin-bottom:12px;
}
.vcode-boxes .field-item {
  width:48px;height:48px;border:1px solid var(--tf-line-2);border-radius:10px;text-align:center;font-size:20px;font-weight:700;line-height:48px;background:var(--tf-surface);
}
.vcode-boxes .field-item.field-item-focus {
  border-color:var(--vn-primary);box-shadow:0 0 0 2px var(--vn-primary-bg);
}
.vcode-timer {
  font-size:13px;color:var(--tf-ink-3);text-align:center;margin-bottom:16px;
}
.vcode-timer span {
  color:var(--vn-primary);font-weight:600;
}

/* ===== 客服（customer_service）===== */
.vp-service-content {
  display: flex;
      flex-direction: column;
      gap: 20px;
}
.vp-service-card {
  background: var(--vp-white);
      border-radius: var(--vp-radius);
      padding: 24px;
      transition: all 0.2s;
}
.vp-service-card:hover {
  box-shadow: var(--vp-shadow);
}
.vp-service-icon {
  width: 60px;
      height: 60px;
      background: linear-gradient(135deg, var(--vp-primary) 0%, var(--vp-primary-hover) 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
}
.vp-service-icon i {
  font-size: 28px;
      color: var(--vp-white);
}
.vp-service-card h3 {
  font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
}
.vp-service-card > p {
  font-size: 14px;
      color: var(--vp-text-light);
      margin-bottom: 16px;
}
.vp-service-contact {
  display: flex;
      flex-direction: column;
      gap: 12px;
}
.vp-service-item {
  display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      color: var(--vp-text);
}
.vp-service-item i {
  color: var(--vp-primary);
      font-size: 18px;
}
.vp-service-qrcode {
  text-align: center;
      padding: 16px 0;
}
.vp-service-qrcode img {
  max-width: 200px;
      max-height: 200px;
      border-radius: var(--vp-radius);
      border: 1px solid var(--vp-border);
}
.vp-service-link-btn {
  display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      background: var(--vp-primary);
      color: var(--vp-white);
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.2s;
}
.vp-service-link-btn:hover {
  background: var(--vp-primary-hover);
}
.vp-service-link-btn i {
  font-size: 16px;
}
.vp-service-text {
  padding: 16px;
      background: var(--vp-bg);
      border-radius: 6px;
      text-align: left;
      line-height: 1.6;
}
.vp-service-text p {
  font-size: 14px;
      color: var(--vp-text);
      margin: 0;
}
.vp-service-empty {
  text-align: center;
      padding: 32px 16px;
}
.vp-service-empty img {
  width: 120px;
      height: 120px;
      margin-bottom: 16px;
      opacity: 0.6;
}
.vp-service-empty p {
  font-size: 14px;
      color: var(--vp-text-light);
      margin: 0;
}
.vp-service-hours p {
  font-size: 14px;
      color: var(--vp-text-light);
      margin: 4px 0;
}
.vp-faq-list {
  display: flex;
      flex-direction: column;
      gap: 16px;
}
.vp-faq-item {
  padding: 16px;
      background: var(--vp-bg);
      border-radius: 6px;
}
.vp-faq-item h4 {
  font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
      color: var(--vp-text);
}
.vp-faq-item p {
  font-size: 13px;
      color: var(--vp-text-light);
      margin: 0;
}
.vp-mobile-bottom-nav {
  position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--vp-white);
      box-shadow: 0 -1px 10px rgba(0,0,0,0.08);
      display: flex;
      justify-content: space-around;
      padding: 8px 0;
      z-index: 100;
}
.vp-mobile-nav-item {
  display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 8px 16px;
      font-size: 11px;
      color: var(--vp-text-light);
}
.vp-mobile-nav-item.active {
  color: var(--vp-primary);
}
.vp-mobile-nav-item i {
  font-size: 20px;
}
@media (max-width: 991px) {
  .vp-service-card {
    padding: 20px;
  }
  .vp-service-icon {
    width: 50px;
            height: 50px;
  }
  .vp-service-icon i {
    font-size: 24px;
  }
}
/* 页头已统一为 sticky（见文件上方 .vp-pc-header），这里原本还有一份 fixed 覆盖，
   配合 .page-wrapper.vp-wrapper 补 64px；但绝大多数页面外层只有 .vp-wrapper，
   补偿没生效 → 桌子头压在页头下面（购物车踩过）。两段一起删掉。 */
.vp-pc-logo {
  display: flex;
      align-items: center;
      height: 100%;
}
.vp-pc-logo img {
  max-height: 40px;
}
.vp-pc-logo span {
  font-size: 20px;
      font-weight: 700;
      color: var(--vp-primary);
}
.vp-pc-cart {
  display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 8px;
      transition: background 0.2s;
}
.vp-pc-cart:hover {
  background: var(--vp-bg);
}
.vp-pc-cart i {
  font-size: 22px;
      color: var(--vp-text);
}

/* ===== 备用结算（checkout_1）===== */
.opay-popup {
  display:none; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.5);
}
.opay-popup.show {
  display:flex; align-items:center; justify-content:center;
}
.opay-popup-panel {
  background:var(--tf-card); border-radius:16px; width:90%; max-width:400px; max-height:80vh; overflow-y:auto; padding:24px;
}
.opay-popup-panel h3 {
  font-size:18px; font-weight:700; color:var(--tf-ink); margin:0 0 16px; text-align:center;
}
.opay-wechat-qr {
  display:block; margin:0 auto; width:200px; height:200px;
}
.opay-btn-row {
  display:flex; gap:10px; margin-top:16px;
}
.chk-layout {
  display: flex;
              flex-direction: column;
              gap: 20px;
}
.chk-form-grid {
  display: grid;
              grid-template-columns: 1fr;
              gap: 20px;
}
@media(min-width:768px) {
  .chk-form-grid {
    grid-template-columns: 1fr 300px;
  }
}
.chk-block {
  background: var(--tf-card);
              border: 1px solid var(--tf-line);
              border-radius: 12px;
              padding: 20px 24px;
}
.chk-block-title {
  font-size: 16px;
              font-weight: 700;
              color: var(--tf-ink);
              margin: 0 0 14px;
              display: flex;
              align-items: center;
              gap: 8px;
}
.chk-block-title i {
  color: var(--vn-primary);
}
.chk-block-sm {
  padding: 16px 20px;
}
.chk-block-sm .chk-block-title {
  font-size: 14px;
              margin-bottom: 10px;
}
.chk-block-sm input, .chk-block-sm textarea {
  padding: 8px 12px;
              font-size: 13px;
}
.chk-summary {
  background: var(--tf-card);
              border: 1px solid var(--tf-line);
              border-radius: 14px;
              padding: 28px;
              position: static;
}
.chk-supplier-group {
  border: 1px solid var(--tf-line);
              border-radius: 10px;
              padding: 18px 20px;
              margin-bottom: 14px;
}
.chk-supplier-hd {
  display: flex;
              align-items: center;
              gap: 8px;
              padding-bottom: 12px;
              margin-bottom: 12px;
              border-bottom: 1px solid var(--tf-line);
}
.chk-supplier-hd h4 {
  font-size: 15px;
              font-weight: 700;
              color: var(--tf-ink);
              margin: 0;
}
.chk-supplier-tag {
  padding: 2px 8px;
              border-radius: 4px;
              font-size: 11px;
              font-weight: 600;
}
.chk-supplier-tag.supplier {
  background: var(--vn-primary-bg);
              color: var(--vn-primary);
}
.chk-supplier-tag.self {
  background: var(--tf-surface);
              color: #3B5998;
}
.chk-supplier-total {
  margin-top: 12px;
              padding-top: 12px;
              border-top: 1px solid var(--tf-line);
}
.chk-supplier-total .chk-line {
  font-size: 13px;
              padding: 2px 0;
}
.chk-supplier-total .chk-line:last-child {
  font-weight: 700;
              font-size: 15px;
              color: var(--tf-ink);
}
.chk-grand-total {
  background: var(--vn-primary-bg);
              border: 1px solid rgba(18, 119, 100, 0.15);
              border-radius: 12px;
              padding: 18px 24px;
              display: flex;
              justify-content: space-between;
              align-items: center;
}
.chk-grand-total span:first-child {
  font-size: 15px;
              font-weight: 700;
              color: var(--tf-ink);
}
.chk-grand-total span:last-child {
  font-size: 22px;
              font-weight: 800;
              color: var(--vn-primary);
}
.chk-select {
  width: 100%;
              padding: 12px;
              border: 1px solid var(--tf-line-2);
              border-radius: 8px;
              font-size: 14px;
              outline: none;
              background: var(--tf-card);
              box-sizing: border-box;
}
.chk-input {
  width: 100%;
              padding: 12px;
              border: 1px solid var(--tf-line-2);
              border-radius: 8px;
              font-size: 14px;
              outline: none;
              box-sizing: border-box;
}
.chk-pay-list {
  display: flex;
              flex-direction: column;
              gap: 8px;
}
.chk-pay-opt {
  display: flex;
              align-items: center;
              gap: 12px;
              padding: 12px 16px;
              border: 1px solid var(--tf-line);
              border-radius: 8px;
              cursor: pointer;
              transition: all .15s;
}
.chk-pay-opt:hover {
  border-color: var(--vn-primary);
}
.chk-pay-opt input[type=radio] {
  accent-color: var(--vn-primary);
}
.chk-pay-opt img {
  height: 24px;
}
.chk-pay-opt span {
  font-weight: 600;
              font-size: 14px;
}
.chk-pay-opt small {
  color: var(--tf-ink-3);
              font-size: 12px;
}
.chk-items {
  display: flex;
              flex-direction: column;
              gap: 10px;
              margin-bottom: 12px;
              max-height: 360px;
              overflow-y: auto;
}
.chk-item {
  display: flex;
              gap: 12px;
              align-items: center;
}
.chk-item-img {
  position: relative;
              width: 64px;
              height: 64px;
              border-radius: 8px;
              overflow: hidden;
              flex-shrink: 0;
              background: var(--tf-surface);
}
.chk-item-img img {
  width: 100%;
              height: 100%;
              object-fit: cover;
}
.chk-item-qty {
  position: absolute;
              top: -4px;
              right: -4px;
              background: var(--vn-primary);
              color: var(--tf-card);
              font-size: 11px;
              font-weight: 600;
              min-width: 20px;
              height: 20px;
              border-radius: 10px;
              display: flex;
              align-items: center;
              justify-content: center;
}
.chk-item-info {
  flex: 1;
              min-width: 0;
}
.chk-item-info h4 {
  font-size: 13px;
              font-weight: 600;
              color: var(--tf-ink);
              margin: 0 0 2px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
}
.chk-item-info p {
  font-size: 11px;
              color: var(--tf-ink-3);
              margin: 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
}
.chk-item-price {
  font-size: 14px;
              font-weight: 700;
              color: var(--tf-ink);
              flex-shrink: 0;
}
.chk-line {
  display: flex;
              justify-content: space-between;
              font-size: 13px;
              color: var(--tf-ink-2);
}
@media(max-width:768px) {
  .chk-summary {
    padding: 18px;
  }
  .chk-supplier-group {
    padding: 12px 14px;
  }
  .chk-block {
    padding: 16px 18px;
  }
  .chk-form-grid {
    margin-bottom: 60px;
  }
}

/* ============================================================================
   响应式层（必须最后：同权重下后写的生效）
   ========================================================================== */

/* 双端切换的唯一开关 */
.vp-show-pc {
  display: none;
}

.vp-show-mobile {
  display: block;
}

@media (min-width: 992px) {
  .vp-show-pc {
    display: block;
  }

  .vp-show-mobile {
    display: none;
  }

  .container,
  .vp-container {
    padding-inline: 24px;
  }
}

/* < 992：单列，汇总卡掉到列表下面 */
@media (max-width: 991px) {
  .vp-cart-layout {
    grid-template-columns: 1fr;
  }

  .vp-cart-summary {
    position: static;
  }

  .vp-pc-footer-inner {
    padding: var(--tf-s6) var(--tf-gutter);
  }

  .vp-footer-content {
    grid-template-columns: 1fr 1fr;
    gap: var(--tf-s5);
  }
}

/* 个人中心 / 订单：小屏单列，卡片脚部纵向堆叠 */
@media (max-width: 991px) {
  .vp-user-layout {
    grid-template-columns: 1fr;
  }

  .vp-user-main {
    padding: var(--tf-s4) 0 var(--tf-s6);
  }

  .vp-order-header,
  .vp-order-footer {
    padding-inline: var(--tf-s4);
  }

  .vp-order-body {
    padding-inline: var(--tf-s4);
  }

  .vp-order-goods>img {
    width: 68px;
    height: 68px;
  }

  .vp-order-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .vp-order-actions {
    justify-content: flex-end;
  }

  .vp-order-actions .vp-btn,
  .vp-order-actions .vp-btn-primary,
  .vp-order-actions .vp-btn-outline {
    flex: 1 1 auto;
    min-height: var(--tf-tap);
  }

  /* 弹层在小屏从底部升起，拇指够得着 */
  .vp-popup-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .vp-popup-panel {
    max-width: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
    max-height: 90vh;
  }
}

@media (max-width: 991px) {

  .vp-checkout-grid,
  .vp-pay-layout {
    grid-template-columns: 1fr;
  }

  .vp-checkout-sidebar {
    position: static;
  }

  .vp-checkout-main,
  .vp-orderpay-main {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }

  /* 手机端才启用固定下单条，同时把卡片里那个桌面按钮收起来 */
  .vp-mobile-order-bar {
    display: block;
  }

  .vp-btn-pc {
    display: none !important;
  }

  .vp-order-quick-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: var(--tf-s3) var(--tf-s2);
  }

  .vp-function-grid {
    grid-template-columns: 1fr;
  }

  .vp-detail-footer .vp-btn,
  .vp-detail-footer .vp-btn-primary,
  .vp-detail-footer .vp-btn-outline {
    flex: 1 1 0;
  }
}

@media (max-width: 991px) {
  .vp-form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .vp-form-actions .vp-btn,
  .vp-form-actions .vp-btn-primary,
  .vp-form-actions .vp-btn-outline {
    width: 100%;
    min-width: 0;
  }

  .vp-coupon-card {
    padding: var(--tf-s3) var(--tf-s4);
    gap: var(--tf-s3);
  }

  .vp-coupon-left {
    min-width: 88px;
  }

  .vp-coupon-value {
    font-size: 21px;
  }

  .vp-review-item,
  .vp-record-card {
    padding: var(--tf-s3) var(--tf-s4);
  }

  .vp-review-img {
    width: 72px;
    height: 72px;
  }

  .vp-result-card,
  .vp-result-card-pc {
    padding: var(--tf-s6) var(--tf-s5);
  }
}

/* 992–1199 是小桌面：两栏硬挤 6 列会裁掉「小计」，收掉「单价」那一列 */
@media (min-width: 992px) and (max-width: 1199px) {
  .vp-cart-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--tf-s4);
  }

  .vp-cart-header,
  .vp-cart-item {
    grid-template-columns: 44px minmax(0, 1fr) 112px 100px 40px;
    gap: var(--tf-s2);
    padding-inline: var(--tf-s4);
  }

  .vp-cart-header-price,
  .vp-cart-price {
    display: none;
  }

  .vp-cart-img {
    width: 72px;
    height: 72px;
  }
}

/* ---------- 动效克制 ---------- */
@media (prefers-reduced-motion: reduce) {

  .vp-btn,
  .vp-btn-primary,
  .vp-btn-outline,
  .vp-qty-btn,
  .vp-cart-item,
  .check-box-input {
    transition: none !important;
  }

  .vp-btn:active {
    transform: none;
  }
}