/* ═══════════════════════════════════════════════════════════
   鲜丰超市 · 顾客端设计系统 shop.css（WBS-04 / lane-ds）
   依据：方案 §4.2 令牌 / §4.3 尺寸规格 / §4.5 组件清单 / §4.6 四态
   令牌在 shop-tokens.css（@import 引入，壳不用改 link）
   铁律：零框架 / WCAG AA / 触控 ≥44px（视觉小的用 ::after 扩热区）/
         图片懒加载占位 / 动效 ≤280ms / prefers-reduced-motion 全关
   类名规范：语义化短横线 + 状态类 is-*（与壳 shop-* 公共件并存，
   壳类在本文件末尾用令牌对齐覆盖）
   ═══════════════════════════════════════════════════════════ */
@import url("./shop-tokens.css");

/* ── 基础 ─────────────────────────────────────────── */
.shop-app {
  font-family: var(--shop-font); color: var(--shop-text); background: var(--shop-bg);
  font-size: var(--shop-fs-4); line-height: 1.5; min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--shop-tabbar-h) + var(--shop-safe-b)); /* 手机底部 Tab 让位 */
}
.shop-app *, .shop-app *::before, .shop-app *::after { box-sizing: border-box; }
.shop-app img { max-width: 100%; }
.shop-app button { font-family: inherit; }
.shop-app :focus-visible { outline: 2px solid var(--shop-primary-deep); outline-offset: 2px; }
.shop-app ::selection { background: var(--shop-primary-soft); }
.page { min-height: 60dvh; }
.page-in { max-width: var(--shop-max-w); margin: 0 auto; padding: var(--shop-s3) var(--shop-s4) var(--shop-s6); }
.page-title { font-size: var(--shop-fs-7); font-weight: 700; letter-spacing: -.01em; padding: 6px 2px 12px; }
.num { font-family: var(--shop-font-num); font-variant-numeric: tabular-nums; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide { display: none !important; }
/* 懒加载图片：容器自带底色占位，img 未加载时即骨架色；FE 一律
   <img loading="lazy" decoding="async">，首屏图可 loading="eager" 但不 precache 全量 */
img[loading="lazy"] { background: var(--shop-surface-2); }

/* ── 通用面板（结算区块/设置组等白卡容器） ────────── */
.panel { background: var(--shop-surface); border-radius: var(--shop-r-card); box-shadow: var(--shop-sh-card); padding: var(--shop-s4); display: flex; flex-direction: column; gap: var(--shop-s3); }
.panel-head { display: flex; align-items: center; gap: var(--shop-s2); min-height: 24px; }
.panel-title { font-size: var(--shop-fs-5); font-weight: 700; }
.panel-more { margin-left: auto; font-size: var(--shop-fs-3); color: var(--shop-meta); position: relative; min-height: 44px; display: inline-flex; align-items: center; }
.list-group { background: var(--shop-surface); border-radius: var(--shop-r-card); box-shadow: var(--shop-sh-card); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: var(--shop-s3); min-height: 52px; padding: 0 var(--shop-s4); font-size: 14.5px; cursor: pointer; background: none; border: 0; width: 100%; text-align: left; color: var(--shop-text); }
.list-row + .list-row { border-top: 1px solid var(--shop-line); }
.list-row-ico { width: 24px; height: 24px; flex: none; display: grid; place-items: center; color: var(--shop-primary-deep); }
.list-row-side { margin-left: auto; font-size: var(--shop-fs-3); color: var(--shop-meta); display: flex; align-items: center; gap: 6px; }
.list-row-arrow { color: var(--shop-text-3); flex: none; }
@media (hover: hover) { .list-row:hover { background: var(--shop-primary-tint); } }

/* ── 按钮 ─────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--shop-r-btn); cursor: pointer;
  font-size: var(--shop-fs-5); font-weight: 600; line-height: 1; padding: 0 18px; min-height: 44px;
  transition: background var(--shop-t-fast) var(--shop-ease), border-color var(--shop-t-fast) var(--shop-ease), color var(--shop-t-fast) var(--shop-ease), transform var(--shop-t-fast) var(--shop-ease), box-shadow var(--shop-t-fast) var(--shop-ease);
  -webkit-tap-highlight-color: transparent; user-select: none; text-decoration: none;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--shop-primary-deep); color: var(--shop-on); }
.btn.primary:active { background: var(--shop-primary-press); }
.btn.ghost { background: var(--shop-surface); border-color: var(--shop-line-strong); color: var(--shop-text-2); }
.btn.danger { background: var(--shop-danger-ink); color: var(--shop-on); }
.btn.danger-ghost { background: var(--shop-surface); border-color: var(--shop-danger); color: var(--shop-danger-ink); }
.btn.tint { background: var(--shop-primary-soft); color: var(--shop-primary-deep); }
.btn.sm { min-height: 36px; font-size: var(--shop-fs-3); padding: 0 12px; border-radius: 8px; }
.btn.sm::after { content: ""; position: absolute; inset: -4px; } /* 触控热区补足 44 */
.btn.lg { min-height: 50px; font-size: var(--shop-fs-6); padding: 0 28px; border-radius: var(--shop-r-in); }
.btn.block { display: flex; width: 100%; }
.btn.pill { border-radius: var(--shop-r-pill); }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
@media (hover: hover) {
  .btn.primary:hover { background: var(--shop-primary); box-shadow: var(--shop-sh-card); }
  .btn.ghost:hover { border-color: var(--shop-primary); color: var(--shop-primary-deep); }
  .btn.danger:hover { background: #A93229; }
}
.btn-icon { position: relative; width: 44px; height: 44px; padding: 0; flex: none; border: 0; border-radius: var(--shop-r-btn); background: none; color: var(--shop-text-2); display: grid; place-items: center; cursor: pointer; transition: background var(--shop-t-fast) var(--shop-ease); }
@media (hover: hover) { .btn-icon:hover { background: var(--shop-surface-2); } }
.btn-icon.sm { width: 32px; height: 32px; border-radius: 8px; }
.btn-icon.sm::after { content: ""; position: absolute; inset: -6px; } /* 热区 44 */

/* ── chip / badge / 演示徽标 ──────────────────────── */
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 4px; flex: none;
  min-height: 32px; padding: 0 12px; border-radius: var(--shop-r-pill); cursor: pointer;
  border: 1px solid var(--shop-line-strong); background: var(--shop-surface);
  font-size: var(--shop-fs-3); font-weight: 550; color: var(--shop-text-2);
  transition: background var(--shop-t-fast) var(--shop-ease), border-color var(--shop-t-fast) var(--shop-ease), color var(--shop-t-fast) var(--shop-ease), transform var(--shop-t-fast) var(--shop-ease); -webkit-tap-highlight-color: transparent;
}
.chip::after { content: ""; position: absolute; inset: -6px 0; } /* 热区 ≥44 */
.chip.is-on { background: var(--shop-primary-soft); border-color: var(--shop-primary); color: var(--shop-primary-deep); font-weight: 650; }
.chip.sm { min-height: 24px; padding: 0 8px; font-size: var(--shop-fs-1); }
.chip-group { display: flex; flex-wrap: wrap; gap: var(--shop-s2); }
.badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--shop-r-pill); font-size: var(--shop-fs-1); font-weight: 650; line-height: 1.6; white-space: nowrap; }
.badge.success { background: var(--shop-success-tint); color: var(--shop-success-ink); }
.badge.warn { background: var(--shop-warn-tint); color: var(--shop-warn-ink); }
.badge.danger { background: var(--shop-danger-tint); color: var(--shop-danger-ink); }
.badge.info { background: var(--shop-info-tint); color: var(--shop-info-ink); }
.badge.muted { background: var(--shop-surface-2); color: var(--shop-meta); }
.badge.solid { background: var(--shop-danger); color: #fff; }
.badge.brand { background: var(--shop-primary-soft); color: var(--shop-primary-deep); }
/* 「演示」徽标：所有 mock 能力（支付/验证码/客服/定位）必须挂（C6） */
.badge.demo { background: var(--shop-warn-tint); color: var(--shop-warn-ink); border: 1px dashed #D9A45B; font-weight: 700; }

/* ── 价格 ─────────────────────────────────────────── */
.price { display: inline-flex; align-items: baseline; color: var(--shop-primary-deep); font-family: var(--shop-font-num); font-variant-numeric: tabular-nums; font-weight: 700; }
.price::before { content: "¥"; font-size: .68em; font-weight: 650; margin-right: 1px; }
.price-int { font-size: var(--shop-fs-8); line-height: 1.05; letter-spacing: -.02em; }
.price-dec { font-size: var(--shop-fs-4); font-weight: 650; }
.price.lg .price-int { font-size: var(--shop-fs-9); }
.price.sm .price-int { font-size: var(--shop-fs-6); }
.price-unit { font-family: var(--shop-font); font-size: var(--shop-fs-1); font-weight: 450; color: var(--shop-meta); margin-left: 3px; }
.price-old { font-family: var(--shop-font-num); font-size: var(--shop-fs-2); color: var(--shop-meta); text-decoration: line-through; font-weight: 450; }
.price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }

/* ── 数量步进器（卡右下角 +→步进器，0.24s 弹跳） ──── */
.qty { display: inline-flex; align-items: center; flex: none; }
.qty-btn {
  position: relative; width: 30px; height: 30px; flex: none; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--shop-line-strong); background: var(--shop-surface); color: var(--shop-text-2);
  font-size: 16px; line-height: 1; display: grid; place-items: center; padding: 0;
  transition: background var(--shop-t-fast) var(--shop-ease), border-color var(--shop-t-fast) var(--shop-ease), color var(--shop-t-fast) var(--shop-ease), transform var(--shop-t-fast) var(--shop-ease);
}
.qty-btn::after { content: ""; position: absolute; inset: -7px; } /* 触控热区 44 */
.qty-btn.plus { background: var(--shop-primary-deep); border-color: var(--shop-primary-deep); color: #fff; }
.qty-btn:active { transform: scale(.9); }
.qty-val { min-width: 36px; text-align: center; font-family: var(--shop-font-num); font-variant-numeric: tabular-nums; font-size: var(--shop-fs-4); font-weight: 650; }
.qty.is-zero .qty-btn.min, .qty.is-zero .qty-val { display: none; } /* 0 态只显 + 圆钮 */
.qty.is-zero .qty-btn.plus { width: 30px; height: 30px; border-radius: 50%; font-size: 18px; }
@keyframes shop-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.qty.is-pop, .sku-buy.is-pop { animation: shop-pop .24s var(--shop-ease); }

/* ── 勾选（购物车圆勾 / 券与支付选择） ────────────── */
.check { position: relative; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--shop-line-strong); background: var(--shop-surface); cursor: pointer; transition: background var(--shop-t-fast) var(--shop-ease), border-color var(--shop-t-fast) var(--shop-ease); padding: 0; }
.check::after { content: ""; position: absolute; inset: -11px; } /* 热区 44 */
.check.is-on { background: var(--shop-primary-deep); border-color: var(--shop-primary-deep); }
.check.is-on::before { content: ""; position: absolute; left: 7px; top: 3.5px; width: 5px; height: 9px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(42deg); }

