/* ==========================================================
   艾伟拓订货商城 · PC 端样式
   ⭐ 配色口径（2026-10-03 定）：全站只有一个颜色来源 —— 站点主题。
      主题 = html[data-theme="orange|green|blue|purple"]，所有元素（含装修组件）
      一律走 --brand / --brand-2 / --brand-soft / --price 等变量跟随主题。
      ⚠️ 禁止在规则里写死品牌色（唯一切换器圆点例外，它是主题标识色）
   首页结构参照 elementor.com/help/videos（卡片画廊）
   ========================================================== */

/* ---------------- 1. 设计令牌 ----------------
   四套主题：orange（默认，与手机端一致）/ green / blue / purple
   旧名 taobao / violet 保留为别名（兼容已存值）
   切换方式：<html data-theme="orange|green|blue|purple">
   ⚠️ 所有品牌相关颜色必须走变量，禁止在规则里写死品牌色
   -------------------------------------------------- */
:root,
[data-theme="orange"],
[data-theme="taobao"] {
  /* 品牌 —— 对齐手机端 data-theme="taobao"（电商橙） */
  --brand: #ff5000;
  --brand-2: #e04600;
  --brand-3: #c93d00;
  --brand-soft: #fff1ea;
  --brand-line: #ffd2b8;
  --brand-rgb: 255, 80, 0;
  --price: #ff4400;

  /* 深色底（顶栏 / 页脚 / 通栏 CTA）—— 暖调深棕 */
  --ink: #3a1c0a;
  --ink-2: #261104;
  --ink-hi: #f3d0b8;
  --ink-t: #e8c4ab;
  --ink-t2: #cfa78e;
  --ink-t3: #b08a72;

  /* ⭐ 装修组件（pc-comps.js / admin comps.js）语义变量 —— 与手机端 style.css 同名同义，
     保证同一主题下两端装修区观感一致 */
  --brand-l: #ff7a33;
  --brand-bg: #fff3ea;
  --brand-bg2: #ffe8d6;
  --brand-text: #b45309;

  /* 品牌浅底渐变（首屏 / 价格区） */
  --hero-a: #fff6f0;
  --hero-b: #fffaf5;
  --tint-a: #fff5ee;
  --tint-b: #fffaf6;
}

[data-theme="green"] {
  --brand: #0e9f6e;
  --brand-2: #057a55;
  --brand-3: #046c4e;
  --brand-soft: #e6f6f0;
  --brand-line: #b9e6d6;
  --brand-rgb: 14, 159, 110;
  --price: #e8382f;

  --ink: #103a2e;
  --ink-2: #04543b;
  --ink-hi: #cfe7de;
  --ink-t: #b8d6cb;
  --ink-t2: #9dc2b6;
  --ink-t3: #8fb4a8;

  --brand-l: #2bbd8a;
  --brand-bg: #e9f8f2;
  --brand-bg2: #d4f0e5;
  --brand-text: #0a6e4d;

  --hero-a: #f0faf6;
  --hero-b: #eaf6ff;
  --tint-a: #f2fbf7;
  --tint-b: #f7fbff;
}

[data-theme="blue"] {
  --brand: #2563eb;
  --brand-2: #1d4ed8;
  --brand-3: #1e40af;
  --brand-soft: #eaf0fe;
  --brand-line: #c7d7fb;
  --brand-rgb: 37, 99, 235;
  --price: #e8382f;

  --ink: #0f2547;
  --ink-2: #07182f;
  --ink-hi: #c9d9f5;
  --ink-t: #b3c7e8;
  --ink-t2: #93a9cf;
  --ink-t3: #7e93b8;

  --brand-l: #3b82f6;
  --brand-bg: #eff4ff;
  --brand-bg2: #e0e9ff;
  --brand-text: #1e40af;

  --hero-a: #eef5fe;
  --hero-b: #f4f9ff;
  --tint-a: #eff5fe;
  --tint-b: #f6faff;
}

[data-theme="purple"],
[data-theme="violet"] {
  --brand: #7c3aed;
  --brand-2: #6d28d9;
  --brand-3: #5b21b6;
  --brand-soft: #f2ecfe;
  --brand-line: #ddd0fb;
  --brand-rgb: 124, 58, 237;
  --price: #e8382f;

  --ink: #2a1a4d;
  --ink-2: #1b0f33;
  --ink-hi: #d8ccf5;
  --ink-t: #c6b6e8;
  --ink-t2: #a894cf;
  --ink-t3: #9179bd;

  --brand-l: #9a67f5;
  --brand-bg: #f5f0ff;
  --brand-bg2: #ebe1ff;
  --brand-text: #5b21b6;

  --hero-a: #f6f2fe;
  --hero-b: #faf7ff;
  --tint-a: #f5f0fe;
  --tint-b: #faf8ff;
}

:root {
  /* 功能色（不随主题变） */
  --warn: #d97706;
  --info: #2563eb;
  --ok: var(--brand);

  /* 中性（不随主题变） */
  --bg: #f7f9fa;
  --card: #ffffff;
  --line: #e8ecef;
  --line-2: #f1f4f6;
  --t1: #16181d;
  --t2: #5a6069;
  --t3: #9aa0a8;
  --t4: #c3c8cf;

  /* 尺规 */
  /* ⭐⭐ 2026-11-03 排版体系（P0）
     · 字号只留 6 档（原来 14 档，13/14/15 三档只差 1px、15→26 中间断层）
     · 行高三档：标题 1.3 / 卡片 1.47 / 正文 1.57
     · 间距 8pt 网格 6 档；圆角 3 档
     · 仅 PC 端使用（移动端与装修组件有自己的固定值，不受影响） */
  --fs-h1: 1.5rem;        /* 24 页面主标题（原 26） */
  --fs-h2: 1.125rem;      /* 18 区块标题（新增，补断层） */
  --fs-title: 0.9375rem;  /* 15 卡片标题 */
  --fs-body: 0.875rem;    /* 14 正文 / 表格 */
  --fs-note: 0.75rem;     /* 12 辅助说明 */
  --fs-num: 1.75rem;      /* 28 数字 / 价格强调 */
  --lh-h1: 1.3;
  --lh-title: 1.47;
  --lh-body: 1.57;
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;  --sp-6: 2rem;
  --r: 0.625rem;       /* 10 卡片 / 弹窗 / 表格容器（原 12） */
  --r-sm: 0.375rem;    /* 6 小控件 / 输入框 / 标签（原 8） */
  --r-lg: 0.875rem;    /* 14 大卡片（原 18） */
  /* 容器宽度：内容区固定占视口 81.25%，两侧各留 9.375%（内容 : 单边留白 = 26 : 3）。
     ⭐ 用 rem 而非 px：rem 跟随根字号等比缩放，1920 / 2560 / 3840 下
        「内容区:留白」比例完全一致，不会出现大屏留白变小的问题。
     实测（1920 视口）：内容区 1560px、两侧各 180px —— 旧版留白 24px，
        现在放大 7.5 倍，远超用户「至少两倍」的要求。
     实测（4K 3840）：内容区 3120px、两侧各 360px，比例严格一致。
     ≤1680 的屏幕上 97.5rem 会超过视口宽度，此时 min() 取 100%，
     行为与改造前一致（铺满 + 内边距留白），小屏零回归。 */
  --w: min(100%, 97.5rem);
  --shadow: 0 0.0625rem 0.125rem rgba(16, 24, 40, .04), 0 0.5rem 1.5rem -0.75rem rgba(16, 24, 40, .12);
  --shadow-h: 0 0.125rem 0.375rem rgba(16, 24, 40, .06), 0 1.125rem 2.5rem -1rem rgba(var(--brand-rgb), .28);
  --head-h: 4rem;
}

/* ---------------- 2. 基础 ---------------- */
* { box-sizing: border-box; }

/* ⭐⭐ 等比缩放总开关（2026-10-03）---------------------------------
   全站尺寸已由写死的 px 改为 rem（转换脚本 .tools/px2rem.py，
   不含媒体查询断点）。此处让 <html> 的 font-size 跟随视口宽度，
   所有 rem 尺寸即自动等比缩放 —— 外框拉大，内部字号/间距/按钮/
   图标/圆角同步放大；外框缩小则同步缩小。全程无写死尺寸。

     视口宽      根字号    相对 1080P    典型设备
     ≤1920px     16px      1.00 倍       1080P 显示器 / 笔记本
     2560px      21.3px     1.33 倍       2K 显示器
     3840px      32px       2.00 倍       4K 显示器
     ≥4800px     40px       2.50 倍       5K 以上（上限兜底）

   ⭐ clamp 下限取 16px（而非更小）= 保证 1366/1440 笔记本上根字号
      仍为 16px，渲染结果与改造前**逐像素一致**，零回归风险。
   ⭐ 上限 40px = 超宽屏兜底，避免元素无节制放大。
   ⚠️ 媒体查询断点必须保持 px —— 断点按物理视口宽度判断，若用 rem
      会随根字号漂移导致逻辑错乱（px2rem.py 已跳过 @media 行）。
   ------------------------------------------------------------------ */
html { font-size: clamp(16px, 0.8333333vw, 40px); }

html, body { min-height: 100%; }   /* 用 min-height：body 随内容增长，sticky 吸顶才能全程生效（height:100% 会把 body 锁死成一屏高，滚动超一屏后 sticky 失效） */
body {
  margin: 0; background: var(--bg); color: var(--t1);
  font: 0.9375rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 1.5rem; }
