/**
 * 商城 H5 — 对齐项目根目录 DESIGN.md（暖色纸感、8px 间距、边框/按钮/阴影规范）
 * 色板：Cursor Cream / Dark、Accent Orange、暖色语义与 rgba(38,37,30,α) 边框
 */
:root {
  /* DESIGN.md tokens */
  --cursor-dark: #26251e;
  --cursor-cream: #f2f1ed;
  --cursor-light: #e6e5e0;
  --cursor-surface-100: #f7f7f4;
  --cursor-surface-300: #ebeae5;
  --cursor-surface-400: #e6e5e0;
  --cursor-surface-500: #e1e0db;
  --color-accent: #f54e00;
  --color-error: #cf2d56;
  --color-success: #1f8a65;

  /* 商城语义（保持 --mall-* 变量名，模板与逻辑零改动） */
  --mall-primary: var(--color-accent);
  --mall-primary-dark: #d13f00;
  --mall-primary-light: #ff6a2e;
  --mall-bg: var(--cursor-cream);
  --mall-bg-card: #ffffff;
  --mall-bg-elevated: var(--cursor-surface-100);
  --mall-header-bg: var(--cursor-surface-100);
  --mall-header-text: var(--cursor-dark);
  --mall-white: #fff;
  --mall-text: var(--cursor-dark);
  --mall-text-secondary: rgba(38, 37, 30, 0.72);
  --mall-text-muted: rgba(38, 37, 30, 0.55);
  --mall-border: rgba(38, 37, 30, 0.1);
  --mall-border-medium: rgba(38, 37, 30, 0.2);
  --mall-border-strong: rgba(38, 37, 30, 0.55);
  /* DESIGN 环境阴影 + 轻层次 */
  --mall-shadow-sm: rgba(0, 0, 0, 0.02) 0px 0px 16px, rgba(0, 0, 0, 0.008) 0px 0px 8px;
  --mall-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --mall-shadow-lg: rgba(0, 0, 0, 0.12) 0px 14px 32px, rgba(0, 0, 0, 0.08) 0px 6px 16px;
  --mall-focus: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  --mall-radius: 8px;
  --mall-radius-sm: 8px;
  --mall-radius-pill: 9999px;
  --mall-transition: 150ms ease;
  /* 首页顶栏：红底白搜索（对齐参考图 / 电商通用顶栏） */
  --mall-index-header-red: #e02e24;
  --mall-index-header-red-dark: #c41e1a;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0;
  background: var(--mall-bg);
  font-family: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  color: var(--mall-text);
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
}

/* 安全区 */
.mall-page { padding-bottom: 56px; min-height: 100vh; }
.mall-page.has-header { padding-top: 44px; }

/* 顶部导航（暖色底 + 暖边，对齐 DESIGN 导航） */
.mall-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: rgba(247, 247, 244, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
  color: var(--mall-header-text);
}
.mall-header .mall-search-wrap {
  flex: 1;
  height: 30px;
  background: var(--mall-white);
  border: 1px solid var(--mall-border);
  border-radius: var(--mall-radius-pill);
  display: flex;
  align-items: center;
  padding: 0 14px;
  transition: border-color var(--mall-transition), box-shadow var(--mall-transition);
}
.mall-header .mall-search-wrap:focus-within {
  border-color: var(--mall-border-medium);
  box-shadow: var(--mall-focus);
}
.mall-header .mall-search-wrap i { color: var(--mall-text-muted); margin-right: 8px; font-size: 14px; }
.mall-header .mall-search-wrap input { flex: 1; border: none; background: none; font-size: 14px; outline: none; }
.mall-header .mall-search-wrap input::placeholder { color: var(--mall-text-muted); }

/* 底部导航 */
.mall-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: var(--mall-bg-elevated);
  border-top: 1px solid var(--mall-border);
  display: flex;
  z-index: 100;
  box-shadow: var(--mall-shadow-sm);
}
.mall-tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--mall-text-secondary);
  font-size: 11px;
  font-weight: 500;
  transition: color var(--mall-transition);
}
.mall-tabbar-item i { font-size: 22px; margin-bottom: 3px; opacity: .9; }
.mall-tabbar-item.active { color: var(--mall-primary); font-weight: 600; }