/* ── 输入 / 开关 / 分段器 ─────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.label { font-size: var(--shop-fs-3); font-weight: 600; color: var(--shop-text-2); }
.input {
  min-height: 44px; width: 100%; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-r-btn);
  padding: 0 12px; font: 400 var(--shop-fs-5) var(--shop-font); color: var(--shop-text); background: var(--shop-surface);
  transition: border-color var(--shop-t-fast) var(--shop-ease), box-shadow var(--shop-t-fast) var(--shop-ease);
}
.input:focus { border-color: var(--shop-primary); box-shadow: 0 0 0 3px var(--shop-primary-tint); outline: none; }
.input::placeholder { color: var(--shop-text-3); }
.input.is-err { border-color: var(--shop-danger); }
.textarea { min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.6; }
.hint { font-size: var(--shop-fs-2); color: var(--shop-meta); }
.hint.err { color: var(--shop-danger-ink); }
.switch { position: relative; width: 48px; height: 28px; flex: none; border-radius: var(--shop-r-pill); background: var(--shop-line-strong); border: 0; cursor: pointer; transition: background var(--shop-t-fast) var(--shop-ease); padding: 0; }
.switch::before { content: ""; position: absolute; inset: -8px; } /* 热区 44 */
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(23,37,31,.25); transition: transform var(--shop-t-fast) var(--shop-ease); }
.switch.is-on { background: var(--shop-primary-deep); }
.switch.is-on::after { transform: translateX(20px); }
.segmented { display: flex; gap: 3px; background: var(--shop-surface-2); border-radius: var(--shop-r-btn); padding: 3px; }
.seg-item { flex: 1; min-height: 38px; display: grid; place-items: center; border-radius: 8px; font-size: var(--shop-fs-4); font-weight: 600; color: var(--shop-text-2); cursor: pointer; border: 0; background: none; transition: background var(--shop-t-fast) var(--shop-ease), color var(--shop-t-fast) var(--shop-ease), box-shadow var(--shop-t-fast) var(--shop-ease); }
.seg-item.is-on { background: var(--shop-surface); color: var(--shop-primary-deep); box-shadow: var(--shop-sh-card); }

/* ── Tabs（订单五状态等） ─────────────────────────── */
.tabs { display: flex; gap: var(--shop-s5); overflow-x: auto; scrollbar-width: none; background: var(--shop-surface); border-bottom: 1px solid var(--shop-line); padding: 0 var(--shop-s4); }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 46px; padding: 0 2px; font-size: var(--shop-fs-5); font-weight: 550; color: var(--shop-text-2); cursor: pointer; background: none; border: 0; transition: color var(--shop-t-fast) var(--shop-ease); }
.tab.is-active { color: var(--shop-primary-deep); font-weight: 680; }
.tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 99px 99px 0 0; background: var(--shop-primary); }
.tab .cnt { font-size: var(--shop-fs-1); font-weight: 650; background: var(--shop-surface-2); color: var(--shop-meta); padding: 1px 6px; border-radius: var(--shop-r-pill); font-variant-numeric: tabular-nums; }
.tab.is-active .cnt { background: var(--shop-primary-soft); color: var(--shop-primary-deep); }

/* ── 星级评分 ─────────────────────────────────────── */
.rating { display: inline-flex; align-items: center; gap: 2px; }
.star { position: relative; display: grid; place-items: center; width: 20px; height: 20px; }
.star::before { content: "★"; font-size: 14px; line-height: 1; color: var(--shop-line-strong); }
.star.is-on::before { color: #F5A623; } /* 图形元素，不受文字对比约束 */
.star.is-half::before { color: #F5A623; opacity: .55; }
.rating.is-input .star { width: 36px; height: 36px; cursor: pointer; }
.rating.is-input .star::before { font-size: 26px; transition: transform var(--shop-t-fast) var(--shop-ease); }
.rating.is-input .star:active::before { transform: scale(1.3); }
.rating-num { font-family: var(--shop-font-num); font-size: var(--shop-fs-3); font-weight: 700; color: var(--shop-text); margin-left: 4px; font-variant-numeric: tabular-nums; }

/* ── 进度条 / 倒计时 ──────────────────────────────── */
.progress { height: 6px; border-radius: var(--shop-r-pill); background: var(--shop-surface-2); overflow: hidden; }
.progress-fill { display: block; height: 100%; border-radius: var(--shop-r-pill); background: var(--shop-primary); transition: width var(--shop-t-base) var(--shop-ease); }
.progress.on-brand { background: rgba(255,255,255,.28); }
.progress.on-brand .progress-fill { background: #fff; }
.countdown { display: inline-flex; align-items: center; gap: 3px; font-family: var(--shop-font-num); font-variant-numeric: tabular-nums; }
.cd-n { background: var(--shop-text); color: #fff; font-size: var(--shop-fs-2); font-weight: 700; padding: 2px 5px; border-radius: 6px; }
.cd-sep { color: var(--shop-text-2); font-weight: 700; font-size: var(--shop-fs-2); }

/* ── 骨架屏（§4.6 loading 同构） ──────────────────── */
.skeleton { position: relative; overflow: hidden; background: var(--shop-surface-2); border-radius: 8px; }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); transform: translateX(-100%); animation: shop-skel 1.4s var(--shop-ease) infinite; }
@keyframes shop-skel { to { transform: translateX(100%); } }
.skel-img { aspect-ratio: 1/1; border-radius: var(--shop-r-img); }
.skel-line { height: 12px; margin: 7px 0; }
.skel-line.w40 { width: 40%; } .skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; }
.skel-circle { width: 36px; height: 36px; border-radius: 50%; }
.skel-card { background: var(--shop-surface); border-radius: var(--shop-r-card); box-shadow: var(--shop-sh-card); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.skel-row { display: flex; gap: 12px; align-items: center; background: var(--shop-surface); border-radius: var(--shop-r-card); box-shadow: var(--shop-sh-card); padding: 12px; }

/* ── 空状态 / 错误态（§4.6：插画=彩底图降饱和+文案+行动按钮） ── */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--shop-s2); padding: 64px 24px; text-align: center; }
.empty-img { width: 132px; height: 99px; border-radius: var(--shop-r-img); object-fit: cover; filter: saturate(.45); opacity: .85; background: var(--shop-surface-2); margin-bottom: 6px; }
.empty-title { font-size: var(--shop-fs-5); font-weight: 650; color: var(--shop-text); }
.empty-sub { font-size: var(--shop-fs-3); color: var(--shop-meta); max-width: 260px; }
.empty .btn { margin-top: 10px; }
.empty.error .empty-img { filter: saturate(.2); }