.mono { font-family: "SF Mono", Consolas, "Liberation Mono", monospace; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted { color: var(--t2); }
.dim { color: var(--t3); }

/* ---------------- 3. 顶栏 / 头部 / 导航 ---------------- */
.topbar { background: var(--ink); color: var(--ink-hi); font-size: 0.8125rem; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 2.125rem; }
.topbar a { color: var(--ink-hi); }
.topbar a:hover { color: #fff; }
.topbar .tl { display: flex; gap: 1rem; align-items: center; }
.topbar .tr { display: flex; gap: 1rem; align-items: center; }
.topbar .sep { width: 0.0625rem; height: 0.75rem; background: rgba(255, 255, 255, .18); }

/* 配色切换器（四色圆点，与手机端一致：电商橙 / 医药绿 / 商务蓝 / 科技紫）
   —— 圆点色是「主题标识色」，必须在**任一主题下**都显示它自己的颜色，
      所以不能用 var(--brand)（那会全部变成当前主题色），只能写死。
   ⚠️ 4 个色值 = 各主题块里的 --brand，新增主题时必须同步补此处，
      否则新圆点无背景 = 透明不可见（2026-10-03 踩坑：紫色圆点漏写，
      用户反馈「PC 端只有三个色系」）。
      JS 侧 pc-app.js::paintThemes() 另有一道按 THEMES 动态设色的兜底。 */
.themes { display: flex; align-items: center; gap: 0.375rem; }
.themes .th-label { font-size: 0.8125rem; color: var(--ink-t2); margin-right: 0.0625rem; }
.themes .th {
  width: 0.9375rem; height: 0.9375rem; padding: 0; border-radius: 50%;
  border: 0.125rem solid transparent; flex: 0 0 auto; transition: transform .15s, box-shadow .15s;
  box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, .2);
}
.themes .th[data-set-theme="orange"] { background: #ff5000; }
.themes .th[data-set-theme="green"]  { background: #0e9f6e; }
.themes .th[data-set-theme="blue"]   { background: #2563eb; }
.themes .th[data-set-theme="purple"] { background: #7c3aed; }
.themes .th:hover { transform: scale(1.18); }
.themes .th.on { border-color: #fff; box-shadow: 0 0 0 0.125rem rgba(255, 255, 255, .38); }

.head { background: var(--card); border-bottom: 0.0625rem solid var(--line); position: sticky; top: 0; z-index: 60; }
.head .wrap { display: flex; align-items: center; gap: 2.5rem; height: 5.25rem; }

.logo { display: flex; align-items: center; gap: 0.625rem; flex: 0 0 auto; }
/* ⭐ 2026-10-16 公司 logo 图片（取代原「艾」方块 + 文字标识）
   高度 2.75rem(44px)：比原 mark 的 2.5rem 略大，便于 logo 内的小字可读；
   头部高 4.875rem(78px)，空间充裕。宽度自适应（原图 1200×378，约 140px）。 */
/* ⭐⭐ 2026-11-02 用户两次反馈「logo 太小」。真因不是 CSS 尺寸：
   原图 1200×378 里**四周全是白边**（墨迹只有 892×116），所以把 height 从 44 调到 56，
   字标实际只从 13px 长到 17px —— 一直在放大白边。
   ⇒ 换用裁掉白边的版本（912×136，比例 6.7:1），并把 height 定 2.5rem(40px)：
   字标可视高度约 40px（原来的 2.3 倍），整块宽约 268px。 */
.logo .logo-img { height: 2.5rem; width: auto; display: block; }
.logo .mark {
  width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.25rem;
  box-shadow: 0 0.375rem 1rem -0.375rem rgba(var(--brand-rgb), .7);
}
.logo .nm { line-height: 1.15; }
.logo .nm b { display: block; font-size: 1.125rem; letter-spacing: .01em; }
.logo .nm span { font-size: 0.75rem; color: var(--t3); letter-spacing: .12em; text-transform: uppercase; }

.search { flex: 1 1 auto; max-width: none; display: flex; }   /* 宽度由 .searchwrap 控制 */
.search .box {
  flex: 1; display: flex; align-items: center; height: 2.75rem; background: var(--bg);
  border: 0.0938rem solid var(--line); border-radius: 62.4375rem 0 0 62.4375rem; padding: 0 0.5rem 0 1rem;
  transition: .15s;
}
.search .box:focus-within { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 0.25rem var(--brand-soft); }
.search .box svg { flex: 0 0 auto; color: var(--t3); }
.search input { flex: 1; border: 0; background: none; outline: none; font-size: 0.9375rem; }
.searchwrap { flex: 1 1 auto; max-width: 43rem; display: flex; flex-direction: column; position: relative; }
/* ⭐ 2026-11-02 品牌区与搜索区之间加 1px 分隔线：logo 放大后左段偏"重"，
   一条竖线能把「品牌 / 搜索 / 操作」三段结构交代清楚，也压住中间的松。 */
.searchwrap::before { content: ''; position: absolute; left: -1.25rem; top: 0.125rem;
  width: 1px; height: 2.5rem; background: var(--line); }
.head .hot { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin-top: 0.4375rem; font-size: 0.75rem; color: var(--t3); }
.head .hot a { color: var(--t2); text-decoration: none; }
.head .hot a:hover { color: var(--brand); }
.search .btn {
  height: 2.75rem; padding: 0 1.875rem; background: var(--brand); color: #fff;
  border-radius: 0 62.4375rem 62.4375rem 0; font-weight: 600; letter-spacing: .04em; transition: .15s;
}
.search .btn:hover { background: var(--brand-2); }
.search .hot { margin-top: 0; font-size: 0.8125rem; color: var(--t3); display: flex; gap: 0.625rem; }

.head .acts { display: flex; align-items: center; gap: 2rem; flex: 0 0 auto; margin-left: auto; }
/* ⭐ 2026-11-02 与「搜索框那一行」垂直对齐：热词行高 19 + 间距 7 = 26 ⇒ 上移 13px 让中心对齐搜索框 */
.logo, .head .acts { margin-bottom: 1.625rem; }
.act { display: inline-flex; align-items: center; color: var(--t2); font-size: 0.875rem;
  line-height: 1.4; letter-spacing: .01em; position: relative; }
/* 参考图口径：客服咨询用品牌橙、600 字重，作为右侧唯一强调项 */
.act-kf { color: var(--brand); font-weight: 600; }
.act:hover { color: var(--brand); }
.act .cart-n {
  position: absolute; top: -0.5rem; right: -0.75rem; min-width: 1.0625rem; height: 1.0625rem; padding: 0 0.25rem;
  background: var(--price); color: #fff; border-radius: 62.4375rem; font-size: 0.75rem; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}

.nav { background: var(--card); border-bottom: 0.0625rem solid var(--line); position: sticky; top: 5.25rem; z-index: 55; }
.nav .wrap { display: flex; align-items: center; gap: 0.25rem; height: 2.875rem; }
.nav .all {
  flex: 0 0 auto; height: 2rem; padding: 0 1rem; border-radius: 62.4375rem;
  background: var(--brand); color: #fff; font-weight: 600; font-size: 0.875rem;
  display: flex; align-items: center; gap: 0.4375rem; margin-right: 0.75rem;
}
.nav a {
  padding: 0 0.875rem; height: 2rem; display: inline-flex; align-items: center;
  font-size: 0.9375rem; color: var(--t2); border-radius: 62.4375rem; transition: .15s;
}
.nav a:hover { color: var(--brand); background: var(--brand-soft); }
.nav a.on { color: var(--brand); background: var(--brand-soft); font-weight: 600; }

/* ---------------- 4. 通用区块 ---------------- */
.sect { padding: 2.875rem 0 0.5rem; }
.sect.tight { padding-top: 1.875rem; }
.sect-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.375rem; gap: 1.25rem; }
.sect-head h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
.sect-head .sub { color: var(--t2); margin-top: 0.4375rem; font-size: 0.9375rem; }
.sect-head .more { color: var(--brand); font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: 0.3125rem; }
.sect-head .more:hover { color: var(--brand-2); }

.crumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--t3); padding: 1.125rem 0 0; }
.crumb a:hover { color: var(--brand); }
.crumb .sl { color: var(--t4); flex: 0 0 auto; }

/* ---------------- 5. 首页 · 首屏 ---------------- */
.hero { background: linear-gradient(150deg, var(--hero-a) 0%, var(--hero-b) 100%); border-bottom: 0.0625rem solid var(--line); }
.hero .wrap {
  display: grid; grid-template-columns: 1.06fr .94fr; gap: 3rem; align-items: center;
  padding-top: 3.375rem; padding-bottom: 3.375rem;
  /* 首屏撑满一屏：扣除上方 topbar(2.125rem=34px) + head(4.875rem=78px)
     + nav(2.875rem=46px) = 9.875rem=158px，打开页面正好一屏看完 hero，
     往下滚才见商品。三个高度都是 rem，跟随根字号等比变化，故此处也用 rem，
     1080P 与 4K 下都能精确撑满一屏。min-height 不封顶，内容超长自动长高，
     不会被裁切。 */
  min-height: calc(100vh - 9.875rem);
}
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; border: 0.0625rem solid var(--brand-line);
  color: var(--brand-2); border-radius: 62.4375rem; padding: 0.375rem 0.875rem; font-size: 0.8125rem; font-weight: 600;
}
.hero h1 { font-size: 2.625rem; line-height: 1.22; margin: 1.25rem 0 0.875rem; letter-spacing: -.02em; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .sub { font-size: 1rem; color: var(--t2); max-width: 32.5rem; }
.hero .cta { display: flex; gap: 0.875rem; margin-top: 1.75rem; flex-wrap: wrap; }
.hero .stats { display: flex; gap: 2.125rem; margin-top: 2.25rem; flex-wrap: wrap; }
.hero .stats b { display: block; font-size: 1.625rem; color: var(--brand-2); letter-spacing: -.02em; }
.hero .stats span { font-size: 0.8125rem; color: var(--t2); }
.hero .shot { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); border: 0.0625rem solid var(--line); background: #fff; }
.hero .shot img { width: 100%; aspect-ratio: 760 / 460; object-fit: cover; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.75rem; padding: 0 1.625rem; border-radius: 62.4375rem; font-weight: 600; font-size: 0.9375rem;
  transition: .16s; white-space: nowrap;
}
.btn.primary { background: var(--brand); color: #fff; box-shadow: 0 0.625rem 1.375rem -0.75rem rgba(var(--brand-rgb), .9); }
.btn.primary:hover { background: var(--brand-2); }
.btn.ghost { background: #fff; color: var(--t1); border: 0.0938rem solid var(--line); }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn.mini { height: 2rem; padding: 0 0.875rem; font-size: 0.875rem; border-radius: 0.5rem; }
.btn.sm { height: 2.375rem; padding: 0 1.125rem; font-size: 0.875rem; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------- 6. 卡片画廊（首页主体 · 照 Elementor 结构） ---------------- */
/* ⭐ 商品图库列数：全大屏统一 5 列（2026-10-03，用户要求「卡片缩小到 2/3」）。
   因为内容区宽度已由 --w 的 rem 上限保证「占视口固定比例」，
   列数再随屏幕变化会破坏卡片比例的一致性 —— 故 1920/2560/3840 一律 5 列，
   靠 rem 等比缩放自然放大。
   实测卡片宽：1920→284px（旧版 434px 的 65.4%，≈ 2/3）、3840→568px，
   占屏比例都是 14.8%，严格等比。 */
.gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.375rem; }

.gcard {
  background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column; transition: .18s; position: relative;
}
.gcard:hover { transform: translateY(-0.1875rem); box-shadow: var(--shadow-h); border-color: var(--brand-line); }

/* ⭐ 2026-10-19 图片优化：产品图 **1:1 完整显示**（object-fit:contain）+ 浅灰渐变底，
   原来是 16/9 + cover ⇒ 方形的产品图被裁掉上下/左右边缘。（与 H5 商品卡口径一致） */
.gcard .thumb { position: relative; display: block; aspect-ratio: 1; overflow: hidden;
  background: linear-gradient(135deg, #F4F6F9, #EAEEF3); }
.gcard .thumb img { width: 100%; height: 100%; object-fit: contain; transition: .35s; padding: 6%; }
.gcard:hover .thumb img { transform: none; }   /* contain 下放大等于二次裁切，去掉 */
.gcard .tagline { position: absolute; left: 0.75rem; top: 0.75rem; display: flex; gap: 0.375rem; flex-wrap: wrap; }
.gcard .tag {
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(0.25rem); color: var(--t1);
  font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.5625rem; border-radius: 0.375rem; line-height: 1.4;
}
.gcard .tag.brand { background: var(--brand); color: #fff; }
.gcard .tag.hot { background: var(--price); color: #fff; }

.gcard .body { padding: 0.9375rem 1rem 1rem; display: flex; flex-direction: column; flex: 1; }
.gcard .line {
  font-size: 0.75rem; color: var(--brand-2); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: 0.4375rem;
}
.gcard h3 { font-size: 1rem; line-height: 1.35; margin-bottom: 0.4375rem; }
.gcard:hover h3 { color: var(--brand-2); }
.gcard h3 .sku { font-size: 0.8125rem; color: var(--t3); font-weight: 600; margin-left: 0.375rem; }
.gcard .desc {
  font-size: 0.875rem; color: var(--t2); line-height: 1.55; margin-bottom: 0.75rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.5rem;
}
.gcard .specs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.875rem; }
.chip {
  font-size: 0.75rem; color: var(--t2); background: var(--bg); border: 0.0625rem solid var(--line);
  padding: 0.1562rem 0.5rem; border-radius: 0.375rem; line-height: 1.5;
}
.chip.grade { color: var(--brand-2); background: var(--brand-soft); border-color: var(--brand-line); font-weight: 600; }
/* 企业内质量标准等级（ERP 物料档案「级别分类」）——**只是个属性标签**，与「产品编号 /
   CAS」同级 ⇒ 刻意**不**做强调。故此处**故意没有** `.chip.qg` 规则：让标签直接继承
   `.chip` 的基础灰底 + 描边样式（与 CAS / 包装数 那两个 chip 完全一致）。
   ⚠️ 勿再改成实心品牌色 —— 曾用 `background: var(--brand-2); color:#fff`，用户反馈「太突出了」。 */

.gcard .foot {
  margin-top: auto; padding-top: 0.8125rem; border-top: 0.0625rem dashed var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.gcard .pr { line-height: 1.2; }
.gcard .pr b { color: var(--price); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.gcard .pr b i { font-size: 0.8125rem; font-style: normal; font-weight: 700; margin-right: 0.0625rem; }
.gcard .pr span { display: block; font-size: 0.75rem; color: var(--t3); margin-top: 0.125rem; }
.gcard .add {
  height: 2.125rem; padding: 0 0.875rem; border-radius: 0.5rem; background: var(--brand-soft); color: var(--brand-2);
  font-weight: 700; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.375rem; transition: .15s;
}
.gcard .add:hover { background: var(--brand); color: #fff; }
.gcard .add.out { background: var(--line-2); color: var(--t3); cursor: not-allowed; }

/* ---------------- 7. 产品线导航块 ---------------- */
.lines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.lcard {
  background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r); padding: 1.125rem 1.125rem 1rem;
  display: flex; flex-direction: column; gap: 0.5rem; transition: .18s; position: relative; overflow: hidden;
}
.lcard:hover { transform: translateY(-0.125rem); box-shadow: var(--shadow-h); border-color: var(--brand-line); }
.lcard .no { font-size: 0.8125rem; font-weight: 800; letter-spacing: .1em; color: var(--t4); }
.lcard b { font-size: 1rem; }
.lcard .en { font-size: 0.75rem; color: var(--t3); letter-spacing: .04em; text-transform: uppercase; }
.lcard p { font-size: 0.8125rem; color: var(--t2); line-height: 1.55; margin-top: 0.125rem; }
.lcard .bar { position: absolute; left: 0; top: 0; width: 0.1875rem; height: 100%; }

/* ---------------- 8. 服务承诺 / 新闻 ---------------- */
.svcs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.125rem; }
.svc { background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r); padding: 1.375rem 1.25rem; }
.svc .ic {
  width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; background: var(--brand-soft); color: var(--brand-2);
  display: grid; place-items: center; margin-bottom: 0.875rem;
}
.svc b { font-size: 1rem; display: block; margin-bottom: 0.4375rem; }
.svc p { font-size: 0.875rem; color: var(--t2); line-height: 1.6; }

.news { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.125rem; }
.ncard {
  background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r); padding: 1.25rem;
  display: flex; flex-direction: column; gap: 0.625rem; transition: .18s;
}
.ncard:hover { border-color: var(--brand-line); box-shadow: var(--shadow); transform: translateY(-0.125rem); }
.ncard .meta { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; color: var(--t3); }
.ncard .meta .t { background: var(--brand-soft); color: var(--brand-2); font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 0.3125rem; }
.ncard b { font-size: 1rem; line-height: 1.45; }
.ncard p { font-size: 0.875rem; color: var(--t2); line-height: 1.6; }

/* ---------------- 9. 双栏通栏 CTA ---------------- */
.cta-band {
  margin: 2.875rem 0 0; border-radius: var(--r-lg); overflow: hidden;
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-2) 62%, var(--ink-2) 100%);
  color: #fff; padding: 2.5rem 2.75rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1.875rem; flex-wrap: wrap;
}
.cta-band h3 { font-size: 1.625rem; margin-bottom: 0.5625rem; }
.cta-band p { color: var(--ink-hi); font-size: 0.9375rem; }
.cta-band .btn.ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); color: #fff; }
.cta-band .btn.ghost:hover { background: #fff; color: var(--brand-2); border-color: #fff; }
.cta-band .btn.primary { background: #fff; color: var(--brand-2); box-shadow: none; }
.cta-band .btn.primary:hover { background: var(--brand-soft); }

/* ---------------- 10. 列表页（左筛选 + 右网格/表格） ---------------- */
.page { padding: 1.375rem 0 3.75rem; }
.cols { display: grid; grid-template-columns: 14.5rem 1fr; gap: 1.5rem; align-items: start; }

/* ⚠️ max-height + overflow-y：侧栏筛选块已增到 4 组（产品线 / 药典级别 /
   企业内质量标准等级 / 库存），整块内容高约 1004px，1080P 也放不下 →
   超过可用高度时由侧栏自己内部滚动，避免 sticky 把底部裁掉且滚不到。
   ⚠️ 基准取 16rem 而不是「吸附后的 11rem」：`.side` 的吸附位是 top:9.125rem，
   但**页面未滚动时**它还在文档流里（top≈14.875rem），若按 11rem 留白，
   首屏会整体超出视口约 62px，第 4 组「库存」第一眼看不到。
   16rem = 14.875rem(初始偏移) + 1.125rem(底边距)，故初始态与吸附态都不裁切。
   两项都是 rem，随根字号等比缩放，4K 下同样成立。 */
.side { background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r); overflow-x: hidden; overflow-y: auto; max-height: calc(100vh - 16rem); position: sticky; top: 9.125rem; }
.side .sb { padding: 1rem 1.125rem; border-bottom: 0.0625rem solid var(--line-2); }
.side .sb:last-child { border-bottom: 0; }
.side h4 { font-size: 0.875rem; margin-bottom: 0.75rem; display: flex; align-items: center; justify-content: space-between; }
.side h4 .rs { font-size: 0.8125rem; color: var(--t3); font-weight: 400; cursor: pointer; }
.side h4 .rs:hover { color: var(--brand); }
.side li { margin-bottom: 0.125rem; }
.side li a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.4375rem 0.625rem; border-radius: 0.5rem; font-size: 0.875rem; color: var(--t2); transition: .14s;
}
.side li a:hover { background: var(--bg); color: var(--t1); }
.side li a.on { background: var(--brand-soft); color: var(--brand-2); font-weight: 600; }
.side li a .n { font-size: 0.8125rem; color: var(--t3); }
/* 企业内质量标准等级：左侧「名称 + 停用提示」，与右侧计数（`.n`）分列两端。
   停用项（ERP `enable=2`，如「GMP级」）**仍可点击筛选**，只加一枚极小灰字 ——
   ⚠️ 勿改成红/黄/品牌色：它只是个状态说明，既不是警示、也不是卖点。 */
.side li a .qgn { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.side li a .qgoff { font-style: normal; font-size: 0.75rem; line-height: 1; white-space: nowrap; color: var(--t3); opacity: .85; flex: 0 0 auto; }
/* ⭐ 等级选项「取不到」与「数据陈旧」两种故障提示（2026-10-04 起不再有兜底副本）。
   ⚠️ 这里是**唯一允许用警示色的地方** —— 它说的是「数据没拿到 / ERP 不可达」，
      是运维线索，不是商品属性标签（属性标签一律灰，见 `.qgn`）。
   ⚠️ 别把它做成"友好空态"：用户要的是「故障看得见、能追查」，
      写成灰字小提示或干脆不显示，就等于把故障藏起来了。 */
.side .sberr, .side .sbstale {
  margin: 0.375rem 0.75rem 0.5rem; padding: 0.5rem 0.625rem;
  border-radius: 0.375rem; font-size: 0.8125rem; line-height: 1.5;
}
/* ⚠️ 色值沿用项目既有错误色（`.pill.r` / `.toast-it.err` = #b91c1c），保持一致，
   不用 color-mix / 未定义变量，避免旧浏览器降级成透明。 */
.side .sberr { color: #b91c1c; background: #fef2f2; border: 0.0625rem solid #f3c7c7; }
.side .sbstale { color: #92400e; background: #fffbeb; border: 0.0625rem solid #f3dfa8; }
.side .sberr b { display: block; margin-bottom: 0.1875rem; }
.side .sberr span, .side .sbstale span { display: block; word-break: break-all; opacity: .9; }
.side .sberr a, .side .sbstale a { display: inline-block; margin-top: 0.3125rem; color: var(--brand-2); text-decoration: underline; }
.side .lg { width: 0.5rem; height: 0.5rem; border-radius: 0.1875rem; flex: 0 0 auto; }

.toolbar {
  background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r);
  padding: 0.75rem 1rem; display: flex; align-items: center; gap: 1rem; margin-bottom: 1.125rem; flex-wrap: wrap;
}
.toolbar .rb { display: flex; gap: 0.25rem; margin-left: auto; background: var(--bg); padding: 0.1875rem; border-radius: 0.5rem; }
.toolbar .rb button { padding: 0.4375rem 0.875rem; min-height: 2rem; border-radius: var(--r-sm); font-size: var(--fs-body); color: var(--t2); display: flex; align-items: center; gap: 0.3125rem; }
.toolbar .rb button.on { background: #fff; color: var(--brand-2); font-weight: 600; box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, .07); }
.toolbar .cnt { font-size: 0.875rem; color: var(--t2); }
.toolbar .cnt b { color: var(--t1); }
.toolbar select {
  height: 2rem; border: 0.0625rem solid var(--line); border-radius: 0.5rem; padding: 0 0.625rem;
  background: #fff; font-size: 0.875rem; outline: none;
}
.fchips { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fchip {
  display: inline-flex; align-items: center; gap: 0.375rem; background: var(--brand-soft);
  color: var(--brand-2); border-radius: 62.4375rem; padding: 0.25rem 0.625rem; font-size: 0.8125rem; font-weight: 600;
}
.fchip i { cursor: pointer; font-style: normal; opacity: .6; font-size: 0.9375rem; }
.fchip i:hover { opacity: 1; }

/* ---------------- 11. 表格体系（吸顶表头 + 等比列宽） ---------------- */
.tblwrap {
  background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r);
  overflow: hidden;
}
.tblscroll { overflow: auto; max-height: 68vh; }
.tbl { table-layout: fixed; width: 100%; font-size: var(--fs-body); }
.tbl th, .tbl td { padding: 0.875rem 1rem; text-align: left; vertical-align: middle; }
.tbl thead th {
  position: sticky; top: 0; z-index: 2; background: #fbfcfd;
  border-bottom: 0.0625rem solid var(--line); font-size: var(--fs-body); font-weight: 700; color: var(--t2);
  letter-spacing: .02em; white-space: nowrap;
}
.tbl tbody tr { border-bottom: 0.0625rem solid var(--line-2); }
.tbl tbody tr:last-child { border-bottom: 0; }
.tbl tbody tr:hover { background: #fafcfb; }
.tbl td { color: var(--t1); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .gname { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.tbl .gname img { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; object-fit: cover; flex: 0 0 auto; }
.tbl .gname .tx { min-width: 0; }
.tbl .gname b { display: block; font-weight: 600; font-size: 0.875rem; }
.tbl .gname span { font-size: 0.8125rem; color: var(--t3); }

.pill { display: inline-flex; align-items: center; gap: 0.3125rem; font-size: 0.8125rem; font-weight: 600; padding: 0.1875rem 0.625rem; border-radius: 62.4375rem; }
.pill.g { background: var(--brand-soft); color: var(--brand-2); }
.pill.r { background: #fef2f2; color: #b91c1c; }
.pill.o { background: #fff7ed; color: #c2410c; }
.pill.b { background: #eff6ff; color: #1d4ed8; }
.pill.n { background: var(--bg); color: var(--t2); }

/* ---------------- 12. 详情页 ---------------- */
.dwrap { display: grid; grid-template-columns: 28.75rem 1fr; gap: 2.5rem; align-items: start; }
.dshot { border: 0.0625rem solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; position: sticky; top: 9.125rem; }
.dshot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.dshot .strip { display: flex; gap: 0.5rem; padding: 0.625rem; border-top: 0.0625rem solid var(--line-2); }
.dshot .strip span { width: 3.5rem; height: 2.625rem; border-radius: 0.375rem; border: 0.0938rem solid var(--line); overflow: hidden; cursor: pointer; transition: .15s; }
.dshot .strip span:hover { border-color: var(--brand-line); }
.dshot .strip span.on { border-color: var(--brand); }
.dshot .strip img { width: 100%; height: 100%; object-fit: cover; }

.dline { font-size: 0.8125rem; color: var(--brand-2); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 0.375rem; }

.dinfo h1 { font-size: 1.625rem; line-height: 1.3; }
.dinfo .sub { color: var(--t2); margin-top: 0.5625rem; font-size: 0.9375rem; }
.dinfo .metarow { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.875rem; }

.dprice {
  margin-top: 1.25rem; background: linear-gradient(120deg, var(--tint-a), var(--tint-b));
  border: 0.0625rem solid var(--brand-line); border-radius: var(--r); padding: 1.125rem 1.25rem;
}
.dprice .lbl { font-size: 0.8125rem; color: var(--t2); }
.dprice .big { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.25rem; }
.dprice .big b { color: var(--price); font-size: 2.125rem; font-weight: 800; letter-spacing: -.03em; }
.dprice .big b i { font-size: 1.125rem; font-style: normal; font-weight: 700; }
.dprice .big span { font-size: 0.875rem; color: var(--t2); }
.dprice .note { font-size: 0.8125rem; color: var(--t2); margin-top: 0.5rem; display: flex; gap: 0.875rem; flex-wrap: wrap; }

.specpick { margin-top: 1.375rem; }
.sp { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-top: 0.625rem; }
.sp button {
  border: 0.0938rem solid var(--line); background: #fff; border-radius: 0.625rem; padding: 0.625rem 1.125rem;
  text-align: left; transition: .15s; min-width: 7.375rem;
}
.sp button:hover { border-color: var(--brand-line); }
.sp button.on { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 0.1875rem rgba(var(--brand-rgb), .1); }
.sp button b { display: block; font-size: 0.9375rem; }
.sp button span { font-size: 0.8125rem; color: var(--t2); }

.qtyrow { display: flex; align-items: center; gap: 1rem; margin-top: 1.375rem; flex-wrap: wrap; }
.stepper { display: flex; border: 0.0938rem solid var(--line); border-radius: 0.625rem; overflow: hidden; background: #fff; }
.stepper button { width: 2.375rem; height: 2.5rem; font-size: 1.125rem; color: var(--t2); }
.stepper button:hover { background: var(--bg); color: var(--brand); }
.stepper input { width: 3.875rem; height: 2.5rem; text-align: center; border: 0; border-left: 0.0938rem solid var(--line); border-right: 0.0938rem solid var(--line); outline: none; }
.buybar { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.buybar .btn { height: 3.125rem; padding: 0 2.5rem; font-size: 1rem; }

.dother { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; margin-top: 1.25rem; }
.dother div { background: #fff; border: 0.0625rem solid var(--line); border-radius: 0.625rem; padding: 0.75rem 0.875rem; font-size: 0.8125rem; color: var(--t2); }
.dother div b { display: block; color: var(--t1); font-size: 0.875rem; margin-bottom: 0.1875rem; }

/* 价格明细（后台「商品详情页」→ 无税单价 / 税额；含税单价由上方主价承担） */
.ddetail-cfg { margin-top: 0.875rem; background: #fff; border: 0.0625rem solid var(--line); border-radius: 0.625rem; padding: 0.75rem 0.875rem; }
.ddetail-h { font-size: 0.875rem; font-weight: 600; color: var(--t1); margin-bottom: 0.5rem; }
.ddetail-cfg .kv { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; padding: 0.3125rem 0; color: var(--t2); }
.ddetail-cfg .kv + .kv { border-top: 0.0625rem dashed var(--line); }
.ddetail-cfg .kv .v { color: var(--t1); font-weight: 600; }

/* 装修「内容带」：分类/列表页顶部、商品详情页底部（见 pc-app.js::decorBandHtml） */
.dc-band { margin-bottom: 2rem; }
.dc-band[data-band="detail"] { margin: 2.75rem 0 0; }
.dc-band[data-band="detail"] .dc-page { background: transparent !important; }

/* 详情 tab */
.tabs { margin-top: 2.75rem; background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r); overflow: hidden; }
.tabhead { display: flex; gap: 0.125rem; border-bottom: 0.0625rem solid var(--line); padding: 0 0.5rem; background: #fbfcfd; }
.tabhead button {
  padding: 0.9375rem 1.375rem; font-size: 0.9375rem; color: var(--t2); position: relative; font-weight: 500;
}
.tabhead button:hover { color: var(--brand); }
.tabhead button.on { color: var(--brand-2); font-weight: 700; }
.tabhead button.on::after {
  content: ''; position: absolute; left: 0.875rem; right: 0.875rem; bottom: -0.0625rem; height: 0.1562rem;
  background: var(--brand); border-radius: 0.125rem;
}
.tabbody { padding: 1.5rem 1.625rem 1.75rem; }
.tabbody h4 { font-size: 1rem; margin: 1.25rem 0 0.625rem; }
.tabbody h4:first-child { margin-top: 0; }
.tabbody p { color: var(--t2); font-size: 0.875rem; line-height: 1.8; }

.kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 0.0625rem solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.kv .r { display: flex; border-bottom: 0.0625rem solid var(--line-2); }
.kv .r:nth-child(odd) { border-right: 0.0625rem solid var(--line-2); }
.kv .k { flex: 0 0 8.25rem; background: #fbfcfd; padding: 0.6875rem 0.875rem; font-size: 0.875rem; color: var(--t2); border-right: 0.0625rem solid var(--line-2); }
.kv .v { flex: 1; padding: 0.6875rem 0.875rem; font-size: 0.875rem; min-width: 0; word-break: break-all; }

.doclist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.625rem; }
.docrow {
  display: flex; align-items: center; gap: 0.75rem; border: 0.0625rem solid var(--line); border-radius: 0.625rem;
  padding: 0.75rem 0.875rem; transition: .15s; background: #fff;
}
.docrow:hover { border-color: var(--brand-line); background: var(--brand-soft); }
.docrow .ic { width: 2.125rem; height: 2.125rem; border-radius: 0.5rem; background: var(--brand-soft); color: var(--brand-2); display: grid; place-items: center; flex: 0 0 auto; }
.docrow b { font-size: 0.875rem; display: block; }
.docrow span { font-size: 0.8125rem; color: var(--t3); }
.docrow .dl { margin-left: auto; color: var(--brand); font-size: 0.875rem; font-weight: 600; }

/* ---------------- 13. 购物车 / 结算 ---------------- */
.cartbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r);
  padding: 0.875rem 1.25rem; margin-top: 0.875rem; position: sticky; bottom: 0; z-index: 30;
  box-shadow: 0 -0.125rem 1rem -0.5rem rgba(16, 24, 40, .18);
}
.cartbar .l { display: flex; align-items: center; gap: 1.375rem; font-size: 0.875rem; color: var(--t2); flex-wrap: wrap; }
.cartbar .sum { font-size: 0.875rem; color: var(--t2); }
.cartbar .sum b { color: var(--price); font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; margin-left: 0.25rem; }
.cartbar .sum b i { font-size: 0.9375rem; font-style: normal; }
.ck { display: inline-flex; align-items: center; gap: 0.4375rem; cursor: pointer; user-select: none; }
.ck input { width: 1rem; height: 1rem; accent-color: var(--brand); cursor: pointer; }

.ckbox {
  background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r);
  padding: 1.125rem 1.25rem; margin-bottom: 1rem;
}
.ckbox h4 { font-size: 1rem; margin-bottom: 0.875rem; display: flex; align-items: center; gap: 0.5rem; }
.ckbox h4::before { content: ''; width: 0.1875rem; height: 0.875rem; background: var(--brand); border-radius: 0.125rem; }
/* ⚠️ 1fr 的隐式 min-width:auto 会让 input 的固有宽度撑破栅格 → 必须写 minmax(0,1fr) */
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4) 1.25rem; }
.fld { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.fld label { font-size: 0.8125rem; color: var(--t2); }
.fld input, .fld select, .fld textarea {
  height: 2.5rem; border: 0.0625rem solid var(--line); border-radius: 0.5rem; padding: 0 0.75rem;
  outline: none; background: #fff; transition: .15s;
  width: 100%; min-width: 0;
}
.fld textarea { height: 5.25rem; padding: 0.625rem 0.75rem; resize: vertical; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 0.1875rem var(--brand-soft); }
/* 收货地址：省/市/区三级联动（grid + minmax(0,1fr) 防被内容撑破） */
.addr-region { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.addr-region select { padding: 0 0.5rem; }
.cklayout { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.375rem; align-items: start; }
.ckaside { background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r); padding: 1.25rem; position: sticky; top: 9.125rem; }
/* ⭐ 2026-11-02 整页协调：侧栏标题原来 15px 且无竖条，与左栏 .ckbox 的 16px + 品牌竖条两套风格打架
   ⇒ 统一成同一规格（左右两栏标题一眼同类） */
.ckaside > h4 { font-size: 1rem; margin-bottom: 0.875rem; display: flex; align-items: center; gap: 0.5rem; }
.ckaside > h4::before { content: ''; width: 0.1875rem; height: 0.875rem; background: var(--brand); border-radius: 0.125rem; }
.ckaside .ln { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--t2); padding: 0.5625rem 0; }
.ckaside .ln.total { border-top: 0.0625rem dashed var(--line); margin-top: 0.5rem; padding-top: 0.9375rem; font-size: 1rem; color: var(--t1); font-weight: 600; }
.ckaside .ln.total b { color: var(--price); font-size: 1.5rem; font-weight: 800; }
.ckaside .ln.total b i { font-size: 0.9375rem; font-style: normal; }

/* ⭐⭐ 2026-11-02 结算页「试剂级使用声明」（提交前置勾选）
   设计意图：原来是个灰底提示气泡，夹在「合计」和「提交」之间，层级模糊、像系统提示。
   改为**与订单摘要同一节奏的条款区**：虚线分隔 + 无底色 + 13px 正文 + 品牌色勾选框，
   勾选后才变深色（已确认），未勾选点提交则整块标红 —— 结构上成为「金额 → 条款 → 操作」三段。 */
.ck-agree {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin-top: 0.875rem; padding-top: 0.875rem;
  border-top: 0.0625rem dashed var(--line);
  cursor: pointer; user-select: none;
}
.ck-agree input {
  flex: none; width: 0.9375rem; height: 0.9375rem; margin: 0.15625rem 0 0;
  accent-color: var(--brand); cursor: pointer;
}
.ck-agree span { font-size: 0.78125rem; line-height: 1.66; color: var(--t2); transition: color .15s; }
/* ⚠️ 12.5px 是算出来的：侧栏内容宽 296 − 勾选框 15 − gap 8 = 273px，
   「我已阅读并确认：试剂类产品，仅供科研使用；」22 字在 13px 下差 6px 放不下（会拆「使/用」），
   12.5px 刚好一行；再长就靠 nowrap + 自然折行兜底。 */
.ck-agree b { color: var(--t1); font-weight: 600; }
.ck-agree:hover span { color: var(--t1); }
/* 已确认：文字转深色（勾选框自带品牌色，不再额外上底色） */
.ck-agree.on span, .ck-agree.on b { color: #1D2129; }
/* 未勾选就点提交：只标**分隔线 + 勾选框**（整段文字变红太吵、显廉价）
   ⇒ 红线指出位置、红圈指出动作，配合 toast 足够定位，仍保持专业感 */
.ck-agree.err { border-top-color: #F53F3F; }
.ck-agree.err input { outline: 0.125rem solid rgba(245, 63, 63, .4); outline-offset: 0.125rem; border-radius: 0.1875rem; }
/* 提交按钮与条款的呼吸：条款读完再动手，间距略大于其他行距 */
.ckaside .ck-agree + .btn { margin-top: 1.25rem; }

/* ⭐ 2026-11-03 「我的订单 / 我的售后」Tab + 售后工单卡片 */
.mytabs { display: flex; gap: 0.25rem; border-bottom: 0.0625rem solid var(--line); margin: 1rem 0 1.25rem; }
.mytabs a { padding: 0.625rem 1.125rem; font-size: 0.9375rem; color: var(--t2);
  border-bottom: 0.125rem solid transparent; margin-bottom: -0.0625rem; text-decoration: none; }
.mytabs a:hover { color: var(--brand); }
.mytabs a.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

.amc { background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r);
  padding: 1.125rem 1.25rem; margin-bottom: 0.875rem; }
.amc-top { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; }
.amc-no { font-size: 0.9375rem; font-weight: 600; color: var(--t1); letter-spacing: .01em; }
.amc-time { margin-left: auto; font-size: 0.75rem; color: var(--t3); }
.amc-meta { display: flex; flex-wrap: wrap; gap: 0.375rem 1.5rem; font-size: 0.8125rem; color: var(--t2); margin-bottom: 0.625rem; }
.amc-desc { font-size: 0.8125rem; color: var(--t1); line-height: 1.7;
  background: #FAFBFC; border-radius: 0.375rem; padding: 0.625rem 0.75rem; }
/* 结构化处理结果：与后台「处理结果」同色系（橙 = 已处理结论） */
.amc-res { margin-top: 0.75rem; border: 0.0625rem solid #FFE0A3; background: #FFF7E6;
  border-radius: 0.5rem; padding: 0.75rem 0.875rem; }
.amc-res-h { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.amc-badge { font-size: 0.75rem; font-weight: 600; color: #fff; background: #D46B08;
  border-radius: 0.25rem; padding: 0.0625rem 0.4375rem; letter-spacing: .02em; }
.amc-qty { font-size: 0.9375rem; font-weight: 700; color: #8A4B08; }
.amc-res-b { font-size: 0.8125rem; color: #AD6800; line-height: 1.65; margin-top: 0.25rem; }
.amc-note { margin-top: 0.75rem; font-size: 0.8125rem; color: #0E9F6E; background: #E8F8F1;
  border-radius: 0.375rem; padding: 0.5rem 0.75rem; line-height: 1.65; }
.amc-tl { margin-top: 0.875rem; padding-top: 0.75rem; border-top: 0.0625rem dashed var(--line); }
.amc-tl-i { display: flex; gap: 0.5rem; font-size: 0.75rem; color: var(--t2); line-height: 1.9; }
.amc-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--brand); margin-top: 0.5rem; flex: none; }
.amc-ft { margin-top: 0.875rem; display: flex; justify-content: flex-end; }

/* ---------------- 14. 卡片栅格（订单/对账/发票） ---------------- */
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-4); }
/* 2026-11-03 P1：统计卡统一 96px 高、数字 28px */
.stat { background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r); padding: var(--sp-4); min-height: 6rem; display: flex; flex-direction: column; justify-content: center; }
.stat .k { font-size: var(--fs-note); color: var(--t2); display: flex; align-items: center; gap: 0.4375rem; }
.stat .v { font-size: var(--fs-num); font-weight: 800; letter-spacing: -.02em; margin-top: 0.375rem; line-height: 1.2; }
.stat .v i { font-size: 0.9375rem; font-style: normal; font-weight: 700; }
.stat .d { font-size: var(--fs-note); color: var(--t3); margin-top: 0.25rem; }
.stat.brand { background: linear-gradient(120deg, var(--brand), var(--brand-2)); border-color: transparent; color: #fff; }
.stat.brand .k, .stat.brand .d { color: rgba(255, 255, 255, .82); }
.stat.brand .v { color: #fff; }

/* 对账中心：筛选、账期明细与异常提示 */
.statrow.finance-stats { grid-template-columns: repeat(3, 1fr); }
.fin-filters { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; margin: 0 0 1rem; }
.fin-filters select, .fin-filters input {
  height: 2.25rem; border: .0625rem solid var(--line); border-radius: .5rem;
  background: var(--card); color: var(--t1); padding: 0 .75rem; font-size: var(--fs-body);
}
.fin-filters input { width: 15rem; }
.fin-updated { margin-left: auto; color: var(--t3); font-size: var(--fs-note); }
.fin-listbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .625rem; color: var(--t3); font-size: var(--fs-note); }
.fin-warning { display: flex; align-items: center; gap: .75rem; margin: 0 0 .875rem; padding: .625rem .875rem; background: #fffbeb; border: .0625rem solid #fde68a; color: #92400e; border-radius: .5rem; font-size: .8125rem; }
.fin-statement-table { min-width: 68rem; }
.fin-payment-table { min-width: 72rem; }
.fin-detail-row > td { padding: 0; background: #fafcfb; }
.fin-detail { padding: 1rem; }
.fin-detail-head { margin-bottom: .625rem; color: var(--t2); font-size: var(--fs-note); }
.fin-subtbl { background: var(--card); border: .0625rem solid var(--line); }
.fin-subtbl th, .fin-subtbl td { padding: .625rem .75rem; }
.fin-payref { font-size: var(--fs-note); line-height: 1.7; }
.fin-issue { display: inline-block; margin-top: .25rem; color: #c2410c; font-size: var(--fs-note); line-height: 1.55; }
@media (max-width: 60rem) {
  .statrow.finance-stats { grid-template-columns: 1fr; }
  .fin-updated { flex: 0 0 100%; margin-left: 0; }
}

/* 步骤条 */
.steps { display: flex; align-items: center; gap: 0; margin: 0.25rem 0 1.25rem; }
.steps .st { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: var(--t3); }
.steps .st .dot {
  width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--line-2); color: var(--t3);
  display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700;
}
.steps .st.on .dot { background: var(--brand); color: #fff; }
.steps .st.on { color: var(--t1); font-weight: 600; }
.steps .st.dn .dot { background: var(--brand-soft); color: var(--brand-2); }
.steps .ln { flex: 1; height: 0.0938rem; background: var(--line); margin: 0 0.875rem; }

/* ---------------- 15. 我的 / 登录 ---------------- */
.acct { display: grid; grid-template-columns: 16.25rem 1fr; gap: 1.5rem; align-items: start; }
.acct .aside { background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r); overflow: hidden; position: sticky; top: 9.125rem; }
.acct .who { padding: 1.375rem 1.25rem; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; }
.acct .who .av {
  width: 2.875rem; height: 2.875rem; border-radius: 50%; background: rgba(255, 255, 255, .22);
  display: grid; place-items: center; font-size: 1.125rem; font-weight: 700; margin-bottom: 0.6875rem;
}
.acct .who b { font-size: 1rem; display: block; }
.acct .who span { font-size: 0.8125rem; color: rgba(255, 255, 255, .82); }
.acct .aside li a { display: block; padding: 0.75rem 1.25rem; font-size: 0.875rem; color: var(--t2); border-left: 0.1875rem solid transparent; }
.acct .aside li a:hover { background: var(--bg); color: var(--t1); }
.acct .aside li a.on { background: var(--brand-soft); color: var(--brand-2); font-weight: 600; border-left-color: var(--brand); }

.logincard {
  max-width: 28.75rem; margin: 2.875rem auto 3.75rem; background: var(--card);
  border: 0.0625rem solid var(--line); border-radius: var(--r-lg); padding: 2.25rem 2.375rem; box-shadow: var(--shadow);
}
.logincard h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
.logincard .sub { color: var(--t2); font-size: 0.875rem; margin-bottom: 1.5rem; }
.logincard .tabsmini { display: flex; gap: 0.25rem; background: var(--bg); border-radius: 0.625rem; padding: 0.25rem; margin-bottom: 1.375rem; }
.logincard .tabsmini button { flex: 1; height: 2.25rem; border-radius: 0.4375rem; font-size: 0.875rem; color: var(--t2); font-weight: 600; }
.logincard .tabsmini button.on { background: #fff; color: var(--brand-2); box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, .07); }
.logincard .fld { margin-bottom: 0.875rem; }
.logincard .tip { font-size: 0.8125rem; color: var(--t3); margin-top: 1rem; text-align: center; }
.notice-mock {
  background: #fffbeb; border: 0.0625rem solid #fde68a; color: #92400e; border-radius: 0.625rem;
  padding: 0.6875rem 0.875rem; font-size: 0.8125rem; margin-bottom: 1.25rem;
}

/* ---------------- 16. 空态 / 加载 ---------------- */
.empty { text-align: center; padding: 4.375rem 1.25rem; color: var(--t3); }
.empty .ic { width: 4rem; height: 4rem; margin: 0 auto 1rem; border-radius: 50%; background: var(--line-2); display: grid; place-items: center; color: var(--t4); }
.empty b { display: block; font-size: 1rem; color: var(--t2); margin-bottom: 0.4375rem; }
.empty p { font-size: 0.875rem; margin-bottom: 1.125rem; }

/* ---------------- 17. 页脚 ----------------
   ⭐ 2026-10-03：由「深色墨色底」改为「浅色底」，与顶部白色表头呼应。
   原实现用 `--ink`（深棕/深绿/深蓝，各主题一套），视觉上是一条很重的深色带；
   用户反馈顶白底黑不对称（页脚字重、色重，与头部割裂）。
   现统一走浅色：底 `--card`（白）+ 顶部一根 `--line` 细分割线，
   标题用 `--t1`、正文 `--t2`、徽标用品牌浅底 `--brand-bg` —— 全部跟随主题变量，
   切主题自动联动，不再有第二种「深色」语言。 */
.pfoot { background: var(--card); color: var(--t2); margin-top: 4rem; padding: 2.875rem 0 0; border-top: 0.0625rem solid var(--line); }
/* 2026-11-04 P1：4 列 → 3 列（品牌 / 产品分类 / 帮助与支持），分类列改为 chips 横排 */
.pfoot .top { display: grid; grid-template-columns: 1.15fr 2.3fr 0.85fr; gap: 2.25rem; padding-bottom: 2.25rem; }
.pf-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pf-cats a { display: inline-block; padding: 0.3125rem 0.625rem; border: 0.0625rem solid var(--line); border-radius: var(--r-sm); font-size: 0.8125rem; color: var(--t2); background: var(--bg); }
.pf-cats a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-bg, #FFF3EA); }
.pfoot h5 { color: var(--t1); font-size: 0.9375rem; margin-bottom: 0.9375rem; }
.pfoot li { margin-bottom: 0.5625rem; font-size: 0.875rem; }
.pfoot a { color: var(--t2); }
.pfoot a:hover { color: var(--brand); }
.pfoot .about .lg { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; }
.pfoot .about .lg .mark { width: 2.125rem; height: 2.125rem; border-radius: 0.5625rem; background: linear-gradient(135deg, var(--brand), var(--brand-2)); display: grid; place-items: center; color: #fff; font-weight: 800; }
.pfoot .about .lg b { color: var(--t1); font-size: 1rem; }
.pfoot .about p { font-size: 0.8125rem; line-height: 1.75; color: var(--t2); }
.pfoot .tel { color: var(--brand); font-size: 1.25rem; font-weight: 700; margin: 0.875rem 0 0.25rem; letter-spacing: .01em; }
.pfoot .bar {
  border-top: 0.0625rem solid var(--line); padding: 1rem 0; font-size: 0.8125rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--t3);
}
.pfoot .badge { display: inline-block; background: var(--brand-bg, #f5f7f9); border: 0.0625rem solid var(--brand-line, var(--line)); color: var(--brand-text, var(--t2)); border-radius: 0.375rem; padding: 0.1875rem 0.5625rem; font-size: 0.75rem; margin-right: 0.4375rem; margin-bottom: 0.375rem; }

/* ---------------- 18. Toast / Modal ---------------- */
#toast {
  position: fixed; left: 50%; top: 1.375rem; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: 0.5rem; align-items: center; pointer-events: none;
}
.toast-it {
  background: #16181d; color: #fff; border-radius: 0.625rem; padding: 0.6875rem 1.25rem; font-size: 0.875rem;
  box-shadow: 0 0.75rem 1.875rem -0.625rem rgba(0, 0, 0, .5); display: flex; align-items: center; gap: 0.5625rem;
  animation: tin .24s ease-out;
}
.toast-it.ok { background: var(--brand-2); }
.toast-it.err { background: #b91c1c; }
@keyframes tin { from { opacity: 0; transform: translateY(-0.625rem); } to { opacity: 1; transform: none; } }

.mask {
  position: fixed; inset: 0; background: rgba(16, 24, 40, .5); z-index: 150;
  display: grid; place-items: center; padding: 1.5rem; animation: fin .16s ease-out;
}
@keyframes fin { from { opacity: 0; } to { opacity: 1; } }
/* ⭐ 2026-11-03 弹窗高度兜底：内容高于视口时（如「申请售后」4 个选项 + 文本域），
   原来会整体溢出 ⇒ 标题和底部按钮被挤出屏幕。改为「头/脚固定 + 中间滚动」。 */
.modal {
  background: #fff; border-radius: var(--r-lg); width: 100%; max-width: 30rem;
  overflow: hidden; box-shadow: 0 1.875rem 4.375rem -1.25rem rgba(0, 0, 0, .45);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 3rem);
}
.modal .mh, .modal .mf { flex: none; }
.modal .mb { flex: 1 1 auto; overflow-y: auto; }
/* 宽屏弹窗（PC 端订单详情 / 付款 / 付款单等 16:9 场景） */
.modal.wide { max-width: min(60rem, 94vw); }
.modal.wide .mb { padding: 1.5rem 1.75rem; }
.modal.wide .kv { grid-template-columns: repeat(3, 1fr); }
.modal.wide .kv .r { border-right: 0; }
.modal.wide .kv .r:nth-child(3n+1), .modal.wide .kv .r:nth-child(3n+2) { border-right: 0.0625rem solid var(--line-2); }
.modal.wide .kv .r:nth-last-child(-n+3) { border-bottom: 0; }
.modal.wide .kv .r.span3 { grid-column: span 3; border-right: 0 !important; }
.modal.wide .tblscroll { max-height: 20rem; }
.modal .mh { padding: 1.25rem 1.5rem; border-bottom: 0.0625rem solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.modal .mh b { font-size: 1rem; }
.modal .mh .x { font-size: 1.5rem; color: var(--t3); line-height: 1; }
.modal .mh .x:hover { color: var(--t1); }
.modal .mb { padding: 1.375rem 1.5rem; }
.modal .mf { padding: 1rem 1.5rem; border-top: 0.0625rem solid var(--line); display: flex; justify-content: flex-end; gap: 0.625rem; background: #fbfcfd; }

/* ⭐⭐ 2026-11-03 「申请售后」弹窗表单（用户要求按整体样式重排）
   原来选项写在 .fld 里 ⇒ 命中 `.fld input{width:100%;height:2.5rem;border}`，
   单选框被撑成整行方块、文字被挤到最右。改用独立的 .am-* 一套，与全站表单/提示条同语言。 */
.am-head {
  display: flex; justify-content: space-between; align-items: center;
  background: #F7F8FA; border-radius: 0.5rem; padding: 0.625rem 0.75rem;
  font-size: 0.8125rem; margin-bottom: 1rem;
}
.am-head span { color: var(--t2); }
.am-head b { font-size: 0.875rem; color: var(--t1); letter-spacing: .02em; }

.am-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.am-tt { font-size: 0.8125rem; color: var(--t2); margin-bottom: 0.125rem; }
.am-opt {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 2.625rem; padding: 0 0.875rem;
  border: 0.0625rem solid var(--line); border-radius: 0.5rem;
  cursor: pointer; font-size: 0.8125rem; color: var(--t1); background: #fff;
  transition: border-color .15s, background .15s;
}
.am-opt:hover { border-color: var(--brand); }
.am-opt input {
  flex: none; width: 1rem; height: 1rem; margin: 0; padding: 0; border: 0;
  accent-color: var(--brand); cursor: pointer;
}
.am-opt.on { border-color: var(--brand); background: var(--brand-soft); font-weight: 600; }

/* 底部说明与详情页「ⓘ 售后提示」同一视觉语言 */
.am-note {
  display: flex; gap: 0.375rem; align-items: flex-start; margin-top: 0.875rem;
  background: #FAFBFC; border-radius: 0.375rem; padding: 0.625rem 0.75rem;
  font-size: 0.75rem; color: var(--t3); line-height: 1.6;
}
.am-note i { font-style: normal; flex: none; }

/* ---------------- 19. 响应式 ---------------- */
@media (max-width: 1380px) {
  .wrap { padding: 0 1.25rem; }
  .hero h1 { font-size: 2.125rem; }
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .lines, .svcs, .news { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1180px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .lines { grid-template-columns: repeat(4, 1fr); }
  .svcs, .news { grid-template-columns: repeat(2, 1fr); }
  .cols { grid-template-columns: 12.5rem 1fr; }
  .dwrap { grid-template-columns: 23.75rem 1fr; gap: 1.75rem; }
  .cklayout { grid-template-columns: 1fr 18.75rem; }
  .hero .wrap { gap: 2rem; }
  .hero h1 { font-size: 2.125rem; }
  .head .wrap { gap: 1.25rem; }
}
.narrow-tip { display: none; }   /* 必须在媒体查询之前声明，否则会覆盖 1023px 断点 */

/* 大屏断点只调「列数」—— 字号/间距/尺寸已由 rem 跟随根字号等比缩放，
   此处若再写 font-size 会与 rem 缩放「叠加放大」（如 4K 下 h1 会到 124px
   而非等比的 84px），破坏用户要求的「严格同比例」。
   ⭐ 2026-10-03 改：商品图库列数不再随屏幕递增（旧版 2K→6 列、4K→7 列），
      改为全大屏统一 5 列 —— 内容区已由 --w 的 rem 上限固定占视口 87.5%，
      列数再变会让卡片忽大忽小。统一 5 列后 1920/2560/3840 三档卡片
      占屏比例都是 16.1%，严格等比。
      仅保留「八大产品线正好一行」这一条真正需要随屏变宽的规则。 */
@media (min-width: 2560px) {
  .lines { grid-template-columns: repeat(8, 1fr); }   /* 八大产品线正好一行 */
}

/* ---------------- 20. 装修组件（PC 端渲染后台「店铺装修」的配置） ----------------
   前缀说明：
     .dcl-*  装修预览页骨架（这是 PC 端的一个调试/验收页面）
     .dc-*   装修组件本体，由 pc-comps.js 输出
   配色约定：组件内颜色一律走变量（--brand / --brand-2 / --brand-soft /
   --brand-line / --price），这些变量由 pc-app.js 的 decorStyleVars() 挂在
   .dc-page 容器上 —— 装修配色只影响预览区，不污染站点三主题。
   ⚠️ 本段必须在 @media (max-width:1023px) 之前声明（项目铁律）
   ------------------------------------------------------------------ */

/* 20.1 装修预览页骨架 */
.dcl { padding: 1.625rem 0 3.75rem; }
.dcl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.125rem; }
.dcl-head h1 { font-size: 1.625rem; letter-spacing: -.02em; }
.dcl-head p { margin-top: 0.5rem; color: var(--t2); font-size: 0.875rem; line-height: 1.75; max-width: 48.75rem; }
.dcl-l { min-width: 0; }
.dcl-r { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; flex: 0 0 auto; }
.dcl-badge {
  background: var(--card); border: 0.0625rem solid var(--line); border-radius: 62.4375rem;
  padding: 0.3125rem 0.75rem; font-size: 0.8125rem; color: var(--t2); white-space: nowrap;
}
.dcl-empty {
  background: var(--card); border: 0.0625rem dashed var(--line); border-radius: var(--r-lg);
  padding: 3.375rem 1.5rem; text-align: center; color: var(--t2); font-size: 0.9375rem;
}
.dcl-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.125rem; flex-wrap: wrap; margin-bottom: 0.875rem; }
.dcl-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dcl-tab {
  display: inline-flex; align-items: center; gap: 0.4375rem; padding: 0.5rem 1rem;
  background: var(--card); border: 0.0625rem solid var(--line); border-radius: 62.4375rem;
  font-size: 0.875rem; color: var(--t2); transition: .15s;
}
.dcl-tab:hover { border-color: var(--brand-line); color: var(--t1); }
.dcl-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 0.375rem 1rem -0.5rem rgba(var(--brand-rgb), .85); }
.dcl-tab em { font-style: normal; font-size: 0.75rem; background: rgba(0, 0, 0, .06); border-radius: 62.4375rem; padding: 0.0625rem 0.4375rem; }
.dcl-tab.on em { background: rgba(255, 255, 255, .26); }
.dcl-legend { font-size: 0.875rem; color: var(--t2); }
.dcl-legend b { color: var(--t1); }
.dcl-legend b.warn { color: var(--warn); }

.dcl-note {
  background: #fffbeb; border: 0.0625rem solid #fde68a; color: #92400e;
  border-radius: var(--r); padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.75; margin-bottom: 1rem;
}
.dcl-note b { color: #78350f; }
.dcl-note code {
  background: rgba(120, 53, 15, .1); border-radius: 0.3125rem; padding: 0.0625rem 0.375rem;
  font-family: "SF Mono", Consolas, "Liberation Mono", monospace; font-size: 0.8125rem;
}

/* 模拟浏览器窗口的画布 */
.dcl-stage { background: #fff; border: 0.0625rem solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.dcl-stage-bar { height: 2.5rem; background: #f2f4f7; border-bottom: 0.0625rem solid var(--line); display: flex; align-items: center; gap: 0.4375rem; padding: 0 1rem; }
.dcl-stage-bar i { width: 0.6875rem; height: 0.6875rem; border-radius: 50%; }
.dcl-stage-bar i:nth-child(1) { background: #ff5f57; }
.dcl-stage-bar i:nth-child(2) { background: #febc2e; }
.dcl-stage-bar i:nth-child(3) { background: #28c840; }
.dcl-stage-bar span { margin-left: 0.625rem; font-size: 0.8125rem; color: var(--t3); }

/* 组件处理清单 */
.dcl-rep { margin-top: 1.375rem; background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r-lg); padding: 1.25rem 1.375rem 0.5rem; }
.dcl-rep h3 { font-size: 1rem; }
.dcl-rep > p { color: var(--t2); font-size: 0.875rem; margin: 0.375rem 0 0.875rem; }
.dcl-rep th {
  text-align: left; font-weight: 600; font-size: 0.8125rem; color: var(--t2);
  padding: 0.5625rem 0.625rem; background: var(--line-2); border-bottom: 0.0625rem solid var(--line);
}
.dcl-rep td { padding: 0.5625rem 0.625rem; font-size: 0.875rem; color: var(--t2); border-bottom: 0.0625rem solid var(--line-2); vertical-align: top; }
.dcl-rep tr:last-child td { border-bottom: 0; }
.dcl-rep code {
  font-family: "SF Mono", Consolas, "Liberation Mono", monospace; font-size: 0.8125rem;
  color: var(--t1); background: var(--line-2); border-radius: 0.3125rem; padding: 0.0625rem 0.375rem;
}
.dcl-st { display: inline-block; border-radius: 0.375rem; padding: 0.125rem 0.5625rem; font-size: 0.8125rem; white-space: nowrap; }
.dcl-st.st-rendered { background: var(--brand-soft); color: var(--brand-2); }
.dcl-st.st-global { background: #eef2f6; color: #5a6069; }
.dcl-st.st-unknown { background: #fef3c7; color: #92400e; }
.dcl-st.st-empty { background: #f4f5f7; color: var(--t3); }

/* 20.2 装修组件容器
   —— 组件由 pc-comps.js 逐个套在 <section class="dc-block"> 里
   ⭐ 宽度策略：「背景全宽 + 内容限宽」。
      区块背景铺满屏幕（不显得空），内容另设可读上限 —— 否则 1920 屏下
      列表/导航会被拉成「面条」（实测菜单行宽 1620px 时观感很差）。
      三档上限：--dc-wide(网格类) / --dc-mid(导轨类) / --dc-narrow(列表类) */
.dc-page {
  overflow: hidden;
  --dc-wide: 100%;
  /* --dc-mid / --dc-narrow 供「导轨类」「列表类」组件限宽。
     ⭐ 2026-10-03 改：--dc-mid 与主站 --w 用同一口径（min(100%, 97.5rem)），
     即内容区占视口 81.25%、两侧各留 9.375%，保证「装修渲染出的页面」与
     「内置设计稿」的留白完全一致 —— 后台调什么都不该让装修版变宽。
     旧值是 min(100%, 4400px)，在 1920 下等于铺满，比主站留白小得多。
     --dc-narrow 是刻意的窄容器（分类菜单、页脚居中块），用 rem 跟随根字号
     等比缩放，但保持固定的视觉比例。各组件外层均有 1.5rem padding 保底留白。 */
  --dc-mid: min(100%, 97.5rem);
  --dc-narrow: 47.5rem;
}
@media (min-width: 1800px) {
  .dc-page { --dc-narrow: 51.25rem; }
}
.dc-block { display: block; }

/* 20.2.1 首屏主视觉（装修组件 · 矢量「分子微观世界」插画）
   —— 观感与内置设计稿的 .hero 对齐，但用独立 .dc-hero 命名空间，原因有二：
      ① 后台画布抽取样式时只认 .dc-* 规则，用 .hero 会抽不到（后台画布就没版式）；
      ② 不与站点通用 .wrap / .btn 耦合 —— 那两类是全站共享的，装修组件不该依赖它们。
   ⭐ 插画由 pc-comps.js 调 mock.js 的 heroArt() 现算（纯 SVG）：
      4K/8K 放大不糊、跟随主题色即时变色、零网络请求。
   ⭐ 高度与内置 hero 一致：撑满一屏（扣除 topbar+head+nav 共 9.875rem），
      让 PC 首页「打开即见主视觉」，往下滚才见商品。全部 rem，跟随根字号等比缩放。 */
.dc-hero {
  position: relative;
  background: linear-gradient(150deg, var(--hero-a) 0%, var(--hero-b) 100%);
  border-bottom: 0.0625rem solid var(--line);
}
/* 首屏背景图（2026-10-03 新增，后台装修可换）。
   ⭐ 与右侧配图（d.img）是两层，互不影响：
        · 本层 = 铺满整个首屏的背景大图（留空则退回上面的主题渐变，零回归）
        · ::after = 用主题浅色叠一层遮罩，浓度由 --dc-hero-mask 控制
          （背景图偏深时提高浓度，保证左侧标题/按钮文字清晰可读）
   ⚠️ 用 <img> + object-fit:cover 而非 background-image：
      URL 走 esc() 转义进 src 属性，不存在引号截断属性/CSS 字符串的风险。
   ⚠️ .dc-hero-bg 是 z-index:0 的定位元素，会盖住静态文本；
      故 .dc-hero-in 必须 position:relative + z-index:1（见下）。 */
.dc-hero-bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.dc-hero-bg img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.dc-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: var(--hero-a); opacity: var(--dc-hero-mask, .45);
}
.dc-hero-in {
  position: relative; z-index: 1;
  max-width: var(--dc-mid); margin: 0 auto;
  display: grid; grid-template-columns: 1.06fr .94fr; gap: 3rem; align-items: center;
  padding: 3.375rem 1.5rem;
  /* 高度用变量控制：前台默认「撑满一屏」；后台画布/预览改 --dc-hero-min
     （画布是固定宽 + scale，vh 按浏览器窗口算会失真，见 admin/admin.css）。 */
  min-height: var(--dc-hero-min, calc(100vh - 9.875rem));
}
.dc-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem; background: #fff;
  border: 0.0625rem solid var(--brand-line); color: var(--brand-2);
  border-radius: 62.4375rem; padding: 0.375rem 0.875rem;
  font-size: 0.8125rem; font-weight: 600;
}
.dc-hero h1 { font-size: 2.625rem; line-height: 1.22; margin: 1.25rem 0 0.875rem; letter-spacing: -.02em; }
.dc-hero h1 em { font-style: normal; color: var(--brand); }
.dc-hero-sub { font-size: 1rem; color: var(--t2); max-width: 32.5rem; }
.dc-hero-cta { display: flex; gap: 0.875rem; margin-top: 1.75rem; flex-wrap: wrap; }
.dc-hero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  height: 2.75rem; padding: 0 1.625rem; border-radius: 62.4375rem;
  font-weight: 600; font-size: 0.9375rem;
}
.dc-hero-btn.p { background: var(--brand); color: #fff; }
.dc-hero-btn.p:hover { background: var(--brand-2); }
.dc-hero-btn.g { background: #fff; color: var(--brand-2); border: 0.0625rem solid var(--brand-line); }
.dc-hero-stats { display: flex; gap: 2.125rem; margin-top: 2.25rem; flex-wrap: wrap; }
.dc-hero-stats b { display: block; font-size: 1.625rem; color: var(--brand-2); letter-spacing: -.02em; }
.dc-hero-stats span { font-size: 0.8125rem; color: var(--t2); }
.dc-hero-shot {
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow);
  border: 0.0625rem solid var(--line); background: #fff;
}
.dc-hero-shot img { display: block; width: 100%; aspect-ratio: 760 / 460; object-fit: cover; }
/* 首屏海报轮播（2026-10-10）：整宽铺满 + 海报图贴左上（保左边文字，裁右下装饰） */
.dc-hero-vp { max-width: none; }
.dc-hero-vp .dc-slide img { object-position: left top; }
/* 海报高度响应式：窄屏降高、宽屏升高，保证合成进图里的文字不被上下裁切
   （海报图 3:2 + object-fit:cover，容器越宽比例越偏离 3:2、垂直裁切越多） */
@media (max-width: 1280px) { .dc-hero-vp { height: 460px !important; } }
@media (min-width: 1920px) { .dc-hero-vp { height: 760px !important; } }
@media (max-width: 1023px) {
  .dc-hero-in { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.25rem; }
  .dc-hero h1 { font-size: 2.125rem; }
}

/* 20.3 基础组件 */
.dc-search { padding: 1.125rem 1.5rem; }
.dc-search-in {
  max-width: 55rem; margin: 0 auto; height: 2.875rem; background: var(--bg);
  border: 0.0938rem solid var(--line); border-radius: 62.4375rem;
  display: flex; align-items: center; gap: 0.625rem; padding: 0 0.375rem 0 1rem;
}
.dc-search-ico { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; color: var(--t3); }
.dc-search-ico svg { width: 1.125rem; height: 1.125rem; display: block; }
.dc-search-ph { flex: 1; color: var(--t3); font-size: 0.9375rem; }
.dc-search-btn { background: var(--brand); color: #fff; height: 2.25rem; padding: 0 1.25rem; border-radius: 62.4375rem; font-size: 0.875rem; font-weight: 500; }
.dc-search-btn:hover { background: var(--brand-2); }

.dc-notice { padding: 0.6875rem 1.5rem; }
.dc-notice-in { max-width: var(--dc-mid); margin: 0 auto; display: flex; align-items: center; gap: 0.625rem; }
.dc-notice-ico { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
.dc-notice-ico svg { width: 1.125rem; height: 1.125rem; display: block; }
.dc-notice-tx { font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dc-title { display: flex; align-items: center; padding: 1.375rem 1.5rem 0.75rem; gap: 1rem; }
.dc-title-l { display: flex; align-items: center; gap: 0.625rem; min-width: 0; }
.dc-title-l i { width: 0.25rem; height: 1.125rem; border-radius: 0.125rem; flex: 0 0 auto; }
.dc-title-l h3 { font-size: 1.25rem; }
.dc-title-l em { font-style: normal; font-size: 0.8125rem; color: var(--t3); }
.dc-more { font-size: 0.875rem; color: var(--t2); flex: 0 0 auto; }
.dc-more:hover { color: var(--brand); }

.dc-text { padding: 0.75rem 1.5rem; }
.dc-text > div { max-width: var(--dc-mid); margin: 0 auto; }
.dc-image { text-align: center; }
.dc-image img { margin: 0 auto; }
.dc-divider > div { margin: 0 1.5rem; }

/* 20.4 导航组件 */
.dc-nav { padding: 1rem 1.5rem; }
.dc-nav-row { display: grid; gap: 0.75rem; max-width: var(--dc-mid); margin: 0 auto; }
.dc-nav-i { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0.625rem 0.375rem; border-radius: var(--r); transition: .15s; min-width: 0; }
.dc-nav-i:hover { background: var(--brand-soft); }
.dc-nav-img { width: 2.875rem; height: 2.875rem; border-radius: 0.75rem; object-fit: cover; }
.dc-nav-ico { width: 2.875rem; height: 2.875rem; border-radius: 0.75rem; display: grid; place-items: center; color: #fff; font-size: 0.875rem; font-weight: 600; }
.dc-nav-i > span { font-size: 0.875rem; color: var(--t1); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.dc-menu { padding: 0.375rem 1.5rem 1.25rem; }
.dc-menu-in { max-width: var(--dc-narrow); margin: 0 auto; background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r); overflow: hidden; }
.dc-menu-r { display: flex; align-items: center; gap: 0.75rem; padding: 0.8125rem 1rem; border-bottom: 0.0625rem solid var(--line-2); transition: .15s; }
.dc-menu-r:last-child { border-bottom: 0; }
.dc-menu-r:hover { background: var(--brand-soft); }
.dc-menu-ico { width: 1.625rem; height: 1.625rem; border-radius: 0.5rem; flex: 0 0 auto; background: var(--brand-soft); color: var(--brand-2); display: grid; place-items: center; font-size: 0.875rem; }
.dc-menu-tx { flex: 1; font-size: 0.9375rem; min-width: 0; }
.dc-menu-ar { color: var(--t4); font-size: 1rem; flex: 0 0 auto; }

/* 20.5 图文组件 */
.dc-banner { padding: 0.25rem 1.5rem; }
/* ⭐ 轮播限宽：旧版视口容器 margin:0 auto 但**没有 max-width** →
   1920 下吃掉整屏 1905px，比同页其他组件（1560px）宽出一大截，
   视觉上「banner 卡片特别大」。改用 --dc-mid 与其他组件对齐。 */
.dc-banner-vp { position: relative; margin: 0 auto; overflow: hidden; background: var(--line-2); max-width: var(--dc-mid); }
.dc-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.dc-slide.on { opacity: 1; }
.dc-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-dots { position: absolute; left: 0; right: 0; bottom: 0.75rem; display: flex; justify-content: center; gap: 0.4375rem; z-index: 2; }
.dc-dot { width: 1.125rem; height: 0.25rem; border-radius: 0.1875rem; background: rgba(255, 255, 255, .55); transition: .2s; box-shadow: 0 0 0 0.0625rem rgba(0, 0, 0, .06); }
.dc-dot.on { background: #fff; width: 1.75rem; }

.dc-imagetext { padding: 1rem 1.5rem; max-width: var(--dc-mid); margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.dc-it { display: grid; grid-template-columns: 18.75rem 1fr; gap: 1.125rem; align-items: center; }
.dc-it.right { grid-template-columns: 1fr 18.75rem; }
.dc-it.right .dc-it-img { order: 2; }
.dc-it-img { border-radius: var(--r); overflow: hidden; background: var(--line-2); aspect-ratio: 3 / 2; }
.dc-it-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-it-tx h4 { font-size: 1.125rem; }
.dc-it-tx p { font-size: 0.875rem; color: var(--t2); margin-top: 0.375rem; line-height: 1.75; }

/* 20.6 商品组件 */
.dc-goods { padding: 0.375rem 1.5rem 1.25rem; }
/* ⭐ 商品网格（2026-10-03 定案）
   目标：① 卡片宽度恒定 = 「满列时」的宽度，不因商品个数变化而忽大忽小
        ② 商品少于列数时，网格整体收窄并居中，右侧不留突兀空格
        ③ 与内置设计稿 .gallery 的卡片尺寸/间距完全一致
   做法：列数由 pc-comps.js 内联给出两个变量 ——
         --dc-cols      实际渲染的列数（= min(商品数, 用户设定列数)）
         --dc-cols-full 用户设定的列数（即「满列」基准）
       grid-template-columns 用实际列数（排满）；
       width 按 实际列数/满列数 的比例从 --dc-mid 截取 → 卡片宽度 = --dc-mid/满列数，恒定。
   ⚠️ 必须限宽（旧版只靠 .dc-goods 的 padding）：不限宽时网格吃满整屏，
      卡片远大于其他装修组件（实测 359px vs 设计稿 285px）。
   ⚠️ gap 必须与设计稿 .gallery 一致（1.375rem），否则「装修版」与
      「内置设计稿」同一站点两种观感。 */
.dc-goods-grid {
  display: grid; gap: 1.375rem;
  grid-template-columns: repeat(var(--dc-cols, 5), minmax(0, 1fr));
  width: calc(var(--dc-mid) * var(--dc-cols, 5) / var(--dc-cols-full, 5));
  max-width: 100%;
  margin: 0 auto;
}
.dc-gtab { display: flex; gap: 0.5rem; flex-wrap: wrap; max-width: var(--dc-mid); margin: 0 auto 0.875rem; }
.dc-gtab-i { background: var(--card); border: 0.0625rem solid var(--line); border-radius: 62.4375rem; padding: 0.375rem 1rem; font-size: 0.875rem; color: var(--t2); }
.dc-gtab-i.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-2); font-weight: 600; }

.dc-card {
  background: var(--card); border: 0.0625rem solid var(--line); overflow: hidden;
  display: flex; flex-direction: column; cursor: pointer; transition: .18s;
}
.dc-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-h); transform: translateY(-0.125rem); }
/* ⭐ 2026-10-19 图片优化：装修商品卡同样改 1:1 + contain（原 4/3 + cover 会裁产品图） */
.dc-shot { position: relative; aspect-ratio: 1; overflow: hidden;
  background: linear-gradient(135deg, #F4F6F9, #EAEEF3); }
.dc-shot img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .35s; padding: 6%; }
.dc-card:hover .dc-shot img { transform: none; }
.dc-tag { position: absolute; left: 0.625rem; top: 0.625rem; z-index: 1; background: var(--brand); color: #fff; font-size: 0.75rem; border-radius: 0.375rem; padding: 0.125rem 0.5rem; }
.dc-add {
  position: absolute; right: 0.625rem; bottom: 0.625rem; z-index: 1;
  width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 1.25rem; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 0.375rem 0.875rem -0.375rem rgba(var(--brand-rgb), .9); transition: .15s;
}
.dc-add:hover { background: var(--brand-2); transform: scale(1.08); }
.dc-body { padding: 0.75rem 0.875rem 0.875rem; display: flex; flex-direction: column; gap: 0.3125rem; flex: 1; min-width: 0; }
.dc-body h4 { font-size: 0.9375rem; font-weight: 700; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-param { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin: 0.25rem 0 0;
  font-size: 0.75rem; color: var(--t2); line-height: 1.4; }
.dc-param i { font-style: normal; color: var(--t3); margin-right: 0.25rem; }
/* ⭐ 2026-11-02 库存角标（图片左上）：现货=绿、缺货=红，与站内其它库存标签同色 */
.dc-stock { position: absolute; left: 0; top: 0; z-index: 2; font-size: 0.6875rem; font-weight: 700;
  color: #fff; padding: 0.1875rem 0.5rem; border-radius: 0 0 0.375rem 0; letter-spacing: .02em; }
.dc-stock.ok { background: #00B42A; }
.dc-stock.out { background: #F53F3F; }
.dc-meta { font-size: 0.8125rem; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-price { display: flex; align-items: baseline; gap: 0.1875rem; color: var(--price); margin-top: auto; }
.dc-price s { font-size: 0.8125rem; color: var(--t3); margin-right: 0.25rem; }
.dc-price i { font-style: normal; font-size: 0.875rem; font-weight: 600; }
.dc-price b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.dc-price .dc-cur { font-size: 0.8125rem; }
.dc-price .dc-unit { font-size: 0.8125rem; color: var(--t3); margin-left: 0.125rem; }
/* ⭐ 2026-10-23 与移动端对齐：有货绿 / 缺货红，加粗更好辨认 */
.dc-inv { font-size: 0.8125rem; color: #00B42A; font-weight: 600; }
.dc-inv.out { color: #F53F3F !important; }

/* 20.7 营销组件 */
.dc-countdown { padding: 1rem 1.5rem; }
.dc-cd-in { max-width: var(--dc-mid); margin: 0 auto; padding: 1.125rem 1.375rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.dc-cd-in h4 { font-size: 1.125rem; }
.dc-cd-in p { font-size: 0.8125rem; opacity: .88; margin-top: 0.1875rem; }
.dc-cd-r { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.dc-cd-r > i { font-style: normal; font-weight: 700; }
.dc-cd-u { display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; }
.dc-cd-u span { min-width: 2.5rem; height: 2.5rem; border-radius: 0.5625rem; display: grid; place-items: center; font-size: 1.125rem; font-weight: 700; }
.dc-cd-u em { font-style: normal; font-size: 0.75rem; }

/* 20.8 页面级组件 */
.dc-uhead { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; padding: 1.625rem 1.5rem; }
.dc-uhead.light { background: var(--card); color: var(--t1); border-bottom: 0.0625rem solid var(--line); }
.dc-uhead-in { max-width: var(--dc-narrow); margin: 0 auto; display: flex; align-items: center; gap: 0.875rem; }
.dc-uhead-av { width: 3.25rem; height: 3.25rem; border-radius: 50%; flex: 0 0 auto; background: rgba(255, 255, 255, .22); display: grid; place-items: center; font-size: 1.5rem; font-weight: 700; }
.dc-uhead.light .dc-uhead-av { background: var(--brand-soft); color: var(--brand-2); }
.dc-uhead-tx { flex: 1; min-width: 0; }
.dc-uhead-tx h3 { font-size: 1.125rem; }
.dc-uhead-tx p { font-size: 0.8125rem; opacity: .88; margin-top: 0.1875rem; }
.dc-uhead-go { flex: 0 0 auto; border: 0.0625rem solid rgba(255, 255, 255, .5); border-radius: 62.4375rem; padding: 0.4375rem 0.9375rem; font-size: 0.875rem; }
.dc-uhead-go:hover { background: rgba(255, 255, 255, .16); }
.dc-uhead.light .dc-uhead-go { border-color: var(--line); color: var(--t2); }
.dc-uhead.light .dc-uhead-go:hover { background: var(--brand-soft); color: var(--brand-2); }

.dc-footer { padding: 1.375rem 1.5rem; text-align: center; }
.dc-footer-in { max-width: var(--dc-narrow); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
.dc-footer-lg { width: 2.125rem; height: 2.125rem; border-radius: 0.5625rem; background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; display: grid; place-items: center; font-weight: 800; }
.dc-footer-in b { font-size: 0.9375rem; color: var(--t1); }
.dc-footer-in > span { font-size: 0.8125rem; }

/* 20.9 导航栏里的调试入口（虚线区分，提示非正式功能） */
.nav a.dev { color: var(--t3); border-left: 0.0625rem dashed var(--line); padding-left: 0.875rem; margin-left: 0.25rem; border-radius: 0 62.4375rem 62.4375rem 0; }
.nav a.dev:hover { color: var(--brand); background: var(--brand-soft); }
.nav a.dev.on { color: var(--brand); }

@media (max-width: 1023px) {
  .narrow-tip { display: block; background: #fffbeb; border-bottom: 0.0625rem solid #fde68a; color: #92400e;
    font-size: 0.875rem; padding: 0.5625rem 1.25rem; text-align: center; }
  .gallery, .lines, .svcs, .news { grid-template-columns: repeat(2, 1fr); }
  .cols, .dwrap, .cklayout, .acct { grid-template-columns: 1fr; }
  .side, .dshot, .ckaside, .acct .aside { position: static; }
  .side { max-height: none; overflow: visible; }   /* 窄屏不 sticky，取消内部滚动 */
  .hero .wrap { grid-template-columns: 1fr; }
  .statrow { grid-template-columns: repeat(2, 1fr); }
  .head .wrap { height: auto; padding: 0.875rem 1.25rem; flex-wrap: wrap; }
  .search { order: 3; max-width: 100%; flex: 1 1 100%; }
  .nav .wrap { overflow-x: auto; scrollbar-width: none; }
  .nav .wrap::-webkit-scrollbar { display: none; }
  .nav a, .nav .all { flex: 0 0 auto; white-space: nowrap; }
  .pfoot .top { grid-template-columns: repeat(2, 1fr); }
  .kv { grid-template-columns: 1fr; }
  .kv .r:nth-child(odd) { border-right: 0; }
  .doclist { grid-template-columns: 1fr; }
  /* 装修组件：窄屏降列。列数由 pc-comps.js 内联给变量 → 必须 !important 才能覆盖；
     同时把 width 放开为 100%（否则仍按 --dc-cols/--dc-cols-full 比例算宽度，
     与降列后的 2 列不匹配）。 */
  .dc-goods-grid { grid-template-columns: repeat(2, 1fr) !important; width: 100%; }
  .dc-nav-row { grid-template-columns: repeat(4, 1fr) !important; }
  .dc-it, .dc-it.right { grid-template-columns: 1fr; }
  .dc-it.right .dc-it-img { order: 0; }
  .dcl-head { flex-direction: column; gap: 0.875rem; }
  .dcl-r { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
}

/* ============================================================
   在线客服（悬浮入口）—— 与手机端 h5-demo KF 同一个企微「微信客服」
   ============================================================ */
/* ⭐ 2026-11-02 用户要求：原来那个大胶囊压住右侧商品卡 ⇒ 改为**贴边半隐藏**：
   默认只露出 2.6rem（图标），鼠标移上去整体滑出；不占内容区宽度。 */
.kf-fab {
  position: fixed; right: 0; bottom: 6.5rem; z-index: 60;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6875rem 0.875rem 0.6875rem 0.9375rem; border-radius: 999px 0 0 999px;
  background: var(--brand); color: #fff; cursor: pointer;
  box-shadow: 0 0.5rem 1.5rem rgba(var(--brand-rgb), .3);
  font-size: 0.875rem; font-weight: 600; user-select: none;
  transform: translateX(calc(100% - 2.6rem));
  transition: transform .2s ease, box-shadow .2s, background .2s;
}
.kf-fab:hover { transform: translateX(0); background: var(--brand-2);
  box-shadow: 0 0.75rem 1.75rem rgba(var(--brand-rgb), .42); }
.kf-fab:active { transform: translateY(0); }
.kf-fab svg { flex: 0 0 auto; }

/* 2026-11-04 PC 客服弹窗：结构与手机端一致（工作时间 → 在线咨询 → 扫码 → 热线） */
.kf-hours {
  margin: -1.375rem -1.5rem 1.125rem; padding: 0.625rem 1.5rem;
  background: var(--brand-bg); border-bottom: 0.0625rem solid var(--brand-line);
  color: var(--brand-text); font-size: 0.8125rem; font-weight: 600; text-align: center;
}
.kf-hours b { font-weight: 700; }
.kf-cta {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%; height: 3rem; border: 0; border-radius: var(--r-sm); cursor: pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  font-size: 1rem; font-weight: 600; letter-spacing: .02em;
  transition: filter .15s, transform .08s;
}
.kf-cta:hover { filter: brightness(1.06); }
.kf-cta:active { transform: translateY(0.0625rem); }
.kf-cta:focus-visible { outline: 0.125rem solid var(--brand-2); outline-offset: 0.125rem; }
.kf-or { display: flex; align-items: center; gap: 0.625rem; color: var(--t3); font-size: 0.75rem; margin: 1rem 0 0.75rem; }
.kf-or::before, .kf-or::after { content: ''; flex: 1; height: 0.0625rem; background: var(--line); }
.kf-qr-card {
  background: #fafbfc; border: 0.0625rem solid var(--line); border-radius: var(--r);
  padding: 0.875rem 0.875rem 0.75rem; display: flex; flex-direction: column; align-items: center;
}
.kf-qr-card img { width: 11rem; height: 11rem; display: block; border-radius: var(--r-sm); background: #fff; }
.kf-qr-t { font-size: 0.75rem; color: var(--t3); margin-top: 0.625rem; }
.kf-qr-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.3125rem; }
.kf-qr-n { font-size: 1.1875rem; font-weight: 700; color: var(--t1); letter-spacing: .02em; font-family: ui-monospace, monospace; }
.kf-tel { display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-size: 0.75rem; color: var(--t3); padding: 0.875rem 0 0; }
.kf-copy { white-space: nowrap; }
.kf-tel a { color: var(--brand); font-weight: 600; }
.kf-copy {
  font-size: 0.75rem; color: var(--brand); background: var(--brand-soft);
  border: 0.0625rem solid var(--brand-line); border-radius: 999px;
  padding: 0.1875rem 0.625rem; cursor: pointer;
}
.kf-copy:hover { background: var(--brand-bg2); }
/* 小高度窗口（笔记本 768 高 + 浏览器工具栏）：二维码缩一档，保证按钮与二维码同屏 */
@media (max-height: 720px) { .kf-qr-card img { width: 9rem; height: 9rem; } }
/* 窄窗：弹窗与按钮不溢出 */
@media (max-width: 480px) { .kf-hours { margin: -1.375rem -1.25rem 1rem; padding: 0.625rem 1.25rem; } }

/* 收藏按钮选中态（详情页「已收藏」） */
.buybar .btn.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
/* ⭐ 2026-10-19 缺货登记：详情页「到货登记」已登记态置灰（与手机端同色系） */
.buybar .btn.restocked { background: #F2F3F5; color: #86909C; border-color: #E5E6EB; cursor: default; }

/* 窄屏：收缩为圆形图标按钮，避免遮挡内容
   ⭐ 2026-10-20 补回：断点 900 → **1400**。实测 1080~1400 这类常见窗口宽度下，
   胶囊形按钮（约 130px 宽）会盖住**最后一列商品卡的价格**（用户已反馈）。 */
@media (max-width: 1400px) {
  .kf-fab { bottom: 5.5rem; padding: 0.75rem; transform: translateX(calc(100% - 2.4rem)); }
  .kf-fab span { display: none; }
}

@media print { .head, .nav, .pfoot, .topbar, .cartbar, .kf-fab { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   PC 首页「版式与质感」升级 —— 2026-10-19（用户要求：美观 / 大气 / 上档次）
   ⚠️ 作用域**只到装修组件**（.dc-block[data-dc=...] / .dc-stats），
      不改 .head / .navbar 等站点级样式，**不影响其它 PC 页**。
   ═══════════════════════════════════════════════════════════════════ */

/* ① 区块呼吸感：装修块之间统一留白（原各组件自带 padding，块间偏挤） */
.dc-block + .dc-block { margin-top: 1.5rem; }

/* ② 公告条 —— 现在位于「菜单栏与 banner 之间」，做成**精致细条**
      设计意图：这里是首屏第一眼，不能抢 banner 的视觉重心，
      所以用「极浅暖底 + 品牌色标签 + 细分隔线」，靠精致度取胜。 */
.dc-block[data-dc="notice"] .dc-notice {
  padding: 0;
  background: linear-gradient(90deg, #FFF8F1 0%, #FFF3E6 100%);
  border-bottom: 1px solid #F3E2CE;
}
.dc-block[data-dc="notice"] .dc-notice-in {
  max-width: var(--dc-mid); margin: 0 auto;
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1.5rem;
}
.dc-block[data-dc="notice"] .dc-notice-ico {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: rgba(255,106,0,.12); color: var(--brand);
  display: grid; place-items: center; flex: 0 0 auto;
}
.dc-block[data-dc="notice"] .dc-notice-ico svg { width: 0.875rem; height: 0.875rem; }
.dc-block[data-dc="notice"] .dc-notice-tx {
  font-size: 0.9375rem; color: #8A5A2B; letter-spacing: .01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dc-block[data-dc="notice"] .dc-notice-in::before {
  content: '公告'; flex: 0 0 auto;
  font-size: 0.75rem; font-weight: 700; letter-spacing: .08em;
  color: #fff; background: var(--brand);
  border-radius: 0.25rem; padding: 0.125rem 0.4375rem;
}

/* ③ hero 首屏主视觉：更柔和的圆角 + 极轻投影，提升「质感」 */
.dc-block[data-dc="hero"] { padding: 0 1.5rem; }
.dc-block[data-dc="hero"] .dc-hero { padding: 0; }
.dc-block[data-dc="hero"] .dc-hero-vp,
.dc-block[data-dc="hero"] .dc-banner-vp {
  max-width: var(--dc-mid); margin: 0 auto;
  border-radius: 1.25rem; overflow: hidden;
  box-shadow: 0 1.25rem 3rem -1.5rem rgba(58,28,10,.35);
}

/* ④ 商品区：卡片 hover 微上浮 + 更柔的阴影；页签更清晰 */
.dc-block[data-dc="goodsTab"] .dc-goods { padding: 0.5rem 1.5rem 1.75rem; }
.dc-block[data-dc="goodsTab"] .dc-gtab { gap: 2rem; border-bottom: 1px solid var(--line); padding-bottom: 0.75rem; }
.dc-block[data-dc="goodsTab"] .dc-gtab-i { font-size: 1.125rem; color: var(--t2); transition: color .16s; }
.dc-block[data-dc="goodsTab"] .dc-gtab-i.on { color: var(--brand); font-weight: 600; }
.dc-block[data-dc="goodsTab"] .dc-goods-row {
  background: #fff; border-radius: 0.875rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.dc-block[data-dc="goodsTab"] .dc-goods-row:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2.25rem -0.875rem rgba(58,28,10,.22);
}

/* ⑤ 数字背书带 —— 深暖墨色 + 顶部品牌色细线，做「稳重、上档次」的那一条 */
.dc-stats {
  padding: 0 1.5rem 0.25rem;
}
.dc-st-in {
  max-width: var(--dc-mid); margin: 0 auto;
  background: linear-gradient(135deg, #2C1A10 0%, #3F2718 55%, #2C1A10 100%);
  border-radius: 1.25rem;
  padding: 2.75rem 1rem 2.5rem;
  position: relative; overflow: hidden;
}
.dc-st-in::before {            /* 顶部 3px 品牌色细线：把品牌色带进深色区，避免"闷" */
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-l) 45%, rgba(255,138,43,0) 100%);
}
.dc-st-in::after {             /* 极淡的暖色光晕，增加层次 */
  content: ''; position: absolute; right: -8rem; top: -8rem;
  width: 22rem; height: 22rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,138,43,.16), rgba(255,138,43,0) 70%);
}
.dc-st-hd { text-align: center; margin-bottom: 2.25rem; position: relative; z-index: 1; }
.dc-st-hd h3 {
  margin: 0; font-size: 1.5rem; font-weight: 600; letter-spacing: .02em;
  color: #FBEADB;
}
.dc-st-hd p { margin: 0.5rem 0 0; font-size: 0.9375rem; color: rgba(251,234,219,.55); letter-spacing: .04em; }
.dc-st-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  position: relative; z-index: 1;
}
.dc-st-i { text-align: center; border-right: 1px solid rgba(251,234,219,.13); }
.dc-st-i:last-child { border-right: none; }
.dc-st-i b {
  display: block; font-size: 2.625rem; font-weight: 800; line-height: 1.05;
  color: #FFD9B4; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.dc-st-i b i { font-style: normal; font-size: 1.25rem; font-weight: 600; margin-left: .125rem; color: #F0B98A; }
.dc-st-i span {
  display: block; margin-top: 0.75rem; font-size: 0.9375rem;
  color: rgba(251,234,219,.62); letter-spacing: .04em;
}
@media (max-width: 1200px) {
  .dc-st-i b { font-size: 2.125rem; }
  .dc-st-row { grid-template-columns: repeat(3, 1fr); row-gap: 2rem; }
  .dc-st-i:nth-child(3) { border-right: none; }
}

/* ═══ 2026-10-19 「全部产品分类」点击下拉菜单 ═══ */
.nav .wrap { position: relative; }
.nav .all { border: 0; cursor: pointer; font-family: inherit; }
.nav .all .caret {
  width: 0; height: 0; margin-left: 0.125rem;
  border-left: 0.25rem solid transparent; border-right: 0.25rem solid transparent;
  border-top: 0.3125rem solid rgba(255,255,255,.85);
  transition: transform .16s ease;
}
.nav .all.on .caret { transform: rotate(180deg); }

.allcat-pop {
  position: absolute; left: 0; top: calc(100% + 0.375rem);
  width: min(15.5rem, 92vw);
  background: var(--card); border: 0.0625rem solid var(--line);
  border-radius: 0.875rem; box-shadow: 0 1.5rem 3.5rem -1rem rgba(58,28,10,.28);
  padding: 1rem 0.75rem 0.75rem;
  display: none; z-index: 80;
}
.allcat-pop.on { display: block; animation: acIn .16s ease-out; }
@keyframes acIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.allcat-pop .ac-grid { display: block !important; }           /* ⭐ 竖排单列（!important 防被其它规则覆盖） */
.allcat-pop .ac-i {
  display: flex !important; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem; border-radius: 0.5rem;
  text-decoration: none; color: var(--t2); font-size: 0.9375rem;
  transition: background .14s, color .14s;
}
/* 每项前面的橙色小圆点（截图里的样式） */
.allcat-pop .ac-i .dot {
  width: 0.4375rem; height: 0.4375rem; border-radius: 50%;
  background: var(--brand); flex: 0 0 auto;
}
/* hover / 当前项：浅橙底 + 橙字加粗（对齐截图里「特品 666」的高亮态） */
.allcat-pop .ac-i:hover, .allcat-pop .ac-i.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.allcat-pop .ac-i .ic {
  width: 2.125rem; height: 2.125rem; border-radius: 0.5625rem; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: -.02em;
}
.allcat-pop .ac-i.all-i { font-weight: 600; color: var(--t1); }
.allcat-pop .ac-i.all-i .ic { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.ac-foot {
  border-top: 0.0625rem solid var(--line-2); margin-top: 0.625rem; padding: 0.6875rem 0.75rem 0;
  font-size: 0.8125rem; color: var(--t3);
}
.ac-foot b { color: var(--brand); }
@media (max-width: 1023px) { .allcat-pop { display: none !important; } }
.ac-i .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-i .n { font-style: normal; font-size: 0.8125rem; color: var(--t3); margin-left: 0.5rem; flex: 0 0 auto; }
.ac-i:hover .n { color: var(--brand); }
.ac-i.all-i .n { color: var(--brand); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
   2026-10-20 补回：10-19 16:35–16:42 的 3 处样式
   （10-19 23:38 的云端副本把它们覆盖掉了；原件见 docs/2026-10-19-改动记录.md）
   ═══════════════════════════════════════════════════════════════════ */

/* HOT 角标：商品图右上角（左上角是品类标签，互不遮挡） */
.dc-hot {
  position: absolute; right: 0.5rem; top: 0.5rem; z-index: 2;
  background: #F53F3F; color: #fff; font-size: 0.625rem; font-weight: 700;
  line-height: 1.7; letter-spacing: .04em; padding: 0 0.375rem; border-radius: 0.1875rem;
}

/* 缺货登记按钮：替换缺货商品卡的「+」，做成窄胶囊 */
.dc-add.dc-restock {
  width: auto; height: 1.5rem; padding: 0 0.5rem; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 600; line-height: 1.5rem;
  background: var(--brand-soft); color: var(--brand); border: 0.0625rem solid var(--brand-line);
}
.dc-add.dc-restock.done {
  background: #F2F3F5; color: var(--t3); border-color: #E5E6EB; cursor: default;
}

/* ⭐ 2026-10-21 用户要求（参考淘宝）：购买区做成独立白卡，与左侧主图视觉成组、不再散落 */
.dinfo.dinfo-card, .dinfo {
  background: #fff;
  border: 0.0625rem solid var(--line);
  border-radius: var(--r);
  padding: 1.75rem 2rem 2rem;
}
/* 主图卡片与购买卡对齐高度（内容不足时由卡片底色补齐，避免右侧大片留白突兀） */
.dwrap { align-items: stretch; }
/* dinfo-card */

/* ⭐ 2026-10-21 极简详情页：价格一行（划线原价 + 红色现价），放在标题上方 */
.dprice1 { display: flex; align-items: baseline; gap: 0.625rem; margin-bottom: 0.5rem; }
.dprice1 s { color: #9AA0A8; font-size: 1rem; font-weight: 400; text-decoration: line-through; }
.dprice1 b { color: var(--price); font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
/* ⚠️ 不要在 ::before 里再加 ¥ —— JS 渲染的 <b> 里已经有 ¥，会变成「¥¥500.00」 */
/* dprice1 */

/* ⭐ 2026-10-21 右栏新结构：货号 / 商品参数块 / 更大的价格 */
.dsku { color: var(--t2); font-size: 0.875rem; margin-top: 0.375rem; letter-spacing: .01em; }
.dparam { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 0.0625rem solid var(--line-2); }
.dparam .dh { font-size: 0.9375rem; font-weight: 700; margin-bottom: 0.625rem; }
/* 标签列要装得下「企业内质量标准等级」（8 字），否则会折行 */
.dparam .kv { display: grid; grid-template-columns: 11rem 1fr; row-gap: 0.5rem; }
.dparam .kv .r { display: contents; }
.dparam .kv .k { color: var(--t2); font-size: 0.8125rem; white-space: nowrap; }
.dparam .kv .v { font-size: 0.875rem; }
.dprice1 b { font-size: 2.5rem !important; }
/* dsku */

/* ⭐ 2026-10-21 右栏变窄后 4 个按钮放一行：缩内边距 + 缩间距 */
.buybar { gap: 0.5rem; }
.buybar .btn { padding: 0 1.5rem; font-size: 0.9375rem; height: 3rem; }
/* buybar-4up */

/* ⭐ 2026-10-21 商品参数：两行四列（第一行表头灰底，第二行值） */
/* ⭐ 2026-10-21 用户要求：每个单元格宽度**按文字自适应**（max-content），整体不撑满 */
.dparam .g4 { display: grid; grid-template-columns: repeat(4, max-content); justify-content: start; border: 0.0625rem solid var(--line-2); border-radius: 0.375rem; overflow: hidden; }
.dparam .g4 .c { border-right: 0.0625rem solid var(--line-2); }
.dparam .g4 .c:nth-child(4n) { border-right: 0; }
.dparam .g4 .k { background: #F7F8FA; padding: 0.4375rem 0.875rem; font-size: 0.8125rem; color: var(--t2); white-space: nowrap; text-align: center; }
.dparam .g4 .v { padding: 0.625rem 0.875rem; font-size: 0.875rem; color: var(--t1); text-align: center; white-space: nowrap; }
/* g4 */

/* ⭐ 2026-10-21 物料描述区块（购买区下方，通栏） */
.mdesc { background: #fff; border: 0.0625rem solid var(--line); border-radius: var(--r); padding: 1.5rem 2rem; }
.mdesc p { margin: 0.375rem 0; color: var(--t1); font-size: 0.9375rem; line-height: 1.75; }
.mdesc h4 { color: var(--t1); font-size: 1rem; font-weight: 700; }
/* mdesc */

/* ⭐ 2026-10-21 物料描述：沿用原「技术信息」的 kv 表样式 */
.mdesc h3.ms-h { font-size: 0.9375rem; font-weight: 700; color: var(--t1); margin: 1.125rem 0 0.5rem; }
.mdesc h3.ms-h:first-child { margin-top: 0; }
.mdesc-kv { border-top: 0.0625rem solid var(--line-2); }
.mdesc-kv .r { display: grid; grid-template-columns: 9rem 1fr; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 0.0625rem solid var(--line-2); }
.mdesc-kv .k { color: var(--t2); font-size: 0.875rem; }
.mdesc-kv .v { color: var(--t1); font-size: 0.875rem; line-height: 1.6; }
.mdesc p.ms-p { margin: 0.375rem 0; color: var(--t1); font-size: 0.9375rem; line-height: 1.75; }
.mdesc img.ms-img { max-width: 22rem; border-radius: 0.375rem; margin: 0.625rem 0; display: block; }
/* mdesc-kv */

/* ⭐ 2026-10-21 样品申领：按钮上的「限时 · 剩 N 天」小标签 */
.samp-btn { position: relative; }
.samp-btn .samp-tag { font-style: normal; font-size: 0.6875rem; color: #FF5000; background: #FFF1E8;
  border-radius: 0.5rem; padding: 0.125rem 0.375rem; margin-left: 0.375rem; }
/* samp-tag */

/* ⭐ 2026-10-21 通知中心 */
.nt-list { background: #fff; border: 0.0625rem solid var(--line); border-radius: var(--r); overflow: hidden; }
.nt-item { display: flex; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 0.0625rem solid var(--line-2); cursor: pointer; }
.nt-item:last-child { border-bottom: 0; }
.nt-item { cursor: pointer; }
.nt-item:hover { background: #F7F8FA; }
.nt-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: transparent; margin-top: 0.4375rem; flex: none; }
.nt-item.unread .nt-dot { background: #F53F3F; }
.nt-item.unread .nt-title { font-weight: 700; }
.nt-title { font-size: 0.9375rem; color: var(--t1); }
.nt-body { font-size: 0.875rem; color: var(--t2); margin-top: 0.25rem; line-height: 1.6; }
.nt-time { font-size: 0.75rem; color: #C9CDD4; margin-top: 0.375rem; }
/* nt-item */

/* ════════════════════════════════════════════════════════════════════
   ⭐ 2026-10-21 页脚 4 套版式（可装修，由 PCCOMPS.pcFooter 渲染）
   · .pfoot 的通用样式（背景/边框/字体/链接色）沿用上面第 774-789 行
   · 这里只定义各版式独有的布局差异
   ════════════════════════════════════════════════════════════════════ */

/* ① 四列型 —— 与原有版式完全一致 */
.pfoot.pf-four .top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }

/* ② 两列型 —— 品牌 + 快捷链接 */
.pfoot.pf-two .top { grid-template-columns: 1.5fr 1fr; }
.pfoot.pf-two .top > div:last-child ul { columns: 2; column-gap: 2rem; }

/* ③ 居中简约型 */
.pfoot.pf-center { padding-top: 3.25rem; }
.pfoot.pf-center .pf-c-in { text-align: center; padding-bottom: 2.25rem; }
.pfoot.pf-center .about .lg,
.pfoot.pf-center .lg { display: inline-flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; }
.pfoot.pf-center .lg .mark {
  width: 2.5rem; height: 2.5rem; border-radius: 0.6875rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: grid; place-items: center; color: #fff; font-weight: 800;
}
.pfoot.pf-center .lg b { color: var(--t1); font-size: 1.125rem; }
.pfoot.pf-center .pf-c-desc {
  margin: 0 auto 0.875rem; max-width: 46rem;
  font-size: 0.875rem; line-height: 1.8; color: var(--t2);
}
.pfoot.pf-center .pf-c-meta { font-size: 0.875rem; color: var(--t3); margin-bottom: 1rem; }
.pfoot.pf-center .pf-c-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.75rem; margin-bottom: 1.5rem; }
.pfoot.pf-center .pf-c-links a { font-size: 0.875rem; color: var(--t2); }
.pfoot.pf-center .pf-c-links a:hover { color: var(--brand); }
.pfoot.pf-center .pf-c-links .sep { color: var(--t4, #C9CDD4); }
.pfoot.pf-center .pf-c-bar {
  border-top: 0.0625rem solid var(--line); padding-top: 1rem;
  font-size: 0.8125rem; color: var(--t3);
}

/* ④ 大字品牌型 */
.pfoot.pf-brand { padding-top: 3.5rem; }
.pfoot.pf-brand .pf-b-in { padding-bottom: 2.5rem; }
.pfoot.pf-brand .pf-b-name {
  font-size: 2.75rem; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--t1); margin-bottom: 0.875rem;
}
.pfoot.pf-brand .pf-b-desc {
  max-width: 44rem; font-size: 0.9375rem; line-height: 1.85; color: var(--t2); margin-bottom: 1.5rem;
}
.pfoot.pf-brand .pf-b-cats {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;
}
.pfoot.pf-brand .pf-b-cats a {
  display: inline-block; padding: 0.375rem 0.875rem; border-radius: 999px;
  background: var(--brand-bg, #f5f7f9); color: var(--brand-text, var(--t2));
  font-size: 0.8125rem; border: 0.0625rem solid transparent;
  transition: border-color .16s, color .16s;
}
.pfoot.pf-brand .pf-b-cats a:hover { border-color: var(--brand); color: var(--brand); }
.pfoot.pf-brand .pf-b-meta { font-size: 0.875rem; color: var(--t3); margin-bottom: 1.5rem; }
.pfoot.pf-brand .pf-b-bar {
  border-top: 0.0625rem solid var(--line); padding-top: 1rem;
  font-size: 0.8125rem; color: var(--t3);
}

/* ⭐ 2026-10-22 通知：标题可折叠 */
.nt-title { display: flex; align-items: center; gap: 0.5rem; }
.nt-fold { font-style: normal; font-size: 0.75rem; color: #86909C; font-weight: 400; }
.nt-body-wrap { overflow: hidden; transition: max-height .16s cubic-bezier(.4,0,.2,1); }
.nt-body { margin-top: 0.5rem; padding: 0.625rem 0.75rem; background: #F7F8FA; border-radius: 0.375rem; line-height: 1.7; }
.nt-go { display: inline-block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--brand); }
/* nt-fold */

/* ⭐ 2026-10-23 商品卡右下角「加入购物车 / 到货登记」按钮（原来挂在图片右上角） */
.dc-buy{flex:none;height:1.75rem;padding:0 0.75rem;border-radius:0.875rem;background:#FF5000;color:#fff;font-size:0.75rem;border:none;cursor:pointer;white-space:nowrap;transition:.15s}
.dc-buy:hover{opacity:.88}
/* ⭐ 2026-10-23 与移动端 comps.js 完全同色：
   到货登记 = 浅橙底 + 品牌橙字 + 浅橙描边（H5 的 --brand-soft / --brand / --brand-line）
   已登记   = 浅灰底 + 灰字 + 灰描边 */
.dc-buy.restock{background:#FFF1EA;color:#FF6A00;border:0.0625rem solid #FFD2B8}
.dc-buy.restock:hover{background:#FFE4D3}
.dc-buy.restock.done{background:#F2F3F5;color:#86909C;border-color:#E5E6EB}

/* ⭐ 2026-10-23 与移动端对齐：缺货商品图片去色（移动端 H5 就是这个效果） */
.dc-card.out .dc-shot img,
.gcard.out .thumb img{filter:grayscale(1);opacity:.55}
.dc-card.out .dc-body,
.gcard.out .body{opacity:.85}

/* ==========================================================
   ⭐⭐ 2026-10-27 个人中心（总览页 #/me）
   ----------------------------------------------------------
   背景：PC 原来点客户名直接进「账户资料」表单，客户找不到订单/地址/收藏，
        体感是"PC 没有个人中心"。这里补聚合式总览，与移动端「我的」对齐。
   ========================================================== */
.mehead {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--card);
  border: 0.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.75rem;
  margin-top: 1.125rem;
}

.mehead-av {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-2);
  display: grid;
  place-items: center;
  font-size: 1.375rem;
  font-weight: 500;
  flex: none;
}

.mehead-tx { flex: 1; min-width: 0; }

.mehead-tx b {
  display: block;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--t1, #1d2129);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mehead-tx span {
  display: block;
  font-size: 0.8125rem;
  color: var(--t3, #86909c);
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mehead-act { flex: none; display: flex; align-items: center; }

.mestats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.mestat {
  display: block;
  text-align: center;
  background: #fafbfc;
  border-radius: 10px;
  padding: 1rem 0.5rem;
  text-decoration: none;
  transition: background 0.15s;
}

.mestat:hover { background: #f2f3f5; }

.mestat b {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--t1, #1d2129);
  line-height: 1.2;
}

.mestat span {
  display: block;
  font-size: 0.8125rem;
  color: var(--t2, #4e5969);
  margin-top: 0.25rem;
}

.megrids {
  display: grid;
  /* 2026-11-03 P1：服务项共 10 个 —— 4 列剩 2 格、3 列剩 1 格，5 列 x 2 行正好铺满 */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: 0.5rem;
}

.megrid {
  display: block;
  background: #fafbfc;
  border-radius: 10px;
  padding: 0.875rem 1rem;
  text-decoration: none;
  transition: background 0.15s;
  min-width: 0;
}

.megrid:hover { background: #f2f3f5; }

.megrid-t {
  font-size: 0.875rem;
  color: var(--t1, #1d2129);
  font-weight: 500;
}

.megrid-d {
  font-size: 0.75rem;
  color: var(--t3, #86909c);
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .mestats, .megrids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mehead { flex-wrap: wrap; padding: 1.125rem 1.25rem; }
}

/* ⭐ 2026-10-27 帮助中心（折叠问答） */
.faq {
  border-bottom: 0.5px solid var(--line);
  padding: 0.125rem 0;
}
.faq:last-child { border-bottom: 0; }
.faq > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.875rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--t1, #1d2129);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::before {
  content: "›";
  display: inline-block;
  transition: transform 0.15s;
  color: var(--brand);
  font-size: 1rem;
  line-height: 1;
  transform: rotate(0deg);
}
.faq[open] > summary::before { transform: rotate(90deg); }
.faq > summary:hover { color: var(--brand); }
.faq-a {
  padding: 0 0 1rem 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.85;
  color: var(--t2, #4e5969);
}

/* ==========================================================
   关于我们（2026-10-27 新建）
   内容参照官网 https://www.avt-avt.com/p-about.html 的结构与表述，
   按 B2B 商城口径重排为：首屏 → 深耕廿载 → 三大领先 → 研产销一体化
   → 五大增值服务 → 团队 → 联系我们。
   ⚠️ 配色一律走变量（--brand / --ink / --t1…），不写死品牌色，四套主题自动跟随。
   ========================================================== */
.abpage { padding-bottom: 3.75rem; }
/* 纯文字页单独收窄内容区：全站 --w=97.5rem 是为商品网格留的，
   正文铺到 1560px 会超过 60 字/行、极难读；本页收到 78rem（1248px）≈ 55 字/行。 */
.abpage .wrap { max-width: min(100%, 78rem); }

/* ---------- 首屏 ---------- */
.ab-hero {
  position: relative;
  overflow: hidden;
  padding: 1.375rem 0 2.75rem;
  border-bottom: 0.0625rem solid var(--line);
  background:
    radial-gradient(56rem 22rem at 88% -18%, rgba(var(--brand-rgb), .14), transparent 70%),
    linear-gradient(135deg, var(--hero-a), var(--hero-b) 62%, #fff);
}
/* 极淡网格纹理：避免整块纯色显得空，同时不干扰文字 */
.ab-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(22, 24, 29, .04) 0.0625rem, transparent 0.0625rem),
    linear-gradient(to bottom, rgba(22, 24, 29, .04) 0.0625rem, transparent 0.0625rem);
  background-size: 3.5rem 3.5rem;
  -webkit-mask-image: radial-gradient(66% 58% at 50% 0%, #000 18%, transparent 100%);
  mask-image: radial-gradient(66% 58% at 50% 0%, #000 18%, transparent 100%);
}
.ab-hero .wrap { position: relative; z-index: 1; }
.ab-hero .crumb { margin-bottom: 1.5rem; }
.ab-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 2.5rem;
  align-items: end;
}
.ab-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 1.75rem;
  padding: 0 0.8125rem;
  border-radius: 999px;
  background: #fff;
  border: 0.0625rem solid var(--brand-line);
  color: var(--brand-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ab-hero h1 { font-size: 2.5rem; line-height: 1.22; letter-spacing: -0.02em; margin: 1rem 0 0.875rem; }
.ab-hero h1 em { font-style: normal; color: var(--brand); }
.ab-hero .lead { font-size: 1rem; line-height: 1.95; color: var(--t2); max-width: 44rem; }
.ab-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.ab-kpi {
  background: #fff;
  border: 0.0625rem solid var(--line);
  border-radius: var(--r);
  padding: 1rem 1.125rem;
  box-shadow: var(--shadow);
}
.ab-kpi b { display: block; font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; color: var(--brand-2); line-height: 1.12; }
.ab-kpi span { display: block; font-size: 0.75rem; color: var(--t2); margin-top: 0.3125rem; }

/* ---------- 通用区块头 ---------- */
.ab-sec { padding: 2.75rem 0 0; }
.ab-h { margin-bottom: 1.5rem; }
.ab-h .en { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; color: var(--brand); text-transform: uppercase; }
.ab-h h2 { font-size: 1.5rem; margin: 0.375rem 0 0.4375rem; }   /* 2026-11-04 26→24px 与全站 h2 归位 */
.ab-h p { font-size: 0.9375rem; color: var(--t2); }

/* ---------- 两栏（正文 + 旁注） ---------- */
.ab-2col { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; align-items: start; }
.ab-prose p { font-size: 0.9375rem; line-height: 2; color: var(--t2); margin-bottom: 0.875rem; }
.ab-prose p:last-child { margin-bottom: 0; }
.ab-prose b { color: var(--t1); font-weight: 600; }
.ab-quote {
  background: var(--card);
  border: 0.0625rem solid var(--line);
  border-left: 0.1875rem solid var(--brand);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 1.25rem 1.375rem;
}
.ab-quote .q { font-size: 1.125rem; font-weight: 700; line-height: 1.6; letter-spacing: -0.01em; }
.ab-quote .q span { color: var(--brand); }
.ab-quote .d { margin-top: 0.625rem; font-size: 0.8125rem; line-height: 1.85; color: var(--t2); }
.ab-vals { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.ab-vals span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-2);
  background: var(--brand-soft);
  border: 0.0625rem solid var(--brand-line);
  border-radius: 999px;
  padding: 0.1875rem 0.625rem;
}

/* ---------- 三大领先优势（3 卡） ---------- */
.ab-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.125rem; }
.ab-card {
  position: relative;
  background: var(--card);
  border: 0.0625rem solid var(--line);
  border-radius: var(--r);
  padding: 1.5rem 1.375rem 1.375rem;
  transition: border-color .15s, box-shadow .2s, transform .2s;
}
.ab-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-h); transform: translateY(-0.1875rem); }
.ab-card .no {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-line);
}
.ab-card .ic {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.625rem;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  margin-bottom: 0.9375rem;
}
.ab-card h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.ab-card p { font-size: 0.875rem; line-height: 1.85; color: var(--t2); }
.ab-card .num { display: flex; align-items: baseline; gap: 0.3125rem; margin-top: 0.9375rem; padding-top: 0.875rem; border-top: 0.0625rem dashed var(--line); }
.ab-card .num b { font-size: 1.375rem; font-weight: 800; color: var(--brand-2); letter-spacing: -0.02em; }
.ab-card .num i { font-style: normal; font-size: 0.75rem; color: var(--t3); }

/* ---------- 研产销一体化（2×2 + 链条） ---------- */
.ab-cells { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.125rem; }
.ab-cell { display: flex; gap: 0.9375rem; background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r); padding: 1.25rem 1.375rem; }
.ab-cell .ic { flex: 0 0 2.125rem; width: 2.125rem; height: 2.125rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.ab-cell h4 { font-size: 0.9375rem; margin-bottom: 0.375rem; }
.ab-cell p { font-size: 0.8125rem; line-height: 1.85; color: var(--t2); }
.ab-chain {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-top: 1.125rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r);
  background: var(--tint-a);
  border: 0.0625rem dashed var(--brand-line);
}
.ab-chain .lb { font-size: 0.75rem; font-weight: 700; color: var(--brand-2); letter-spacing: 0.04em; }
.ab-chain .st { font-size: 0.8125rem; font-weight: 600; color: var(--t1); background: #fff; border: 0.0625rem solid var(--line); border-radius: 999px; padding: 0.25rem 0.75rem; }
.ab-chain .ar { color: var(--brand); display: inline-flex; }

/* ---------- 五大增值服务 ---------- */
.ab-svc5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.875rem; }
.ab-svc { background: var(--card); border: 0.0625rem solid var(--line); border-radius: var(--r); padding: 1.125rem 1rem; }
.ab-svc .k { display: flex; align-items: center; gap: 0.4375rem; font-size: 0.6875rem; font-weight: 800; color: var(--brand); letter-spacing: 0.08em; }
.ab-svc b { display: block; font-size: 0.9375rem; margin: 0.5rem 0 0.375rem; }
.ab-svc p { font-size: 0.75rem; line-height: 1.8; color: var(--t2); }

/* ---------- 团队（深色通栏） ---------- */
.ab-team {
  margin-top: 2.75rem;
  background: linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 100%);
  color: var(--ink-hi);
  padding: 2.25rem 0;
}
.ab-team-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; align-items: center; }
.ab-team h2 { font-size: 1.5rem; color: #fff; margin-bottom: 0.625rem; }
.ab-team p { font-size: 0.875rem; line-height: 1.95; color: var(--ink-t); max-width: 40rem; }
.ab-team .trio { display: flex; gap: 0.5rem; margin-top: 1.125rem; flex-wrap: wrap; }
.ab-team .trio span {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  border: 0.0625rem solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}
.ab-tstats { display: grid; grid-template-columns: repeat(3, auto); gap: 1.75rem; }
.ab-tstats b { display: block; font-size: 1.75rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.ab-tstats span { display: block; font-size: 0.75rem; color: var(--ink-t2); margin-top: 0.25rem; }

/* ---------- 联系我们 ---------- */
.ab-contact { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
.ab-contact .kv .k { flex: 0 0 7.5rem; }
.ab-links { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-top: 1.125rem; }
.ab-note { font-size: 0.75rem; line-height: 1.9; color: var(--t3); margin-top: 1rem; }

@media (max-width: 1280px) {
  .ab-hero-in { grid-template-columns: 1fr; align-items: start; }
  .ab-2col, .ab-contact { grid-template-columns: 1fr; }
  .ab-cards, .ab-cells { grid-template-columns: repeat(2, 1fr); }
  .ab-svc5 { grid-template-columns: repeat(3, 1fr); }
  .ab-team-in { grid-template-columns: 1fr; }
}

/* ==========================================================
   价格锁（2026-10-27）：未登录不显示价格 / 库存
   后端 /api/product/library 未登录时直接不下发 price/inv 字段，
   前端只负责把「空」翻译成「登录可见价格」，不要出现 ¥0.00。
   ========================================================== */
.price-lock {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.875rem; font-weight: 600; color: var(--brand);
  text-decoration: none; white-space: nowrap;
}
.price-lock:hover { color: var(--brand-2); }
.price-lock i { font-style: normal; opacity: .65; font-size: 1.1em; }
.price-lock-sm { font-size: 0.8125rem; color: var(--t3); }
/* 详情页主价区：字大一点，保持与「大字价格」同样的视觉重量 */
.dprice1 .price-lock { font-size: 1.25rem; }
.dc-price.dc-lock a { color: var(--brand); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
/* 未登录时替代「加入购物车」的入口（a 标签要按按钮样式对齐） */
.dc-buy-lock { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ============ 物流：列表一行 + 详情进度条（2026-11-11）============
   背景：客户原来只知道「已发货」，不知道货到哪。列表给最新节点，详情给四段进度。 */
.lg-mini { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; max-width: 11.5rem; flex-wrap: wrap; }
.lg-mini-go { font-size: 0.6875rem; color: #185FA5; white-space: nowrap; margin-left: auto; }
.lg-mini-b {
  flex: none; font-size: 0.6875rem; line-height: 1.5; padding: 0 0.3rem;
  color: var(--brand-2, var(--brand)); background: var(--brand-bg, rgba(37,99,235,.08));
  border-radius: 0.25rem;
}
.lg-mini-t {
  flex: 1; min-width: 0; font-size: 0.6875rem; color: var(--t3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lg-head {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  font-size: 0.8125rem; color: var(--t2); margin-bottom: 0.2rem;
}
.lg-steps { display: flex; padding: 0.6rem 0 0.2rem; }
.lg-step { flex: 1; text-align: center; position: relative; }
.lg-step::before {
  content: ''; position: absolute; left: -50%; top: 0.3rem;
  width: 100%; height: 1.5px; background: var(--line);
}
.lg-step:first-child::before { display: none; }
.lg-step.is-on::before { background: var(--brand); }
.lg-step-dot {
  display: block; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  margin: 0 auto; background: var(--line); position: relative; z-index: 1;
}
.lg-step.is-on .lg-step-dot { background: var(--brand); }
.lg-step.is-cur .lg-step-dot { box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.lg-step-t { display: block; font-size: 0.6875rem; color: var(--t3); margin-top: 0.3rem; }
.lg-step.is-on .lg-step-t { color: var(--t2); }
.lg-step.is-cur .lg-step-t { color: var(--brand); font-weight: 600; }
.lg-list { margin-top: 0.3rem; }
.lg-row { display: flex; gap: 0.55rem; padding: 0.32rem 0; border-top: 1px dashed var(--line); }
.lg-row-dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--t4); flex: 0 0 auto; margin-top: 0.32rem;
}
.lg-row-dot.is-first { background: var(--brand); }
.lg-row-txt { font-size: 0.8125rem; color: var(--t1); line-height: 1.5; }

/* 2026-11-11 发票管理：「申请开票」跟标题同一行、同字号（原为右上角小按钮，不显眼） */
.sect-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.sect-link svg { flex: none; transition: transform .15s; }
.sect-link:hover { color: var(--brand-2); border-bottom-color: var(--brand-2); }
.sect-link:hover svg { transform: translateX(0.18rem); }