/* ==========================================================================
   前台样式 · 简约专业的保健品品牌风格
   主色：深绿 #0f6e56   背景：暖石 #f4f2ec   文字：#1c1c1a
   字体：Inter（Google Fonts）  正文 15px/1.7   标题字重 500
   断点：1080px / 900px / 720px / 560px
   ========================================================================== */

/* ---------- 1. 变量与重置 ---------- */
:root {
  --green: #0f6e56;
  --green-dark: #0b5342;
  --green-soft: #eaf4f0;
  --green-line: #cfe3db;
  --stone: #f4f2ec;
  --stone-2: #ebe8df;
  --ink: #1c1c1a;
  --ink-2: #4a4a46;
  --ink-3: #7a7a74;
  --line: #e2dfd6;
  --white: #ffffff;
  --warn: #8a6d1f;
  --warn-soft: #fdf6e3;
  --danger: #a3362a;
  --danger-soft: #fbeceb;

  --radius: 4px;
  --radius-lg: 8px;
  --gap: 24px;
  --shell: 1200px;
  --shell-narrow: 820px;
}

/* ---------- 字体：自托管 Inter（不再依赖 Google Fonts） ----------
   ★ 原来引的是 https://fonts.googleapis.com/css2 —— 那是 render-blocking 外链，
     国内网络下经常卡十几秒才超时，整页白屏。改成同源自托管的可变字体：
     一个 48KB 文件覆盖 300–500 三个字重，零外部依赖。 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* 中文回退字体栈：Inter 无中文字形，必须显式指定中文字体，
     否则中文会掉到浏览器默认宋体，与英文风格割裂。
     顺序：西文 Inter → 中文（思源/苹方/微软雅黑）→ 系统兜底 */
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink);
}
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 19px; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ---------- 2. 布局容器 ---------- */
.container {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
}
.container--narrow { max-width: var(--shell-narrow); }

.section { padding: 64px 0; }
.section--tight { padding: 40px 0; }
.section--tint { background: var(--stone); }
.section--intro { padding: 40px 0 0; }

.section__head { margin-bottom: 32px; max-width: 640px; }
.section__title { margin-bottom: 10px; }
.section__desc { color: var(--ink-2); margin-bottom: 12px; }

.page-head {
  padding: 48px 0 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.page-head__title { margin-bottom: 6px; }
.page-head__desc { color: var(--ink-2); max-width: 680px; }
.page-head__count { color: var(--ink-3); font-size: 13px; margin: 0; }

.empty-note {
  color: var(--ink-3);
  background: var(--stone);
  border-radius: var(--radius);
  padding: 20px 22px;
  font-size: 14px;
}

/* 游客提示：只引导申请账号，不含任何价格 / 起订量信息 */
.guest-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 24px;
  padding: 14px 18px;
  background: var(--stone);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13.5px;
  color: var(--ink-2);
}
.guest-hint a { font-weight: 500; }

.hide-sm { display: inline-flex; }

/* 页面级修饰类（挂在 body 上） */
.page { display: flex; flex-direction: column; min-height: 100vh; }
.page > main { flex: 1; }
.page--home .hero__content { min-height: 500px; }
.page--form .section { background: var(--stone); }
.page--message .section { background: var(--stone); }
.page--error .error-page-wrap { background: var(--stone); }
.page--faq .faq-list,
.page--policy .rich-text { background: var(--white); }
.page--account { background: var(--white); }
.page--account .account-layout { padding-top: 28px; }
.page--certificates .cert-grid { margin-top: 8px; }
.page--company .rich-text { font-size: 16px; line-height: 1.75; }
.page--product .product-layout__content .block + .block { padding-top: 26px; border-top: 1px solid var(--line); }

/* ---------- 3. 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--green); color: var(--white); }
.btn--primary:hover { background: var(--green-dark); }

.btn--outline { background: transparent; border-color: var(--green); color: var(--green); }
.btn--outline:hover { background: var(--green-soft); }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink-3); background: var(--stone); }

.btn--quiet { background: transparent; color: var(--ink-2); padding-left: 8px; padding-right: 8px; }
.btn--quiet:hover { color: var(--green); background: transparent; }

.btn--sm { padding: 8px 14px; font-size: 13px; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--green);
}
.link-arrow::after { content: "\2192"; transition: transform .16s ease; }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- 4. 顶部导航 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 72px;
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
/* 品牌 logo：横版字标，按高度自适应宽度（不再强制 40×40 方形） */
.brand__logo { height: 34px; width: auto; max-width: 190px; object-fit: contain; object-position: left center; }
.brand__mark {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--green);
  position: relative;
  flex-shrink: 0;
}
.brand__mark::after {
  content: "";
  position: absolute;
  inset: 9px 8px;
  background: var(--stone);
  border-radius: 0 12px 0 12px;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-weight: 500; font-size: 15px; color: var(--ink); }
.brand__tag { font-size: 11px; color: var(--ink-3); }

.site-nav { margin-left: auto; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__link {
  font-size: 14px;
  color: var(--ink-2);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  /* ★ 导航项不换行 —— "OEM & ODM" 会被挤成三行 */
  white-space: nowrap;
}
.site-nav__link:hover { color: var(--ink); text-decoration: none; }
.site-nav__link.is-active { color: var(--green); border-bottom-color: var(--green); }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.site-nav + .site-header__actions { margin-left: 0; }
.site-header__logout { margin: 0; }

/* 语言切换（桌面） */
.lang-switch { position: relative; }
.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.lang-switch__toggle:hover { border-color: var(--ink-3); }
/* 下拉箭头：展开时旋转 180° */
.lang-switch__caret { transition: transform .16s ease; flex: none; }
.lang-switch.is-open .lang-switch__caret { transform: rotate(180deg); }
.lang-switch__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 172px;
  max-height: min(70vh, 420px);
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(28, 28, 26, .08);
  opacity: 0;
  visibility: hidden;
  transition: opacity .14s ease, visibility .14s ease;
}
/* 悬停展开（桌面鼠标）+ 点击展开（.is-open，触屏与键盘）。
   两种都保留：鼠标用户 hover 即开，触屏用户点按钮才开。 */
.lang-switch:hover .lang-switch__menu,
.lang-switch:focus-within .lang-switch__menu,
.lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; }

/* 打开时按钮给个回执，让用户知道菜单已展开 */
.lang-switch.is-open .lang-switch__toggle {
  border-color: var(--green);
  color: var(--ink);
}

/* 触屏设备没有 hover，必须靠点击；顺带加大点击区域 */
@media (hover: none) {
  .lang-switch__menu { position: static; opacity: 1; visibility: visible; box-shadow: none; margin-top: 8px; }
  .lang-switch { position: static; }
}
.lang-switch__link {
  display: block;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink-2);
  border-radius: var(--radius);
}
.lang-switch__link:hover { background: var(--stone); text-decoration: none; }
.lang-switch__link.is-active { color: var(--green); font-weight: 500; }

.lang-chip {
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--white);
}
.lang-chip:hover { border-color: var(--green); text-decoration: none; }
.lang-chip.is-active { border-color: var(--green); color: var(--green); background: var(--green-soft); }