/* 首页顶栏搜索（红底 + 居中白胶囊，参考商城图） */
.mall-index-search {
  background: var(--mall-index-header-red);
  padding: 12px 14px 14px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: none;
  box-shadow: none;
}
.mall-index-search .mall-search-wrap {
  max-width: 100%;
  height: 36px;
  margin: 0 auto;
  background: var(--mall-white);
  border: none;
  border-radius: var(--mall-radius-pill);
  display: flex;
  align-items: center;
  padding: 0 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.mall-index-search .mall-search-wrap:focus-within {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
}
.mall-index-search .mall-search-wrap i {
  color: #c8c8c8;
  margin-right: 8px;
  font-size: 14px;
}
.mall-index-search .mall-search-wrap input {
  flex: 1;
  border: none;
  background: none;
  font-size: 15px;
  outline: none;
  color: var(--mall-text);
}
.mall-index-search .mall-search-wrap input::placeholder {
  color: #bfbfbf;
}

/* 首页：滚到「商品推荐」区后，顶部精简悬浮搜索 + 横向分类 */
.mall-index-product-anchor {
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}
.mall-index-float-bar {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 120;
  padding: 0;
  background: transparent;
  border-bottom: none;
  box-shadow: none;
  transform: translateY(-110%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.mall-index-float-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
/* 悬浮条：上红底白搜索 + 下浅色分类区 */
.mall-index-float-bar-search-row {
  background: var(--mall-index-header-red);
  padding: 8px 12px 10px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
}
.mall-index-float-search {
  display: flex;
  align-items: center;
  height: 34px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 13px;
  background: var(--mall-white);
  border: none;
  border-radius: var(--mall-radius-pill);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.mall-index-float-search:focus-within {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
}
.mall-index-float-search i {
  color: #c8c8c8;
  font-size: 13px;
  margin-right: 8px;
  flex-shrink: 0;
}
.mall-index-float-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 14px;
  outline: none;
  color: var(--mall-text);
}
.mall-index-float-search input::placeholder {
  color: #bfbfbf;
}
.mall-index-float-cats {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 4px 8px;
  background: var(--mall-bg-card);
  border-bottom: 1px solid var(--mall-border);
}
.mall-index-float-cats::-webkit-scrollbar {
  display: none;
}
/* 与红顶搜索条协调：横向文字入口，无胶囊按钮感 */
.mall-index-float-cat {
  flex: 0 0 auto;
  position: relative;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--mall-text-secondary);
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 0;
  white-space: nowrap;
  transition: color var(--mall-transition);
}
.mall-index-float-cat + .mall-index-float-cat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: var(--mall-border);
  opacity: 0.85;
}
.mall-index-float-cat:active {
  color: var(--mall-primary);
}

/* 分类入口 */
.mall-categories {
  background: var(--mall-bg-card);
  padding: 16px 0 20px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
}
.mall-cat-item {
  width: 25%;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
  color: var(--mall-text);
  transition: transform var(--mall-transition);
}
.mall-cat-item:active { transform: scale(0.96); }
.mall-cat-item i {
  display: block;
  font-size: 28px;
  color: var(--mall-primary);
  margin-bottom: 6px;
  opacity: .95;
}
.mall-cat-item span { font-size: 13px; font-weight: 500; }
/* 经销商店铺等：分类图片图标（首页分类多为 Font Awesome） */
.mall-cat-item img.mall-cat-thumb {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: cover;
  margin: 0 auto 6px;
  border-radius: 6px;
}
.mall-cat-item.active { color: var(--mall-primary); }
.mall-cat-item.active i { color: var(--mall-primary); opacity: 1; }
.mall-cat-item.active img.mall-cat-thumb { outline: 2px solid var(--mall-primary); outline-offset: 1px; }

/* 经销商店铺自定义分类：整体高度约为首页分类区的 2/3（仅缩小垂向内边距与文案；图标与首页一致 28px） */
.mall-categories.mall-categories--compact {
  padding: 11px 0 13px;
  margin-bottom: 7px;
}
.mall-categories.mall-categories--compact .mall-cat-item {
  padding: 7px 0;
}
.mall-categories.mall-categories--compact .mall-cat-item span {
  font-size: 12px;
}

/* 经销商店铺首页（列表）：层次与圆角卡片 */
.dist-shop {
  background: var(--mall-bg);
  padding-bottom: 8px;
}
.dist-shop-header__back,
.dist-shop-header__spacer {
  width: 40px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--mall-header-text);
  font-size: 20px;
  text-decoration: none;
}
.dist-shop-header__spacer {
  pointer-events: none;
}
.dist-shop-header__title {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--mall-header-text);
  padding: 0 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
