/* ============================================================
   业务组件样式
   依赖 base.css 中的设计令牌（--brand / --accent / --ink-* / --shadow-*）
   ============================================================ */

/* ============================================================
   门户三栏布局（对齐盖德的门户范式）
   左：产品导航（纵向分类，B2B 核心入口）
   中：主内容
   右：会员、平台数据、热门推荐
   ============================================================ */
.portal-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 292px;
  gap: 14px;
  align-items: start;
  margin-bottom: var(--block-gap);
}
/* 三栏内部一律 14px 竖向间距。
   以前左栏 12 / 中栏 14 / 右栏 26（14 gap + notice-ticker 的 12 margin），
   三栏同一行的面板顶部对不齐，看起来像随手摆的。 */
.rail { display: flex; flex-direction: column; gap: 14px; }

/* 栏内是 flex 列 + gap，子元素自带的 margin-bottom 不会与 gap 合并（flex 不做外边距
   折叠）而会**叠加**：右栏会员面板（.panel 带 margin-bottom:14px）到公告条
   实测 28px = 14 gap + 14 margin，和左中两栏的 14px 对不齐。
   统一由栏的 gap 决定间距，子元素的下外边距清零。 */
.rail > * { margin-bottom: 0; }

/* ---------- 左栏：产品导航 + 快速采购 ----------
   盖德把「快速采购」放在产品导航正下方，形成左栏的两个堆叠块。
   因此 .rail-left 本身不再有边框，边框落在内部的 .rail-nav 上。
   也去掉了 sticky：加上快速采购表单后左栏接近 700px，
   吸顶反而会把表单挤出视口。 */
.rail-left { gap: 14px; }

.rail-nav {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: var(--shadow-xs);
}
.rail-head {
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-700) 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 15px;
}
.rail-head::before {
  content: "☰";
  font-size: 14px;
  opacity: .9;
}
.rail-cats { list-style: none; margin: 0; padding: 0; }
.rail-cats li { border-bottom: 1px solid #F0F4F7; }
.rail-cats li:last-child { border-bottom: none; }
.rail-cats a {
  position: relative;
  display: block;
  padding: 10px 14px 10px 16px;
  font-size: 13px;
  color: var(--ink-700);
  transition: background-color .14s, color .14s, padding-left .14s;
}
.rail-cats a::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 0; border-radius: 0 2px 2px 0;
  background: var(--brand);
  transition: height .18s;
}
.rail-cats a:hover {
  background: var(--brand-50);
  color: var(--brand-800);
  padding-left: 20px;
}
.rail-cats a:hover::before { height: 18px; }

/* ---------- 中栏横幅 ---------- */
.hero-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  background: linear-gradient(120deg, #0E9FAD 0%, var(--brand) 42%, #2CC2CE 72%, #EA9A16 130%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 24px 26px;
  margin-bottom: 14px;
  box-shadow: 0 4px 16px rgba(var(--brand-rgb), .22);
  position: relative;
  overflow: hidden;
}
/* 淡装饰圆，避免大色块过于扁平 */
.hero-strip::after {
  content: "";
  position: absolute; right: -60px; top: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  pointer-events: none;
}
.hero-strip-main { min-width: 0; position: relative; z-index: 1; }
.hero-strip h1 { font-size: 23px; color: #fff; margin-bottom: 7px; letter-spacing: .3px; }
.hero-strip p { color: rgba(255, 255, 255, .92); font-size: 13px; margin-bottom: 14px; max-width: 460px; }
.hero-strip-search { display: flex; max-width: 460px; }
.hero-strip-search input {
  flex: 1; height: 40px; padding: 0 14px; border: none;
  border-radius: var(--radius) 0 0 var(--radius); font-size: 14px;
}
.hero-strip-search .btn {
  height: 40px; border-radius: 0 var(--radius) var(--radius) 0;
  border: none; background: rgba(0, 0, 0, .28); color: #fff;
}
.hero-strip-search .btn:hover { background: rgba(0, 0, 0, .42); color: #fff; }
.hero-strip-stats { display: flex; gap: 26px; flex: 0 0 auto; position: relative; z-index: 1; }
.hs-item { text-align: center; }
.hs-item b { display: block; font-size: 25px; line-height: 1.15; font-weight: 700; }
.hs-item span { font-size: 12px; color: rgba(255, 255, 255, .88); }

/* ============================================================
   数据表格
   ============================================================ */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-500);
  background: #F7FAFB;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table th:first-child { border-radius: var(--radius) 0 0 0; }
.data-table th:last-child { border-radius: 0 var(--radius) 0 0; }
.data-table td { padding: 11px 12px; border-bottom: 1px solid #F0F4F7; color: var(--ink-700); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background-color .14s; }
.data-table tbody tr:hover { background: var(--brand-50); }
.data-table tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.data-table .ta-c { text-align: center; }

/* ============================================================
   右栏：会员面板
   ============================================================ */
.member-panel { padding: 0; overflow: hidden; }
.mp-greet {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 100%);
  color: #fff;
  font-size: 13px;
  padding: 13px 15px;
}
.mp-actions { display: flex; gap: 8px; padding: 13px 15px 11px; }
.mp-actions .btn { flex: 1; }
/* 「退出」是 POST 表单里的原生 button：.btn 那套样式是按 <a> 调的，
   原生按钮要显式把浏览器默认外观清掉，否则会在按钮里再套一层灰底边框。
   flex:1 由上面的 .mp-actions .btn 给到，这里只负责"去掉原生按钮相"。 */
.mp-logout-form {
  display: flex;
  flex: 1;
  margin: 0;
}
.mp-logout-btn {
  width: 100%;
  font-family: inherit;
  cursor: pointer;
}
.mp-tabs {
  display: flex;
  margin: 0 15px;
  border-bottom: 1px solid var(--line);
}
.mp-tab {
  flex: 1; text-align: center; padding: 8px 0; font-size: 13px;
  color: var(--ink-400); cursor: default;
  border-bottom: 2px solid transparent;
}
.mp-tab.active { color: var(--brand-700); font-weight: 600; border-bottom-color: var(--brand); }
.mp-links { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 13px 15px; }
.mp-links a {
  display: block; text-align: center; padding: 8px 4px; font-size: 12px;
  background: #F7FAFB; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink-500);
  transition: all .14s;
}
.mp-links a:hover {
  border-color: var(--brand); color: var(--brand-700);
  background: var(--brand-50); text-decoration: none;
  transform: translateY(-1px);
}
.mp-note { margin: 0; padding: 0 15px 13px; text-align: center; }

/* 卖家入口。指向的是**另一个应用**（商家端 SPA，挂在 /merchant/），
   所以刻意做得和上面那 6 个灰色功能方框不一样：品牌浅底 + 图标 + 箭头。
   （这个类原先只写在模板里、没有对应样式，所以之前是个裸链接。） */
.mp-seller {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 15px 15px;
  padding: 11px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-700);
  background: var(--brand-50);
  border: 1px solid rgba(24, 154, 237, .24);
  border-radius: var(--radius);
  transition: background-color .14s, border-color .14s, transform .14s;
}
.mp-seller:hover {
  background: #E3F1FD;
  border-color: var(--brand);
  color: var(--brand-700);
  text-decoration: none;
  transform: translateY(-1px);
}
.mp-seller-icon { flex: 0 0 auto; }
/* 箭头由 CSS 生成：原来写在文字里，既不能单独定位，读屏也会念出"›" */
.mp-seller::after {
  content: "›";
  margin-left: auto;
  font-size: 16px;
  line-height: 1;
  color: var(--brand);
  transition: transform .14s;
}
.mp-seller:hover::after { transform: translateX(2px); }