/* ── 顶部栏（手机/平板：搜索+铃；≥1200 由 navbar 接管） ── */
.topbar { position: sticky; top: 0; z-index: var(--shop-z-topbar); background: color-mix(in srgb, var(--shop-surface) 88%, transparent); backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--shop-t-fast) var(--shop-ease), background var(--shop-t-fast) var(--shop-ease); }
.topbar.is-stuck { background: var(--shop-surface); border-bottom-color: var(--shop-line); } /* 滚动 80px 后吸顶变实底 */
.topbar-in { max-width: var(--shop-max-w); margin: 0 auto; min-height: var(--shop-topbar-h); display: flex; align-items: center; gap: var(--shop-s2); padding: 6px var(--shop-s3) 6px var(--shop-s4); }
.topbar-logo { display: flex; align-items: center; gap: 8px; flex: none; font-size: var(--shop-fs-6); font-weight: 750; color: var(--shop-primary-deep); letter-spacing: -.01em; }
.logo-mark { width: 32px; height: 32px; border-radius: 10px; background: var(--shop-grad-brand); color: #fff; display: grid; place-items: center; font-size: var(--shop-fs-5); font-weight: 700; flex: none; }
.topbar-bell { position: relative; margin-left: auto; }
.topbar-bell .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--shop-danger); border: 2px solid var(--shop-surface); }

/* ── 搜索条 + 联想下拉 ────────────────────────────── */
.search-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.search-bar { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 5px 0 12px; background: var(--shop-surface-2); border: 1px solid transparent; border-radius: var(--shop-r-pill); transition: background var(--shop-t-fast) var(--shop-ease), border-color var(--shop-t-fast) var(--shop-ease), box-shadow var(--shop-t-fast) var(--shop-ease); }
.search-bar:focus-within { background: var(--shop-surface); border-color: var(--shop-primary); box-shadow: 0 0 0 3px var(--shop-primary-tint); }
.search-ico { flex: none; color: var(--shop-text-3); display: grid; place-items: center; }
.search-input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 var(--shop-fs-4) var(--shop-font); color: var(--shop-text); min-height: 38px; }
.search-input::placeholder { color: var(--shop-text-3); }
.search-go { position: relative; flex: none; min-height: 32px; padding: 0 14px; border: 0; border-radius: var(--shop-r-pill); background: var(--shop-primary-deep); color: #fff; font-size: var(--shop-fs-3); font-weight: 650; cursor: pointer; transition: background var(--shop-t-fast) var(--shop-ease); }
.search-go::after { content: ""; position: absolute; inset: -6px -2px; } /* 热区 */
.search-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60; background: var(--shop-surface); border-radius: var(--shop-r-in); box-shadow: var(--shop-sh-float); overflow: hidden; padding: 4px 0; }
.suggest-item { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-size: var(--shop-fs-4); color: var(--shop-text); cursor: pointer; }
.suggest-item .search-ico { color: var(--shop-text-3); }
.suggest-hl { color: var(--shop-primary-deep); font-weight: 680; }
@media (hover: hover) { .suggest-item:hover, .suggest-item.is-cur { background: var(--shop-primary-tint); } }
.search-panel { padding: var(--shop-s2) 0; }
.search-sec { padding: var(--shop-s2) var(--shop-s4); }
.search-sec-title { display: flex; align-items: center; min-height: 44px; font-size: var(--shop-fs-3); font-weight: 700; color: var(--shop-text-2); }
.search-sec-title .btn-icon.sm { margin-left: auto; }
.hot-chips { display: flex; flex-wrap: wrap; gap: var(--shop-s2); }

/* ── 桌面通栏导航（≥1200，方案 §3.2） ─────────────── */
.navbar { display: none; }
.nav-in { max-width: var(--shop-max-w); margin: 0 auto; min-height: var(--shop-navbar-h); display: flex; align-items: center; gap: var(--shop-s5); padding: 8px var(--shop-s6); }
.nav-links { display: flex; gap: 2px; flex: none; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--shop-r-btn); font-size: var(--shop-fs-5); font-weight: 550; color: var(--shop-text-2); cursor: pointer; text-decoration: none; transition: background var(--shop-t-fast) var(--shop-ease), color var(--shop-t-fast) var(--shop-ease); }
@media (hover: hover) { .nav-link:hover { background: var(--shop-surface-2); color: var(--shop-text); } }
.nav-link.is-active { color: var(--shop-primary-deep); background: var(--shop-primary-tint); font-weight: 680; }
.nav-link .tabbar-dot { position: static; margin-left: 2px; border: 0; }
.nav-search { flex: 1; max-width: 520px; }
.nav-user { display: flex; align-items: center; gap: var(--shop-s3); margin-left: auto; flex: none; }
.nav-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--shop-grad-brand); color: #fff; display: grid; place-items: center; font-size: var(--shop-fs-4); font-weight: 700; flex: none; }
.nav-user-txt b { display: block; font-size: var(--shop-fs-3); font-weight: 650; line-height: 1.2; }
.nav-user-txt span { font-size: var(--shop-fs-1); color: var(--shop-meta); }

