/* ============================================================
   JSEMI - common.css
   首页 Banner + 各内页（产品/新闻/关于/联系/样品/搜索）样式
   ============================================================ */

/* ===== 首页 Banner ===== */
.js-home-banner { position: relative; }
.js-banner-swiper { width: 100%; height: 560px; }
.js-banner-slide {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    position: relative;
}
.js-banner-slide::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(29,53,70,0.7) 0%, rgba(29,53,70,0.3) 60%, rgba(29,53,70,0.1) 100%);
}
.js-banner-content {
    position: relative; z-index: 2;
    height: 100%; display: flex; flex-direction: column; justify-content: center;
    color: #fff; max-width: 700px;
}
.js-banner-title { font-size: 44px; color: #fff; font-weight: 700; line-height: 1.25; margin-bottom: 18px; }
.js-banner-sub { font-size: 20px; color: rgba(255,255,255,0.9); margin-bottom: 30px; font-weight: 300; }
.js-banner-btn {
    display: inline-flex; align-items: center; gap: 8px;
    align-self: flex-start;
    padding: 12px 32px; background: var(--js-steel); color: #fff;
    border-radius: var(--js-radius); font-size: 15px; font-weight: 500;
    transition: var(--js-transition);
}
.js-banner-btn:hover { background: #fff; color: var(--js-navy); }
.js-banner-pagination .swiper-pagination-bullet {
    width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.5); opacity: 1;
    transition: var(--js-transition);
}
.js-banner-pagination .swiper-pagination-bullet-active { background: #fff; width: 50px; }

/* ===== 首页：产品分类入口 ===== */
.js-home-cat {
    display: block; background: #fff;
    border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
    padding: 40px 30px; text-align: center;
    transition: border-color 0.25s ease; position: relative; overflow: hidden;
}
/* hover 单一反馈：边框变色 + 顶部 datasheet 式高光线 */
.js-home-cat::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--js-steel); transform: scaleX(0); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); transform-origin: left;
}
.js-home-cat:hover,
.js-home-cat:focus-visible { border-color: var(--js-steel); }
.js-home-cat:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--js-focus-ring); }
.js-home-cat:hover::before,
.js-home-cat:focus-visible::before { transform: scaleX(1); }
.js-home-cat-icon {
    width: 90px; height: 90px; margin: 0 auto 20px;
    border-radius: 50%; background: var(--js-gray-bg);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.25s ease;
}
.js-home-cat-icon img { width: 50px; height: 50px; object-fit: contain; }
.js-home-cat-icon i { font-size: 38px; color: var(--js-steel); transition: color 0.25s ease; }
.js-home-cat:hover .js-home-cat-icon { background: var(--js-steel); }
.js-home-cat:hover .js-home-cat-icon i { color: #fff; }
.js-home-cat h3 { font-size: 20px; color: var(--js-navy); margin-bottom: 16px; }
.js-home-cat-sub { text-align: left; margin-bottom: 20px; }
/* 子项用前置短破折号替代圆点，去模板感、与 eyebrow 语言统一 */
.js-home-cat-sub li { font-size: 13px; color: var(--js-text-muted); padding: 4px 0; position: relative; padding-left: 14px; }
.js-home-cat-sub li::before { content: '–'; position: absolute; left: 0; top: 3px; color: var(--js-steel); }
.js-home-cat-more { font-size: 13px; color: var(--js-steel); font-weight: 500; }
.js-home-cat-more i { margin-left: 4px; transition: transform 0.25s ease; }
.js-home-cat:hover .js-home-cat-more i { transform: translateX(4px); }

/* ===== 首页：应用领域 ===== */
.js-home-app {
    display: block; border-radius: var(--js-radius-lg); overflow: hidden;
    aspect-ratio: 4 / 3; position: relative;
}
.js-home-app-img { width: 100%; height: 100%; position: relative; overflow: hidden; }
.js-home-app-img img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s ease; }
.js-home-app:hover .js-home-app-img img { filter: brightness(1.08); }
.js-home-app-mask {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(29,53,70,0.85) 0%, rgba(29,53,70,0.2) 60%, transparent 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    padding: 24px; color: #fff;
}
.js-home-app-mask i { font-size: 40px; margin-bottom: 12px; }
.js-home-app-mask h3 { color: #fff; font-size: 18px; }

/* ===== 首页：公司简介 ===== */
.js-home-about { background: var(--js-gray-bg); }
.js-home-about-flex { display: flex; align-items: center; gap: 60px; }
.js-home-about-img { flex: 1; border-radius: var(--js-radius-lg); overflow: hidden; box-shadow: var(--js-shadow); }
.js-home-about-img img { width: 100%; }
.js-home-about-text { flex: 1; }
.js-home-about-text .js-section-title { text-align: left; }
.js-home-about-text .js-section-tag::before { content: '— '; }
.js-home-about-content { margin: 24px 0 30px; color: var(--js-text-muted); line-height: 1.9; font-size: 15px; }

/* ===== 内页 Banner ===== */
.js-inner-banner {
    height: 280px; background-size: cover; background-position: center;
    position: relative; display: flex; align-items: center;
}
.js-inner-banner::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(29,53,70,0.8) 0%, rgba(29,53,70,0.4) 100%);
}
.js-inner-banner-inner,
.js-inner-banner-content { position: relative; z-index: 2; color: #fff; width: 100%; }
.js-inner-banner-inner h1,
.js-inner-banner-content h2 { color: #fff; font-size: 34px; margin-bottom: 8px; font-weight: 700; }
.js-inner-banner-inner p,
.js-inner-banner-content p { color: rgba(255,255,255,0.85); font-size: 15px; }

/* ===== 面包屑 ===== */
.js-breadcrumb {
    background: var(--js-gray-bg); padding: 14px 0; font-size: 13px;
    border-bottom: 1px solid var(--js-border);
}
.js-breadcrumb a { color: var(--js-text-muted); }
.js-breadcrumb a:hover { color: var(--js-steel); }
.js-breadcrumb .sep { margin: 0 8px; color: var(--js-text-light); }
.js-breadcrumb .current { color: var(--js-navy); font-weight: 500; }
.js-breadcrumb i { margin-right: 6px; }

/* ===== 产品列表：两栏布局 =====
   设计取向：datasheet 工业感。悬浮反馈克制——
   仅靠极淡底色 + 左侧 datasheet 高光线 + 型号链接转钢蓝，
   不再用整行灰底压白字（原方案牺牲可读性）。 */
.js-filter-wrap { display: flex; gap: 36px; padding: 48px 0 64px; align-items: flex-start; }
.js-filter-side { width: 256px; flex-shrink: 0; position: sticky; top: calc(var(--js-header-h) + 20px); }
.js-side-box {
    background: #fff; border: 1px solid var(--js-border);
    border-radius: var(--js-radius-lg); margin-bottom: 20px; overflow: hidden;
    box-shadow: var(--js-shadow);
}
.js-side-title {
    background: var(--js-navy); color: #fff;
    padding: 16px 20px; font-size: 15px; font-weight: 600;
    display: flex; align-items: center;
    letter-spacing: 0.3px;
}
/* 标题前小色块，呼应卡片 datasheet 高光线语言 */
.js-side-title span { position: relative; padding-left: 12px; }
.js-side-title span::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 14px; background: var(--js-steel-light); border-radius: 2px;
}
.js-cat-tree { padding: 10px 0; }
.js-cat-tree > li > a, .js-cat-sub a {
    display: flex; align-items: center;
    font-size: 14px; color: var(--js-text-2);
    border-left: 3px solid transparent; transition: var(--js-transition);
}
/* 一级分类：行内布局（名称 + 折叠角标） */
.js-cat-tree > li > a { padding: 11px 18px; justify-content: space-between; }
.js-cat-tree > li > a .js-cat-name { flex: 1; min-width: 0; }
.js-cat-tree .js-cat-ico { color: var(--js-text-light); font-size: 13px; transition: transform 0.25s ease; }
.js-cat-tree > li > a:hover .js-cat-ico { color: var(--js-steel); }
/* 二级分类：缩进 + 前置短破折号点（与全站 eyebrow 语言统一，去模板感） */
.js-cat-sub {
    background: var(--js-gray-light); padding: 4px 0;
    border-top: 1px solid var(--js-gray-bg);
}
.js-cat-sub a { font-size: 13px; padding: 8px 18px 8px 36px; color: var(--js-text-muted); position: relative; }
.js-cat-sub .js-cat-sub-dot {
    width: 5px; height: 5px; border-radius: 50%; background: var(--js-border);
    margin-right: 10px; flex-shrink: 0; transition: var(--js-transition);
}
/* 悬浮 / 选中：左侧 3px datasheet 高光线 + 钢蓝字 + 极淡底色 */
.js-cat-tree > li > a:hover, .js-cat-sub a:hover {
    background: var(--js-gray-light); color: var(--js-steel); border-left-color: var(--js-steel);
}
.js-cat-tree > li > a:hover .js-cat-sub-dot,
.js-cat-sub a:hover .js-cat-sub-dot { background: var(--js-steel); }
.js-cat-tree .active {
    background: var(--js-gray-light); color: var(--js-steel);
    border-left-color: var(--js-steel); font-weight: 600;
}
.js-cat-sub a.active { color: var(--js-navy); }
.js-cat-sub a.active .js-cat-sub-dot { background: var(--js-steel); }

.js-filter-main { flex: 1; min-width: 0; }
.js-filter-top {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    margin-bottom: 24px; flex-wrap: wrap;
}
/* 搜索框：图标内嵌 + focus 整框钢蓝描边 */
.js-filter-search { display: flex; flex: 1; max-width: 520px; position: relative; align-items: stretch; }
.js-filter-search-ico {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: var(--js-text-light); font-size: 14px; pointer-events: none; transition: var(--js-transition);
}
.js-filter-search input {
    flex: 1; padding: 12px 16px 12px 42px;
    border: 1px solid var(--js-border); border-right: none;
    border-radius: var(--js-radius) 0 0 var(--js-radius);
    outline: none; font-size: 14px; background: #fff; transition: var(--js-transition);
}
.js-filter-search input::placeholder { color: var(--js-text-light); }
.js-filter-search input:focus { border-color: var(--js-steel); }
.js-filter-search input:focus ~ .js-filter-search-ico,
.js-filter-search:focus-within .js-filter-search-ico { color: var(--js-steel); }
.js-filter-search button {
    padding: 0 26px; background: var(--js-steel); color: #fff;
    border-radius: 0 var(--js-radius) var(--js-radius) 0;
    font-size: 14px; font-weight: 500; transition: var(--js-transition);
}
.js-filter-search button:hover { background: var(--js-navy); }
/* 结果计数：编辑式 caption，数字用钢蓝强调 */
.js-filter-count { font-size: 13px; color: var(--js-text-muted); letter-spacing: 0.3px; }
.js-filter-count strong { color: var(--js-steel); font-size: 17px; font-weight: 700; margin: 0 3px; font-family: "MiSans", -apple-system, sans-serif; }

/* 产品规格表 — 列表页核心 */
.js-spec-table-wrap {
    border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
    overflow: hidden; box-shadow: var(--js-shadow); background: #fff;
}
/* table-layout: fixed —— 列宽由 <col>/<th> 统一决定，杜绝表头与正文列宽错位 */
.js-spec-table { width: 100%; border-collapse: collapse; background: #fff; table-layout: fixed; }
/* 固定列宽（百分比，配合 colgroup） */
.js-spec-table col.js-col-thumb  { width: 72px; }
.js-spec-table col.js-col-model  { width: 15%; }
.js-spec-table col.js-col-name   { width: 22%; }
.js-spec-table col.js-col-pkg    { width: 11%; }
.js-spec-table col.js-col-brief  { width: 22%; }
.js-spec-table col.js-col-pdf    { width: 8%; }
.js-spec-table col.js-col-action { width: 12%; }
/* 表头统一深海军蓝，不加竖向分隔线（否则头部会出现色块/割裂感） */
.js-spec-table thead th {
    background: var(--js-navy); color: #fff;
    padding: 15px 18px; font-size: 13px; font-weight: 600; text-align: left;
    letter-spacing: 0.3px; white-space: nowrap;
}
.js-spec-table thead th.col-model { padding-left: 24px; }
.js-spec-table thead th.col-thumb,
.js-spec-table thead th.col-pkg,
.js-spec-table thead th.col-pdf,
.js-spec-table thead th.col-action { text-align: center; }
.js-spec-table tbody td {
    padding: 16px; font-size: 13px; line-height: 1.5;
    border-bottom: 1px solid var(--js-gray-bg); vertical-align: middle;
    transition: background 0.2s ease, color 0.2s ease;
}
.js-spec-table tbody tr:last-child td { border-bottom: none; }
/* 行悬浮：克制反馈——极淡底色 + 型号列左缘 datasheet 高光线
   注意：不能用 tr::before，table 布局下伪元素会被当成匿名单元格，挤乱列对齐。
   改用首格左 border 做高光线，box-shadow 内描边实现。 */
.js-spec-table tbody tr:hover { background: var(--js-gray-light); }
.js-spec-table tbody tr:hover td.col-model {
    box-shadow: inset 3px 0 0 var(--js-steel);
}

/* 型号列：钢蓝描边 chip，高对比、强可读（避免型号列看起来发空） */
.js-spec-table .col-model { padding-left: 24px; }

.js-spec-table .col-thumb { text-align: center; vertical-align: middle; padding: 10px 8px; }
.js-prod-thumb {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 6px; overflow: hidden;
    border: 1px solid var(--js-border); background: var(--js-gray-light);
}
.js-prod-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.js-prod-thumb-ph {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; color: var(--js-text-light); font-size: 18px;
    border-radius: 6px; border: 1px dashed var(--js-border); background: #fff;
}
.js-prod-thumb:hover { border-color: var(--js-steel); }
.js-model-chip {
    display: inline-block; padding: 5px 12px;
    background: rgba(67, 124, 163, 0.08); color: var(--js-navy);
    border: 1px solid rgba(67, 124, 163, 0.35);
    border-radius: 4px; font-weight: 700; font-size: 13px;
    font-family: "SF Mono", "Consolas", "MiSans", "Microsoft YaHei", monospace;
    letter-spacing: 0.3px; white-space: nowrap; transition: var(--js-transition);
}
.js-model-chip:hover { background: var(--js-steel); border-color: var(--js-steel); color: #fff; }
/* 产品名称：默认深色，悬浮钢蓝；固定布局下允许换行，超出截断 */
.js-spec-table .col-name a { color: var(--js-text-2); display: block; }
.js-spec-table .col-name a:hover { color: var(--js-steel); }
/* 封装：灰色小标签风 */
.js-spec-table .col-pkg { color: var(--js-text-muted); text-align: center; white-space: nowrap; }
.js-spec-table .col-pkg .js-cell-empty { color: var(--js-text-light); }
/* 简介：固定列宽下允许换行，超出 2 行截断，避免撑高行 */
.js-spec-table .col-brief {
    color: var(--js-text-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.5;
}
.js-spec-table .col-brief { color: var(--js-text-muted); }
/* PDF 列居中；无 PDF 用破折号占位，避免空单元格 */
.js-spec-table .col-pdf { text-align: center; }
.js-spec-table .js-pdf-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    color: var(--js-red); font-size: 17px; transition: var(--js-transition);
}
.js-spec-table .js-pdf-link:hover { background: var(--js-red); color: #fff; transform: translateY(-1px); }
.js-spec-table .js-pdf-empty { color: var(--js-text-light); }
/* 操作列：样品申请按钮（描边风，悬浮实心，比旧版轻盈） */
.js-spec-table .col-action { text-align: center; }
.js-spec-table .js-row-sample {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; font-size: 12px; font-weight: 500;
    color: var(--js-steel); background: #fff;
    border: 1px solid var(--js-steel); border-radius: 30px;
    transition: var(--js-transition); white-space: nowrap;
}
.js-spec-table .js-row-sample i { font-size: 11px; }
.js-spec-table .js-row-sample:hover { background: var(--js-steel); color: #fff; }

/* 分页：与表格同语言（同圆角、同钢蓝激活态） */
.js-pagination { padding: 32px 0 8px; text-align: center; }
.js-pagination a, .js-pagination span {
    display: inline-block; min-width: 36px; height: 36px; line-height: 34px;
    padding: 0 12px; margin: 0 4px;
    border: 1px solid var(--js-border); border-radius: var(--js-radius);
    font-size: 13px; color: var(--js-text-2); background: #fff;
    transition: var(--js-transition);
}
.js-pagination a:hover { border-color: var(--js-steel); color: var(--js-steel); box-shadow: var(--js-shadow); }
.js-pagination .current { background: var(--js-steel); color: #fff; border-color: var(--js-steel); font-weight: 600; }
.js-pagination .disabled { color: var(--js-text-light); cursor: not-allowed; background: var(--js-gray-light); }

/* 空状态：更克制、更品牌化 */
.js-empty { padding: 90px 0; text-align: center; color: var(--js-text-light); }
.js-empty-ico {
    width: 84px; height: 84px; margin: 0 auto 22px;
    border-radius: 50%; background: var(--js-gray-bg);
    display: flex; align-items: center; justify-content: center;
}
.js-empty-ico i { font-size: 38px; margin: 0; color: var(--js-steel-light); }
.js-empty-text { font-size: 15px; letter-spacing: 0.3px; }

/* ===== 产品页内页 Banner 细化（产品页钩子 .js-inner-banner--products，不改共享基样式） =====
   在通用 .js-inner-banner 之上：叠加 eyebrow 小标签 + 微妙钢蓝渐变层，提升层级感 */
.js-inner-banner--products .js-inner-banner-content { padding-top: 4px; }
.js-inner-banner-tag {
    display: inline-block; font-size: 13px; font-weight: 600;
    color: #fff; letter-spacing: 1px; margin-bottom: 12px;
    padding: 4px 12px; border: 1px solid rgba(255,255,255,0.4);
    border-radius: 30px; text-transform: uppercase;
    background: rgba(255,255,255,0.08);
}
.js-inner-banner--products::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, var(--js-steel) 0%, var(--js-steel-dark) 100%);
    z-index: 2;
}

/* ===== 产品分类浏览（扬杰式多级导航） ===== */
.js-pcat-wrap { padding: 48px 0 72px; }
.js-pcat-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap; margin-bottom: 36px;
}
.js-pcat-title {
    font-size: 36px; font-weight: 700; color: var(--js-navy); margin: 0;
    letter-spacing: 0.5px;
}
.js-pcat-search {
    position: relative; display: flex; align-items: center;
    min-width: 280px; max-width: 420px; flex: 1;
}
.js-pcat-search i {
    position: absolute; left: 16px; color: var(--js-text-light); font-size: 15px; pointer-events: none;
}
.js-pcat-search input {
    width: 100%; height: 46px; padding: 0 18px 0 42px;
    border: 1px solid var(--js-border); border-radius: 30px;
    background: var(--js-gray-light); font-size: 14px; color: var(--js-text-2);
    transition: var(--js-transition);
}
.js-pcat-search input:focus {
    border-color: var(--js-steel); background: #fff;
    box-shadow: 0 0 0 3px var(--js-focus-ring); outline: none;
}
.js-pcat-search .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.js-pcat-l1 {
    display: flex; gap: 8px; flex-wrap: wrap;
    border-bottom: 1px solid var(--js-border); padding-bottom: 4px; margin-bottom: 28px;
}
.js-pcat-l1-item {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px 16px; color: var(--js-text-2); font-size: 16px; font-weight: 600;
    border-bottom: 3px solid transparent; margin-bottom: -5px;
    transition: var(--js-transition);
}
.js-pcat-l1-item:hover { color: var(--js-steel); }
.js-pcat-l1-item.active {
    color: var(--js-steel); border-bottom-color: var(--js-steel);
}
.js-pcat-l1-icon {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; background: var(--js-gray-bg); color: var(--js-steel); font-size: 18px;
    overflow: hidden; flex-shrink: 0;
}
.js-pcat-l1-item.active .js-pcat-l1-icon { background: rgba(67, 124, 163, 0.12); }
.js-pcat-l1-icon img { width: 100%; height: 100%; object-fit: cover; }

.js-pcat-l2 {
    display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px;
}
.js-pcat-l2-item {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 22px;
    border: 1px solid var(--js-border); border-radius: var(--js-radius);
    background: #fff; color: var(--js-text-2); font-size: 14px; font-weight: 500;
    transition: var(--js-transition);
}
.js-pcat-l2-item:hover {
    border-color: var(--js-steel); color: var(--js-steel);
}
.js-pcat-l2-item.active {
    border-color: var(--js-navy); background: var(--js-navy); color: #fff;
    box-shadow: var(--js-shadow);
}

.js-pcat-l3 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 28px 24px;
}
.js-pcat-l3-col.is-active .js-pcat-l3-head { color: var(--js-steel); }
.js-pcat-l3-head {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: var(--js-navy);
    margin-bottom: 14px; transition: var(--js-transition);
}
.js-pcat-l3-head i { font-size: 12px; color: var(--js-steel); }
.js-pcat-l3-head:hover { color: var(--js-steel); }
.js-pcat-l4 { display: flex; flex-direction: column; gap: 10px; }
.js-pcat-leaf {
    display: block; padding: 12px 16px;
    border: 1px solid var(--js-border); border-radius: var(--js-radius);
    background: #fff; color: var(--js-text-2); font-size: 13px; line-height: 1.4;
    transition: var(--js-transition);
}
.js-pcat-leaf:hover {
    border-color: var(--js-steel); color: var(--js-steel);
    box-shadow: 0 2px 10px rgba(29, 53, 70, 0.06);
}
.js-pcat-leaf--solo {
    font-size: 14px; font-weight: 600; padding: 16px 18px;
}
.js-pcat-leaf--all {
    color: var(--js-steel); border-style: dashed; font-size: 12px;
}
.js-pcat-empty { padding: 40px 0; text-align: center; }

/* ===== 产品列表（快速搜索 + 规格表） ===== */
.js-plist-wrap { padding: 36px 0 64px; }
.js-plist-title {
    font-size: 32px; font-weight: 700; color: var(--js-navy);
    margin: 0 0 28px; letter-spacing: 0.3px;
}
.js-plist-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}

.js-quick-search {
    background: #fff;
    border: 1px solid var(--js-border);
    border-radius: var(--js-radius-lg);
    box-shadow: var(--js-shadow);
    padding: 20px 24px 18px; margin-bottom: 24px;
}
.js-quick-search-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 14px;
}
.js-quick-search-head h3 {
    margin: 0; font-size: 17px; color: var(--js-navy); font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}