/* 汉堡按钮 */
.nav-toggle__box {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
}
.nav-toggle__box:focus-visible ~ .site-header__inner .nav-toggle { outline: 2px solid var(--green); outline-offset: 2px; }

/* 手机端抽屉 */
.nav-drawer { display: none; }
.nav-drawer__scrim {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 26, .38);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.nav-drawer__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: var(--white);
  padding: 24px 22px 32px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .24s ease;
  box-shadow: -12px 0 40px rgba(28, 28, 26, .12);
}
.nav-drawer__list { list-style: none; margin: 0 0 24px; padding: 0; }
.nav-drawer__link {
  display: block;
  padding: 12px 0;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-drawer__link.is-active { color: var(--green); font-weight: 500; }
.nav-drawer__label {
  font-size: 12px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 10px;
}
.nav-drawer__langs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; }
.nav-drawer__lang { margin-bottom: 24px; }
.nav-drawer__cta { display: flex; flex-direction: column; gap: 10px; }
.nav-drawer__cta form { margin: 0; }

.nav-toggle__box:checked ~ .nav-drawer .nav-drawer__scrim { opacity: 1; visibility: visible; }
.nav-toggle__box:checked ~ .nav-drawer .nav-drawer__panel { transform: translateX(0); }
.nav-toggle__box:checked ~ .site-header__inner .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle__box:checked ~ .site-header__inner .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-toggle__box:checked ~ .site-header__inner .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- 5. Hero ---------- */
.hero { position: relative; background: var(--stone); }
.hero__slide { position: relative; }
/* ★ 没有 JS 轮播时只显示第一张 ——
   否则两张 2039×771 的宽幅图会上下堆叠，首屏高度翻倍。
   （hero__dots 是静态圆点，没有交互逻辑，所以这里不做轮播。） */
.hero__slide:not(.is-active) { display: none; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 26, 23, .58) 0%, rgba(20, 26, 23, .28) 58%, rgba(20, 26, 23, .12) 100%);
}
/* ★ 带图的 banner：素材图自带完整文案与 CTA，不需要再叠文字层，
   也不加暗色遮罩（遮罩会把图里的浅底文字压得看不清）。 */
.hero__slide--has-image::after { display: none; }
.hero__media--linked { display: block; cursor: pointer; }
.hero__media--linked img { display: block; }

/* 仅供读屏与 SEO 使用的隐藏文字 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.hero__content {
  position: relative;
  z-index: 1;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 64px;
  padding-bottom: 64px;
  max-width: var(--shell);
}
.hero__title {
  color: var(--white);
  font-size: 42px;
  max-width: 15ch;
  margin-bottom: 16px;
}
.hero__subtitle {
  color: rgba(255, 255, 255, .9);
  font-size: 17px;
  max-width: 52ch;
  margin-bottom: 26px;
}
.hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.hero__dot {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .42);
}
.hero__dot.is-active { background: var(--white); }

/* ---------- 6. 产品卡片与网格 ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.product-grid--related { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .16s ease, transform .16s ease;
}
.product-card:hover { border-color: var(--green-line); transform: translateY(-2px); }

.product-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--stone);
  overflow: hidden;
}
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__placeholder,
.gallery__main .product-card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  background:
    linear-gradient(135deg, var(--stone) 0%, var(--stone-2) 100%);
}

.product-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; flex: 1; }
.product-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.product-card__title { font-size: 17px; margin: 0; }
.product-card__title a { color: var(--ink); }
.product-card__title a:hover { color: var(--green); text-decoration: none; }
.product-card__desc { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.product-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding-top: 4px;
}
.product-card__amount { font-size: 16px; font-weight: 500; color: var(--green); }
.product-card__moq { font-size: 12.5px; color: var(--ink-3); }
.product-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 6px;
}

.tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: nowrap;
}
.tag--quiet { background: var(--stone); color: var(--ink-2); }
.tag--vegan { background: var(--green-soft); color: var(--green); }

/* 产品线（首页三大板块） */
.product-lines { display: flex; flex-direction: column; gap: 56px; }
.product-line {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.product-line__intro { position: sticky; top: 96px; }
.product-line__title { font-size: 20px; }
.product-line__desc { font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
.product-line__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

/* ---------- 7. 首页其它区块 ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.split--reverse .split__text { order: 2; }
.split__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.split__media { min-width: 0; }

.stat-panel { display: grid; gap: 12px; }
.stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.stat__num { font-size: 15px; font-weight: 500; color: var(--ink); }

.step-list { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step-list__item {
  counter-increment: step;
  position: relative;
  padding: 14px 0 14px 42px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.step-list__item:last-child { border-bottom: 0; }
.step-list__item::before {
  /* ★ 计数器只在 .step-list__item 上加一次（见下方卡片式变体）。
     这里绝不能再写 counter-increment，否则每项被加两次，
     编号会显示成 2 / 4 / 6 / 8…… */
  content: counter(step);
  position: absolute;
  left: 0;
  top: 14px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cert-strip {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}
.cert-strip__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cert-strip__item img {
  width: 100%;
  height: 96px;
  object-fit: contain;
  margin-bottom: 6px;
}
.cert-strip__name { font-weight: 500; font-size: 14px; }
.cert-strip__issuer { font-size: 12.5px; color: var(--ink-3); }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.feature {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}
.feature__title { font-size: 17px; }
.feature__text { font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }

/* ---------- 8. 筛选栏 ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  padding: 18px 20px;
  background: var(--stone);
  border-radius: var(--radius-lg);
}
.filters__group { display: flex; flex-direction: column; gap: 6px; }
.filters__group--checks { flex-direction: row; align-items: center; gap: 18px; }
.filters__label { font-size: 12.5px; color: var(--ink-3); }
.filters__actions { display: flex; gap: 8px; margin-left: auto; }

.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--green); }
.check--boxed {
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--stone);
}
.check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

/* ---------- 9. 分页 ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.pagination__list { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pagination__num,
.pagination__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--ink-2);
}
.pagination__num:hover,
.pagination__step:hover { border-color: var(--green); color: var(--green); text-decoration: none; }
.pagination__num.is-active { background: var(--green); border-color: var(--green); color: var(--white); }

/* ---------- 10. 产品详情 ---------- */
.breadcrumb { margin-bottom: 18px; }
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: var(--ink-3);
}
.breadcrumb__list li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.breadcrumb__list a { color: var(--ink-3); }
.breadcrumb__list a:hover { color: var(--green); }

.product-head { margin-bottom: 28px; }
.product-head__title { margin-bottom: 12px; }
.product-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.product-head__sku { font-size: 12.5px; color: var(--ink-3); }

.product-layout {
  display: grid;
  grid-template-columns: 55% minmax(0, 45%);
  gap: 44px;
  align-items: start;
}
.product-layout__media { position: sticky; top: 96px; }
.product-layout__content { display: flex; flex-direction: column; gap: 32px; }

.gallery { position: relative; }
.gallery__main {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--stone);
  aspect-ratio: 4 / 3;
}
.gallery__img { display: none; width: 100%; height: 100%; object-fit: cover; }
.gallery__img.is-active { display: block; }
.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.gallery__thumb {
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1 / 1;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--green); }