figure.dist-shop-banner {
  margin: 12px 12px 0;
  border-radius: var(--mall-radius);
  overflow: hidden;
  background: var(--cursor-surface-400);
  border: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
}
.dist-shop-banner img {
  width: 100%;
  display: block;
  max-height: 200px;
  object-fit: cover;
  vertical-align: middle;
}
.dist-shop-cats {
  margin: 12px 12px 0;
  border-radius: var(--mall-radius);
  overflow: hidden;
  border: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
}
.dist-shop-cats .mall-categories {
  margin-bottom: 0;
  border-radius: var(--mall-radius);
}
.dist-shop-body {
  margin: 12px 12px 0;
  background: var(--mall-bg-card);
  border-radius: var(--mall-radius);
  overflow: hidden;
  border: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
}
.dist-shop-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--mall-border);
}
.dist-shop-section-head__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--mall-text);
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dist-shop-section-head__bar {
  width: 4px;
  height: 17px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--mall-primary) 0%, var(--mall-primary-dark) 100%);
  flex-shrink: 0;
}
.dist-shop-section-head__more {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--mall-text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: color var(--mall-transition);
}
.dist-shop-section-head__more i {
  font-size: 11px;
  opacity: 0.85;
}
.dist-shop-section-head__more:hover,
.dist-shop-section-head__more:active {
  color: var(--color-error);
}
.dist-shop-grid.mall-product-grid {
  padding: 6px 10px 16px;
}
.dist-shop-body .mall-product-item a {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}
.dist-shop-empty {
  text-align: center;
  padding: 48px 24px 40px;
  margin: 0;
  color: var(--mall-text-muted);
  font-size: 14px;
  line-height: 1.6;
}
.dist-shop-empty a {
  color: var(--mall-primary);
  text-decoration: none;
  font-weight: 500;
}
.dist-shop-empty a:active {
  opacity: 0.85;
}
.dist-shop-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 16px 12px 8px;
  padding: 14px 12px;
  background: var(--mall-bg-card);
  border-radius: var(--mall-radius);
  border: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
}
.dist-shop-pager__info {
  font-size: 13px;
  color: var(--mall-text-muted);
  min-width: 100px;
  text-align: center;
}
.dist-shop-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mall-text-muted);
  background: var(--cursor-surface-400);
  border: 1px solid var(--mall-border);
  border-radius: var(--mall-radius-pill);
  text-decoration: none;
  transition: color var(--mall-transition), background var(--mall-transition), border-color var(--mall-transition);
}
.dist-shop-pager__btn:active {
  color: var(--color-error);
  background: var(--cursor-surface-300);
}
.dist-shop-pager__btn--disabled {
  color: rgba(38, 37, 30, 0.35);
  background: var(--cursor-surface-100);
  border-color: var(--mall-border);
  pointer-events: none;
}

