/* ============================================================
   掌上化工 —— 基础样式与设计系统
   ============================================================

   配色取自品牌 Logo 的实际像素采样：
       青 #10B0C0  —— 主色（导航、链接、主按钮、聚焦态）
       橙 #E89810  —— 搭配色（价格、询价 CTA、热门/优选标记）

   为什么青做主色、橙做搭配：
       青色是冷色，大面积铺开不刺眼，适合做导航与信息骨架；
       橙色是暖色，视觉优先级高，用在价格和「立即询价」这类
       需要被一眼抓到的转化点上，符合化工 B2B 的决策路径。

   设计取舍：
       * 不引入 Tailwind / Sass。C 端 SEO 页面追求首屏最快与部署最简，
         多一条 Node 构建链就多一处生产故障点。
       * 用 CSS 自定义属性组织所有设计令牌，改主题只改 :root 一处。
       * 层级用「边框 + 极浅阴影」，不用重投影，保证信息密集时依然清爽。
   ============================================================ */

:root {
  /* ---------- 主色：盖德化工网同色系 ----------
     色值取自盖德实际样式表（china.guidechem.com/css/base_top_bottom_layout_.css）：
         主色 #189aed（悬停/当前 #0082d5）  强调/价格 #ff5e0d
         标题链接 #007bc9                   边框 #e5e5e5
     按需求「整个系统的板块颜色和按钮颜色参考盖德网」，主色由品牌青
     #10B0C0 改为盖德的蓝 #189AED。

     ⚠️ 注意：站点 Logo（static/img/logo.png / logo-sm.png）是青+橙的，
     主色改蓝之后 Logo 的青色会和导航/按钮对不上。要么把 Logo 也改成蓝色系，
     要么把下面三个值改回品牌青（#10B0C0 / #0D98A6 / #0A7C88）—— 
     全站所有组件都只引用这三个变量，改一处即全站生效。 */
  --brand-50:  #F0F8FF;
  --brand-100: #E1F1FD;
  --brand-200: #B9DEFA;
  --brand:     #189AED;
  /* 主色的 RGB 分量。阴影/光圈一律写成 rgba(var(--brand-rgb), α)，
     不要再硬编码颜色 —— 本文件顶部记着一次教训：品牌色从青 #10B0C0
     换成蓝 #189AED 时，6 处硬编码的青色阴影被漏掉了，
     结果按钮长期是「蓝底 + 青影」。挂成变量后换色只需改这一行。 */
  --brand-rgb: 24, 154, 237;   /* #189AED */   /* 主色（盖德同色） */
  --brand-600: #0082D5;   /* hover */
  --brand-700: #007BC9;   /* active / 标题链接 */
  --brand-800: #005E9B;
  --brand-light: #E1F1FD;

  /* ---------- 搭配色：橙 ---------- */
  --accent-50:  #FEF9EE;
  --accent-100: #FDF1DA;
  --accent:     #E89810;   /* 价格 / CTA */
  --accent-600: #C67F0A;
  --accent-700: #A26808;
  --accent-light: #FDF1DA;

  /* ---------- 价格色：红 ----------
     中文电商标价惯例用红，识别度最高。
     与品牌橙 --accent 分工：橙做按钮/徽章（可点击），红只做价格数字。
     色值对齐盖德（它的价格与「直通车」徽章都是 #ff5e0d）。 */
  --price: #FF5E0D;
  --price-600: #E54D00;

  /* ---------- 功能色 ---------- */
  --success: #12A150;
  --success-bg: #ECFDF3;
  --danger: #DC2626;
  --danger-bg: #FEF2F2;
  --info: #2563EB;
  --info-bg: #EFF6FF;

  /* ---------- 中性色 ---------- */
  --ink-900: #16202A;
  --ink-700: #364554;
  --ink-500: #64748B;
  --ink-400: #94A3B8;
  --line: #E4EAF0;
  --line-strong: #CBD5E1;
  --bg: #F4F7F9;
  --bg-card: #FFFFFF;

  /* 兼容旧变量名，避免模板/组件大范围改动 */
  --text: var(--ink-900);
  --text-sub: var(--ink-500);
  --muted: var(--ink-400);
  --border: var(--line);
  --border-strong: var(--line-strong);

  /* ---------- 圆角 ---------- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;

  /* ---------- 阴影：层级越高越柔 ---------- */
  --shadow-xs: 0 1px 2px rgba(16, 32, 48, .04);
  --shadow-sm: 0 1px 3px rgba(16, 32, 48, .06), 0 1px 2px rgba(16, 32, 48, .04);
  --shadow-md: 0 4px 12px rgba(16, 32, 48, .07);
  --shadow-lg: 0 8px 28px rgba(16, 32, 48, .10);
  /* 旧名兼容 */
  --shadow: var(--shadow-xs);

  /* 容器宽度对齐盖德实测值 1200px。
     这样首页三栏 200 + 680 + 292 + 2×14 间距 = 1200，轮播 680 宽正好卡进中栏。 */
  --container: 1200px;

  /* 顶层区块之间的统一间距。
     背景：以前每个块的间距是各自 padding / margin 拼出来的，结果「首屏栅格 →
     资讯」和「产品目录的分类入口 → 全部化合物」两处实际为 0px —— 两块面板
     直接贴在一起。顶层容器统一引用这个值，间距才有单一来源。 */
  --block-gap: 18px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-900);
  font: 14px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-700); text-decoration: none; transition: color .15s; }