/* ============================================================
   侧栏数据列表（相关推荐等）
   ============================================================ */
/* 注：原「平台数据」板块用的 .stat-list 已随该板块一起删除，
   首页右栏现在只保留会员面板 + 公告滚动条 + 实时报价。 */
.hot-list { list-style: none; margin: 0; padding: 0; }
.hot-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 0; font-size: 13px; border-bottom: 1px dashed #F0F4F7;
}
.hot-list li:last-child { border-bottom: none; }
.hot-list li a { color: var(--ink-700); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-list li a:hover { color: var(--brand-700); }
.hot-list .cnt {
  flex: 0 0 auto; font-size: 11px; color: var(--brand-700);
  background: var(--brand-50); border-radius: 10px; padding: 1px 7px;
}

/* ============================================================
   分类列表页（对齐盖德 /product/listc_catid-*.html）

   下面的数值来自对盖德该页 DOM + 样式表的实测（视口 1440px）：
       容器            1200px 居中
       左列            940px        右列  250px
       tab 条          高 31px，项 101×31，选中 border-top:2px solid 主色
       筛选面板        标签列 80px、行高 44px、标签 14px #999、虚线分隔
       列表行          940×207，padding 20px，行距 0，1px #e5e5e5 下边框
         结构式图位     120×120（图 118×118 + 1px 框）
         中区           440px：标题 16px #007bc9 / 规格两列各 220px 行高 22px
         右区           335px：价格 16px/700 #ff5e0d，按钮 74×30 / 99×28
       右栏卡片        208×176，图 93×93，虚线分隔，标题条 #f5f5f5

   我们的容器内宽是 1168px（.container 有 16px 左右内边距），
   所以按同比例分配成 918 / 240，而不是硬套 940 / 250。
   ============================================================ */
.cat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 10px;
  align-items: start;
}
.cat-main { min-width: 0; }