/* ── 底部 5 Tab（<1200） ──────────────────────────── */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--shop-z-tabbar); display: flex; height: calc(var(--shop-tabbar-h) + var(--shop-safe-b)); padding-bottom: var(--shop-safe-b); background: color-mix(in srgb, var(--shop-surface) 94%, transparent); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-top: 1px solid var(--shop-line); }
.tabbar-item { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; font-size: 10.5px; font-weight: 500; color: var(--shop-meta); cursor: pointer; text-decoration: none; background: none; border: 0; transition: color var(--shop-t-fast) var(--shop-ease); -webkit-tap-highlight-color: transparent; }
.tabbar-item.is-active { color: var(--shop-primary-deep); font-weight: 680; }
.tabbar-icon { width: 24px; height: 24px; display: grid; place-items: center; }
.tabbar-icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar-dot { position: absolute; top: 3px; left: calc(50% + 4px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--shop-r-pill); background: var(--shop-danger); color: #fff; font-size: 10px; font-weight: 700; font-family: var(--shop-font-num); display: grid; place-items: center; border: 1.5px solid var(--shop-surface); }

/* ── 轮播 banner（scroll-snap 原生横滑，JS 只做自动播/圆点） ── */
.banner { position: relative; border-radius: var(--shop-r-card); overflow: hidden; background: var(--shop-surface-2); }
.banner-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.banner-track::-webkit-scrollbar { display: none; }
.banner-slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; }
.banner-img { display: block; width: 100%; aspect-ratio: 2.05/1; object-fit: cover; object-position: center; background: var(--shop-surface-2); } /* 手机 16:9 裁 2.05:1（§4.3） */
.banner-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 12px; background: linear-gradient(transparent, rgba(9,20,15,.58)); color: #fff; }
.banner-cap b { display: block; font-size: var(--shop-fs-6); font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.banner-cap span { font-size: var(--shop-fs-2); opacity: .92; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.banner-dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.banner-dot { width: 7px; height: 7px; border: 0; padding: 0; border-radius: var(--shop-r-pill); background: rgba(255,255,255,.62); cursor: pointer; transition: width var(--shop-t-fast) var(--shop-ease), background var(--shop-t-fast) var(--shop-ease); }
.banner-dot.is-on { width: 16px; background: #fff; }

/* ── 金刚区（12 分类；手机横滑一行 4 个，平板 6 列，桌面 12 平铺） ── */
.cat-grid { display: flex; gap: var(--shop-s2); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; }
.cat-grid::-webkit-scrollbar { display: none; }
.cat-tile { position: relative; flex: 0 0 calc((100% - 3 * var(--shop-s2)) / 4); scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 2px; border-radius: var(--shop-r-in); cursor: pointer; background: none; border: 0; transition: transform var(--shop-t-fast) var(--shop-ease); -webkit-tap-highlight-color: transparent; }
.cat-tile:active { transform: scale(.95); }
.cat-tile-img { position: relative; width: 100%; aspect-ratio: 1/1; border-radius: var(--shop-r-img); overflow: hidden; background: color-mix(in srgb, var(--cat, var(--shop-primary)) 14%, #fff); } /* 4:3 图裁 1:1 居中（§4.3） */
.cat-tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cat-tile-name { font-size: var(--shop-fs-2); font-weight: 550; color: var(--shop-text-2); white-space: nowrap; }
.cat-tile-flag { position: absolute; top: -4px; right: -2px; z-index: 1; font-size: 9.5px; font-weight: 700; color: #fff; background: var(--shop-danger); padding: 1px 6px; border-radius: var(--shop-r-pill); }
/* 12 分类色修饰类：挂在 cat-tile / cat-hero / floor-dot 等，驱动 --cat */
.c-fruit { --cat: var(--shop-cat-fruit); }       .c-berry { --cat: var(--shop-cat-berry); }
.c-veg { --cat: var(--shop-cat-veg); }           .c-root { --cat: var(--shop-cat-root); }
.c-breakfast { --cat: var(--shop-cat-breakfast); } .c-dairy { --cat: var(--shop-cat-dairy); }
.c-meat { --cat: var(--shop-cat-meat); }         .c-grain { --cat: var(--shop-cat-grain); }
.c-drink { --cat: var(--shop-cat-drink); }       .c-clean { --cat: var(--shop-cat-clean); }
.c-bakery { --cat: var(--shop-cat-bakery); }     .c-daily { --cat: var(--shop-cat-daily); }

/* ── 楼层（标题点用分类彩，§4.1） ─────────────────── */
.floor { margin-top: var(--shop-s5); }
.floor-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 10px; }
.floor-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--cat, var(--shop-primary)); transform: rotate(45deg); flex: none; }
.floor-title { font-size: var(--shop-fs-6); font-weight: 750; letter-spacing: -.01em; }
.floor-sub { font-size: var(--shop-fs-2); color: var(--shop-meta); }
.floor-more { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-size: var(--shop-fs-3); color: var(--shop-meta); background: none; border: 0; cursor: pointer; }
.floor-more::after { content: ""; position: absolute; inset: 0 -8px; }
.hscroll { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > .sku-card { flex: 0 0 43%; scroll-snap-align: start; }
.hscroll > .tier-card { flex: 0 0 64%; scroll-snap-align: start; }

/* ── 楼层卡（4:3 头图恒定不裁切，§4.3） ───────────── */
.floor-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.floor-card { display: flex; flex-direction: column; background: var(--shop-surface); border: 1px solid transparent; border-radius: var(--shop-r-card); overflow: hidden; box-shadow: var(--shop-sh-card); cursor: pointer; text-decoration: none; color: inherit; transition: border-color var(--shop-t-fast) var(--shop-ease), box-shadow var(--shop-t-fast) var(--shop-ease); }
.floor-card-img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--shop-surface-2); }
.floor-card-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px 12px; }
.floor-card-title { font-size: var(--shop-fs-5); font-weight: 680; }
.floor-card-sub { font-size: var(--shop-fs-2); color: var(--shop-meta); }
@media (hover: hover) { .floor-card:hover { border-color: var(--shop-primary-line); box-shadow: var(--shop-sh-float); } } /* 宽屏 hover 只加深阴影不位移（§4.3） */

/* ── 付费会员权益条 / PWA 安装条 ──────────────────── */
.rights-bar { display: flex; align-items: center; gap: var(--shop-s3); padding: 12px 16px; border-radius: var(--shop-r-card); background: var(--shop-grad-brand); color: #fff; box-shadow: var(--shop-sh-card); cursor: pointer; border: 0; width: 100%; text-align: left; }
.rights-txt { flex: 1; min-width: 0; }
.rights-title { font-size: var(--shop-fs-5); font-weight: 700; }
.rights-sub { font-size: var(--shop-fs-2); opacity: .88; }
.rights-perks { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.rights-perk { font-size: var(--shop-fs-1); background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); padding: 2px 8px; border-radius: var(--shop-r-pill); }
.rights-btn { position: relative; flex: none; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--shop-r-pill); background: #fff; color: var(--shop-primary-deep); font-size: var(--shop-fs-3); font-weight: 700; cursor: pointer; }
.rights-btn::after { content: ""; position: absolute; inset: -4px; }
.pwa-banner { display: flex; align-items: center; gap: var(--shop-s3); padding: 10px 14px; background: var(--shop-primary-tint); border: 1px solid var(--shop-primary-line); border-radius: var(--shop-r-in); font-size: var(--shop-fs-3); color: var(--shop-text-2); }
.pwa-banner .btn-icon.sm { margin-left: auto; }

/* ── 分类页布局（左分类栏 + 右商品流） ────────────── */
.cat-layout { display: flex; align-items: flex-start; }
.cat-side { flex: none; width: 88px; background: var(--shop-surface-2); align-self: stretch; position: sticky; top: var(--shop-topbar-h); max-height: calc(100dvh - var(--shop-topbar-h)); overflow-y: auto; scrollbar-width: none; }
.cat-side::-webkit-scrollbar { display: none; }
.cat-side-item { position: relative; display: flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 8px; font-size: var(--shop-fs-3); font-weight: 500; color: var(--shop-text-2); cursor: pointer; background: none; border: 0; width: 100%; text-align: left; transition: background var(--shop-t-fast) var(--shop-ease), color var(--shop-t-fast) var(--shop-ease); }
.cat-side-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cat, var(--shop-line-strong)); flex: none; }
.cat-side-item.is-active { background: var(--shop-surface); color: var(--shop-primary-deep); font-weight: 680; }
.cat-side-item.is-active::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 99px 99px 0; background: var(--shop-primary); } /* 选中绿条+分类色点（§6.2） */
.cat-main { flex: 1; min-width: 0; padding: var(--shop-s3); display: flex; flex-direction: column; gap: var(--shop-s3); }
.cat-hero { position: relative; border-radius: var(--shop-r-card); overflow: hidden; }
.cat-hero-img { display: block; width: 100%; aspect-ratio: 21/9; object-fit: cover; background: var(--shop-surface-2); }
.cat-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--cat, var(--shop-primary)) 62%, transparent), transparent 72%); }
.cat-hero-txt { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 1; color: #fff; }
.cat-hero-txt b { display: block; font-size: var(--shop-fs-7); font-weight: 750; text-shadow: 0 1px 4px rgba(0,0,0,.4); }
.cat-hero-txt span { font-size: var(--shop-fs-2); opacity: .95; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.sort-bar { display: flex; align-items: center; gap: var(--shop-s5); background: var(--shop-surface); border-radius: var(--shop-r-in); padding: 0 14px; min-height: 44px; box-shadow: var(--shop-sh-card); position: sticky; top: var(--shop-topbar-h); z-index: 30; }
.sort-item { position: relative; display: inline-flex; align-items: center; gap: 3px; min-height: 44px; font-size: var(--shop-fs-3); font-weight: 550; color: var(--shop-text-2); cursor: pointer; background: none; border: 0; padding: 0; }
.sort-item.is-on { color: var(--shop-primary-deep); font-weight: 680; }
.sort-arrows { display: inline-flex; flex-direction: column; font-size: 8px; line-height: 1; gap: 1px; color: var(--shop-text-3); }
.sort-item.is-on .sort-arrows .up.on, .sort-item.is-on .sort-arrows .down.on { color: var(--shop-primary-deep); }

/* ── 商品卡（三形态：双列/单列=sku-grid 列数；横排=sku-row） ── */
.sku-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sku-grid.cols-1 { grid-template-columns: 1fr; }
.sku-card { position: relative; display: flex; flex-direction: column; background: var(--shop-surface); border: 1px solid transparent; border-radius: var(--shop-r-card); overflow: hidden; box-shadow: var(--shop-sh-card); cursor: pointer; text-decoration: none; color: inherit; transition: border-color var(--shop-t-fast) var(--shop-ease), box-shadow var(--shop-t-fast) var(--shop-ease); }
@media (hover: hover) { .sku-card:hover { border-color: var(--shop-primary-line); box-shadow: var(--shop-sh-float); } }
.sku-img-box { position: relative; width: 100%; aspect-ratio: 1/1; background: var(--shop-surface-2); overflow: hidden; } /* 图区恒定 1:1（§4.3） */
.sku-img { width: 100%; height: 100%; object-fit: contain; } /* 白底主图 contain；氛围彩底图加 .cover */
.sku-img.cover { object-fit: cover; }
.sku-corner { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sku-fav { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(23,37,31,.12); color: var(--shop-text-3); display: grid; place-items: center; cursor: pointer; font-size: 15px; transition: background var(--shop-t-fast) var(--shop-ease), color var(--shop-t-fast) var(--shop-ease), transform var(--shop-t-fast) var(--shop-ease); }
.sku-fav::after { content: ""; position: absolute; inset: -6px; } /* 热区 44 */
.sku-fav.is-on { color: var(--shop-danger); }
.sku-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 12px; flex: 1; }
.sku-name { font-size: var(--shop-fs-4); font-weight: 600; line-height: 1.35; color: var(--shop-text); }
.sku-spec { font-size: var(--shop-fs-1); color: var(--shop-meta); }
.sku-meta { display: flex; align-items: center; gap: 8px; font-size: var(--shop-fs-1); color: var(--shop-meta); font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; }
.sku-meta .rating { flex: none; }
.sku-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 窄列单行省略，禁止竖排 */
.sku-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; }
.sku-buy { position: relative; width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; background: var(--shop-primary-deep); color: #fff; font-size: 18px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background var(--shop-t-fast) var(--shop-ease); padding: 0 0 2px; }
.sku-buy::after { content: ""; position: absolute; inset: -7px; } /* 热区 44 */
.sku-buy:active { background: var(--shop-primary-press); }
/* 横排形态（购物车行/收藏管理/订单缩略通用底型） */
.sku-row { display: flex; gap: var(--shop-s3); padding: var(--shop-s3); background: var(--shop-surface); border-radius: var(--shop-r-card); box-shadow: var(--shop-sh-card); align-items: stretch; }
.sku-row > .check { align-self: center; }
.sku-row-img { flex: none; width: 88px; height: 88px; border-radius: var(--shop-r-img); object-fit: contain; background: var(--shop-surface-2); align-self: center; }
.sku-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sku-row-name { font-size: var(--shop-fs-4); font-weight: 600; line-height: 1.35; }
.sku-row-spec { font-size: var(--shop-fs-1); color: var(--shop-meta); }
.sku-row-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.sku-row.is-invalid { opacity: .62; }
.sku-row.is-invalid .sku-row-name { color: var(--shop-text-2); }
.sku-row.compact { padding: 10px var(--shop-s3); }
.sku-row.compact .sku-row-img { width: 64px; height: 64px; }
.row-del { position: relative; background: none; border: 0; color: var(--shop-text-3); font-size: var(--shop-fs-3); cursor: pointer; min-height: 32px; padding: 0 6px; }
.row-del::after { content: ""; position: absolute; inset: -6px 0; }
/* 足迹：按日分组（今天/昨天/更早） */
.fp-day { font-size: var(--shop-fs-3); font-weight: 680; color: var(--shop-text-2); padding: 12px 2px 8px; }
.fp-list { display: flex; flex-direction: column; gap: 8px; }

/* ── 购物车吸底结算条 + 凑单条 ────────────────────── */
.cart-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--shop-tabbar-h) + var(--shop-safe-b)); z-index: var(--shop-z-cartbar); background: var(--shop-surface); border-top: 1px solid var(--shop-line); box-shadow: var(--shop-sh-bar); }
.cart-bar-in { max-width: var(--shop-max-w); margin: 0 auto; min-height: var(--shop-cartbar-h); display: flex; align-items: center; gap: var(--shop-s3); padding: 8px var(--shop-s4); }
.cart-bar-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--shop-fs-3); color: var(--shop-text-2); cursor: pointer; background: none; border: 0; padding: 0; }
.cart-bar-sum { margin-left: auto; text-align: right; line-height: 1.2; }
.cart-bar-sub { font-size: var(--shop-fs-1); color: var(--shop-meta); }
.cart-bar .btn { min-width: 112px; border-radius: var(--shop-r-pill); }
.addup-bar { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px var(--shop-s4); background: var(--shop-warn-tint); color: var(--shop-warn-ink); font-size: 12.5px; }
.addup-bar b { font-family: var(--shop-font-num); }
.addup-bar .link { margin-left: auto; font-weight: 680; color: var(--shop-warn-ink); text-decoration: underline; background: none; border: 0; cursor: pointer; font-size: 12.5px; min-height: 32px; position: relative; }
.addup-bar .link::after { content: ""; position: absolute; inset: -6px 0; }