a:hover { color: var(--brand); }

h1, h2, h3, h4 { margin: 0 0 .6em; font-weight: 600; line-height: 1.4; color: var(--ink-900); }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 .8em; }

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

.muted { color: var(--ink-400); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, Consolas, Monaco, "Courier New", monospace; }
.strong { font-weight: 600; }
.req { color: var(--danger); margin-left: 2px; }
.divider { height: 1px; background: var(--line); margin: 14px 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

main.container { padding-top: 14px; padding-bottom: 36px; }

/* ============================================================
   顶部工具条
   ============================================================ */
.topbar {
  background: #EFF3F6;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-500);
}
.topbar-inner { display: flex; justify-content: space-between; align-items: center; height: 34px; }
.topbar a { color: var(--ink-500); margin-left: 14px; }
.topbar a:hover { color: var(--brand-700); }
.topbar-left a { margin: 0 0 0 10px; }

/* ============================================================
   页头
   ============================================================ */
.site-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 18px; padding: 12px 16px; }

.logo { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.logo img { max-height: 50px; width: auto; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1.25; }
.logo-mark { font-size: 23px; font-weight: 700; color: var(--brand-700); letter-spacing: .5px; }
.logo-sub { font-size: 11px; color: var(--ink-400); letter-spacing: 1.5px; }

/* ---------- 搜索区 ---------- */
.search-wrap {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 660px;
  display: flex;
  flex-direction: column;
}
.search-tabs { display: flex; gap: 2px; }
.search-tab {
  padding: 5px 14px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink-500);
  background: #F4F7F9;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: all .15s;
}
.search-tab:hover:not(:disabled) { color: var(--brand-700); background: var(--brand-50); }
.search-tab.active {
  color: #fff;
  font-weight: 500;
  background: var(--brand);
  border-color: var(--brand);
}
.search-tab:disabled { color: var(--ink-400); opacity: .55; cursor: not-allowed; }

.search-box { display: flex; width: 100%; }
.search-box input {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border: 2px solid var(--brand);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: box-shadow .15s;
}
.search-box input:focus { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14); }
.search-box button {
  height: 40px;
  padding: 0 26px;
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  font-family: inherit;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  transition: background-color .15s;
}
.search-box button:hover { background: var(--brand-600); }

.header-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* ============================================================
   主导航
   ============================================================ */
.main-nav {
  background: linear-gradient(180deg, #13B9C9 0%, var(--brand) 55%, #0EA2B0 100%);
  box-shadow: 0 1px 3px rgba(10, 124, 136, .22);
}
.nav-inner { display: flex; flex-wrap: wrap; align-items: center; }
.nav-item {
  position: relative;
  display: block;
  padding: 11px 17px;
  color: rgba(255, 255, 255, .95);
  font-size: 15px;
  transition: background-color .15s;
}
.nav-item:hover { background: rgba(0, 0, 0, .13); color: #fff; }
.nav-item.active { background: rgba(0, 0, 0, .18); color: #fff; font-weight: 500; }
.nav-item.active::after {
  content: ""; position: absolute; left: 17px; right: 17px; bottom: 5px;
  height: 2px; background: var(--accent); border-radius: 2px;
}

/* ============================================================
   面包屑
   ============================================================ */
.breadcrumb { font-size: 13px; color: var(--ink-500); padding: 12px 0 0; }
.breadcrumb a { color: var(--ink-500); }
.breadcrumb a:hover { color: var(--brand-700); }
.breadcrumb .sep { margin: 0 7px; color: var(--line-strong); }
.breadcrumb .current { color: var(--ink-900); }

/* ============================================================
   面板 / 卡片
   ============================================================ */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-xs);
}
.panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  padding-bottom: 11px;
  margin-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
/* 标题前的品牌色竖条——全站统一的视觉锚点 */
.panel-title > span:first-child,
.panel-title:not(:has(> span)) {
  position: relative;
}
.panel-title { padding-left: 11px; position: relative; }
.panel-title::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 3px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-700) 100%);
}
.more { font-size: 12.5px; font-weight: 400; color: var(--ink-400); }
.more:hover { color: var(--brand-700); }