.js-quick-search-head h3::before {
    content: ''; width: 3px; height: 16px; border-radius: 2px;
    background: var(--js-steel); flex-shrink: 0;
}
.js-quick-search-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px 28px;
    max-height: 420px; overflow: auto;
    padding: 4px 0 8px;
}
.js-quick-col {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    min-width: 0;
    transition: none;
}
.js-quick-col:hover {
    border-color: transparent;
    box-shadow: none;
}
.js-quick-col-title {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 8px; margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid var(--js-border);
    font-size: 13px; font-weight: 700;
    color: var(--js-navy); line-height: 1.35;
}
.js-quick-col-name {
    flex: 1; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.js-quick-unit {
    flex-shrink: 0; font-style: normal; font-weight: 600;
    font-size: 11px; line-height: 1; color: var(--js-steel);
    background: rgba(67, 124, 163, 0.1);
    border-radius: 3px; padding: 4px 6px; margin-left: 0;
    letter-spacing: 0.2px;
}
.js-quick-col-list {
    max-height: 148px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
}
.js-quick-check {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px; color: var(--js-text-2); cursor: pointer;
    padding: 4px 6px; line-height: 1.35; border-radius: 4px;
    transition: background 0.15s ease;
}
.js-quick-check:hover { background: var(--js-gray-bg); }
.js-quick-check input {
    margin-top: 2px; flex-shrink: 0; accent-color: var(--js-steel);
}
.js-quick-check span { word-break: break-all; }
.js-quick-search-foot {
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--js-border);
}

