/**
 * product-hub.css - 产品中心入口页专用样式
 * 潍坊奥仕电子有限公司
 */

/* ===== SVG 图标通用样式（基础样式在 main.css） ===== */
.htb-icon .svg-icon { width: 22px; height: 22px; }
.k-icon .svg-icon { width: 24px; height: 24px; }
.sel-icon .svg-icon { width: 20px; height: 20px; }
.doc-icon .svg-icon { width: 28px; height: 28px; }
.usb-icon .svg-icon { width: 18px; height: 18px; }
.usage-rank .svg-icon { width: 16px; height: 16px; vertical-align: -3px; }

/* ===== 顶部大类切换栏 ===== */
.hub-type-bar {
  background: #f0f5ff;
  border-bottom: 1px solid #d8e6f8;
  padding-top: 64px; /* 导航栏高度补偿（导航栏 fixed） */
}
.hub-type-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.hub-type-tabs::-webkit-scrollbar { display: none; }
.hub-type-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px 13px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
  position: relative;
}
.hub-type-btn:hover { background: rgba(0,102,255,0.05); }
.hub-type-btn.active {
  background: #fff;
  border-bottom-color: var(--primary, #06f);
}
.htb-icon { font-size: 1.25rem; flex-shrink: 0; }
.htb-main { font-size: 0.92rem; font-weight: 700; color: #1a2a3a; display: block; line-height: 1.25; }
.htb-sub  { font-size: 0.7rem; color: #888; display: block; }
.hub-type-btn.active .htb-main { color: var(--primary, #06f); }

/* ===== Tab Bar ===== */
.hub-tab-bar {
  background: #fff;
  border-bottom: 1px solid #e2eaf3;
  position: sticky;
  top: 56px;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.hub-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.hub-tabs::-webkit-scrollbar { display: none; }
.hub-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 18px 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #666;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.hub-tab svg { width: 13px; height: 13px; flex-shrink: 0; }
.hub-tab:hover { color: var(--primary, #06f); }
.hub-tab.active {
  color: var(--primary, #06f);
  border-bottom-color: var(--primary, #06f);
}

/* ===== Content ===== */
.hub-content { padding: 4px 0 8px; background: #f5f8fc; }
.search-embed-wrap { background: #f5f8fc; padding: 0; }

/* ===== 子类型按钮 ===== */
.knowledge-type-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.ktype-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: 8px;
  border: 1.5px solid #dde6f0;
  background: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  color: #444;
  text-decoration: none;
  transition: all .2s;
}
.ktype-btn:hover {
  border-color: var(--primary, #06f);
  color: var(--primary, #06f);
}
.ktype-btn.active {
  background: var(--primary, #06f);
  border-color: var(--primary, #06f);
  color: #fff;
}

/* ===== Knowledge Cards ===== */
.knowledge-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.k-card {
  background: #fff;
  border: 1px solid #e2eaf3;
  border-radius: 16px;
  overflow: hidden;
}
.k-card-wide { grid-column: 1 / -1; }
.k-card-half { /* default 1 col */ }

.k-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 24px 0;
}
.k-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.k-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--accent, #00d4d8);
  margin-bottom: 4px;
}
.k-card-header h2, .k-card-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0d1b2a;
  margin: 0;
  line-height: 1.35;
}
.k-body {
  padding: 16px 24px 24px;
}
.k-body > p {
  font-size: 0.92rem;
  color: #555;
  line-height: 1.75;
  margin: 0 0 16px;
}

/* highlight box */
.k-highlight-box {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.k-highlight-item {
  flex: 1;
  min-width: 120px;
  background: #f0f5ff;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.k-hl-num {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary, #06f);
  margin-bottom: 4px;
  font-family: 'Courier New', monospace;
}
.k-hl-desc { font-size: 0.78rem; color: #666; }

/* param list */
.k-param-list { display: flex; flex-direction: column; gap: 0; }
.k-param-item {
  padding: 14px 0;
  border-bottom: 1px solid #f0f4f8;
}
.k-param-item:last-child { border-bottom: none; }
.k-param-name { font-size: 0.88rem; font-weight: 700; color: #1a2a3a; margin-bottom: 2px; }
.k-param-val  { font-size: 0.82rem; color: var(--primary, #06f); font-weight: 600; margin-bottom: 4px; }
.k-param-desc { font-size: 0.82rem; color: #666; line-height: 1.6; }

/* tip */
.k-tip {
    display: flex; /* 启用弹性布局，使图标与文字水平排列 */
    align-items: flex-start; /* 顶部对齐，确保多行文字时图标不居中 */
    gap: 8px; /* 图标与文字之间保持 8px 间距 */
    background: #fff8e8; /* 浅黄色背景 */
    border: 1px solid #fde68a; /* 浅黄色边框 */
    border-radius: 8px; /* 8px 圆角 */
    padding: 10px 14px; /* 内边距：上下 10px，左右 14px */
    font-size: 0.82rem; /* 字体大小（相对较小） */
    color: #92400e; /* 深棕色文字 */
    line-height: 1.6; /* 行高 1.6，提升多行文本可读性 */
    margin-top: 12px; /* 距离上方元素 12px */
}

/* tif */
.k-tif {
    display: flex; /* 启用弹性布局，使图标与文字水平排列 */
    align-items: flex-start; /* 顶部对齐，确保多行文字时图标不居中 */
    gap: 8px; /* 图标与文字之间保持 8px 间距 */
    background: #f0f5ff; /* 浅蓝色背景 */
    border: 1px solid #c6d9f7; /* 深蓝色边框 */
    border-radius: 8px; /* 8px 圆角 */
    padding: 10px 14px; /* 内边距：上下 10px，左右 14px */
    font-size: 0.82rem; /* 字体大小（相对较小） */
    color: #92400e; /* 深棕色文字 */
    line-height: 1.6; /* 行高 1.6，提升多行文本可读性 */
    margin-top: 12px; /* 距离上方元素 12px */
}

/* ===== 极坐标指向性图 ===== */
.polar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 12px;
}
/* 3列极坐标（指向性章节专用） */
.polar-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 极坐标卡片 —— 白底卡片风格（极坐标图本身为浅色仿真截图背景） */
.polar-item {
  display: flex;
  flex-direction: column;
  border: 1px solid #d8e6f4;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(6,40,120,0.08);
  transition: box-shadow .25s, transform .25s;
}
.polar-item:hover {
  box-shadow: 0 8px 24px rgba(6,80,200,0.15);
  transform: translateY(-3px);
}

/* 图片区：保持原比例，浅灰兜底 */
.polar-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #f5f7fa;
  padding: 8px;
  box-sizing: border-box;
}

/* 图片下方说明区 —— 浅蓝底 + 蓝色文字 */
.polar-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: #0d2b5e;
  background: linear-gradient(135deg, #eef3ff 0%, #f7faff 100%);
  padding: 11px 16px 5px;
  border-top: 1px solid #dde6f0;
}
.polar-desc {
  font-size: 0.78rem;
  color: #556b85;
  line-height: 1.58;
  background: linear-gradient(135deg, #eef3ff 0%, #f7faff 100%);
  padding: 0 16px 14px;
}

/* 兜底 SVG 极坐标示意（图片加载失败时显示） */
.polar-diagram {
  display: none; /* 默认隐藏，onerror 时通过 JS 切换 */
  width: 100%;
  aspect-ratio: 4 / 3;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
}
.polar-omni     { background: #f5f7fa; }
.polar-cardioid { background: #f5f7fa; }
.polar-super    { background: #f5f7fa; }
.polar-bidirectional { background: #f5f7fa; }


/* ===== 电路图 ===== */
/* 电路图网格 */
.circuit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 4px;
}
.circuit-item {
  display: flex;
  flex-direction: column;
  border: 1px solid #c8d8ee;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,40,100,0.08);
  transition: box-shadow .25s, transform .25s;
}
.circuit-item:hover {
  box-shadow: 0 6px 22px rgba(0,80,200,0.13);
  transform: translateY(-2px);
}

/* 标签栏：蓝调渐变 */
.circuit-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0d3b7a;
  background: linear-gradient(90deg, #ddeaff 0%, #eef4ff 100%);
  padding: 11px 16px;
  border-bottom: 1px solid #c8d8ee;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* 电路图图片：白底横向宽图，保持原比例显示
   实际为仿真软件截图，约 800x360，宽高比 ~2.2:1 */
.circuit-img {
  display: block;
  width: 100%;
  aspect-ratio: 2.2 / 1;
  object-fit: contain;
  background: #fff;
  padding: 16px 20px;
  box-sizing: border-box;
  flex: 1;
}

/* compare table */
.compare-table-wrap { overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.compare-table th {
  background: #f0f5ff;
  color: #0d1b2a;
  font-weight: 700;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 2px solid #dde6f0;
}
.compare-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #eef2f7;
  color: #444;
  vertical-align: top;
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:hover td { background: #fafcff; }

/* ══ 麦克风对比表新样式（优点/缺点/应用） ══ */
.compare-mic-adv { table-layout: fixed; }
.compare-mic-adv .cmp-empty { width: 90px; }
.compare-mic-adv th {
  text-align: center;
  padding: 14px 10px;
  vertical-align: middle;
  border-bottom: 3px solid var(--primary);
}
.compare-mic-adv .cmp-en {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: #7a8a9a;
  margin-top: 2px;
  letter-spacing: 0.5px;
}
/* 行标签列 */
.cmp-label-adv,
.cmp-label-dis,
.cmp-label-app {
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 12px;
  vertical-align: top;
  width: 90px;
}
.cmp-label-adv { background: #f0faf0; color: #1b7a1b; }
.cmp-label-dis { background: #faf0f0; color: #b91c1c; }
.cmp-label-app { background: #f5f0fa; color: #6b21a8; }
/* 单元格中的列表 */
.cmp-list {
  margin: 0;
  padding-left: 16px;
  list-style: none;
}
.cmp-list li {
  position: relative;
  padding: 3px 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #3a4a5a;
}
.cmp-list li::before {
  content: '\2022';
  position: absolute;
  left: -12px;
  color: var(--primary);
  font-weight: 700;
}
.cmp-row-adv td,
.cmp-row-dis td,
.cmp-row-app td {
  padding: 12px 14px;
  vertical-align: top;
}
.cmp-row-adv td { border-bottom: 1px solid #d0e8d0; }
.cmp-row-dis td { border-bottom: 1px solid #e8d0d0; }
.cmp-row-app td { border-bottom: 1px solid #d8d0e8; }
/* 应用标签 */
.cmp-app-tag {
  display: inline-block;
  background: #e8f4ff;
  color: #0066cc;
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.78rem;
  margin: 2px 4px 2px 0;
  font-weight: 500;
}

/* 绿色标识标签 */
.cmp-app-dl {
    display: inline-block;
    background: #90EE90;
    color: #0066cc;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 0.78rem;
    margin: 2px 4px 2px 0;
    font-weight: 500;
}
/* selection grid */
.selection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sel-item {
  background: #f7f9fc;
  border: 1px solid #e8eef5;
  border-radius: 14px;
  padding: 20px 18px;
  transition: box-shadow .2s, transform .2s;
}
.sel-item:hover { box-shadow: 0 6px 22px rgba(0,102,255,0.10); transform: translateY(-3px); }
.sel-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.sel-icon .svg-icon { width: 24px; height: 24px; }
/* 默认蓝色（target/ruler/zap 等未特殊指定时） */
.sel-icon:not([class*="sel-ic-"]) {
  background: linear-gradient(135deg, #eef4ff, #e6f0ff);
  color: #0066ff;
}
/* 各图标独立配色 */
.sel-ic-target   { background:linear-gradient(135deg,#fff5f0,#ffebe1); color:#e85a20; }    /* 明确使用场景 - 橙红 */
.sel-ic-ruler    { background:linear-gradient(135deg,#f0f4ff,#e8eeff); color:#3355cc; }    /* 尺寸优先确认 - 蓝紫 */
.sel-ic-zap      { background:linear-gradient(135deg,#fff8e8,#fff0d0); color:#c48c00; }    /* 供电电压匹配 - 金色 */
.sel-ic-droplets { background:linear-gradient(135deg,#ecf7ff,#dff0ff); color:#0890d0; }    /* 防水等级 - 天蓝 */
.sel-ic-test-tube{ background:linear-gradient(135deg,#f0f5ff,#eaf2ff); color:#5544cc; }    /* 充分验证后再量产 - 靛蓝 */
.sel-ic-wrench   { background:linear-gradient(135deg,#f5f0fa,#ede5f5); color:#7b44aa; }    /* 技术对接确认 - 紫色 */

/* SPK 扬声器配色 */
.sel-ic-sliders  { background:linear-gradient(135deg,#fff0ed,#ffe8e0); color:#d64b30; }     /* 匹配功放阻抗 - 红 */
.sel-ic-activity { background:linear-gradient(135deg,#f0faf5,#e5f5ed); color:#1a8850; }     /* f₀与低频需求 - 绿 */
.sel-ic-box      { background:linear-gradient(135deg,#f8f5f0,#f0ebe0); color:#996600; }     /* 优先选标准品 - 棕 */

/* WIRE 导线配色 */
.sel-ic-refresh-cw{ background:linear-gradient(135deg,#f0faff,#e8efff); color:#2563eb; }    /* 弯折次数要求 - 蓝 */
.sel-ic-shield   { background:linear-gradient(135deg,#f5f0ff,#ece4ff); color:#6633aa; }    /* EMI抑制 - 紫 */
.sel-ic-thermometer{background:linear-gradient(135deg,#fff0f0,#ffe8e8); color:#dc2626; }    /* 耐温等级 - 红 */
.sel-title { font-size: 0.88rem; font-weight: 700; color: #1a2a3a; margin-bottom: 6px; }
.sel-desc  { font-size: 0.8rem; color: #666; line-height: 1.6; }

/* ===== Document Sections (Order / Usage) ===== */
.doc-section { max-width: 860px; margin: 0 auto; }
.doc-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #fff;
  border: 1px solid #e2eaf3;
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 28px;
}
.doc-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  line-height: 1;
}
.doc-header h2 { font-size: 1.4rem; font-weight: 700; color: #0d1b2a; margin: 0 0 8px; }
.doc-header p  { font-size: 0.92rem; color: #666; line-height: 1.7; margin: 0; }

.doc-items { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }

.doc-item {
  display: flex;
  gap: 20px;
  background: #fff;
  border: 1px solid #e2eaf3;
  border-radius: 14px;
  padding: 24px 28px;
  align-items: flex-start;
  transition: box-shadow .2s;
}
.doc-item:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.doc-item-warning {
  border-left: 4px solid #f59e0b;
  background: #fffdf0;
}
.doc-item-coming {
  border: 2px dashed #d0dde8;
  background: #fafcff;
  opacity: 0.8;
}

.doc-item-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0066ff, #0044cc);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.doc-num-warn { background: linear-gradient(135deg, #f59e0b, #d97706); }
.doc-item-coming .doc-item-num { background: #d0dde8; color: #888; }

.doc-item-body { flex: 1; min-width: 0; }
.doc-item-body h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #0d1b2a;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.usage-rank {
  font-size: 0.78rem;
  font-weight: 700;
  background: #fff3cd;
  color: #856404;
  padding: 2px 8px;
  border-radius: 4px;
}
.doc-item-body p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.75;
  margin: 0;
}
.doc-item-body p strong { color: #0d1b2a; }

/* 使用注意子列表 */
.usage-sub-list { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.usage-sub-item {
  display: flex;
  gap: 12px;
  background: #f8fafc;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.88rem;
  color: #444;
  line-height: 1.65;
}
.usb-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }

/* ===== 散热治具图片容器 ===== */
.fixture-image-wrapper {
  margin-top: 16px;
}
.fixture-image-card {
  display: inline-block;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  max-width: 100%;
}
.fixture-image-card:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.fixture-image-inner {
  padding: 4px;
  line-height: 0;
}
.fixture-image-inner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.fixture-image-caption {
  text-align: center;
  font-size: 0.8rem;
  color: #94a3b8;
  padding: 8px 12px 10px;
  border-top: 1px solid #f1f5f9;
  letter-spacing: 0.5px;
}

.doc-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== 产品材料升级通知 ===== */
.material-notice {
  display: flex;
  gap: 20px;
  background: linear-gradient(135deg, #f0faf0 0%, #f6fff6 50%, #fafdf5 100%);
  border: 1px solid #b8d8b8;
  border-left: 4px solid #2d8a2d;
  border-radius: 14px;
  padding: 22px 28px;
  margin-bottom: 28px;
  align-items: flex-start;
  box-shadow: 0 2px 12px rgba(45,138,45,0.06);
  transition: box-shadow .2s;
}
.material-notice:hover { box-shadow: 0 4px 20px rgba(45,138,45,0.12); }
.mn-icon-wrap {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, #e6f5e6, #d4f0d4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(45,138,45,0.12);
}
.mn-icon-wrap .svg-icon {
  width: 28px; height: 28px;
  color: #2d8a2d;
}
.mn-body { flex: 1; min-width: 0; }
.mn-body h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: #1a4a1a;
  margin: 0 0 10px;
  line-height: 1.35;
}
.mn-body > p {
  font-size: 0.92rem;
  color: #3a5a3a;
  line-height: 1.75;
  margin: 0 0 10px;
}
.mn-highlight {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(45,138,45,0.08);
  border: 1px solid rgba(45,138,45,0.15);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.mn-highlight .svg-icon {
  width: 20px; height: 20px;
  color: #2d8a2d;
  flex-shrink: 0;
  margin-top: 1px;
}
.mn-highlight strong {
  font-size: 0.95rem;
  color: #1a4a1a;
  line-height: 1.6;
}
.mn-footer {
  font-size: 0.88rem;
  color: #5a7a5a;
  margin: 0;
}
.mn-footer a {
  color: #2d8a2d;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s;
}
.mn-footer a:hover { color: #1a6a1a; }

/* ===== WIRE 产品展示模块 ===== */
.wire-showcase {
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 20px;
}
.wire-showcase-header {
  text-align: center;
  margin-bottom: 28px;
}
.wire-showcase-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a2a3a;
  margin: 0 0 8px;
  position: relative;
  display: inline-block;
}
.wire-showcase-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #06f, #00d4d8);
  border-radius: 2px;
}
.wire-showcase-sub {
  font-size: 0.88rem;
  color: #7a8a9a;
  margin: 0;
  line-height: 1.6;
}

/* Grid 自适应布局 */
.wire-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

/* 单个产品卡片 */
.wire-showcase-item {
  background: #fff;
  border: 1px solid #e2eaf3;
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .25s, transform .25s;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.wire-showcase-item:hover {
  box-shadow: 0 8px 28px rgba(0,102,255,0.12);
  transform: translateY(-3px);
}

/* 图片容器 */
.wire-showcase-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fafbfc;
}
.wire-showcase-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
  box-sizing: border-box;
  transition: transform .4s ease;
}
.wire-showcase-item:hover .wire-showcase-img-wrap img {
  transform: scale(1.08);
}

/* 产品名称标签 */
.wire-showcase-label {
  display: block;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: #3a4a5a;
  padding: 12px 16px;
  background: #fafcfe;
  border-top: 1px solid #eef2f7;
}

/* ══ 图片放大弹窗 ══ */
.wire-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 99999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 40px;
  box-sizing: border-box;
}
.wire-lightbox.active {
  display: flex;
}
.wire-lightbox img {
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.wire-lightbox-name {
  color: #ccc;
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 16px;
  text-align: center;
}

/* 关闭按钮 */
.wire-lightbox-close {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  opacity: 0.7;
  transition: opacity .2s;
}
.wire-lightbox-close:hover { opacity: 1; }

/* 四向"点击空白处关闭"提示 */
.wire-lightbox-hint-top,
.wire-lightbox-hint-bottom,
.wire-lightbox-hint-left,
.wire-lightbox-hint-right {
  position: absolute;
  color: rgba(255,255,255,0.35);
  font-size: 0.78rem;
  pointer-events: none;
  user-select: none;
}
.wire-lightbox-hint-top    { top: 12px;    left: 50%; transform: translateX(-50%); }
.wire-lightbox-hint-bottom { bottom: 12px; left: 50%; transform: translateX(-50%); }
.wire-lightbox-hint-left   { left: 12px;   top: 50%;  transform: translateY(-50%) rotate(-90deg); }
.wire-lightbox-hint-right  { right: 12px;  top: 50%;  transform: translateY(-50%) rotate(90deg); }

/* WIRE 页面内容区背景调整（无Tab栏时） */
.hub-content.wire-only { padding: 32px 0 48px; background: #f5f8fc; }

/* ===== 产品搜索 iframe 嵌入 ===== */
.search-embed-wrap {
  width: 100%;
  background: #f5f8fc;
  padding: 0;
}
.products-embed-frame {
  width: 100%;
  min-height: 600px;
  height: 820px;
  border: none;
  display: block;
  background: #fff;
}

/* ===== 订货前说明：选型要点速查块 ===== */
.order-selection-block {
  background: #fff;
  border: 1px solid #d4e2f8;
  border-radius: 16px;
  padding: 24px 28px 28px;
  margin-bottom: 28px;
}
.osb-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: #0d1b2a;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e8f0fb;
}
.osb-title svg { color: var(--primary, #06f); flex-shrink: 0; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .hub-type-btn { padding: 14px 20px 11px; gap: 8px; }
  .htb-sub { display: none; }
  .knowledge-section { grid-template-columns: 1fr; }
  .k-card-wide, .k-card-half { grid-column: auto; }
  .selection-grid { grid-template-columns: repeat(2, 1fr); }
  .polar-grid { grid-template-columns: repeat(2, 1fr); }
  .polar-grid-3 { grid-template-columns: repeat(3, 1fr); }
  .circuit-grid { grid-template-columns: 1fr; }
  .order-selection-block { padding: 18px 16px 20px; }
}
@media (max-width: 600px) {
  .hub-type-btn { padding: 10px 14px 7px; gap: 6px; }
  .htb-icon { font-size: 1.1rem; }
  /* 手机端：允许标签换行，去掉 nowrap 和横向滚动 */
  .hub-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .hub-tab {
    padding: 8px 10px;
    font-size: 0.75rem;
    white-space: normal;   /* 允许文字换行 */
    flex: 1 1 calc(50% - 1px); /* 最多每行两个 */
    min-width: 0;
    justify-content: center;
    text-align: center;
    border-bottom: 2px solid transparent;
  }
  .hub-tab svg { width: 12px; height: 12px; }
  .hub-tab-bar { top: 48px; }
  .doc-header { flex-direction: column; gap: 12px; }
  .doc-item { flex-direction: column; gap: 12px; }
  .doc-item-num { width: 32px; height: 32px; font-size: 0.8rem; }
  .selection-grid { grid-template-columns: 1fr; }
  .k-highlight-box { flex-direction: column; }
  .polar-grid { grid-template-columns: repeat(2, 1fr); }
  .polar-grid-3 { grid-template-columns: 1fr; }
  .circuit-grid { grid-template-columns: 1fr; }
  .usage-sub-item { flex-direction: column; gap: 6px; }
  .fixture-image-card { max-width: 100%; }
  .fixture-image-caption { font-size: 0.75rem; padding: 6px 10px 8px; }
  .products-embed-frame { min-height: 500px; height: 700px; }
}