/* ==========================================================================
   fix-wide.css — 宽屏（≥1600px）统一对齐层  v2 (2026-09-27)
   问题（宽屏实测）：
     1) 各区块限宽不一致：卡片网格 1560px、区块标题 .section-head.split 1180px
        → 标题与卡片左右不齐，看起来"错位、散乱"
     2) .category-grid 用 auto-fit minmax(300px)：宽屏下变 5 列，
        7 个分类 = 5 + 2，第二行只剩 2 个很难看
     3) .hero-content 固定 760px、margin-left:0 → 文字全挤在左侧
   解决：统一容器宽度 + 显式列数 + hero 居中
   注意：媒体查询必须按宽度升序排列，否则低档规则会覆盖高档规则！
   ========================================================================== */

/* ---------- 0) 修正 dark theme 漏出的错误色块（filter-bar 标签）----------
   问题：theme-labtech.css（深色霓虹主题）给 .filter-bar a 硬写了
     background: rgba(17,26,41,0.85) 深海军蓝背景 + 深灰文字，
   而当前站是医疗浅色主题（theme-medtech），theme-medtech 又没有覆盖它，
   导致浅色页面上出现一排“深色块 + 低对比文字”的错色块。
   —— 2026-09-27 修复 ---------- */
html body .filter-bar a {
  background: #fff !important;
  border: 1px solid rgba(15, 58, 107, 0.18) !important;
  color: #123a6b !important;
  box-shadow: none !important;
}
html body .filter-bar a:hover {
  background: #eef5fd !important;
  border-color: #2f6bb5 !important;
  color: #123a6b !important;
}
html body .filter-bar a.active {
  background: #2f6bb5 !important;
  border-color: #2f6bb5 !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -4px rgba(47, 107, 181, 0.5) !important;
}

/* ---------- 0b) 修正 dark theme 漏出的错误色块（表单/表格/图说）----------
   同一根因：theme-labtech.css（深色霓虹主题）用 !important 硬写了深色背景，
   theme-medtech（浅色医疗主题）未覆盖，导致浅色页面上出现深色块。
   全站扫描发现位置：products 表格 td(135处) / about figcaption(5) /
   contact 表单(4) / account 登录(2) / tracking(1)。—— 2026-09-27 修复 ---------- */

/* 表单输入框（contact / account / tracking / cart / 报价表单等） */
html body input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
html body textarea,
html body select,
html body .quote-form input,
html body .quote-form textarea,
html body .quote-form select,
html body form input, html body form textarea, html body form select {
  background: #fff !important;
  color: #0c1f33 !important;
  border: 1px solid rgba(15, 58, 107, 0.22) !important;
}
html body input::placeholder,
html body textarea::placeholder,
html body .quote-form ::placeholder {
  color: #7a8ea6 !important;
  opacity: 1 !important;
}
html body input:focus,
html body textarea:focus,
html body select:focus,
html body .quote-form input:focus,
html body .quote-form textarea:focus {
  background: #fff !important;
  border-color: #2f6bb5 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(47, 107, 181, 0.15) !important;
}

/* 产品表格（products 页 compare-table / shelf-table 等）
   注意：theme-labtech 的 .compare-table td 权重(0,1,1) 高于 html body table td(0,0,3)，
   必须用同等或更高权重的选择器才能覆盖。 */
html body table,
html body table.compare-table,
html body table.shelf-table {
  background: #fff !important;
  color: #0c1f33 !important;
}
html body table th,
html body .compare-table th,
html body .shelf-table th {
  background: #eef5fd !important;
  color: #123a6b !important;
  border-color: rgba(15, 58, 107, 0.12) !important;
}
html body table td,
html body .compare-table td,
html body .shelf-table td {
  background: #fff !important;
  color: #1f2937 !important;
  border-color: rgba(15, 58, 107, 0.1) !important;
}
html body table tr:nth-child(even) td,
html body .compare-table tr:nth-child(even) td,
html body .shelf-table tr:nth-child(even) td {
  background: #f8fbfe !important;
}
html body table tr:hover td,
html body .compare-table tr:hover td,
html body .shelf-table tr:hover td {
  background: #eef5fd !important;
}

/* 图片说明（about 页 figcaption） */
html body figcaption {
  background: rgba(255, 255, 255, 0.94) !important;
  color: #0c1f33 !important;
}