/* 页头（标题 + 描述）与下方内容之间的间距统一走 --block-gap。
   以前是靠 padding-bottom 顶出来的 12px，且下方容器没有 margin，
   元素盒子实际相邻，间距没有单一来源。 */
.page-head { padding: 16px 0 0; margin-bottom: var(--block-gap); }
.page-head h1 { margin-bottom: 4px; }
.page-desc { color: var(--ink-500); margin: 0; }
.page-h1 { font-size: 20px; margin-bottom: 6px; }

/* ------------------------------------------------------------
   img 安全网
   ------------------------------------------------------------
   全站原来没有图片通用约束，只有 .cover-box img / .offer-thumb img 等
   逐个类加 max-width —— **漏一个类就撑破一次布局**。实测已因此出过两次：
   /news/ 被 1920px 缩略图撑到 2113px、单品页在 390px 下溢出 328px。

   这条不会改变"本来就该缩放"的图片，只保证图片不超出容器。
   凡是需要图片比容器更大的场景（全屏 banner 之类），单独覆盖即可。
   ------------------------------------------------------------ */
img { max-width: 100%; height: auto; }

/* ============================================================
   按钮
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s;
}
.btn:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-50); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .28); }

.btn-primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: 0 1px 2px rgba(var(--brand-rgb), .28);
}
.btn-primary:hover {
  background: var(--brand-600); border-color: var(--brand-600); color: #fff;
  box-shadow: 0 3px 10px rgba(var(--brand-rgb), .32);
}

/* 橙色 CTA：用在「立即询价」这类转化点，与青色骨架形成对比 */
.btn-accent {
  background: linear-gradient(180deg, #F0A31C 0%, var(--accent) 100%);
  border-color: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(232, 152, 16, .32);
}
.btn-accent:hover {
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-600) 100%);
  border-color: var(--accent-600); color: #fff;
  box-shadow: 0 3px 10px rgba(232, 152, 16, .36);
}

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

