@charset "utf-8";
/* =============================================================================
   NovoPro 中文站样式表
   -----------------------------------------------------------------------------
   1.  设计令牌 (tokens)
   2.  基础与重置
   3.  排版与正文
   4.  布局原语（容器 / 栅格 / 分区）
   5.  页头（工具条 / 品牌行 / 搜索 / 主导航 / 移动端抽屉）
   6.  页脚
   7.  组件（按钮 / 面包屑 / 标题 / 面板 / 表格 / 徽章 / 提示 / 分页 / 侧栏 / 表单）
   8.  首页
   9.  产品列表
   10. 产品详情
   11. 资讯与内容页
   12. 在线工具（索引 / 单个工具）
   13. 搜索结果
   14. 联系我们 / 404
   15. 数据库内容兼容层（历史页面沿用 class）
   16. 科研图形（酶切位点、质粒图谱、序列比对配色）
   17. 文献卡片
   18. 响应式
   19. 动效与打印
   ========================================================================== */

/* =============================================================================
   1. 设计令牌
   品牌主色 #104c82；辅助色阶由主色推演，中性色与主色同色温（冷灰）。
   ========================================================================== */
:root {
  /* 品牌色阶 */
  --brand-900: #07253f;
  --brand-800: #0b3557;
  --brand-700: #104c82;
  --brand-600: #1a5f9e;
  --brand-500: #2b76b8;
  --brand-400: #5b97cc;
  --brand-300: #93b9dc;
  --brand-200: #c3d9eb;
  --brand-100: #dfebf5;
  --brand-50: #eff6fb;

  /* 中性色阶 */
  --ink-900: #0e1b26;
  --ink-800: #16293a;
  --ink-700: #22394e;
  --ink-600: #3a5169;
  --ink-500: #566d85;
  --ink-400: #7d90a5;
  --ink-300: #a9b9c8;
  --ink-200: #cfdae4;
  --ink-100: #e4ecf3;
  --ink-50: #f4f8fb;
  --paper: #ffffff;

  /* 语义色 */
  --text: var(--ink-800);
  --text-muted: var(--ink-500);
  --text-faint: #5f7186;
  --rule: var(--ink-100);
  --rule-strong: var(--ink-200);
  --success: #14724b;
  --success-bg: #eaf5ef;
  --warn: #8a5a10;
  --warn-bg: #fbf3e4;
  --danger: #a92a20;
  --danger-bg: #fbeeed;

  /* 字体 */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC",
    "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* 字号 */
  --fs-2xs: 0.75rem;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.75rem;

  /* 间距 */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 56px;
  --sp-9: 72px;
  --sp-10: 96px;

  /* 圆角：克制的近直角风格 */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;

  /* 投影：仅浮层与强调使用 */
  --shadow-1: 0 1px 2px rgba(11, 53, 87, 0.07);
  --shadow-2: 0 4px 14px rgba(11, 53, 87, 0.09);
  --shadow-3: 0 12px 32px rgba(11, 53, 87, 0.16);

  /* 版心 */
  --container: clamp(1000px, 86vw, 1320px);
  --container-wide: clamp(1120px, 94vw, 1400px);
  --gutter: clamp(16px, 4vw, 40px);
  --measure: 74ch;

  /* 动效 */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

/* =============================================================================
   2. 基础与重置
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header,
section,
footer,
aside,
nav,
article,
figure,
main {
  display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-900);
  letter-spacing: -0.005em;
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
  width: 100%;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg,
video {
  max-width: 100%;
}

img {
  border: 0;
  vertical-align: middle;
  height: auto;
}

a {
  color: var(--brand-700);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--brand-500);
}

b,
strong {
  font-weight: 600;
  color: inherit;
}

sub,
sup {
  font-size: 0.72em;
  position: relative;
  line-height: 0;
}

sub {
    transform: scale(0.8);
    display: inline-block;
    font-size: 0.9em;
}

sup {
  top: -0.4em;
}

hr {
  height: 0;
  margin: var(--sp-5) 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

::selection {
  background: var(--brand-200);
  color: var(--ink-900);
}

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* 键盘用户跳转链接 */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2000;
  transform: translate(-50%, -120%);
  padding: 10px 18px;
  background: var(--brand-700);
  color: #fff;
  font-size: var(--fs-sm);
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus,
.skip-link:hover {
  transform: translate(-50%, 0);
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 图标基元：统一 mask + currentColor，避免各页面各写一套彩色 SVG */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  vertical-align: -0.125em;
}

.i-phone {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3h3l2 5-2.5 1.5a12 12 0 0 0 6 6L15 13l5 2v3a2 2 0 0 1-2.2 2A17 17 0 0 1 3 5.2A2 2 0 0 1 5 3Z'/></svg>");
}

.i-mail {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><path d='m3.5 6.5 8.5 6 8.5-6'/></svg>");
}

.i-pin {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s7-5.6 7-11a7 7 0 1 0-14 0c0 5.4 7 11 7 11Z'/><circle cx='12' cy='10' r='2.6'/></svg>");
}

.i-chat {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8 8 0 0 1-8 8H7l-4 3v-4.6A8 8 0 0 1 3 11.5a8 8 0 0 1 8-8h2a8 8 0 0 1 8 8Z'/></svg>");
}

.i-cart {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 4h2.2l2.3 11.2A2 2 0 0 0 9.5 17H18a2 2 0 0 0 2-1.6L21.5 8H6'/><circle cx='9.5' cy='20' r='1.4'/><circle cx='17.5' cy='20' r='1.4'/></svg>");
}

.i-search {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='m15.5 15.5 5 5'/></svg>");
}

.i-chevron {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

.i-arrow-up {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19V5M5 12l7-7 7 7'/></svg>");
}

.i-menu {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'><path d='M3 6h18M3 12h18M3 18h18'/></svg>");
}

.i-close {
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'><path d='m5 5 14 14M19 5 5 19'/></svg>");
}

/* =============================================================================
   3. 排版与正文
   ========================================================================== */
.prose {
  font-size: var(--fs-base);
  line-height: 1.85;
  color: var(--text);
  /* max-width: var(--measure); */
}

.prose > * + * {
  margin-top: var(--sp-4);
}

.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-2);
}

.prose h2 {
  font-size: var(--fs-xl);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.prose h3 {
  font-size: var(--fs-lg);
}

.prose h4 {
  font-size: var(--fs-md);
}

.prose ul,
.prose ol,
ul.prose,
ol.prose {
  padding-left: 1.35em;
}

.prose ul,
ul.prose {
  list-style: disc;
}

.prose ol,
ol.prose {
  list-style: decimal;
}

.prose li,
ul.prose > li,
ol.prose > li {
  margin: 0.35em 0;
}

.prose li::marker,
ul.prose > li::marker,
ol.prose > li::marker {
  color: var(--brand-400);
}

.prose a {
  text-decoration: underline;
  text-decoration-color: var(--brand-300);
  text-underline-offset: 2px;
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.prose blockquote {
  padding: var(--sp-3) var(--sp-5);
  border-left: 2px solid var(--brand-400);
  background: var(--brand-50);
  color: var(--ink-700);
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
}

.prose pre {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
  padding: var(--sp-4);
  overflow-x: auto;
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}

/* =============================================================================
   4. 布局原语
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* padding-inline: var(--gutter); */
}

/* 历史页面沿用的 12 栏容器：宽度与内边距统一，栏宽由 flex 决定 */
.container_12 {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container_12::after {
  content: "";
  display: block;
  clear: both;
}

#main {
  display: block;
  padding: var(--sp-6) 0 var(--sp-8);
}

#main > .container_12 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-6);
}

#main > .container_12 > * {
  min-width: 0;
}

#main > .container_12 > .grid_3 {
  flex: 0 0 268px;
  max-width: 268px;
}

#main > .container_12 > *:not(.grid_3) {
  flex: 1 1 0;
}

#main > .container_12 > .grid_12,
#main > .container_12 > .product_page {
  flex: 1 1 100%;
}

.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_8,
.grid_9,
.grid_12 {
  min-width: 0;
}

.grid_12 {
  width: 100%;
}

/* 旧版用 float 布局时留下的清浮动占位，现已全部改为 flex/grid，
   若保留会变成 flex 子项并挤占一半宽度，因此直接隐藏。 */
.clear {
  display: none;
}

/* =============================================================================
   5. 页头
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

/* 5.1 工具条 -------------------------------------------------------------- */
.topbar {
  background: var(--ink-50);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 38px;
}

.topbar__contact {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-5);
}

.topbar__contact > li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}

.topbar__contact a,
.topbar__contact .linkbtn {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.topbar__contact a:hover,
.topbar__contact .linkbtn:hover {
  color: var(--brand-600);
}

.topbar__contact .icon {
  color: var(--brand-500);
  width: 15px;
  height: 15px;
}

.topbar__aux {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  /* 右侧这组不参与压缩：空间不够时让左边的联系方式换行，而不是把购物车标签挤成竖排 */
  flex: 0 0 auto;
}

/* 顶栏左右两组按内容宽度排布。
   基线里 ul 被统一设成 width:100%（见上文 reset），而 .topbar__contact 正好是个 ul：
   作为 flex 子项它会吃掉整条顶栏，把右侧的 NovoBuilder / 购物车挤到 ~130px 并折成两行。 */
.topbar__contact {
  width: auto;
  min-width: 0;
}

.topbar__aux > a {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.topbar__aux > a:hover {
  color: var(--brand-600);
}

/* 5.2 品牌行 -------------------------------------------------------------- */
.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 88px;
  padding-block: var(--sp-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.brand svg {
  width: 176px;
  height: auto;
  display: block;
}

.iso-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--brand-700);
  line-height: 1;
  transition: border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.iso-badge:hover {
  border-color: var(--brand-300);
  color: var(--brand-600);
}

.iso-badge svg {
  width: 27px;
  height: 27px;
  display: block;
}

.masthead__spacer {
  flex: 1 1 auto;
}

/* 5.3 搜索 ---------------------------------------------------------------- */
.main-search {
  display: flex;
  align-items: stretch;
  flex: 0 1 460px;
  width: min(100%, 460px);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  transition: border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.main-search:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

.main-search .dropdown {
  position: relative;
  display: flex;
  flex: none;
}

.main-search .dropdown > button.button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0 10px;
  height: auto;
  border: 0;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  background: var(--ink-50);
  color: var(--ink-600);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 38px;
  white-space: nowrap;
  cursor: pointer;
}

.main-search .dropdown > button.button::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 3px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

.main-search .dropdown > button.button:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

.main-search .dropdown__content {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 90;
  min-width: 150px;
  padding: var(--sp-1);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
}

.main-search .dropdown__content.is-open {
  display: block;
  animation: pop var(--dur) var(--ease);
}

.dropdown__content button.button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--ink-700);
  font: inherit;
  font-size: var(--fs-xs);
  text-align: left;
  line-height: 1.5;
  cursor: pointer;
}

.dropdown__content button.button:hover,
.dropdown__content button.button[aria-current="true"] {
  background: var(--brand-50);
  color: var(--brand-700);
}

.main-search__input-container {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
}

.main-search [type="text"] {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 12px;
  height: 38px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink-800);
  appearance: none;
}

.main-search [type="text"]::placeholder {
  color: var(--ink-500);
}

.main-search [type="text"]:focus {
  outline: none;
  box-shadow: none;
}

.main-search .button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--brand-700);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.main-search .button[type="submit"]:hover {
  background: var(--brand-600);
}

.main-search .button[type="submit"] .icon {
  width: 17px;
  height: 17px;
}

/* 首页大号搜索 */
.main-search--lg {
  flex: 1 1 auto;
  width: min(100%, 640px);
  border: 0;
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.main-search--lg [type="text"] {
  height: 52px;
  font-size: var(--fs-base);
}

.main-search--lg .dropdown > button.button {
  padding-inline: 14px;
  line-height: 52px;
}

.main-search--lg .button[type="submit"] {
  width: 58px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.main-search--lg .button[type="submit"] .icon {
  width: 19px;
  height: 19px;
}

/* 5.4 主导航 -------------------------------------------------------------- */
.sitenav {
  border-top: 1px solid var(--rule);
  background: var(--paper);
}

.sitenav__list {
  display: flex;
  align-items: stretch;
  gap: var(--sp-1);
  min-height: 50px;
  /* 抵消首尾项的内边距，让第一个菜单项与上方 logo 左缘对齐 */
  margin-left: -20px;
}

.sitenav__item {
  position: relative;
  display: flex;
}

.sitenav__item > a,
.sitenav__item > button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 20px;
  border: 0;
  background: none;
  color: var(--ink-700);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}

.sitenav__item > a::after,
.sitenav__item > button::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 0;
  height: 2px;
  background: var(--brand-700);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.sitenav__item:hover > a::after,
.sitenav__item:hover > button::after,
.sitenav__item.is-current > a::after,
.sitenav__item.is-current > button::after,
.sitenav__item.is-open > button::after {
  transform: scaleX(1);
}

.sitenav__item:hover > a,
.sitenav__item:hover > button,
.sitenav__item.is-current > a,
.sitenav__item.is-current > button,
.sitenav__item.is-open > button {
  color: var(--brand-700);
}

.sitenav__item > button .icon {
  width: 11px;
  height: 11px;
  transition: transform var(--dur) var(--ease);
}

.sitenav__item.is-open > button .icon {
  transform: rotate(180deg);
}

.sitenav__panel {
  display: none;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 80;
  min-width: 240px;
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--brand-700);
  box-shadow: var(--shadow-2);
}

