/* ============================================================================
   beibelle74 · 设计令牌（从 Shopify 版 brand.css 抽取）
   用途：在店匠主题上重建同一套视觉语言。只放「变量 + 基础排版」，组件样式在 bb-base.css
   ⚠️ 所有字号只准用 var(--fs-*)，禁写 12.5px / 40.96px 这类非档位值
   ============================================================================ */
:root{
  /* —— 颜色 —— */
  --ink:#1d1d1f;
  --ink-soft:#333336;
  --muted:#6e6e73;
  --muted-2:#6e6e73;
  --hair:#e3e3e6;
  --hair-soft:#efeff1;
  --canvas:#ffffff;
  --parchment:#f6f6f7;
  --parchment-2:#fbfbfc;
  --dark:#0b0b0c;
  --dark-2:#161618;
  --blue:#0071e3;
  --blue-hover:#0077ed;
  --blue-ink:#0066cc;
  --sky:#4da3ff;
  --shoppay:#5a31f4;
  --paypal:#ffc439;
  --danger:#c0392b;
  --ok:#1a7f4b;

  /* —— 圆角 —— */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --pill:999px;

  /* —— 阴影 —— */
  --shadow-1:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-2:0 2px 8px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.12);

  /* —— 容器 —— */
  --max:1240px;
  --max-wide:1480px;
  --gutter:24px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* —— 字阶（手机基准，7 档，禁自造）—— */
  --fs-micro:11px;
  --fs-cap:12px;
  --fs-small:13px;
  --fs-body:15px;
  --fs-lead:17px;
  --fs-h3:20px;
  --fs-h2:30px;
  --fs-h1:36px;
  --fs-title:28px;
  --fs-num:44px;
  --fs-price:24px;
  --lh-tight:1.16; --lh-snug:1.26; --lh-base:1.55; --lh-small:1.45;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable Display","Segoe UI",Roboto,Helvetica,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
}

/* —— 平板 733–1120：取中间值，不塌成手机 —— */
@media (min-width:733px) and (max-width:1120px){
  :root{
    --gutter:32px;
    --fs-body:16px; --fs-lead:18px;
    --fs-h3:20px; --fs-h2:36px; --fs-h1:44px; --fs-title:30px; --fs-num:44px; --fs-price:24px;
  }
}
/* —— 桌面 ≥1121 —— */
@media (min-width:1121px){
  :root{
    --gutter:40px;
    --fs-body:16px; --fs-lead:18px;
    --fs-h3:24px; --fs-h2:44px; --fs-h1:52px; --fs-title:38px; --fs-num:52px; --fs-price:28px;
  }
}

/* ============================================================================
   基础排版（只在 .bb 作用域内生效，避免污染 Reformia 官方组件）
   所有自定义 section 的外层都加 class="bb"，这样不会和店匠原生样式打架
   ============================================================================ */
.bb{
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:var(--lh-base);
  color:var(--ink);
  -webkit-font-smoothing:auto;
  text-rendering:optimizeLegibility;
}
.bb *{box-sizing:border-box}
.bb h1,.bb h2,.bb h3,.bb h4,.bb p{margin:0}
.bb img{max-width:100%;height:auto;display:block}

.bb__wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.bb__wrap--wide{max-width:var(--max-wide)}

/* 标题：中文/英文混排都要换行好看 */
.bb-h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.025em;font-weight:600;text-wrap:balance}
.bb-h2{font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:-.022em;font-weight:600;text-wrap:balance}
.bb-h3{font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:-.014em;font-weight:600}
.bb-p{font-size:var(--fs-body);line-height:var(--lh-base);color:var(--muted);text-wrap:pretty}
.bb-lead{font-size:var(--fs-lead);line-height:var(--lh-base);color:var(--muted)}
.bb-eyebrow{font-size:var(--fs-cap);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* 按钮：高度只有 40 / 48 / 54 三档 */
.bb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 26px;border-radius:var(--pill);border:0;
  font-family:inherit;font-size:var(--fs-body);font-weight:500;letter-spacing:-.01em;
  background:var(--dark);color:#fff;cursor:pointer;text-decoration:none;
  transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
  min-height:44px;
}
.bb-btn:hover{background:var(--dark-2)}
.bb-btn:active{transform:scale(.985)}
.bb-btn--blue{background:var(--blue)}
.bb-btn--blue:hover{background:var(--blue-hover)}
.bb-btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--hair)}
.bb-btn--ghost:hover{background:var(--parchment)}
.bb-btn--sm{height:40px;padding:0 18px;font-size:var(--fs-small)}

/* 触控：所有可点元素 ≥44px（铁律） */
.bb a,.bb button{min-height:44px;display:inline-flex;align-items:center}
.bb a.bb-btn,.bb button.bb-btn{min-height:44px}