/* ---- tab 条（盖德 .conm_list_mav：高 31px，选中项上边框 2px 主色）---- */
.cat-tabs {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  margin-bottom: 12px;
}
.cat-tabs a {
  width: 101px;
  height: 31px;
  line-height: 29px;
  text-align: center;
  font-size: 14px;
  color: #666;
  background: #F5F7F9;
  border: 1px solid var(--line);
  border-top: 2px solid var(--line);
  transition: all .14s;
}
.cat-tabs a:hover { color: var(--brand-700); text-decoration: none; }
.cat-tabs a.active {
  background: #fff;
  border-color: var(--line);
  border-top: 2px solid var(--brand);
  color: var(--ink-900);
  font-weight: 600;
}
.cat-tabs-meta { margin-left: auto; font-size: 12.5px; color: #888; align-self: center; }
.cat-tabs-meta b { color: var(--price); font-size: 14px; }

/* ---- 筛选面板（盖德 .sx_mer_mer：标签列 80px，行高 44px）---- */
.filter-panel {
  border: 1px solid #E5E5E5;
  background: #fff;
  margin-bottom: 0;
  border-bottom: none;
}
.fp-row {
  display: flex;
  border-bottom: 1px dashed #E5E5E5;
}
.fp-label {
  flex: 0 0 80px;
  padding: 10px 0 10px 8px;
  color: #999;
  font-size: 14px;
  line-height: 23px;
}
.fp-values {
  flex: 1;
  min-width: 0;
  padding: 10px 8px 10px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  align-items: center;
  line-height: 23px;
}
.fp-values a {
  font-size: 14px;
  color: #333;
  padding: 0 4px;
  border-radius: 2px;
  transition: all .13s;
}
.fp-values a .cnt { color: #999; font-size: 13px; }
.fp-values a:hover { color: var(--brand-700); text-decoration: none; }
.fp-values a.active {
  background: var(--brand);
  color: #fff;
}
.fp-values a.active .cnt { color: rgba(255, 255, 255, .85); }

/* ---- 价格区间 + 货号 + 复选框（盖德 .sx_mer_mer2：三边框、无下边框）---- */
.filter-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding: 12px 10px;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-bottom: none;
  margin-bottom: 0;
}
.fe-group { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.fe-group label { color: #999; flex: 0 0 auto; }
.fe-group input {
  width: 74px;
  height: 30px;
  padding: 0 8px;
  font-size: 13px;
  border-color: #DCDCDC;
}
.fe-group input[name=code] { width: 140px; }
.fe-cur, .fe-dash { color: #999; }
.fe-note { flex-basis: 100%; }

.filter-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 0 10px 12px;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-top: none;
  margin-bottom: 12px;
}
.fc-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #333;
}
.fc-item .cnt { color: #999; font-size: 12px; }
.fc-item:hover { color: var(--brand-700); text-decoration: none; }
/* 用 span 画方框而不是真的 input[type=checkbox]：
   这些是链接（点击即筛选），不是表单控件；真实 input 会让人以为
   要按「确定」才生效。 */
.fc-box {
  width: 13px; height: 13px;
  border: 1px solid #DCDCDC;
  border-radius: 2px;
  background: #fff;
  position: relative;
  flex: 0 0 auto;
}
.fc-item.active .fc-box { background: var(--brand); border-color: var(--brand); }
.fc-item.active .fc-box::after {
  content: "";
  position: absolute;
  left: 3px; top: 0;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.fc-item.active { color: var(--brand-700); font-weight: 500; }

/* ============================================================
   产品列表行（盖德 dd.ls_cp_main：940×207，行距 0）
   ============================================================ */
.offer-rows {
  border: 1px solid #E5E5E5;
  border-bottom: none;
  background: #fff;
}
.offer-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 335px;
  gap: 20px;
  padding: 20px;
  border-bottom: 1px solid #E5E5E5;
  transition: background-color .14s;
}
.offer-row:hover { background: #FCFEFF; }

/* 结构式图位：120×120（内图 118×118 + 1px 框） */
.or-struct {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px; height: 120px;
  border: 1px solid #E5E5E5;
  background: #FBFDFE;
  overflow: hidden;
}
.or-struct img { width: 118px; height: 118px; object-fit: contain; }

/* 中区：标题 + 规格两列（各 220px，行高 22px）+ 简介 */
.or-main { min-width: 0; }
.or-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 25px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.or-title a { color: var(--brand-700); }
.or-title a:hover { color: var(--price); }
.or-cas {
  font-size: 13px;
  font-weight: 400;
  color: #888;
  font-family: ui-monospace, Consolas, monospace;
}
.or-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 22px;
}
.or-specs > div { display: flex; gap: 6px; min-width: 0; }
.or-specs dt { flex: 0 0 52px; color: #999; }
.or-specs dd {
  margin: 0;
  min-width: 0;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.or-summary {
  margin: 0;
  font-size: 12px;
  line-height: 20px;
  color: #999;
  max-height: 40px;
  overflow: hidden;
}
.or-summary b { color: #bbb; font-weight: 400; margin-right: 6px; }

/* 右区：供应商 + 价格（16px/700 #ff5e0d）+ 操作按钮 */
.or-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.or-merchant { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.or-mname { font-size: 13px; color: #333; }
.or-mname:hover { color: var(--brand-700); }
.or-mtype { font-size: 12px; color: #999; }
.or-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--price);
  line-height: 1.3;
  text-align: right;
  margin-bottom: 6px;
}
.or-code { font-size: 12px; color: #999; text-align: right; }
.or-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.or-counts { font-size: 12px; color: #999; margin-top: auto; text-align: right; }
.or-counts b { color: var(--price); font-weight: 700; }

/* 徽章：盖德的「主营 / 直通车 / 优选100」是暖色实心块，VIP 是黄底深字 */
.badge-main { background: #FF5A4E; color: #fff; border: none; }
.badge-express { background: #FF5E0D; color: #fff; border: none; }
.badge-opt { background: #FEC530; color: #7A5200; border: none; }
.badge-vip2 { background: #FFF224; color: #8A6D00; border: 1px solid #EBDC00; }

/* ============================================================
   右侧栏：热门产品（盖德 .main_serach_right_t / 卡片 208×176，图 93×93）
   ============================================================ */
.hot-panel { padding: 0 0 10px; }
.hot-panel .panel-title {
  margin: 0 0 4px;
  padding: 10px 16px;
  background: #F5F5F5;
  border-bottom: 1px solid #E5E5E5;
}
.hot-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px 8px;
  align-items: center;
}
.hi-struct {
  flex: 0 0 93px;
  width: 93px; height: 93px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #E5E5E5;
  background: #FBFDFE;
  overflow: hidden;
}
.hi-struct img { width: 91px; height: 91px; object-fit: contain; }
.hi-body { min-width: 0; flex: 1; }
.hi-name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-700);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hi-name:hover { color: var(--price); }
.hi-meta {
  font-size: 12px;
  color: #888;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hi-actions {
  display: flex;
  gap: 6px;
  padding: 0 16px 14px;
  border-bottom: 1px dashed #E5E5E5;
  margin-bottom: 6px;
}
.hi-actions .btn { flex: 1 1 auto; height: 28px; font-size: 12px; padding: 0 8px; }
.hot-panel .hi-actions:last-child { border-bottom: none; }

/* ============================================================
   化合物卡片
   ============================================================ */
.compound-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.compound-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px 13px;
  color: var(--ink-900);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.compound-card:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-2px);
}
/* 商品图：用服务器上的真实图片（media/business/*_covers/，
   从雍纳服务器拷贝过来的 22539 张，已 MD5 校验）。
   那些图是 800×800 方形海报，而图位是"宽 > 高"的扁矩形：
   用 contain 会缩成一个小方块、两侧留白，用 cover 则铺满并只裁掉上下边缘 ——
   海报中间的产品名与 CAS 徽标正好落在可见区域，观感接近电商商品卡。
   没有主图时由模板渲染 .thumb-empty（纯 CSS 文字占位，不用素材图）。 */
.cc-thumb {
  height: 118px; margin: -3px -4px 10px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #FBFDFE;
  border: 1px solid #F0F4F7; border-radius: var(--radius);
}
.cc-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .22s;
}
/* 没有商品主图时的中性占位（纯 CSS，不用生成的素材图）。
   刻意做得"像缺图"而不是"像产品图"：放个图标会误导用户以为是产品照片。 */
.thumb-empty {
  font-size: 12px;
  color: var(--ink-400);
  letter-spacing: .5px;
}
.compound-card:hover .cc-thumb img { transform: scale(1.05); }
.cc-name {
  font-size: 14px; font-weight: 600; margin-bottom: 3px;
  color: var(--ink-900); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
}
.compound-card:hover .cc-name { color: var(--brand-700); }
.cc-cas { font-size: 12px; color: var(--ink-400); }
.cc-formula { font-size: 12px; color: var(--ink-500); margin: 3px 0; }
.cc-count {
  font-size: 12px; color: var(--ink-400); margin-top: auto;
  padding-top: 7px; border-top: 1px dashed #F0F4F7;
}
.cc-count b { color: var(--price); font-weight: 700; }

/* ============================================================
   产品目录：楼层式分类索引

   结构对齐盖德产品中心 /product/，关键尺寸取自它的样式表
   （css/base_top_bottom_layout_.css），在 1200px 容器下等比分配：

       盖德 .pro_tp_top        48px 高、浅色底、1px 主题色上边框、标题 20px 粗体
       盖德 .pro_tp_center     左区 967 + 右区 230
       盖德 左区每列           150 内容 + 33 左内距 + 47 右内距
       盖德 每条链接           20px 行高 + 9px 间距
       盖德 右区编号方块       14×14，前 3 个深色、后 3 个浅色

   「一区一色」用本站品牌色系（RAIL_THEMES），与首页市场区块同源，
   所以同一个分类在首页和产品目录里是同一个颜色。
   ============================================================ */

/* ---- 顶部标签条（盖德 .pro_tp_t2：等宽格 + 1px 边框 + 选中填充） ---- */
.floor-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--block-gap);
  /* 吸顶：滚到楼层深处也能一键换分类。盖德用 JS 固定定位实现，
     我们用原生 sticky，少一段脚本。 */
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 1px 0 rgba(16, 32, 48, .04);
}
.floor-tabs.is-stuck { box-shadow: 0 3px 10px rgba(16, 32, 48, .10); }
.ft-item {
  position: relative;
  height: 45px;
  line-height: 45px;
  padding: 0 8px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-700);
  border-left: 1px solid var(--line);
  border-top: 2px solid var(--fc, var(--line));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color .14s, color .14s;
}
.ft-item:first-child { border-left: none; }
.ft-item:hover { background: var(--brand-50); color: var(--brand-700); text-decoration: none; }
.ft-item.active {
  background: var(--fc, var(--brand));
  border-top-color: var(--fc, var(--brand));
  color: #fff;
  font-weight: 500;
}

/* ---- 楼层 ---- */
.floor {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 2px solid var(--fc);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--block-gap);
  /* 标签条吸顶 45px，锚点跳转时要让出这段高度，否则标题被压在条下 */
  scroll-margin-top: 58px;
}

/* 标题带：浅色底 + 主题色大标题（对齐盖德 .pro_tp_top） */
.floor-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
  background: var(--fbg);
  border-bottom: 1px solid var(--line);
}
.floor-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--fc);
}
.floor-title i {
  font-style: normal;
  margin-right: 10px;
  /* 楼层号用同色但更淡的字重，视觉上先读分类名 */
  opacity: .72;
}
.floor-title a { color: inherit; }
.floor-title a:hover { text-decoration: none; opacity: .85; }
.floor-meta { margin-left: auto; font-size: 12.5px; color: var(--ink-400); }
.floor-head .more { flex: 0 0 auto; }

/* 楼体：左区品种列 + 右区优选企业（对齐盖德 967 / 230） */
.floor-body { display: grid; grid-template-columns: minmax(0, 1fr) 230px; }
.floor-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 14px 6px 14px 14px;
}
.floor-col {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  border-right: 1px dashed var(--line);
  min-width: 0;
}
.floor-col:last-child { border-right: none; }
.floor-col li { line-height: 20px; margin-bottom: 9px; }
.floor-col a {
  position: relative;
  display: block;
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-700);
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.floor-col a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: var(--fc);
  opacity: .55;
}
.floor-col a:hover { color: var(--fc); }