.sitenav__item.is-open > .sitenav__panel {
  display: block;
  animation: pop var(--dur) var(--ease);
}

.sitenav__panel--mega {
  width: min(880px, calc(100vw - 2 * var(--gutter)));
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-6);
}

.sitenav__item.is-open > .sitenav__panel--mega {
  display: grid;
}

.sitenav__group {
  min-width: 0;
}

.sitenav__group > h3,
.sitenav__group > span {
  display: block;
  margin-bottom: var(--sp-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-500);
}

.sitenav__group ul {
  display: flex;
  flex-direction: column;
}

.sitenav__group a {
  display: block;
  padding: 5px 0;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.5;
}

.sitenav__group a:hover {
  color: var(--brand-700);
}

/* 桌面端（有 hover 能力）悬停/聚焦即展开，键盘用户同样可达 */
@media (hover: hover) and (min-width: 961px) {
  .sitenav__item:hover > .sitenav__panel,
  .sitenav__item:focus-within > .sitenav__panel {
    display: block;
    animation: pop var(--dur) var(--ease);
  }

  .sitenav__item:hover > .sitenav__panel--mega,
  .sitenav__item:focus-within > .sitenav__panel--mega {
    display: grid;
  }
}

/* 移动端开关 */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink-700);
  cursor: pointer;
}

.nav-toggle .icon {
  width: 20px;
  height: 20px;
}

.nav-toggle .icon--close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon--menu {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon--close {
  display: inline-block;
}

/* 购物车入口 */
.cart-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-600);
  font-family: inherit;
  font-size: var(--fs-xs);
  /* 购物车标签不允许折行（中文站那个是 <button>，只靠 .topbar__aux > a 覆盖不到） */
  white-space: nowrap;
  cursor: pointer;
}

.cart-btn:hover {
  border-color: var(--rule-strong);
  color: var(--brand-700);
}

.cart-btn .icon {
  width: 16px;
  height: 16px;
}

.ci-count {
  display: none;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--brand-700);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.ci-count.is-visible {
  display: inline-block;
}

/* =============================================================================
   6. 页脚
   ========================================================================== */
.site-footer {
  margin-top: var(--sp-9);
  background: var(--ink-50);
  border-top: 1px solid var(--rule);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr auto;
  gap: var(--sp-6);
  padding-block: var(--sp-7);
}

/* 栏目名：模板里是 <p class="footer__title">（2026-11-12 起不再是 <h2>）。
   页脚栏目是导航分组、不是文档章节，用标题会让每页大纲尾巴多出 5 个 h2；
   可访问名仍由 <nav aria-labelledby> 指到这里的 id 获取。 */
.footer__col > .footer__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-700);
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer__col a {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.footer__col a:hover {
  color: var(--brand-700);
}

.footer__contact li {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  font-size: var(--fs-xs);
  line-height: 1.65;
}

.footer__contact .icon {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--brand-500);
}

.footer__brand svg {
  width: 168px;
  height: auto;
  margin-bottom: var(--sp-3);
  display: block;
}



.footer__legal {
  padding-block: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-2xs);
  line-height: 1.9;
  color: var(--text-faint);
}

.footer__legal p {
  margin: 0;
}

/* 版权行里「公司名 · 备案号」之间的分隔点，12px 字号下两侧只有 3–4px，读起来像粘在一起 */
.footer__legal p > span[aria-hidden="true"] {
  margin-inline: 5px;
  color: var(--ink-300);
}

.footer__legal a {
  color: var(--text-muted);
}

.footer__legal a:hover {
  color: var(--brand-700);
}

.footer__disclaimer {
  margin-bottom: 6px !important;
  color: var(--danger);
}

.footer__licence {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
}

.footer__licence img {
  width: 16px;
  height: 16px;
}

/* 移动端页脚链接：21px 高的文字行太难点中，撑成 ~35px 的触控行 */
@media (max-width: 720px) {
  .footer__col ul {
    gap: 2px;
  }

  .footer__col a {
    display: block;
    padding-block: 6px;
  }

  .footer__legal a,
  .footer__licence {
    display: inline-block;
    padding-block: 4px;
  }
}

/* 右下角悬浮工具 */
.right-widget {
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.right-widget a,
.right-widget button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink-600);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), opacity var(--dur) var(--ease);
}

.right-widget a:hover,
.right-widget button:hover {
  border-color: var(--brand-400);
  color: var(--brand-700);
}

.right-widget .icon {
  width: 18px;
  height: 18px;
}

#go_top {
  opacity: 0;
  visibility: hidden;
}

#go_top.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Cookie 同意条（common.src.js 注入 #accept-cookie-bar）
   以前是内联的纯黑 + #eee + 巨大按钮，既不在色阶里，移动端又吃掉近四分之一屏。 */
.cookie-bar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 101;
  background: var(--brand-900);
  border-top: 1px solid var(--brand-800);
  color: var(--brand-100);
  font-size: var(--fs-xs);
  line-height: 1.65;
}

.cookie-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 10px var(--gutter);
}

.cookie-bar__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.cookie-bar__text a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-bar__btn {
  flex: 0 0 auto;
  padding: 8px 16px;
  background: var(--paper);
  border: 1px solid var(--paper);
  border-radius: var(--r-sm);
  color: var(--brand-900);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.cookie-bar__btn:hover {
  background: var(--brand-50);
}

/* 提示条在显示时把右下角悬浮控件顶起来，避免遮住「给我们留言」 */
body.has-cookie-bar .right-widget {
  bottom: 88px;
}

@media (max-width: 720px) {
  .cookie-bar__inner {
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding-block: 12px;
  }

  .cookie-bar__text {
    flex-basis: 100%;
  }

  .cookie-bar__btn {
    width: 100%;
    padding-block: 10px;
  }

  body.has-cookie-bar .right-widget {
    bottom: 148px;
  }
}

/* =============================================================================
   7. 组件
   ========================================================================== */

/* 7.1 按钮 ---------------------------------------------------------------- */
.btn,
input[type="button"],
input[type="submit"],
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid var(--brand-700);
  border-radius: var(--r-sm);
  background: var(--brand-700);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}

.btn:disabled,
input[type="button"]:disabled {
  background: var(--ink-200);
  border-color: var(--ink-200);
  color: var(--ink-500);
  cursor: not-allowed;
}

.btn--ghost {
  background: var(--paper);
  border-color: var(--rule-strong);
  color: var(--ink-700);
}

.btn--ghost:hover {
  background: var(--brand-50);
  border-color: var(--brand-300);
  color: var(--brand-700);
}

.btn--block {
  display: flex;
  width: 100%;
}

.linkbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* 7.2 面包屑 -------------------------------------------------------------- */
.breadcrumbs {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.breadcrumbs > .container,
.breadcrumbs > .container_12 {
  padding-block: 10px;
}

.breadcrumbs ol,
.breadcrumbs > .container_12 > .grid_12 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.breadcrumbs li + li::before {
  content: "/";
  margin: 0 6px;
  color: var(--ink-300);
}

.breadcrumbs a {
  color: var(--text-muted);
}

.breadcrumbs a:hover {
  color: var(--brand-700);
}

.breadcrumbs [aria-current="page"] {
  color: var(--ink-700);
  font-weight: 500;
}

/* 7.3 标题块 -------------------------------------------------------------- */
.page-header,
article.headline {
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
}

.page-header h1,
article.headline > h1,
article.headline > h2,
h1.page_title,
.page_title {
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
  letter-spacing: -0.01em;
}

.page-header__lead {
  margin-top: var(--sp-2);
  /* max-width: 68ch; */
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text-muted);
}

.page-header__meta {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 内容中间的小节标题 */
div.headline {
  margin: var(--sp-6) 0 var(--sp-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

div.headline > h2 {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.4;
}

/* 7.4 面板 ---------------------------------------------------------------- */
/* 数据库里的长文档页用 .gray-box 包裹，但文档本身不适合再套一层卡片边框，
   因此这里只把它当“白色承载面”，卡片外观留给工具页与 .panel。 */
.panel {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.panel + .panel {
  margin-top: var(--sp-5);
}

.gray-box {
  background: none;
  border: 0;
  border-radius: 0;
}

.gray-box + .gray-box {
  margin-top: var(--sp-5);
}

/* 长文档占满版心；可读行宽由内层段落限制，表格/图片不受限 */
.gray-box.item-service,
.gray-box.item-index,
.gray-box.item-article {
  width: 100%;
  max-width: none;
  min-width: 0;
}

.gray-box.item-service > p,
.gray-box.item-service > ul,
.gray-box.item-service > ol,
.gray-box.item-article > p,
.gray-box.item-article > ul,
.gray-box.item-article > ol {
  max-width: 84ch;
}

.panel-heading,
.panel > h1,
.panel > h2,
.gray-box > h1,
.gray-box > h2 {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.4;
}

.panel-heading > h1,
.panel-heading > h2 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.panel-body {
  padding: var(--sp-5);
}

.panel-body > * + * {
  margin-top: var(--sp-4);
}

/* 7.5 表格 ---------------------------------------------------------------- */
.table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
}

table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--paper);
}

th,
td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--rule);
}

th {
  background: var(--ink-50);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-600);
  white-space: nowrap;
}

td {
  color: var(--ink-700);
  line-height: 1.55;
}

tbody tr:last-child > td,
tbody tr:last-child > th {
  border-bottom: 0;
}

tbody tr:hover {
  background: var(--brand-50);
}

td > p {
  margin: 0;
  line-height: inherit;
}

td.num,
th.num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* 7.7 提示条 -------------------------------------------------------------- */
.alert,
.warning,
.note-box {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--brand-200);
  border-radius: var(--r-sm);
  background: var(--brand-50);
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink-700);
}

/* 载体详情页的长文档尾部（操作协议 / 序列）
   这两个区块是 .item-index 的直接子元素，横跨整个容器（1238px），14px 字号下每行约
   170 字符；12 条编号步骤之间 margin 又为 0，挤成一整块。这里收进阅读行宽并拉开间距。 */
/* .item-index > .note-box,
.item-index > #pre-div {
  max-width: 48rem; 
} */

.item-index > .note-box > p + p {
  margin-top: 5px;
}

/* 协议里的二级小标题（<p><b>…</b></p>）要和上一条步骤拉开距离 */
.item-index > .note-box > p:has(> b:only-child) {
  margin-top: 14px;
}

.alert-info {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.alert-warning,
.warning {
  border-color: #ecd6ac;
  background: var(--warn-bg);
  color: #6d4708;
}

.counter,
.success {
  color: var(--success);
}

/* 7.8 分页 ---------------------------------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}

.pagination .pagelist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.pagination .pagelist li {
  display: inline-flex;
}

.pagination .pagelist a,
.pagination .pagelist span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink-700);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.pagination .pagelist a:hover {
  border-color: var(--brand-400);
  color: var(--brand-700);
  background: var(--brand-50);
}

.pagination .pagelist .curent a,
.pagination .pagelist .curent span {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
  font-weight: 600;
}

.pagination .pagelist .disabled span,
.pagination .pagelist .ellipsis span {
  color: var(--ink-300);
  border-color: var(--rule);
  background: transparent;
}

.pagination_info {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* 7.9 侧栏 ---------------------------------------------------------------- */
#sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.categories_nav {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
}

.aside_title {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  background: var(--ink-50);
}

/* 侧栏分组标签：模板里是 <p class="aside_title-text">（2026-11-12 起不再是 <h2>）。
   侧栏每组是导航分组、不是文档章节，用标题会让列表/资讯页大纲里多出 1~3 个 h2；
   可访问名仍由外层 <aside>/<nav> 的 aria-labelledby 指向这里的 id 获取。
   h2/h3 分支保留，防止有别的模板往 .aside_title 里塞标题。 */
.aside_title p,
.aside_title h2,
.aside_title h3 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-700);
}

nav.right_menu ul {
  padding: var(--sp-2) 0;
}

nav.right_menu li > a {
  display: block;
  padding: 8px var(--sp-4) 8px calc(var(--sp-4) - 2px);
  border-left: 2px solid transparent;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  line-height: 1.5;
}

nav.right_menu li > a:hover {
  border-left-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-700);
}

nav.right_menu li.current > a {
  border-left-color: var(--brand-700);
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
}

/* 7.10 表单 --------------------------------------------------------------- */
label {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
textarea,
select {
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-800);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
select {
  height: 38px;
  padding: 0 10px;
}

textarea {
  padding: 10px;
  min-height: 96px;
  resize: vertical;
}

select {
  padding-right: 28px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566d85' stroke-width='2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  cursor: pointer;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-500);
}

input[type="checkbox"],
input[type="radio"] {
  width: 15px;
  height: 15px;
  margin: 0 6px 0 0;
  accent-color: var(--brand-700);
  vertical-align: -2px;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--sp-3);
}

.form-row > label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-600);
}

.form-row .req {
  color: var(--danger);
}

.form-control {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
}

textarea.form-control {
  height: auto;
  padding: 10px;
}

.form-group {
  margin-bottom: var(--sp-4);
}

.control-label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-600);
}