/* ── 地址卡 / 自提点卡 ────────────────────────────── */
.addr-card { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 14px 16px; background: var(--shop-surface); border: 1.5px solid var(--shop-line); border-radius: var(--shop-r-card); cursor: pointer; transition: background var(--shop-t-fast) var(--shop-ease), border-color var(--shop-t-fast) var(--shop-ease), box-shadow var(--shop-t-fast) var(--shop-ease); text-align: left; width: 100%; }
.addr-card.is-sel { border-color: var(--shop-primary); box-shadow: 0 0 0 3px var(--shop-primary-tint); }
.addr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.addr-name { font-size: var(--shop-fs-5); font-weight: 680; }
.addr-phone { font-size: var(--shop-fs-3); color: var(--shop-meta); font-family: var(--shop-font-num); }
.addr-detail { font-size: var(--shop-fs-3); color: var(--shop-text-2); line-height: 1.5; padding-right: 40px; }
.addr-edit { position: absolute; right: 6px; top: 6px; }
.addr-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--shop-text-3); }
.pickup-card { position: relative; display: flex; gap: var(--shop-s3); padding: 14px 16px; background: var(--shop-surface); border: 1.5px solid var(--shop-line); border-radius: var(--shop-r-card); cursor: pointer; transition: background var(--shop-t-fast) var(--shop-ease), border-color var(--shop-t-fast) var(--shop-ease), box-shadow var(--shop-t-fast) var(--shop-ease); }
.pickup-card.is-sel { border-color: var(--shop-primary); box-shadow: 0 0 0 3px var(--shop-primary-tint); }
.pickup-ico { width: 40px; height: 40px; flex: none; border-radius: var(--shop-r-in); background: var(--shop-primary-tint); color: var(--shop-primary-deep); display: grid; place-items: center; }
.pickup-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pickup-name { font-size: var(--shop-fs-4); font-weight: 650; display: flex; align-items: center; gap: 6px; }
.pickup-addr { font-size: var(--shop-fs-2); color: var(--shop-meta); }
.pickup-hours { font-size: var(--shop-fs-2); color: var(--shop-text-2); }
.pickup-dist { flex: none; font-size: var(--shop-fs-2); color: var(--shop-primary-deep); font-weight: 650; font-family: var(--shop-font-num); }

/* ── 时间档横滑 slot-picker ───────────────────────── */
.slot-picker { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 8px; }
.slot-picker::-webkit-scrollbar { display: none; }
.slot-chip { position: relative; flex: none; min-height: 46px; padding: 5px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid var(--shop-line-strong); border-radius: var(--shop-r-btn); background: var(--shop-surface); font-size: var(--shop-fs-3); font-weight: 620; color: var(--shop-text-2); cursor: pointer; font-family: var(--shop-font-num); transition: background var(--shop-t-fast) var(--shop-ease), border-color var(--shop-t-fast) var(--shop-ease), color var(--shop-t-fast) var(--shop-ease); }
.slot-chip small { font-size: 10px; font-weight: 450; color: var(--shop-meta); font-family: var(--shop-font); }
.slot-chip.is-on { border-color: var(--shop-primary-deep); background: var(--shop-primary-tint); color: var(--shop-primary-deep); font-weight: 700; }
.slot-chip.is-full { opacity: .45; pointer-events: none; }
.slot-flag { position: absolute; top: -8px; right: -4px; background: var(--shop-primary-deep); color: #fff; font-size: 9.5px; font-weight: 650; padding: 1px 7px; border-radius: var(--shop-r-pill); font-family: var(--shop-font); }

/* ── 金额明细（§8.2 preview 行 {k,v,label} 直出） ─── */
.fee-list { display: flex; flex-direction: column; background: var(--shop-surface); border-radius: var(--shop-r-card); box-shadow: var(--shop-sh-card); padding: 4px 16px; }
.fee-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; font-size: 13.5px; color: var(--shop-text-2); }
.fee-row .k { display: flex; align-items: center; gap: 6px; }
.fee-row .v { font-family: var(--shop-font-num); font-variant-numeric: tabular-nums; font-weight: 620; color: var(--shop-text); }
.fee-row .v.minus { color: var(--shop-primary-deep); }
.fee-row.total { border-top: 1px solid var(--shop-line); min-height: 56px; font-size: var(--shop-fs-4); font-weight: 700; color: var(--shop-text); }
.fee-row.total .v { font-size: var(--shop-fs-8); font-weight: 750; color: var(--shop-primary-deep); }
.fee-note { font-size: var(--shop-fs-1); color: var(--shop-meta); font-weight: 450; }

/* ── 券卡（锯齿边：上下半圆缺口） ─────────────────── */
.coupon-card { position: relative; display: flex; align-items: stretch; min-height: 92px; background: var(--shop-surface); border-radius: var(--shop-r-in); box-shadow: var(--shop-sh-card); }
.coupon-card::before, .coupon-card::after { content: ""; position: absolute; left: 97px; width: 14px; height: 14px; border-radius: 50%; background: var(--shop-bg); } /* 缺口色=页面底色 */
.coupon-card::before { top: -7px; } .coupon-card::after { bottom: -7px; }
.coupon-left { position: relative; flex: none; width: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--shop-grad-brand); color: #fff; border-radius: var(--shop-r-in) 0 0 var(--shop-r-in); }
.coupon-left::after { content: ""; position: absolute; right: 0; top: 10px; bottom: 10px; border-right: 1px dashed rgba(255,255,255,.55); }
.coupon-val { font-family: var(--shop-font-num); font-size: 28px; font-weight: 750; line-height: 1; }
.coupon-val::before { content: "¥"; font-size: 14px; font-weight: 650; margin-right: 1px; }
.coupon-val.no-yen::before { content: ""; }
.coupon-th { font-size: var(--shop-fs-1); opacity: .9; }
.coupon-right { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px 14px; }
.coupon-title { font-size: 14.5px; font-weight: 680; }
.coupon-cond { font-size: var(--shop-fs-2); color: var(--shop-text-2); }
.coupon-date { font-size: var(--shop-fs-1); color: var(--shop-text-3); font-family: var(--shop-font-num); }
.coupon-why { font-size: var(--shop-fs-1); color: var(--shop-danger-ink); }
.coupon-btn { flex: none; align-self: center; margin-right: 12px; }
.coupon-stamp { position: absolute; right: 68px; top: 50%; transform: translateY(-50%) rotate(-14deg); border: 2px solid var(--shop-text-3); color: var(--shop-text-3); font-size: var(--shop-fs-3); font-weight: 750; padding: 2px 10px; border-radius: 6px; opacity: .72; pointer-events: none; }
.coupon-card.is-used, .coupon-card.is-expired { filter: grayscale(1); opacity: .58; }
.coupon-card.is-off { opacity: .62; }
.coupon-card.is-sel { box-shadow: 0 0 0 2px var(--shop-primary), var(--shop-sh-card); }
.coupon-list { display: flex; flex-direction: column; gap: var(--shop-s4); padding: var(--shop-s2) 0; } /* gap 留出缺口空间 */
.cp-group-title { font-size: var(--shop-fs-3); font-weight: 700; color: var(--shop-meta); padding: 4px 2px; }