.block { min-width: 0; }
.block__title { font-size: 18px; margin-bottom: 12px; }
.block__desc { font-size: 14px; color: var(--ink-2); }

.spec-table { font-size: 14px; }
.spec-table th,
.spec-table td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table th { font-weight: 400; color: var(--ink-3); width: 46%; }
.spec-table td { color: var(--ink); }
.spec-table tr:last-child th,
.spec-table tr:last-child td { border-bottom: 0; }

.pack-list { list-style: none; margin: 0; padding: 0; }
.pack-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.pack-list__item:last-child { border-bottom: 0; }
.pack-list__name { font-weight: 500; }
.pack-list__spec { font-size: 13px; color: var(--ink-3); }

/* ---------- 11. 价格区块（浅绿底 + 左侧色条） ---------- */
.price-block {
  background: var(--green-soft);
  border-left: 4px solid var(--green);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 26px 28px;
}
.price-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.price-block__title { font-size: 19px; margin: 0; }
.price-block__currency { font-size: 12.5px; color: var(--green); }
.price-block__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 20px;
}
.price-block__row dt { font-size: 12.5px; color: var(--ink-3); margin-bottom: 4px; }
.price-block__row dd { margin: 0; font-size: 19px; font-weight: 500; color: var(--ink); }
.price-block__actions { display: flex; gap: 12px; }

.sample-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.sample-panel__text { margin: 0; }
.sample-panel .block__title { margin-bottom: 6px; }
.sample-panel .block__desc { margin: 0; }

.doc-block { border-top: 1px solid var(--line); padding-top: 24px; }
.doc-list { list-style: none; margin: 14px 0 0; padding: 0; }
.doc-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.doc-list__item:last-child { border-bottom: 0; }
.doc-list__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.doc-list__name { font-weight: 500; font-size: 14.5px; }
.doc-list__sub { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--ink-3); }
.doc-group { padding-top: 22px; }
.doc-group:first-of-type { padding-top: 0; }
.doc-group__title { font-size: 16px; margin-bottom: 4px; }

/* ---------- 12. 成分表 / Supplement Facts ---------- */
.table-wrap { width: 100%; overflow-x: auto; }
.data-table { font-size: 14px; }
.data-table th,
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.data-table thead th {
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom-color: var(--ink-3);
  white-space: nowrap;
}
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table__sub { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 400; }
.data-table__main { color: var(--ink); }
.data-table__main:hover { color: var(--green); text-decoration: none; }
.data-table tr.is-expired td,
.data-table tr.is-expired th { opacity: .68; }
.data-table--expandable .data-table__row:hover { background: var(--stone); }
.data-table--expandable .data-table__detail > td { padding: 0; border-bottom: 1px solid var(--line); }

.row-expand__toggle {
  cursor: pointer;
  font-size: 13px;
  color: var(--green);
  list-style: none;
}
.row-expand__toggle::-webkit-details-marker { display: none; }
.row-expand__toggle::before { content: "+ "; }
.row-expand[open] .row-expand__toggle::before { content: "\2212  "; }
.row-expand__body { padding: 14px 0 4px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* Supplement Facts（美式标签版面） */
.facts-panel {
  max-width: 460px;
  border: 2px solid var(--ink);
  padding: 18px 20px;
  background: var(--white);
}
.facts-panel__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  letter-spacing: 0;
}
.facts-panel__rule { height: 1px; background: var(--ink); margin: 6px 0; }
.facts-panel__rule--thick { height: 5px; margin: 8px 0 6px; }
.facts-panel__serving { padding: 4px 0; }
.facts-panel__serving-line { font-size: 13.5px; margin: 0; }
.facts-panel__serving-key { font-weight: 500; }

.facts-table { font-size: 13.5px; }
.facts-table th,
.facts-table td { padding: 5px 0; border-bottom: 1px solid var(--ink); text-align: left; }
.facts-table th { font-weight: 400; padding-right: 10px; }
.facts-table td { white-space: nowrap; }
.facts-table td:last-child { text-align: right; padding-left: 12px; }
.facts-table__row.is-strong th,
.facts-table__row.is-strong td { font-weight: 700; }
.facts-table tr:last-child th,
.facts-table tr:last-child td { border-bottom: 0; }

/* ---------- 13. 证书页 ---------- */
.cert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cert-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
}
.cert-card__media { position: relative; display: block; background: var(--stone); aspect-ratio: 4 / 3; }
.cert-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.cert-card__zoom {
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 4px 10px;
  background: rgba(28, 28, 26, .72);
  color: var(--white);
  border-radius: var(--radius);
  font-size: 12px;
}
.cert-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cert-card__name { font-size: 16px; margin: 0; }
.cert-card__meta { margin: 0; font-size: 13px; }
.cert-card__meta > div { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.cert-card__meta > div:last-child { border-bottom: 0; }
.cert-card__meta dt { color: var(--ink-3); min-width: 40%; }
.cert-card__meta dd { margin: 0; color: var(--ink); }
.cert-card__actions { display: flex; gap: 10px; margin-top: auto; padding-top: 4px; }

/* ---------- 14. 表单 ---------- */
.form { display: flex; flex-direction: column; gap: 28px; }
.form--plain { gap: 18px; }
.form__section { display: flex; flex-direction: column; gap: 18px; }
.form__legend {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  width: 100%;
  margin-bottom: 4px;
}
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form__group { display: flex; flex-direction: column; gap: 6px; }
.form__label { font-size: 13.5px; color: var(--ink-2); }
.form__hint { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.form__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.req { color: var(--danger); }

.input {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.input:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgba(15, 110, 86, .1); }
.input[readonly] { background: var(--stone); color: var(--ink-3); }
.input--select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 17px) 18px, calc(100% - 12px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.input--textarea { min-height: 96px; resize: vertical; }
.input--file { padding: 9px 12px; background: var(--stone); font-size: 13.5px; }

.alert {
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  margin: 0 0 20px;
  border-left: 3px solid;
}
.alert--error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.alert--warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.alert--info { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); }
.alert--ok { background: var(--green-soft); border-color: var(--green); color: var(--green-dark); }

/* ---------- 15. 登录 / 激活 / 找回密码 ---------- */
.auth-card {
  max-width: 460px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 32px 28px;
  background: var(--white);
}
.auth-card__title { font-size: 22px; margin-bottom: 22px; }
.auth-card__foot {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-2);
  text-align: center;
}

/* ---------- 16. 成功页 ---------- */
.message-card {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  padding: 44px 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.message-card--ok { border-color: var(--green-line); }
.message-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  margin-bottom: 20px;
}
.message-card__title { font-size: 26px; }
.message-card__text { color: var(--ink-2); }
.message-card__ref {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  margin: 22px 0;
  padding: 14px 28px;
  background: var(--stone);
  border-radius: var(--radius);
}
.message-card__ref-label { font-size: 12px; color: var(--ink-3); }
.message-card__ref-no { font-size: 19px; letter-spacing: .02em; }
.message-card__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }

/* ---------- 17. 询盘页 ---------- */
.tabs-bar { border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.tabs__link {
  display: inline-block;
  padding: 14px 20px;
  font-size: 14.5px;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tabs__link:hover { color: var(--ink); text-decoration: none; }
.tabs__link.is-active { color: var(--green); border-bottom-color: var(--green); font-weight: 500; }

.oem-brief {
  padding: 22px 24px;
  background: var(--stone);
  border-radius: var(--radius-lg);
  margin-bottom: 28px;
}
.oem-brief__lead { color: var(--ink-2); }
.oem-brief__title { font-size: 15px; margin-bottom: 8px; }

.item-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.item-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 90px 100px 120px minmax(0, 1.4fr) 32px;
  gap: 8px;
  align-items: center;
}
.item-row__cell { min-width: 0; }
.item-row__cell--product { min-width: 0; }
.item-row__remove {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink-3);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.item-row__remove:hover { border-color: var(--danger); color: var(--danger); }
.item-rows__labels {
  display: none;
  font-size: 12px;
  color: var(--ink-3);
}

/* ---------- 18. 政策 / FAQ ---------- */
.policy-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.policy-tabs__link {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.policy-tabs__link:hover { border-color: var(--green); color: var(--green); text-decoration: none; }
.policy-tabs__link.is-active { background: var(--green); border-color: var(--green); color: var(--white); }

.faq-group__title { font-size: 18px; margin: 28px 0 10px; }
.faq-group__title:first-child { margin-top: 0; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q {
  cursor: pointer;
  list-style: none;
  padding: 18px 34px 18px 0;
  font-weight: 500;
  position: relative;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: "+";
  position: absolute;
  right: 6px;
  top: 18px;
  color: var(--green);
  font-size: 19px;
  font-weight: 400;
}
.faq-item[open] .faq-item__q::after { content: "\2212"; }
.faq-item__a { padding: 0 0 20px; color: var(--ink-2); font-size: 14.5px; }

/* 富文本（管理员内容） */
.rich-text { font-size: 15px; color: var(--ink-2); }
.rich-text > *:first-child { margin-top: 0; }
.rich-text > *:last-child { margin-bottom: 0; }
.rich-text h2 { font-size: 22px; margin-top: 32px; color: var(--ink); }
.rich-text h3 { font-size: 18px; margin-top: 26px; color: var(--ink); }
.rich-text ul,
.rich-text ol { padding-left: 22px; margin: 0 0 14px; }
.rich-text li { margin-bottom: 6px; }
.rich-text img { border-radius: var(--radius-lg); margin: 18px 0; }
.rich-text table { margin: 18px 0; font-size: 14px; }
.rich-text th,
.rich-text td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; }
.rich-text a { color: var(--green); text-decoration: underline; }
.rich-text blockquote {
  margin: 18px 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--green-line);
  color: var(--ink-3);
}

/* ---------- 19. 合规声明 ---------- */
.compliance { background: var(--stone); border-top: 1px solid var(--line); padding: 26px 0; }
.compliance__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.compliance__item {
  font-size: 12px;
  line-height: 1.65;
  color: var(--ink-3);
  margin: 0;
}
.compliance__label {
  display: block;
  font-weight: 500;
  color: var(--ink-2);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 11px;
}

/* ---------- 20. 页脚 ---------- */
.site-footer { background: var(--ink); color: #b9b7ae; margin-top: 0; }
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: 56px 0 44px;
}
.site-footer__name { color: var(--white); font-weight: 500; font-size: 16px; margin-bottom: 10px; }
.site-footer__brand { max-width: 320px; }
.site-footer__col { min-width: 0; }
.site-footer__line { font-size: 13.5px; margin-bottom: 4px; }
.site-footer a { color: #b9b7ae; }
.site-footer a:hover { color: var(--white); }
.site-footer__heading {
  color: var(--white);
  font-size: 13px;
  font-weight: 500;
  margin: 0 0 12px;
}
.site-footer__heading--spaced { margin-top: 26px; }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: 8px; font-size: 13.5px; }
.site-footer__langs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.site-footer .lang-chip { background: transparent; border-color: #3a3a36; color: #b9b7ae; }
.site-footer .lang-chip:hover { border-color: var(--white); color: var(--white); }
.site-footer .lang-chip.is-active { border-color: var(--green); color: #7fc4ab; }

.site-footer__compliance {
  border-top: 1px solid #2e2e2b;
  padding: 24px 0;
}
.site-footer__compliance .compliance__item { color: #8d8b83; }
.site-footer__compliance .compliance__label { color: #b9b7ae; }

.site-footer__bottom { border-top: 1px solid #2e2e2b; padding: 18px 0; }
.site-footer__bottom-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer__copy { font-size: 12.5px; color: #8d8b83; margin: 0; }

/* ---------- 21. Cookie 提示条 ---------- */
.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(28, 28, 26, .07);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.cookie-notice__text { font-size: 13px; color: var(--ink-2); margin: 0; }
.cookie-notice__link { text-decoration: underline; }
.cookie-notice__btn { flex-shrink: 0; }

/* ---------- 22. 客户中心 ---------- */
.account-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  padding-top: 24px;
}
.account-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.account-side__card {
  padding: 18px 20px;
  background: var(--stone);
  border-radius: var(--radius-lg);
}
.account-side__company { font-weight: 500; margin: 0; }
.account-side__contact { font-size: 13px; color: var(--ink-2); margin: 2px 0 0; }
.account-side__group { margin: 12px 0 0; font-size: 12.5px; }
.account-side__group-label { display: block; color: var(--ink-3); margin-bottom: 4px; }
.account-side__nav ul { list-style: none; margin: 0; padding: 0; }
.account-side__link {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--ink-2);
  border-left: 2px solid transparent;
}
.account-side__link:hover { background: var(--stone); text-decoration: none; }
.account-side__link.is-active { background: var(--green-soft); color: var(--green); border-left-color: var(--green); font-weight: 500; }
.account-side__logout { margin: 0; }

.account-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 26px; background: var(--white); }
.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.card__title { font-size: 18px; margin: 0; }
.card__desc { font-size: 14px; color: var(--ink-2); margin-bottom: 18px; }

.summary { margin: 0; }
.summary__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.summary__row:last-child { border-bottom: 0; }
.summary__key { color: var(--ink-3); }
.summary__val { color: var(--ink); word-break: break-word; }

.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.stat-box {
  padding: 16px 18px;
  background: var(--stone);
  border-radius: var(--radius);
}
.stat-box__num { display: block; font-size: 24px; font-weight: 500; line-height: 1.2; }
.stat-box__label { font-size: 12.5px; color: var(--ink-3); }

.quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.quick-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 500;
}
.quick-card:hover { border-color: var(--green); color: var(--green); text-decoration: none; }
.quick-card__title { flex: 1; }
.quick-card__arrow { color: var(--green); }

.quote-list { list-style: none; margin: 0; padding: 0; }
.quote-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.quote-list__item:last-child { border-bottom: 0; }
.quote-list__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.quote-list__no { font-weight: 500; }
.quote-list__side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.quote-list__amount { font-weight: 500; }
.quote-list__valid { font-size: 12.5px; color: var(--ink-3); }
.quote-list__expired { font-size: 12.5px; color: var(--danger); }
.quote-list__notes { grid-column: 1 / -1; font-size: 13.5px; color: var(--ink-2); margin: 0; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { position: relative; padding: 0 0 20px 26px; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: -6px;
  width: 1px;
  background: var(--line);
}
.timeline__item:last-child::before { display: none; }
.timeline__dot {
  position: absolute;
  left: 0;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}
.timeline__body { display: flex; flex-direction: column; gap: 2px; }
.timeline__title { margin: 0; }
.timeline__time { font-size: 12.5px; color: var(--ink-3); }

/* 状态徽标 */
.status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.5;
  background: var(--stone-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.status--new { background: var(--green-soft); color: var(--green); }
.status--replied,
.status--sent { background: #eaf1f7; color: #2a5c86; }
.status--quoting { background: var(--warn-soft); color: var(--warn); }
.status--won,
.status--accepted { background: var(--green); color: var(--white); }
.status--rejected,
.status--invalid { background: var(--danger-soft); color: var(--danger); }
.status--expired { background: var(--stone-2); color: var(--ink-3); }
.status--draft { background: var(--stone-2); color: var(--ink-3); }

/* ---------- 23. 错误页 ---------- */
.error-page-wrap { padding: 96px 0; }
.error-page { text-align: center; }
.error-page__code {
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--green);
  margin: 0 0 10px;
}
.error-page__title { font-size: 30px; margin-bottom: 12px; }
.error-page__msg { color: var(--ink-2); max-width: 46ch; margin: 0 auto 28px; }
.error-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ==========================================================================
   响应式
   ========================================================================== */

/* 平板横向：详情页改为上下堆叠，网格降为 2 列 */
@media (max-width: 1240px) {
  /* ★ 窄桌面（901–1240px）：导航项加了一个「Home」，横向空间变紧。
     收紧导航间距 + 品牌间距，避免右侧「申请经销商」按钮被挤出视口。
     900px 以下导航收进汉堡菜单，不受此影响。 */
  .site-nav__list { gap: 16px; }
  .site-nav__link { font-size: 13px; }
  .site-header__inner { gap: 16px; }
  .brand__logo { max-width: 150px; }

  /* ★ 中文导航项更长（「OEM 代工与 ODM 定制」），需要更紧的间距 */
  html[lang="zh-CN"] .site-nav__list { gap: 12px; }
  html[lang="zh-CN"] .site-nav__link { font-size: 13px; }
}

@media (max-width: 1080px) {
  .product-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .product-layout__media { position: static; }
  .product-grid,
  .product-line__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid--related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-line { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .product-line__intro { position: static; }
  .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cert-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
  .item-row { grid-template-columns: minmax(0, 2fr) 80px 90px 110px 32px; }
  .item-row__cell--remark { grid-column: 1 / -1; }
}

/* 平板竖向：导航收进汉堡菜单 */
@media (max-width: 900px) {
  .section { padding: 52px 0; }
  .section--tight { padding: 32px 0; }

  .site-nav { display: none; }
  .hide-sm { display: none; }
  .nav-toggle { display: flex; }
  .nav-drawer { display: block; }
  .site-header__inner { min-height: 64px; gap: 16px; }

  .split,
  .split--reverse { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .split--reverse .split__text { order: 0; }

  .hero__content { min-height: 380px; }
  .hero__title { font-size: 32px; }

  .account-layout { grid-template-columns: minmax(0, 1fr); }
  .account-side { position: static; }
  .account-side__nav ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .account-side__link { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 12px; }
  .account-side__link.is-active { border-left: 0; border-bottom-color: var(--green); }

  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 44px 0 36px; }
  .compliance__row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* 手机横向：多数网格降为 1 列，明细改卡片式 */
@media (max-width: 720px) {
  body { font-size: 15px; }
  h1 { font-size: 27px; }
  h2 { font-size: 22px; }
  .container { padding: 0 18px; }

  .product-grid,
  .product-grid--related,
  .product-line__grid,
  .cert-grid,
  .cert-strip,
  .feature-grid,
  .quick-grid,
  .stat-row,
  .form__row,
  .check-grid { grid-template-columns: minmax(0, 1fr); }

  /* 产品卡片横向滚动 */
  .section--products-scroll .product-grid,
  .page--products .product-grid,
  .product-grid--related {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-right: -18px;
    padding-right: 18px;
  }
  .page--products .product-grid > .product-card,
  .product-grid--related > .product-card {
    flex: 0 0 74vw;
    max-width: 74vw;
    scroll-snap-align: start;
  }

  .hero__content { min-height: 320px; padding-top: 48px; padding-bottom: 48px; }
  .hero__title { font-size: 27px; max-width: none; }
  .hero__subtitle { font-size: 15.5px; }

  .page-head { padding: 34px 0 6px; }
  .section { padding: 44px 0; }
  .section--tight { padding: 26px 0; }

  .filters { flex-direction: column; align-items: stretch; gap: 14px; }
  .filters__group--checks { flex-direction: column; align-items: flex-start; gap: 10px; }
  .filters__actions { margin-left: 0; }
  .filters__actions .btn { flex: 1; }

  .price-block { padding: 20px 18px; }
  .price-block__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .price-block__row dd { font-size: 17px; }

  .sample-panel { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sample-panel .btn { width: 100%; }

  .doc-list__item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .doc-list__item .btn { width: 100%; }

  .gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* 表格改卡片式：用 data-label 做行内表头 */
  .table-wrap { overflow-x: visible; }
  .data-table thead { display: none; }
  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table th,
  .data-table td { display: block; width: 100%; }
  .data-table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 6px 14px;
    margin-bottom: 12px;
  }
  .data-table th,
  .data-table td {
    border-bottom: 0;
    padding: 8px 0;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    text-align: right;
  }
  .data-table th[data-label]::before,
  .data-table td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-weight: 400;
    font-size: 12.5px;
    color: var(--ink-3);
    text-align: left;
  }
  .data-table td[data-label=""]::before { content: none; }
  .data-table__detail { display: none; }

  .item-row {
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--stone);
  }
  .item-row__cell { grid-column: 1; }
  .item-row__remove { grid-column: 2; grid-row: 1; }

  .summary__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
  .summary__val { text-align: left; }

  .quote-list__item { grid-template-columns: minmax(0, 1fr); }
  .quote-list__side { justify-content: flex-start; }

  .card { padding: 20px 18px; }
  .auth-card { padding: 26px 20px 24px; }
  .message-card { padding: 34px 22px; }

  .cookie-notice__inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie-notice__btn { width: 100%; }

  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 36px 0 28px; }
  .site-footer__bottom-inner { justify-content: center; text-align: center; }

  .error-page-wrap { padding: 64px 0; }
  .error-page__actions .btn { flex: 1; }
}

/* 超窄屏 */
@media (max-width: 560px) {
  .brand__tag { display: none; }
  .lang-switch { display: none; }
  .tabs { gap: 0; }
  .tabs__link { padding: 12px 14px; font-size: 13.5px; }
  .facts-panel { padding: 14px 15px; }
  .facts-panel__title { font-size: 19px; }
  .stat-box__num { font-size: 21px; }
}

/* 打印：隐藏交互元素 */
@media print {
  .site-header,
  .nav-drawer,
  .cookie-notice,
  .site-footer,
  .account-side,
  .btn { display: none !important; }
  body { font-size: 12px; }
  .container { max-width: none; padding: 0; }
}

/* ---------- 8. 中文排版微调 ---------- */
/* 中文没有词间空格，字面率更高、行高需要比西文更松；
   字距略收紧避免中文看起来松散。标题与正文的调整幅度不同。 */
html[lang^="zh"] body {
  line-height: 1.8;
  letter-spacing: 0.01em;
}

html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3,
html[lang^="zh"] h4 {
  line-height: 1.4;
  letter-spacing: 0;
}

/* 中文标题不需要西文的负字距 */
html[lang^="zh"] .hero__title,
html[lang^="zh"] .section__title,
html[lang^="zh"] .product-head__title {
  letter-spacing: 0;
}

/* 表单标签、按钮、表格等短文本在中文字体下略微偏大，按 0.96 缩一点保持视觉均衡 */
html[lang^="zh"] .btn,
html[lang^="zh"] .form__label,
html[lang^="zh"] .data-table th,
html[lang^="zh"] .nav-drawer__link {
  letter-spacing: 0;
}

/* 数字与单位（MOQ、交期、价格）在中文里应与中文之间留一点呼吸 */
html[lang^="zh"] .price-block__row dd,
html[lang^="zh"] .stat__num,
html[lang^="zh"] .tag {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   9. 视觉精细化升级层
   在不改动任何 HTML 结构的前提下，通过 CSS 覆盖提升观感。
   主要做四件事：① 建立阴影层级  ② 加大留白与字号对比
   ③ 圆角与按钮手感优化  ④ 卡片悬停与滚动动效
   ========================================================================== */

:root {
  /* ---------- 阴影层级：从「无」到「有」，1–4 级递进 ---------- */
  --shadow-1: 0 1px 2px rgba(28, 28, 26, .04), 0 1px 3px rgba(28, 28, 26, .05);
  --shadow-2: 0 2px 6px rgba(28, 28, 26, .05), 0 4px 12px rgba(28, 28, 26, .06);
  --shadow-3: 0 6px 16px rgba(28, 28, 26, .07), 0 12px 28px rgba(28, 28, 26, .08);
  --shadow-4: 0 12px 28px rgba(28, 28, 26, .09), 0 24px 56px rgba(28, 28, 26, .10);
  /* 主色柔光：按钮悬停时的绿色辉光 */
  --glow-green: 0 4px 14px rgba(15, 110, 86, .22);
  --glow-green-lg: 0 8px 24px rgba(15, 110, 86, .28);

  /* ---------- 圆角：比原来更圆润，但不失专业感 ---------- */
  --radius: 6px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --radius-pill: 999px;

  /* ---------- 留白：整体放宽，呼吸感更强 ---------- */
  --gap: 28px;
  --section-y: 88px;
  --section-y-tight: 52px;

  /* ---------- 动效：统一缓动与时长 ---------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .18s;
  --t-mid: .28s;
  --t-slow: .5s;
}

/* ---------- 9.1 字号层级：拉开对比，标题更透气 ---------- */
h1 { font-size: clamp(30px, 4.2vw, 44px); letter-spacing: -.022em; }
h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.018em; }
h3 { font-size: clamp(18px, 2vw, 21px); letter-spacing: -.012em; }
h4 { font-size: 16px; }

.section__title { line-height: 1.22; }
.section__desc { font-size: 16px; line-height: 1.75; max-width: 68ch; }
.hero__title { line-height: 1.1; letter-spacing: -.028em; }
.hero__subtitle { font-size: 17px; line-height: 1.72; max-width: 60ch; }

/* ---------- 9.2 留白 ---------- */
.section { padding: var(--section-y) 0; }
.section--tight { padding: var(--section-y-tight) 0; }
.section--intro { padding: 52px 0 0; }
.section__head { margin-bottom: 44px; }
.container { padding-left: 24px; padding-right: 24px; }

/* ---------- 9.3 按钮：更饱满的手感 + 悬停辉光 ---------- */
.btn {
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-size: 14.5px;
  letter-spacing: .002em;
  transition:
    background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  box-shadow: var(--shadow-1);
}
.btn--primary:hover {
  box-shadow: var(--glow-green);
  transform: translateY(-1px);
}
.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-1);
}

.btn--outline:hover {
  box-shadow: var(--shadow-1);
}

.btn--ghost:hover { border-color: var(--ink-3); }

.btn--sm { padding: 8px 16px; font-size: 13.5px; }

/* ---------- 9.4 卡片：柔和阴影 + 更明显的悬停反馈 ---------- */
.card {
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
  border-color: var(--line);
}
.card:hover { box-shadow: var(--shadow-2); }

.product-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition:
    box-shadow var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease-out);
}
.product-card:hover {
  border-color: var(--green-line);
  box-shadow: var(--shadow-3);
  transform: translateY(-4px);
}
.product-card__title a { transition: color var(--t-fast) var(--ease); }
.product-card:hover .product-card__title a { color: var(--green); }

.cert-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease-out);
}
.cert-card:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }

.quick-card,
.feature,
.oem-brief,
.account-side__card,
.message-card {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.quick-card:hover,
.feature:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }

/* ---------- 9.5 价格区块：这是客户最关注的部分，做视觉重点 ---------- */
.price-block {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 28px 30px;
  border-left-width: 4px;
}
.price-block__row dd {
  font-size: 21px;
  letter-spacing: -.012em;
  font-variant-numeric: tabular-nums;
}
.price-block__row:first-child dd {
  font-size: 34px;
  letter-spacing: -.02em;
  color: var(--green);
  font-weight: 600;
}
.sample-panel,
.doc-block {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

/* ---------- 9.6 表单：更柔和的输入框 ---------- */
.input,
select.input,
textarea.input {
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(15, 110, 86, .12);
  outline: none;
}

/* ---------- 9.7 标签与徽章 ---------- */
.tag,
.status {
  border-radius: var(--radius-pill);
  letter-spacing: .012em;
  font-weight: 500;
}

/* ---------- 9.8 图片：柔和圆角 + 悬停微缩放 ---------- */
.product-card__media,
.gallery__main {
  border-radius: var(--radius);
  overflow: hidden;
}
.gallery__thumb { border-radius: var(--radius); overflow: hidden; }
.product-card__media img,
.gallery__img {
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-fast) var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.035); }

