/*
  视觉规范：参照 Apple 中国官网的版式语言
  —— 大留白 / 超大字重标题 / 深色 Hero / 大圆角浅灰卡片 / 极简毛玻璃导航 / 滚动渐入
  品牌色沿用东兴本草 logo 中的玫红，仅作强调，不铺面。
*/

:root{
  /* —— Apple 官方色板 —— */
  --black:#1d1d1f;         /* Hero 深底：改深灰，归入三色系 */
  --ink:#1d1d1f;            /* 主文字：Apple 标准黑 */
  --text:#424245;           /* 正文：Apple 次级文字色 */
  --muted:#6e6e73;          /* 说明文字：Apple 标准灰 */
  --gray:#f5f5f7;           /* Apple 浅灰底 */
  --gray2:#d2d2d7;          /* Apple 分隔线 */
  --fill:#eeeeee;           /* 输入框填充：1.16:1（2026-10-01 定档 B，比浅灰卡片深一档，免得"掉进去"） */
  --fill-hover:#e4e4e6;     /* 输入框悬停：再深一档 */
  --brand:#0ABAB5;         /* 2026-10-07 换品牌规范界面强调色（原 Pantone 338 C #6ECEB2 停用）：实底按钮 / 强调块 */
  --brand-deep:#099F9B;    /* 强调色略深：hover */
  --brand-soft:#EAF7F2;    /* 极浅底（第二批待换，暂留） */
  --brand-dark:#5FCFCB;    /* 深色背景上的强调色亮版（第二批待换，暂留） */
  --brand-ink:#0A7C79;     /* 强调色加深版：链接 / 描边文字，白底对比 5.03:1 达 AA */
  --amber:#6e6e73;         /* 提示色改中性灰（三色系：338 C / 灰 / 白） */
  --amber-soft:#f0f4f3;
  --alert:#E24B4A;         /* 提示红：2026-10-01 董事长定 —— 只用在咨询钮那个提示点上，不进品牌色板、不铺开 */
  --radius:18px;
  --radius-lg:24px;
  --ease:cubic-bezier(.28,.11,.32,1);
  --maxw:1024px;
  --maxw-cat:1360px;        /* 商品列表页专用：比首页宽一档，大屏才能多排几列 */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;line-height:1.47;letter-spacing:-.01em;
  color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-ink);text-decoration:none;transition:opacity .2s var(--ease)}
a:hover{opacity:.75}
img{max-width:100%;height:auto;display:block}
html,body{overflow-x:hidden}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
/* 商品列表页用宽版容器：屏幕越宽，一行能排的品种越多 */
.wrap.wide{max-width:var(--maxw-cat)}

/* ── 导航（Apple 式：48px 高、毛玻璃、小字） ──
   2026-10-01：原顶部电话条（.topbar）已整行移除，安全区改由 header 承担 */
header{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.07);
}
/* 2026-10-07 乙案（董事长定）：页头由 48px 加高到 88px，装得下东兴横版 96×55 ——
   横版宽 96 是规范 3.2 的屏幕下限，48px 的条里塞不进去，故加高。站名缩为「严选」
   （标志里已含「东兴本草」四字，不重复）。上下净空 16px 低于规范 3.3 的 50%（约 28px），
   此一处放宽由董事长书面认可。 */
.hd{display:flex;align-items:center;justify-content:space-between;height:88px}
/* 2026-10-07 董事长定：「严选」嵌进横版标志内部右下空档 —— 点阵树右侧、「东兴本草」四字正下方。
   矢量内部实测（96x55 渲染，2x 设备像素逐墨迹校验，可复跑）：
     点阵树 x 1.5-44.5（占左侧通高）｜「东兴本草」四字 x 51.5-94.0 ｜ y 19.5-33.0 ｜ 墨迹高 14.0
   故「严选」定位 left:51.4px / width:43.2px（与四字左右对齐）｜ top:35px（距四字底边 2.5px）。
   排法 text-align-last:justify，与招商页「九誉医药」同一手法；纯 CSS 生效，各页 HTML 不动。 */
.logo{position:relative;display:flex;align-items:center;gap:0;color:var(--ink);flex:0 0 auto}
.logo:hover{opacity:1}
.logo img{height:32px;width:auto;display:block}
.logo img.dxmark{height:55px;width:96px;display:block}
.logo .nm{position:absolute;left:51.4px;top:35px;width:43.2px;
  text-align:justify;text-align-last:justify;
  font-size:15px;font-weight:600;line-height:1;color:var(--ink);letter-spacing:0;
  white-space:nowrap}
.logo .nm sup{font-size:9px;font-weight:400;color:var(--muted);margin-left:1px}
nav{display:flex;align-items:center;gap:2px;flex:0 0 auto}
nav a{
  font-size:12px;color:var(--ink);opacity:.85;
  padding:6px 12px;border-radius:980px;letter-spacing:0;white-space:nowrap;
}
nav a:hover{opacity:1;background:rgba(0,0,0,.04);color:var(--ink)}
nav a.on{font-weight:600;color:var(--brand-ink);opacity:1}

/* ── 语言选择器（2026-10-01 第二十九轮 C95 加）──
   放在顶栏右端、登录按钮之前。用原生 <select>：手机端点开是系统滚轮，比自绘下拉可靠。 */
.langsel{flex:0 0 auto;display:flex;align-items:center;margin-left:6px}
.langsel select{
  font:12px/1 inherit;font-family:inherit;
  color:var(--ink);background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.10);border-radius:980px;
  padding:6px 10px;max-width:118px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.langsel select:hover{background:rgba(0,0,0,.07)}
.langsel select:focus-visible{outline:2px solid var(--brand-ink);outline-offset:1px}

/* ── Hero（高级灰：浅灰渐变底 + 深灰字，配 338 C 强调） ──
   ⭐ 2026-10-06 曾按指示压缩过约 30%（留白 110/120 → 46/52），
      同日董事长又指示「不压缩了，回复原尺寸」⇒ **已全部还原**。
      🔴 还原要改**四处断点**（基础／≤768／≤700 区／横屏），
         只改基础那一条，手机与横屏会被后面的断点覆盖，看着没变化。
      服务器备份里的原始值可从 `/opt/backup/site-20261006-151244/assets/style.css` 取。 */
.hero{
  background:linear-gradient(180deg,#f2f2f5 0%,#e6e6ec 100%);
  color:var(--ink);
  padding:110px 0 120px;text-align:center;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;left:50%;bottom:-40%;transform:translateX(-50%);
  width:900px;height:900px;pointer-events:none;
  background:radial-gradient(circle,rgba(10,186,181,.22) 0,rgba(10,186,181,0) 62%);
}
.hero .wrap{position:relative;z-index:2}
.hero .mark{width:64px;height:64px;margin:0 auto 26px;display:block;color:var(--brand-ink);opacity:.95}
/* 东兴横版（首屏）：156×90。下方留 45px = 标志高 50%，合规范 3.3 安全空间 */
.hero img.dxmark-h{width:156px;height:auto;display:block;margin:0 auto 45px}
/* 东兴竖版（资质公示页）：源 48.9×80.9 高不足规范下限 96，等比放大到 58×96 */
.hero img.dxmark-v{width:58px;height:96px;display:block;margin:0 auto 45px}

/* ⭐ 东兴本草严选 · 上下版（2026-10-07 董事长定名）
   横版标志在上，「严选」落在美术字「东兴本草」四字的正下方，左右两端与四字拉齐。
   比例取自页头实测（标志 96 宽时 left 51.4 / top 35 / width 43.2 / 字号 15），
   随标志宽度等比缩放：156 宽 = 1.625 倍；手机 120 宽 = 1.25 倍。 */
.dxup{position:relative;display:block;width:156px;margin:0 auto 45px;line-height:0}
.dxup .dxuimg{display:block;width:156px;height:auto}
.dxup .dxunm{position:absolute;left:82.8px;top:56.9px;width:71.9px;
  font-size:24.4px;font-weight:600;line-height:1;letter-spacing:0;
  color:var(--ink);text-align:justify;text-align-last:justify}
/* 放进 h1 时：由 h1 自己管下边距，避免与 h1 的 margin 叠加 */
.hero h1 .dxup{margin-bottom:0}
/* 行情页 hero 自带 34/30 的上下留白，组合块底下再给 45 就太空 */
.mk-hero .dxup{margin:0 auto 18px}

/* C153 竖版标志落款块：只用在资质公示页「企业资质」之上。
   白话：横版标志在上头（页头 + 首屏）已经露过两次脸，这里换竖版，
   作用是给这份资质盖个「属于谁」的章，一横一竖不打架。 */
.dxv-block{display:flex;align-items:center;justify-content:center;gap:18px;
  margin:0 0 20px;padding:14px 20px;background:var(--brand-soft);
  border-radius:var(--radius);text-align:left}
.dxv-block .dxv{width:58px;height:96px;flex:0 0 auto;display:block}
.dxv-block .dxv-tx{font-size:13px;line-height:1.75;color:var(--text)}
.dxv-block .dxv-tx b{display:block;font-size:14px;font-weight:600;
  color:var(--brand-ink);margin-bottom:2px}
@media(max-width:520px){
  .dxv-block{gap:12px;padding:12px 14px}
  .dxv-block .dxv{width:44px;height:73px}
  .dxv-block .dxv-tx{font-size:12px}
}
.hero h1{
  font-size:60px;font-weight:700;letter-spacing:-.028em;line-height:1.06;
  margin:0 0 14px;color:var(--ink);
}
.hero h1 sup{font-size:20px;font-weight:400;color:var(--muted);margin-left:2px}
.hero .sub{
  font-size:21px;font-weight:400;line-height:1.38;letter-spacing:.004em;
  color:var(--text);margin:0 auto 32px;max-width:620px;
}
.hero .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--brand);color:var(--ink);font-size:17px;font-weight:500;
  padding:12px 26px;border-radius:980px;letter-spacing:0;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{background:var(--brand-deep);color:var(--ink);opacity:1;transform:scale(1.02)}