/* ── 支付通道行（收银台四通道，全部挂「演示」徽标 C6） ── */
.pay-list { display: flex; flex-direction: column; gap: 10px; }
.pay-row { display: flex; align-items: center; gap: var(--shop-s3); min-height: 62px; padding: 10px 16px; background: var(--shop-surface); border: 1.5px solid var(--shop-line); border-radius: var(--shop-r-in); cursor: pointer; transition: background var(--shop-t-fast) var(--shop-ease), border-color var(--shop-t-fast) var(--shop-ease), color var(--shop-t-fast) var(--shop-ease); width: 100%; text-align: left; }
.pay-row.is-sel { border-color: var(--shop-primary); box-shadow: 0 0 0 3px var(--shop-primary-tint); }
.pay-ico { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: var(--shop-fs-4); font-weight: 750; }
.pay-ico.wx { background: #1AAD19; } .pay-ico.ali { background: #1677FF; }
.pay-ico.bal { background: var(--shop-grad-brand); } .pay-ico.cod { background: var(--shop-warn); }
.pay-name { font-size: 14.5px; font-weight: 620; display: flex; align-items: center; gap: 6px; }
.pay-sub { font-size: var(--shop-fs-1); color: var(--shop-meta); margin-top: 1px; }
.pay-row .check { margin-left: auto; }

/* ── 订单卡（列表行卡） ───────────────────────────── */
.order-card { display: flex; flex-direction: column; background: var(--shop-surface); border-radius: var(--shop-r-card); box-shadow: var(--shop-sh-card); overflow: hidden; }
.order-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px 8px; }
.order-shop { display: flex; align-items: center; gap: 6px; font-size: var(--shop-fs-3); font-weight: 680; }
.order-no { font-size: var(--shop-fs-1); color: var(--shop-meta); font-family: var(--shop-font-num); }
.order-status { margin-left: auto; font-size: var(--shop-fs-3); font-weight: 680; }
.order-status.st-pay { color: var(--shop-warn-ink); }      /* 待付款 */
.order-status.st-doing { color: var(--shop-info-ink); }     /* 备货/配送中 */
.order-status.st-pickup { color: var(--shop-primary-deep); }/* 待自提 */
.order-status.st-done { color: var(--shop-meta); }          /* 已完成 */
.order-status.st-cancel { color: var(--shop-text-3); }      /* 已取消 */
.order-status.st-refund { color: var(--shop-danger-ink); }  /* 退款 */
.order-thumbs { display: flex; gap: 8px; padding: 4px 16px; overflow: hidden; }
.order-thumb { width: 64px; height: 64px; flex: none; border-radius: 10px; object-fit: contain; background: var(--shop-surface-2); }
.order-more { width: 64px; height: 64px; flex: none; border-radius: 10px; background: var(--shop-surface-2); color: var(--shop-meta); font-size: var(--shop-fs-3); display: grid; place-items: center; }
.order-sum { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; padding: 8px 16px 0; font-size: 12.5px; color: var(--shop-meta); }
.order-sum b { font-family: var(--shop-font-num); font-size: var(--shop-fs-6); font-weight: 750; color: var(--shop-text); font-variant-numeric: tabular-nums; }
.order-btns { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; }

/* ── 订单时间轴 ───────────────────────────────────── */
.timeline { display: flex; flex-direction: column; padding: 6px 2px; }
.tl-item { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding-bottom: 20px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 2px; width: 1.5px; background: var(--shop-line); }
.tl-item:last-child::before { display: none; }
.tl-dot { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: var(--shop-surface-2); border: 1.5px solid var(--shop-line-strong); display: grid; place-items: center; color: var(--shop-text-3); font-size: 11px; }
.tl-item.is-done .tl-dot { background: var(--shop-primary-soft); border-color: var(--shop-primary-line); color: var(--shop-primary-deep); }
.tl-item.is-cur .tl-dot { background: var(--shop-primary-deep); border-color: var(--shop-primary-deep); color: #fff; box-shadow: 0 0 0 4px var(--shop-primary-tint); }
.tl-title { font-size: var(--shop-fs-4); font-weight: 600; }
.tl-item.is-cur .tl-title { font-weight: 750; color: var(--shop-primary-deep); }
.tl-time { font-size: var(--shop-fs-1); color: var(--shop-meta); font-family: var(--shop-font-num); margin-top: 1px; }
.tl-note { font-size: var(--shop-fs-2); color: var(--shop-text-2); margin-top: 2px; }

/* ── 取货码大卡（4 位大字号 + QR + 核销盖章） ─────── */
.pickup-code { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; background: var(--shop-surface); border-radius: var(--shop-r-card); box-shadow: var(--shop-sh-card); }
.pc-label { font-size: var(--shop-fs-3); color: var(--shop-meta); }
.pc-code { font-family: var(--shop-font-num); font-variant-numeric: tabular-nums; font-size: var(--shop-fs-9); font-weight: 750; letter-spacing: .32em; text-indent: .32em; color: var(--shop-primary-deep); line-height: 1.1; }
.pc-qr { width: 140px; height: 140px; border-radius: 8px; border: 1px solid var(--shop-line); background: #fff; object-fit: contain; }
.pc-hint { font-size: var(--shop-fs-2); color: var(--shop-meta); text-align: center; }
.pickup-code.is-done { filter: grayscale(1); opacity: .6; }
.pc-stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-16deg); border: 3px solid var(--shop-danger-ink); color: var(--shop-danger-ink); font-size: var(--shop-fs-7); font-weight: 800; letter-spacing: .2em; text-indent: .2em; padding: 6px 18px; border-radius: 10px; opacity: .75; pointer-events: none; }