/* 7.11 Toast -------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 36px;
  z-index: 3000;
  padding: 10px 22px;
  border-radius: var(--r-sm);
  background: var(--ink-900);
  color: #fff;
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-3);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 7.12 空状态 ------------------------------------------------------------- */
.empty-state {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
}

.empty-state > p {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
}

/* =============================================================================
   8. 首页
   ========================================================================== */
.hero {
  position: relative;
  z-index: 1;
  background: var(--brand-900);
  color: #fff;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(/resource/img/bg.jpg) center / cover no-repeat;
  opacity: 0.26;
  filter: grayscale(1) contrast(1.08);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(7, 37, 63, 0.96) 0%,
    rgba(9, 44, 74, 0.9) 46%,
    rgba(16, 76, 130, 0.6) 100%
  );
}

.hero__inner {
  position: relative;
  /* 首屏内容在窄屏会贴住屏幕边缘：把水槽算进 max-width，桌面右移量保持不变
     （1440 下仍是 280px 左缘），窄屏则自动留出 --gutter。 */
  max-width: calc(880px + var(--gutter) * 2);
  padding-block: clamp(var(--sp-8), 7vw, var(--sp-10));
  padding-inline: var(--gutter);
}

.hero h1 {
  font-size: clamp(1.75rem, 3.3vw, var(--fs-4xl));
  font-weight: 600;
  line-height: 1.26;
  color: #fff;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero__lead {
  margin-top: var(--sp-4);
  max-width: 56ch;
  font-size: var(--fs-base);
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.84);
}

.hero .main-search--lg {
  margin-top: var(--sp-6);
}

.hero__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-5);
}

.hero__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-xs);
  line-height: 1.5;
  transition: background var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.hero__links a:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.44);
  color: #fff;
}

.home-section {
  padding-block: clamp(var(--sp-7), 6vw, var(--sp-9));
}

.home-section + .home-section {
  border-top: 1px solid var(--rule);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.section-head h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xl);
  font-weight: 600;
  color: var(--ink-900);
}

.section-head h2::before {
  content: "";
  flex: none;
  width: 18px;
  height: 2px;
  background: var(--brand-700);
}

.section-head__all {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.section-head__all:hover {
  color: var(--brand-700);
}

/* 8.1 特色产品 ------------------------------------------------------------ */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}

.featured-card {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: border-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.featured-card:hover {
  border-color: var(--brand-300);
  box-shadow: var(--shadow-1);
}

.featured-card__thumb {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 72px;
  overflow: hidden;
}

.featured-card__thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.featured-card__body {
  min-width: 0;
}

.featured-card__title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-900);
}

.featured-card:hover .featured-card__title {
  color: var(--brand-700);
}

.featured-card__specs {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}

.featured-card__specs > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 6px;
  font-size: var(--fs-2xs);
  line-height: 1.6;
}

.featured-card__specs dt {
  color: var(--text-faint);
}

.featured-card__specs dd {
  margin: 0;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 8.2 服务条目 ------------------------------------------------------------ */
.service-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}

.service-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 264px;
  padding: var(--sp-5);
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--brand-900);
  isolation: isolate;
}

.service-tile > img {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0.82;
  filter: saturate(0.55) brightness(0.9);
  transition: opacity var(--dur) var(--ease), transform 600ms var(--ease);
}

.service-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(7, 37, 63, 0.94) 2%,
    rgba(9, 44, 74, 0.66) 42%,
    rgba(11, 53, 87, 0.3) 100%
  );
}

.service-tile:hover > img {
  opacity: 1;
  transform: scale(1.03);
}

.service-tile__title {
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.35;
}

.service-tile__title a {
  color: #fff;
}

.service-tile__title a:hover {
  color: #fff;
}

.service-tile__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-3);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.service-tile__links a {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}

.service-tile__links a:hover {
  color: #fff;
}

/* 8.3 最近更新 ------------------------------------------------------------ */
.update-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-5);
}

.update-col > h3 {
  margin-bottom: var(--sp-2);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-600);
}

.update-col ul {
  display: flex;
  flex-direction: column;
}

.update-col li {
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-xs);
  line-height: 1.55;
}

.update-col li:last-child {
  border-bottom: 0;
}

.update-col a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-700);
}

.update-col a:hover {
  color: var(--brand-700);
}

/* =============================================================================
   9. 产品列表
   ========================================================================== */
.product-list-page .page-header {
  margin-bottom: var(--sp-4);
}

.product-list-summary {
  /* max-width: 82ch; */
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text-muted);
}

.product-list-page .table-wrapper {
  margin: 0;
}

.product-list-table {
  min-width: 760px;
}

.product-list-table .col-id {
  width: 116px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

.product-list-table .col-name,
.product-list-table .col-type {
  text-align: left;
}

.product-list-table .col-name {
  font-weight: 500;
}

.product-list-empty,
.product-list-table td[colspan] {
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
}

.product-list-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.product-list-pagination {
  flex: 1 1 auto;
  justify-content: flex-end;
  margin-top: 0;
}

.product-list-pagination .pagelist {
  justify-content: flex-end;
}

/* =============================================================================
   10. 产品详情
   ========================================================================== */
.product_page {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
}

.product_page > .grid_9 {
  flex: 1 1 0;
  min-width: 0;
  order: 2;
}

.product_page > .grid_3 {
  display: flex;
  flex-direction: column;
  flex: 0 0 300px;
  gap: var(--sp-4);
  order: 1;
}

#price-box {
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

#price-box .ava_price {
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}

#price-box .price {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.2;
  color: var(--brand-700);
  font-variant-numeric: tabular-nums;
}

#price-box .price > span {
  font-size: inherit;
  color: inherit;
}

#price-box .availability_sku {
  padding-block: var(--sp-3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--text-muted);
}

#price-box .availability_sku .availability,
#price-box .availability_sku .sku {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
}

#price-box .availability_sku span {
  font-family: var(--font-mono);
  color: var(--ink-800);
  font-variant-numeric: tabular-nums;
}

#price-box hr {
  display: none;
}

#price-box .parameter_selection {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-3);
}

#price-box .parameter_selection > label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-600);
}

#price-box select[name="size"] {
  width: 100%;
}

#price-box input[name="quantity"] {
  width: 100%;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

#price-box .cart {
  margin-top: var(--sp-2);
}

#price-box .cart > a.bay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--brand-700);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
}

#price-box .cart > a.bay:hover {
  background: var(--brand-600);
  color: #fff;
}

.optional-service {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
}

.img-block {
  display: flex;
  gap: var(--sp-6);
  align-items: flex-start;
}

.img-block > .grid_5 {
  flex: 0 0 340px;
  max-width: 340px;
}

.img-block > .grid_6 {
  flex: 1 1 0;
  min-width: 0;
}

.img_slid .preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.img_slid .prev_bg {
  display: block;
  text-align: center;
}

#main .img_slid .prev_bg img {
  display: inline-block;
  max-width: 100%;
  max-height: 300px;
}

.entry_content ul.features {
  display: flex;
  flex-direction: column;
}

.entry_content ul.features > li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-sm);
  line-height: 1.7;
}

.entry_content .features .key {
  width: auto;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-faint);
  text-align: left;
}

.entry_content .features .value {
  color: var(--ink-800);
}

.item-info .attributes {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.item-info .attribute {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.item-info .attribute:last-child {
  border-bottom: 0;
}

.attribute .name {
  display: block;
  width: auto;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-faint);
  text-align: left;
}

.attribute .value {
  min-width: 0;
  width: auto;
  float: none;
  text-align: left;
  color: var(--ink-800);
  overflow-wrap: anywhere;
}

/* 属性值行宽限制（与中文站一致）
   值列在 1440 下宽 926px，14px 字号相当于每行 ~130 字符。
   纯文字行收进 78ch；含图片 / 序列 <pre> / 表格的行保持整列宽度。 */
/* .item-info .attribute > .value:not(:has(img, picture, video, iframe, pre, table, .validate-img)) {
  max-width: 78ch;
} */

.attribute .value p {
  margin-bottom: 0.5em;
}

.doc-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

.doc-list a.doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
}

.doc::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z'/><path d='M14 3v5h5M9 13h6M9 17h4'/></svg>");
  opacity: 0.8;
}

.antibody-validation {
  margin-bottom: var(--sp-5);
}

.antibody-validation:last-child {
  margin-bottom: 0;
}

.antibody-validation .validate-img {
  margin: 0 0 var(--sp-2);
}

.antibody-validation .validate-img img {
  max-width: 100%;
  margin: 0;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}

/* 图注：标题比说明重一档，说明收进阅读行宽（此前 .validate-desc 没有任何样式，
   会按整列 926px 铺开，约 130 字符一行） */
.antibody-validation .validate-title {
  margin: 0 0 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-800);
}

.antibody-validation .validate-content,
.antibody-validation .validate-desc {
  /* max-width: 78ch; */
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-muted);
}

.ref-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ref-list li {
  position: relative;
  padding-left: 14px;
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--text-muted);
}

.ref-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 5px;
  height: 1px;
  background: var(--ink-300);
}

.lst-li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lst-li li {
  position: relative;
  padding-left: 16px;
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.lst-li li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-300);
}

.basic-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 var(--sp-6);
  margin: var(--sp-4) 0;
}

.basic-info dl {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sp-2);
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-sm);
}

.basic-info dt {
  width: auto;
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.7;
  color: var(--text-faint);
  text-align: left;
}

.basic-info dd {
  margin: 0;
  overflow: visible;
  white-space: normal;
  color: var(--ink-800);
}

.blockquote {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--ink-50);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.blockquote h5 {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
}


/* 载体质粒详情 */
/* 载体详情页与其他页面共用同一版心宽度 */
.vector-page {
  width: 100%;
  max-width: none;
}

.vector-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
}

.vector-main {
  flex: 1 1 0;
  min-width: 0;
}

.vector-side {
  display: flex;
  flex-direction: column;
  flex: 0 0 320px;
  gap: var(--sp-4);
}

.vector-map-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--sp-3);
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow-x: auto;
}

.vector-map-wrap svg {
  max-width: 100%;
  height: auto;
}

.vector-map-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
}

.summary-card {
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.summary-card > h2 {
  margin: 0 0 var(--sp-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
}

.summary-line {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 5px 0;
  font-size: var(--fs-xs);
  line-height: 1.65;
  border-bottom: 1px dashed var(--rule);
}

.summary-line:last-of-type {
  border-bottom: 0;
}

.summary-line .label {
  flex: none;
  color: var(--text-faint);
}

.summary-card .inquiry-btn {
  margin-top: var(--sp-3);
}

.inquiry-btn {
  padding: 9px 16px;
  background: var(--brand-700);
  border: 1px solid var(--brand-700);
  border-radius: var(--r-sm);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.inquiry-btn:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
}

.sku-group {
  margin-bottom: var(--sp-3);
}

.sku-group:last-child {
  margin-bottom: 0;
}

.sku-label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
}

.sku-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sku-item {
  display: inline-block;
  padding: 4px 10px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-xs);
  color: var(--ink-700);
  font-size: var(--fs-2xs);
  line-height: 1.6;
  cursor: pointer;
}

.sku-item:hover {
  border-color: var(--brand-300);
  color: var(--brand-700);
}

.sku-item.selected {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
  font-weight: 600;
}

.doc-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
}

.doc-links li {
  margin: 0;
}

.doc-links a.doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
}

/* 通用说明块（载体页、服务页都可能用到） */
.note {
  padding: var(--sp-4);
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--text-muted);
}

.note > p {
  margin-bottom: 0.6em;
}

.note > p:last-child {
  margin-bottom: 0;
}

mark {
  padding: 0 3px;
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 600;
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.seq-badge {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin-right: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  vertical-align: -0.15em;
}

.seq-badge svg {
  width: 42px;
  height: auto;
  display: block;
}

pre {
  padding: var(--sp-3) var(--sp-4);
  overflow-x: auto;
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink-700);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.seq-block {
  max-height: 560px;
  overflow: auto;
  background: var(--paper);
}

/* 载体页正文的小节标题 */
.vector-page > h2 {
  margin: var(--sp-6) 0 var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-xl);
  line-height: 1.4;
}

.vector-page > h2:first-of-type {
  margin-top: var(--sp-5);
}

.vector-page ol.prose,
.vector-page .prose {
  max-width: 84ch;
  margin-bottom: var(--sp-3);
}

.vector-page ol.prose {
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--text-muted);
}

.product_page .grid_9 > article + article {
  margin-top: var(--sp-6);
}

/* =============================================================================
   11. 资讯与内容页
   ========================================================================== */
/* .article-page .content_article {
  max-width: var(--measure);
} */

.content_article {
  color: var(--text);
}

.content_article > h2 {
  margin: var(--sp-6) 0 var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  border-left: 0;
  background: none;
  font-size: var(--fs-lg);
  line-height: 1.4;
}

.content_article > h3 {
  margin: var(--sp-5) 0 var(--sp-2);
  padding-left: 0;
  font-size: var(--fs-md);
  line-height: 1.4;
}

.content_article > h4 {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-md);
}

.content_article p {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--text);
}

.content_article > ul,
.content_article > ol {
  margin: 0 0 var(--sp-3);
  padding-left: 1.4em;
}

.content_article > ul {
  list-style: disc;
}

.content_article > ol {
  list-style: decimal;
}

.content_article li {
  margin: 0.4em 0;
  line-height: 1.85;
}

.content_article > .content {
  padding-left: 0;
}

.content_article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
}