/* 右区：新品上架（对齐盖德「新品推荐」的位置与编号样式） */
.floor-side {
  border-left: 1px solid var(--line);
  padding: 14px 16px;
  background: #FCFDFE;
  display: flex;
  flex-direction: column;
}
.fs-head {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: 12px;
}
.fs-list { list-style: none; margin: 0 0 12px; padding: 0; }
.fs-list li { margin-bottom: 11px; }
/* 编号与名字顶部对齐：名字可能折成两行，居中会让编号浮在中间 */
.fs-list a { display: flex; align-items: flex-start; gap: 8px; }
.fs-list a:hover { text-decoration: none; }
.fs-list i {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  line-height: 14px;
  text-align: center;
  font-style: normal;
  font-size: 11px;
  color: #fff;
  background: var(--fc);
  border-radius: 2px;
  /* 14px 方块与第一行文字（12.5px/1.5≈19px）视觉居中对齐 */
  margin-top: 2px;
}
/* 与盖德一致：后 3 名的编号块用浅一档的颜色，形成前后层级 */
.fs-list li:nth-child(n+4) i { opacity: .45; }
/* 新品名字**完整显示**：允许折行，不再单行截断。
   这是配合模板里去掉 elide 的改动 —— 只改模板不改这里，
   名字仍会被 white-space: nowrap + ellipsis 在 CSS 层切掉。 */
.fs-list span {
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-700);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.fs-list a:hover span { color: var(--fc); }
.floor-side .btn { margin-top: auto; }

/* ============================================================
   报价卡片
   ============================================================ */