/* ── 会员卡（绿渐变）+ 等级四档 + 付费计划 ────────── */
.member-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: var(--shop-r-card); background: var(--shop-grad-brand); color: #fff; box-shadow: var(--shop-sh-card); overflow: hidden; }
.member-card::after { content: ""; position: absolute; right: -46px; top: -46px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.mc-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.mc-avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; background: rgba(255,255,255,.22); border: 2px solid rgba(255,255,255,.55); display: grid; place-items: center; font-size: var(--shop-fs-6); font-weight: 700; }
.mc-name { font-size: var(--shop-fs-6); font-weight: 750; display: flex; align-items: center; gap: 8px; }
.mc-tier { font-size: var(--shop-fs-1); font-weight: 700; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); padding: 2px 9px; border-radius: var(--shop-r-pill); }
.mc-phone { font-size: var(--shop-fs-1); opacity: .82; font-family: var(--shop-font-num); }
.mc-paid { margin-left: auto; flex: none; font-size: var(--shop-fs-1); font-weight: 700; background: linear-gradient(135deg, #FFE7B8, #FFD37A); color: #6B4400; padding: 5px 11px; border-radius: var(--shop-r-pill); }
.mc-stats { display: flex; gap: 28px; position: relative; z-index: 1; }
.mc-stat b { display: block; font-family: var(--shop-font-num); font-variant-numeric: tabular-nums; font-size: var(--shop-fs-6); font-weight: 750; line-height: 1.2; }
.mc-stat span { font-size: var(--shop-fs-1); opacity: .82; }
.mc-up { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; }
.mc-up-txt { font-size: 11.5px; opacity: .9; }
.tier-cards { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; }
.tier-cards::-webkit-scrollbar { display: none; }
.tier-card { flex: 0 0 64%; min-width: 190px; scroll-snap-align: start; border: 1.5px solid var(--shop-line); border-radius: var(--shop-r-card); background: var(--shop-surface); box-shadow: var(--shop-sh-card); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.tier-card.is-cur { border-color: var(--shop-primary); background: var(--shop-primary-tint); }
.tier-name { font-size: var(--shop-fs-6); font-weight: 750; display: flex; align-items: center; gap: 8px; }
.tier-need { font-size: var(--shop-fs-2); color: var(--shop-meta); }
.tier-perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tier-perks li { font-size: 12.5px; color: var(--shop-text-2); display: flex; gap: 7px; align-items: baseline; }
.tier-perks li::before { content: "•"; color: var(--shop-primary); font-weight: 700; }
.plan-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-card { position: relative; border: 1.5px solid var(--shop-line); border-radius: var(--shop-r-card); background: var(--shop-surface); padding: 16px 12px; text-align: center; cursor: pointer; transition: background var(--shop-t-fast) var(--shop-ease), border-color var(--shop-t-fast) var(--shop-ease), color var(--shop-t-fast) var(--shop-ease), transform var(--shop-t-fast) var(--shop-ease); display: flex; flex-direction: column; gap: 3px; align-items: center; }
.plan-card.is-sel { border-color: var(--shop-primary-deep); background: var(--shop-primary-tint); box-shadow: 0 0 0 3px var(--shop-primary-soft); }
.plan-flag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: var(--shop-danger); color: #fff; font-size: 10px; font-weight: 680; padding: 2px 10px; border-radius: var(--shop-r-pill); white-space: nowrap; }
.plan-name { font-size: var(--shop-fs-4); font-weight: 680; }
.plan-price { font-family: var(--shop-font-num); font-size: var(--shop-fs-8); font-weight: 750; color: var(--shop-primary-deep); }
.plan-price::before { content: "¥"; font-size: 14px; }
.plan-unit { font-size: var(--shop-fs-1); color: var(--shop-meta); }
.points-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--shop-surface); border-radius: var(--shop-r-in); }
.points-txt { font-size: 13.5px; font-weight: 550; }
.points-time { font-size: var(--shop-fs-1); color: var(--shop-meta); font-family: var(--shop-font-num); }
.points-v { margin-left: auto; font-family: var(--shop-font-num); font-variant-numeric: tabular-nums; font-size: var(--shop-fs-5); font-weight: 750; }
.points-v.plus { color: var(--shop-primary-deep); } .points-v.minus { color: var(--shop-text); }

/* ── 评价卡 + 标签云 ──────────────────────────────── */
.review-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--shop-surface); border-radius: var(--shop-r-card); box-shadow: var(--shop-sh-card); }
.rv-head { display: flex; align-items: center; gap: 10px; }
.rv-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--shop-primary-soft); color: var(--shop-primary-deep); display: grid; place-items: center; font-size: var(--shop-fs-3); font-weight: 700; }
.rv-name { font-size: var(--shop-fs-3); font-weight: 620; }
.rv-prod { font-size: var(--shop-fs-1); color: var(--shop-meta); }
.rv-date { margin-left: auto; font-size: var(--shop-fs-1); color: var(--shop-text-3); font-family: var(--shop-font-num); }
.rv-text { font-size: 13.5px; line-height: 1.65; color: var(--shop-text-2); }
.rv-imgs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.rv-imgs::-webkit-scrollbar { display: none; }
.rv-img { width: 72px; height: 72px; flex: none; border-radius: 8px; object-fit: cover; background: var(--shop-surface-2); }
.rv-reply { background: var(--shop-surface-2); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--shop-text-2); line-height: 1.55; }
.rv-reply b { color: var(--shop-primary-deep); font-weight: 650; margin-right: 4px; }
.rv-top { position: relative; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 对话框（确认/提示；sheet/toast 用壳类，见文件尾对齐段） ── */
.dialog-mask { position: fixed; inset: 0; z-index: var(--shop-z-dialog); background: rgba(9, 20, 15, .5); display: grid; place-items: center; padding: 24px; }
.dialog { width: min(340px, 100%); background: var(--shop-surface); border-radius: var(--shop-r-card); box-shadow: var(--shop-sh-float); padding: 20px; display: flex; flex-direction: column; gap: 8px; text-align: center; animation: shop-dlg var(--shop-t-base) var(--shop-ease); }
@keyframes shop-dlg { from { opacity: 0; transform: scale(.94) translateY(8px); } }
.dialog-title { font-size: var(--shop-fs-6); font-weight: 750; }
.dialog-body { font-size: 13.5px; color: var(--shop-meta); line-height: 1.6; }
.dialog-btns { display: flex; gap: 10px; margin-top: 12px; }
.dialog-btns .btn { flex: 1; }

/* ── 壳公共件令牌对齐（覆盖 shop-widgets.css 冻结基线，结构不动） ── */
.shop-toast { background: rgba(23, 37, 31, .94); border-radius: var(--shop-r-in); font-size: var(--shop-fs-4); box-shadow: var(--shop-sh-float); max-width: min(80vw, 420px); z-index: var(--shop-z-toast); }
.shop-sheet-mask { background: rgba(9, 20, 15, .5); z-index: var(--shop-z-mask); }
.shop-sheet { z-index: var(--shop-z-sheet); border-radius: 20px 20px 0 0; padding: 16px 16px calc(16px + var(--shop-safe-b)); max-height: 80dvh; box-shadow: var(--shop-sh-float); }
.shop-sheet-hd { position: relative; padding-top: 12px; }
.shop-sheet-hd::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 99px; background: var(--shop-line-strong); } /* 抓手条 */
.shop-sheet-title { font-size: var(--shop-fs-6); font-weight: 750; }
.shop-sheet-x { position: relative; width: 44px; height: 44px; margin-right: -12px; display: grid; place-items: center; color: var(--shop-meta); }
.shop-btn { border-radius: var(--shop-r-btn); min-height: 44px; font-weight: 600; border-color: var(--shop-line-strong); color: var(--shop-text-2); font-size: var(--shop-fs-5); }
.shop-btn.primary { background: var(--shop-primary-deep); border-color: var(--shop-primary-deep); color: #fff; }
.shop-empty { color: var(--shop-meta); }
.shop-empty-sub { color: var(--shop-text-3); }

/* ── 详情页吸底操作栏（收藏/客服 + 加购 + 立即购买） ── */
.detail-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--shop-z-cartbar); background: var(--shop-surface); border-top: 1px solid var(--shop-line); box-shadow: var(--shop-sh-bar); padding-bottom: var(--shop-safe-b); }
.detail-bar-in { max-width: var(--shop-max-w); margin: 0 auto; min-height: var(--shop-cartbar-h); display: flex; align-items: center; gap: var(--shop-s2); padding: 8px var(--shop-s4); }
.detail-ico { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 48px; min-height: 44px; background: none; border: 0; color: var(--shop-meta); font-size: 10px; cursor: pointer; }
.detail-ico .i { font-size: 18px; line-height: 1; }
.detail-ico.is-on { color: var(--shop-danger); }
.detail-bar .btn { flex: 1; border-radius: var(--shop-r-pill); }
.svc-bar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--shop-surface); border-radius: var(--shop-r-in); font-size: var(--shop-fs-2); color: var(--shop-text-2); }
.svc-bar b { color: var(--shop-primary-deep); font-weight: 650; }

/* ── 登录品牌头 / 支付成功动效 / 个人中心九宫格 ───── */
.login-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 24px 40px; background: var(--shop-grad-brand); color: #fff; border-radius: 0 0 28px 28px; }
.login-logo { width: 64px; height: 64px; border-radius: 20px; background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.45); display: grid; place-items: center; font-size: 28px; font-weight: 750; }
.login-name { font-size: var(--shop-fs-8); font-weight: 750; letter-spacing: .02em; }
.login-slogan { font-size: var(--shop-fs-3); opacity: .88; }
.code-hint { display: inline-flex; align-items: center; gap: 6px; font-size: var(--shop-fs-2); color: var(--shop-warn-ink); background: var(--shop-warn-tint); border: 1px dashed #D9A45B; padding: 6px 10px; border-radius: 8px; } /* 验证码屏显（演示） */
.pay-success { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 24px 24px; text-align: center; }
.pay-ok { width: 72px; height: 72px; border-radius: 50%; background: var(--shop-success-tint); color: var(--shop-success-ink); display: grid; place-items: center; font-size: 34px; animation: shop-ok var(--shop-t-base) var(--shop-ease); }
@keyframes shop-ok { from { transform: scale(.4); opacity: 0; } }
.pay-title { font-size: var(--shop-fs-7); font-weight: 750; }
.pay-sub { font-size: var(--shop-fs-3); color: var(--shop-meta); }
.pay-egg { width: min(280px, 70%); border-radius: var(--shop-r-card); filter: saturate(.9); } /* 彩底彩蛋图 */
.me-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--shop-surface); border-radius: var(--shop-r-card); box-shadow: var(--shop-sh-card); padding: 8px 4px; }
.me-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 64px; padding: 10px 2px; background: none; border: 0; border-radius: var(--shop-r-in); cursor: pointer; color: var(--shop-text-2); font-size: var(--shop-fs-2); text-decoration: none; transition: background var(--shop-t-fast) var(--shop-ease); }
.me-tile .i { font-size: 22px; line-height: 1; color: var(--shop-primary-deep); }
.me-tile:active { background: var(--shop-primary-tint); }
.me-tile .tabbar-dot { position: absolute; top: 6px; left: calc(50% + 8px); border-color: var(--shop-surface); }
@media (hover: hover) { .me-tile:hover { background: var(--shop-primary-tint); } }

/* ═══ 九档视口响应式（§10.1：375/390/414 → 768/834 → 1024 → 1366/1920/2560）
   手机竖屏优先；文字阶不随断点变化（§4.3）；宽屏内容封顶居中不塌 ═══ */