/* 双滑块数值区间：输入框夹滑轨横排 */
.js-quick-col--range { min-width: 0; }
.js-range { padding-top: 2px; }
.js-range-row {
    display: flex; align-items: center; gap: 10px;
}
.js-range-sep { color: var(--js-text-light); font-weight: 400; }
.js-range-track {
    position: relative; flex: 1; min-width: 72px; height: 28px;
}
.js-range-track::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 4px; margin-top: -2px; border-radius: 999px;
    background: #E8EBEE; z-index: 0;
}
.js-range-fill {
    position: absolute; top: 50%; height: 4px; margin-top: -2px;
    border-radius: 999px;
    background: var(--js-steel);
    z-index: 1; pointer-events: none;
}
.js-range-input {
    position: absolute; left: 0; top: 50%; width: 100%; height: 4px;
    margin: 0; padding: 0; transform: translateY(-50%);
    -webkit-appearance: none; appearance: none;
    background: transparent; pointer-events: none; z-index: 2;
}
.js-range-input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
    background: #fff; border: 2px solid var(--js-steel);
    box-shadow: 0 1px 5px rgba(29, 53, 70, 0.22);
    cursor: grab; pointer-events: auto; position: relative; z-index: 3;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.js-range-input::-webkit-slider-thumb:hover {
    background: var(--js-steel);
    border-color: var(--js-steel);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(29, 53, 70, 0.3);
}
.js-range-input::-webkit-slider-thumb:active {
    cursor: grabbing; background: var(--js-steel);
}
.js-range-input::-moz-range-thumb {
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 2px solid var(--js-steel);
    box-shadow: 0 1px 5px rgba(29, 53, 70, 0.22);
    cursor: grab; pointer-events: auto;
}
.js-range-input::-webkit-slider-runnable-track {
    height: 4px; background: transparent;
}
.js-range-input::-moz-range-track {
    height: 4px; background: transparent; border: none;
}
.js-range-input--max { z-index: 3; }
.js-range-num {
    width: 68px; flex: 0 0 68px; height: 34px; padding: 0 8px;
    border: 1px solid var(--js-border); border-radius: 6px;
    font-size: 13px; font-weight: 600; color: var(--js-navy);
    text-align: center; background: #fff;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.js-range-num:hover { border-color: rgba(67, 124, 163, 0.55); }
.js-range-num:focus {
    border-color: var(--js-steel); outline: none;
    box-shadow: 0 0 0 3px var(--js-focus-ring);
}
.js-range-bounds { display: none; }
.js-quick-col--range.is-active .js-quick-col-title {
    border-bottom-color: rgba(67, 124, 163, 0.45);
}
.js-quick-col--range.is-active .js-range-num {
    border-color: rgba(67, 124, 163, 0.55);
    color: var(--js-steel);
}

.js-spec-table--params { table-layout: auto; }
.js-spec-table--params thead th {
    white-space: nowrap; font-size: 12px;
}
.js-spec-table--params tbody td {
    font-size: 13px; white-space: nowrap;
}
.js-spec-table--params .col-model { min-width: 120px; }

/* ===== 产品详情（扬杰式） ===== */
.js-pdetail-hero {
    background: var(--js-gray-bg);
    border-bottom: 1px solid var(--js-border);
    padding: 40px 0 48px;
}
.js-pdetail-hero-inner {
    display: flex; gap: 48px; align-items: flex-start;
}
.js-pdetail-gallery { flex: 0 0 420px; max-width: 100%; }
.js-pdetail-main-img {
    width: 100%; aspect-ratio: 4/3; background: #fff;
    border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.js-pdetail-main-img img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.js-pdetail-info { flex: 1; min-width: 0; padding-top: 8px; }
.js-pdetail-model {
    font-size: 34px; font-weight: 700; color: var(--js-steel);
    margin: 0 0 14px; letter-spacing: 0.5px;
}
.js-pdetail-badge {
    display: inline-block; font-size: 12px; font-weight: 600;
    color: var(--js-steel); background: rgba(67, 124, 163, 0.12);
    padding: 4px 12px; border-radius: 4px; margin-bottom: 14px;
}
.js-pdetail-title {
    font-size: 16px; color: var(--js-navy); font-weight: 600; margin: 0 0 10px;
}
.js-pdetail-intro {
    color: var(--js-text-muted); line-height: 1.7; margin: 0 0 22px; font-size: 14px;
}
.js-pdetail-meta { margin-bottom: 28px; }
.js-pdetail-meta-row {
    display: flex; gap: 8px; padding: 6px 0; font-size: 14px;
}
.js-pdetail-meta-row .lbl { color: var(--js-text-muted); flex-shrink: 0; }
.js-pdetail-meta-row .val { color: var(--js-text-2); font-weight: 500; }
.js-pdetail-meta-row .val a { color: var(--js-steel); }
.js-pdetail-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.js-pdetail-body { padding: 40px 0 72px; }
.js-pdetail-section { margin-bottom: 40px; }
.js-pdetail-section > h3 {
    font-size: 20px; color: var(--js-navy); margin: 0 0 18px;
    padding-bottom: 12px; border-bottom: 2px solid var(--js-navy);
    display: inline-block; min-width: 120px;
}
.js-pdetail-table-wrap {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--js-border); border-radius: var(--js-radius);
}
.js-pdetail-table {
    width: 100%; border-collapse: collapse; min-width: 640px; background: #fff;
}
.js-pdetail-table th {
    background: var(--js-gray-bg); color: var(--js-text-muted);
    font-size: 12px; font-weight: 600; text-align: left;
    padding: 12px 14px; white-space: nowrap; border-bottom: 1px solid var(--js-border);
}
.js-pdetail-table td {
    padding: 14px; font-size: 13px; color: var(--js-text-2);
    border-bottom: 1px solid var(--js-border); white-space: nowrap;
}
.js-pdetail-table tr:last-child td { border-bottom: none; }
.js-pdetail-table td.is-model,
.js-pdetail-table td.is-model a {
    color: var(--js-steel); font-weight: 600;
}
.js-pdetail-table td.is-model a:hover { text-decoration: underline; }
.js-pdetail-related .col-more { text-align: right; }
.js-pdetail-related .col-more a {
    color: var(--js-steel); font-size: 13px; white-space: nowrap;
}
.js-pdetail-related .col-more a:hover { color: var(--js-navy); }
.js-pdetail-package-img {
    max-width: 560px; padding: 20px; background: #fff;
    border: 1px solid var(--js-border); border-radius: var(--js-radius);
}
.js-pdetail-package-img img { max-width: 100%; height: auto; display: block; }

/* ===== 产品详情 ===== */
.js-prod-wrap { padding: 40px 0; }
.js-prod-top { display: flex; gap: 40px; margin-bottom: 40px; }
.js-prod-gallery { flex: 0 0 480px; }
.js-prod-main-img {
    width: 100%; aspect-ratio: 1; background: var(--js-gray-bg);
    border: 1px solid var(--js-border); border-radius: var(--js-radius); overflow: hidden;
}
.js-prod-main-img img { width: 100%; height: 100%; object-fit: contain; }
.js-prod-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.js-prod-thumb {
    width: 70px; height: 70px; border: 2px solid var(--js-border); border-radius: 4px;
    overflow: hidden; cursor: pointer; transition: var(--js-transition); background: #fff;
}
.js-prod-thumb img { width: 100%; height: 100%; object-fit: contain; }
.js-prod-thumb:hover, .js-prod-thumb.active { border-color: var(--js-steel); }

.js-prod-info { flex: 1; min-width: 0; }
.js-prod-info h1 { font-size: 26px; color: var(--js-navy); margin-bottom: 10px; }
.js-prod-model { font-size: 16px; color: var(--js-steel); font-weight: 600; margin-bottom: 16px; }
.js-prod-intro { color: var(--js-text-muted); line-height: 1.8; margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--js-border); }
.js-prod-params { margin-bottom: 24px; }
.js-prod-params .row { display: flex; padding: 8px 0; font-size: 14px; }
.js-prod-params .row .lbl { width: 120px; color: var(--js-text-muted); }
.js-prod-params .row .val { color: var(--js-text-2); font-weight: 500; }
.js-prod-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.js-prod-actions .js-btn-pdf { background: #fff; color: var(--js-red); border: 1px solid var(--js-red); }
.js-prod-actions .js-btn-pdf:hover { background: var(--js-red); color: #fff; }

.js-prod-section { margin-top: 40px; }
.js-prod-section h3 {
    font-size: 20px; color: var(--js-navy); margin-bottom: 20px;
    padding-left: 14px; border-left: 4px solid var(--js-steel);
}
.js-prod-specs { width: 100%; border-collapse: collapse; border: 1px solid var(--js-border); }
.js-prod-specs td { padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--js-gray-bg); }
.js-prod-specs tr:nth-child(odd) td:first-child { background: var(--js-gray-bg); width: 40%; color: var(--js-navy); font-weight: 600; }
.js-prod-features ul { padding-left: 20px; }
.js-prod-features li { list-style: disc; padding: 4px 0; color: var(--js-text-2); }
.js-prod-package img { max-width: 300px; border: 1px solid var(--js-border); border-radius: var(--js-radius); }
.js-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ===== 新闻列表 ===== */
.js-news-list { padding: 40px 0; }
.js-news-tabs { display: flex; gap: 8px; margin-bottom: 30px; flex-wrap: wrap; border-bottom: 1px solid var(--js-border); }
.js-news-tabs a {
    padding: 12px 24px; font-size: 15px; color: var(--js-text-muted);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.js-news-tabs a:hover, .js-news-tabs a.active { color: var(--js-steel); border-bottom-color: var(--js-steel); font-weight: 600; }
.js-news-item {
    display: flex; gap: 24px; padding: 24px; background: #fff;
    border: 1px solid var(--js-border); border-radius: var(--js-radius);
    margin-bottom: 18px; transition: var(--js-transition);
}
.js-news-item:hover,
.js-news-item:focus-visible { box-shadow: var(--js-shadow); border-color: var(--js-steel); transform: translateX(1px); }
.js-news-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--js-focus-ring), var(--js-shadow); }
.js-news-item-img { flex: 0 0 220px; aspect-ratio: 16/10; border-radius: 4px; overflow: hidden; background: var(--js-gray-bg); }
.js-news-item-img img { width: 100%; height: 100%; object-fit: cover; }
.js-news-item-body { flex: 1; min-width: 0; }
.js-news-item-body .date { font-size: 13px; color: var(--js-steel); margin-bottom: 8px; }
.js-news-item-body h3 { font-size: 18px; color: var(--js-navy); margin-bottom: 10px; }
.js-news-item-body h3:hover { color: var(--js-steel); }
.js-news-item-body p { font-size: 14px; color: var(--js-text-muted); }
.js-news-top-tag { display: inline-block; padding: 2px 8px; background: var(--js-red); color: #fff; font-size: 11px; border-radius: 3px; margin-left: 8px; vertical-align: middle; }

/* ===== 新闻详情 ===== */
.js-article { padding: 40px 0; max-width: 900px; margin: 0 auto; }
.js-article-head { text-align: center; padding-bottom: 24px; border-bottom: 1px solid var(--js-border); margin-bottom: 30px; }
.js-article-head h1 { font-size: 28px; color: var(--js-navy); margin-bottom: 14px; }
.js-article-meta { font-size: 13px; color: var(--js-text-muted); display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.js-article-meta span i { margin-right: 4px; }
.js-article-cover {
    width: 100%; max-height: 520px; margin: 0 0 30px;
    object-fit: cover; border-radius: var(--js-radius); background: var(--js-gray-bg);
}
.js-article-content { min-width: 0; line-height: 1.9; font-size: 15px; overflow-wrap: anywhere; }
.js-article-content img { max-width: 100%; border-radius: var(--js-radius); margin: 1.5em 0; }
.js-article-nav { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--js-border); gap: 20px; }
.js-article-nav a { font-size: 14px; color: var(--js-text-muted); }
.js-article-nav a:hover { color: var(--js-steel); }
.js-article-nav a.disabled { color: var(--js-text-light); pointer-events: none; }

/* ===== 关于我们 ===== */
.js-about-wrap { display: flex; gap: 30px; padding: 40px 0; align-items: flex-start; }
.js-about-side { width: 240px; flex-shrink: 0; position: sticky; top: calc(var(--js-header-h) + 20px); background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius); overflow: hidden; }
.js-about-side .side-title { background: var(--js-navy); color: #fff; padding: 16px 20px; font-size: 16px; font-weight: 600; }
.js-about-side a { display: block; padding: 14px 20px; font-size: 15px; color: var(--js-text-2); border-left: 3px solid transparent; }
.js-about-side a:hover, .js-about-side a.active { color: var(--js-steel); border-left-color: var(--js-steel); background: var(--js-gray-bg); }
.js-about-main { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius); padding: 40px; }
.js-about-main h2 { font-size: 24px; color: var(--js-navy); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid var(--js-steel); display: inline-block; }
.js-about-img { width: 100%; border-radius: var(--js-radius); margin-bottom: 24px; }