/* Banner 轮播 */
.mall-banner {
  margin: 0 12px 14px;
  border-radius: var(--mall-radius);
  overflow: hidden;
  background: var(--cursor-surface-400);
  border: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
  position: relative;
}
.mall-banner .mall-banner-item { width: 100%; }
.mall-banner .mall-banner-inner {
  display: block;
  position: relative;
  width: 100%;
  padding-top: 40%;
  min-height: 140px;
  background: var(--cursor-surface-400);
}
.mall-banner .mall-banner-inner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mall-banner-dots {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 10px 0;
  background: rgba(0,0,0,.25);
}
.mall-banner-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  margin: 0 4px;
  transition: all var(--mall-transition);
}
.mall-banner-dots span.active {
  background: rgba(255,255,255,.95);
  width: 18px;
  border-radius: 4px;
}

/* 标题块 - 更醒目 */
.mall-section-title {
  padding: 16px 14px 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--mall-text);
  letter-spacing: 0.3px;
}
.mall-section-title .more {
  float: right;
  font-size: 13px;
  font-weight: 400;
  color: var(--mall-text-muted);
  text-decoration: none;
  transition: color var(--mall-transition);
}
.mall-section-title .more:hover { color: var(--color-error); }

/* 商品网格 - 卡片大气 */
.mall-product-grid { display: flex; flex-wrap: wrap; padding: 0 10px; gap: 0 8px; }
.mall-product-item { width: calc(50% - 4px); padding: 6px 0; }
.mall-product-item a {
  display: block;
  background: var(--mall-bg-card);
  border-radius: var(--mall-radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--mall-text);
  border: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
  transition: box-shadow var(--mall-transition), transform var(--mall-transition), border-color var(--mall-transition);
}
.mall-product-item a:active { transform: scale(0.98); box-shadow: var(--mall-shadow); border-color: var(--mall-border-medium); }
.mall-product-item .cover-wrap {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: var(--cursor-surface-100);
  overflow: hidden;
}
.mall-product-item .cover-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.mall-product-item a:active .cover-wrap img { transform: scale(1.02); }
.mall-product-item .cover-wrap .placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--cursor-surface-300);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mall-text-muted);
  font-size: 12px;
}
.mall-product-item .info { padding: 10px 10px 12px; }
.mall-product-item .name {
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
  height: 2.8em;
  color: var(--mall-text);
}
.mall-product-item .price {
  color: var(--mall-primary);
  font-size: 17px;
  font-weight: 700;
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.mall-product-item .price .unit { font-size: 12px; font-weight: 600; }
.mall-product-item .original { color: var(--mall-text-muted); font-size: 11px; text-decoration: line-through; margin-left: 4px; }
.mall-product-item .sales { font-size: 12px; color: var(--mall-text-muted); margin-top: 4px; }

/* 商品列表页头部（sticky 时贴在搜索框下方，避免与 fixed 顶栏重叠） */
.mall-products-header {
  position: sticky;
  top: 44px;
  z-index: 99;
  background: var(--mall-bg-elevated);
  padding: 6px 12px 8px;
  border-bottom: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
}
.mall-cat-tabs {
  display: flex;
  overflow-x: auto;
  gap: 4px;
  padding: 2px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mall-cat-tabs::-webkit-scrollbar { display: none; }
.mall-cat-tabs a {
  flex-shrink: 0;
  padding: 6px 10px;
  text-decoration: none;
  color: var(--mall-text-secondary);
  font-size: 13px;
  font-weight: 500;
  transition: color var(--mall-transition);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.mall-cat-tabs a.active {
  color: var(--mall-primary);
  border-bottom-color: var(--mall-primary);
}

/* 列表单行商品 */
.mall-list-item {
  background: var(--mall-bg-card);
  margin-bottom: 10px;
  padding: 14px;
  display: flex;
  text-decoration: none;
  color: var(--mall-text);
  border-radius: var(--mall-radius-sm);
  border: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
  transition: box-shadow var(--mall-transition), border-color var(--mall-transition);
}
.mall-list-item .thumb {
  width: 82px;
  height: 82px;
  flex-shrink: 0;
  border-radius: var(--mall-radius-sm);
  overflow: hidden;
  background: var(--cursor-surface-100);
}
.mall-list-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.mall-list-item .body { flex: 1; margin-left: 14px; min-width: 0; }
.mall-list-item .title { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mall-list-item .meta { font-size: 13px; color: var(--mall-text-muted); margin-top: 6px; }
.mall-list-item .price { color: var(--mall-primary); font-weight: 700; font-size: 15px; margin-top: 8px; }

/* 经销商分类页：左侧分类 + 右侧单列列表（左图右文） */
.dist-cat-prod-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 8px;
}
.dist-cat-prod-list .mall-list-item {
  margin-bottom: 0;
  padding: 10px 12px;
  align-items: stretch;
}
.dist-cat-prod-list .mall-list-item .thumb {
  width: 96px;
  height: 96px;
  border-radius: var(--mall-radius-sm);
}
.dist-cat-prod-list .mall-list-item .body {
  display: flex;
  flex-direction: column;
  margin-left: 12px;
  padding: 2px 0;
  min-height: 96px;
}
.dist-cat-prod-list .mall-list-item .title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  color: var(--mall-text);
}
.dist-cat-prod-list .mall-list-item .price {
  margin-top: 8px;
  font-size: 16px;
}
.dist-cat-prod-list .mall-list-item .price .unit {
  font-size: 12px;
  font-weight: 600;
}
.dist-cat-prod-list .mall-list-item .original {
  color: var(--mall-text-muted);
  font-size: 11px;
  font-weight: 400;
  text-decoration: line-through;
  margin-left: 4px;
}
.dist-cat-prod-list .mall-list-item .meta {
  margin-top: 4px;
  font-size: 12px;
}
.dist-cat-empty {
  text-align: center;
  padding: 40px 16px;
  margin: 0;
  color: var(--mall-text-muted);
  font-size: 14px;
}

/* 按钮：DESIGN.md Primary Warm Surface + 8px 圆角；全宽块略放大 */
.mall-btn {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--mall-radius);
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  border: 1px solid transparent;
  cursor: pointer;
  outline: none;
  transition: color var(--mall-transition), background var(--mall-transition), border-color var(--mall-transition), box-shadow var(--mall-transition), transform 0.05s ease;
}
.mall-btn:active { transform: scale(0.98); }
.mall-btn-primary {
  background: var(--cursor-surface-300);
  color: var(--cursor-dark);
  border-color: var(--mall-border);
  box-shadow: none;
}
.mall-btn-primary:hover {
  color: var(--color-error);
}
.mall-btn-primary:focus-visible {
  box-shadow: var(--mall-focus);
  border-color: var(--mall-border-medium);
}
/* 微信官方主色：订单付款 / 去支付 等收银台主按钮 */
.mall-btn-wechat {
  background: #07c160;
  color: #fff;
  border-color: #07c160;
  box-shadow: none;
}
.mall-btn-wechat:hover {
  color: #fff;
  background: #06ad56;
  border-color: #06ad56;
}
.mall-btn-wechat:focus-visible {
  box-shadow: 0 0 0 2px rgba(7, 193, 96, 0.35);
  border-color: #06ad56;
}
.mall-btn-wechat:disabled,
.mall-btn-wechat[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}
.mall-btn-block {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  border-radius: var(--mall-radius);
}

/* 我的页面 - 头部与菜单 */
/* ---------- 我的/会员中心 ---------- */
.mall-mine-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: rgba(247, 247, 244, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 100;
  border-bottom: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
}
.mall-mine-topbar-placeholder { width: 40px; }
.mall-mine-topbar-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--mall-text);
}
.mall-mine-topbar-msg {
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--mall-text-secondary);
  font-size: 18px;
  text-decoration: none;
}
.mall-mine-page { padding-bottom: 60px; min-height: 100vh; background: var(--mall-bg); }
.mall-mine-card {
  margin: 12px 12px 0;
  border-radius: var(--mall-radius);
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}
.mall-mine-card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #35342c 0%, var(--cursor-dark) 45%, #3d3c34 100%);
  opacity: 0.98;
}
.mall-mine-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L30 60M0 30L60 30' stroke='rgba(255,255,255,.08)' stroke-width='.5' fill='none'/%3E%3C/svg%3E");
  opacity: 0.6;
}
.mall-mine-card-inner { position: relative; padding: 20px 16px 16px; }
.mall-mine-card-head {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}
.mall-mine-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.5);
  overflow: hidden;
}
.mall-mine-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mall-mine-profile-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: #07c160;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  box-shadow: 0 2px 8px rgba(7, 193, 96, 0.35);
}
.mall-mine-profile-btn:active {
  opacity: 0.92;
  transform: scale(0.98);
}
.mall-mine-user { flex: 1; min-width: 0; margin-left: 14px; }
.mall-mine-name {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mall-mine-name .mine-copy-btn {
  background: none;
  border: none;
  padding: 2px;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
}
.mall-mine-level { font-size: 13px; color: rgba(255,255,255,.9); margin-top: 2px; }
.mall-mine-member-entry {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  padding: 6px 10px;
  background: rgba(255,255,255,.2);
  border-radius: 20px;
}
.mall-mine-member-entry i:first-child { font-size: 12px; }
.mall-mine-stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.25);
}
.mall-mine-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #fff;
}
.mall-mine-stat-num { font-size: 20px; font-weight: 700; }
.mall-mine-stat-label { font-size: 12px; opacity: .95; margin-top: 2px; }
.mall-mine-orders {
  margin: 12px 12px 0;
  background: var(--mall-bg-card);
  border-radius: var(--mall-radius);
  padding: 14px 16px;
  border: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
}
.mall-mine-orders-title {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--mall-text);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
}
.mall-mine-orders-bar {
  width: 4px;
  height: 16px;
  background: var(--mall-primary);
  border-radius: 2px;
  margin-right: 8px;
}
.mall-mine-orders-title .fa-chevron-right { margin-left: auto; color: var(--mall-text-muted); font-size: 12px; }
.mall-mine-orders-icons {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.mall-mine-order-icon {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--mall-text);
  font-size: 12px;
  position: relative;
}
.mall-mine-order-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--mall-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mall-primary);
  font-size: 18px;
  margin-bottom: 6px;
  background: #fff;
}
.mall-mine-order-icon-label { color: var(--mall-text-secondary); }
.mall-mine-order-badge {
  position: absolute;
  top: -2px;
  right: 50%;
  margin-right: -24px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--mall-primary);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mall-mine-menu {
  margin: 12px 12px 0;
  background: var(--mall-bg-card);
  border-radius: var(--mall-radius);
  overflow: hidden;
  border: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
}
.mall-mine-menu-item {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--mall-text);
  font-size: 15px;
  border-bottom: 1px solid var(--mall-border);
  transition: background var(--mall-transition);
}
.mall-mine-menu-item:last-child { border-bottom: none; }
.mall-mine-menu-item:active { background: var(--mall-bg); }
.mall-mine-menu-item > i:first-child {
  width: 28px;
  margin-right: 14px;
  color: var(--mall-primary);
  font-size: 18px;
}
.mall-mine-menu-item span { flex: 1; font-weight: 500; }
.mall-mine-menu-item .arrow { color: var(--mall-text-muted); font-size: 12px; }