/* ── ≥768 平板（768×1024 / 834×1194）：底部 Tab 保留，商品流 3 列 ── */
@media (min-width: 768px) {
  .sku-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .floor-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .cat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; gap: var(--shop-s2); }
  .cat-tile { flex: none; width: auto; }
  .banner-img { aspect-ratio: 16/9; } /* 平板恢复 16:9（§4.3） */
  .hscroll > .sku-card { flex-basis: 30%; }
  .hscroll > .tier-card { flex-basis: 45%; }
  .page-in { padding: var(--shop-s4) var(--shop-s5) var(--shop-s7); }
  .me-grid { grid-template-columns: repeat(5, 1fr); }
  .coupon-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--shop-s5) var(--shop-s3); }
}

/* ── ≥1200 桌面（1366×768 / 1920×1080 / 2560×1440）：顶部通栏导航，无底部 Tab ── */
@media (min-width: 1200px) {
  .navbar { display: block; position: sticky; top: 0; z-index: var(--shop-z-topbar); background: var(--shop-surface); border-bottom: 1px solid var(--shop-line); }
  .topbar { display: none; }
  .tabbar { display: none; }
  .shop-app { padding-bottom: 0; }
  .cart-bar, .detail-bar { bottom: 0; }
  .cat-side { top: var(--shop-navbar-h); max-height: calc(100dvh - var(--shop-navbar-h)); width: 200px; border-radius: var(--shop-r-card) 0 0 var(--shop-r-card); }
  .cat-side-item { min-height: 52px; padding: 0 16px; font-size: var(--shop-fs-4); }
  .sort-bar { top: var(--shop-navbar-h); }
  .sku-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .floor-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .cat-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } /* 一行 12 平铺（§4.3） */
  .banner { border-radius: var(--shop-r-card); }
  .banner-img { aspect-ratio: 21/9; max-height: 420px; } /* 21:9 封顶 420px（§4.3） */
  .hscroll > .sku-card { flex-basis: 22%; }
  .hscroll > .tier-card { flex-basis: 31%; }
  .page-in { padding: var(--shop-s5) var(--shop-s6) var(--shop-s8); }
  .plan-cards { grid-template-columns: repeat(2, minmax(0, 320px)); }
  .dialog { width: min(400px, 100%); }
  .shop-sheet-mask { align-items: center; } /* 桌面 sheet 居中呈对话框态 */
  .shop-sheet { border-radius: 20px; max-height: 84dvh; }
}

/* ── ≥1920 大屏（1920×1080 / 2560×1440）：商品流 5 列，内容 1440 封顶居中 ── */
@media (min-width: 1920px) {
  .sku-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
  .floor-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .hscroll > .sku-card { flex-basis: 19%; }
  .page-in, .topbar-in, .nav-in, .cart-bar-in, .detail-bar-in { max-width: var(--shop-max-w); }
}

/* ── 页面级重置（shop.css 只在顾客端两页加载，不波及后台） ── */
html, body { margin: 0; padding: 0; }
body { background: var(--shop-bg); }

/* ═══════════════════════════════════════════════════════════
   2026-10 官网展示版：清晰图像、稳态轮播与更清楚的桌面信息层级
   ═══════════════════════════════════════════════════════════ */
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: calc(var(--shop-z-toast) + 1);
  transform: translateY(-160%); padding: 10px 14px; border-radius: var(--shop-r-btn);
  background: var(--shop-text); color: #fff; font-weight: 700; text-decoration: none;
  transition: transform var(--shop-t-fast) var(--shop-ease);
}
.skip-link:focus { transform: translateY(0); }
.topbar-logo { text-decoration: none; }
.nav-user { border: 0; background: transparent; color: inherit; font: inherit; text-align: left; padding: 4px; border-radius: var(--shop-r-btn); cursor: pointer; }
.nav-user:hover { background: var(--shop-surface-2); }

.home-hero { display: grid; grid-template-columns: 1fr; gap: var(--shop-s3); }
.home-hero .banner { border: 1px solid var(--shop-line); box-shadow: 0 18px 54px rgba(21,72,50,.08); }
.banner-track { overscroll-behavior-x: contain; scroll-behavior: smooth; }
.banner-slide { min-width: 100%; display: block; color: inherit; text-decoration: none; }
.banner-img { height: auto; aspect-ratio: 16/9; image-rendering: auto; }
.banner-cap {
  left: 14px; right: auto; bottom: 14px; max-width: min(72%, 320px); padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.72); border-radius: var(--shop-r-in);
  background: rgba(255,255,255,.86); color: var(--shop-text);
  box-shadow: 0 8px 30px rgba(23,37,31,.14); backdrop-filter: blur(10px);
}
.banner-cap b { font-size: var(--shop-fs-5); text-shadow: none; }
.banner-cap span { display: block; color: var(--shop-text-2); text-shadow: none; }
.banner-controls {
  position: absolute; right: 12px; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; border: 1px solid rgba(255,255,255,.48); border-radius: var(--shop-r-pill);
  background: rgba(16,42,31,.62); backdrop-filter: blur(8px);
}
.banner-dots { position: static; display: flex; align-items: center; gap: 5px; pointer-events: auto; }
.banner-arrow { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.banner-arrow:hover { background: rgba(255,255,255,.26); }

.service-panel {
  display: flex; flex-direction: column; justify-content: center; min-height: 220px; padding: clamp(22px,4vw,40px);
  border: 1px solid var(--shop-line); border-radius: var(--shop-r-card); background: var(--shop-surface);
}
.service-kicker { color: var(--shop-primary-deep); font-size: var(--shop-fs-2); font-weight: 800; letter-spacing: .12em; }
.service-title { margin: 12px 0 10px; max-width: 9ch; font-size: clamp(28px,4.5vw,48px); line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }
.service-copy { margin: 0; color: var(--shop-text-2); line-height: 1.8; text-wrap: pretty; }
.service-points { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--shop-line); }
.service-point { min-width: 0; }
.service-point b, .service-point small { display: block; }
.service-point b { color: var(--shop-text); font-size: var(--shop-fs-5); font-variant-numeric: tabular-nums; }
.service-point small { margin-top: 3px; color: var(--shop-meta); font-size: var(--shop-fs-1); }

.home-categories { margin-top: var(--shop-s5); padding: var(--shop-s4); border: 1px solid var(--shop-line); border-radius: var(--shop-r-card); background: var(--shop-surface); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: var(--shop-s3); }
.section-title, .section-sub { display: block; }
.section-title { font-size: var(--shop-fs-7); letter-spacing: -.02em; }
.section-sub { margin-top: 4px; color: var(--shop-meta); font-size: var(--shop-fs-2); }
.section-link { min-height: 44px; border: 0; background: transparent; color: var(--shop-primary-deep); font-weight: 700; cursor: pointer; }
.home-categories .cat-tile { align-items: stretch; gap: 8px; padding: 8px; border: 1px solid transparent; }
.home-categories .cat-tile-img { aspect-ratio: 4/3; }
.home-categories .cat-tile-name { padding: 0 2px; color: var(--shop-text); font-size: var(--shop-fs-3); font-weight: 700; text-align: left; }
@media (hover:hover) {
  .home-categories .cat-tile:hover { border-color: color-mix(in srgb, var(--cat, var(--shop-primary)) 34%, var(--shop-line)); background: color-mix(in srgb, var(--cat, var(--shop-primary)) 5%, #fff); }
}

.rights-bar { position: relative; overflow: hidden; padding: 18px 20px; background: #075D43; box-shadow: 0 14px 34px rgba(7,93,67,.16); }
.rights-bar::after { content: ""; position: absolute; width: 180px; height: 180px; right: 12%; top: -112px; border: 28px solid rgba(255,255,255,.08); border-radius: 50%; pointer-events: none; }
.rights-title { display: block; font-size: var(--shop-fs-6); }
.rights-sub { display: block; margin-top: 3px; }
.rights-btn { z-index: 1; display: inline-flex; align-items: center; }

.floor { margin-top: var(--shop-s7); }
.floor-head { padding-bottom: var(--shop-s3); }
.floor-title { font-size: var(--shop-fs-7); }
.sku-card { border-color: var(--shop-line); box-shadow: 0 8px 24px rgba(23,37,31,.045); }
.sku-card-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sku-card-hit:focus-visible { outline: 3px solid var(--shop-primary-deep); outline-offset: -3px; }
.sku-fav, .sku-card .qty { z-index: 2; }
.sku-img { image-rendering: auto; }

@media (min-width: 768px) {
  .home-categories .cat-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
}
@media (min-width: 1200px) {
  .home-hero { grid-template-columns: minmax(0,2fr) minmax(300px,.82fr); gap: var(--shop-s4); }
  .home-hero .banner, .home-hero .banner-track, .home-hero .banner-slide { min-height: 400px; height: 100%; }
  .home-hero .banner-img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; }
  .service-panel { min-height: 400px; }
  .home-categories { padding: var(--shop-s5); }
  .home-categories .cat-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; }
  .pwa-banner { display: none; }
}
@media (max-width: 767px) {
  .service-panel { padding: 20px; }
  .service-title { max-width: none; font-size: 30px; }
  .service-copy { font-size: var(--shop-fs-3); }
  .home-categories { padding: 12px; }
  .banner-cap { display: none; }
  .banner-controls { right: 8px; bottom: 8px; }
  .banner-arrow { display: none; }
}