.content_article table {
  margin-bottom: var(--sp-4);
}

.content_article table td,
.content_article table th {
  border: 1px solid var(--rule);
}

/* 资讯列表 */
.article-list article.post {
  width: 100%;
  margin: 0;
  padding: var(--sp-5) 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: none;
}

.article-list article.post:hover {
  box-shadow: none;
}

article.post h2 {
  height: auto;
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.45;
}

article.post h2 a {
  font-size: inherit;
  font-weight: inherit;
  color: var(--ink-900);
}

article.post h2 a:hover {
  color: var(--brand-700);
}

article.post .content_article {
  margin-bottom: var(--sp-2);
  padding-bottom: 0;
  border-bottom: 0;
}

article.post .content_article p {
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--text-muted);
}

article .content_article a.more {
  display: inline-flex;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--brand-700);
  text-transform: none;
}

article .footer_article {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  text-transform: none;
}

/* 服务页说明块 */
.gray-box .note {
    margin: var(--sp-4) 0;
    padding: var(--sp-2);
    background: var(--brand-50);
    border: 1px solid var(--brand-100);
    border-radius: var(--r-sm);
    box-shadow: none;
    color: var(--danger);
}

.gray-box .note p {
  margin-bottom: 0.6em;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--ink-700);
}

.gray-box .note p:last-child {
  margin-bottom: 0;
}

.gray-box .content_article > p {
  padding: 0;
}

.item-service > p,
.item-service h3 {
  padding: 0;
}

/* 紧跟页面标题的小节标题不需要再画一条分隔线 */
.gray-box article.headline + h2,
.gray-box article.headline + h3,
.gray-box .page-header + h2 {
  margin-top: var(--sp-2);
  padding-top: 0;
  border-top: 0;
}

.item-service h2 {
  margin: var(--sp-6) 0 var(--sp-3);
  padding: var(--sp-3) 0 0;
  border-top: 1px solid var(--rule);
  border-left: 0;
  background: none;
  font-size: var(--fs-xl);
  line-height: 1.4;
}

.item-index h3 {
  height: auto;
  margin: 0 0 var(--sp-3);
  padding: 0;
  border-left: 0;
  background: none;
  font-size: var(--fs-md);
  line-height: 1.4;
}

/* 预格式文本 */
.code,
.pre_small {
  padding: var(--sp-3) var(--sp-4);
  overflow-x: auto;
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--ink-800);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  text-indent: 0;
}

/* 常见问题 */
.faq-content dl {
  margin-bottom: var(--sp-4);
  padding: 0;
}

.faq-content dt {
  margin-bottom: 4px;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--ink-900);
}

.faq-content dd {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--text-muted);
  text-indent: 0;
}

#main dl {
  padding: 0;
}

#main dt {
  font-weight: 600;
}

#main dd {
  text-indent: 0;
}

/* =============================================================================
   12. 在线工具
   ========================================================================== */
.tool-page > .grid_9 {
  flex: 1 1 0;
  min-width: 0;
}

.tool-filter {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding: var(--sp-3);
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.tool-filter input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

.tool-filter__count {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.tool-group {
  margin-bottom: var(--sp-6);
}

.tool-group > h2 {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.tool-group > h2 > span {
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.tool-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--sp-5);
  padding: 0;
}

.tool-list > li {
  border-bottom: 1px solid var(--rule);
}

.tool-list > li.is-hidden,
.tool-group.is-hidden {
  display: none;
}

.tool-list > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 9px 2px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-700);
}

.tool-list > li > a:hover {
  color: var(--brand-700);
}

.tool-list > li > a::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  opacity: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>");
  transition: opacity var(--dur-fast) var(--ease);
}

.tool-list > li > a:hover::after {
  opacity: 1;
}

/* 工具页底部的服务推荐 */
.tool-services {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.tool-services > h2 {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
}

.tool-services > ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tool-services li {
  font-size: var(--fs-xs);
  line-height: 1.75;
  color: var(--text-muted);
}

.tool-services a {
  font-weight: 600;
}

/* 单个工具 */
#tool-content > h2,
#tool-content > h3 {
  margin: var(--sp-6) 0 var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-lg);
  line-height: 1.4;
}

.gray-box.item-tool {
  /* padding: var(--sp-5); */
  line-height: 1.75;
}

.gray-box.item-tool > p,
.gray-box.item-tool > label {
  padding: 0;
}

.tool-intro {
  /* max-width: 80ch; */
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text-muted);
}

.tool-intro:last-of-type {
  margin-bottom: var(--sp-4);
}

#tool-content form,
.item-tool form {
  margin-bottom: var(--sp-4);
}

.item-tool textarea {
  width: 100%;
  min-height: 140px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

.item-tool p:has(input[type="text"], input[type="number"]) {
  margin: var(--sp-2) 0;
}

.item-tool h2 {
    font-size: var(--fs-md);
}

.item-tool input[type="text"],
.item-tool input[type="number"] {
  height: 38px;
  text-align: left;
}

.item-tool pre {
  margin: 0;
  padding: var(--sp-3);
  overflow-x: auto;
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

.tool-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    justify-content: flex-start;
    flex-direction: row-reverse;
}

/* 历史工具页按钮上的 jQuery UI 残留类：统一外观 */
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 18px;
  background: var(--brand-700);
  border: 1px solid var(--brand-700);
  border-radius: var(--r-sm);
  color: #fff;
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.ui-button:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
}

.ui-button + .ui-button {
  margin-left: 4px;
}

#output-res {
  padding: 0;
  margin-top: var(--sp-4);
}

#output-res:not(:empty) {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

#output-res .warning,
.output-res .warning {
  padding: var(--sp-2) var(--sp-3);
  background: var(--warn-bg);
  border: 1px solid #f0e0c2;
  border-radius: var(--r-xs);
  color: #6d4708;
}

#pre-div {
  padding: 0;
}

.msa-res p {
  line-height: 1.5;
}

.msa-res p span {
  display: inline-block;
  width: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

/* 多肽合成计算器 */
#pep-mbox {
  padding: 0;
}

ul.pep-feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2) var(--sp-5);
  width: 100%;
  margin: 0;
}

ul.pep-feature li {
  width: auto;
}

table#pep-toolbox select {
  float: none;
}

ul:has(input[name="tfa-removal"]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

li:has(input[name="tfa-removal"]) {
  line-height: 1.7;
}

ul:has(input.term-mod) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-1) var(--sp-4);
}

li:has(input.term-mod) {
  width: auto;
}

textarea#pep-seq {
  width: 100%;
  height: 110px;
  background: var(--paper);
  font-family: var(--font-mono);
}

/* 小计算器 */
.sol-calcultor h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 var(--sp-3);
  padding: 0;
  border: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.sol-calcultor h3 > span.tool-name {
  flex: none;
  padding: 2px 10px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-xs);
  color: var(--brand-700);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: none;
}

.sol-calcultor h3::after {
  content: "";
  flex: 1;
  height: 1px;
  margin-left: 4px;
  border: 0;
  background: var(--rule);
}

.calculator-widget {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}

.calculator-widget fieldset {
  border: 0;
}

.calculator-widget fieldset p {
  margin-bottom: 4px;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
}

.sol-calcultor [type="text"],
.sol-calcultor [type="number"] {
  width: 76px;
  height: 34px;
  padding: 0 8px;
  text-align: left;
}

.sol-calcultor select {
  width: auto;
  min-width: 70px;
  height: 34px;
  background-color: var(--paper);
  color: var(--ink-800);
}

.sol-calcultor label {
  margin-top: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
}

.calculator-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  font-size: var(--fs-sm);
}

.calculator-form fieldset {
  position: relative;
  width: 200px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
}

.calculator-form fieldset legend {
  margin-left: 8px;
  padding: 0 4px;
  background: var(--paper);
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-faint);
}

.calculator-form fieldset input {
  position: absolute;
  top: 4px;
  left: 0;
  width: 132px !important;
  height: 30px;
  padding-left: 10px !important;
  background: none;
  border: 0;
  font-family: var(--font-mono);
}

.calculator-form fieldset select {
  position: absolute;
  top: 4px;
  right: 4px;
  width: auto;
  height: 30px;
  padding-right: 20px;
  background-color: transparent;
  background-position: right 2px center;
  border: 0;
  font-size: var(--fs-xs);
}

.calculator-form input[type="number"] {
  width: 86px;
  padding: 0 8px;
  box-shadow: none;
}

.calculator-form input[type="number"]:focus,
.calculator-form fieldset select:focus {
  outline: none;
  border-color: var(--brand-500);
}

.calculator-form span {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-700);
}

.sep-line {
  position: absolute;
  left: 132px;
  width: 1px;
  height: 24px;
  background: var(--rule-strong);
}

.molarity-title {
  margin-top: var(--sp-4) !important;
  padding: 0;
  background: none;
  border: 0;
}

.molarity-title ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.molarity-title ul li {
  margin: 0 !important;
  padding: 6px 12px !important;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  line-height: 1.5;
  cursor: pointer;
}

.molarity-title ul li.activated {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

/* 标签页文字：2026-11-11 起模板用 <span>，不再是 <h2>（一个产品页里曾出现 3 个 h2）。
   仍兼容 h2，防止有旧缓存页面/未更新模板。 */
.molarity-title ul li h2,
.molarity-title ul li span {
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  color: inherit;
}

.molarity-title li:not(:last-child)::after {
  display: none;
}

.calculator-desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* 缓冲液配方表 */
.buffer-recipe {
  min-width: 620px;
}

.buffer-recipe select {
  height: 32px;
  margin: 0;
  font-size: var(--fs-xs);
}

#tool-content ol {
    list-style: decimal;
    padding: 0 20px;
    line-height: 2;
}

.recipe-result-card,
.summary-card,
.sasa-card-sm {
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

.summary-line {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 5px 0;
  border-bottom: 1px dashed var(--rule-strong);
  font-size: var(--fs-xs);
}

.summary-line:last-child {
  border-bottom: 0;
}

.enzy-lst {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.enzy-lst > label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: auto;
    margin: 5px;
    padding: 5px 10px;
    background: var(--paper);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-xs);
    font-size: var(--fs-xs);
    line-height: 1.5;
    cursor: pointer;
    float: left;
    text-align: center;
    width: 80px;
    justify-content: flex-start;
}

.enzy-lst > label:hover {
  background: var(--brand-50);
  border-color: var(--brand-300);
}

.abnum-domain > span {
  color: var(--brand-700);
}

.dis-abnum-tab {
  overflow-x: auto;
}

table.abnumbering th {
  background: var(--brand-700);
  color: #fff;
}

.acidic-aa,
.basic-aa {
  font-weight: 600;
  color: var(--brand-700);
}

.hydrophobic {
  font-weight: 600;
  color: #8a5a10;
}

/* =============================================================================
   13. 搜索结果
   ========================================================================== */
.search-page .container_12 {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  align-items: flex-start;
}

.search-page .leftBar {
  flex: 0 0 268px;
  max-width: 268px;
}

.search-page .box-main-content {
  flex: 1 1 0;
  min-width: 0;
}

.search-results-rows {
  margin-top: 0;
  border-top: 1px solid var(--rule);
}

.search-results-item {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
}

.search-results-item:nth-child(even) {
  background: none;
}

.search-results-item p {
  margin: 0;
  line-height: 1.65;
}

.search_article_title > p > a {
  font-size: var(--fs-base);
  font-weight: 500;
}

.search-result-note {
  margin-top: 2px !important;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

form.filter-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-request-form {
  max-width: 820px;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

@media (min-width: 721px) {
  .search-request-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--sp-5);
  }

  .search-request-form .form-row:has(textarea),
  .search-request-form .form-row:last-child {
    grid-column: span 2;
  }
}

.filter-chk {
  accent-color: var(--brand-700);
}

/* =============================================================================
   14. 联系我们 / 404
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.contact-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--ink-700);
}

.contact-list .icon {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--brand-500);
}

.contact-qr {
  margin-top: var(--sp-4);
}

.contact-qr img {
  width: 132px;
  height: 132px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}

form[name="main_form"] {
  padding: 0;
}

form[name="main_form"] textarea {
  width: 100%;
  max-width: 100%;
}

.contact-popup {
  padding: var(--sp-4);
}

.contact-popup > div {
  display: block;
}

.contact-popup input[type="text"],
.contact-popup textarea {
  width: 100%;
  margin: 0 0 var(--sp-2);
}

.contact-popup .submit {
  margin-top: var(--sp-3);
  text-align: right;
}

.page-404 .container_12 {
  display: block;
  padding-block: var(--sp-8);
  text-align: center;
}

/* =============================================================================
   15. 数据库内容兼容层
   DB 历史页面沿用 Bootstrap 风格类名，这里统一到当前设计语言。
   ========================================================================== */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  background: var(--brand-700);
  border: 1px solid var(--brand-700);
  border-radius: var(--r-sm);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}

.tab_body,
.tab1 {
  display: block;
}

.width60 {
  width: 60%;
}

.width80 {
  width: 80%;
}

.width90 {
  width: 90%;
}

.width95 {
  width: 95%;
}

.width98 {
  width: 98%;
}

.center {
  margin-inline: auto;
}