/* 发展历程时间轴 */
.js-timeline { position: relative; padding: 20px 0; }
.js-timeline::before { content: ''; position: absolute; left: 80px; top: 0; bottom: 0; width: 2px; background: var(--js-steel); }
.js-timeline-item { position: relative; padding-left: 120px; padding-bottom: 36px; }
.js-timeline-item:last-child { padding-bottom: 0; }
.js-timeline-year {
    position: absolute; left: 0; top: 0; width: 80px;
    font-size: 18px; font-weight: 700; color: var(--js-steel); text-align: right; padding-right: 16px;
}
.js-timeline-item::after {
    content: ''; position: absolute; left: 74px; top: 6px; width: 14px; height: 14px;
    background: #fff; border: 3px solid var(--js-steel); border-radius: 50%; z-index: 1;
}
.js-timeline-event { background: var(--js-gray-bg); padding: 14px 18px; border-radius: var(--js-radius); font-size: 15px; }

/* 资质荣誉墙 */
.js-honor-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.js-honor-item img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border: 1px solid var(--js-border); border-radius: var(--js-radius); }

/* 企业文化 */
.js-culture-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.js-culture-item { background: var(--js-gray-bg); padding: 30px; border-radius: var(--js-radius-lg); border-top: 3px solid var(--js-steel); }
.js-culture-item h4 { font-size: 18px; color: var(--js-navy); margin-bottom: 10px; }
.js-culture-item p { color: var(--js-text-muted); }

