/* ============================================================================
   BopoBuy — 全品类中国代购前台 · 主题皮肤 v2(2026-09-21 换模板)
   ----------------------------------------------------------------------------
   来源:业主交付的 Claude Design 设计系统(BopoBuy 设计系统.dc.html)——
     颜色:白底 + 浅灰分区 + 一个主色(#2F5BFF),点缀黄 #FFC83D,墨色 #111827;价格用墨色加粗,不用红色。
     字体:Plus Jakarta Sans;价格与数字等宽(tabular-nums)。
     间距 4px 基数;内容最大宽 1200px;圆角:按钮/标签 999 · 输入框 12 · 卡片 16 · 弹窗 20。
     平时用 1px 边框区分层级,不用阴影;卡片悬停 0 4px 16px 8%,弹层 0 12px 32px 12%;动效 ≤200ms。
   两套变量并存:
     · `--bb-*` 是新模板的正式令牌(新写的组件/页面一律用它);
     · `--c-*` / `--font-*` / `--r-*` 等是老皮肤的变量名 —— **保留名字、改成新值**,让还没重写的旧页面
       (B/C/D 批之前)自动换上新配色与字体,不至于半新半旧。等全部页面重写完再删这一段。
   ========================================================================== */

/* ===== 正式令牌 ============================================================ */
:root {
  --bb-primary:        #2F5BFF;
  --bb-primary-hover:  #2449D8;
  --bb-primary-soft:   #EEF2FF;
  --bb-accent:         #FFC83D;
  --bb-ink:            #111827;
  --bb-text-2:         #4B5563;
  --bb-text-3:         #9CA3AF;
  --bb-line:           #E5E7EB;
  --bb-line-strong:    #D1D5DB;
  --bb-bg:             #FFFFFF;
  --bb-bg-section:     #F7F8FA;
  --bb-bg-image:       #F0F1F4;
  --bb-footer:         #0F172A;
  --bb-footer-chip:    #1F2A44;
  --bb-success:        #16A34A;
  --bb-success-bg:     #DCFCE7;
  --bb-warning:        #F59E0B;
  --bb-warning-bg:     #FEF3C7;
  --bb-danger:         #EF4444;
  --bb-danger-strong:  #B91C1C;
  --bb-danger-bg:      #FEF2F2;
  --bb-info:           #0EA5E9;
  --bb-info-bg:        #E0F2FE;

  --bb-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bb-r-pill: 999px; --bb-r-input: 12px; --bb-r-card: 16px; --bb-r-modal: 20px; --bb-r-sm: 8px;
  --bb-sh-card: 0 4px 16px rgba(0,0,0,.08);
  --bb-sh-pop: 0 12px 32px rgba(0,0,0,.12);
  --bb-ring: 0 0 0 3px rgba(47,91,255,.28);
  --bb-dur: 160ms;
  --bb-maxw: 1200px;
  --bb-gutter: 16px;
  --bb-bottom-nav: 64px;   /* 手机底栏高度,页面底部留白用 */
}

/* ===== 老皮肤变量 → 新值(过渡期,见文件头)=================================== */
:root {
  --c-violet: var(--bb-primary); --c-violet-600: var(--bb-primary-hover); --c-violet-700: #1D3FBF;
  --c-blue: var(--bb-primary); --c-pink: var(--bb-primary); --c-pink-600: var(--bb-ink); --c-cyan: var(--bb-info);
  --grad-accent: var(--bb-primary);
  --grad-accent-soft: var(--bb-primary-soft);
  --grad-holo: var(--bb-primary-soft);
  --grad-hero: var(--bb-primary-soft);
  --c-bg: var(--bb-bg); --c-bg-lavender: var(--bb-bg-section); --c-surface: #fff; --c-surface-2: var(--bb-bg-section);
  --c-surface-ink: var(--bb-footer); --c-line: var(--bb-line); --c-line-strong: var(--bb-line-strong);
  --c-ink: var(--bb-ink); --c-ink-2: var(--bb-text-2); --c-ink-3: var(--bb-text-3); --c-ink-on-accent: #fff; --c-ink-inverse: #F9FAFB;
  --c-verified: var(--bb-primary); --c-verified-bg: var(--bb-primary-soft);
  --c-qc: var(--bb-success); --c-qc-bg: var(--bb-success-bg);
  --c-warn: var(--bb-warning); --c-warn-bg: var(--bb-warning-bg);
  --c-danger: var(--bb-danger); --c-danger-bg: var(--bb-danger-bg); --c-star: var(--bb-accent);
  --font-display: var(--bb-font); --font-body: var(--bb-font); --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --fs-display: clamp(30px, 2vw + 22px, 44px); --fs-h1: clamp(24px, 1vw + 20px, 32px); --fs-h2: clamp(20px, .6vw + 17px, 24px);
  --fs-h3: 18px; --fs-h4: 17px; --fs-lg: 16px; --fs-base: 15px; --fs-sm: 14px; --fs-xs: 12px;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.6;
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --tracking-tight: -0.02em; --tracking-label: 0.12em;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px; --s-13: 128px;
  --r-xs: 8px; --r-sm: 10px; --r-md: 12px; --r-lg: 16px; --r-xl: 16px; --r-2xl: 20px; --r-pill: 999px;
  --sh-xs: none; --sh-sm: none; --sh-md: var(--bb-sh-card); --sh-lg: var(--bb-sh-pop); --sh-glow: none; --sh-glow-pink: none; --ring: var(--bb-ring);
  --ease: cubic-bezier(.22,1,.36,1); --ease-in-out: cubic-bezier(.65,.05,.36,1); --dur-1: 130ms; --dur-2: 180ms; --dur-3: 200ms;
  --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-drawer: 300; --z-modal: 400; --z-toast: 500; --z-fab: 350;
  --maxw: var(--bb-maxw); --gutter: var(--bb-gutter);
}

