/* ============================================================
 * 产品选型页 · 新设计（?style=1 测试版，仅中文站）
 * 从 claude.ai 设计稿 以太网连接器选型.dc.html 的 <style> 块移植。
 * - 全部规则 scope 到 #vh-selector-root，避免污染站点 header/footer/全局滚动条
 * - 设计系统变量就地内联（--color-divider）
 * - 去掉 Google Fonts 依赖（国内站访问不到），用系统字体栈兜底
 * 对应 JS：static/js/selector_style1.js
 * ============================================================ */

#vh-selector-root{
  --color-divider: rgba(32,30,29,.4);
  font-family:'Archivo','PingFang SC','Microsoft YaHei','Source Han Sans SC','Noto Sans CJK SC',system-ui,sans-serif;
  color:#201e1d;
  background:#f5f5f5;
  min-height:60vh;
}
/* style=1 测试页不显示横幅顶部的白色标题与面包屑导航。 */
.nhnavs_title,.nhnavs_p{display:none !important;}
#vh-selector-root *{box-sizing:border-box;}
#vh-selector-root .grayscale{filter:grayscale(1) contrast(1.08);}

/* zebra body rows */
#vh-selector-root #gx-body tbody tr{background:#f5f5f5;}
#vh-selector-root #gx-body tbody tr:nth-child(even){background:#e4e4e4;}
#vh-selector-root #gx-body tbody tr:hover{background:#fff;}

/* compare pill button */
#vh-selector-root .gx-cmp{border:1px solid #bab6b6;background:transparent;color:#605d5d;}
#vh-selector-root .gx-cmp:hover{border-color:#c30d23;color:#c30d23;}

/* horizontal proxy scrollbar */
#vh-selector-root #gx-bar::-webkit-scrollbar{height:12px;}
#vh-selector-root #gx-bar::-webkit-scrollbar-thumb{background:#C30D23;border:2px solid transparent;background-clip:padding-box;}
#vh-selector-root #gx-bar::-webkit-scrollbar-thumb:hover{background:#C30D23;background-clip:padding-box;}
#vh-selector-root #gx-body{scrollbar-width:thin;}
#vh-selector-root #gx-body::-webkit-scrollbar{width:11px;height:11px;}
#vh-selector-root #gx-body::-webkit-scrollbar-thumb{background:#bab6b6;border-radius:0;border:3px solid transparent;background-clip:padding-box;}
#vh-selector-root #gx-body::-webkit-scrollbar-thumb:hover{background:#b3bcc7;background-clip:padding-box;border:3px solid transparent;}
#vh-selector-root #gx-body::-webkit-scrollbar-track{background:transparent;}

/* 冻结左两列（图示/料号）：表体冻结格必须有不透明斑马/hover 背景，
 * 否则横向滚动时下层列会透过来。表头冻结格背景是内联的 #c30d23（已不透明）。*/
#vh-selector-root #gx-body tbody tr .gx-frz{background:#f5f5f5;}
#vh-selector-root #gx-body tbody tr:nth-child(even) .gx-frz{background:#e4e4e4;}
#vh-selector-root #gx-body tbody tr:hover .gx-frz{background:#fff;}

/* sort triangles */
#vh-selector-root .gx-triup{border-bottom-color:#b0acac;}
#vh-selector-root .gx-tridn{border-top-color:#b0acac;}
#vh-selector-root .gx-sort:hover .gx-triup{border-bottom-color:#c30d23;}
#vh-selector-root .gx-sort:hover .gx-tridn{border-top-color:#c30d23;}

/* ===== 红底表头（#c30d23 + 白字）：表头内的箭头/图标/光圈需反白，
 * 只 scope 在 #gx-head 内，表体行里的对比/加购图标保持原样 ===== */