/* ===== 公司简介页（沉浸式分段布局，仅 type=company 使用，不改共享样式） ===== */

/* Banner 修饰：仿产品页 --products，eyebrow 标签 + 底部钢蓝渐变条 */
.js-inner-banner--about .js-inner-banner-content { padding-top: 4px; }
.js-inner-banner--about::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, var(--js-steel) 0%, var(--js-steel-dark) 100%);
    z-index: 2;
}

/* 横向子导航条 */
.js-company-nav { background: #fff; border-bottom: 1px solid var(--js-border); position: sticky; top: var(--js-header-h); z-index: 5; }
.js-company-nav .w1480 { display: flex; gap: 8px; overflow-x: auto; }
.js-company-nav a { padding: 16px 20px; font-size: 15px; color: var(--js-text-muted); white-space: nowrap; position: relative; }
.js-company-nav a:hover { color: var(--js-steel); }
.js-company-nav a.active { color: var(--js-navy); font-weight: 600; }
.js-company-nav a.active::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 3px; background: var(--js-steel); }

/* Hero 图文区 */
.js-company-hero { padding: 70px 0; }
.js-company-hero-flex { display: flex; gap: 50px; align-items: center; }
.js-company-hero-img { flex: 0 0 50%; }
.js-company-hero-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--js-radius-lg); box-shadow: var(--js-shadow); }
.js-company-hero-ph { width: 100%; aspect-ratio: 4/3; border-radius: var(--js-radius-lg); background: linear-gradient(135deg, var(--js-navy), var(--js-steel)); display: flex; align-items: center; justify-content: center; }
.js-company-hero-ph i { font-size: 80px; color: rgba(255,255,255,0.4); }
.js-company-hero-text { flex: 1; min-width: 0; }
.js-company-eyebrow { display: inline-block; font-size: 13px; letter-spacing: 0.5px; color: var(--js-steel); font-weight: 600; margin-bottom: 14px; padding: 4px 12px; background: rgba(67,124,163,0.1); border-radius: 30px; }
.js-company-title { font-size: 34px; color: var(--js-navy); margin-bottom: 20px; font-weight: 700; letter-spacing: -0.5px; }
.js-company-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.js-company-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--js-text-2); padding: 6px 14px; background: var(--js-gray-bg); border-radius: 30px; }
.js-company-tag i { color: var(--js-steel); }
.js-company-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; color: var(--js-steel); font-size: 15px; font-weight: 500; }
.js-company-link:hover { color: var(--js-navy); }
.js-company-link i { transition: var(--js-transition); }
.js-company-link:hover i { transform: translateX(4px); }