/* 浅底区块里的描边按钮（Apple 官网常见的第二种按钮） */
.btn.line{background:transparent;color:var(--brand-ink);border:1px solid var(--brand-ink)}
.btn.line:hover{background:var(--brand-ink);color:#fff;opacity:1}
/* Hero 现在是浅灰底，幽灵按钮要跟着改成深色描边 */
.btn.ghost{background:transparent;color:var(--ink);border:1px solid rgba(0,0,0,.28)}
.btn.ghost:hover{background:rgba(0,0,0,.05);color:var(--ink)}

/* ── 需资质确认品种（条件放行）：属性全展示，但成交前须三项确认 ── */
.p.qual > .cat > .cat::after{
  content:"需资质确认";
  display:inline-block;margin-left:6px;font-size:11px;font-weight:600;letter-spacing:0;
  color:var(--text);background:var(--gray);border:1px solid var(--gray2);
  border-radius:980px;padding:1px 9px;vertical-align:1px;
}
.p.qual .m .qual{
  display:block;margin-top:8px;padding-top:8px;border-top:1px solid var(--gray2);
  color:var(--muted);font-size:11px;line-height:1.55;
}
.buy .noadd{font-size:12px;color:var(--muted);line-height:1.5;display:block;padding:2px 0}

/* ── 处方药：不展示包装/标签/说明书，不展示任何用途描述 ── */
.p.rx > .cat > .cat::after{
  content:"处方药";
  display:inline-block;margin-left:6px;font-size:11px;font-weight:600;letter-spacing:0;
  color:var(--text);background:var(--brand-soft);border:1px solid var(--brand);
  border-radius:980px;padding:1px 9px;vertical-align:1px;
}
.rxnote{
  font-size:12px;color:var(--text);background:var(--brand-soft);
  border:1px solid var(--brand);border-radius:12px;padding:12px 16px;
  margin:12px 0 0;line-height:1.65;
}

/* ── 商品详情弹层（所有品类通用）── */
.dwrap{display:flex;gap:22px;align-items:flex-start}
.dwrap .dimg{flex:0 0 220px;border-radius:14px;overflow:hidden;background:var(--gray);position:relative}
.dwrap .dimg img{width:100%;height:auto;display:block}
.dwrap .dimg .ph{
  position:absolute;left:8px;top:8px;background:rgba(255,255,255,.9);color:var(--text);
  font-size:11px;padding:2px 8px;border-radius:980px;
}
.dwrap .dinfo{flex:1;min-width:0}
.dwrap .dcat{font-size:12px;color:var(--brand-ink);font-weight:600;margin-bottom:6px}
.dwrap .dname{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0 0 12px;line-height:1.3}
.dwrap dl{margin:0;font-size:14px;color:var(--text)}
.dwrap dl div{display:flex;gap:10px;padding:7px 0;border-top:1px solid var(--gray2)}
.dwrap dl dt{flex:0 0 76px;color:var(--muted)}
.dwrap dl dd{margin:0;flex:1;min-width:0;word-break:break-all}
.dwrap .dnote{margin-top:14px;font-size:12px;color:var(--muted);line-height:1.6}
.dwrap .dbuy{margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media (max-width:640px){
  .dwrap{flex-direction:column;gap:14px}
  .dwrap .dimg{flex:none;width:100%}
  .dwrap .dname{font-size:19px}
}

/* ── 意向清单（类似购物车：缩略图 + 品名 + 步进器 + 删除）── */
.cartlist{margin:14px 0 0}
.cartlist .carth,
.cartlist .row{
  display:grid;grid-template-columns:52px 1fr 126px 64px;align-items:center;gap:14px;
  padding:12px 0;border-top:1px solid var(--gray2);
}
.cartlist .carth{border-top:none;padding:0 0 8px;font-size:12px;color:var(--muted)}
.cartlist .carth span:nth-child(2){text-align:center}
.cartlist .cthumb{
  width:52px;height:52px;border-radius:10px;object-fit:cover;background:var(--gray);display:block;
}
.cartlist .rn{min-width:0;font-size:15px;font-weight:500;line-height:1.4}
.cartlist .rn small{display:block;color:var(--muted);font-size:11px;font-weight:400;margin-top:3px}
.qtyctl{
  display:flex;align-items:center;justify-self:center;
  border:1px solid var(--gray2);border-radius:980px;overflow:hidden;background:#fff;
}
/* ⚠️ 弹层内有 .modal button 兜底样式（width:100%），清单里的按钮必须提高特异性覆盖 */
.cartlist .qtyctl button{
  width:34px;height:34px;min-height:0;padding:0;border:none;background:transparent;
  color:var(--ink);font-size:17px;line-height:1;cursor:pointer;font-family:inherit;
}
.cartlist .qtyctl button:hover{background:var(--gray)}
.qtyctl .qty{
  width:44px;height:34px;border:none;text-align:center;font-size:14px;font-family:inherit;
  background:transparent;color:var(--ink);-moz-appearance:textfield;
}
.qtyctl .qty::-webkit-outer-spin-button,
.qtyctl .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cartlist .del{
  justify-self:end;background:transparent;border:1px solid var(--gray2);color:var(--text);
  border-radius:980px;font-size:12px;padding:5px 12px;min-height:30px;cursor:pointer;font-family:inherit;
}
.cartlist .del:hover{border-color:var(--brand-ink);color:var(--brand-ink)}
.cartsum{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:14px;padding:12px 16px;background:var(--gray);border-radius:12px;
  font-size:14px;color:var(--text);
}
.cartsum b{font-size:17px;font-weight:600;color:var(--ink)}
.cartempty{text-align:center;padding:24px 10px 8px;color:var(--muted);font-size:14px;line-height:1.75}
.cartempty .cei{font-size:32px;color:var(--gray2);margin-bottom:10px;line-height:1}
.cartacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.modal .cartacts button{flex:0 0 auto;width:auto}
.btn.mini{font-size:14px;padding:8px 16px}

/* ── 打印（导出意向清单用）── */
.printarea{display:none}
@media print{
  header,.hero,main,footer,#cartbar,#modal,#detail{display:none!important}
  .printarea{display:block!important;padding:0 8px}
  .printarea h1{font-size:20px;margin:0 0 6px}
  .printarea .meta{font-size:12px;color:#555;margin-bottom:14px}
  .printarea table{width:100%;border-collapse:collapse;font-size:13px}
  .printarea th,.printarea td{border:1px solid #bbb;padding:6px 8px;text-align:left}
  .printarea th{background:#f0f0f0}
  .printarea .foot{margin-top:18px;font-size:11px;color:#555;line-height:1.7}
}

/* ── 机构声明条 ── */
.bar{background:var(--gray);border-bottom:1px solid var(--gray2);font-size:13px}
.bar .wrap{padding:14px 22px;display:flex;gap:12px;align-items:flex-start;color:var(--text);line-height:1.6}
.bar .tag{
  flex-shrink:0;background:var(--brand);color:var(--ink);font-size:11px;font-weight:600;
  padding:2px 10px;border-radius:980px;margin-top:2px;letter-spacing:0;
}
.bar b{color:var(--ink);font-weight:600}

/* ── 首页通知轮播（2026-10-01 国庆专题：三页统一红金 + 国庆装饰）──
   2026-10-01 董事长定：这个位置原来挂的是「机构采购」声明条；
   声明条已挪到「登记联系方式」与「提交采购单」两个弹层里（在客户真要留资、真要下单的当口提示），
   腾出来的位置改成能滚动的通知位。
   同日追加：三页改成**国庆专题** —— 正红 / 玫红 / 橙红三套红金底，
   每页都有金色五角星、放射光芒与底部金线；右侧一个大字纹理（77 / 礼 / 群）。
   内容在 assets/banner.js 顶部的 SLIDES 数组里改，改文案不用动 CSS。
   左右内边距用 max(22px, (100% - 1024px)/2) —— 通栏彩底，但内容跟着页面主体一起居中。
   ⚠️ 三套红都压到了「字 ≥4.5:1」（2026-10-01 无头浏览器实测，取各自最亮的那一端）：
      标题白字 5.88 / 6.35 / 5.26:1；正文（白 95%）5.40 / 5.86 / 4.88:1；
      「去登记」浅金字 5.74 / 4.75:1（第 1 页是纯展示、没有这行字）。
      艳归艳，字要看得清 —— 改这三套红之前先算一遍，别把字淹了。 */
.banner{
  background:#7A0C16;border-bottom:1px solid rgba(0,0,0,.22);
  position:relative;overflow:hidden;
}
.banner:focus-visible{outline:2px solid #F5C542;outline-offset:-2px}
.bwrap{display:flex;transition:transform .6s var(--ease);will-change:transform}

.bslide{
  flex:0 0 100%;min-width:100%;position:relative;overflow:hidden;
  display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;
  padding:22px max(22px, calc((100% - var(--maxw)) / 2)) 36px;
}
button.bslide{width:100%;border:none;font-family:inherit;text-align:left;cursor:pointer}
.bslide:hover{color:#fff}

/* 国庆装饰 ① 放射光芒（右上角往外散开的金色光束） */
.bslide::before{
  content:"";position:absolute;right:-70px;top:-100px;width:340px;height:340px;
  pointer-events:none;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,233,168,.22) 0deg 5deg, rgba(255,233,168,0) 5deg 13deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, rgba(0,0,0,.95) 12%, rgba(0,0,0,0) 68%);
  mask-image:radial-gradient(circle at 50% 50%, rgba(0,0,0,.95) 12%, rgba(0,0,0,0) 68%);
}
/* 国庆装饰 ② 底边一道金色细线（中间亮、两头淡出） */
.bslide::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg, rgba(245,197,66,0) 0%, #F5C542 22%, #FFE9A8 50%,
             #F5C542 78%, rgba(245,197,66,0) 100%);
  opacity:.9;
}

/* 装饰 ③ 右侧三根麦穗 + 底边两道麦浪（纯装饰，读屏跳过）
   ⛔ 2026-10-06 董事长定：**单个汉字的水印不要了**（原来那个「麦 / 穗 / 情」大字已撤），
      这里现在只有图形 —— 麦穗三根高矮不一，像站在田里的一片。 */
.bdeco{
  position:absolute;top:50%;transform:translateY(-50%);
  right:max(18px, calc((100% - var(--maxw)) / 2));
  display:flex;align-items:flex-end;gap:8px;pointer-events:none;
}
.bdeco .bstar{width:34px;height:34px;display:block;color:#F8E3A6;opacity:.95;flex:0 0 auto}
.bdeco .bstar--mid{width:26px;height:26px;opacity:.72}
.bdeco .bstar--sm{width:19px;height:19px;opacity:.5}
.bdeco .bstar svg{width:100%;height:100%;display:block}
/* 底边麦浪：两道波浪叠在金色细线上，风从麦田上推过去的样子 */
.bwave{
  position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none;
}
.bwave svg{width:100%;height:100%;display:block}

/* 三套红金底 —— 越往右越亮，但最亮处白字仍有 ≥4.5:1 */
.bslide--national{background:linear-gradient(118deg,#7A0C16 0%,#A81026 46%,#C8102E 100%)}
/* 2026-10-06 定稿：大麦（大卖）创意 · 秋收麦浪三套配色
   白话：从割倒的麦茬（深褐）→ 麦秆黄 → 晒透了的麦粒金，一层层亮起来，就是秋收那片麦浪。
   🔴 亮部一律推到 84% 以后：字在左半边，那里还是深褐，白字才吃得消（浅金上白字看不见）。 */
.bslide--barley  {background:linear-gradient(118deg,#4E3A08 0%,#6E5010 46%,#A87F1B 84%,#D8B54A 100%)}
.bslide--golden  {background:linear-gradient(118deg,#553F08 0%,#7A5812 46%,#B4881F 84%,#E0BC52 100%)}
.bslide--harvest {background:linear-gradient(118deg,#5E460A 0%,#836214 46%,#BD9025 84%,#E6C558 100%)}
/* 2026-10-06 加：金秋枫叶红两套配色（联采落地专题用）
   白话：从深棕红渐变到枫叶红再到金橙，就是秋天树叶从暗红转金黄的那个走向。 */
.bslide--autumn  {background:linear-gradient(118deg,#7E2A10 0%,#B8481C 48%,#D97B22 100%)}
.bslide--wheat   {background:linear-gradient(118deg,#8A4B12 0%,#C07018 48%,#E0A02A 100%)}
.bslide--lucky   {background:linear-gradient(118deg,#5E0F3C 0%,#9C1257 48%,#B81B4E 100%)}
.bslide--group   {background:linear-gradient(118deg,#7A0C16 0%,#A82B18 48%,#C53A18 100%)}

.bslide .btag{
  flex:0 0 auto;background:#F5C542;color:#8E1B1B;
  font-size:11px;font-weight:700;letter-spacing:0;
  padding:3px 10px;border-radius:980px;
}
.bslide .btxt{display:flex;flex-direction:column;gap:3px;min-width:0;position:relative}
.bslide .bt{
  font-size:clamp(17px,1.5vw,19px);font-weight:700;letter-spacing:-.01em;line-height:1.35;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}
.bslide .bd{font-size:13px;color:rgba(255,255,255,.95);letter-spacing:0;line-height:1.5}
.bslide .bgo{
  margin-left:auto;flex:0 0 auto;position:relative;
  font-size:13px;font-weight:600;color:#FFF3D0;white-space:nowrap;
}

/* 底部指示点：彩底上改用半透明白，当前页拉成长条并转成金色
   ⚠️ 透明度不能低于 .72 —— 实测 .5 时点只有 2.74:1（图形标准是 3:1），
      在红底上等于"看不见有几个点"。 */
.bdots{
  position:absolute;left:0;right:0;bottom:13px;
  display:flex;justify-content:center;align-items:center;gap:6px;
}
.bdot{
  width:7px;height:7px;padding:0;border:none;border-radius:980px;
  background:rgba(255,255,255,.72);cursor:pointer;
  transition:width .35s var(--ease),background .35s var(--ease);
}
.bdot:hover{background:rgba(255,255,255,.92)}
.bdot.on{width:20px;background:#F5C542}

/* ── 机构提示条（用在「登记联系方式」「采购单」两个弹层里）──
   2026-10-01 董事长定：原来挂在页面顶部给所有人看，改成在这两个当口提示 ——
   人要留资、要下单的时候才说，比首页泛泛挂一条管用。 */
.orgnote{
  display:flex;gap:10px;align-items:flex-start;
  background:var(--brand-soft);border:1px solid rgba(10,124,121,.28);
  border-radius:12px;padding:11px 13px;margin:0 0 14px;
  font-size:13px;line-height:1.6;color:var(--text);letter-spacing:0;
}
.orgnote .ontag{
  flex:0 0 auto;background:var(--brand);color:var(--ink);
  font-size:11px;font-weight:600;letter-spacing:0;
  padding:2px 9px;border-radius:980px;margin-top:2px;
}
.orgnote b{color:var(--ink);font-weight:600}

/* ── 区块 ── */
main{padding:0}
section{padding:88px 0;border-bottom:1px solid var(--gray2)}
section:last-of-type{border-bottom:none}
.sec-title{
  font-size:40px;font-weight:700;letter-spacing:-.022em;line-height:1.1;
  margin:0 0 10px;color:var(--ink);
}
.sec-sub{
  font-size:19px;font-weight:400;line-height:1.42;color:var(--muted);
  margin:0 0 44px;max-width:700px;letter-spacing:0;
}
.section-head{text-align:center}
.section-head .sec-sub{margin-left:auto;margin-right:auto}

h3{font-size:21px;font-weight:600;margin:26px 0 8px;color:var(--ink);letter-spacing:-.01em}
p{margin:10px 0}

/* ── 卡片（Apple 式大圆角浅灰） ── */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.tile{
  background:var(--gray);border-radius:var(--radius-lg);padding:36px 30px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.tile:hover{transform:scale(1.02);box-shadow:0 14px 36px rgba(0,0,0,.07)}
.tile .icon{
  width:48px;height:48px;border-radius:14px;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px;
}
.tile .t{font-size:21px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px;color:var(--ink)}
.tile .d{font-size:15px;line-height:1.6;color:var(--text);letter-spacing:0}

/* ── 内容卡 ── */
.card{background:var(--gray);border-radius:var(--radius-lg);padding:36px 34px;margin:24px 0}
.card p{margin:10px 0;font-size:16px;line-height:1.6;color:var(--text)}

/* ── 列表 ── */
.lc{list-style:none;padding:0;margin:6px 0}
.lc li{
  position:relative;padding:14px 0 14px 26px;border-bottom:1px solid rgba(0,0,0,.08);
  font-size:16px;line-height:1.6;color:var(--text);
}
.lc li:last-child{border-bottom:none}
.lc li::before{
  content:"";position:absolute;left:0;top:22px;width:7px;height:7px;
  background:var(--brand);border-radius:50%;
}

/* ── 提示框 ── */
.note{
  background:var(--gray);border-radius:var(--radius);padding:26px 30px;
  font-size:16px;line-height:1.6;color:var(--text);margin:24px 0;
}
.note .price{display:block;margin-top:8px;font-size:14px;color:var(--muted)}
.warnbox{
  background:var(--amber-soft);border-radius:var(--radius);padding:26px 30px;
  font-size:16px;line-height:1.6;color:#6b3c00;margin:24px 0;
}
.warnbox b{color:#4a2800;font-weight:600}

/* ── 表格（Apple 式：无外框、细分隔） ── */
table{
  width:100%;border-collapse:collapse;margin:28px 0;font-size:16px;background:#fff;
}
th,td{padding:18px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--gray2)}
th{width:190px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
tr:last-child td,tr:last-child th{border-bottom:none}
tr:hover td{background:#fafafa}
.price{color:var(--muted);font-size:14px}

/* ── KPI ── */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:36px 0}
.kpi .box{background:var(--gray);border-radius:var(--radius-lg);padding:34px 28px;text-align:center}
.kpi .num{font-size:48px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--brand-ink)}
.kpi .lab{font-size:15px;color:var(--muted);margin-top:12px;letter-spacing:0}

/* 配色逻辑（三色系：338 C / 灰 / 白）：
   未聚焦＝浅灰填充无描边（安静）；悬停＝灰再深一档；聚焦＝翻白 + 品牌绿描边 + 光晕（跳出来）。
   聚焦前后是一次明确的反差切换，不是只换个边框颜色。 */
.searchbar{
  display:flex;align-items:center;gap:10px;
  background:var(--fill);border:1px solid transparent;border-radius:980px;
  padding:0 14px;height:46px;margin:18px 0 0;max-width:560px;
  transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.searchbar:hover{background:var(--fill-hover)}
.searchbar:focus-within{
  background:#fff;border-color:var(--brand-ink);
  box-shadow:0 0 0 4px rgba(10,186,181,.30),0 2px 8px rgba(0,0,0,.06);
}
.searchbar .sicon{
  width:18px;height:18px;flex:0 0 18px;color:var(--muted);
  transition:color .25s var(--ease);
}
.searchbar:focus-within .sicon{color:var(--brand-ink)}
.searchbar input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:inherit;font-size:16px;color:var(--ink);letter-spacing:0;
}
.searchbar input::placeholder{color:var(--muted)}
.searchbar input::-webkit-search-cancel-button{display:none}
.searchbar .sclr{
  flex:0 0 auto;width:26px;height:26px;padding:0;border:none;
  background:rgba(0,0,0,.09);color:var(--text);border-radius:50%;
  font-size:16px;line-height:1;cursor:pointer;font-family:inherit;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.searchbar .sclr:hover{background:rgba(0,0,0,.18);color:var(--ink)}
.sres{margin:10px 0 -6px;font-size:13px;color:var(--muted);min-height:18px}
.sres b{color:var(--brand-ink);font-weight:600}
.sres.none{
  color:var(--text);background:var(--gray);border-radius:10px;padding:8px 12px;min-height:0;
}

/* ── 首页搜索（Hero 灰底之上，用实白底 + 投影抬起一层）── */
.herosearch{
  display:flex;align-items:center;gap:10px;margin:26px auto 0;max-width:520px;
  background:#fff;border:1px solid rgba(255,255,255,.9);border-radius:980px;
  padding:0 8px 0 18px;height:48px;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.07);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.herosearch:focus-within{
  border-color:var(--brand-ink);
  box-shadow:0 0 0 4px rgba(10,186,181,.32),0 10px 28px rgba(0,0,0,.10);
}
.herosearch .sicon{
  width:18px;height:18px;flex:0 0 18px;color:var(--muted);
  transition:color .25s var(--ease);
}
.herosearch:focus-within .sicon{color:var(--brand-ink)}
.herosearch input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-family:inherit;font-size:16px;color:var(--ink);letter-spacing:0;
}
.herosearch input::placeholder{color:var(--muted)}
.herosearch input::-webkit-search-cancel-button{display:none}
.herosearch button{
  flex:0 0 auto;border:none;cursor:pointer;font-family:inherit;
  background:var(--brand);color:var(--ink);font-size:14px;font-weight:500;
  padding:8px 20px;border-radius:980px;min-height:36px;
  transition:background .25s var(--ease);
}
.herosearch button:hover{background:var(--brand-deep)}

/* ── 分类筛选 ── */
.cats{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 32px}
.cats button{
  border:1px solid var(--gray2);background:#fff;color:var(--ink);font-size:14px;font-weight:400;
  padding:8px 18px;border-radius:980px;cursor:pointer;font-family:inherit;
  transition:all .25s var(--ease);letter-spacing:0;
}
.cats button:hover{border-color:var(--brand-ink);color:var(--brand-ink)}
.cats button.on{background:var(--brand);border-color:var(--brand);color:var(--ink);font-weight:500}

/* ── 商品卡 ── */
/* 2026-10-01 第十九轮定版：网格改「屏幕自适应」——
     屏幕越宽，一行排的品种越多；屏幕再窄，也保证并排 2 个（董事长原话："最少并排 2 个展示"）。
   白话：以前写死"一行 2 个"，27 寸大屏上两张卡被拉成两张"大饼"，左右还贴着屏幕边；
     现在改成"卡片只要不小于 240 就继续往里塞"——1440 的屏能排 5 个，手机上照样并排 2 个。
   两个网格为什么要分开写：
     .pgrid（商品页全部品种）用 auto-fill —— 卡片宽度恒定，最后一行剩几个就靠左排，不会被拉成巨幅。
   🔴 2026-10-01 第二十七轮（C93）：**.catgrid 也从 auto-fit 改成 auto-fill**。
     原因：首页每个厂家模块原来只有 2 个品，auto-fit 会把空位收掉、让 2 张卡平分整行，
     结果 1024 屏以上卡宽恒为 478px（"两张大饼"），屏幕再宽也没变化 —— 看着就是"没自适应"。
     现在每模块最多 12 个品（见 scripts/生成首页品类模块.py 的 PER），改用 auto-fill 后
     屏幕越宽一行排得越多（以下为 2026-10-01 无头浏览器实测值）：
       1920px → 网格 1316 · 5 列 · 卡宽 244px
       1440px → 网格 1316 · 5 列 · 卡宽 245px
       1280px → 网格 1236 · 4 列 · 卡宽 294px
       1024px → 网格  980 · 3 列 · 卡宽 316px
        768px → 网格  732 · 2 列 · 卡宽 360px
       ≤430px → 硬性 2 列（董事长定版"最少并排 2 个"），390px 卡宽 171px。
   ⚠️ auto-fit 只在「卡片数少于列数」时才该用（那时需要收掉空位让卡平分整行）。
   间距也跟着屏幕走：手机 12px、笔记本 16–20px、大屏 24px（clamp 自动算，不必每个断点硬调）。 */
.pgrid,.catgrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);   /* 兜底：再窄的屏也至少并排 2 个 */
  gap:clamp(12px,1.6vw,24px);
}
@media(min-width:600px){
  .pgrid,.catgrid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
}
/* 2026-10-01 定版：卡片改白底，文字区整块灰底 —— 让"图 / 信息"分成两层，文字成块更好读。 */
.p{
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);padding:28px 26px;
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease);
}
.p:hover{transform:scale(1.02);box-shadow:0 14px 36px rgba(0,0,0,.09);border-color:rgba(0,0,0,.13)}
/* ⚠️ 2026-10-01 第十九轮：修一个历史 bug —— 脚本生成的卡片里嵌了两层同名 class="cat"。
   外层是「整个文字区」的包裹层，内层才是「厂家标签」胶囊。原来的 .p .cat 把胶囊样式
   （浅绿底 / 980px 圆角 / 12px 绿字 / align-self:flex-start）**同时套到了外层包裹层**，结果是：
     ① 整块文字区顶着一个浅绿底的大圆角，跟"文字区灰底"的版式打架；
     ② align-self:flex-start 让文字区缩到内容宽度 —— 1920 屏上 244px 的卡，文字区只有 161px，右边空一大条。
   下面改用「> 直接子代」把两层分开：外层还原成撑满卡片的文字区，胶囊样式只留给内层那一个。
   白话：以前相当于把"厂家标签"那件小衣服，套在了"整块文字"这个人身上，肩膀绷着、下摆还露着绿边。 */
.p>.cat{
  align-self:stretch;width:100%;flex:1;
  display:flex;flex-direction:column;   /* 让 .m 的 margin-top:auto 生效 —— 各卡信息块底边才能对齐 */
  background:none;border-radius:0;padding:0;margin:0;
  font-size:inherit;color:inherit;letter-spacing:inherit;
}
.p>.cat>.cat{
  align-self:flex-start;font-size:12px;color:var(--brand-ink);background:var(--brand-soft);
  border-radius:980px;padding:3px 12px;margin-bottom:14px;letter-spacing:0;
}
/* overflow-wrap:anywhere —— 320px 老小屏上「补中益气丸（水丸）」这类带全角括号的长品名会被括号卡住不断行，
   导致横向撑出 4px。加上它只在实在放不下时才强制断开，正常屏宽下看不出区别。 */
.p .n{font-size:21px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin-bottom:14px;line-height:1.25;overflow-wrap:anywhere}
/* 文字区：整块灰底（margin-top:auto 让各卡片的信息块底边对齐）
   2026-10-01 定版：灰底加深到 #eeeeee —— 白卡上 #f5f5f7 太浅、看着跟白的一样。 */
.p .m{
  font-size:14px;line-height:1.75;color:var(--text);letter-spacing:0;
  background:var(--fill);border-radius:14px;padding:14px 16px;margin-top:auto;
}
.p .m span{display:block}
.p .m span::before{content:"·";color:var(--brand-ink);margin-right:7px;font-weight:700}
/* 2026-10-01 定版：卡片不显示「执行标准」「生产厂商」两行（点开详情仍可见） */
.p .m span.hideField{display:none}

/* ── 滚动渐入（Apple 式） ── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ── 页脚（Apple 式灰底小字） ── */
footer{background:var(--gray);padding:44px 0 40px;font-size:12px;color:var(--muted);line-height:1.6;letter-spacing:0}
footer .tel{font-size:19px;font-weight:600;color:var(--ink);margin:0 0 6px}
footer .line{margin:3px 0}
footer .muted{font-size:12px;color:#86868b;margin-top:12px;max-width:820px}
/* ── 东兴本草旗下背书条（规范 7.1：页脚 = 标志 + 东兴横版背书 + 商标声明）──
   横版取源文件原尺寸 113×65（≥ 规范 3.2 屏幕下限 96 宽），四周净空 33px = 标志高 50%。 */
.dx-endorse{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;
  margin:22px 0 6px;padding-top:22px;border-top:1px solid var(--gray2)}
.dx-endorse img{width:113px;height:auto;display:block}
.dx-endorse .tx{border-left:1px solid var(--gray2);padding-left:20px;font-size:12px;
  color:var(--muted);line-height:1.7;text-align:left}
.dx-endorse .tx b{display:block;font-size:13px;color:var(--ink);font-weight:600;margin-bottom:2px}
.dx-tm{font-size:11px;color:var(--muted);text-align:center;margin:0 0 10px;line-height:1.7}
@media(max-width:768px){
  .dx-endorse{flex-direction:column;gap:12px;text-align:center}
  .dx-endorse .tx{border-left:none;padding-left:0;text-align:center}
}

/* 页脚语言入口（2026-10-06 董事长定：多语言各个页面都要有入口）
   白话：顶栏那颗选择器在页面最顶上，滚到底了还得回到顶部才能切语言 ——
   所以页脚再放一颗。两颗是同一个造法（都带 data-langsel 记号），
   切哪颗都一样，另一颗跟着变，不会出现「顶栏英文、页脚中文」的错位。
   这颗由 assets/i18n.js 注入，页面里不用手写。 */
.langrow{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:12px;color:#86868b}
.langrow-t{flex:0 0 auto}
.langrow select{
  font-family:inherit;font-size:12px;color:var(--ink);
  border:1px solid #d2d2d7;border-radius:980px;background:#fff;
  padding:4px 10px;max-width:160px;cursor:pointer;
}
@media(max-width:768px){
  .langrow{font-size:13px;margin-top:16px}
  .langrow select{font-size:13px;padding:7px 12px;min-height:34px}
}

/* 流体字号：任何屏宽都自动缩放，不必每个断点硬调 */
.hero h1{font-size:clamp(34px,7.6vw,60px)}
.hero .sub{font-size:clamp(16px,2.4vw,21px)}
.sec-title{font-size:clamp(26px,4.4vw,40px)}
.sec-sub{font-size:clamp(16px,2.1vw,19px)}
.kpi .num{font-size:clamp(36px,5.4vw,48px)}
.tile .t,.p .n{font-size:clamp(18px,2.4vw,21px)}

/* ============================================================
   响应式：手机 / 大屏手机 / 平板 / 桌面 / 横屏 / 触屏
   ============================================================ */

/* ── 平板竖屏与小笔记本 ── */
@media(min-width:600px) and (max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
/* 桌面（≥1025px）不再写死列数 —— 商品网格已交给上面的 auto-fill / auto-fit 按屏宽自动算。
   大屏一行能排到 5 个，卡片变窄了，内边距跟着收一档，字才不会被挤在中间一条。 */
@media(min-width:1025px){
  .pgrid .p{padding:22px 20px}
  .pgrid .p .n{margin-bottom:12px}
  .pgrid .p .m{padding:12px 14px}
}

/* ── 手机（≤768） ── */
@media(max-width:768px){
  .wrap{padding:0 18px}
  .hero{padding:76px 0 84px}
  .hero .mark{width:54px;height:54px;margin-bottom:20px}
  .hero .sub{margin-bottom:26px}
  .hero .cta-row{flex-direction:column;align-items:stretch;padding:0 8px}
  .hero .cta-row .btn{width:100%}
  section{padding:60px 0}
  .sec-sub{margin-bottom:32px}
  .grid{grid-template-columns:1fr}
  /* 手机：硬性保证并排 2 个 —— 董事长定版"最少并排 2 个展示"，不受屏宽自适应影响 */
  .pgrid,.catgrid{grid-template-columns:repeat(2,1fr)}
  .p{padding:14px 12px}
  .p .n{font-size:16px;margin-bottom:8px}
  .p .m{font-size:12px;line-height:1.6}
  /* 外层文字区在手机上同样保持撑满（见上面 .p>.cat 的说明），胶囊照样缩小一档 */
  .p>.cat{padding:0;margin:0;font-size:inherit}
  .p>.cat>.cat{margin-bottom:8px;font-size:11px;padding:2px 9px}
  .tile,.card,.note,.warnbox{padding:26px 22px}
  .kpi{grid-template-columns:1fr;gap:14px}
  .kpi .box{padding:26px 22px}

  /* 分类按钮改横向滑动，避免挤成三行 */
  .cats{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin:24px -18px 26px;padding:0 18px 8px;
  }
  .cats::-webkit-scrollbar{display:none}
  .cats button{flex:0 0 auto}

  /* 表格改成上下堆叠，避免横向溢出 */
  table,tbody,tr,th,td{display:block;width:100%}
  th{width:100%;padding:14px 0 4px;border-bottom:none;font-size:13px;color:var(--muted)}
  td{padding:0 0 14px;border-bottom:1px solid var(--gray2);font-size:16px}
  tr{padding:6px 0}
  tr:last-child td{border-bottom:none}
  tr:hover td{background:transparent}

  .hd{height:auto;min-height:80px;padding:8px 0}
  nav a{padding:6px 9px}
}

/* ── 小屏手机（≤430，iPhone / 主流安卓） ── */
@media(max-width:430px){
  .wrap{padding:0 16px}
  /* 品牌组合在手机上照常完整显示：图形标 + 东兴本草®严选 */
  .logo img{height:25px}
  .logo img.dxmark{height:55px;width:96px}
  .logo .nm{font-size:15px}
  .logo .nm sup{font-size:8px}
  nav a{padding:6px 6px;font-size:11px}
  .bar{flex-direction:column;gap:6px}
  .acctbtn{font-size:12px;padding:5px 11px 5px 9px;gap:5px}
  .acctbtn .aci svg{width:15px;height:15px}
  .hero{padding:64px 0 72px}
  section{padding:52px 0}
  .p{padding:22px 20px}
  .lc li{padding-left:20px;font-size:15px}
  footer .line{word-break:break-word}
}

/* ── 顶栏两行（≤480）：首行 品牌 + 右上角「登录注册」，第二行 导航 ──
   为什么要拆两行：一行塞「品牌 167 + 三个导航 178 + 登录钮 99 ＝ 444px」，
   在 431～462px 这段宽度上会挤出屏幕（实测 431px 时溢出 31px），
   手机上（375/390）挤得更厉害（溢出 7～22px）。两行更稳，登录钮也不会被挤变形。 */
@media(max-width:700px){
  .hd{height:auto;flex-wrap:wrap;gap:4px;padding:6px 0}
  /* 语言选择器排在「登录注册」左边，两颗一起被推到首行最右。
     🔴 .acctwrap 的 margin-left:auto 不能省：万一屏幕太窄这两颗一起掉到第二行，
        靠它才能把按钮顶回右边 —— 否则按钮跑到左边，展开的面板会戳出屏幕外。 */
  nav{width:100%;margin-left:-6px;justify-content:flex-start;order:2}
  .acctwrap{order:1;margin-left:auto}
  .langsel{order:1;margin-left:4px}
  .langsel select{max-width:88px;font-size:11px;padding:5px 7px}
}
/* 🔴 为什么断点从 480 提到 700：加了语言选择器之后，顶栏这一行最少要 582px 才装得下
   （logo 136 + 导航 249 + 选择器 100 + 登录注册 97）。481～599 这一段会挤不下，
   登录注册按钮被顶出屏幕右边（实测右缘 582 > 视口）。所以这一段也改成两行排版。 */

/* ── 超小屏（≤360）：品牌占一行、导航另起一行，也不再砍掉品牌名 ── */
@media(max-width:360px){
  .hd{height:auto;flex-wrap:wrap;gap:2px;padding:7px 0 5px}
  .logo img{height:24px}
  .logo img.dxmark{height:55px;width:96px}
  .logo .nm{font-size:15px}
/* 超小屏首行放 logo + 登录注册，第二行放语言选择器，导航**另起一行占满宽度**。
   ⚠️ 2026-10-02 改：原先写 width:calc(100% - 100px)，是给语言选择器让位；
      但导航项抬到 44px 后四项要 240px，184px 的 nav 装不下 → 挤爆。
      改成独占一行（order:3 排到最后），宽度用满，语言选择器不再从导航身上割肉。
   🔴 联动坑（同一天踩到）：nav 一独占，语言选择器（order:2）就被塞回首行、
      排在「登录注册」右边，于是「登录注册」的 margin-left:auto 顶不到最右 ——
      而展开的账户面板是 `right:0` 相对「登录注册」定位的，按钮不贴右
      ⇒ 面板左边戳出屏幕 54px（360px 实测 x=-54）。所以语言选择器也改成独占一行。 */
nav{width:100%;margin-left:-6px;justify-content:flex-start;order:3}
  .acctwrap{order:1;margin-left:auto}
  .langsel{order:2;flex:0 0 100%;width:100%;margin-left:0;margin-right:0;justify-content:flex-end}
  .langsel select{max-width:88px;font-size:10px;padding:4px 6px}
  nav a{padding:5px 7px;font-size:11px}
  .hero h1{font-size:30px}
  .hero .mark{width:44px;height:44px}
  .hero img.dxmark-h{width:120px;margin-bottom:30px}
  .dxup{width:120px;margin:0 auto 30px}
  .dxup .dxuimg{width:120px}
  .dxup .dxunm{left:63.7px;top:43.75px;width:55.3px;font-size:18.75px}
  .hero img.dxmark-v{width:58px;height:96px;margin-bottom:30px}
}

/* ── 手机横屏（矮高度） ── */
@media(max-height:480px) and (orientation:landscape){
  .hero{padding:40px 0 44px}
  .hero .mark{width:38px;height:38px;margin-bottom:12px}
  .hero img.dxmark-h{width:110px;margin-bottom:12px}
  .hero img.dxmark-v{width:58px;height:96px;margin-bottom:12px}
  .hero h1{font-size:30px}
  .hero .sub{font-size:15px;margin-bottom:18px}
  .hero .cta-row{flex-direction:row;justify-content:center}
  .hero .cta-row .btn{width:auto}
  section{padding:44px 0}
  header{position:static}                 /* 横屏时不占 sticky 高度 */
}

/* ── 触屏设备：去掉 hover 位移，放大点击区 ── */
@media(hover:none){
  .tile:hover,.p:hover{transform:none;box-shadow:none}
.btn,.cats button{min-height:44px}
/* 2026-10-02 董事长定：导航项与按钮一样抬到 44px（Apple 规范最小可点区 44×44pt）。
   原先这里写 36px，与同一段里 .btn 的 44px 不一致 —— 手机上点导航容易点空。 */
nav a{min-height:44px;display:flex;align-items:center}
  .cats button{padding:10px 18px}

  /* ── 2026-10-02 董事长：「手机端必须适配」 ──
     ⭐ 为什么非得单列这一段：**缩窗口测不出这些**。真机模式（is_mobile + hasTouch）一开，
     才量出 8 类可点区不足 44：轮播指示点 7px、卡片「查看详情」20px、分类「查看」23px、
     语言选择器 24px、品牌链接 25px、登录注册 30px、数据设置 34px、搜索按钮 36px。
     原则：**观感尽量不变，用内边距／伪元素把命中区撑到 44×44**（Apple 规范最小可点区）。 */
  header a.logo{min-height:44px;display:flex;align-items:center}
  .acctbtn{min-height:44px}
  .langsel select{min-height:44px;padding:6px 9px}
  .herosearch button,.searchbar button{min-height:44px}
  /* 卡片里的「查看详情／查看」是文字链（20～23px 高，手指容易点空）：
     改成 inline-flex + 上下撑到 44 —— 文字位置不动，上下各多出约 11px 透明余量。 */
  .p .pmore,.catmod .cmore{min-height:44px;display:inline-flex;align-items:center}
  /* 轮播指示点：视觉是 7px 小圆点，靠伪元素撑命中区。
     ⚠️ 水平只敢撑到 26px：指示点间距只有 6px，撑到 44 会和相邻点互相盖住，反而点错。
        垂直方向没有邻居，直接撑满 44。 */
  .bdot{position:relative}
  .bdot::after{content:"";position:absolute;left:50%;top:50%;
               width:26px;height:44px;transform:translate(-50%,-50%)}
  /* 字号兜底：中文 11px 在手机上偏细，统一抬到 12（商标上标 ® 是法定标注，保持 8px 不动） */
  nav a{font-size:12px}
  .orgnote .ontag{font-size:12px}
  .footnotes p{font-size:12px}
}

/* ── iPhone 刘海与底部横条：安全区适配 ── */
@supports(padding:env(safe-area-inset-left)){
  .wrap{padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
  @media(max-width:768px){
    .wrap{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  }
  footer{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
  header{padding-top:env(safe-area-inset-top)}   /* 顶条移除后，刘海安全区由导航条承担 */
}

/* ── 打印 ── */
@media print{
  header,.hero,.cats,.cta-row,.acctwrap{display:none}
  body{font-size:12px}
  section{padding:16px 0;break-inside:avoid}
  .card,.tile,.p{background:#fff;border:1px solid #ddd}
}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{animation:none!important;transition:none!important}
}

/* ============================================================
   下单交互（采购单）—— 界面随开关状态出现/消失
   ============================================================ */
.buy{display:flex;gap:8px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--gray2)}
.buy .qty{
  width:64px;flex-shrink:0;font-family:inherit;font-size:15px;text-align:center;
  border:1px solid var(--gray2);border-radius:8px;padding:8px 6px;color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.buy .qty:focus{outline:2px solid var(--brand-ink);outline-offset:-1px;border-color:var(--brand-ink)}
.buy .add{
  flex:1;min-height:44px;border:none;border-radius:980px;background:var(--brand);color:var(--ink);
  font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;letter-spacing:0;
  transition:background .25s var(--ease);
}
.buy .add:hover{background:var(--brand-deep)}
.buy .add:disabled{background:#c7c7cc;cursor:not-allowed}

/* 底部采购单栏 */
.cartbar{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:rgba(251,251,253,.94);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--gray2);
  padding:12px 0 calc(12px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .35s var(--ease);
}
.cartbar.show{transform:none}
.cartbar .inner{
  max-width:var(--maxw);margin:0 auto;padding:0 22px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.cartbar .txt{flex:1;min-width:150px;font-size:14px;color:var(--ink)}
.cartbar .txt b{font-size:17px;font-weight:600}
.cartbar button{
  font-family:inherit;font-size:15px;font-weight:500;border-radius:980px;
  padding:11px 22px;min-height:44px;cursor:pointer;border:none;letter-spacing:0;
  background:var(--brand);color:var(--ink);transition:background .25s var(--ease);
}
.cartbar button:hover{background:var(--brand-deep)}
.cartbar button.ghost{background:transparent;color:var(--brand-ink);border:1px solid var(--gray2)}

/* ── 右上角账号入口「登录注册」──
   2026-10-01 董事长定：商品页顶上横着的那条登录条**整体撤掉**，
   改成每个页面右上角一个跟咨询钮同款的胶囊钮，点开面板里分「登录」「注册」两件事。
   白话：门口那张桌子撤了，换成柜台上一块小牌；想办业务了再点开，里面两个窗口各办各的。 */
.hd .logo{margin-right:auto}          /* 让导航与账号钮一起靠右 */
.acctwrap{position:relative;flex:0 0 auto}
.acctbtn{
  display:inline-flex;align-items:center;gap:6px;max-width:190px;
  background:var(--brand);color:var(--ink);border:none;border-radius:980px;
  padding:6px 13px 6px 11px;font-family:inherit;font-size:13px;font-weight:500;
  letter-spacing:0;white-space:nowrap;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:background .22s var(--ease),box-shadow .22s var(--ease);
}
.acctbtn:hover{background:var(--brand-deep)}
.acctbtn:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px}
.acctbtn .aci{display:flex;align-items:center;color:var(--brand-ink);flex:0 0 auto}
.acctbtn .actx{overflow:hidden;text-overflow:ellipsis}
.acctbtn.open{box-shadow:0 6px 18px rgba(0,0,0,.16)}
/* 已登录：翻白底 + 墨绿字，跟未登录的绿底区分开 */
.acctbtn.on{
  background:#fff;color:var(--brand-ink);
  box-shadow:inset 0 0 0 1px rgba(10,124,121,.42),0 2px 8px rgba(0,0,0,.06);
}
.acctpanel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:210;
  width:min(310px,calc(100vw - 32px));max-height:calc(100vh - 96px);overflow:auto;
  background:#fff;border:1px solid var(--gray2);border-radius:16px;
  box-shadow:0 16px 44px rgba(0,0,0,.18);padding:14px;text-align:left;
}
.acctpanel[hidden]{display:none!important}
.acctpanel .orgnote{margin:0 0 12px;font-size:12px;padding:9px 11px}
.aptabs{display:flex;gap:6px;margin-bottom:12px}
.aptabs[hidden]{display:none!important}
.aptab{
  flex:1;font-family:inherit;font-size:14px;font-weight:500;letter-spacing:0;
  padding:8px 0;min-height:38px;border:none;border-radius:980px;cursor:pointer;
  background:var(--fill);color:var(--text);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.aptab:hover{background:var(--fill-hover)}
.aptab.on{background:var(--brand);color:var(--ink)}
.apform{display:flex;flex-direction:column;gap:10px}
.apform[hidden]{display:none!important}
.apf{display:flex;flex-direction:column;gap:5px}
/* ⚠️ 登录面板里两套输入框（口令 / 验证码）靠 hidden 切换。
   .apf 是 display:flex，作者样式的优先级压过浏览器默认的 [hidden]{display:none}
   → 不加这条，两套框会同时显示。 */
.apf[hidden]{display:none!important}
.apf>span{font-size:12px;color:var(--muted);letter-spacing:0}
/* 输入框沿用站内同一套语言：浅灰底 → 聚焦翻白 + 338 C 描边 + 光晕
   （与搜索框、登记表单、以及撤掉前的登录条完全一致） */
.apf input{
  width:100%;font-family:inherit;font-size:14px;color:var(--ink);
  padding:9px 12px;min-height:40px;
  border:1px solid transparent;border-radius:10px;background:var(--fill);
  transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.apf input:hover{background:var(--fill-hover)}
.apf input::placeholder{color:var(--muted)}
.apf input:focus{
  outline:none;background:#fff;border-color:var(--brand-ink);
  box-shadow:0 0 0 3px rgba(10,186,181,.30);
}
/* 手机号 + 「获取验证码」并排一行 */
.apcode{display:flex;gap:8px}
.apcode input{flex:1;min-width:0}
.apvc{
  flex:0 0 auto;font-family:inherit;font-size:13px;font-weight:500;letter-spacing:0;
  padding:0 12px;min-height:40px;border-radius:10px;cursor:pointer;white-space:nowrap;
  background:#fff;color:var(--brand-ink);border:1px solid rgba(10,124,121,.42);
  transition:background .2s var(--ease),color .2s var(--ease);
}
.apvc:hover{background:var(--brand-soft)}
.apvc:disabled{background:var(--gray);color:var(--muted);border-color:var(--gray2);cursor:not-allowed}
/* ── 登录方式切换：口令 / 验证码（2026-10-01 董事长定，客户自己挑）──
   白话：原来只认「账号+口令」一把钥匙，现在多配一把「手机号+短信码」。
   两档胶囊与上方「登录/注册」同款观感，选中的那档转品牌绿深灰字（8.92:1）。 */
/* ⭐ 2026-10-02 简化：口令/验证码那排「胶囊切换」撤掉了，改在登录钮下方放一行两个小字 ——
   「忘记密码？」在左，「验证码登录 / 口令登录」在右。少一整行，也不用先选模式。
   （旧规则 .apseg / .apsegb / .apsegb:hover / .apsegb.on 一并删除，别留死代码。） */
.apfoot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:-2px;
}
.apfoot .aplink{padding:4px 0;text-align:left}
.apfoot .aplink[hidden]{display:none!important}
/* 协议行里的两个文件链接（市场通行写法：一句话 + 可点开的文件名） */
.aptos{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px}
.aptos:hover{color:var(--ink)}
/* 忘记密码：弱化下划线入口，跟"降级入口"同一档 */
.aplink{
  font-family:inherit;font-size:12.5px;letter-spacing:0;text-align:center;
  padding:2px;border:none;background:none;color:var(--brand-ink);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:0;
}
.aplink:hover{color:var(--ink)}
/* 忘记密码的说明块：中性灰底，不引第四色 */
.apforgot{
  margin:0;font-size:12px;line-height:1.7;color:var(--text);
  background:var(--gray);border-radius:10px;padding:9px 11px;
}
.apforgot b{color:var(--ink);font-weight:600}
.apforgot[hidden]{display:none!important}
.apchk{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--text);line-height:1.6}
.apchk input{margin:2px 0 0;flex:0 0 auto;width:16px;height:16px;accent-color:var(--brand-ink)}
.apgo{
  width:100%;font-family:inherit;font-size:15px;font-weight:500;letter-spacing:0;
  padding:11px;border:none;border-radius:980px;min-height:44px;cursor:pointer;
  background:var(--brand);color:var(--ink);transition:background .22s var(--ease);
}
.apgo:hover{background:var(--brand-deep)}
.apgo.line{background:#fff;color:var(--brand-ink);border:1px solid rgba(10,124,121,.42)}
.apgo.line:hover{background:var(--brand-soft)}
.apgo:disabled{background:#c7c7cc;color:#fff;cursor:not-allowed}


/* ── 注册页：五种身份绑定方式（微信 / 钉钉 / 飞书 / Apple / Google）──
   2026-10-01 董事长定：客户自选一种，但**机构名称与手机号仍必填、手机号仍须过验证码**。
   白话：这五个只是"再押一个证件"，不是替掉手机号那一栏 —— 所以它们是选填的，
   而机构名称、手机号、验证码那三栏是必填的。
   布局：3 列网格，圆底图标在上、名字在下；面板宽 310px，5 个占两行。
   ⚠️ 图标属图形元素，标准是 3:1（不是文字的 4.5:1）。白图标压在各品牌色圆底上实测
      5.05 / 4.10 / 4.28 / 15.6 / 3.56:1 全部达标 ——
      其中微信不能用品牌绿 #07C160（白图标只有 2.38:1），已压深到 #1A7F42。 */
.apthird{border-top:1px solid var(--gray2);padding-top:11px;margin-top:2px}
.apth{margin:0 0 9px;font-size:12px;color:var(--muted);line-height:1.5}
.apbrand{display:flex;flex-direction:column;gap:8px}
.appr{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:44px;padding:0 14px;
  font-family:inherit;font-size:13.5px;font-weight:500;letter-spacing:0;
  border:1px solid transparent;border-radius:8px;
  background:#fff;color:var(--ink);cursor:pointer;
  transition:filter .2s var(--ease),background .2s var(--ease);
}
.appr:hover{filter:brightness(1.07)}
.appr:active{filter:brightness(.93)}
.appr:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px}
.appr .api{
  width:20px;height:20px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:none;border-radius:0;color:#fff;
}
.appr .api svg{width:18px;height:18px;display:block}
.appr .apn{line-height:1;white-space:nowrap}

/* ── ⭐ 图标模式（2026-10-01 C103 / 2026-10-02 修订：Apple 与 Google 分开）────────
   上排：微信 / 钉钉 / 飞书 三个 44×44 圆图标，每家自家的官方底色 + 自家标识
         —— 这就是"保持 app 原有 UI 风格"那条要求的落点。
   下两条：Apple / Google 各按官方规范的整条按钮，文案可见、圆角按各家规范。
   🔴 为什么要分开：Apple《Sign in with Apple》与 Google《Sign in with Google》的规范
      都**逐字规定了按钮上必须带文案**，纯图标不合规范；前三个没有这条硬性要求。

   🔴 44px 不是随手定的：Apple 规范要求可点区不小于 44×44pt，也是各家 app 里登录图标的
      通行尺寸；再小手指就点不中了。
   🔴 图标里的 .apn 用 sr-only 方式隐藏（不占视觉空间，读屏仍能读到官方文案）：
      光看图标旁人未必认得出是哪家；读屏用户得有个名称。
      ⭐ 想回到 C96 那种"五条全带文字"的版式，只需把 .apbrand 上的 split 去掉。 */
.apbrand.split{display:flex;flex-direction:column;gap:8px}
.apirow{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.appr.icon{
  width:44px;height:44px;min-height:44px;flex:0 0 auto;
  padding:0;gap:0;border-radius:50%;position:relative;
  transition:filter .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease);
}
.appr.icon:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.14)}
.appr.icon:active{filter:brightness(.93);transform:translateY(0)}
.appr.icon .api{width:22px;height:22px}
.appr.icon .api svg{width:22px;height:22px}
.appr.icon .apn{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* 绑定成功的那一个：右下角挂个对勾 —— 跳出去授权又跳回来，中间发生了什么得看得见 */
.appr.icon[data-bound="1"]::after{
  content:"✓";position:absolute;right:-3px;bottom:-3px;
  width:17px;height:17px;border-radius:50%;
  background:var(--brand);color:#fff;box-shadow:0 0 0 2px #fff;
  font-size:11px;line-height:17px;text-align:center;font-weight:700;
}
/* Apple / Google：整条按钮，圆角按各家官方规范（Apple 约为高度的六分之一，Google 为 4px） */
.appr.full[data-pv="apple"]{border-radius:7px}
.appr.full[data-pv="google"]{border-radius:4px}
/* 面板很窄（≤360px）时收一点间距，三个图标仍排得下、不换行 */
@media (max-width:360px){
  .apirow{gap:9px}
  .appr.icon{width:42px;height:42px;min-height:42px}
  .appr.icon .api svg{width:21px;height:21px}
}

/* ── 第三方身份绑定：每家按各家的官方按钮规范（2026-10-01 C96 董事长定）────────
   原来是五家共用一个模子（圆底品牌色图标 + 平台名），现在一家一款：
     微信   整块压深微信绿 + 白标识白字
     钉钉   整块品牌蓝   + 白标识白字
     飞书   整块品牌蓝   + 白标识白字
     Apple  黑底         + 白苹果标识白字（Sign in with Apple 规范）
     Google 白底 + 1px 灰边 + 深色字 + 四色 G（官方规范，四色不得单色化）
   🔴 压深的缘由见 account.js 里 PV 上方注释：整块色底配白字必须 ≥4.5:1，
      原品牌蓝只有 4.10 / 4.28，不达标 —— 沿用 C91 定案的处理原则。 */

/* 微信：压深后的微信绿 #1A7F42（C91 定案 —— 品牌绿 #07C160 配白仅 2.38:1，不达标） */
.appr[data-pv="wx"]{background:#1A7F42;border-color:#1A7F42;color:#fff}
/* 钉钉：品牌蓝压深 #1570F0（原 #1677FF 配白 4.10:1 → 压深后 4.56:1） */
.appr[data-pv="ding"]{background:#1570F0;border-color:#1570F0;color:#fff}
/* 飞书：品牌蓝压深 #306BEF（原 #3370FF 配白 4.28:1 → 压深后 4.69:1） */
.appr[data-pv="feishu"]{background:#306BEF;border-color:#306BEF;color:#fff}
/* Apple：Sign in with Apple 规范 —— 黑底白字；🔴 苹果标识不得改色、不得加渐变或阴影 */
.appr[data-pv="apple"]{background:#000;border-color:#000;color:#fff}
/* Google：官方规范 —— 白底 + 1px #DADCE0 边框 + 深色字 #1F1F1F(16.5:1) + 四色 G */
.appr[data-pv="google"]{background:#fff;border-color:#DADCE0;color:#1F1F1F}
.appr[data-pv="google"]:hover{background:#F7F9FC;filter:none}
/* 降级入口：不便用那几种方式的人留一条路，视觉上弱化处理 */
.apalt{
  font-family:inherit;font-size:12.5px;letter-spacing:0;text-align:center;
  padding:6px;border:none;background:none;color:var(--brand-ink);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:0;
}
.apalt:hover{color:var(--ink)}
.apmsg{
  margin:0;font-size:12.5px;line-height:1.6;color:#8a3b12;
  background:#fff5ec;border:1px solid #f3d9c4;border-radius:10px;padding:8px 10px;
}
.apmsg[hidden]{display:none!important}
.aptip{margin:0;font-size:11.5px;line-height:1.65;color:var(--muted)}
.aptip b{color:var(--text);font-weight:600}
.apok{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.apln{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.apln b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apdone b{display:block;font-size:15px;color:var(--ink);margin-bottom:8px}
.apdone p{font-size:13px;color:var(--text);margin:0 0 8px}

/* 下单状态提示 */
.orderstate{
  background:var(--brand-soft);border-radius:var(--radius);padding:22px 26px;
  font-size:15px;line-height:1.6;color:var(--text);margin:20px 0;
}
.orderstate b{color:var(--ink)}
.orderstate.closed{background:var(--gray);color:var(--ink)}
.orderstate.closed b{color:#4a2800}

/* 结果弹层 */
.modal{
  position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.4);padding:22px;
}
.modal.show{display:flex}
.modal .box{
  position:relative;
  background:#fff;border-radius:var(--radius-lg);padding:32px 30px;max-width:520px;width:100%;
  max-height:80vh;overflow:auto;
}
.modal .box.wide{max-width:660px;text-align:left}
.modal button.x{
  position:absolute;right:12px;top:10px;width:34px;height:34px;min-height:0;padding:0;
  border:none;border-radius:50%;background:var(--gray);color:var(--muted);
  font-size:18px;line-height:1;cursor:pointer;font-family:inherit;
}
.modal button.x:hover{background:var(--gray2);color:var(--ink)}
.modal h3{margin:0 0 12px;padding-right:44px;font-size:21px;font-weight:600;color:var(--ink)}
.modal pre{
  background:var(--gray);border-radius:12px;padding:16px;font-size:13px;line-height:1.7;
  overflow:auto;white-space:pre-wrap;word-break:break-all;margin:12px 0;
  font-family:"SF Mono",Menlo,monospace;
}
.modal button{
  width:100%;font-family:inherit;font-size:17px;font-weight:500;border-radius:980px;
  padding:12px;min-height:44px;border:none;background:var(--brand);color:var(--ink);cursor:pointer;
}

@media(max-width:430px){
  /* 搜索框 */
  .searchbar{height:44px;padding:0 12px;margin-top:14px}
  .herosearch{height:46px;padding:0 6px 0 14px;margin-top:20px}
  .herosearch button{padding:8px 16px}
  /* 清单：手机上改两行（品名一行、数量与删除一行） */
  .cartlist .carth{display:none}
  .cartlist .row{grid-template-columns:44px 1fr auto;gap:10px}
  .cartlist .cthumb{width:44px;height:44px;grid-row:span 2;align-self:start}
  .cartlist .rn{grid-column:2 / 4;font-size:14px}
  .cartlist .qtyctl{grid-column:2 / 3;justify-self:start}
  .cartlist .del{grid-column:3 / 4;justify-self:end}
  .cartsum{padding:10px 12px;font-size:13px}
  .cartbar .inner{padding:0 16px;gap:8px}
  .cartbar .txt{font-size:13px;min-width:110px}
  .cartbar button{padding:10px 16px;font-size:14px}
  .modal .box{padding:24px 20px}
}

/* ============================================================
   商品图（ToC 电商式卡片：上图下文）
   ============================================================ */
.p .thumb{
  position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  background:#f0eee9;margin-bottom:14px;
}
.p .thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease);
}
.p:hover .thumb img{transform:scale(1.04)}
.p .thumb .ph{
  position:absolute;left:8px;bottom:8px;
  background:rgba(29,29,31,.62);color:#fff;font-size:11px;letter-spacing:0;
  padding:2px 9px;border-radius:980px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
/* 图片说明条 */
.imgnote{
  background:var(--gray);border-radius:var(--radius);padding:16px 22px;
  font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 24px;
}
@media(hover:none){
  .p:hover .thumb img{transform:none}
}

/* ============================================================
   品类模块（首页）：每个品类一块，块内卡片交给网格自适应
   2026-10-01 第二十七轮（C93）：原来是「块内并排 2 个品」，1024 屏以上卡宽恒为 478px，
   屏幕再宽也没变化 —— 看着就是"没自适应"。现在每块最多 12 个品 + auto-fill 网格。
   ============================================================ */
/* ⚠️ 2026-10-01 改动：下面这条原是给「首页品类区下方的登记按钮」用的
   （`.catwide .ld/.ltip` 收窄 620px 居中 + `.catwide .lbtn` 居中）。
   董事长指示去掉首页那一整块登记文案与按钮后，首页 .catwide 里已无 .ld / .lbtn，
   这两条成了死规则，一并删掉。留资**弹层**（.leadmodal）的 .ld/.ltip 样式不受影响，仍在上面。 */
.catgrid{margin-top:8px}
.catmod{margin-bottom:8px}
.catmod .chead{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 14px;
  padding:22px 0 14px;border-top:1px solid #e6e6ea;
}
.catmod:first-child .chead{border-top:none}
.catmod .cname{font-size:clamp(19px,2.6vw,24px);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.catmod .cmeta{font-size:13px;color:var(--muted);letter-spacing:0}
.catmod .cmore{
  margin-left:auto;font-size:14px;color:var(--brand-ink);text-decoration:none;
  border-bottom:1px solid rgba(10,124,121,.35);padding-bottom:1px;
}
.catmod .cmore:hover{border-bottom-color:var(--brand-ink)}

/* ============================================================
   留资登记弹层（手机号 / 微信号）
   ============================================================ */
.leadmodal{
  position:fixed;inset:0;z-index:400;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);padding:22px;
}
.leadmodal.show{display:flex}
.leadmodal .lbox{
  position:relative;background:#fff;border-radius:var(--radius-lg);padding:30px 28px;
  max-width:480px;width:100%;max-height:86vh;overflow:auto;
}
.leadmodal h3{margin:0 0 10px;font-size:21px;font-weight:600;color:var(--ink)}
.leadmodal .lsub{font-size:14px;line-height:1.65;color:var(--text);margin:0 0 18px}
.leadmodal .lsub b{color:var(--ink)}
.leadmodal .lclose{
  position:absolute;top:12px;right:14px;background:none;border:none;
  font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px;
}
.leadmodal .lrow{display:flex;gap:10px;margin-bottom:14px}
.leadmodal .lseg{flex:1}
.leadmodal .lseg input{position:absolute;opacity:0;pointer-events:none}
.leadmodal .lseg span{
  display:block;text-align:center;font-size:15px;padding:10px 0;min-height:44px;line-height:24px;
  border:1px solid #d2d2d7;border-radius:980px;color:var(--text);cursor:pointer;
  transition:all .2s var(--ease);
}
.leadmodal .lseg input:checked + span{
  background:var(--brand);border-color:var(--brand);color:var(--ink);font-weight:500;
}
.leadmodal .linput{
  width:100%;font-family:inherit;font-size:15px;color:var(--ink);
  border:1px solid transparent;border-radius:12px;padding:12px 14px;margin-bottom:12px;
  background:var(--fill);box-sizing:border-box;
  transition:background .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.leadmodal .linput:hover{background:var(--fill-hover)}
/* 聚焦语言与搜索框、登录条一致：翻白 + 338 C 描边 + 光晕 */
.leadmodal .linput:focus{
  outline:none;background:#fff;border-color:var(--brand-ink);
  box-shadow:0 0 0 3px rgba(10,186,181,.30);
}
.leadmodal textarea.linput{resize:vertical;line-height:1.6}
.leadmodal .lagree{
  display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.65;
  color:var(--text);margin:4px 0 14px;cursor:pointer;
}
.leadmodal .lagree input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--brand-ink)}
.leadmodal .lerr{
  background:#fff2f0;color:#8a2c1a;border-radius:10px;padding:10px 14px;
  font-size:13px;line-height:1.6;margin:0 0 12px;
}
.leadmodal .lacts{display:flex;gap:10px}
.leadmodal .lacts .btn{flex:1;min-height:46px;font-size:16px}
.leadmodal .ltip{font-size:12px;color:var(--muted);line-height:1.65;margin:14px 0 0}
.leadmodal .ltip b{color:var(--text)}

@media(max-width:430px){
  .leadmodal{padding:14px}
  .leadmodal .lbox{padding:24px 18px;max-height:92vh}
  .leadmodal .lacts{flex-direction:column}
}

/* 首页品类模块里的商品卡：底部加一条"在该品类中查看" */
.p .pmore{
  display:inline-block;margin-top:12px;font-size:13px;color:var(--brand-ink);
  text-decoration:none;border-bottom:1px solid rgba(10,124,121,.35);padding-bottom:1px;
}
.p .pmore:hover{border-bottom-color:var(--brand-ink)}
@media(max-width:768px){ .p .pmore{font-size:12px;margin-top:8px} }

/* 并排 2 品后卡片变窄：小屏上把"数量 + 加入清单"改成上下排，免得挤出去 */
@media(max-width:430px){
  .buy{flex-direction:column;align-items:stretch;gap:6px;margin-top:10px;padding-top:10px}
  .buy .qty{width:100%;text-align:center}
  .buy .add{width:100%;font-size:13px;padding:9px 8px}
  .buy .noadd{font-size:11px}
}

/* 打印（存 PDF）时不带悬浮钮 */
@media print{ .kfbtn{display:none !important} }
/* ============================================================
   企业微信咨询入口 —— 全站只有右下角这一个悬浮钮
   可拖动、位置记本机；点开选「微信咨询 / 电话咨询」
   ============================================================ */
.kfbtn{
  position:fixed;right:18px;bottom:24px;z-index:260;
  display:inline-flex;align-items:center;gap:7px;
  background:var(--brand);color:var(--ink);
  border-radius:980px;padding:11px 17px 11px 14px;
  font-size:15px;font-weight:500;letter-spacing:0;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  cursor:pointer;user-select:none;-webkit-user-select:none;
  touch-action:none;                 /* 交给 pointer 事件，才能在手机上拖 */
  transition:box-shadow .22s var(--ease),transform .22s var(--ease),bottom .28s var(--ease);
}
.kfbtn:hover{box-shadow:0 12px 30px rgba(0,0,0,.18)}
.kfbtn:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px}
.kfbtn .kficon{display:flex;align-items:center;color:var(--brand-ink)}
.kfbtn.lifted{bottom:82px}           /* 有底栏（意向清单）时抬高，别压住 */
.kfbtn.dragging{box-shadow:0 16px 38px rgba(0,0,0,.26);transform:scale(1.04);cursor:grabbing}
.kfbtn.open{box-shadow:0 12px 30px rgba(0,0,0,.2)}

/* ── 咨询钮的「动态标识」（2026-10-01 第二十轮：全屏宽醒目版）──
   两件套：① 向外扩散的呼吸光环  ② 右上角脉动的**红色**提示点。
   白话：这个钮天天贴在右下角，看久了就容易"隐身"。加一圈往外扩散的光晕，再在角上点一个红点，
   像有人在旁边招手 —— 眼睛自己会瞟过去。
   2026-10-01 董事长三条拍板（本次修订）：
     · 红点：原先用的品牌绿，跟绿钮糊在一起根本看不见 → 改成正红，**从绿底上跳出来**；
     · 手机端：原先只在电脑屏动 → **改成所有屏幕都动，手机平板一个样**；
     · 强度：**醒目档**（1.8 秒一圈、扩散 23px）。
   仍然守住的三条：
     · 面板已经点开了就停 —— 人已经找着了，不用再招手（正在拖动时也停）；
     · 红点只用在这**一个提示点**上，不铺开、不进品牌色板（三色系仍是 338 C / 灰 / 白）；
     · 系统开了「减少动态效果」的，一律静止，但标识位置不丢。
   光环用 ::before 的 box-shadow 做，不占布局、不挡字、也不影响按钮自己的阴影（hover / 拖动照旧）。
   ⚠️ 手机屏上按钮离屏幕边只有 12px，光环扩散 23px 会被屏幕边缘裁掉一块 —— 小屏收到 14px。 */
@keyframes kfRing{
  0%   {box-shadow:0 0 0 0 rgba(10,186,181,.78)}
  70%  {box-shadow:0 0 0 23px rgba(10,186,181,0)}
  100% {box-shadow:0 0 0 23px rgba(10,186,181,0)}
}
@keyframes kfRingSm{
  0%   {box-shadow:0 0 0 0 rgba(10,186,181,.78)}
  70%  {box-shadow:0 0 0 14px rgba(10,186,181,0)}
  100% {box-shadow:0 0 0 14px rgba(10,186,181,0)}
}
@keyframes kfDot{
  0%,100%{transform:scale(1);opacity:1}
  50%    {transform:scale(1.34);opacity:.70}
}
/* 全屏宽一律生效 —— 电脑、平板、手机一个样（董事长：手机端也要照样动） */
.kfbtn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:980px;
  animation:kfRing 1.8s var(--ease) infinite;pointer-events:none;
}
.kfbtn::after{
  content:"";position:absolute;top:-3px;right:-3px;
  width:12px;height:12px;border-radius:50%;
  background:var(--alert);border:2px solid #fff;
  animation:kfDot 1.6s var(--ease) infinite;pointer-events:none;
}
/* 面板已展开 / 正在拖动 —— 停止招手 */
.kfbtn.open::before,.kfbtn.open::after,
.kfbtn.dragging::before,.kfbtn.dragging::after{animation:none;opacity:0}
/* 小屏：按钮离屏幕边只有 12px，光环收到 14px，免得被边缘切掉一块 */
@media(max-width:430px){
  .kfbtn::before{animation-name:kfRingSm}
}
@media(prefers-reduced-motion:reduce){
  .kfbtn::before{animation:none;box-shadow:0 0 0 7px rgba(10,186,181,.30)}
  .kfbtn::after{animation:none}
}

/* 展开的选择面板 */
.kfpanel{
  position:absolute;right:0;bottom:calc(100% + 10px);
  width:180px;background:#fff;border-radius:16px;padding:8px;
  box-shadow:0 14px 40px rgba(0,0,0,.18);border:1px solid var(--gray2);
  cursor:default;
}
.kfpanel.down{bottom:auto;top:calc(100% + 10px)}
.kfpanel[hidden]{display:none}
.kfph{
  font-size:12px;color:var(--muted);padding:6px 10px 8px;letter-spacing:0;
  border-bottom:1px solid var(--gray2);margin-bottom:4px;
}
.kfitem{
  display:flex;align-items:center;gap:9px;width:100%;
  font-family:inherit;font-size:15px;color:var(--ink);text-align:left;
  background:none;border:none;border-radius:11px;padding:11px 10px;min-height:44px;
  cursor:pointer;
}
.kfitem:hover{background:var(--brand-soft)}
.kfitem .kfii{display:flex;align-items:center;color:var(--brand-ink)}
.kfreset{
  width:100%;font-family:inherit;font-size:12px;color:var(--muted);
  background:none;border:none;border-top:1px solid var(--gray2);
  padding:9px 10px 4px;margin-top:4px;cursor:pointer;letter-spacing:0;
}
.kfreset:hover{color:var(--brand-ink)}

@media(max-width:768px){
  .kfbtn{right:12px;bottom:16px;padding:10px 15px 10px 12px;font-size:14px}
  .kfbtn.lifted{bottom:74px}
  .kfpanel{width:168px}
}
@media(max-width:430px){
  .kfbtn .kftxt{display:none}
  .kfbtn{padding:12px;border-radius:50%}
  .kfpanel{width:160px}
}

/* ============================================================
   页面最底部的说明小字（批号效期 / 图片性质 / 首营审核）
   2026-10-01 董事长定版：从页面中上部移到最底部，并**缩小字号**
   ============================================================ */
.footnotes{
  padding:8px 0 34px;margin-top:10px;
  border-top:1px solid #e6e6ea;
}
.footnotes p{
  font-size:12px;line-height:1.75;color:#86868b;letter-spacing:0;
  margin:6px 0;max-width:900px;
}
.footnotes p b{color:#6e6e73;font-weight:500}
@media(max-width:768px){
  .footnotes{padding:6px 0 26px}
  .footnotes p{font-size:11px;line-height:1.7}
}

/* ============================================================
   从右往左（RTL）—— 阿拉伯语专用
   2026-10-01 第二十九轮（C95）：切到阿拉伯语时 html 会带上 dir="rtl"。
   白话：阿拉伯文从右往左读，所以整页的左右要镜像过来 ——
   导航栏从右起排、留白换边、箭头方向反过来（箭头翻转由 i18n.js 把 → 换成 ← 完成）。
   只做最必要的几条：这类改动越细越容易踩坑，先保证「读得顺、不溢出」。
   ============================================================ */
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .hd{flex-direction:row-reverse}
html[dir="rtl"] nav{flex-direction:row-reverse}
html[dir="rtl"] .hero .cta-row{flex-direction:row-reverse}
html[dir="rtl"] .hero .sub{direction:rtl}
html[dir="rtl"] .catgrid,
html[dir="rtl"] .pgrid{direction:rtl}
html[dir="rtl"] .chead{flex-direction:row-reverse}
html[dir="rtl"] .p .m{direction:rtl}
html[dir="rtl"] .footnotes p{direction:rtl;text-align:right}
html[dir="rtl"] .langsel{margin-left:0;margin-right:6px}
html[dir="rtl"] .herosearch .sicon{margin-right:0;margin-left:8px}
html[dir="rtl"] .kfpanel{text-align:right}
html[dir="rtl"]   /* 从右往左的语言里，第三方按钮的标识要挪到文字右边 */
  .appr{flex-direction:row-reverse}

/* ============================================================
   品种详情页（2026-10-01 第三十一轮 C97）
   白话：点商品不再弹小框，改成单独一页。这里只加"这一页"要用的样式，
   弹层里原来那套 .dwrap / .dimg / .dinfo 继续复用，只是把图放大、窄屏改成上下排。
   ============================================================ */
/* 整张商品卡都能点开详情页（2026-10-01 C97）—— 给个手型指针，别让人以为点不动 */
.p[data-sku]{cursor:pointer}

/* ============================================================
   品种详情页 · 京东式版式（2026-10-01 第三十二轮 C98）
   白话：照着京东商品详情页那套排 —— 左边大图、中间品种信息、
   右边供应商卡片、下面一排标签页（品种参数 / 资质与交付）、最后同品类其它品种。
   京东的味道在"信息密、分区清、边框轻、价格条显眼"；本站不公示价格，
   那条"价格栏"写的是「登录机构账号后按资质下发」。
   ============================================================ */
.dtlpage{padding-top:18px}
.crumb{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.9}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--brand-ink)}
.crumb .sep{margin:0 6px;color:var(--gray2)}
.crumb .now{color:var(--text)}
.dtop{margin-bottom:12px}
.dtop .back{font-size:13px;color:var(--brand-ink);text-decoration:none;display:inline-block;padding:6px 0}
.dtop .back:hover{text-decoration:underline}
.dtop .back .arw{margin-right:6px}

/* 三栏：图 / 信息 / 供应商 */
.jdgrid{display:grid;grid-template-columns:400px minmax(0,1fr) 260px;gap:20px;align-items:start}
.jdgal .dimg{
  background:#fff;border:1px solid var(--gray2);border-radius:6px;overflow:hidden;position:relative;
}
.jdgal .dimg img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:contain;padding:8px}
.jdgal .dimg .ph{
  position:absolute;left:10px;top:10px;font-size:11px;line-height:1;padding:5px 8px;border-radius:4px;
  background:rgba(0,0,0,.55);color:#fff;
}
.galtip{margin:10px 0 0;font-size:11.5px;color:var(--muted);text-align:center}

.jdmain{display:block;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:8px;padding:20px 22px}
.jdmain .dname{font-size:23px;font-weight:700;line-height:1.3;margin:6px 0 12px;letter-spacing:-.01em}
.dtags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.dtags .tag,.dtags .tag2{display:inline-block;font-size:12px;line-height:1;padding:6px 10px;border-radius:999px}
.dtags .tag{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.dtags .tag2{background:var(--gray);color:var(--text)}
/* 编号行 */
.jdsku{font-size:12.5px;color:var(--muted);padding:6px 10px;background:var(--gray);border-radius:4px;display:inline-block}
.jdsku b{color:var(--text);font-weight:600;margin-left:8px;letter-spacing:.02em}
/* 价格条：京东那道浅底条，本站放的是"怎么拿到价"而不是价钱 */
.jdprice{margin:12px 0 14px;padding:10px 12px;background:var(--brand-soft);border-radius:6px;
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.jdprice .pk{font-size:12px;color:var(--brand-ink);font-weight:600}
.jdprice .pv{font-size:14px;color:var(--text);font-weight:600}
/* ⭐ 价格三态（2026-10-02，与小程序同口径）
   看得到价 → 真价 + 定性 + 免责；看不到价 → 打码占位（一个数字都不给） */
.jdprice .pmoney{font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.jdprice .punit{font-size:12px;color:var(--muted)}
.jdprice .pkind{font-size:11px;color:var(--brand-ink);background:#fff;border-radius:4px;padding:2px 8px}
.jdprice .pmask{font-size:22px;font-weight:700;color:#c7c7cc;letter-spacing:3px}
.pnote{font-size:12px;color:var(--muted);line-height:1.7;margin:-8px 0 14px}
/* ⭐ 演示价标注：只要出现金额是靠演示价目表撑的，就必须挂这行字，不许裸奔 */
.pdemo{font-size:11.5px;color:#9a7b2e;line-height:1.7;margin:-6px 0 14px}
/* ⭐ 首页钩子价（2026-10-02 董事长定：首页要有「? 9.9 元」这种展示）
   三种形态：real 真价 / hook 悬念引子 / mask 打码（不能买的人一个数字都不给） */
.hp{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap;margin:8px 0 2px;min-height:22px}
.hp .hpmoney{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.hp .hpunit{font-size:11.5px;color:var(--muted)}
.hp .hpkind{font-size:10.5px;color:var(--brand-ink);background:#fff;border:1px solid rgba(10,124,121,.25);border-radius:4px;padding:1px 6px}
.hp.hook .hpq{font-size:17px;font-weight:700;color:#F5C542;line-height:1}
.hp.hook .hpnum{font-size:19px;font-weight:800;color:#F5C542;letter-spacing:-.02em;line-height:1}
.hp.hook .hpcur{font-size:12px;font-weight:700;color:#F5C542}
.hp .hptip{font-size:11px;color:var(--muted);margin-left:2px}
.hp.mask .hpmask{font-size:16px;font-weight:700;color:#c7c7cc;letter-spacing:2px}
/* 采购单计价区 */
.cartsum2{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:12px 14px;background:var(--gray);border-radius:8px;margin-top:10px}
.cartsum2>span{font-size:13px;color:var(--muted)}
.cartsum2 .tamount{font-size:20px;font-weight:700;color:var(--ink)}
.cartsum2 .pmask{font-size:18px;font-weight:700;color:#c7c7cc;letter-spacing:3px}
.cartsum2 .pnote{flex:1 0 100%;margin:6px 0 0}
/* 参数表 */
.jdattr{margin:0;font-size:13.5px}
.jdattr div{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--gray2)}
.jdattr div:first-child{border-top:0}
.jdattr dt{flex:0 0 74px;color:var(--muted);font-size:12.5px}
.jdattr dd{margin:0;flex:1;min-width:0;word-break:break-all;color:var(--text)}
/* 采购区 */
.dbuy{margin-top:16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dbuy .qlab{font-size:12.5px;color:var(--muted)}
.dbuy .qty{width:74px;padding:9px 10px;border:1px solid var(--gray2);border-radius:6px;
  background:var(--fill);font-size:14px;text-align:center}
.dbuy .qty:focus{outline:2px solid var(--brand-ink);outline-offset:-1px;border-color:var(--brand-ink)}
.addmsg{margin:10px 0 0;font-size:13px;color:var(--brand-ink)}
/* 服务承诺行 */
.jdserve{margin-top:14px;padding-top:12px;border-top:1px dashed var(--gray2);
  display:flex;gap:8px;flex-wrap:wrap}
.jdserve span{font-size:11.5px;color:var(--muted);background:var(--gray);
  padding:5px 9px;border-radius:4px}
/* 供应商卡 */
.jdside{background:var(--gray);border-radius:8px;padding:16px 16px 18px}
.sdtitle{margin:0 0 12px;font-size:14px;font-weight:600}
.sdrow{display:flex;gap:8px;justify-content:space-between;padding:7px 0;
  border-top:1px solid rgba(0,0,0,.06);font-size:12px}
.sdrow span{color:var(--muted);flex:0 0 auto}
.sdrow b{font-weight:500;color:var(--text);text-align:right;min-width:0;word-break:break-all}
.sdlink{display:inline-block;margin-top:14px;font-size:12.5px;color:var(--brand-ink);text-decoration:none}
.sdlink:hover{text-decoration:underline}

/* 标签页 */
.jdtabs{margin-top:26px;border-bottom:1px solid var(--gray2);display:flex;gap:4px}
.jdtabs button{
  appearance:none;border:0;background:none;font-family:inherit;font-size:14px;color:var(--muted);
  padding:12px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;
}
.jdtabs button:hover{color:var(--text)}
.jdtabs button.ontab{color:var(--brand-ink);font-weight:600;border-bottom-color:var(--brand-ink)}
.jdpanels{margin-top:16px}
.jdpanel{display:none;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:8px;padding:18px 22px}
.jdpanel.on{display:block}
.jdpanel .pn{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.75}
.jdpanel .jdattr div:first-child{border-top:1px solid var(--gray2)}
.jdpanel .rxnote{margin-top:12px}

.dtlempty{padding:60px 0;text-align:center}
.dtlempty h1{font-size:22px;margin:0 0 10px}
.dtlempty p{color:var(--muted);font-size:14px;margin:0 0 18px}

.drel{margin-top:34px}
.reltitle{font-size:18px;font-weight:600;margin:0 0 14px;letter-spacing:-.01em}
.drelgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.relcard{
  display:block;text-decoration:none;color:inherit;background:var(--gray);
  border-radius:10px;padding:10px;transition:background .2s var(--ease);
}
.relcard:hover{background:var(--fill-hover)}
.relcard .rthumb{border-radius:8px;overflow:hidden;background:#fff;aspect-ratio:1/1}
.relcard .rthumb img{width:100%;height:100%;object-fit:cover;display:block}
.relcard .rname{margin-top:8px;font-size:13.5px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.relcard .rspec{margin-top:3px;font-size:11.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 窄屏：两栏 → 单栏 */
@media(max-width:1180px){
  .jdgrid{grid-template-columns:340px minmax(0,1fr)}
  .jdside{grid-column:1 / -1}
}
@media(max-width:900px){
  .jdgrid{grid-template-columns:1fr}
  .jdgal .dimg img{max-width:420px;margin:0 auto}
  .jdmain{padding:16px 16px 18px}
  .jdmain .dname{font-size:20px}
}
@media(max-width:430px){
  .drelgrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .jdtabs button{padding:11px 12px;font-size:13px}
  .dbuy .qty{width:64px}
}
html[dir="rtl"] .crumb{direction:rtl}
html[dir="rtl"] .dtags{flex-direction:row-reverse}
html[dir="rtl"] .drelgrid{direction:rtl}
html[dir="rtl"] .relcard{text-align:right}
html[dir="rtl"] .jdmain,
html[dir="rtl"] .jdside{text-align:right}
html[dir="rtl"] .jdattr dt{text-align:right}

/* ════════════════════════════════════════════════════════════
   第三十三轮 C99：浏览数据同意条 / 千人千面 / 数据设置
   白话：底部那条是"要不要记您逛了哪几排"的征求意见条；
        品类区上面那排小按钮是"我是哪类机构"，选完首页货架顺序跟着变。
   ════════════════════════════════════════════════════════════ */

/* ── ① 底部同意条 ── */
.consentbar{
  position:fixed;left:0;right:0;bottom:0;z-index:1200;
  background:rgba(255,255,255,.97);backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid rgba(0,0,0,.10);
  box-shadow:0 -6px 24px rgba(0,0,0,.08);
  transform:translateY(0);transition:transform .22s ease,opacity .22s ease;
  padding:14px 0 calc(14px + env(safe-area-inset-bottom));
}
.consentbar.out{transform:translateY(110%);opacity:0}
.cbinner{max-width:1360px;margin:0 auto;padding:0 22px;display:flex;gap:20px;align-items:flex-end;justify-content:space-between}
.cbtext{flex:1;min-width:0}
.cbtitle{display:block;font-size:15px;font-weight:600;color:#1d1d1f;margin-bottom:4px}
.cbdesc{margin:0;font-size:13px;line-height:1.65;color:var(--muted)}
.cblink{display:inline-block;margin-top:6px;font-size:13px;color:var(--brand-ink);text-decoration:none;border-bottom:1px solid rgba(10,124,121,.35)}
.cblink:hover{border-bottom-color:var(--brand-ink)}
.cbbtns{display:flex;gap:8px;flex:0 0 auto;flex-wrap:wrap}

/* ── ② 千人千面：品类区上方那条 ── */
.persbar{margin:14px 0 4px;padding:12px 16px;background:var(--brand-soft);border:1px solid rgba(10,124,121,.16);border-radius:10px}
/* ⚠️ 2026-10-01：`.segpick / .seglab / .segbtns / .segbtn / .segbtn:hover / .segbtn.on`
   这六条是给「我是：不限 / 连锁药店 / 单体药店……」那一排机构类型按钮用的，
   该排已按董事长指示撤走 → 一并删掉。品类区上方现在只剩下面这行说明（.persnote）。 */
.persnote{margin:0;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pnwhy{color:var(--brand-ink)}
.pnlink{
  font:inherit;font-size:13px;background:none;border:0;padding:0;
  color:var(--muted);text-decoration:underline;cursor:pointer;
}
.pnlink:hover{color:var(--brand-ink)}

/* ── ③ 商品页偏好提示（不打断，只指路） ── */
.pershint{
  max-width:1360px;margin:14px auto 0;padding:10px 16px;
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:#1d1d1f;
}
.pershint span{color:var(--muted)}

/* ── ④ 数据设置面板 ── */
.dswrap{
  position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.34);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.dscard{
  background:#fff;border-radius:14px;max-width:520px;width:100%;
  max-height:86vh;overflow:auto;padding:22px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.24);
}
.dscard h3{margin:0 0 6px;font-size:19px;font-weight:700;color:#1d1d1f}
.dscur{margin:0 0 14px;font-size:13px;color:var(--muted)}
.dsopts{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.dsopt{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;border:1px solid rgba(0,0,0,.12);border-radius:10px;
  font-size:14px;color:#1d1d1f;cursor:pointer;transition:border-color .18s ease,background .18s ease;
}
.dsopt.on{border-color:var(--brand-ink);background:var(--brand-soft)}
.dsopt input{accent-color:var(--brand-ink);width:16px;height:16px}
.dshint{margin:0 0 16px;padding:12px 14px;background:var(--gray);border-radius:10px}
.dshint p{margin:0 0 6px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.dshint p:last-child{margin-bottom:0}
.dsbtns{display:flex;gap:8px;flex-wrap:wrap}
.dslink{display:inline-block;margin-top:12px;font-size:13px;color:var(--brand-ink);text-decoration:none;border-bottom:1px solid rgba(10,124,121,.35)}

/* ── ⑤ 页脚入口 ── */
/* ⭐ 2026-10-01：同意横幅撤掉之后，页脚这个按钮是**仅剩的**改档入口，
   不能再是个 20px 高的小字 —— 手指点不中等于没有出口。撑到 32px 的可点高度。 */
.dsetbtn{
  font:inherit;font-size:12.5px;margin-top:6px;padding:7px 10px;min-height:32px;
  display:inline-flex;align-items:center;gap:0;
  background:none;border:0;
  color:var(--muted);text-decoration:underline;cursor:pointer;
}
.dsetbtn:hover{color:var(--brand-ink)}

/* ── 断点 ── */
@media (max-width:900px){
  .cbinner{flex-direction:column;align-items:stretch;gap:12px}
  .cbbtns{justify-content:flex-end}
}
@media (max-width:430px){
  .cbbtns{display:grid;grid-template-columns:1fr;gap:8px}
  .cbbtns .btn{width:100%;justify-content:center}
  .persbar{padding:10px 12px}
  .dscard{padding:18px 16px}
  .dsbtns .btn{flex:1;justify-content:center}
}

/* ── 从右往左的语言 ── */
html[dir="rtl"] .cbinner{direction:rtl}
html[dir="rtl"] .cbdesc{text-align:right}
html[dir="rtl"] .persbar{direction:rtl;text-align:right}
html[dir="rtl"] .persnote{flex-direction:row-reverse}
html[dir="rtl"] .pershint{direction:rtl}
html[dir="rtl"] .dscard{direction:rtl;text-align:right}
html[dir="rtl"] .dsopt{flex-direction:row-reverse}
html[dir="rtl"] .dshint{text-align:right}

/* 同意横幅在场时：给右下角咨询悬浮钮与页脚让出位置，别把人家盖住 */
body.has-consent{padding-bottom:132px}
body.has-consent .kfbtn{bottom:152px !important}
@media (max-width:900px){
  body.has-consent{padding-bottom:190px}
  body.has-consent .kfbtn{bottom:210px !important}
}
@media (max-width:430px){
  body.has-consent{padding-bottom:250px}
  body.has-consent .kfbtn{bottom:270px !important}
}

/* ============================================================
   触屏兜底（2026-10-02 董事长：「手机端必须适配」）
   🔴 这一段必须留在**文件最末尾**：同特异性下"后出现的规则胜出"，
      `.dsetbtn{min-height:32px}`（1636 行）与 `.aptip{font-size:11.5px}`（1047 行）
      都写在前面的章节里 —— 本轮踩过：把这段写在它们前面，规则被原样盖掉，白改一场。
      只在触屏设备生效（`@media(hover:none)`），桌面观感一点不变。
   ============================================================ */
@media(hover:none){
  .dsetbtn{min-height:44px;padding:8px 12px}
  .aptip,.aptip b,.galtip{font-size:12px}

  /* 轮播指示点：① `.bdots` 不抬层级会被 `.bslide` 的遮罩盖住，手指点中的是轮播页而不是指示点；
     ② 视觉 7px 在手机上太小，触屏放到 12px（选中态胶囊 26px），并把它抬高一点，
        好让"向下 21px"仍落在轮播内 —— 命中区这才真的有 44 高。 */
  .bdots{z-index:5;bottom:24px;gap:10px}
  .bdot{width:12px;height:12px}
  .bdot.on{width:26px}

  /* 字号兜底：全站 11 / 11.5px 的辅助文字在手机上偏细，统一抬到 12 */
  .bslide .btag,.p .thumb .ph,.dwrap .dimg .ph,.p>.cat>.cat,
  .p.qual .m .qual,.hp .hptip,.footnotes p,.footnotes p b{font-size:12px}

  /* 分类按钮：手机上一排六个要横滑才能看全，用户不知道"还能往左滑"。
     改成换行铺满 —— 多占一两行，但一眼看得到全部厂家。 */
  .cats{flex-wrap:wrap;overflow:visible;margin:20px 0 26px;padding:0}
}

/* ⭐ 2026-10-04 C135：「东兴本草早茶」入口显眼化（董事长批复）
   两块：首页推广条 .dxb-promo ／ 页脚入口条 .dxb-entry
   🔴 2026-10-04 董事长改配色：用**马卡龙色系**（天蓝），与行情页日期牌的薰衣草紫、
   数据卡的涨粉／跌绿／平灰同属低饱和浅色系，彼此不打架，也不跟涨跌语义撞车。
   浅底 #E3EEFB ＋ 同色系深蓝字 #33507A（对比度约 8:1）。 */
.dxb-promo{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 20px;
  border:1px solid #C9DDF3;border-radius:16px;padding:18px 20px;
  background:#E3EEFB}
.dxb-promo-tag{flex:0 0 auto;font-size:12px;color:#fff;background:#33507A;
  border-radius:999px;padding:4px 10px}
.dxb-promo-txt{flex:1 1 260px;min-width:0}
.dxb-promo-txt h2{font-size:18px;margin:0 0 6px;color:#33507A}
.dxb-promo-txt p{margin:0;font-size:14px;color:#4A5C78;line-height:1.7}
.dxb-promo-btn{flex:0 0 auto;height:44px;line-height:44px;padding:0 20px;border-radius:10px;
  background:#33507A;color:#fff;font-size:15px;text-decoration:none}
/* 页脚入口条：三个栏目同权（2026-10-04 董事长批复「同权」，早茶不再加粗） */
.dxb-entry{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:#f6f6f6;
  font-size:13.5px;line-height:1.9}
@media(max-width:768px){
  .dxb-promo{padding:16px}
  .dxb-promo-btn{flex:1 1 100%;text-align:center}
}

/* 首页「采购方常查」内容入口卡片（2026-10-06 加）
   白话：把散在 report/、insight/ 里的几篇内容摆到首页正面，
   访客不用翻页脚也能看见。窄屏自动并成一列。 */
.dxb-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:14px;margin-top:26px;text-align:left}
.dxb-card{display:block;padding:16px 18px;border:1px solid #e6e6e6;border-radius:12px;
  background:#fff;text-decoration:none;color:var(--ink);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.dxb-card:hover{border-color:var(--brand-ink);box-shadow:0 4px 14px rgba(0,0,0,.06)}
.dxb-card b{display:block;font-size:16px;font-weight:600;margin-bottom:6px;line-height:1.5}
.dxb-card span{display:block;font-size:13px;color:#86868b;line-height:1.75}
.dxb-card i{display:inline-block;margin-top:8px;font-style:normal;font-size:13px;
  color:var(--brand-ink)}
@media(max-width:768px){
  .dxb-cards{grid-template-columns:1fr;gap:12px}
  .dxb-card{padding:14px 16px}
}

/* ============================================================
   早茶圆形呼吸灯标（2026-10-06 董事长定，替换原来的横条 .dxb-promo）

   白话：中间「早茶」两个字，外圈绕一圈品牌字「东兴本草®HERBALWAYS」，
   边上像呼吸一样一亮一暗 —— 用的是光环一圈圈往外扩 + 亮度跟着起伏。
   环形文字靠 SVG 的 textPath：先画一个看不见的圆当轨道，字沿着轨道排。
   ⭐ 2026-10-06 第三次修订：直径缩一半（76／手机 64），常驻页面右上角悬浮。
   ============================================================ */
/* 圆标现在**常驻页面右上角**（2026-10-06 董事长定），是悬浮件，不在正文里占位。
   🔴 right/top 只是「JS 还没跑」时的落点；脚本一跑就改成 left/top（right 置 auto），
      免得两边一起生效打架。右上角的位置由脚本按顶栏高度算，改顶栏不用回来改这里。 */
.zc-badge{
  position:fixed;right:14px;top:76px;z-index:254;
  display:block;width:76px;height:76px;margin:0;
  border-radius:50%;text-decoration:none;overflow:visible;
  /* ⭐ 2026-10-06 董事长定：跟右下角「咨询」钮一个色系 —— 品牌绿 338 C 底 + 深墨字，
     两处摆在一起是一套（.kfbtn 用的是 var(--brand) + var(--ink)，这里同款）。 */
  background:radial-gradient(circle at 50% 38%,#7FD8C0 0%,var(--brand) 58%,#4FB99B 100%);
  color:var(--ink);
  box-shadow:0 6px 16px rgba(0,0,0,.16);
  animation:zcBreathe 3.4s ease-in-out infinite;
}
/* 呼吸：底阴影照常，外面那一圈绿光 0→10px 一圈圈往外扩
   （直径缩到 76 以后光环也跟着收，别糊住一圈） */
@keyframes zcBreathe{
  0%,100%{box-shadow:0 6px 16px rgba(0,0,0,.16), 0 0 0 0 rgba(10,186,181,.78)}
  70%    {box-shadow:0 6px 16px rgba(0,0,0,.16), 0 0 0 10px rgba(10,186,181,0)}
  100%   {box-shadow:0 6px 16px rgba(0,0,0,.16), 0 0 0 10px rgba(10,186,181,0)}
}
.zc-ring{position:absolute;inset:0;width:100%;height:100%;display:block}
/* 环形文字＝「东兴本草®HERBALWAYS」，中英文界面同一条品牌字（2026-10-06 董事长定）。
   🔴 字号是 SVG 的「格子单位」（viewBox 120），不是屏幕像素 —— 圆缩到 76 以后
      会等比缩到约 8px，所以这里要给到 12.5 才看得清。 */
.zc-arc{fill:#1E6B52;font-size:12.5px;font-family:inherit;letter-spacing:0}
.zc-core{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--ink);font-size:14px;font-weight:800;letter-spacing:.06em;
}
.zc-core b{font-weight:800}
.zc-core-en{display:none;font-size:9px;line-height:1.15;letter-spacing:0;text-align:center}
.zc-core-en em{display:block;font-style:normal}
html[lang="en"] .zc-core-cn{display:none}
html[lang="en"] .zc-core-en{display:block}
/* 拖动把手：手机上只有这一小条能拖，圆标其余地方照常滚动、照常点进去 */
.zc-grip{
  position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
  min-width:30px;height:15px;padding:0 6px;
  display:flex;align-items:center;justify-content:center;
  border-radius:980px;background:rgba(255,255,255,.55);color:#1E6B52;
  opacity:.62;touch-action:none;cursor:grab;transition:opacity .2s var(--ease);
}
/* 手指的热区扩到 40×40（手机上一个手指头的大小），别让人对着 15px 的小条戳 */
.zc-grip::after{
  content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;
  transform:translate(-50%,-50%);
}
.zc-grip svg{width:16px;height:8px;fill:currentColor}
.zc-badge:hover .zc-grip{opacity:1}
.zc-badge.dragging{cursor:grabbing;box-shadow:0 10px 24px rgba(0,0,0,.26);transform:scale(1.05)}
.zc-badge.dragging .zc-grip{opacity:1}
/* 「回原位」小钮：圆标被拖走以后才出现，跟着圆标底下走
   （不能做成「双击圆标复位」—— 圆标是链接，双击的头一下就跳进早茶了） */
.zc-reset{
  position:fixed;z-index:256;display:none;
  font-family:inherit;font-size:12px;line-height:1;padding:5px 10px;
  border:1px solid #d2d2d7;border-radius:980px;background:#fff;color:#257F63;
  box-shadow:0 4px 12px rgba(0,0,0,.14);cursor:pointer;
}
.zc-reset:hover{background:var(--brand-soft)}
@media(max-width:768px){
  /* 手机：直径再收一档到 64（桌面的 76 在窄屏上占地方），环形字给到 14 保证约 7.5px */
  .zc-badge{width:64px;height:64px;right:10px;top:66px}
  .zc-core{font-size:12px;letter-spacing:.04em}
  .zc-core-en{font-size:8px}
  .zc-arc{font-size:14px}
}
/* 系统里开了「减少动态效果」就不闪，别让晕动症的人难受 */
@media(prefers-reduced-motion:reduce){
  .zc-badge{animation:none}
}