#vh-selector-root #gx-head .gx-triup{border-bottom-color:rgba(255,255,255,.55);}
#vh-selector-root #gx-head .gx-tridn{border-top-color:rgba(255,255,255,.55);}
#vh-selector-root #gx-head .gx-sort:hover .gx-triup{border-bottom-color:#fff;}
#vh-selector-root #gx-head .gx-sort:hover .gx-tridn{border-top-color:#fff;}
/* 筛选(下拉多选)图标：红底表头上统一纯白 */
#vh-selector-root #gx-head .gx-filter{background-color:#fff;}
#vh-selector-root #gx-head .gx-filter:hover{background-color:#fff;}
/* 点击打开时水平翻转 180°：gx-open 保持翻转态，gx-flip 播放一次翻转动画 */
#vh-selector-root .gx-filter{transition:transform .2s;}
#vh-selector-root .gx-filter.gx-open{transform:rotateY(180deg);}
#vh-selector-root .gx-filter.gx-flip{animation:gx-flip .34s ease forwards;}
/* 表头提示光圈改白色，否则红底上看不见 */
#vh-selector-root #gx-head .gx-hint::after{background:rgba(255,255,255,.55);}

/* filter / cart mask icons */
#vh-selector-root .gx-filter{background-color:#201e1d;}
#vh-selector-root .gx-filter:hover{background-color:#c30d23;}
#vh-selector-root .gx-cart{background-color:#201e1d;}
#vh-selector-root .gx-cart:hover{background-color:#ec3013;}

/* row download link */
#vh-selector-root .gx-dlrow{color:#605d5d;}
#vh-selector-root .gx-dlrow:hover{color:#c30d23;}
#vh-selector-root .gx-dlicon{background-color:#605d5d;}
#vh-selector-root .gx-dlrow:hover .gx-dlicon{background-color:#c30d23;}

/* filter-hint ping ring：仅进页面 / 翻页时闪 2 秒提示（.gx-ping 由 JS 临时挂上），
 * 平时不带 .gx-ping → 不出现光圈；后续筛选/对比/加购等操作都不闪 */
#vh-selector-root .gx-hint{position:relative;}
#vh-selector-root .gx-hint::after{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;border-radius:50%;background:rgba(236,48,19,.4);pointer-events:none;z-index:2;opacity:0;transform:translate(-50%,-50%) scale(.5);}
#vh-selector-root .gx-hint.gx-ping::after{animation:gx-ping 1s ease-out 0s 2 forwards;}

/* dropdown menu / popover scrollbars kept subtle */
#vh-selector-root [data-role="menu"]::-webkit-scrollbar{width:8px;}
#vh-selector-root [data-role="menu"]::-webkit-scrollbar-thumb{background:#c0c8d2;border-radius:0;}

@keyframes gx-ping{0%{transform:translate(-50%,-50%) scale(.5);opacity:.5;}70%,100%{transform:translate(-50%,-50%) scale(2.4);opacity:0;}}
@keyframes vh-fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes vh-slidein{from{transform:translateX(36px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes vh-pop{from{transform:scale(.96);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes vh-spin{to{transform:rotate(360deg);}}
@keyframes vh-drop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
/* 筛选图标水平翻转 180° */
@keyframes gx-flip{from{transform:rotateY(0deg);}to{transform:rotateY(180deg);}}
/* 下拉菜单像抽屉从表头下沿伸出：自上而下裁剪展开 + 轻微下滑 */
@keyframes gx-drawer{from{opacity:.4;transform:translateY(-4px);clip-path:inset(0 0 100% 0);}to{opacity:1;transform:none;clip-path:inset(0 0 0 0);}}

/* overlays / popovers / drawer are appended to <body>, so a few rules live unscoped
 * but under a unique prefix to stay isolated */
.vh-sel-overlay{position:fixed;inset:0;}
.vh-sel-pop{font-family:'Archivo','PingFang SC','Microsoft YaHei','Source Han Sans SC','Noto Sans CJK SC',system-ui,sans-serif;}
.vh-sel-pop [data-role="menu-scroll"]{scrollbar-width:thin;}
.vh-sel-image-preview{
  position:fixed;
  left:0;
  top:0;
  z-index:58;
  width:200px;
  height:200px;
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px);
  box-sizing:border-box;
  background:#fff;
  box-shadow:0 5px 12px rgba(0,0,0,.1);
  opacity:0;
  visibility:hidden;
  transform:translateY(4px);
  transition:opacity .14s ease,transform .14s ease,visibility 0s linear .14s;
  pointer-events:none;
}
.vh-sel-image-preview.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s;
}
.vh-sel-image-preview img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
@media (any-hover:none){
  .vh-sel-image-preview{display:none !important;}
}