/* 数据亮点条（navy 全宽） */
.js-company-stats { background: var(--js-navy); padding: 50px 0; position: relative; overflow: hidden; }
.js-company-stats::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 50%, rgba(67,124,163,0.25), transparent 60%); pointer-events: none; }
.js-company-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; z-index: 1; }
.js-company-stat { text-align: center; color: #fff; padding: 10px; }
.js-company-stat > i { font-size: 26px; color: var(--js-steel-light); margin-bottom: 12px; }
.js-company-stat-num { font-size: 42px; font-weight: 700; line-height: 1; color: #fff; letter-spacing: -1px; }
.js-company-stat-num .plus { font-size: 26px; color: var(--js-steel-light); }
.js-company-stat-label { font-size: 14px; color: rgba(255,255,255,0.7); margin-top: 10px; }

/* 应用领域区（灰底，复用 .js-section-head + .js-app-grid） */
.js-company-apps { background: var(--js-gray-bg); }

/* 全球布局区 */
.js-company-offices { background: #fff; }
.js-company-offices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.js-company-office { background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius); padding: 28px; transition: var(--js-transition); }
.js-company-office:hover { border-color: var(--js-steel); box-shadow: var(--js-shadow); }
.js-company-office .js-office-type { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 3px; color: #fff; margin-bottom: 14px; }
.js-company-office .js-office-type-hq { background: var(--js-red); }
.js-company-office .js-office-type-branch { background: var(--js-steel); }
.js-company-office h4 { font-size: 18px; color: var(--js-navy); margin-bottom: 12px; }
.js-company-office p { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--js-text-muted); margin-top: 8px; }
.js-company-office p i { color: var(--js-steel); flex-shrink: 0; margin-top: 3px; }

/* 联系 CTA 区（navy 渐变） */
.js-company-cta { background: linear-gradient(135deg, var(--js-navy) 0%, var(--js-steel-dark) 100%); padding: 60px 0; }
.js-company-cta-flex { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.js-company-cta-text h2 { color: #fff; font-size: 28px; margin-bottom: 8px; }
.js-company-cta-text p { color: rgba(255,255,255,0.8); font-size: 15px; }
.js-company-cta-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.js-company-cta .js-btn-outline { color: #fff; border-color: rgba(255,255,255,0.6); }
.js-company-cta .js-btn-outline:hover { background: #fff; color: var(--js-navy); border-color: #fff; }

/* ===== 应用领域 ===== */
.js-app-list-wrap { padding-bottom: 80px; }
.js-app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 40px 0; }

/* 应用卡片：图片 + 悬浮遮罩 */
.js-app-card {
    display: block;
    position: relative;
    border-radius: var(--js-radius);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--js-border);
    transition: var(--js-transition);
    height: 100%;
}
.js-app-card:hover,
.js-app-card:focus-visible {
    border-color: var(--js-steel);
    box-shadow: var(--js-shadow-hover);
    transform: translateY(-4px);
}
.js-app-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--js-focus-ring), var(--js-shadow-hover); }
.js-app-card-img {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--js-gray-bg);
    overflow: hidden;
}
.js-app-card-img > img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.js-app-card:hover .js-app-card-img > img { transform: scale(1.08); }

/* 无图占位 */
.js-app-card-ph {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--js-navy) 0%, var(--js-steel) 100%);
    color: rgba(255,255,255,0.5);
    font-size: 64px;
}

/* 悬浮遮罩 */
.js-app-card-mask {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 28px 24px;
    background: linear-gradient(135deg, rgba(29,53,70,0.92) 0%, rgba(67,124,163,0.88) 100%);
    color: #fff;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.js-app-card:hover .js-app-card-mask,
.js-app-card:focus-visible .js-app-card-mask,
.js-app-card:focus-within .js-app-card-mask { opacity: 1; }
.js-app-card-mask > i {
    font-size: 36px; color: #fff; opacity: 0.9;
    margin-bottom: 12px;
    transform: translateY(10px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}
.js-app-card-mask h3 {
    color: #fff; font-size: 20px; margin-bottom: 10px;
    transform: translateY(10px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}
.js-app-card-mask p {
    color: rgba(255,255,255,0.85); font-size: 13px; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    transform: translateY(10px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
.js-app-card-more {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 18px; padding: 7px 18px;
    font-size: 13px; font-weight: 500; letter-spacing: 0.5px;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 30px;
    transform: translateY(10px);
    transition: background 0.3s, border-color 0.3s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.js-app-card-more i { transition: transform 0.3s; }
.js-app-card:hover .js-app-card-mask > i,
.js-app-card:hover .js-app-card-mask h3,
.js-app-card:hover .js-app-card-mask p,
.js-app-card:hover .js-app-card-more,
.js-app-card:focus-visible .js-app-card-mask > i,
.js-app-card:focus-visible .js-app-card-mask h3,
.js-app-card:focus-visible .js-app-card-mask p,
.js-app-card:focus-visible .js-app-card-more { transform: translateY(0); }
.js-app-card:hover .js-app-card-more { background: var(--js-steel); border-color: var(--js-steel); }
.js-app-card:hover .js-app-card-more i { transform: translateX(4px); }

/* 默认（无悬浮）状态下显示标题条，保证信息可读 */
.js-app-card-img::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 60px;
    background: linear-gradient(to top, rgba(29,53,70,0.55) 0%, rgba(29,53,70,0) 100%);
    pointer-events: none;
}

/* ===== 联系我们 ===== */
/* 主体：双栏（信息左 / 表单右吸顶）。js-section 已提供区段 padding，此处不再叠加。 */
.js-contact-wrap { padding: 0; }
.js-contact-row {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 40px;
    align-items: start;
}
.js-contact-info { min-width: 0; }

/* 信息卡网格（2×2） */
.js-contact-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 36px;
}
.js-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--js-border);
    border-radius: var(--js-radius);
    padding: 22px 20px;
    transition: var(--js-transition);
}
.js-contact-card:hover {
    border-color: var(--js-steel-light);
    box-shadow: var(--js-shadow);
    transform: translateY(-1px);
}
.js-contact-card-ico {
    flex: 0 0 44px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--js-steel) 0%, var(--js-navy) 100%);
    color: #fff;
    border-radius: var(--js-radius);
    font-size: 18px;
}
.js-contact-card-text { min-width: 0; }
.js-contact-card-text h4 {
    font-size: 13px;
    color: var(--js-text-muted);
    font-weight: 500;
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.js-contact-card-text p {
    font-size: 15px;
    color: var(--js-navy);
    font-weight: 600;
    line-height: 1.5;
    word-break: break-word;
}

/* 办事处列表 */
.js-contact-offices {
    background: #fff;
    border: 1px solid var(--js-border);
    border-radius: var(--js-radius);
    padding: 24px 24px 8px;
    margin-bottom: 36px;
}
.js-contact-offices-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--js-navy);
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--js-steel);
    display: inline-block;
}
.js-office-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px dashed var(--js-border);
}
.js-office-item:last-child { border-bottom: none; }
.js-office-type {
    flex: 0 0 auto;
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    border-radius: 3px;
    color: #fff;
    margin-top: 2px;
}
.js-office-type-hq { background: var(--js-red); }
.js-office-type-branch { background: var(--js-steel); }
.js-office-body { min-width: 0; flex: 1; }
.js-office-body h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--js-navy);
    margin-bottom: 6px;
}
.js-office-body p {
    font-size: 13px;
    color: var(--js-text-muted);
    line-height: 1.7;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.js-office-body p i {
    flex: 0 0 14px;
    width: 14px;
    color: var(--js-steel);
    margin-top: 3px;
}

/* 地图：嵌入 iframe 或品牌占位 */
.js-map {
    position: relative;
    height: 300px;
    border-radius: var(--js-radius);
    overflow: hidden;
    background: linear-gradient(135deg, var(--js-navy) 0%, var(--js-steel) 100%);
    box-shadow: var(--js-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}
.js-map-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.js-map::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}
.js-map:has(.js-map-frame)::before { display: none; }
.js-map-placeholder {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 0 24px;
}
.js-map-placeholder > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    margin: 0 auto 14px;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    font-size: 26px;
}
.js-map-placeholder > span {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.92;
    max-width: 360px;
}

/* 右栏：在线留言（吸顶） */
.js-contact-form-wrap {
    background: #fff;
    border: 1px solid var(--js-border);
    border-radius: var(--js-radius-lg);
    padding: 32px;
    box-shadow: var(--js-shadow);
    position: sticky;
    top: calc(var(--js-header-h) + 24px);
}
.js-contact-form-wrap .js-section-head { margin-bottom: 22px; }
.js-contact-form-wrap .js-section-title { font-size: 24px; }
.js-contact-form-wrap .js-section-desc { font-size: 13px; margin-top: 8px; }