/* ---------- 9.9 顶部导航：更薄的悬浮感 ---------- */
.site-header {
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.site-nav__link {
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
.site-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1.5px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-mid) var(--ease-out);
}
.site-nav__link:hover::after,
.site-nav__link.is-active::after { transform: scaleX(1); }

/* ---------- 9.10 数据表：斑马纹 + 表头更清晰 ---------- */
.data-table tbody tr {
  transition: background-color var(--t-fast) var(--ease);
}
.data-table tbody tr:nth-child(even) { background: rgba(244, 242, 236, .45); }
.data-table tbody tr:hover { background: var(--green-soft); }
.data-table th {
  font-size: 12.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

/* ---------- 9.11 页脚：更深的层次 ---------- */
.site-footer { border-top: 1px solid var(--line); }
.site-footer__bottom { background: var(--stone); }

/* ---------- 9.12 滚动进场动画（渐进增强：不支持时内容照常显示） ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  }
  .js-reveal.is-in { opacity: 1; transform: translateY(0); }

  .product-grid > .product-card:nth-child(1),
  .feature-grid > .feature:nth-child(1),
  .cert-grid > .cert-card:nth-child(1),
  .quick-grid > .quick-card:nth-child(1) { transition-delay: 0ms; }
  .product-grid > .product-card:nth-child(2),
  .feature-grid > .feature:nth-child(2),
  .cert-grid > .cert-card:nth-child(2),
  .quick-grid > .quick-card:nth-child(2) { transition-delay: 70ms; }
  .product-grid > .product-card:nth-child(3),
  .feature-grid > .feature:nth-child(3),
  .cert-grid > .cert-card:nth-child(3),
  .quick-grid > .quick-card:nth-child(3) { transition-delay: 140ms; }
  .product-grid > .product-card:nth-child(4) { transition-delay: 210ms; }
}

/* ---------- 9.13 中文页面：字面率更高，字号补偿 ---------- */
/* 中文正文比西文显得更大，行距也要更松，这里做针对性补偿 */
html[lang^="zh"] .section__desc { font-size: 16.5px; }
html[lang^="zh"] .btn { letter-spacing: .01em; }
html[lang^="zh"] .product-card__desc { line-height: 1.78; }

/* ---------- 9.14 移动端：阴影收敛，避免视觉过载 ---------- */
@media (max-width: 720px) {
  .section { padding: 56px 0; }
  .section--tight { padding: 36px 0; }
  .container { padding-left: 20px; padding-right: 20px; }

  .btn { padding: 12px 22px; }

  /* 移动端触摸没有 hover，避免阴影跳动 */
  .product-card:hover,
  .cert-card:hover,
  .quick-card:hover,
  .feature:hover { transform: none; }
  .product-card:hover .product-card__media img { transform: none; }
  .product-card:hover { box-shadow: var(--shadow-1); }

  .price-block { padding: 22px 20px; }
  .price-block__row:first-child dd { font-size: 29px; }
  .price-block__row dd { font-size: 18px; }

  .site-nav__link::after { display: none; }
}

/* ---------- 9.15 尊重「减少动态效果」的系统设置 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal { opacity: 1; transform: none; }
}

/* ---------- 9.17 内容配图（OEM 专页 / 关于我们页） ---------- */

/* 配图：整宽图片 + 说明 */
.figure { margin: 0; }
.figure__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  background: var(--stone);
}
.figure--plain .figure__img { box-shadow: none; border: 1px solid var(--line); }
.figure__cap {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
  text-align: center;
}

