/* ═══════════════════════════════════════════════════════════
   产品列表页 products.html — 对齐扣子 Parametric Search 布局
   全部作用域限定在 .pl-page 下，不影响其他页面样式
   ═══════════════════════════════════════════════════════════ */
.pl-page { color:#374151; font-size:14px; }
.pl-page * { box-sizing:border-box; }

/* Breadcrumb（英文） */
.pl-breadcrumb { display:flex; align-items:center; gap:.5rem; font-size:13px; color:#6b7280; padding:14px 0; border-bottom:1px solid #e5e7eb; }
.pl-breadcrumb a { color:#6b7280; text-decoration:none; }
.pl-breadcrumb a:hover { color:#2563eb; }
.pl-breadcrumb .cur { color:#111827; font-weight:500; }
.pl-breadcrumb svg { width:14px; height:14px; flex-shrink:0; }

.pl-wrap { max-width:1400px; margin:0 auto; padding:8px 16px 48px; }

/* Parametric Search 卡片 */
.pl-search-card { border:1px solid #e5e7eb; border-radius:8px; background:#fff; margin-bottom:24px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.pl-search-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid #e5e7eb; background:#f9fafb; border-radius:8px 8px 0 0; }
.pl-search-title { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#111827; }
.pl-search-title svg { width:16px; height:16px; color:#2563eb; }
.pl-search-btns { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pl-btn { display:inline-flex; align-items:center; gap:4px; padding:6px 10px; font-size:12px; font-weight:500; border:1px solid #d1d5db; border-radius:6px; background:#fff; color:#4b5563; cursor:pointer; transition:all .15s; }
.pl-btn:hover { background:#f3f4f6; }
.pl-btn svg { width:13px; height:13px; }
.pl-btn-blue { color:#2563eb; border-color:#93c5fd; }
.pl-btn-blue:hover { background:#eff6ff; }

/* 筛选列：横向滚动 */
.pl-filter-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:6px; }
.pl-filter-row { display:flex; min-width:max-content; }
.pl-col { flex:0 0 auto; border-right:1px solid #e5e7eb; width:140px; }
.pl-col:last-child { border-right:0; }
.pl-col.range-col { width:100px; }
.pl-col-head { padding:10px 12px; background:#f3f4f6; border-bottom:1px solid #e5e7eb; }
.pl-col-head h4 { margin:0; font-size:11px; font-weight:700; color:#374151; text-transform:uppercase; letter-spacing:.04em; }
.pl-col-body { padding:4px 8px; max-height:288px; overflow-y:auto; }

/* 筛选选项（颜色区分：Status 紫 / AEC 翠 / Polarity 蓝 / Package 橙 / Family 绿） */
.pl-opt { display:flex; align-items:center; gap:8px; font-size:12px; cursor:pointer; padding:6px 8px; border-radius:6px; transition:background .15s; }
.pl-opt:hover { background:#f3f4f6; }
.pl-opt.active { font-weight:600; }
.pl-opt input { width:14px; height:14px; accent-color:#2563eb; cursor:pointer; flex-shrink:0; }
.pl-opt .pl-opt-label { flex:1; color:#374151; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl-opt .pl-opt-label.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.pl-opt .pl-opt-count { color:#9ca3af; font-size:10px; flex-shrink:0; }

/* Status — 紫 */
.pl-opt.c-status input { accent-color:#9333ea; }
.pl-opt.c-status:hover, .pl-opt.c-status.active { background:#faf5ff; }
/* AEC-Q101 — 翠绿 */
.pl-opt.c-aec input { accent-color:#059669; }
.pl-opt.c-aec:hover, .pl-opt.c-aec.active { background:#ecfdf5; }
/* Polarity — 蓝 */
.pl-opt.c-polarity input { accent-color:#2563eb; }
.pl-opt.c-polarity:hover, .pl-opt.c-polarity.active { background:#eff6ff; }
/* Package — 橙 */
.pl-opt.c-package input { accent-color:#ea580c; }
.pl-opt.c-package:hover, .pl-opt.c-package.active { background:#fff7ed; }
/* Family — 绿 */
.pl-opt.c-family input { accent-color:#16a34a; }
.pl-opt.c-family:hover, .pl-opt.c-family.active { background:#f0fdf4; }

/* 数值范围滑块（扣子竖向双滑块） */
.pl-range { padding:10px 12px; display:flex; flex-direction:column; align-items:stretch; }
.pl-range-top, .pl-range-bot { width:100%; }
.pl-range-top input, .pl-range-bot input { width:100%; padding:4px 2px; font-size:11px; text-align:center; border:1px solid #d1d5db; border-radius:4px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#374151; background:#fff; }
.pl-range-top input:focus, .pl-range-bot input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.15); }
.pl-range-slider { position:relative; width:32px; height:140px; margin:10px auto; flex-shrink:0; }
.pl-range-slider .pl-rt-bg { position:absolute; left:50%; top:1px; bottom:1px; width:4px; transform:translateX(-50%); background:#e5e7eb; border-radius:999px; }
.pl-range-slider .pl-rt-active { position:absolute; left:50%; width:4px; transform:translateX(-50%); background:#2563eb; border-radius:999px; }
.pl-range-slider input[type=range] { position:absolute; left:50%; top:50%; width:140px; height:32px; transform:translate(-50%,-50%) rotate(-90deg); margin:0; background:transparent; pointer-events:none; -webkit-appearance:none; appearance:none; }
.pl-range-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; pointer-events:auto; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid #2563eb; box-shadow:0 1px 2px rgba(0,0,0,.2); cursor:pointer; }
.pl-range-slider input[type=range]::-moz-range-thumb { pointer-events:auto; width:14px; height:14px; border-radius:50%; background:#fff; border:2px solid #2563eb; cursor:pointer; }
.pl-range-reset { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:6px; font-size:11px; color:#9ca3af; cursor:pointer; }
.pl-range-reset input { width:13px; height:13px; accent-color:#2563eb; cursor:pointer; }

/* Part Number 搜索行 */
.pl-partnum { display:flex; align-items:center; gap:10px; padding:12px 18px; border-top:1px solid #e5e7eb; background:#f9fafb; }
.pl-partnum > label { font-size:12px; font-weight:500; color:#6b7280; white-space:nowrap; }
.pl-pn-wrap { position:relative; flex:1; max-width:420px; }
.pl-pn-wrap svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:#9ca3af; }
.pl-partnum input { width:100%; padding:8px 10px 8px 32px; border:1px solid #d1d5db; border-radius:6px; font-size:13px; background:#fff; }
.pl-partnum input:focus { outline:none; border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.15); }
.pl-pn-clear { color:#9ca3af; cursor:pointer; background:none; border:none; padding:4px; display:none; flex-shrink:0; }
.pl-pn-clear:hover { color:#4b5563; }

/* 结果头部 */
.pl-results-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.pl-results-head .pl-total { font-size:13px; color:#6b7280; }
.pl-results-head .pl-total b { color:#111827; }
.pl-sel-count { margin-left:8px; font-size:12px; color:#2563eb; font-weight:600; }
.pl-results-btns { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pl-res-btn { display:inline-flex; align-items:center; gap:4px; padding:6px 10px; font-size:12px; font-weight:500; border:1px solid #d1d5db; border-radius:6px; background:#fff; color:#4b5563; cursor:pointer; transition:all .15s; }
.pl-res-btn:hover { background:#f3f4f6; }
.pl-res-btn svg { width:13px; height:13px; }
.pl-res-btn.primary { color:#2563eb; border-color:#93c5fd; }
.pl-res-btn.primary:hover { background:#eff6ff; }

/* 表格 */
.pl-table-scroll { border:1px solid #e5e7eb; border-radius:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.pl-table { width:100%; border-collapse:collapse; font-size:13px; min-width:960px; }
.pl-table thead th { background:#f9fafb; text-align:left; padding:10px 12px; font-size:11px; font-weight:600; color:#4b5563; white-space:nowrap; border-bottom:1px solid #e5e7eb; }
.pl-table tbody td { padding:8px 12px; border-bottom:1px solid #f3f4f6; font-size:12px; color:#374151; white-space:nowrap; vertical-align:middle; }
.pl-table tbody tr:nth-child(even) { background:#fafafa; }
.pl-table tbody tr:hover { background:#eff6ff; }
.pl-table .pl-cmp { text-align:center; width:36px; }
.pl-table .pl-cmp input { width:14px; height:14px; accent-color:#2563eb; cursor:pointer; }
.pl-pn { color:#2563eb; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; font-weight:600; text-decoration:none; }
.pl-pn:hover { color:#1d4ed8; text-decoration:underline; }
.pl-link { display:inline-flex; align-items:center; gap:4px; color:#2563eb; font-size:12px; text-decoration:none; }
.pl-link:hover { color:#1d4ed8; }
.pl-dash { color:#d1d5db; }
.pl-yes { color:#059669; font-weight:600; }
.pl-no { color:#9ca3af; }
.pl-st-active { color:#059669; font-weight:600; }
.pl-st-obsolete { color:#ef4444; font-weight:600; }
.pl-st-other { color:#d97706; font-weight:600; }
.pl-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* 分页 */
.pl-pagination { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-top:16px; }
.pl-pagination .pl-pageinfo { font-size:12px; color:#6b7280; }
.pl-pager { display:flex; gap:4px; flex-wrap:wrap; }
.pl-pager button { padding:6px 12px; font-size:12px; border:1px solid #d1d5db; border-radius:6px; background:#fff; color:#374151; cursor:pointer; transition:all .15s; }
.pl-pager button:hover:not(:disabled) { background:#f3f4f6; }
.pl-pager button:disabled { opacity:.4; cursor:not-allowed; }
.pl-pager button.active { background:#2563eb; color:#fff; border-color:#2563eb; }

/* 空 / 加载态 */
.pl-empty, .pl-loading { text-align:center; padding:60px 0; color:#9ca3af; }
.pl-empty svg { width:48px; height:48px; color:#d1d5db; margin:0 auto .75rem; }
.pl-loading .spin { width:24px; height:24px; border:2px solid #93c5fd; border-top-color:#2563eb; border-radius:50%; margin:0 auto 10px; animation:plspin .8s linear infinite; }
@keyframes plspin { to { transform:rotate(360deg); } }

/* 对比弹窗 */
.pl-modal-mask { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; padding:16px; }
.pl-modal-mask.open { display:flex; }
.pl-modal { background:#fff; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.25); max-width:960px; width:100%; max-height:85vh; overflow:auto; }
.pl-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #e5e7eb; }
.pl-modal-head h3 { margin:0; font-size:16px; font-weight:700; color:#111827; }
.pl-modal-close { background:none; border:none; font-size:22px; color:#9ca3af; cursor:pointer; line-height:1; }
.pl-modal-close:hover { color:#4b5563; }
.pl-modal-body { padding:16px 20px; }
.pl-cmp-table { width:100%; border-collapse:collapse; font-size:12px; }
.pl-cmp-table th, .pl-cmp-table td { border:1px solid #e5e7eb; padding:8px 10px; text-align:left; vertical-align:top; }
.pl-cmp-table th { background:#f9fafb; color:#4b5563; font-weight:600; white-space:nowrap; }
.pl-cmp-table td.pl-cmp-model { color:#2563eb; font-family:ui-monospace,monospace; font-weight:600; }
.pl-modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid #e5e7eb; }
.pl-modal-foot button { padding:7px 14px; font-size:12px; border-radius:6px; cursor:pointer; border:1px solid #d1d5db; background:#fff; color:#4b5563; }
.pl-modal-foot .pl-btn-close { background:#2563eb; color:#fff; border-color:#2563eb; }
.pl-modal-foot button:hover { filter:brightness(.97); }