.offer-list { display: grid; }
.offer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 208px;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid #F0F4F7;
  transition: background-color .14s;
}
.offer-card:last-child { border-bottom: none; }
.offer-card:hover { background: #FCFEFF; }
.offer-list.compact .offer-card { padding: 12px 0; }

.offer-title { font-size: 15px; margin: 0 0 8px; font-weight: 600; line-height: 1.5; }
.offer-title a { color: var(--ink-900); }
.offer-title a:hover { color: var(--brand-700); }
.offer-title .cas {
  font-size: 12px; color: var(--ink-400); font-weight: 400; margin-left: 7px;
  background: var(--bg); border-radius: var(--radius-sm); padding: 1px 6px;
}

.offer-body { display: flex; gap: 13px; }
.offer-thumb {
  flex: 0 0 92px; height: 92px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.offer-card:hover .offer-thumb { border-color: var(--brand-200); }
.offer-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.offer-detail { flex: 1; min-width: 0; }

.offer-specs {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 5px 20px;
  font-size: 13px; color: var(--ink-700);
}
.offer-specs li { white-space: nowrap; }
.offer-specs b { color: var(--ink-400); font-weight: 400; margin-right: 5px; }
.offer-usage { font-size: 13px; color: var(--ink-500); margin: 7px 0 0; }
.offer-usage b { color: var(--ink-400); font-weight: 400; margin-right: 5px; }

.offer-side {
  border-left: 1px solid #F0F4F7;
  padding-left: 18px;
  display: flex; flex-direction: column; gap: 7px;
}
.offer-price {
  font-size: 19px; font-weight: 700; color: var(--price);
  line-height: 1.25; letter-spacing: .2px;
}
.offer-stock { font-size: 12px; color: var(--ink-400); }
.offer-merchant { font-size: 13px; }
.merchant-name { color: var(--ink-700); font-weight: 500; }
.merchant-name:hover { color: var(--brand-700); }
.offer-actions { display: flex; gap: 7px; margin-top: 3px; }
.offer-date { margin-top: auto; color: var(--ink-400); }

/* ============================================================
   筛选面板
   ============================================================ */
.facet-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 13px;
  overflow: hidden;
}
.facet-row { display: flex; border-bottom: 1px solid #F0F4F7; }
.facet-row:last-child { border-bottom: none; }
.facet-label {
  flex: 0 0 70px;
  padding: 10px 11px;
  background: #F7FAFB;
  color: var(--ink-400);
  font-size: 13px;
  border-right: 1px solid var(--line);
}
.facet-values { flex: 1; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 2px 16px; }
.facet-tag {
  font-size: 13px; color: var(--ink-700);
  padding: 1px 6px; border-radius: var(--radius-sm);
  transition: all .13s;
}
.facet-tag .cnt { color: var(--ink-400); font-size: 12px; }
.facet-tag:hover { background: var(--brand-50); color: var(--brand-700); text-decoration: none; }
.facet-tag.active {
  color: #fff; background: var(--brand); font-weight: 500;
}
.facet-tag.active .cnt { color: rgba(255, 255, 255, .8); }
.facet-tag.active .x { margin-left: 2px; }
.facet-form { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.inline-field {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--ink-400);
  /* 不加 nowrap 时「价格」「货号」这类两字标签会被挤成竖排 */
  white-space: nowrap;
}

.active-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  padding: 9px 0 13px; font-size: 13px;
}
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-radius: 12px;
  font-size: 12px;
  color: var(--brand-800);
  transition: all .14s;
}
.chip:hover { background: var(--brand-100); text-decoration: none; }
.chip-clear { background: #fff; border-color: var(--line-strong); color: var(--ink-500); }
.chip-clear:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-bg); }

/* ============================================================
   结果栏 / 排序
   ============================================================ */
.result-bar {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px;
  padding: 11px 13px;
  background: #F7FAFB;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
}
.result-count { font-size: 13px; color: var(--ink-500); }
.result-count b { color: var(--accent-600); font-size: 15px; font-weight: 700; }
.sort-links { display: flex; gap: 4px; font-size: 13px; }
.sort-links a {
  padding: 3px 10px; border-radius: var(--radius-sm); color: var(--ink-500);
  transition: all .14s;
}
.sort-links a:hover { background: #fff; color: var(--brand-700); text-decoration: none; }
.sort-links a.active { background: var(--brand); color: #fff; font-weight: 500; }
.inline-search { display: flex; gap: 7px; align-items: center; }
.inline-search input { width: 210px; }
.inline-search.center { justify-content: center; max-width: 430px; margin: 18px auto 0; }

/* ============================================================
   分页
   ============================================================ */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 18px 0 4px; }
.page-link {
  min-width: 34px; height: 32px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 13px; color: var(--ink-500); background: #fff;
  transition: all .14s;
}
.page-link:hover { border-color: var(--brand); color: var(--brand-700); text-decoration: none; }
.page-link.active {
  background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
}
.page-link.disabled { color: var(--line-strong); background: var(--bg); }
.page-info { margin-left: auto; font-size: 12px; }

/* ============================================================
   单品页布局
   ============================================================ */
.compound-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; }
/* flex 子项默认 min-width:auto，会被内容顶住不收缩 —— 窄屏下
   .compound-main / .compound-side 都卡在 702px，页面因此横向溢出。 */
.compound-layout > * { min-width: 0; }
.compound-title { font-size: 21px; margin-bottom: 14px; line-height: 1.45; }
.compound-title .cas-big {
  font-size: 13px; color: var(--ink-400); font-weight: 400; margin-left: 8px;
  background: var(--bg); border-radius: var(--radius-sm); padding: 2px 8px;
}

.compound-meta { display: flex; gap: 18px; margin-bottom: 14px; }
.structure-box, .cover-box {
  flex: 0 0 168px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 8px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  min-height: 150px;
}
.structure-box img { max-width: 100%; max-height: 150px; }
.cover-box img { max-width: 100%; max-height: 170px; object-fit: contain; }

.spec-table { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 7px 12px; margin: 0; font-size: 13px; }
.spec-table dt { color: var(--ink-400); }
.spec-table dd { margin: 0; word-break: break-word; color: var(--ink-700); line-height: 1.7; }

.compound-desc {
  font-size: 13.5px; color: var(--ink-700); margin-top: 13px;
  line-height: 1.85; padding-top: 13px; border-top: 1px dashed var(--line);
}

/* ---------------------------------------------------------- 单品页：叙述性规格
   替换原来把整段抓取原文 linebreaksbr 出来的做法。
   实测原文里 82% 是英文，且「产品名称/英文名称/CAS号/别名/分子式」
   与上方 spec-table 重复；这里只展示规格表没覆盖的内容
   （物化性质 / 含量 / 熔点 / 溶解性 / 储存条件 …）。 */
.compound-facts {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 7px 12px;
  margin: 13px 0 0;
  padding-top: 13px;
  border-top: 1px dashed var(--line);
  font-size: 13.5px;
}
.compound-facts dt { color: var(--ink-400); }
.compound-facts dd {
  margin: 0; color: var(--ink-700); line-height: 1.8; word-break: break-word;
}