/* ===== 基础 ================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--bb-font); font-size: 16px; line-height: 26px; color: var(--bb-ink); background: var(--bb-bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--bb-font); font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; color: var(--bb-ink); }
:focus-visible { outline: none; box-shadow: var(--bb-ring); border-radius: var(--bb-r-sm); }
::selection { background: rgba(47,91,255,.16); }
@media (max-width: 767px) { body { font-size: 15px; line-height: 24px; } }

/* ===== 新模板工具类(bb-*)=================================================== */
.bb-wrap { max-width: var(--bb-maxw); margin-inline: auto; padding-inline: var(--bb-gutter); }
.bb-section { padding-block: 48px; }
.bb-section-alt { background: var(--bb-bg-section); }
.bb-display { font-size: 44px; line-height: 52px; font-weight: 800; letter-spacing: -0.02em; text-wrap: pretty; }
.bb-h1 { font-size: 32px; line-height: 40px; font-weight: 700; }
.bb-h2 { font-size: 24px; line-height: 32px; font-weight: 700; }
.bb-h3 { font-size: 18px; line-height: 26px; font-weight: 600; }
.bb-small { font-size: 14px; line-height: 20px; }
.bb-caption { font-size: 12px; line-height: 16px; font-weight: 500; }
.bb-muted { color: var(--bb-text-2); }
.bb-dim { color: var(--bb-text-3); }
.bb-num { font-variant-numeric: tabular-nums; }
.bb-link { color: var(--bb-primary); font-weight: 600; }
.bb-link:hover { color: var(--bb-primary-hover); text-decoration: underline; }
@media (max-width: 767px) {
  .bb-section { padding-block: 24px; }
  .bb-display { font-size: 30px; line-height: 38px; }
  .bb-h1 { font-size: 24px; line-height: 32px; }
  .bb-h2 { font-size: 20px; line-height: 28px; }
  .bb-h3 { font-size: 17px; line-height: 24px; }
}