/* 图文两栏：左文右图（窄屏自动堆叠） */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--gap) * 1.4);
  align-items: center;
}
.split--reverse .split__media { order: -1; }
.split__text > :first-child { margin-top: 0; }
.split__text > :last-child { margin-bottom: 0; }
.split__title {
  font-size: 24px;
  line-height: 1.25;
  margin-bottom: 14px;
}
.split__lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  margin-bottom: 18px;
}

/* 能力标签（剂型 / 包装等清单） */
.cap-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}
.cap-list__item {
  padding: 7px 14px;
  border: 1px solid var(--green-line);
  border-radius: 999px;
  background: var(--green-soft);
  font-size: 13px;
  color: var(--green-dark);
  font-weight: 500;
}

/* 流程步骤条 —— 卡片式变体。
   ★ 必须带 .step-list--cards 才生效：
     基础版 .step-list 是竖排（首页、询盘页、产品详情页的窄栏里用它），
     全局改成栅格会把窄栏挤成一行小格子，文字全断行。
   ★ 计数器只在 <li> 上加一次（基础版已加），这里不要再写 counter-increment。 */
.step-list--cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 0;
}
.step-list--cards .step-list__item {
  padding: 16px 16px 16px 44px;
  background: var(--white);
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.5;
}
/* 基础版给最后一项去了下边框，卡片版要补回来，否则最后一张缺一条边 */
.step-list--cards .step-list__item:last-child {
  border-bottom: 1px solid var(--line);
}
.step-list--cards .step-list__item::before {
  left: 14px;
  top: 15px;
  width: 22px;
  height: 22px;
  background: var(--green);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}

/* CTA 条 */
.cta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 26px 30px;
  border-radius: var(--radius-lg);
  background: var(--green);
  color: var(--white);
}
.cta-strip__title { font-size: 20px; font-weight: 600; }
.cta-strip__text { font-size: 14px; opacity: .88; margin-top: 4px; }
.cta-strip__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-strip .btn--primary {
  background: var(--white);
  color: var(--green-dark);
  border-color: var(--white);
}
.cta-strip .btn--outline {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, .55);
}
.cta-strip .btn--outline:hover { background: rgba(255, 255, 255, .12); }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split--reverse .split__media { order: 0; }
  .step-list--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .step-list--cards { grid-template-columns: minmax(0, 1fr); }
  .cta-strip { padding: 20px; }
}

/* ---------- 9.16 打印：去掉装饰，保留内容 ---------- */
@media print {
  .site-header, .site-footer__bottom, .btn, .lang-switch { display: none !important; }
  .card, .product-card { box-shadow: none; }
}

/* ==========================================================================
   10. 产品列表工具条 / 面包屑 / 空状态 / 悬浮询盘
   ========================================================================== */

/* ---------- 10.1 面包屑 ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-3);
}
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--green); text-decoration: underline; }
.crumbs__sep { color: var(--line); }
.crumbs__now { color: var(--ink-2); }

/* ---------- 10.2 列表工具条（结果数 + 排序 + 每页） ---------- */
.list-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.list-bar__count { margin: 0; font-size: 14px; color: var(--ink-2); }
.list-bar__count strong { font-weight: 500; color: var(--ink); }
.list-bar__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.list-bar__field { display: flex; align-items: center; gap: 8px; margin: 0; }
.list-bar__label { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.list-bar__field .input--select { min-width: 132px; }

/* 小号输入控件（工具条里的下拉用） */
.input--sm { padding: 7px 10px; font-size: 13px; }

/* ---------- 10.3 空结果 ---------- */
.empty-state {
  padding: 56px 24px 60px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  text-align: center;
}
.empty-state__icon { color: var(--ink-3); opacity: .5; margin-bottom: 12px; }
.empty-state__title { margin: 0 0 6px; font-size: 17px; color: var(--ink); }
.empty-state__hint {
  max-width: 460px;
  margin: 0 auto 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-3);
}
.empty-state__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* ---------- 10.4 产品卡：决策信息 ---------- */
/* 可贴牌标签：白底描边，和灰底「品类」、绿底「Vegan」区分开 */
.tag--oem { background: var(--white); border: 1px solid var(--green-line); color: var(--green); }
.product-card__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}
.product-card__facts i { font-style: normal; color: var(--line); }
.product-card__actions { flex-wrap: wrap; gap: 10px; }