/* 英文原文折叠：内容仍在 DOM 里，对 SEO 无损失，只是不占版面 */
.compound-en {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-subtle, #fafbfc);
}
.compound-en > summary {
  cursor: pointer;
  padding: 9px 13px;
  font-size: 13px;
  color: var(--ink-500);
  list-style: none;
  user-select: none;
}
.compound-en > summary::-webkit-details-marker { display: none; }
.compound-en > summary::before {
  content: "▸ ";
  color: var(--ink-400);
}
.compound-en[open] > summary::before { content: "▾ "; }
.compound-en > summary:hover { color: var(--brand-700); }
.compound-en .compound-en-body {
  padding: 0 13px 13px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--ink-500);
  max-height: 340px;
  overflow-y: auto;
  border-top: 1px dashed var(--line);
  padding-top: 11px;
}
.compound-stats {
  margin-top: 13px; padding: 11px 14px;
  background: var(--brand-50);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  font-size: 13px; color: var(--ink-500);
}
.compound-stats b { color: var(--price); font-size: 16px; font-weight: 700; }

.cta-panel {
  text-align: center;
  background: linear-gradient(135deg, #F7FCFD 0%, #FDFAF3 100%);
}
.cta-actions { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }

.merchant-mini-list, .link-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.merchant-mini-list li, .link-list li {
  padding: 7px 0; border-bottom: 1px dashed #F0F4F7;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.merchant-mini-list li:last-child, .link-list li:last-child { border-bottom: none; }
.link-list li a { color: var(--ink-700); }
.link-list li a:hover { color: var(--brand-700); }
.merchant-mini-list li a { color: var(--ink-700); flex: 1; min-width: 0; }
.merchant-mini-list li a:hover { color: var(--brand-700); }
.link-list.two-col { columns: 2; column-gap: 22px; }

/* ============================================================
   GEO 事实块 / 常见问题
   ============================================================ */
.faq-block .faq-list { margin: 0; }
/* 悬挂缩进（hanging indent）：
   「Q」徽章是 inline-block（18px + 7px = 25px），首行文字从 25px 起，
   但回行原本从 0px 起 —— 会跑到徽章底下，窄视图里两行左边缘错开 25px，
   看着像"字挤在一起"（实测并未真重叠，只是没对齐）。
   padding-left 25px 让回行对齐首行文字，text-indent -25px 把徽章拉回最左，
   两者相抵后正好与 .faq-a 的 padding-left: 25px 对齐。 */
.faq-q {
  font-weight: 600; font-size: 14px; color: var(--ink-900);
  padding: 11px 0 4px 25px; margin: 0; line-height: 1.6;
  text-indent: -25px;
}
.faq-q::before {
  content: "Q"; display: inline-block;
  width: 18px; height: 18px; line-height: 18px; text-align: center;
  margin-right: 7px; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
  vertical-align: 1px;
}
.faq-a {
  margin: 0; padding: 0 0 11px 25px;
  font-size: 13px; color: var(--ink-500); line-height: 1.8;
  border-bottom: 1px dashed #F0F4F7;
}
.faq-note { margin-top: 13px; color: var(--ink-400); }

/* ============================================================
   企业卡片 / 企业页
   ============================================================ */
.merchant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(266px, 1fr)); gap: 11px; }
.merchant-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 14px 15px;
  color: var(--ink-900);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.merchant-card:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-2px);
}
.mc-name { font-size: 15px; font-weight: 600; margin-bottom: 7px; line-height: 1.5; }
.merchant-card:hover .mc-name { color: var(--brand-700); }
.mc-type { margin: 7px 0; color: var(--ink-400); }
.mc-products { margin: 7px 0; }
.mc-count { margin-top: 8px; color: var(--ink-400); }
.mc-count { border-top: 1px dashed #F0F4F7; padding-top: 8px; }

.merchant-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; flex-wrap: wrap;
  background: linear-gradient(135deg, #F7FCFD 0%, #FFFFFF 60%);
}
.merchant-header h1 { margin-bottom: 9px; }
.mh-meta { font-size: 13px; margin: 7px 0; color: var(--ink-500); }
.mh-actions { flex: 0 0 auto; }
.merchant-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
.merchant-name-lg { font-size: 16px; font-weight: 600; display: block; margin-bottom: 7px; color: var(--ink-900); }
.merchant-facts { list-style: none; padding: 0; margin: 11px 0; font-size: 13px; }
.merchant-facts li { padding: 5px 0; color: var(--ink-700); }
.merchant-facts b { color: var(--ink-400); font-weight: 400; display: inline-block; width: 60px; }

.cert-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.cert-list li {
  padding: 7px 0; border-bottom: 1px dashed #F0F4F7;
  display: flex; align-items: center; gap: 7px; color: var(--ink-700);
}
.cert-list li:last-child { border-bottom: none; }
.cert-list .ok {
  color: #fff; background: var(--success); width: 15px; height: 15px;
  border-radius: 50%; font-size: 10px; text-align: center; line-height: 15px;
  flex: 0 0 auto;
}
.cert-list .no {
  color: var(--line-strong); width: 15px; text-align: center; flex: 0 0 auto;
}

/* ============================================================
   按供应商分组的报价列表（对齐盖德单品页结构）
   ============================================================ */
.supplier-blocks { display: flex; flex-direction: column; gap: 12px; }

.supplier-block {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
}
.supplier-block:hover { border-color: var(--brand-200); }

.sblock-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #F8FCFD 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.sblock-identity { min-width: 0; flex: 1; }
.sblock-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-900);
  margin-right: 8px;
}
.sblock-name:hover { color: var(--brand-700); }
.sblock-meta {
  font-size: 12px;
  color: var(--ink-400);
  margin-top: 4px;
}
.sblock-actions { display: flex; gap: 7px; flex: 0 0 auto; }