.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink-500); }
.btn-ghost:hover { background: #fff; border-color: var(--brand); color: var(--brand-700); }

.btn-dark { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.btn-dark:hover { background: #0C141C; border-color: #0C141C; color: #fff; }

.btn-sm { height: 28px; padding: 0 12px; font-size: 12.5px; }
.btn-lg { height: 42px; padding: 0 28px; font-size: 15px; }
.btn-block { display: flex; width: 100%; }

/* ============================================================
   标签 / 徽章
   ============================================================ */
.tag {
  display: inline-block;
  padding: 1px 8px;
  margin: 0 4px 4px 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--ink-500);
}

.badge-group { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }
.badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.7;
  white-space: nowrap;
}
/* 执照已核验：平台审核商家时核对过营业执照。
   措辞是「核验」不是「认证」——平台核对主体与执照，
   不颁发资质证书，用词要经得起追问。 */
.badge-license { background: #EAF7F0; color: #1B7A4B; border: 1px solid #BFE7D2; }
.badge-vip { background: var(--accent-100); color: var(--accent-700); border: 1px solid #F5DFAE; }
.badge-hazard { background: var(--danger-bg); color: var(--danger); border: 1px solid #FBD5D5; }
.badge-factory { background: var(--success-bg); color: var(--success); border: 1px solid #BBF0D0; }
.badge-iso { background: var(--info-bg); color: var(--info); border: 1px solid #CFE0FD; }
.badge-gmp { background: #F5F3FF; color: #6D28D9; border: 1px solid #DDD6FE; }
.badge-reagent { background: var(--brand-100); color: var(--brand-800); border: 1px solid var(--brand-200); }
.badge-recommend { background: var(--accent); color: #fff; border: none; }

/* ============================================================
   表单
   ============================================================ */
input[type=text], input[type=search], input[type=tel], input[type=email],
input[type=number], input[type=password], select, textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink-900);
  background: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .14);
}
textarea { resize: vertical; min-height: 76px; }
.input-sm { width: auto; padding: 5px 9px; font-size: 13px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; }
.form-field.span-2 { grid-column: span 2; }
.form-field label { display: block; margin-bottom: 5px; font-size: 13px; color: var(--ink-500); }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .10);
}
.field-error { color: var(--danger); font-size: 12px; margin-top: 4px; }
.field-help { margin-top: 4px; }

fieldset { border: none; padding: 0; margin: 0 0 20px; }
legend {
  font-size: 15px;
  font-weight: 600;
  padding: 0 0 9px;
  margin-bottom: 13px;
  border-bottom: 1px solid var(--line);
  width: 100%;
}

/* 蜜罐：绝对定位移出视口。不用 display:none ——
   部分机器人会跳过 display:none 的字段，那样就失去防护意义。 */
.honeypot {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ============================================================
   提示条
   ============================================================ */
.alert {
  padding: 11px 14px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 13px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.alert-error { background: var(--danger-bg); border: 1px solid #FBD5D5; color: #991B1B; }
.notice {
  background: var(--accent-50);
  border: 1px solid var(--accent-100);
  border-left: 3px solid var(--accent);
  color: var(--accent-700);
  padding: 9px 13px;
  border-radius: var(--radius);
  font-size: 13px;
  margin-bottom: 13px;
}

/* ============================================================
   页脚
   ============================================================ */
.site-footer { background: #1B242E; color: #93A1B0; margin-top: 36px; font-size: 13px; }
.footer-inner {
  display: grid;
  /* 5 列：品牌+联系方式 / 关注我们（二维码）/ 产品分类 / 关于平台 / 商家服务。
     加二维码那一列时这里必须一起改 —— 漏改的后果实测是第 5 个块被折到第二行，
     宽度还跟第一列一样（看着像"商家服务"被塞进了品牌栏下面）。 */
  grid-template-columns: minmax(230px, 1.6fr) auto repeat(3, minmax(0, 1fr));
  gap: 26px;
  padding: 30px 16px 22px;
}
.footer-col h4 { color: #fff; font-size: 14px; margin-bottom: 11px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 7px; }
.footer-col a { color: #93A1B0; }
.footer-col a:hover { color: var(--brand-200); }
.footer-contact li { color: #8494A5; }

/* ---------- 页脚二维码（微信客服 / 小程序） ----------
   为什么放页脚：悬浮窗在手机端是关掉的（没有 hover，且手机用户就在微信里，
   扫自己屏幕没意义），页脚两端都能看到，也方便访客保存或转发。

   图片给的是**正方形外框 + padding + object-fit: contain**：
   源图不一定是正方形（微信客服那张是 711×698），直接塞进方框会轻微变形；
   contain 保证整张图完整显示，留白由白色底托住，视觉上仍是一个白底方块。
   白底是必须的：二维码压在深色页脚上，不托白底会糊在一起扫不出来。 */
.footer-qrs {
  display: flex;
  gap: 16px;
}
.footer-qr {
  margin: 0;
  text-align: center;
}
.footer-qr img {
  display: block;
  width: 108px;
  height: 108px;
  object-fit: contain;
  padding: 6px;
  border-radius: 8px;
  background: #fff;
}
.footer-qr figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: #8494A5;
}
.footer-bottom {
  border-top: 1px solid #2A3542; padding: 13px 0; font-size: 12px; color: #75838F;
}
.footer-bottom .container { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-bottom a { color: #93A1B0; }
.footer-bottom a:hover { color: var(--brand-200); }

/* ============================================================
   空状态 / 错误页
   ============================================================ */
.empty-state { text-align: center; padding: 42px 20px; color: var(--ink-500); }
.empty-title { font-size: 15px; color: var(--ink-900); margin-bottom: 6px; font-weight: 500; }

.error-page { text-align: center; padding: 60px 20px; }
.error-code {
  font-size: 64px; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.error-actions { display: flex; gap: 10px; justify-content: center; margin: 22px 0; flex-wrap: wrap; }

/* ============================================================
   广告位（变现入口）
   ============================================================ */
.ad-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0 0; }
.ad-slot {
  height: 74px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(45deg, #FAFBFC, #FAFBFC 10px, #F5F8FA 10px, #F5F8FA 20px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-400); font-size: 12px;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1100px) {
  /* 5 列挤不下时先收成 3 列：品牌栏 + 关注我们 + 其余两栏换行 */
  .footer-inner { grid-template-columns: minmax(200px, 1.4fr) auto minmax(0, 1fr); }
  .footer-inner .footer-col--qr { grid-column: auto; }
}
@media (max-width: 960px) {
  .header-inner { flex-wrap: wrap; }
  .search-wrap { order: 3; flex-basis: 100%; max-width: none; }
  /* 窄屏页脚由多列变 2 列：二维码那一列占整行（不然 5 个块挤成 3 行很乱） */
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-inner .footer-col--qr { grid-column: 1 / -1; }
  .form-grid { grid-template-columns: 1fr; }
  .form-field.span-2 { grid-column: span 1; }
  .ad-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; }
  /* 单列时二维码别再占整行留白，跟着内容走 */
  .footer-inner .footer-col--qr { grid-column: auto; }
  .nav-item { padding: 9px 12px; font-size: 14px; }
  .logo-mark { font-size: 20px; }
}

/* 顶部搜索类型里「未开通」的标注：与其留一个点不动的 disabled tab，
   不如把状态写在看得见的地方 */
.tab-soon {
  font-size: 10px;
  margin-left: 2px;
  padding: 0 3px;
  border-radius: 2px;
  background: var(--brand-50, #eef6fd);
  color: var(--brand-700, #007bc9);
  vertical-align: 1px;
}