.indent {
  text-indent: 2em;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.section-title {
  margin: var(--sp-5) 0 var(--sp-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-lg);
  font-weight: 600;
}

.title {
  font-weight: 600;
  color: var(--ink-900);
}

.table,
.table-small,
.data-display-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.table-small {
  font-size: var(--fs-xs);
}

.data-display-table th,
.data-display-table td {
  padding: 8px 10px;
  border: 1px solid var(--rule);
}

.orgtype {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.service-list-style {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0;
}

.service-list-style li {
  position: relative;
  padding-left: 16px;
  font-size: var(--fs-sm);
  line-height: 1.75;
}

.service-list-style li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-300);
}

.polar {
  color: var(--brand-600);
}

.apolar {
  color: #8a5a10;
}

.polar-uncharaged {
  color: #3c5194;
}

.omit-aa-cb {
  margin-right: 4px;
}

.param-item,
.param-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--sp-3);
  margin-bottom: var(--sp-2);
}

.param-item > label,
.param-row > label {
  min-width: 120px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-600);
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-4);
}

.copy-seq {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-xs);
  font-size: var(--fs-2xs);
  cursor: pointer;
}

.copy-seq:hover {
  border-color: var(--brand-300);
  color: var(--brand-700);
}

pre.pre_small,
.pre_small {
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.6;
}

/* =============================================================================
   16. 科研图形
   颜色用于区分区域类型，属于数据编码而非装饰。
   ========================================================================== */

.slice-svg {
  display: block;
  margin-bottom: var(--sp-4);
  cursor: crosshair;
  user-select: none;
}

.enz,
.seq,
.position,
.feat,
.enzyme-label,
.amino-acid {
  font-family: var(--font-mono);
}

.enz {
  font-size: 12px;
  font-weight: 700;
}

.seq {
  font-size: 14px;
  letter-spacing: 0.4px;
}

.seq.forward {
  fill: var(--ink-900);
}

.seq.reverse {
  fill: var(--ink-500);
}

.position {
  font-size: 12px;
  fill: var(--ink-400);
}

.feat {
  font-size: 11px;
  font-weight: 600;
  fill: var(--ink-700);
}

.featpath {
  fill-opacity: 0.75;
  stroke-width: 1px;
  cursor: pointer;
}

.featpath:hover {
  fill-opacity: 1;
}

rect.orf {
  cursor: pointer;
}

.stats {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}

.stats h3 {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-700);
}

.amino-acid {
  font-size: 12px;
  letter-spacing: 0.4px;
  fill: var(--ink-700);
}

.amino-acid.acidic {
  fill: #a92a20;
}

.amino-acid.basic {
  fill: #1d4fa0;
}

.amino-acid.nonpolar {
  fill: #2f6b2f;
}

.amino-acid.amides {
  fill: #9a5a12;
}

.amino-acid.aromatic {
  fill: #5b3a86;
}

.enz-mask {
  display: none;
  fill: #14724b;
  fill-opacity: 0.18;
  stroke-width: 0;
}

.enz-cutline {
  display: none;
  fill: none;
  stroke: #a92a20;
  stroke-width: 1;
}

.base-line {
  stroke: #a92a20;
  stroke-width: 2;
  pointer-events: none;
}

/* 质粒图谱 */
svg.mapsvg text {
  font-size: 13px;
  font-weight: 600;
}

svg text {
  font-size: 10px;
}

.mapsvg {
  user-select: none;
}

.mapsvg circle {
  stroke: var(--ink-200);
  fill: none;
  stroke-width: 5;
}

.mapsvg .plasmid-name {
  font-weight: 700;
  fill: var(--ink-700);
  user-select: none;
}

.mapsvg .seq-len {
  font-size: 12px;
  font-weight: 400;
  fill: var(--ink-400);
}

.mapsvg .t-l {
  stroke-width: 2;
  stroke: var(--ink-900);
}

.mapsvg .t-s {
  stroke-width: 1;
  stroke: var(--ink-400);
}

.mapsvg .t-n {
  font-size: 8pt;
  fill: var(--ink-400);
  user-select: none;
  alignment-baseline: middle;
}

.mapsvg .user {
  stroke: #8a2f5e;
  fill: #8a2f5e;
}

.mapsvg path,
.slice-svg path {
  stroke: var(--ink-300);
  fill: var(--ink-200);
  cursor: pointer;
  fill-opacity: 1;
}

svg .C_region {
  stroke: #4f8a72;
  fill: #8cbaa6;
  fill-opacity: 1;
}

svg .CDS {
  stroke: #9c5a86;
  fill: #d38bbd;
  fill-opacity: 1;
}

svg .exon {
  stroke: #4c6f88;
  fill: #81aabc;
  fill-opacity: 1;
}

svg .gene {
  stroke: #6d5a8c;
  fill: #af99c8;
  fill-opacity: 1;
}

svg .mRNA {
  stroke: #1d7a6b;
  fill: #299d8f;
  fill-opacity: 1;
}

svg .operon {
  stroke: #a87b52;
  fill: #dfad92;
  fill-opacity: 1;
}

svg .rep_origin {
  stroke: #b8933a;
  fill: #e7c66b;
  fill-opacity: 1;
}

svg .precursor_RNA {
  stroke: #4e8f6c;
  fill: #80cba4;
  fill-opacity: 1;
}

svg .prim_transcript {
  stroke: #5c9250;
  fill: #8ab07c;
  fill-opacity: 1;
}

svg .primer_bind {
  stroke: #c2743a;
  fill: #f3a361;
  fill-opacity: 1;
}

svg .promoter {
  stroke: #1f989b;
  fill: #69c6c6;
  fill-opacity: 1;
}

svg .RBS {
  stroke: #6c8f4f;
  fill: #9cb87d;
  fill-opacity: 1;
}

svg .rRNA {
  stroke: #b3bb5e;
  fill: #e9f4a3;
  fill-opacity: 1;
}

svg .tRNA {
  stroke: #c2a543;
  fill: #fbda83;
  fill-opacity: 1;
}

svg .selected-region,
svg .selection-rect {
  stroke: rgba(169, 42, 32, 0.2);
  fill: #a92a20;
  fill-opacity: 0.3;
  cursor: pointer;
  pointer-events: none;
}

path.orf-fwd {
  fill: var(--ink-900);
  stroke: #e0b062;
  stroke-width: 3px;
  stroke-opacity: 0.6;
}

rect.orf-fwd {
  fill: #e0b062;
}

path.orf-rev {
  fill: var(--ink-900);
  stroke: #a7cf74;
  stroke-width: 4px;
  stroke-opacity: 0.6;
}

rect.orf-rev {
  fill: #a7cf74;
}

/* =============================================================================
   17. 文献卡片
   ========================================================================== */
.paper-box {
  padding: 0;
}

.paper-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.paper-card {
  position: relative;
  padding: var(--sp-4) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

.paper-card:hover {
  border-color: var(--rule);
  box-shadow: none;
  transform: none;
}

.paper-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
}

.paper-title-text {
  flex: 1;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink-900);
}

.paper-journal-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--sp-2);
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.paper-journal-row .journal-name {
  font-style: italic;
  font-weight: 600;
  color: var(--brand-700);
}

.paper-journal-row .dot {
  width: 3px;
  height: 3px;
  background: var(--ink-300);
  border-radius: 50%;
}

.paper-journal-row .doi {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.paper-journal-row .doi a {
  color: var(--text-muted);
}

.paper-journal-row .doi a:hover {
  color: var(--brand-700);
}

.paper-authors {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-muted);
}

.paper-products {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--sp-2);
}

.prod-pill {
  padding: 2px 10px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-xs);
  color: var(--brand-700);
  font-size: var(--fs-2xs);
  line-height: 1.7;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}

.prod-pill:hover {
  background: var(--brand-100);
  border-color: var(--brand-200);
  color: var(--brand-800);
}

.year-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding: var(--sp-2) var(--sp-3);
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
}

.year-filter-bar label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-600);
}

.year-filter-bar select {
  height: 34px;
  min-width: 110px;
  background-color: var(--paper);
}

.year-filter-bar select:focus {
  border-color: var(--brand-400);
}

.year-filter-bar .btn-sm {
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  color: var(--ink-700);
  font-size: var(--fs-xs);
  cursor: pointer;
}

.year-filter-bar .btn-sm:hover {
  border-color: var(--brand-300);
  color: var(--brand-700);
}

.year-filter-bar .result-count {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.page-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  color: var(--ink-700);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.page-link:hover {
  background: var(--brand-50);
  border-color: var(--brand-400);
  color: var(--brand-700);
}

.page-link.active {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

.page-link:disabled {
  background: transparent;
  color: var(--ink-300);
  cursor: not-allowed;
}

.paper-empty {
  padding: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
}

/* =============================================================================
   18. 响应式
   ========================================================================== */
@media (max-width: 1180px) {
  .featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }


}

@media (max-width: 1023px) {
  .service-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-tile {
    min-height: 220px;
  }

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

  .img-block {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .img-block > .grid_5 {
    flex: none;
    max-width: 100%;
  }

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

  /* 产品详情：信息在前，图片区并入主列 */
  .product_page {
    flex-direction: column;
    gap: var(--sp-5);
  }

  .product_page > .grid_3,
  .product_page > .grid_9 {
    flex: 1 1 auto;
    width: 100%;
    order: 0;
  }
}

/* 导航折叠为抽屉 */
@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex;
  }

  .masthead__inner {
    flex-wrap: wrap;
    gap: var(--sp-3);
    min-height: 64px;
  }

  .brand svg {
    width: 150px;
  }

  .main-search {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    margin-top: var(--sp-1);
  }

  .sitenav {
    display: none;
    border-top: 1px solid var(--rule);
  }

  .sitenav.is-open {
    display: block;
  }

  .sitenav__list {
    flex-direction: column;
    min-height: 0;
    gap: 0;
    margin-left: 0;
    padding-block: var(--sp-1);
  }

  .sitenav__item {
    display: block;
    border-bottom: 1px solid var(--rule);
  }

  .sitenav__item:last-child {
    border-bottom: 0;
  }

  .sitenav__item > a,
  .sitenav__item > button {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 12px var(--sp-3);
    font-size: var(--fs-sm);
  }

  .sitenav__item > a::after,
  .sitenav__item > button::after {
    display: none;
  }

  .sitenav__panel,
  .sitenav__panel--mega {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 0 var(--sp-3) var(--sp-3);
    border: 0;
    box-shadow: none;
  }

  .sitenav__item.is-open > .sitenav__panel--mega {
    display: block;
  }

  .sitenav__panel--mega {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .sitenav__group > h3,
  .sitenav__group > span {
    margin-top: var(--sp-2);
  }
}

@media (max-width: 860px) {
  #main > .container_12,
  .search-page .container_12 {
    flex-direction: column;
    gap: var(--sp-4);
  }

  #main > .container_12 > *,
  .search-page .leftBar,
  .search-page .box-main-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  /* 侧栏在窄屏改为“横向胶囊导航”，不再整块隐藏 */
  #sidebar nav.right_menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--sp-3);
  }

  #sidebar nav.right_menu li > a {
    padding: 5px 10px;
    background: var(--ink-50);
    border: 1px solid var(--rule);
    border-left-width: 1px;
    border-radius: var(--r-xs);
    font-size: var(--fs-xs);
  }

  #sidebar nav.right_menu li.current > a {
    background: var(--brand-700);
    border-color: var(--brand-700);
    color: #fff;
  }

  .page-header h1,
  article.headline > h1,
  article.headline > h2,
  h1.page_title,
  .page_title {
    font-size: var(--fs-xl);
  }

  .section-head h2 {
    font-size: var(--fs-lg);
  }

  .tool-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .item-info .attribute {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .basic-info {
    grid-template-columns: minmax(0, 1fr);
  }

}

@media (max-width: 720px) {
  :root {
    --fs-2xl: 1.5rem;
    --fs-xl: 1.3125rem;
    --fs-3xl: 1.75rem;
    --fs-4xl: 2rem;
  }

  body {
    font-size: 0.9375rem;
  }

  .topbar__contact > li:nth-child(2) {
    display: none;
  }

  .topbar__contact > li:nth-child(3) {
    display: none;
  }

  .topbar__inner {
    min-height: 34px;
    gap: var(--sp-2);
  }

  /* 窄屏收起顶栏的辅助链接（NovoBuilder 等） */
  .topbar__aux > a {
    display: none;
  }

  /* 但购物车入口必须留着，否则手机上根本打不开购物车 */
  .topbar__aux > a.cart-btn {
    display: inline-flex;
  }

  /* 窄屏只留图标，避免“购物车”被折成两行 */
  .cart-btn > span:not(.icon) {
    display: none;
  }

  .right-widget {
    right: 10px;
    bottom: 14px;
    gap: 6px;
  }

  .right-widget a,
  .right-widget button {
    width: 36px;
    height: 36px;
  }

  .right-widget .icon {
    width: 16px;
    height: 16px;
  }

  .featured-grid,
  .service-rail,
  .update-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .featured-card__thumb {
    width: 42px;
    height: 58px;
  }

  .service-tile {
    min-height: 196px;
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
    padding-block: var(--sp-5);
  }

  .footer__brand {
    grid-column: span 2;
  }

  .hero__inner {
    padding-block: var(--sp-7);
  }

  .home-section {
    padding-block: var(--sp-6);
  }

  /* 产品列表：表格在窄屏转为卡片行，避免横向滚动 */
  .product-list-page .table-wrapper {
    overflow: visible;
    background: none;
    border: 0;
  }

  .product-list-table {
    min-width: 0;
    display: block;
  }

  .product-list-table thead {
    display: none;
  }

  .product-list-table tbody,
  .product-list-table tr,
  .product-list-table td {
    display: block;
    width: 100%;
  }

  .product-list-table tr {
    margin-bottom: var(--sp-2);
    padding: 10px var(--sp-3);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-md);
  }

  .product-list-table td {
    padding: 1px 0;
    border: 0;
    font-size: var(--fs-xs);
    text-align: left;
  }

  .product-list-table td.col-id {
    font-size: var(--fs-2xs);
    color: var(--text-faint);
  }

  .product-list-table td.col-name {
    padding-top: 1px;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.45;
  }

  /* 其余属性合并成一行紧凑显示，避免每行 4 段堆叠 */
  .product-list-table td.col-organism,
  .product-list-table td.col-host,
  .product-list-table td.col-reactivity,
  .product-list-table td.col-clonality,
  .product-list-table td.col-plen,
  .product-list-table td.col-cas,
  .product-list-table td.col-type,
  .product-list-table td.col-resistance,
  .product-list-table td.col-copy {
    display: inline;
    font-size: var(--fs-2xs);
    line-height: 1.6;
    color: var(--text-muted);
  }

  .product-list-table td.col-organism ~ td::before,
  .product-list-table td.col-reactivity ~ td::before,
  .product-list-table td.col-plen ~ td::before,
  .product-list-table td.col-type ~ td::before {
    content: " · ";
    color: var(--ink-300);
  }

  .product-list-table td[colspan] {
    display: block;
    padding: var(--sp-5) 0;
    text-align: center;
  }

  .pagination .pagelist a,
  .pagination .pagelist span {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
  }

}