/* 按钮:主要 48 / 40 / 32;手机主按钮整行宽 */
.bb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px;
  border-radius: var(--bb-r-pill); border: 1.5px solid transparent; font-weight: 700; font-size: 16px; line-height: 1;
  white-space: nowrap; user-select: none; transition: background var(--bb-dur), color var(--bb-dur), border-color var(--bb-dur), transform var(--bb-dur);
}
.bb-btn svg { width: 18px; height: 18px; flex: none; }
.bb-btn:active { transform: translateY(1px); }
.bb-btn-primary { background: var(--bb-primary); color: #fff; }
.bb-btn-primary:hover { background: var(--bb-primary-hover); color: #fff; text-decoration: none; }
.bb-btn-secondary { background: #fff; color: var(--bb-primary); border-color: var(--bb-primary); }
.bb-btn-secondary:hover { background: var(--bb-primary-soft); text-decoration: none; }
.bb-btn-ghost { background: #fff; color: var(--bb-ink); border-color: var(--bb-line); }
.bb-btn-ghost:hover { border-color: var(--bb-line-strong); background: var(--bb-bg-section); text-decoration: none; }
.bb-btn-danger { background: #fff; color: var(--bb-danger-strong); border-color: var(--bb-danger-strong); }
.bb-btn-md { height: 40px; padding: 0 20px; font-size: 14px; }
.bb-btn-sm { height: 32px; padding: 0 14px; font-size: 13px; }
.bb-btn-block { width: 100%; }
.bb-btn[disabled], .bb-btn[aria-disabled="true"], .bb-btn.is-disabled { opacity: .45; pointer-events: none; }
.bb-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.bb-btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: bbspin .7s linear infinite; }
.bb-btn-secondary.is-loading::after, .bb-btn-ghost.is-loading::after { border-color: rgba(47,91,255,.25); border-top-color: var(--bb-primary); }
@keyframes bbspin { to { transform: rotate(360deg); } }
@keyframes bbshine { 0% { background-position: -200px 0; } 100% { background-position: 400px 0; } }
@media (max-width: 767px) { .bb-btn-mobile-block { width: 100%; } }

/* 输入 */
.bb-field { display: flex; flex-direction: column; gap: 6px; }
.bb-label { font-size: 14px; font-weight: 600; line-height: 20px; }
.bb-hint { font-size: 12px; line-height: 16px; color: var(--bb-text-3); }
.bb-input, .bb-select, .bb-textarea {
  width: 100%; height: 48px; padding: 0 14px; background: #fff; border: 1.5px solid var(--bb-line); border-radius: var(--bb-r-input);
  font-size: 15px; color: var(--bb-ink); transition: border-color var(--bb-dur), box-shadow var(--bb-dur);
}
.bb-input::placeholder, .bb-textarea::placeholder { color: var(--bb-text-3); }
.bb-input:focus, .bb-select:focus, .bb-textarea:focus { outline: none; border-color: var(--bb-primary); box-shadow: var(--bb-ring); }
.bb-input[aria-invalid="true"], .bb-field.is-error .bb-input { border-color: var(--bb-danger); }
.bb-field.is-error .bb-hint { color: var(--bb-danger-strong); }
.bb-input:disabled { background: var(--bb-bg-section); color: var(--bb-text-3); }
.bb-textarea { height: auto; min-height: 96px; padding: 12px 14px; resize: vertical; line-height: 22px; }
.bb-select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }

/* 卡片 / 徽章 / 标签 */
.bb-card { background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); }
.bb-card-pad { padding: 24px; }
.bb-card-hover { transition: box-shadow var(--bb-dur), transform var(--bb-dur); }
.bb-card-hover:hover { box-shadow: var(--bb-sh-card); }
.bb-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--bb-r-pill); font-size: 12px; font-weight: 700; line-height: 16px; white-space: nowrap; }
.bb-badge-accent { background: var(--bb-accent); color: var(--bb-ink); }
.bb-badge-soft { background: var(--bb-primary-soft); color: var(--bb-primary); }
.bb-badge-success { background: var(--bb-success-bg); color: #166534; }
.bb-badge-warning { background: var(--bb-warning-bg); color: #92400E; }
.bb-badge-danger { background: var(--bb-danger-bg); color: var(--bb-danger-strong); }
.bb-badge-info { background: var(--bb-info-bg); color: #075985; }
.bb-badge-neutral { background: var(--bb-bg-section); color: var(--bb-text-2); }
.bb-badge-purple { background: #F3E8FF; color: #6B21A8; }
/* 平台徽章:一律文字,不用官方标志 */
.bb-platform { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: var(--bb-r-pill); background: rgba(255,255,255,.95); border: 1px solid var(--bb-line); color: var(--bb-text-2); font-size: 12px; font-weight: 600; line-height: 16px; }
.bb-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: var(--bb-r-pill); background: #fff; border: 1px solid var(--bb-line); color: var(--bb-text-2); font-size: 14px; font-weight: 600; white-space: nowrap; transition: all var(--bb-dur); }
.bb-chip:hover { border-color: var(--bb-line-strong); color: var(--bb-ink); text-decoration: none; }
.bb-chip.is-active, .bb-chip[aria-pressed="true"] { background: var(--bb-primary); border-color: var(--bb-primary); color: #fff; }

/* 价格 */
.bb-price { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--bb-ink); }
.bb-price-l { font-size: 32px; line-height: 40px; }
.bb-price-cny { font-size: 13px; color: var(--bb-text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .bb-price-l { font-size: 26px; line-height: 32px; } }

/* 商品卡 */
.bb-product { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); overflow: hidden; color: inherit; transition: box-shadow var(--bb-dur); }
.bb-product:hover { box-shadow: var(--bb-sh-card); text-decoration: none; }
.bb-product-media { position: relative; aspect-ratio: 1; background: var(--bb-bg-image); display: flex; align-items: center; justify-content: center; }
.bb-product-media img { width: 100%; height: 100%; object-fit: cover; }
.bb-product-media .bb-platform { position: absolute; top: 10px; left: 10px; }
.bb-product-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.bb-product-title { font-size: 14px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bb-product-price { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.bb-product-price .bb-price { font-size: 20px; line-height: 24px; }
.bb-product-meta { font-size: 12px; line-height: 16px; color: var(--bb-text-2); }
@media (max-width: 767px) { .bb-product-body { padding: 10px; gap: 4px; } .bb-product-title { font-size: 13px; line-height: 19px; } .bb-product-price .bb-price { font-size: 18px; } }

/* 骨架屏 / 空态 / 提示条 */
.bb-skeleton { background: linear-gradient(90deg, #F0F1F4 0px, #F7F8FA 80px, #F0F1F4 160px); background-size: 400px 100%; animation: bbshine 1.4s linear infinite; border-radius: 6px; }
.bb-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 32px 20px; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); background: #fff; }
.bb-empty-title { font-size: 15px; font-weight: 700; }
.bb-empty-text { font-size: 13px; line-height: 20px; color: var(--bb-text-2); max-width: 36ch; }
.bb-alert { display: flex; gap: 10px; padding: 14px 16px; border: 1px solid var(--bb-line); border-radius: var(--bb-r-input); background: var(--bb-bg-section); font-size: 14px; line-height: 20px; }
.bb-alert svg { width: 20px; height: 20px; flex: none; }
.bb-alert-danger { border-color: #FCA5A5; background: var(--bb-danger-bg); color: var(--bb-danger-strong); }
.bb-alert-warning { border-color: #FCD34D; background: var(--bb-warning-bg); color: #92400E; }
.bb-alert-success { border-color: #86EFAC; background: var(--bb-success-bg); color: #166534; }
.bb-alert-info { border-color: #BAE6FD; background: var(--bb-info-bg); color: #075985; }

/* 弹窗 / 抽屉(手机底部抽屉) */
.bb-scrim { position: fixed; inset: 0; background: rgba(17,24,39,.45); z-index: var(--z-modal); }
.bb-modal { position: fixed; z-index: calc(var(--z-modal) + 1); top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: var(--bb-r-modal); box-shadow: var(--bb-sh-pop); padding: 24px; }
@media (max-width: 767px) { .bb-modal { top: auto; left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-height: 88vh; border-radius: 20px 20px 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); } }

/* 页面底部给手机底栏留位 */
@media (max-width: 767px) { .bb-has-bottom-nav { padding-bottom: calc(var(--bb-bottom-nav) + env(safe-area-inset-bottom)); } }

/* ===== 老皮肤选择器(过渡期,给未重写页面用;值已按新模板)=========================== */
.wrap { max-width: var(--bb-maxw); margin-inline: auto; padding-inline: var(--bb-gutter); }
.wrap-wide { max-width: 1400px; margin-inline: auto; padding-inline: var(--bb-gutter); }
.section { padding-block: 48px; }
.section-sm { padding-block: 32px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.grid { display: grid; gap: 20px; }
.muted { color: var(--bb-text-2); }
.dim { color: var(--bb-text-3); }
.center { text-align: center; }
.mono { font-variant-numeric: tabular-nums; }
.hide { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gradient-text { color: var(--bb-primary); }
.eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--bb-text-2); font-weight: 700; }
.head { max-width: 640px; }
.head .eyebrow { display: inline-block; margin-bottom: 12px; }
.head h2 { font-size: 24px; line-height: 32px; }
.head p { margin-top: 12px; color: var(--bb-text-2); font-size: 16px; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding-inline: 22px; font-weight: 700; font-size: 15px; border-radius: var(--bb-r-pill); background: #fff; color: var(--bb-ink); border: 1.5px solid var(--bb-line); transition: background var(--bb-dur), color var(--bb-dur), border-color var(--bb-dur); white-space: nowrap; user-select: none; }
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--bb-primary); color: #fff; border-color: transparent; }
.btn-primary:hover { background: var(--bb-primary-hover); color: #fff; }
.btn-secondary { background: #fff; color: var(--bb-primary); border-color: var(--bb-primary); }
.btn-secondary:hover { background: var(--bb-primary-soft); }
.btn-ghost { background: transparent; color: var(--bb-text-2); border-color: var(--bb-line); }
.btn-ghost:hover { background: var(--bb-bg-section); color: var(--bb-ink); }
.btn-danger { background: #fff; color: var(--bb-danger-strong); border-color: var(--bb-danger-strong); }
.btn-sm { height: 36px; padding-inline: 14px; font-size: 13px; }
.btn-lg { height: 52px; padding-inline: 32px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-icon { width: 44px; padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: bbspin .7s linear infinite; }
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after { border-color: rgba(47,91,255,.3); border-top-color: var(--bb-primary); }
@keyframes spin { to { transform: rotate(360deg); } }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding-inline: 14px; border-radius: var(--bb-r-pill); background: #fff; border: 1px solid var(--bb-line); font-size: 13px; font-weight: 600; color: var(--bb-text-2); transition: all var(--bb-dur); white-space: nowrap; }
.chip:hover { border-color: var(--bb-line-strong); color: var(--bb-ink); }
.chip[aria-pressed="true"], .chip.is-active, .chip-accent[aria-pressed="true"], .chip-accent.is-active { background: var(--bb-primary); color: #fff; border-color: var(--bb-primary); }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--bb-r-sm); font-size: 12px; font-weight: 700; letter-spacing: .02em; background: var(--bb-primary-soft); color: var(--bb-primary); }
.tag-source { background: var(--bb-bg-section); color: var(--bb-text-2); }
.tag-sale { background: var(--bb-danger-bg); color: var(--bb-danger-strong); }
.tag-new { background: var(--bb-accent); color: var(--bb-ink); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--bb-r-pill); font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge svg { width: 13px; height: 13px; }
.badge-qc { background: var(--bb-success-bg); color: #166534; }
.badge-verified { background: var(--bb-primary-soft); color: var(--bb-primary); }
.badge-warn { background: var(--bb-warning-bg); color: #92400E; }
.rating { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.stars { --pct: 100%; position: relative; display: inline-block; font-size: 14px; line-height: 1; letter-spacing: 2px; font-family: Arial; }
.stars::before { content: "★★★★★"; color: var(--bb-line-strong); }
.stars::after { content: "★★★★★"; color: var(--bb-accent); position: absolute; inset: 0; width: var(--pct); overflow: hidden; white-space: nowrap; }
.rating b { font-weight: 700; color: var(--bb-ink); }
.rating .count { color: var(--bb-text-3); }
.card { background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); }
.card-pad { padding: 24px; }
.product { background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--bb-dur); }
.product:hover { box-shadow: var(--bb-sh-card); }
.product-media { position: relative; aspect-ratio: 1/1; background: var(--bb-bg-image); overflow: hidden; }
.product-media .ph { width: 100%; height: 100%; }
.product-media .overlay-tl { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.product-media .overlay-tr { position: absolute; top: 10px; right: 10px; }
.product-media .overlay-bl { position: absolute; bottom: 10px; left: 10px; }
.fav-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--bb-text-2); transition: all var(--bb-dur); }
.fav-btn:hover, .fav-btn.is-on { color: var(--bb-primary); }
.fav-btn svg { width: 18px; height: 18px; }
.product-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-shop { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bb-text-3); }
.product-title { font-weight: 500; font-size: 14px; line-height: 20px; color: var(--bb-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-meta { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.price { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.price .now { font-weight: 800; font-size: 18px; color: var(--bb-ink); }
.price .was { font-size: 13px; color: var(--bb-text-3); text-decoration: line-through; }
.price .cur { font-size: 12px; color: var(--bb-text-3); }
.shop-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); padding: 16px; transition: box-shadow var(--bb-dur); }
.shop-card:hover { box-shadow: var(--bb-sh-card); }
.shop-avatar { width: 56px; height: 56px; border-radius: 12px; flex: none; overflow: hidden; background: var(--bb-primary-soft); }
.shop-card .info { flex: 1; min-width: 0; }
.shop-card .name { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.ph { position: relative; display: grid; place-items: center; background: var(--bb-bg-image); color: var(--bb-text-3); overflow: hidden; }
.ph::after { content: attr(data-label); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--bb-text-3); position: absolute; bottom: 8px; left: 0; right: 0; text-align: center; }
.ph svg { width: 30%; max-width: 64px; opacity: .5; }
.ph-mono { background: var(--bb-bg-image); }
.searchbar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--bb-line); border-radius: var(--bb-r-pill); padding: 5px 6px 5px 16px; transition: all var(--bb-dur); }
.searchbar:focus-within { border-color: var(--bb-primary); box-shadow: var(--bb-ring); }
.searchbar svg.lead { width: 18px; height: 18px; color: var(--bb-text-3); flex: none; }
.searchbar input { flex: 1; border: 0; outline: none; background: none; font-size: 15px; min-width: 0; }
.searchbar input::placeholder { color: var(--bb-text-3); }
.searchbar .img-search { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--bb-primary); background: var(--bb-primary-soft); flex: none; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 14px; font-weight: 600; color: var(--bb-ink); }
.field .hint { font-size: 12px; color: var(--bb-text-3); }
.input, .select, .textarea { height: 48px; padding-inline: 14px; background: #fff; border: 1.5px solid var(--bb-line); border-radius: var(--bb-r-input); font-size: 15px; color: var(--bb-ink); transition: border-color var(--bb-dur), box-shadow var(--bb-dur); width: 100%; }
.textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 96px; line-height: 22px; }
.input::placeholder, .textarea::placeholder { color: var(--bb-text-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--bb-primary); box-shadow: var(--bb-ring); }
.input[aria-invalid="true"], .field.is-error .input { border-color: var(--bb-danger); }
.field.is-error .hint { color: var(--bb-danger-strong); }
.input:disabled { background: var(--bb-bg-section); color: var(--bb-text-3); cursor: not-allowed; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--bb-line); border-radius: var(--bb-r-pill); overflow: hidden; height: 44px; }
.stepper button { width: 44px; height: 100%; display: grid; place-items: center; color: var(--bb-text-2); font-size: 18px; }
.stepper button:hover { background: var(--bb-bg-section); color: var(--bb-primary); }
.stepper input { width: 44px; text-align: center; border: 0; outline: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { min-width: 48px; height: 40px; padding-inline: 12px; border-radius: 10px; border: 1.5px solid var(--bb-line); background: #fff; font-size: 13px; font-weight: 600; color: var(--bb-text-2); display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all var(--bb-dur); }
.swatch:hover { border-color: var(--bb-primary); }
.swatch[aria-pressed="true"] { border-color: var(--bb-primary); background: var(--bb-primary-soft); color: var(--bb-primary); box-shadow: inset 0 0 0 1px var(--bb-primary); }
.swatch:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.acc { border-top: 1px solid var(--bb-line); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; color: var(--bb-ink); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .ico { width: 22px; height: 22px; transition: transform var(--bb-dur); color: var(--bb-text-3); flex: none; }
.acc[open] summary .ico { transform: rotate(45deg); color: var(--bb-primary); }
.acc .acc-body { padding-bottom: 20px; color: var(--bb-text-2); line-height: 24px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bb-text-3); flex-wrap: wrap; }
.crumbs a:hover { color: var(--bb-primary); }
.crumbs .sep { color: var(--bb-line-strong); }
.crumbs [aria-current] { color: var(--bb-ink); font-weight: 600; }
.pager { display: flex; align-items: center; gap: 6px; justify-content: center; }
.pager a, .pager span { min-width: 40px; height: 40px; padding-inline: 10px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: var(--bb-text-2); border: 1px solid transparent; }
.pager a:hover { background: #fff; border-color: var(--bb-line); color: var(--bb-primary); }
.pager [aria-current="page"] { background: var(--bb-ink); color: #fff; }
.pager .gap { color: var(--bb-text-3); }
.toast-wrap { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 12px; }
.toast { display: flex; align-items: center; gap: 12px; background: var(--bb-footer); color: #fff; border-radius: 12px; padding: 12px 16px; box-shadow: var(--bb-sh-pop); min-width: 280px; max-width: 380px; font-size: 13px; animation: toastIn 200ms var(--ease); }
@keyframes toastIn { from { transform: translateY(12px); opacity: 0; } }
.toast .ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.toast-success .ico { background: rgba(22,163,74,.25); color: #86EFAC; }
.toast-info .ico { background: rgba(47,91,255,.3); color: #BFDBFE; }
.toast strong { display: block; color: #fff; font-weight: 700; }
.toast span { color: rgba(255,255,255,.72); }
.scrim { position: fixed; inset: 0; background: rgba(17,24,39,.45); z-index: var(--z-modal); }
.modal { position: fixed; z-index: var(--z-modal); top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(520px, calc(100vw - 32px)); background: #fff; border-radius: var(--bb-r-modal); box-shadow: var(--bb-sh-pop); padding: 24px; }
.drawer { position: fixed; z-index: var(--z-drawer); top: 0; right: 0; height: 100%; width: min(420px, 92vw); background: #fff; box-shadow: var(--bb-sh-pop); display: flex; flex-direction: column; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid var(--bb-line); display: grid; place-items: center; overflow: hidden; flex: none; }
.logo-mark img { width: 34px; height: 34px; }
.logo-mark.on-accent { background: var(--bb-primary); border-color: transparent; }
.logo-word { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.025em; color: var(--bb-ink); }
.logo.on-dark .logo-word { color: #fff; }
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--bb-line); }
.nav { display: flex; align-items: center; gap: 20px; height: 72px; }
.nav .logo { flex: none; }
.nav .nav-search { flex: 1; max-width: 460px; }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a { padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--bb-ink); white-space: nowrap; }
.nav-links a:hover { background: var(--bb-bg-section); color: var(--bb-primary); }
.nav-links a[aria-current] { color: var(--bb-primary); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--bb-ink); position: relative; }
.icon-btn:hover { background: var(--bb-bg-section); color: var(--bb-primary); }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn .dot { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: var(--bb-r-pill); background: var(--bb-danger-strong); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.nav-toggle { display: none; }
.cat-bar { border-top: 1px solid var(--bb-line); }
.cat-bar .inner { display: flex; align-items: center; gap: 20px; height: 48px; overflow-x: auto; scrollbar-width: none; }
.cat-bar .inner::-webkit-scrollbar { display: none; }
.cat-bar a { font-size: 14px; font-weight: 600; color: var(--bb-text-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.cat-bar a:hover { color: var(--bb-primary); }
.cat-bar .deal { color: var(--bb-primary); font-weight: 700; }
.site-footer { background: var(--bb-footer); color: #D1D5DB; padding-block: 48px 24px; margin-top: 48px; }
.site-footer a { color: #D1D5DB; font-size: 14px; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.footer-col h4 { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--bb-footer-chip); font-size: 13px; color: #D1D5DB; }
.ai-fab { position: fixed; right: 16px; bottom: 16px; z-index: var(--z-fab); display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bb-primary); color: #fff; box-shadow: var(--bb-sh-pop); }
.ai-fab .av { display: grid; place-items: center; }
.ai-fab .label, .ai-fab .pulse { display: none; }
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust-item { display: flex; align-items: flex-start; gap: 12px; }
.trust-item .ti-ico { width: 46px; height: 46px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--bb-primary-soft); color: var(--bb-primary); }
.trust-item .ti-ico svg { width: 24px; height: 24px; }
.trust-item h4 { font-size: 15px; font-weight: 700; }
.trust-item p { font-size: 13px; color: var(--bb-text-2); line-height: 1.45; margin-top: 2px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { position: relative; padding: 24px; background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); }
.step .num { font-size: 13px; font-weight: 700; color: var(--bb-primary); }
.step h4 { margin-top: 12px; }
.step p { color: var(--bb-text-2); font-size: 14px; margin-top: 6px; line-height: 1.5; }
.step .step-ico { width: 40px; height: 40px; color: var(--bb-primary); margin-bottom: 12px; }
.divider { height: 1px; background: var(--bb-line); border: 0; }
.pill-note { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--bb-r-pill); background: var(--bb-primary-soft); color: var(--bb-primary); font-size: 13px; font-weight: 600; }
.sparkle { color: var(--bb-accent); }
.holo-edge { position: relative; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-col.brand { grid-column: 1 / -1; } }
@media (max-width: 880px) { .nav-links { display: none; } .nav .nav-search { display: none; } .nav-toggle { display: grid; } .trust-strip { grid-template-columns: 1fr 1fr; gap: 24px; } .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .trust-strip, .steps { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .toast-wrap { left: 16px; right: 16px; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

/* 全站 AI 客服浮动按钮(components/AskGoo.vue 的 .dgoo,scoped):手机上浮在底栏之上 16px */
@media (max-width: 767px) { .dgoo { bottom: calc(var(--bb-bottom-nav) + 16px + env(safe-area-inset-bottom)) !important; right: 16px !important; } }

/* ===== 内容页(换模板 D 批,设计稿 P1-3:正文最大宽 720px)。BbDoc 组件 + 各内容页共用 ===== */
.bb-doc-hero { background: var(--bb-primary-soft); padding: 40px 0 32px; }
.bb-doc-hero-wide { padding: 48px 0 40px; }
.bb-doc-wrap { max-width: 760px; margin-inline: auto; padding-inline: var(--bb-gutter); }
.bb-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--bb-text-3); margin-bottom: 12px; }
.bb-crumbs a { color: var(--bb-text-2); }
.bb-crumbs em { font-style: normal; color: var(--bb-ink); font-weight: 600; }
.bb-doc-title { font-size: clamp(26px, 4vw, 38px); line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 10px; text-wrap: pretty; }
.bb-doc-sub { font-size: 17px; line-height: 26px; color: var(--bb-text-2); margin: 0; max-width: 64ch; }
.bb-doc-meta { font-size: 13px; color: var(--bb-text-3); margin: 10px 0 0; }
.bb-doc { padding: 32px 0 64px; }
.bb-prose { font-size: 16px; line-height: 26px; color: var(--bb-text-2); }
.bb-prose > * + * { margin-top: 14px; }
.bb-prose h2 { font-size: 22px; line-height: 30px; font-weight: 700; color: var(--bb-ink); margin-top: 36px; scroll-margin-top: 24px; }
.bb-prose h3 { font-size: 17px; line-height: 24px; font-weight: 700; color: var(--bb-ink); margin-top: 22px; scroll-margin-top: 24px; }
.bb-prose p { margin: 0; }
.bb-prose p + p { margin-top: 12px; }
.bb-prose strong { color: var(--bb-ink); }
.bb-prose a { color: var(--bb-primary); text-decoration: underline; text-underline-offset: 2px; }
.bb-prose ul, .bb-prose ol { padding-left: 22px; }
.bb-prose li { margin: 6px 0; }
.bb-prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--bb-bg-section); padding: 1px 6px; border-radius: 4px; }
.bb-prose .bb-table-wrap { overflow-x: auto; }
.bb-prose table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 20px; }
.bb-prose th, .bb-prose td { border: 1px solid var(--bb-line); padding: 10px 12px; text-align: left; vertical-align: top; }
.bb-prose th { background: var(--bb-bg-section); color: var(--bb-ink); font-weight: 700; }
.bb-prose td:first-child { font-weight: 600; color: var(--bb-ink); }
.bb-doc-lead { font-size: 18px; line-height: 28px; color: var(--bb-ink); }
.bb-doc-callout { border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); background: #fff; padding: 16px 20px; }
.bb-doc-callout.is-warn { background: var(--bb-warning-bg); border-color: #FCD34D; }
.bb-doc-callout.is-info { background: var(--bb-primary-soft); border-color: transparent; }
.bb-doc-callout > * + * { margin-top: 8px; }
.bb-doc-callout-t { font-weight: 700; color: var(--bb-ink); }
/* 步骤卡(设计稿「1 Find it. …」) */
.bb-doc-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.bb-doc-step { display: flex; gap: 14px; padding: 16px 18px; border: 1px solid var(--bb-line); border-radius: var(--bb-r-card); background: #fff; }
.bb-doc-step-n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--bb-primary); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 15px; }
.bb-doc-step-b { font-weight: 700; color: var(--bb-ink); display: block; margin-bottom: 4px; }
.bb-doc-step p { font-size: 15px; line-height: 22px; }
/* 定义卡(平台页开头「X is …」,给 AI 引用) */
.bb-doc-def { border-left: 4px solid var(--bb-primary); background: var(--bb-bg-section); border-radius: 0 12px 12px 0; padding: 14px 18px; font-size: 16px; line-height: 25px; color: var(--bb-ink); }
/* FAQ(折叠) */
.bb-doc-faq { display: grid; gap: 10px; }
.bb-doc-faq details { border: 1px solid var(--bb-line); border-radius: 12px; background: #fff; padding: 0 16px; }
.bb-doc-faq summary { cursor: pointer; font-weight: 600; font-size: 15px; line-height: 22px; color: var(--bb-ink); padding: 13px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.bb-doc-faq summary::-webkit-details-marker { display: none; }
.bb-doc-faq summary::after { content: '+'; color: var(--bb-text-3); font-weight: 400; flex: none; }
.bb-doc-faq details[open] summary::after { content: '−'; }
.bb-doc-faq details p { padding: 0 0 14px; font-size: 15px; line-height: 23px; }
/* 内容页顶部/底部 CTA 与搜索框 */
.bb-doc-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.bb-doc-search { display: flex; gap: 8px; }
.bb-doc-search .bb-input { flex: 1; min-width: 0; }
.bb-doc-related { display: flex; flex-wrap: wrap; gap: 8px; }
/* 侧目录(帮助中心分类跳转) */
.bb-doc-toc { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 767px) {
  .bb-doc-hero { padding: 28px 0 24px; }
  .bb-doc { padding: 24px 0 48px; }
  .bb-prose { font-size: 15px; line-height: 24px; }
  .bb-doc-sub { font-size: 15px; line-height: 23px; }
  .bb-doc-lead { font-size: 16px; line-height: 25px; }
  .bb-doc-step { padding: 14px; }
}