/* ---------- 10.5 悬浮询盘入口 ---------- */
.c-fab { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
.c-fab__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  list-style: none;
  box-shadow: 0 8px 22px rgba(15, 110, 86, .28);
  transition: transform .15s ease, background .15s ease;
}
.c-fab__btn::-webkit-details-marker { display: none; }
.c-fab__btn::marker { content: ''; }
.c-fab__btn:hover { background: var(--green-dark); transform: translateY(-1px); }
.c-fab[open] .c-fab__btn { background: var(--green-dark); }

.c-fab__panel {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: 276px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: 0 16px 40px rgba(20, 20, 18, .14);
}
.c-fab__title { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
.c-fab__hint { margin: 0 0 14px; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.c-fab__actions { display: flex; flex-direction: column; gap: 8px; }
.c-fab__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--ink);
  font-size: 13.5px;
  text-decoration: none;
}
.c-fab__item:hover { border-color: var(--green); color: var(--green); }
.c-fab__item em {
  font-style: normal;
  font-size: 12px;
  color: var(--ink-3);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.c-fab__item--primary {
  justify-content: center;
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 500;
}
.c-fab__item--primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

@media (max-width: 560px) {
  .c-fab { right: 14px; bottom: 14px; }
  .c-fab__panel { width: min(276px, calc(100vw - 28px)); }
  .list-bar__controls { width: 100%; justify-content: space-between; }
}

@media print {
  .c-fab { display: none; }
}

/* ---------- 10.6 手机端：筛选栏与工具条不能横向溢出 ---------- */
@media (max-width: 720px) {
  .filters { padding: 16px; gap: 14px; }
  /* ★ flex 子项默认 min-width:auto，内容（下拉的最长选项）会把容器顶宽，必须归零 */
  .filters__group { flex: 1 1 100%; min-width: 0; }
  .filters__group .input,
  .filters__group .input--select { width: 100%; min-width: 0; }
  .filters__group--checks { flex-wrap: wrap; gap: 12px 18px; }
  .filters__actions { width: 100%; margin-left: 0; }

  .list-bar { align-items: flex-start; }
  .list-bar__controls { width: 100%; gap: 10px; }
  .list-bar__field { flex: 1 1 0; min-width: 0; }
  .list-bar__field .input--select { width: 100%; min-width: 0; }

  .product-card__actions { justify-content: flex-start; }
}

/* ---------- 10.7 阻断移动端横向溢出 ----------
   移动端侧边抽屉用 translateX(100%) 停在屏幕外，Chromium 会把它算进
   文档的 scrollWidth（实测 390 → 710），于是所有 width:100% 的容器
   跟着变宽，整页内容被裁在视口右侧。
   overflow-x: clip 不产生滚动容器（不影响 sticky/fixed），比 hidden 安全。 */
html,
body {
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* 标签行：三枚标签（品类 / 可贴牌 / Vegan）尽量挤在一行，避免卡片参差 */
.product-card__meta { display: flex; flex-wrap: wrap; gap: 5px; }
.product-card__meta .tag { font-size: 11px; padding: 2px 8px; }

/* ==========================================================================
   11. 产品矩阵（首页矩阵区块 + /catalog 交叉表）
   —— 采购视角：先看品类和剂型能不能覆盖，再看单品。
   ========================================================================== */

.page-head__lead {
  max-width: 720px;
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}

.catalog-total {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--ink-3);
}
.catalog-total strong { color: var(--green); font-size: 18px; }

/* ---------- 11.1 品类磁贴 ---------- */
.cat-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.cat-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 18px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.cat-tile:hover {
  border-color: var(--green-line);
  box-shadow: 0 8px 22px rgba(15, 110, 86, .09);
  transform: translateY(-1px);
}
.cat-tile__count {
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--green);
}
.cat-tile__name { font-size: 15px; font-weight: 500; color: var(--ink); }
.cat-tile__go {
  position: absolute;
  right: 16px;
  bottom: 16px;
  color: var(--ink-3);
  font-size: 15px;
}
.cat-tile:hover .cat-tile__go { color: var(--green); }

/* ---------- 11.2 剂型胶囊（带数量） ---------- */
.form-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}
.form-strip__label {
  font-size: 13px;
  color: var(--ink-3);
  margin-right: 2px;
}
.form-strip--group { margin-top: 10px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--green-line);
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green-dark);
  font-size: 13px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.chip i {
  font-style: normal;
  font-size: 11px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-3);
}
.chip:hover { background: var(--green); color: var(--white); }
.chip:hover i { background: var(--white); color: var(--green-dark); }

/* ---------- 11.3 品类 × 剂型 交叉表 ---------- */
.matrix-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}
.matrix-table th,
.matrix-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  text-align: center;
}
.matrix-table tr:last-child th,
.matrix-table tr:last-child td { border-bottom: 0; }
.matrix-table th:last-child,
.matrix-table td:last-child { border-right: 0; }

.matrix-table thead th {
  background: var(--stone);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.matrix-table thead th a { color: inherit; text-decoration: none; }
.matrix-table thead th a:hover { color: var(--green); }
.matrix-table tbody th {
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  background: var(--stone);
}
.matrix-table tbody th a { color: var(--ink); text-decoration: none; }
.matrix-table tbody th a:hover { color: var(--green); }

.matrix-cell {
  display: inline-block;
  min-width: 30px;
  padding: 3px 6px;
  border-radius: var(--radius);
  color: var(--green-dark);
  font-weight: 600;
  text-decoration: none;
}
a.matrix-cell:hover { background: var(--green-soft); }
.matrix-cell--empty { color: var(--line); font-weight: 400; }

.matrix-table__sum { font-weight: 600; color: var(--ink); }

.facet-note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
}

.section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

/* ---------- 11.4 断点 ---------- */
@media (max-width: 900px) {
  .cat-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cat-matrix { grid-template-columns: 1fr; gap: 12px; }
  .cat-tile { padding: 16px; flex-direction: row; align-items: center; gap: 12px; }
  .cat-tile__count { font-size: 24px; }
  .cat-tile__go { position: static; margin-left: auto; }
  .form-strip { gap: 8px; }
  .chip { font-size: 12px; padding: 5px 10px; }
  .section__actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- 11.5 详情页规格书（"字段: 值" 列表） ---------- */
.spec-lines {
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.spec-lines__row {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.spec-lines__row dt {
  margin: 0;
  color: var(--ink-3);
  font-weight: 500;
}
.spec-lines__row dd {
  margin: 0;
  color: var(--ink);
  line-height: 1.6;
  word-break: break-word;
}
@media (max-width: 560px) {
  .spec-lines__row { grid-template-columns: 1fr; gap: 2px; }
  .spec-lines__row dt { font-size: 12px; }
}