/* ---------- 基准（≥1600px）：全部统一 1560px 居中 ---------- */
@media (min-width: 1600px) {
  /* 双栏 grid 区块（certifications / about）必须约束【区块本身】，
     而不是它的子列——否则每列会各自居中，整块贴边。 */
  .section.certifications,
  .section.about,
  .section.process,
  .section.quote-section,
  .detail-layout {
    max-width: 1560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* 单栏区块：约束直接子元素即可 */
  .section > *,
  .section-head,
  .section-head.split,
  .trust-strip,
  .stats,
  .category-grid,
  .coa-grid,
  .blog-grid,
  .info-columns,
  .footer-trust,
  .footer-topline,
  .footer-links,
  .footer-contact,
  .copyright,
  html body section.section .product-grid,
  html body section.section .category-grid,
  html body section.section .coa-grid,
  html body section.section .hero-content {
    max-width: 1560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* 非 split 标题保持窄栏更易读 */
  .section-head:not(.split) { max-width: 860px !important; }
  .section-head.split > p { max-width: 720px !important; }

  /* hero：内容块与正文容器同宽同左对齐（左边缘不靠，也不居中到左半区） */
  .hero-content {
    max-width: 1560px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }
  .hero-content > * { max-width: 780px !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* 分类卡：显式 4 列（7 个 = 4+3），彻底避开 5+2 */
  .category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .category-grid .category-card:last-child:nth-child(odd) { grid-column: auto !important; }

  /* 产品卡：6 列填满 */
  html body section.section .product-grid,
  .featured-products .product-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* ---------- 2K（≥1921px）：放宽到 1800px ---------- */
@media (min-width: 1921px) {
  .section.certifications,
  .section.about,
  .section.process,
  .section.quote-section,
  .detail-layout {
    max-width: 1800px !important;
  }
  .section > *,
  .section-head,
  .section-head.split,
  .trust-strip,
  .stats,
  .category-grid,
  .coa-grid,
  .blog-grid,
  .info-columns,
  .footer-trust,
  .footer-topline,
  .footer-links,
  .footer-contact,
  .copyright,
  html body section.section .product-grid,
  html body section.section .category-grid,
  html body section.section .coa-grid,
  html body section.section .hero-content {
    max-width: 1800px !important;
  }
  html { font-size: 17px; }
  .section-head > p,
  .category-card p,
  .product-card .card-body > p { font-size: 16px !important; }
}

/* ---------- 2.5K（≥2561px）：2200px ---------- */
@media (min-width: 2561px) {
  .section.certifications,
  .section.about,
  .section.process,
  .section.quote-section,
  .detail-layout {
    max-width: 2200px !important;
  }
  .section > *,
  .section-head,
  .section-head.split,
  .trust-strip,
  .stats,
  .category-grid,
  .coa-grid,
  .blog-grid,
  .info-columns,
  .footer-trust,
  .footer-topline,
  .footer-links,
  .footer-contact,
  .copyright,
  html body section.section .product-grid,
  html body section.section .category-grid,
  html body section.section .coa-grid,
  html body section.section .hero-content {
    max-width: 2200px !important;
  }
  html { font-size: 18px; }
}

/* ---------- 4K（≥3400px）：3200px ---------- */
@media (min-width: 3400px) {
  .section.certifications,
  .section.about,
  .section.process,
  .section.quote-section,
  .detail-layout {
    max-width: 3200px !important;
  }
  .section > *,
  .section-head,
  .section-head.split,
  .trust-strip,
  .stats,
  .category-grid,
  .coa-grid,
  .blog-grid,
  .info-columns,
  .footer-trust,
  .footer-topline,
  .footer-links,
  .footer-contact,
  .copyright,
  html body section.section .product-grid,
  html body section.section .category-grid,
  html body section.section .coa-grid,
  html body section.section .hero-content {
    max-width: 3200px !important;
  }
  html { font-size: 20px; }
}

/* =====================================================================
   2026-09-27  化合物 + 规格 选 COA 小组件（首页 / 产品页通用）
   ===================================================================== */
.cb-section .section-head { margin-bottom: 18px; }
.cb-widget {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.2fr);
  gap: 20px;
  align-items: center;
  background: #ffffff;
  border: 1px solid #d5e0ec;
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 6px 22px rgba(18, 58, 107, .06);
}
.cb-selects { display: flex; gap: 14px; }
.cb-selects label { flex: 1; display: block; font-size: 13px; color: #5a7290; font-weight: 600; }
.cb-selects select {
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  font-size: 15px;
  color: #0c1f33;
  background: #ffffff;
  border: 1px solid #c9d8e8;
  border-radius: 9px;
  outline: none;
}
.cb-selects select:focus { border-color: #2f6bb5; box-shadow: 0 0 0 3px rgba(47, 107, 181, .15); }
.cb-result { display: flex; gap: 14px; align-items: center; min-height: 96px; }
.cb-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 72px;
  height: 94px;
  border: 1px solid #c9d8e8;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  display: block;
}
.cb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-thumb .cb-zoom {
  position: absolute;
  right: 3px;
  bottom: 3px;
  background: rgba(18, 58, 107, .84);
  color: #fff;
  font-size: 11px;
  border-radius: 5px;
  padding: 1px 5px;
}
.cb-meta { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.cb-meta strong { font-size: 16px; color: #123a6b; }
.cb-meta span { font-size: 13px; color: #5a7290; }
.cb-meta .cb-issued { color: #8ba0b8; font-size: 12px; }
.cb-meta .cb-open { margin-top: 4px; font-size: 13px; font-weight: 600; color: #2f6bb5; text-decoration: none; }
.cb-meta .cb-open:hover { text-decoration: underline; }
.cb-none { color: #8a6d1a; background: #fffdf2; border: 1px solid #e8c96a; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
@media (max-width: 860px) {
  .cb-widget { grid-template-columns: 1fr; }
}