@media (max-width: 480px) {
  .brand svg {
    width: 132px;
  }

  /* 手机上保留认证标识，只缩小尺寸（点开同样是弹层） */
  .iso-badge {
    padding: 3px;
  }

  .iso-badge svg {
    width: 24px;
    height: 24px;
  }

  .footer__licence {
    justify-content: flex-start;
  }

  .hero__links a {
    padding: 6px 10px;
  }
}

/* =============================================================================
   19. 动效与打印
   ========================================================================== */
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .service-tile:hover > img {
    transform: none;
  }
}

@media print {
  .site-header,
  .site-footer,
  .right-widget,
  .breadcrumbs,
  #sidebar,
  .tool-filter {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  #main {
    padding: 0;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}

/* =============================================================================
   20. English site additions
   （英文站复用同一套设计语言，这里只补充结构与英文特有的容器）
   ========================================================================== */
.content-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
}

.content-sidebar {
  display: flex;
  flex-direction: column;
  flex: 0 0 268px;
  gap: var(--sp-4);
  max-width: 268px;
}

.content-main {
  flex: 1 1 0;
  min-width: 0;
}

.content-main > .gray-box {
  max-width: 980px;
}

.home-main {
  display: block;
}

.footer__grid--4 {
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr;
}

/* 首页 hero 使用英文站自己的图片 */
.hero::before {
  background-image: url(/novostyle/images/bg.jpg);
}

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

/* 分类页 / 产品清单 */
.cate-desc {
  max-width: 82ch;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text-muted);
}

.list-table {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.row-plist {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 150px 150px;
  gap: var(--sp-3);
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-sm);
}

.row-plist:last-child {
  border-bottom: 0;
}

.row-plist--head {
  background: var(--ink-50);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-600);
}

.row-plist:hover {
  background: var(--brand-50);
}

.row-plist .col-id {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.sub-cate ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.sub-cate li a {
  display: inline-flex;
  padding: 5px 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
}

.page-article {
  max-width: 900px;
}

/* 旧布局容器：站内搜索页仍在用 */
.content {
  padding-block: var(--sp-6);
}

.box-main {
  width: 100%;
}

.inner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.leftBar {
  flex: 0 0 268px;
  max-width: 268px;
}

.box-main-content {
  flex: 1 1 0;
  min-width: 0;
}

/* =============================================================================
   21. English site responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .service-rail--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .row-plist {
    grid-template-columns: 110px minmax(0, 1fr) 120px 120px;
  }
}

/* 内容水槽
   基线里 .container 的 padding-inline 被注释掉了，为的是让页头 / 页脚 / 正文共用
   同一条左缘（1440 宽下都是 101px）。代价是窄屏时正文容器会直接贴住视口边缘。
   这里只给「正文容器」补水槽，页头 / 页脚不参与，桌面左缘保持不变。 */
@media (max-width: 1023px) {
  #main,
  body > .container.page-body {
    padding-inline: var(--gutter);
  }

  /* 结算确认页正文本身已是卡片并自带留白，不要再叠一层 */
  #main:has(.order-confirm-container) {
    padding-inline: 0;
  }

  /* 首页首屏图是全幅出血的：用负边距抵消上面的水槽，其余区块仍按水槽内缩 */
  #main > .hero {
    margin-inline: calc(var(--gutter) * -1);
  }

  /* 面包屑是 #main 之外的独立横条，自己也要补水槽 */
  .breadcrumbs > .container {
    padding-inline: var(--gutter);
  }
}

@media (max-width: 960px) {
  .content-layout,
  .inner {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .content-sidebar,
  .leftBar,
  .content-main,
  .box-main-content {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  .content-sidebar nav.right_menu ul,
  .leftBar nav.right_menu ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: var(--sp-3);
  }

  .content-sidebar nav.right_menu li > a,
  .leftBar nav.right_menu li > a {
    padding: 5px 10px;
    background: var(--ink-50);
    border: 1px solid var(--rule);
    border-left-width: 1px;
    border-radius: var(--r-xs);
    font-size: var(--fs-xs);
  }
}

@media (max-width: 720px) {
  .service-rail--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .row-plist,
  .row-plist--head {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 12px 14px;
  }

  .row-plist--head {
    display: none;
  }

  .row-plist .col-id {
    font-size: var(--fs-2xs);
  }
}

/* =============================================================================
   22. Breadcrumb microdata (product pages emit a bare <ol>)
   ========================================================================== */
ol[itemscope][itemtype*="BreadcrumbList"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  list-style: none;
}

ol[itemscope][itemtype*="BreadcrumbList"] > li {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 0;
}

ol[itemscope][itemtype*="BreadcrumbList"] li + li::before {
  content: "/";
  margin: 0 6px;
  color: var(--ink-300);
}

ol[itemscope][itemtype*="BreadcrumbList"] > li > span {
  display: none;
}

ol[itemscope][itemtype*="BreadcrumbList"] a {
  color: var(--text-muted);
}

ol[itemscope][itemtype*="BreadcrumbList"] a:hover {
  color: var(--brand-700);
}

ol[itemscope][itemtype*="BreadcrumbList"] li:last-child span[itemprop="name"] {
  font-weight: 500;
  color: var(--ink-700);
}

/* =============================================================================
   23. English product detail
   ========================================================================== */
.box-main-content img,
.item-info img,
.validate-img img {
  max-width: 100%;
  height: auto;
}

.item-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  padding: var(--sp-5);
}

.product-pic-box {
  flex: 0 0 380px;
  max-width: 380px;
}

.slide-box,
.slide,
#slider {
  width: 100%;
}

.product-img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.item-information {
  flex: 1 1 0;
  min-width: 0;
}

.item-title h1 {
  font-size: var(--fs-xl);
  line-height: 1.3;
}

.catno {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.item-size {
  margin-top: var(--sp-4);
}

.spec-title {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-600);
}

#spec-select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#spec-select .size-select {
  padding: 5px 12px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  cursor: pointer;
}

#spec-select .size-select.size-selected {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: #fff;
}

.product-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.price-box {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.price-label {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.price-box .price {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brand-700);
}

.availability {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.availability .spec-val {
  font-weight: 600;
  color: var(--success);
}

.add-to-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
}

.choose-amount {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
}

.choose-amount .btn-reduce,
.choose-amount .btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 36px;
  background: var(--ink-50);
  border: 0;
  color: var(--ink-700);
}

.choose-amount .text {
  width: 56px;
  height: 36px;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-family: var(--font-mono);
}

.btn-cart {
  padding: 9px 20px;
  background: var(--brand-700);
  border: 1px solid var(--brand-700);
  border-radius: var(--r-sm);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}

.btn-cart:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
}

.hint {
  flex: 1 1 100%;
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}

.warning-note {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--warn-bg);
  border: 1px solid #ecd6ac;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: #6d4708;
}

.item-info {
  padding: var(--sp-5);
}

/* 产品页区块垂直节奏：与中文站一致，区块之间只留一处 40px。
   英文站的产品页没有 .product_page 外壳（template 里是一个无类名的 div 依次放
   .item-header / .item-info / 免责声明外壳），所以用 :has(> .item-header) 定位同一个容器。
   这些区块没有边框和底色，上下 padding 原本只是撑间距，会和 .gray-box + .gray-box 的
   margin 叠加成 72px 的空档；这里只保留左右内边距，上下交给 margin 一处控制。 */
div:has(> .item-header) > .item-header,
div:has(> .item-header) > .gray-box {
  padding-block: 0;
}

/* 首屏区保留一点上留白，免得标题紧贴面包屑 */
div:has(> .item-header) > .item-header {
  padding-top: var(--sp-4);
}

div:has(> .item-header) > .gray-box:not(.item-header) {
  margin-top: var(--sp-7);
}

@media (max-width: 960px) {
  .item-header {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .product-pic-box {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }
}

/* Validation images (SDS-PAGE / WB) should not dominate the page */
.item-info .validate-img img,
.antibody-validation .validate-img img {
    max-height: 400px;
    height: auto;
    object-fit: contain;
}

/* Long content and images must never force a horizontal scrollbar */
.page-body img,
.content-main img,
.gray-box img {
  max-width: 100%;
  height: auto;
}

.page-body {
  overflow-wrap: break-word;
  padding: var(--sp-6) 0 var(--sp-8);
}

.page-body table {
  max-width: 100%;
}

/* Keep wide legacy content (tables, fixed-size images) inside the column on small screens */
@media (max-width: 960px) {
  .page-body,
  .content-main,
  .box-main-content {
    overflow-x: auto;
  }

  .inner {
    padding-inline: 0;
  }

  .content {
    padding-block: var(--sp-5);
  }
}

/* =============================================================================
   24. English footer + cookie bar on small screens
   ========================================================================== */
@media (max-width: 1180px) {
  .footer__grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .footer__grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Cookie 同意条已改为 class 化标记（见 §6 的 .cookie-bar），不再需要针对内联样式的
   !important 覆盖层 —— 内联样式与这层覆盖同时移除，避免两套规则互相打架。 */

/* Product list rows (EN): 3-column variant used inside .item-info */
.item-info .row-plist {
  grid-template-columns: minmax(140px, 0.9fr) minmax(0, 1.8fr) minmax(120px, 1fr);
  align-items: start;
}

.item-info .row-plist--head {
  align-items: center;
}

@media (max-width: 720px) {
  .item-info .row-plist {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 12px 14px;
  }
}

/* 产品主图：显式给出尺寸，避免图片加载时页面跳动（CLS） */
.prev_bg img,
.preview img,
.product-pic-box img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* =============================================================================
   在线工具：列表页与工具内页去掉左侧栏，改为通栏
   ========================================================================== */
.tool-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-decoration: none;
}

.tool-back::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  --icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5'/><path d='m12 19-7-7 7-7'/></svg>");
}

.tool-back:hover {
  color: var(--brand-700);
}

.tool-jump-wrap {
  margin-bottom: var(--sp-5);
}

.tool-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.tool-jump a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--fs-xs);
  color: var(--ink-700);
  text-decoration: none;
}

.tool-jump a span {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.tool-jump a:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-700);
}

/* 锚点跳转时给组标题留出粘连头部的高度 */
.tool-group {
  scroll-margin-top: 88px;
}

/* 通栏之后工具名可以排三到四列，窄屏自动退回单列 */
.tool-list {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

/* 工具页正文段落限制阅读宽度，表格/输入区仍然通栏 */
#tool-content > p,
#tool-content > .headline + p {
  max-width: 78ch;
}

@media (max-width: 720px) {
  /* 移动端分类按钮加大点击区域 */
  .tool-jump a {
    height: 38px;
    padding: 0 14px;
  }

  .tool-jump {
    gap: 6px;
  }
}

/* 工具正文里写死宽度的控件（如 width="500px" 的下拉）在窄屏不得撑破页面 */
#tool-content select,
#tool-content input,
#tool-content textarea,
#tool-content img,
#tool-content pre,
#tool-content table {
  max-width: 100%;
}

/* =============================================================================
   工具页底部：同分组的其它工具
   ========================================================================== */
.related-tools {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}

.related-tools > h2 {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink-900);
}

.related-tools__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 0 var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.related-tools__list > li {
  border-bottom: 1px solid var(--rule);
}

.related-tools__list a {
  display: block;
  padding: 9px 0;
  font-size: var(--fs-sm);
  color: var(--ink-800);
  text-decoration: none;
}

.related-tools__list a:hover {
  color: var(--brand-700);
}

.related-tools__all {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-xs);
}

.related-tools__all a {
  color: var(--text-muted);
  text-decoration: none;
}

.related-tools__all a:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