/* 供应商内的产品表格——密集排版，对齐盖德的列表密度 */
.sblock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.sblock-table th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-400);
  background: #FAFCFD;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.sblock-table td {
  padding: 9px 10px;
  border-bottom: 1px solid #F2F6F9;
  color: var(--ink-700);
  vertical-align: middle;
}
.sblock-table tr:last-child td { border-bottom: none; }
.sblock-table tbody tr { transition: background-color .14s; }
.sblock-table tbody tr:hover { background: var(--brand-50); }
.sblock-table .col-name { min-width: 200px; }
.sblock-table .col-name a { color: var(--ink-900); }
.sblock-table .col-name a:hover { color: var(--brand-700); }
.cell-sub {
  display: block;
  font-size: 11px;
  color: var(--ink-400);
  margin-top: 2px;
}
.cell-empty { color: var(--line-strong); }
.cell-price { white-space: nowrap; }
.cell-price b { color: var(--price); font-weight: 700; font-size: 13.5px; }
/* 「电议」同样用红色：按业务要求，标价位统一红色。
   字号略小、字重略轻，与有具体金额的报价保留一点层级差异。 */
.cell-price b.neg { color: var(--price); font-weight: 500; font-size: 12.5px; }
.cell-price i { font-style: normal; font-size: 11px; color: var(--ink-400); }

/* ============================================================
   单品页头部概览 + 快速筛选复选框（对齐盖德）
   ============================================================ */
.supplier-summary {
  font-size: 13px;
  color: var(--ink-500);
  margin-bottom: 10px;
}
.supplier-summary b { color: var(--price); font-size: 15px; font-weight: 700; }

.quick-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #FAFCFD;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
}
.qf-label { color: var(--ink-400); flex: 0 0 auto; }
.qf-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink-500);
  transition: all .14s;
}
.qf-item:hover { border-color: var(--brand); color: var(--brand-700); text-decoration: none; }
.qf-item.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 500;
}

/* ---------------------------------------------------------- 响应式 */

@media (max-width: 900px) {
  .sblock-table { display: block; overflow-x: auto; white-space: nowrap; }
}
.detail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.detail-table th {
  text-align: left; font-weight: 400; color: var(--ink-400);
  padding: 8px 10px 8px 0; width: 94px; vertical-align: top;
  border-bottom: 1px dashed #F0F4F7;
}
.detail-table td { padding: 8px 0; border-bottom: 1px dashed #F0F4F7; color: var(--ink-700); }
.detail-table tr:last-child th, .detail-table tr:last-child td { border-bottom: none; }
.detail-table .price-strong { color: var(--price); font-size: 19px; font-weight: 700; }

.offer-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }

/* ============================================================
   分类页
   ============================================================ */
/* 子分类导航：胶囊按钮。上间距由 .page-head 的 margin-bottom 提供，
   这里只留下间距，避免出现 18 + 12 = 30px 的双重空隙。 */
.subcat-nav { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin-bottom: 12px; }
.subcat-nav a {
  padding: 5px 14px; background: #fff; border: 1px solid var(--line);
  border-radius: 15px; font-size: 13px; color: var(--ink-500);
  transition: all .14s;
}
.subcat-nav a:hover {
  border-color: var(--brand); color: var(--brand-700);
  background: var(--brand-50); text-decoration: none;
}
/* 注：产品目录的分类索引已改为「楼层」范式，见上面「化合物卡片」一节之后的
   「产品目录：楼层式分类索引」。 */
.category-tags { display: flex; flex-wrap: wrap; gap: 9px; }
.category-tag {
  padding: 7px 15px; background: #F7FAFB; border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 13px; color: var(--ink-700);
  transition: all .14s;
}
.category-tag:hover {
  border-color: var(--brand); color: var(--brand-700);
  background: var(--brand-50); text-decoration: none;
}

/* ============================================================
   地区导航
   ============================================================ */
.region-nav { display: flex; flex-wrap: wrap; gap: 6px 15px; padding: 13px 0; font-size: 13px; }
.region-nav a {
  color: var(--ink-500); padding: 2px 0;
  border-bottom: 2px solid transparent; transition: all .14s;
}
.region-nav a:hover { color: var(--brand-700); }
.region-nav a.active { color: var(--brand-700); font-weight: 600; border-bottom-color: var(--brand); }
.region-nav .cnt, .region-tag .cnt { color: var(--ink-400); font-size: 12px; }
.region-tags { display: flex; flex-wrap: wrap; gap: 7px 15px; font-size: 13px; }
.region-tag { color: var(--ink-500); }
.region-tag:hover { color: var(--brand-700); }

/* ============================================================
   询价页
   ============================================================ */
.inquiry-layout { display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: 14px; }
.context-banner {
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-left: 3px solid var(--brand);
  padding: 11px 15px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-size: 14px;
}
.form-actions {
  display: flex; align-items: center; gap: 15px;
  padding-top: 8px; border-top: 1px solid var(--line);
}
.benefit-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.benefit-list li {
  padding: 7px 0 7px 22px; position: relative; color: var(--ink-500);
}
.benefit-list li::before {
  content: "✓"; position: absolute; left: 0; top: 7px;
  width: 15px; height: 15px; line-height: 15px; text-align: center;
  background: var(--success-bg); color: var(--success);
  border-radius: 50%; font-size: 10px; font-weight: 700;
}
.phone-lg { font-size: 21px; font-weight: 700; color: var(--accent-600); margin: 5px 0 0; }

/* ============================================================
   成功页
   ============================================================ */
.success-page { text-align: center; padding: 52px 20px; }
.success-icon {
  width: 60px; height: 60px; line-height: 60px; margin: 0 auto 18px;
  background: var(--success-bg); color: var(--success);
  border-radius: 50%; font-size: 30px; font-weight: 700;
}
.success-actions { display: flex; gap: 11px; justify-content: center; margin: 24px 0 14px; flex-wrap: wrap; }

/* ============================================================
   联系页
   ============================================================ */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: 14px; }