/* ===== 联系页表单（作用域限定，不污染 .js-form / 样品申请页） ===== */
.js-contact-form .js-form-field { margin-bottom: 16px; }
.js-contact-form .js-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.js-contact-form .js-form-row > .js-form-field { margin-bottom: 16px; }
.js-contact-form label {
    display: block;
    font-size: 14px;
    color: var(--js-text-2);
    margin-bottom: 6px;
    font-weight: 500;
}
.js-contact-form label em { color: var(--js-red); margin-left: 2px; font-style: normal; }
.js-contact-form input[type=text],
.js-contact-form input[type=email],
.js-contact-form input[type=tel],
.js-contact-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--js-border);
    border-radius: var(--js-radius);
    font-size: 14px;
    color: var(--js-text);
    outline: none;
    background: var(--js-gray-light);
    transition: var(--js-transition);
    box-sizing: border-box;
}
.js-contact-form input::placeholder,
.js-contact-form textarea::placeholder { color: var(--js-text-light); }
.js-contact-form input:focus,
.js-contact-form input:focus-visible,
.js-contact-form textarea:focus,
.js-contact-form textarea:focus-visible {
    border-color: var(--js-steel);
    background: #fff;
    box-shadow: 0 0 0 3px var(--js-focus-ring);
}
.js-contact-form textarea { resize: vertical; min-height: 110px; }
/* 验证码行：输入框 + 图片并排 */
.js-contact-form .js-form-captcha {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 20px;
}
.js-contact-form .js-form-captcha label { grid-column: 1 / -1; }
.js-contact-form .js-form-captcha img {
    height: 44px;
    border-radius: var(--js-radius);
    cursor: pointer;
    border: 1px solid var(--js-border);
}
/* 提交区：纯容器，按钮全宽 */
.js-contact-form .js-form-submit { margin-top: 4px; }
.js-contact-form .js-form-submit .js-btn {
    width: 100%;
    justify-content: center;
    padding: 14px;
    font-size: 15px;
}

/* ===== 表单通用（样品申请页等复用，保留原有 .js-form 作用域） ===== */
.js-form .form-group { margin-bottom: 18px; }
.js-form label { display: block; font-size: 14px; color: var(--js-text-2); margin-bottom: 6px; }
.js-form label .req { color: var(--js-red); margin-left: 2px; }
.js-form input[type=text], .js-form input[type=email], .js-form input[type=tel], .js-form textarea, .js-form select {
    width: 100%; padding: 10px 14px; border: 1px solid var(--js-border); border-radius: 4px;
    font-size: 14px; outline: none; transition: var(--js-transition);
}
.js-form input:focus, .js-form textarea:focus, .js-form select:focus,
.js-form input:focus-visible, .js-form textarea:focus-visible, .js-form select:focus-visible { border-color: var(--js-steel); box-shadow: 0 0 0 3px var(--js-focus-ring); }
.js-contact-form input:disabled,
.js-contact-form textarea:disabled,
.js-form input:disabled,
.js-form textarea:disabled,
.js-form select:disabled { background: var(--js-gray-bg); color: var(--js-text-light); }
.js-form textarea { resize: vertical; min-height: 90px; }
.js-captcha-row { display: flex; gap: 10px; align-items: center; }
.js-captcha-row input { flex: 1; }
.js-captcha-row img { height: 40px; border-radius: 4px; cursor: pointer; border: 1px solid var(--js-border); }
.js-form-submit {
    width: 100%; padding: 13px; background: var(--js-steel); color: #fff;
    border-radius: var(--js-radius); font-size: 15px; font-weight: 500; transition: var(--js-transition);
}
.js-form-submit:hover { background: var(--js-navy); }
.js-form-submit:disabled,
.js-form-submit[aria-disabled="true"] { background: var(--js-row-hover); cursor: not-allowed; }

/* ===== 样品申请 ===== */
.js-sample-wrap { padding: 50px 0; }
.js-sample-form { max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--js-border); border-radius: var(--js-radius-lg); padding: 40px; box-shadow: var(--js-shadow); }
.js-sample-grid { display: flex; flex-direction: column; gap: 18px; }
.js-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.js-form-row .form-group { margin-bottom: 0; }
.js-sample-grid > .form-group { margin-bottom: 0; }
/* 验证码一行：标签在上，输入框+图片并排 */
.js-captcha-row .js-captcha-field { display: flex; gap: 10px; align-items: center; }
.js-captcha-row .js-captcha-field input { flex: 1; }
.js-captcha-row .js-captcha-field img { height: 42px; border-radius: 4px; cursor: pointer; border: 1px solid var(--js-border); }
/* 提交按钮居中显示 */
.js-sample-form .js-form-submit { width: auto; max-width: 240px; margin: 10px auto 0; }
.js-sample-form .js-form-submit .js-btn { width: 100%; justify-content: center; }