/* =============================================================================
   图片弹层（ISO 证书、微信二维码）
   layer.js 在无 jQuery 环境下计算 top 时会用文档高度，这里强制按视口居中
   ========================================================================== */
/* layer.js 在没有 jQuery 的环境里把 top 按文档高度算，弹层会落到首屏之外。
   位置由 head.htm 里的小脚本按视口重算，这里只禁用它的动画位移，避免打架。 */
.layui-layer {
  transform: none !important;
}

.layui-layer.img-popup {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(7, 37, 63, 0.28);
}

.layui-layer.img-popup .layui-layer-title {
  height: 44px;
  line-height: 44px;
  padding-inline: var(--sp-4);
  border-bottom: 1px solid var(--rule);
  background: var(--ink-50);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink-800);
}

.layui-layer.img-popup .layui-layer-setwin {
  top: 14px;
  right: 12px;
}

.layui-layer.img-popup .layui-layer-content img {
  display: block;
  max-height: 76vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

@media (max-width: 480px) {
  .layui-layer.img-popup .layui-layer-title {
    height: 40px;
    line-height: 40px;
    font-size: var(--fs-xs);
  }
}

/* 质粒图谱在窄屏按容器宽度缩放，避免撑破页面 */
#plasmid-map {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

#plasmid-map svg {
  display: block;
  max-width: 100%;
  height: auto;
}



/* 联系我们页：在线客服入口（替代二维码） */
.contact-cta {
  margin-top: var(--sp-4);
}

.contact-cta .btn {
  gap: 6px;
}

.contact-cta .icon {
  width: 15px;
  height: 15px;
}

@media (max-width: 400px) {
  /* 320px 级窄屏兜底：flex 收缩与长内容横向滚动 */
  .prev_bg {
    min-width: 0;
  }

  .gray-box {
    width: auto !important;
    max-width: 100% !important;
  }

  .gray-box,
  #tool-content,
  .product-detail-container {
    min-width: 0;
  }

  .gray-box {
    overflow-x: auto;
  }
}

/* 载体页：窄屏改为单列，图谱与右侧信息上下排列 */
@media (max-width: 960px) {
  .vector-layout {
    flex-direction: column;
    gap: var(--sp-5);
  }

  .vector-main,
  .vector-side {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }

  .vector-side {
    gap: var(--sp-3);
  }
}

/* 产品主图：竖版胶图/SDS-PAGE 会超出 400px 高度并压到下方内容，这里按高度收敛 */
#slider,
.slide-box {
  overflow: hidden;
}

#slider img,
.slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 400px;
  margin: 0 auto;
  object-fit: contain;
}

/* 产品参数里的长序列没有空格，窄列里要允许断行，否则会撑破布局 */
#main .entry_content td,
#main .entry_content th,
#main .entry_content dd,
#main .entry_content p,
#main .entry_content li,
#main .entry_content .value,
#main .entry_content .key {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 英文站产品属性表：长序列/长链接同样需要可断行 */
.attributes .attribute,
.attributes .value,
.attributes .value * {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------------------------------------------------------------------------
   产品页购买区：规格胶囊、数量步进、货期、文档链接
   --------------------------------------------------------------------------- */
#spec-select .size-select {
  cursor: pointer;
}

#spec-select .size-select a,
#spec-select .size-select span {
  color: inherit;
  text-decoration: none;
}

/* 减 / 数量 / 加 放在同一个带边框的控件里 */
.choose-amount .wrap-input {
  display: contents;
}

.choose-amount .text {
  border: 0;
  border-inline: 1px solid var(--rule-strong);
  border-radius: 0;
  text-align: center;
}

.choose-amount .btn-reduce,
.choose-amount .btn-add {
  text-decoration: none;
  font-size: var(--fs-md);
}

.choose-amount .btn-reduce:hover,
.choose-amount .btn-add:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

/* 货期：标签与值同一行 */
.availability {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.availability .spec-title {
  display: inline;
  margin: 0;
}

.attributes .doc-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.attributes .doc-links a.doc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
}

.price-box .special-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   产品图轮播（.slide-box / .slides / .slider_btn_nav）
   --------------------------------------------------------------------------- */
.slide-box {
  position: relative;
  overflow: hidden;
}

.slides {
  position: relative;
  left: 0;
  display: flex;
  transition: left var(--dur) var(--ease);
}

.slide {
  flex: 0 0 100%;
  min-width: 0;
}

.slider_btn_nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink-700);
  font-size: var(--fs-md);
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.slider_btn_nav:hover {
  background: var(--brand-50);
  border-color: var(--brand-300);
  color: var(--brand-700);
}

.slider_btn_prev {
  left: 6px;
}

.slider_btn_next {
  right: 6px;
}

/* =============================================================================
   载体（质粒）详情页：英文站沿用旧标记，这里用设计系统统一外观
   （中文站使用 .vector-page / .vector-layout / .summary-card 结构，配色一致）
   ========================================================================== */
.product-detail-container {
  background: var(--paper);
  padding: var(--sp-5);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.product-header-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule);
}

.product-title h1 {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, var(--fs-xl));
  line-height: 1.35;
  color: var(--ink-900);
  text-wrap: balance;
}

.product-title h1 .crown {
  display: inline-flex;
  vertical-align: -4px;
  margin-right: 6px;
}

.crown-icon {
  cursor: pointer;
}

.product-main-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
}

.product-left-col {
  flex: 1 1 480px;
  min-width: 0;
}

.product-right-col {
  flex: 0 0 320px;
  max-width: 100%;
}

/* SKU 选择 */
.sku-selector-wrapper {
  margin-bottom: var(--sp-4);
}

.sku-group {
  margin-bottom: var(--sp-4);
}

.sku-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-700);
}

.sku-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sku-item {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  color: var(--ink-700);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

.sku-item:hover {
  border-color: var(--brand-300);
  color: var(--brand-700);
  background: var(--brand-50);
}

.sku-item.selected {
  border-color: var(--brand-700);
  background: var(--brand-700);
  color: #fff;
  font-weight: 600;
}

.sku-item.disabled {
  border-color: var(--rule);
  background: var(--ink-50);
  color: var(--text-faint);
  cursor: not-allowed;
}

/* 右侧信息卡 */
.summary-card {
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.summary-card h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: var(--sp-2);
}

.price-currency {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.price-value {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brand-700);
}

.stock-status {
  display: block;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--success);
}

.stock-status.delayed {
  color: var(--warn-ink, #8a5a12);
}

.btn-buy {
  display: block;
  width: 100%;
  padding: 12px;
  background: var(--brand-700);
  border: 0;
  border-radius: var(--r-sm);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}

.btn-buy:hover {
  background: var(--brand-600);
}

.promo-line {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--success);
}

.delivery-info {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--text-muted);
}

/* 文档下载：与中文站一致（图标来自 .doc::before） */
.doc-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--brand-700);
  text-decoration: none;
}

.doc-links a:hover {
  text-decoration: underline;
}

/* 图谱下方操作按钮 */
.v-btn-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}

.v-btn-box .btn-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  color: var(--ink-700);
  text-decoration: none;
  cursor: pointer;
}

.v-btn-box .btn-block:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-700);
}

/* 基本信息 / 序列 */
.product-detail-container .basic-info dl {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-sm);
}

.product-detail-container .basic-info dt {
  color: var(--text-muted);
}

.product-detail-container .basic-info dd {
  margin: 0;
  min-width: 0;
  color: var(--ink-800);
  overflow-wrap: anywhere;
}

#pre-div pre {
  max-height: 480px;
  overflow: auto;
  padding: var(--sp-3);
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

.note-text {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.vector-link {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-700);
  text-decoration: none;
}

.vector-link:hover {
  text-decoration: underline;
}

/* 基本信息标题：2026-11-12 起是 <h2>（此前是 <div>，不进大纲）。
   字号提到与「Plasmid Protocol / Annotation」同级（20px），否则 h2 比下面的 h3 还小。 */
.basic-info-title {
  margin: var(--sp-4) 0 var(--sp-3);
  padding: 8px 12px;
  background: var(--ink-50);
  border-radius: var(--r-sm);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-800);
}

.price-row--stack {
  display: block;
  margin-bottom: var(--sp-3);
}

.price-row .cat-no {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.price-row .product-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-800);
}

.summary-title {
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-md);
  color: var(--ink-900);
}

.seq-pre {
  white-space: pre-wrap;
  word-break: break-all;
  font-family: var(--font-mono);
}

/* 相关产品推荐（产品详情页底部） */
.related-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 0 var(--sp-5);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.related-products > li {
  border-bottom: 1px solid var(--rule);
}

.related-products a {
  display: block;
  padding: 9px 0;
  font-size: var(--fs-sm);
  color: var(--ink-800);
  text-decoration: none;
}

.related-products a:hover {
  color: var(--brand-700);
}

/* 载体详情页：与中文站同版心（不受长文档 940px 限制） */
.gray-box.item-index:has(.product-detail-container) {
  max-width: none;
}

/* 载体详情页的区块标题（Plasmid Protocol / References / Annotation）
   模板里这几个是 .item-index 的直接子元素；标题层级 2026-11-12 起与中文站对齐：
   h1 标题 → h2 区块（基本信息 / 操作协议 / 参考文献 / 序列注释）→ h3 侧栏卡片与协议子步骤。
   这里必须压过前面 .gray-box > h2 的「面板头部」样式（那套是 padding 16/24 + border-bottom）。 */
section.item-index > h2 {
  margin: var(--sp-6) 0 var(--sp-3);
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--rule);
  border-bottom: 0;
  font-size: var(--fs-lg);
  line-height: 1.4;
}

section.item-index > h2:first-of-type {
  margin-top: var(--sp-5);
}

/* 协议子标题（Reconstitution / General Transform）与上文的列表拉开距离 */
section.item-index > h3 {
  margin-top: var(--sp-5);
}

/* 协议列表：与中文站 .vector-page ol.prose 同一套尺度（14px / 1.9 / 84ch）。
   这里没有 .vector-page 这层壳，所以之前只吃到通用 .prose（16px、无行宽上限），
   英文站协议正文因此比中文站宽一档。 */
section.item-index > ol.prose {
  max-width: 84ch;
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--text-muted);
}

.product-detail-container {
  width: 100%;
}

/* 载体详情页：内容左缘必须与站点其它页面一致（与页头/页脚/面包屑同为 .container 的左缘） */
.page-body:has(.product-detail-container) .inner {
  padding-inline: 0;
}

/* 基本信息：与中文站一致的两列栅格 */
.product-detail-container .basic-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 var(--sp-6);
  margin: var(--sp-4) 0;
}

.product-detail-container .basic-info dl {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sp-2);
  padding: 8px 0;
}