.contact-list { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.contact-list li {
  display: flex; padding: 10px 0; border-bottom: 1px dashed #F0F4F7;
}
.contact-list li:last-child { border-bottom: none; }
.contact-list b { flex: 0 0 104px; color: var(--ink-400); font-weight: 400; }

/* ============================================================
   富文本 / 求购列表
   ============================================================ */
.rich-text { font-size: 14px; line-height: 1.9; color: var(--ink-500); }
.rich-text h2, .rich-text h3 { color: var(--ink-900); margin-top: 20px; }
.rich-text ul { padding-left: 20px; }

.inquiry-list { font-size: 13px; }
.inquiry-item { padding: 9px 0; border-bottom: 1px dashed #F0F4F7; }
.inquiry-item:last-of-type { border-bottom: none; }
.inq-name { font-weight: 500; color: var(--ink-700); }
.inq-meta { margin-top: 3px; color: var(--ink-400); }

/* ============================================================
   HTMX 加载态
   ============================================================ */
.is-loading { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1180px) {
  .portal-layout { grid-template-columns: 184px minmax(0, 1fr); }
  .rail-right { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); }
  .compound-layout, .merchant-layout, .offer-detail-layout,
  .inquiry-layout, .contact-layout { grid-template-columns: 1fr; }
  /* 折叠成单列还不够：flex/grid 子项默认 min-width:auto，
     列宽仍会被内容顶住（实测企业页在 390px 下卡在 716px）。
     和 .compound-layout 同一修法。 */
  .merchant-layout > *, .offer-detail-layout > *,
  .inquiry-layout > *, .contact-layout > * { min-width: 0; }
  .floor-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .floor-col:nth-child(4) { border-right: none; }
}
@media (max-width: 860px) {
  .portal-layout { grid-template-columns: 1fr; }
  /* min-width: 0 让列可以被压缩。
     实测（390px 视口）页面宽 535px、内部各元素统一 519px ——
     不是谁设了宽，而是 `1fr` 等价于 `minmax(auto, 1fr)`，
     `auto` 的最小尺寸取内容固有宽度，列因此缩不下去，
     整页可以左右晃。这行是 grid/flex 溢出的标准修法。 */
  .portal-layout > * { min-width: 0; }
  .carousel-track, .carousel-slide, .supplier-strip,
  .rail-nav, .quick-buy, .quick-panel { min-width: 0; max-width: 100%; }
  .rail-left { order: 2; position: static; }
  .portal-center { order: 1; }
  .rail-right { order: 3; grid-template-columns: 1fr; }
  .hero-strip { flex-direction: column; align-items: flex-start; }
  .hero-strip-stats { width: 100%; justify-content: space-around; }
  .hero-strip-search { max-width: none; width: 100%; }
  .floor-body { grid-template-columns: 1fr; }
  .floor-side { border-left: none; border-top: 1px solid var(--line); }
  .floor-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .floor-col:nth-child(3n) { border-right: none; }
  .link-list.two-col { columns: 1; }
}
@media (max-width: 720px) {
  .offer-card { grid-template-columns: 1fr; gap: 12px; }
  .offer-side {
    border-left: none; padding-left: 0;
    border-top: 1px dashed var(--line); padding-top: 12px;
  }
  .compound-meta { flex-direction: column; }
  .facet-row { flex-direction: column; }
  .facet-label { flex: none; border-right: none; border-bottom: 1px solid var(--line); }
  .page-info { margin-left: 0; width: 100%; }
  .floor-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; }
  .floor-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .floor-col:nth-child(2n) { border-right: none; }
  .floor-title { font-size: 17px; }
}

/* ---------------------------------------------------------- 企业主页：信任要素 */
/* 证照图入口：审核时看的其实是这张图，给一个明确的查看入口而不是只显示"已登记" */
.cert-view {
  margin-left: 6px;
  font-size: 12px;
  color: var(--brand-700);
  border-bottom: 1px dashed currentColor;
}
.cert-view:hover { color: var(--brand); }
.cert-list .muted { color: var(--ink-400); }

/* 主要供应类目：从该企业报价里聚合出来的真实类目，比空的"主营产品"有用 */
.biz-cats { margin-top: 10px; }
.biz-cats .tag {
  display: inline-block;
  margin: 6px 6px 0 0;
  padding: 3px 9px;
  font-size: 12px;
  background: var(--brand-50, #eef6fd);
  color: var(--brand-700);
  border-radius: 3px;
}
.biz-cats .tag:hover { background: #e2eefb; }
.biz-cats .tag .muted { color: var(--ink-400); margin-left: 2px; }

/* 注意：不要在这里重定义 .btn-block —— base.css 已有
   `.btn-block { display: flex; width: 100% }`，它保留了 .btn 的
   `align-items: center` 垂直居中。此前在这里写了 `display: block`
   把它盖掉，导致全站所有 .btn-block 按钮的文字贴到顶部。
   需要额外间距时用作用域选择器，别动通用规则。 */
.merchant-side .btn-block { margin-top: 12px; }

/* ---------------------------------------------------------- 收藏 / 关注按钮
   买家账号的收藏与关注接口早就有了，但页面上一直没有入口 —— 功能存在却不可达
   等于没做。按钮放在单品页（收藏产品）与企业页（关注企业）的显著位置。 */
.fav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.fav-row .fav-icon { margin-right: 2px; color: var(--ink-400); }
.fav-row .btn.is-on {
  border-color: var(--price);
  color: var(--price);
  background: #fff6f1;
}
.fav-row .btn.is-on .fav-icon { color: var(--price); }

/* ============================================================
   站点地图（/sitemap/）
   ============================================================ */
.sitemap-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
/* 产品分类条目多，占满整行 */
.sitemap-wide { grid-column: 1 / -1; }
.sitemap-sub { margin-top: 16px; }
.sitemap-list { margin: 0; padding: 0; list-style: none; }
.sitemap-list li {
  padding: 7px 0;
  border-bottom: 1px dashed #F0F4F7;
  font-size: 13px;
}
.sitemap-list li:last-child { border-bottom: none; }
.sitemap-list a { color: var(--brand-700); font-weight: 500; }
.sitemap-list a:hover { color: var(--brand); }
.sitemap-list .muted { margin-left: 6px; }
.sitemap-inline { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.sitemap-inline li { border-bottom: none; padding: 5px 0; }

/* 产品分类：多列紧凑排布 */
.sitemap-cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px;
}
.sitemap-cat-name { font-size: 13px; font-weight: 600; color: var(--ink-900); }
.sitemap-cat-name:hover { color: var(--brand-700); }
.sitemap-kids { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.sitemap-kids a {
  font-size: 12px; color: var(--ink-500); line-height: 1.5;
}
.sitemap-kids a:hover { color: var(--brand-700); }

@media (max-width: 860px) {
  .sitemap-grid { grid-template-columns: 1fr; }
  .sitemap-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}