/* 企业微信引导弹窗 */
.js-wechat-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000;
    display: none; align-items: center; justify-content: center; padding: 20px;
}
.js-wechat-modal.show,
.js-wechat-modal[style*="display: block"] { display: flex !important; }
.js-wechat-modal-mask { position: absolute; inset: 0; }
.js-wechat-modal-box {
    position: relative; z-index: 1;
    background: #fff; border-radius: var(--js-radius-lg); padding: 40px;
    max-width: 420px; width: 100%; max-height: calc(100dvh - 40px); overflow-y: auto;
    text-align: center; box-shadow: 0 20px 60px rgba(10, 22, 30, 0.28);
    animation: jsModalIn 0.3s ease;
}
@keyframes jsModalIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.js-wechat-modal-ico { width: 64px; height: 64px; margin: 0 auto 16px; background: #07c160; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; }
.js-wechat-modal-inner { text-align: center; }
.js-wechat-modal-box h3 { font-size: 20px; color: var(--js-navy); margin-bottom: 8px; }
.js-wechat-modal-desc { color: var(--js-text-muted); font-size: 14px; margin-bottom: 20px; line-height: 1.7; }
.js-wechat-modal-content { margin-bottom: 8px; }
.js-wechat-qr { width: 200px; margin: 0 auto 20px; text-align: center; }
.js-wechat-qr img { width: 200px; height: 200px; object-fit: contain; }
.js-wechat-qr span { display: block; margin-top: 8px; color: var(--js-text-muted); font-size: 13px; }
.js-wechat-btn { margin: 0 auto 20px; background: #07c160 !important; border-color: #07c160 !important; }
.js-wechat-btn:hover { background: #06a050 !important; border-color: #06a050 !important; }
.js-wechat-modal-close { position: absolute; top: 12px; right: 14px; width: 30px; height: 30px; line-height: 30px; text-align: center; color: var(--js-text-light); font-size: 18px; }
.js-wechat-modal-close:hover { color: var(--js-navy); }

/* ===== 搜索结果 ===== */
.js-search-wrap { padding: 40px 0; }
.js-search-box { max-width: 760px; margin: 0 auto 22px; }
.js-search-box form { display: flex; align-items: stretch; }
.js-search-box input {
    flex: 1; min-width: 0; padding: 13px 18px;
    border: 1px solid var(--js-border); border-right: none;
    border-radius: var(--js-radius) 0 0 var(--js-radius);
    background: #fff; color: var(--js-text-2); outline: none;
    transition: var(--js-transition);
}
.js-search-box input::placeholder { color: var(--js-text-light); }
.js-search-box input:focus,
.js-search-box input:focus-visible { position: relative; z-index: 1; border-color: var(--js-steel); box-shadow: 0 0 0 3px var(--js-focus-ring); }
.js-search-box button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-width: 118px; padding: 0 24px;
    background: var(--js-steel); color: #fff;
    border: 1px solid var(--js-steel); border-radius: 0 var(--js-radius) var(--js-radius) 0;
    font-size: 14px; font-weight: 600; transition: var(--js-transition);
}
.js-search-box button:hover { background: var(--js-navy); border-color: var(--js-navy); }
.js-search-keyword {
    max-width: 760px; margin: 0 auto 42px; padding: 11px 16px;
    border-left: 3px solid var(--js-steel); background: var(--js-gray-bg);
    color: var(--js-text-muted); font-size: 14px;
}
.js-search-keyword strong { color: var(--js-navy); font-weight: 600; overflow-wrap: anywhere; }
.js-search-block { margin-bottom: 54px; }
.js-search-block:last-child { margin-bottom: 0; }
.js-search-block-head { max-width: 100%; margin-bottom: 28px; text-align: left; }
.js-search-block-head .js-section-tag { margin-bottom: 8px; }
.js-search-block-head .js-section-title { margin-bottom: 0; font-size: 26px; }
.js-search-count { color: var(--js-steel); font-size: 15px; font-weight: 600; vertical-align: middle; }
/* 搜索页新闻结果使用模板现有选择器，视觉与新闻列表保持一致但更紧凑 */
.js-search-block .js-news-list { padding: 0; }
.js-news-list-item {
    display: flex; gap: 24px; padding: 22px;
    background: #fff; border: 1px solid var(--js-border);
    border-radius: var(--js-radius); margin-bottom: 16px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.js-news-list-item:hover,
.js-news-list-item:focus-visible { border-color: var(--js-steel); box-shadow: var(--js-shadow); transform: translateX(1px); }
.js-news-list-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--js-focus-ring), var(--js-shadow); }
.js-news-list-img { flex: 0 0 220px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--js-gray-bg); }
.js-news-list-img img { width: 100%; height: 100%; object-fit: cover; }
.js-news-list-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--js-steel-light); font-size: 38px; }
.js-news-list-body { flex: 1; min-width: 0; }
.js-news-list-date { display: block; margin-bottom: 7px; color: var(--js-steel); font-size: 13px; }
.js-news-list-body h3 { margin-bottom: 8px; color: var(--js-navy); font-size: 18px; overflow-wrap: anywhere; }
.js-news-list-body p { color: var(--js-text-muted); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.js-news-list-more { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; color: var(--js-steel); font-size: 13px; font-weight: 500; }
.js-news-list-more i { transition: transform 0.25s ease; }
.js-news-list-item:hover .js-news-list-more i { transform: translateX(2px); }

/* 兼容旧搜索结果选择器 */
.js-search-result-block { margin-bottom: 40px; }
.js-search-result-block h2 { font-size: 20px; color: var(--js-navy); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--js-border); }
.js-search-result-block h2 .count { font-size: 14px; color: var(--js-steel); margin-left: 8px; }
.js-search-products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ===== 产品选型工作台 ===== */
.js-page-product-list .js-inner-banner-content h1 {
    margin: 0; color: #fff; font-size: 42px; font-weight: 700; letter-spacing: 0.5px;
}
.js-plist-wrap { padding-top: 28px; }
.js-plist-categories {
    display: flex; align-items: center; gap: 20px; margin-bottom: 18px;
    padding: 14px 18px; border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
    background: #fff; box-shadow: 0 4px 18px rgba(29, 53, 70, 0.04);
}
.js-plist-categories-label {
    flex: 0 0 auto; color: var(--js-text-muted); font-size: 12px; font-weight: 600;
    letter-spacing: 0.8px; text-transform: uppercase;
}
.js-plist-category-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.js-plist-category-links a {
    display: inline-flex; align-items: center; min-height: 36px; padding: 7px 14px;
    border: 1px solid transparent; border-radius: 999px; color: var(--js-text-2);
    background: var(--js-gray-light); font-size: 13px; font-weight: 500; transition: var(--js-transition);
}
.js-plist-category-links a:hover,
.js-plist-category-links a:focus-visible { color: var(--js-steel); border-color: rgba(67,124,163,0.35); outline: none; }
.js-plist-category-links a.active { color: #fff; background: var(--js-navy); border-color: var(--js-navy); }

.js-selector-workbench {
    position: relative; margin-bottom: 22px; padding: 22px 24px 0;
    border: 1px solid var(--js-border); border-radius: var(--js-radius-lg);
    background: linear-gradient(135deg, #fff 0%, #fff 72%, rgba(67,124,163,0.055) 100%);
    box-shadow: var(--js-shadow); overflow: hidden;
}
.js-selector-workbench::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--js-steel), var(--js-navy));
}
.js-selector-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.js-selector-kicker {
    display: block; margin-bottom: 4px; color: var(--js-steel); font-size: 11px;
    font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
}
.js-selector-heading h2 { margin: 0; color: var(--js-navy); font-size: 22px; font-weight: 700; }
.js-selector-head .js-filter-count strong { font-size: 26px; }
.js-selector-workbench .js-plist-toolbar { margin: 0; padding-bottom: 22px; }
.js-selector-workbench .js-filter-search { flex: 1 1 520px; max-width: 760px; }
.js-selector-workbench .js-filter-search input { height: 46px; background: #fff; }
.js-selector-workbench .js-filter-search button { min-width: 110px; font-weight: 600; }
.js-filter-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 46px; padding: 0 17px; border: 1px solid var(--js-border);
    border-radius: var(--js-radius); background: #fff; color: var(--js-navy);
    font-size: 13px; font-weight: 600; transition: var(--js-transition);
}
.js-filter-toggle:hover,
.js-filter-toggle:focus-visible { border-color: var(--js-steel); color: var(--js-steel); outline: none; box-shadow: 0 0 0 3px var(--js-focus-ring); }
.js-filter-toggle.is-active { color: var(--js-steel); border-color: rgba(67,124,163,0.5); background: rgba(67,124,163,0.07); }
.js-filter-toggle em {
    display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
    padding: 0 6px; border-radius: 99px; background: var(--js-steel); color: #fff;
    font-size: 11px; font-style: normal; line-height: 1;
}
.js-filter-toggle-arrow { margin-left: 2px; transition: transform 0.2s ease; }
.js-filter-toggle[aria-expanded="true"] .js-filter-toggle-arrow { transform: rotate(180deg); }

.js-selector-workbench .js-quick-search {
    margin: 0 -24px; padding: 20px 24px 22px; border: 0; border-top: 1px solid var(--js-border);
    border-radius: 0; background: rgba(247,249,250,0.78); box-shadow: none;
}
.js-selector-workbench .js-quick-search[hidden] { display: none; }
.js-filter-active { color: var(--js-steel); font-size: 12px; font-weight: 600; }
.js-filter-active i { margin-right: 6px; }
.js-quick-col { margin: 0; min-inline-size: 0; }
.js-quick-col-title { width: 100%; }
.js-range-value { display: flex; flex-direction: column; gap: 4px; flex: 0 0 68px; }
.js-range-value > span { color: var(--js-text-light); font-size: 10px; text-align: center; }
.js-range-value .js-range-num { width: 100%; flex-basis: auto; }

.js-table-scroll-hint {
    display: none; align-items: center; justify-content: flex-end; gap: 7px;
    margin: 0 2px 8px; color: var(--js-text-muted); font-size: 12px;
}
.js-spec-table-wrap { position: relative; }
.js-spec-table caption {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.js-spec-table--params .col-product { min-width: 320px; width: 320px; text-align: left; }
.js-spec-table--params thead .col-product { padding-left: 18px; }
.js-spec-table--params tbody th.col-product {
    position: relative; padding: 12px 16px 12px 18px; border-bottom: 1px solid var(--js-gray-bg);
    background: linear-gradient(90deg, rgba(67,124,163,0.055), rgba(67,124,163,0.015));
    text-align: left; font-weight: 400; vertical-align: middle;
}
.js-spec-table--params tbody tr:last-child th.col-product { border-bottom: none; }
.js-spec-table--params tbody tr:hover th.col-product { box-shadow: inset 3px 0 0 var(--js-steel); }
.js-product-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.js-product-identity .js-prod-thumb,
.js-product-identity .js-prod-thumb-ph { flex: 0 0 54px; width: 54px; height: 54px; }
.js-product-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: 4px; }
.js-product-copy .js-model-chip { padding: 3px 9px; font-size: 12px; }
.js-product-name {
    max-width: 220px; overflow: hidden; color: var(--js-navy); font-size: 13px;
    font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.js-product-name:hover { color: var(--js-steel); }
.js-product-brief {
    display: -webkit-box; max-width: 220px; overflow: hidden; color: var(--js-text-muted);
    font-size: 11px; font-weight: 400; line-height: 1.35; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.js-spec-table .js-pdf-link:focus-visible,
.js-spec-table .js-row-sample:focus-visible,
.js-model-chip:focus-visible,
.js-product-name:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--js-focus-ring); }

@media (prefers-reduced-motion: reduce) {
    .js-filter-toggle-arrow,
    .js-spec-table .js-pdf-link { transition: none; }
    .js-spec-table .js-pdf-link:hover { transform: none; }
}