/* 兼容旧类名（其他页未使用则可不保留） */
.mall-mine-header {
  background: linear-gradient(165deg, var(--mall-primary) 0%, var(--mall-primary-dark) 60%);
  padding: 28px 16px 44px;
  color: var(--mall-white);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.mall-mine-header .avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,.4);
}
.mall-mine-header .nickname { font-size: 19px; font-weight: 600; letter-spacing: 0.02em; }

/* 订单状态 */
.mall-order-status { font-size: 13px; font-weight: 500; }
.mall-order-status.pending { color: var(--mall-primary); }
.mall-order-status.paid { color: #1989fa; }
.mall-order-status.pickup_pending { color: #ff8f1f; }
.mall-order-status.done { color: var(--mall-text-muted); }
.mall-order-status.success { color: #07c160; }
.mall-order-status.abnormal { color: #fa5151; }

/* 地址/优惠券列表 */
.mall-addr-item, .mall-coupon-item {
  background: var(--mall-bg-card);
  margin: 0 12px 12px;
  padding: 16px;
  border-radius: var(--mall-radius);
  box-shadow: var(--mall-shadow-sm);
}
.mall-addr-item .default-tag {
  background: linear-gradient(135deg, var(--mall-primary) 0%, var(--mall-primary-dark) 100%);
  color: var(--mall-white);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
}
.mall-coupon-item { display: flex; border-left: 4px solid var(--mall-primary); }
.mall-coupon-item.used { opacity: .65; border-left-color: var(--mall-text-muted); }

@keyframes mall-fade {
  0%, 70% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* 详情/确认页通用：固定顶栏（DESIGN 暖色底 + 深字；覆盖模板内联红底） */
.mall-detail-nav,
.mall-checkout-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: rgba(247, 247, 244, 0.97) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 101;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
}
.mall-detail-nav .mall-detail-back,
.mall-detail-nav .mall-detail-home,
.mall-detail-nav .mall-detail-share,
.mall-checkout-nav a {
  width: 40px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cursor-dark) !important;
  font-size: 18px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.mall-detail-title {
  font-size: 16px;
  color: var(--cursor-dark) !important;
  font-weight: 600;
  flex: 1;
  text-align: center;
}
header.mall-checkout-nav span {
  color: var(--cursor-dark) !important;
}

/* 详情页底部购买栏 */
.mall-detail-buy-bar.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 55px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: #fff;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--mall-border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.08);
}
.mall-detail-buy-bar .btn-buy {
  background: var(--mall-primary) !important;
  color: var(--mall-white) !important;
  font-weight: 600 !important;
  border-radius: var(--mall-radius) !important;
  box-shadow: rgba(245, 78, 0, 0.25) 0 4px 14px;
}

/* 确认订单页卡片与银行选项 */
.mall-bank-item {
  border-radius: var(--mall-radius) !important;
  transition: box-shadow var(--mall-transition), border-color var(--mall-transition);
}
.mall-bank-item.active {
  border-color: var(--mall-primary) !important;
  background: rgba(245, 78, 0, 0.08) !important;
  box-shadow: 0 2px 12px rgba(245, 78, 0, 0.12) !important;
}

/* 地址等子页顶栏（无 mall-detail-nav 类名时） */
.mall-subpage-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  z-index: 101;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(247, 247, 244, 0.97) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--mall-border);
  box-shadow: var(--mall-shadow-sm);
  color: var(--cursor-dark);
}
.mall-subpage-header a,
.mall-subpage-header span {
  color: var(--cursor-dark) !important;
}

/* 商详/列表内仍使用旧内联红色的区域，统一走变量（DESIGN 强调色） */
#mallDetailPrice {
  color: var(--mall-primary) !important;
}
.mall-sku-item:hover,
.mall-sku-value:hover {
  border-color: var(--mall-primary) !important;
  color: var(--mall-primary) !important;
}
.mall-sku-item.active,
.mall-sku-value.active {
  border-color: var(--mall-primary) !important;
  color: var(--mall-primary) !important;
  background: rgba(245, 78, 0, 0.08) !important;
}
.mall-detail-tab.active {
  color: var(--mall-primary) !important;
  font-weight: 600;
  border-bottom-color: var(--mall-primary) !important;
}
.mall-redpack-hero {
  background: linear-gradient(135deg, var(--mall-primary) 0%, var(--mall-primary-dark) 100%) !important;
  box-shadow: rgba(245, 78, 0, 0.2) 0 8px 24px !important;
}
.mall-redpack-section-title i {
  color: var(--mall-primary) !important;
}
.mall-redpack-notice {
  background: rgba(245, 78, 0, 0.06) !important;
  border-left-color: var(--mall-primary) !important;
}
.mall-detail-modal-btn {
  background: linear-gradient(180deg, var(--mall-primary-light) 0%, var(--mall-primary) 100%) !important;
}