.product-detail-container .basic-info dt {
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

.product-detail-container .basic-info dd {
  font-size: var(--fs-sm);
}

@media (max-width: 960px) {
  .product-detail-container .basic-info {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 与中文站一致：页面不套外框，标题下一条分隔线；克隆选择收进卡片 */
.product-detail-container {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.sku-selector-wrapper {
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.sku-selector-wrapper:not(:empty) {
  margin-bottom: var(--sp-4);
}

/* =============================================================================
   购物车弹窗（cart.js 生成）
   ========================================================================== */
.cart-items {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.cart-items thead th {
  padding: 10px 12px;
  background: var(--ink-50);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-faint);
  text-align: left;
}

.cart-items td {
  padding: 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  color: var(--ink-800);
}

.cart-items tr:last-child td,
.cart-items .cart-summary-row td {
  border-bottom: 0;
}

.cart-items tbody tr:hover,
.cart-items tr:has(.cart-item-info):hover {
  background: var(--ink-50);
}

/* 产品信息三行：编号 / 名称 / 规格 */
.cart-item-info {
  min-width: 0;
}

.cart-item-catno {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}

.cart-item-url {
  display: inline-block;
  margin: 2px 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-900);
  text-decoration: none;
}

.cart-item-url:hover {
  color: var(--brand-700);
  text-decoration: underline;
}

.cart-item-property {
  margin: 4px 0 0;
  font-size: var(--fs-2xs);
  line-height: 1.6;
  color: var(--text-faint);
}

/* 数量 / 价格 / 合计 列 */
.cart-col-qty {
  width: 10%;
  text-align: center;
}

.cart-col-price {
  width: 12%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.cart-col-sum {
  width: 14%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cart-items thead .cart-col-qty,
.cart-items thead .cart-col-price,
.cart-items thead .cart-col-sum {
  text-align: right;
}

.cart-items thead .cart-col-qty {
  text-align: center;
}

.cart-item-quantity {
  width: 64px;
  height: 32px;
  padding: 0 6px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  text-align: center;
}

/* 删除：低对比度的小号操作 */
.cart-item-delete {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.cart-item-delete:hover {
  color: #b42318;
  border-bottom-color: currentColor;
}

/* 汇总三行 */
.cart-summary-row td {
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: var(--fs-sm);
}

.cart-summary-row:first-of-type td {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.cart-summary-label {
  text-align: right;
  padding-right: var(--sp-4);
  color: var(--text-muted);
}

.cart-summary-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}

.cart-summary-row:last-child .cart-summary-label,
.cart-summary-row:last-child .cart-summary-value {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
}

/* 底部按钮 */
.cart-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) 0 0;
  margin-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.cart-action-row .btn-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  background: var(--brand-700);
  border: 1px solid var(--brand-700);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

.cart-action-row .btn-block:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
}

.cart-action-row .btn-default {
  background: var(--paper);
  border-color: var(--rule-strong);
  color: var(--ink-700);
  font-weight: 500;
}

.cart-action-row .btn-default:hover {
  background: var(--brand-50);
  border-color: var(--brand-300);
  color: var(--brand-700);
}

.cart-action-row p {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* 节假日延迟提示 */
.cart-holiday-tip {
  margin: 0 0 var(--sp-3);
  padding: 8px 12px;
  background: var(--warn-bg);
  border: 1px solid #ecd6ac;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  line-height: 1.6;
  text-align: center;
  color: #6d4708;
}

/* 弹窗内容留白 + 报价单按钮降级为次要操作 */
.layui-layer-content:has(.cart-items) {
  padding: 0 var(--sp-4);
}

.cart-action-row {
  padding-bottom: var(--sp-4);
}

.cart-action-row #btn-next3 {
  background: var(--paper);
  border-color: var(--rule-strong);
  color: var(--ink-700);
  font-weight: 500;
}

.cart-action-row #btn-next3:hover {
  background: var(--brand-50);
  border-color: var(--brand-300);
  color: var(--brand-700);
}

/* .cart-action-row {
  float: none !important;
  width: 100%;
} */

/* 窄屏购物车：只保留 产品 / 数量 / 合计 */
@media (max-width: 600px) {
  .cart-items thead .cart-col-price,
  .cart-items td.cart-col-price {
    display: none;
  }

  .cart-items thead th,
  .cart-items td {
    padding: 9px 6px;
  }

  .cart-items thead th {
    font-size: 10px;
    letter-spacing: 0;
  }

  .cart-col-qty {
    width: 68px;
  }

  .cart-col-sum {
    width: 92px;
    font-size: var(--fs-xs);
  }

  .cart-item-quantity {
    width: 52px;
    height: 30px;
  }

  .cart-item-url {
    font-size: var(--fs-xs);
  }

  .cart-summary-row td {
    font-size: var(--fs-xs);
  }

  .cart-summary-label {
    padding-right: var(--sp-2);
  }

  .cart-action-row .btn-block {
    flex: 1 1 auto;
    padding: 0 12px;
  }
}

.layui-layer-content .cart-items {
  width: 100%;
  table-layout: auto;
}

/* 产品图轮播：只保留左右箭头；暂停/指示器由 showUI 隐藏 */
.slider_controls.hidden {
  display: none !important;
}

.slider_indicators {
  position: absolute;
  left: 50%;
  bottom: 8px;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
}

.slider_indicator {
  width: 7px;
  height: 7px;
  background: var(--rule-strong);
  border-radius: 50%;
  cursor: pointer;
}

.slider_indicator_select {
  display: none;
}

/* =============================================================================
   分类索引页（/catalog-peptides/ 等）：字母分组 + 名称过滤
   ========================================================================== */
.category-index:has(.product-category) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: var(--sp-5) var(--sp-6);
  align-items: start;
}

.product-category > p {
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-700);
}

.cat-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cat-list > li {
  border-bottom: 1px solid var(--rule);
}

.cat-list > li > a {
  display: block;
  padding: 7px 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-700);
  text-decoration: none;
}

.cat-list > li > a:hover {
  color: var(--brand-700);
}

.cat-list > li.is-hidden,
.product-category.is-hidden {
  display: none;
}

.tool-filter__empty {
  margin: var(--sp-4) 0 0;
  padding: var(--sp-4);
  background: var(--ink-50);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: center;
}

.tool-filter__empty[hidden] {
  display: none;
}

/* 过滤时给出即时反馈 */
.tool-filter:focus-within {
  border-color: var(--brand-300);
  background: var(--paper);
}

.tool-filter input:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 1px;
}

/* 分类索引页（含侧栏的分类页）：移动端把侧栏压成可横滑的胶囊行，
   避免首屏被三组导航占满 */
@media (max-width: 960px) {
  .category-index:has(.product-category) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .product-category > p {
    margin-bottom: 4px;
  }

  .categories_nav .right_menu ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 0 0 6px;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .categories_nav .right_menu li {
    flex: 0 0 auto;
  }

  .categories_nav .right_menu li > a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 12px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: var(--fs-xs);
    white-space: nowrap;
  }
}

@media (max-width: 960px) {
  .categories_nav .right_menu > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    padding: 12px 0 8px !important;
  }

  .categories_nav .right_menu > ul > li {
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* =============================================================================
   结算确认页 /plus/confirm.html
   ========================================================================== */
.order-confirm-container {
  padding: var(--sp-6);
}

.order-confirm-container > .headline h1 {
  margin: 0;
  font-size: clamp(1.4rem, 2.4vw, var(--fs-2xl));
  line-height: 1.3;
}

.order-confirm {
  margin-top: var(--sp-5);
}

.order-confirm > .section {
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.order-confirm > .section > h2 {
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--ink-900);
}

.order-confirm > .section h2 + h2 {
  margin-top: var(--sp-4);
}

.order-confirm h3 {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-800);
}

.order-confirm > .section > h3:first-of-type {
  margin-top: 0;
}

.order-confirm p {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text-muted);
}

/* 栅格 --------------------------------------------------------------- */
.field-row {
  display: grid;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
}

.field-row--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field-row--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .field-row--3,
  .field-row--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 表单项：标签在上，输入框在下 --------------------------------------- */
.form-shipping-info .input-container,
.order-confirm .input-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.form-shipping-info .input-container > label,
.form-shipping-info .input-container > .placeholder,
.order-confirm .input-container > label,
.order-confirm .input-container > .placeholder {
  order: -1;
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-600);
}

.form-shipping-info input,
.form-shipping-info select,
.order-confirm input[type="text"],
.order-confirm input[type="email"],
.order-confirm input[type="tel"],
.order-confirm select,
.order-confirm textarea {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--ink-800);
}

.order-confirm textarea {
  height: auto;
  min-height: 84px;
  padding: 9px 11px;
  line-height: 1.7;
  resize: vertical;
}

.form-shipping-info input:focus,
.form-shipping-info select:focus,
.order-confirm input:focus,
.order-confirm select:focus,
.order-confirm textarea:focus {
  border-color: var(--brand-500);
  outline: 2px solid var(--brand-100);
  outline-offset: 0;
}

.order-confirm .checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-700);
  cursor: pointer;
}

.order-confirm .checkbox input,
.terms-checkbox input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--brand-700);
}

/* 运输 / 支付方式：可选卡片 ----------------------------------------- */
.shipping-options,
.payment-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--sp-3);
}

.shipping-option,
.payment-method {
  position: relative;
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease);
}

.shipping-option:hover,
.payment-method:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.shipping-option.selected,
.payment-method.selected {
  border-color: var(--brand-700);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-700);
}

.shipping-option > h3,
.payment-method > h3 {
  margin: 0 0 4px;
  padding-right: 26px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--ink-900);
}

.shipping-option > h3::after,
.payment-method > h3::after {
  content: "";
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 15px;
  height: 15px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: var(--paper);
}

.shipping-option.selected > h3::after,
.payment-method.selected > h3::after {
  border-color: var(--brand-700);
  background:
    radial-gradient(circle at center, var(--brand-700) 0 4px, transparent 4.5px),
    var(--paper);
}

.shipping-option > p,
.payment-method > p {
  margin: 0 0 6px;
  font-size: var(--fs-xs);
  line-height: 1.65;
  color: var(--text-muted);
}

.shipping-option .account-note {
  color: var(--text-faint);
}

.shipping-option .form-group,
.payment-method .form-group {
  margin-top: var(--sp-3);
}

.shipping-option .form-group label,
.payment-method .form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  color: var(--ink-600);
}

.shipping-option .form-group input,
.payment-method .form-group input {
  width: 100%;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

/* 付款/条款 ----------------------------------------------------------- */
.terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink-50);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

.terms-checkbox label {
  cursor: pointer;
}

#submit-order,
.order-confirm .submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 190px;
  height: 44px;
  padding: 0 26px;
  background: var(--brand-700);
  border: 1px solid var(--brand-700);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}

#submit-order:hover:not(:disabled) {
  background: var(--brand-600);
  border-color: var(--brand-600);
}

#submit-order:disabled {
  background: var(--ink-100);
  border-color: var(--rule);
  color: var(--text-faint);
  cursor: not-allowed;
}

#spinner {
  font-size: var(--fs-sm);
}

/* 订单摘要里的购物车表格：去掉弹窗场景的额外留白
   （原选择器写的是 .order-summary，模板里实际是 .section--summary，整段规则一直没生效） */
.section--summary .cart-items {
  margin: 0;
}

.section--summary .cart-items td:first-child,
.section--summary .cart-items th:first-child {
  padding-left: 0;
}

.section--summary #goods-list {
  font-size: var(--fs-sm);
}

/* 购物车空态（cart.js 渲染，弹窗与结算页共用） */
.cart-empty {
  display: block;
  padding: var(--sp-4) 0;
  color: var(--text-faint);
  font-size: var(--fs-sm);
}

.mid-horiz-center.cart-empty {
  padding: var(--sp-6) 0;
  text-align: center;
}

/* 页脚安全标识 */
.footer-info {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

.security-badges {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  opacity: 0.9;
}

.security-badge {
  display: inline-flex;
  align-items: center;
}

@media (max-width: 720px) {
  .order-confirm-container {
    padding: var(--sp-4);
  }

  .order-confirm > .section {
    padding: var(--sp-4);
  }
}

/* 结算页：占满版心，安全标识恢复原生 SVG 着色 */
.gray-box:has(.order-confirm-container) {
  max-width: none;
}

.security-badge .icon {
  -webkit-mask: none;
  mask: none;
  background: none;
}

.security-badge svg {
  width: 40px;
  height: 32px;
}

.order-confirm > .section > h3 + textarea {
  margin-top: 6px;
}

/* .inner 是 flex 容器，单卡片页面需要显式占满宽度 */
.order-confirm-container {
  width: 100%;
  min-width: 0;
}

/* 结算页：收紧标题上方叠加的三层内边距 */
main:has(> .container.page-body .order-confirm-container) {
  padding-top: 0;
}

.container.page-body:has(.order-confirm-container) {
  padding-top: var(--sp-4);
}

.page-body .content:has(.order-confirm-container) {
  padding-top: 0;
}

/* 国家下拉：补标签后与同排输入框基线对齐 */
.input-container--select select {
  height: 38px;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f7186' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

/* 结算页主容器上边距清零（三级内边距叠加导致空白过大） */
main.page-confirm {
  padding-top: 0;
}

body:has(.order-confirm-container) main {
  padding-top: 0;
}

body:has(.order-confirm-container) #main {
  padding-top: 0;
}

/* 载体详情页：外层容器不再额外补 40px 水槽 —— 之前 .page-body 加左右留白、
   .inner 又置 0，导致该页正文比页头/页脚多缩进 40px。移动端的水槽统一由 §21 视线规则提供。 */
.page-body:has(.product-detail-container) {
  padding-inline: 0;
}

/* 多肽页摩尔浓度计算器：字段与单位框不再互相压盖 */
.calculator-form fieldset {
  position: relative;
  width: 210px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
}

.calculator-form fieldset legend {
  position: absolute;
  top: -9px;
  left: 8px;
  margin: 0;
  padding: 0 4px;
  background: var(--ink-50);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-faint);
}

.calculator-form fieldset input {
  position: absolute;
  top: 4px;
  left: 0;
  width: calc(100% - 78px) !important;
  height: 34px;
  padding-left: 10px !important;
  padding-right: 4px !important;
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}

.calculator-form fieldset select {
  position: absolute;
  top: 4px;
  right: 4px;
  width: auto;
  min-width: 62px;
  height: 34px;
  padding-right: 18px;
  background-color: transparent;
  background-position: right 2px center;
  border: 0;
  font-size: var(--fs-xs);
}

.calculator-form fieldset .sep-line {
  top: 10px;
  left: calc(100% - 74px);
  height: 24px;
}

/* 没有单位下拉的字段（分子量）输入框占满 */
.calculator-form fieldset:not(:has(select)) input {
  width: 100% !important;
  padding-right: 10px !important;
}

.calculator-form fieldset:not(:has(select)) .sep-line {
  display: none;
}

/* 运算符居中对齐 */
.calculator-form > .calculator-widget > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 44px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--brand-700);
}

.calculator-form fieldset legend {
  background: var(--paper);
  border-radius: 2px;
}

.calculator-form fieldset legend {
  white-space: nowrap;
}

/* 只有输入框的字段（分子量）需要更宽，且模板里的内联宽度要覆盖掉 */
.calculator-form fieldset:not(:has(select)) {
  width: 168px !important;
}


.calculator-form fieldset legend sub {
  font-size: 0.72em;
  line-height: 1;
  vertical-align: baseline;
  position: relative;
  top: 0.18em;
}

/* 留言弹层：邮箱 / 电话输入框与文本框同宽 */
.contact-popup input[type="email"],
.contact-popup input[type="tel"] {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}

.contact-popup input[type="email"]:focus,
.contact-popup input[type="tel"]:focus {
  border-color: var(--brand-500);
  outline: 2px solid var(--brand-100);
}

/* 留言弹层：字段之间留出间距 */
.contact-popup > div {
  margin-bottom: 10px;
}

.contact-popup > div:last-child {
  margin-bottom: 0;
}