/*!
 * filter.css —— 产品型号选型页（Fitok 式 filter 页）
 * 类名统一 dlxf- 前缀，避免与旧 plist.js 的 dlxp-* 冲突
 */

/* 选型页用更宽的条件列（左 280px），比产品/系列页的 250px 更舒展 */
body.dlx-page-filter .dlx-plist {
	grid-template-columns: 280px 1fr;
	gap: 28px;
}

/* 右列允许收缩：宽表格不撑破容器，改为表格区内横向滚动（同 Fitok） */
body.dlx-page-filter .dlx-plist > .dlxf-main { min-width: 0; max-width: 100%; }

/* ---------------- 左侧：条件树（手风琴） ---------------- */
/* 分组默认收起，仅 dlxf-open 组展开选项区（点击互斥展开，同 Fitok） */
.dlxf-group .dlxf-opts,
.dlxf-group .dlxf-range { display: none; }
.dlxf-group.dlxf-open .dlxf-opts,
.dlxf-group.dlxf-open .dlxf-range { display: block; }

.dlxf-side {
	background: #fff;
	border: 1px solid #e6ecea;
	border-radius: 10px;
	overflow: hidden;
	position: sticky;
	top: 74px;
}
.dlxf-side-hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 13px 16px;
	background: var(--dlx-green);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
}
.dlxf-side-hd .dlxf-clear-all {
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .5);
	color: #fff;
	font-size: 12px;
	padding: 4px 10px;
	border-radius: 4px;
	cursor: pointer;
	transition: .18s;
}
.dlxf-side-hd .dlxf-clear-all:hover { background: rgba(255, 255, 255, .32); }

.dlxf-group { border-bottom: 1px solid #eef2f0; }
.dlxf-group:last-child { border-bottom: 0; }
.dlxf-group > h4 {
	margin: 0;
	padding: 11px 16px 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #26302b;
	background: #f7faf8;
}
.dlxf-opts { padding: 4px 16px 10px; max-height: 208px; overflow-y: auto; }
.dlxf-opt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: 13px;
	color: #43514a;
	cursor: pointer;
	line-height: 1.5;
}
.dlxf-opt input { margin: 0; flex: 0 0 auto; accent-color: var(--dlx-green); }
.dlxf-opt .t { flex: 1 1 auto; }
.dlxf-opt .n { flex: 0 0 auto; font-size: 11.5px; color: #9aa8a1; }
.dlxf-opt:hover { color: var(--dlx-green); }
/* 2026-10-28：变截面(Ø8) 作为「铠装/保护管外径」分组内的单选项——沿用 .dlxf-opt 排版，
   与多选外径选项以分隔细线区隔，并用圆点强调单选语义（仅一个可选项）。
   外径选项在 .dlxf-opts 内独立滚动；本项置于滚动区之外、紧贴其下沿常驻可见。 */
.dlxf-secwrap { padding: 0 16px 10px; border-top: 1px dashed #dfe8e1; margin-top: -4px; }
.dlxf-opt-sec { margin: 0; padding-top: 9px; font-weight: 600; }
.dlxf-opt-sec input[type=radio] { width: 14px; height: 14px; }
.dlxf-opt-sec.dlxf-off { color: #b5b5b5; cursor: not-allowed; }

.dlxf-range { display: flex; align-items: center; gap: 6px; padding: 8px 16px 14px; }
.dlxf-range input {
	flex: 1 1 0;
	min-width: 0;
	padding: 6px 8px;
	border: 1px solid #d9e2dd;
	border-radius: 5px;
	font-size: 13px;
}
.dlxf-range input:focus { outline: none; border-color: var(--dlx-green); }
.dlxf-range .dash { color: #9aa8a1; }

.dlxf-loading { padding: 18px 16px; margin: 0; font-size: 13px; color: #8b9a90; }

/* ---------------- 右侧：chips 与工具条 ---------------- */
.dlxf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.dlxf-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 8px 5px 11px;
	background: #eef6ee;
	border: 1px solid #d8e8d8;
	border-radius: 999px;
	font-size: 12.5px;
	color: #2d5c33;
}
.dlxf-chip button {
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	color: #6b8b70;
	padding: 0 2px;
}
.dlxf-chip button:hover { color: #c0392b; }

.dlxf-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}
.dlxf-count { font-size: 14px; color: #43514a; font-weight: 600; }
.dlxf-back { font-size: 13px; color: #2a6a8d; text-decoration: none; }
.dlxf-back:hover { color: var(--dlx-green); }

/* ---------------- 型号表 ---------------- */
.dlxf-tablewrap { overflow-x: auto; border: 1px solid #e6ecea; border-radius: 10px; background: #fff; }
.dlxf-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.dlxf-table th {
	background: #f3f7f4;
	color: #2f3f35;
	font-weight: 600;
	text-align: left;
	padding: 10px 12px;
	white-space: nowrap;
	border-bottom: 1px solid #e6ecea;
}
/* 单元格内容一行显示（不换行），列宽随内容自适应加大，超出表格区横向滚动（同 Fitok） */
.dlxf-table td {
	padding: 10px 12px;
	border-bottom: 1px solid #f0f4f2;
	color: #4a5850;
	vertical-align: middle;
	white-space: nowrap;
}
/* 展开详情行内恢复换行 */
.dlxf-table tr.dlxf-detail > td { white-space: normal; }
.dlxf-table td.dlxf-lencell input { white-space: normal; }
/* 数值列保底宽度，空值列（—）不至于过窄 */
.dlxf-table tbody > tr:not(.dlxf-detail) > td:not(.c-name) { min-width: 96px; }
.dlxf-table tr:last-child td { border-bottom: 0; }
.dlxf-table tbody tr:hover { background: #fafdfa; }

.dlxf-table .c-pic { width: 54px; padding-right: 0; }
.dlxf-table .c-pic img { width: 46px; height: 46px; object-fit: contain; border-radius: 4px; background: #fafbfc; }
.dlxf-table .c-name { min-width: 190px; }
.dlxf-table .c-name .code {
	display: block;
	font-size: 11.5px;
	color: #96a49b;
	letter-spacing: .3px;
	margin-bottom: 2px;
	word-break: break-all;
}
.dlxf-table .c-name .nm { color: #22312a; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.dlxf-table .c-name .nm:hover { color: var(--dlx-green); }

.dlxf-table .c-act { white-space: nowrap; }
.dlxf-table .c-act input.dlx-qo-qty {
	width: 58px;
	padding: 5px 6px;
	border: 1px solid #d9e2dd;
	border-radius: 5px;
	font-size: 13px;
	margin-right: 6px;
	vertical-align: middle;
}
.dlxf-table .c-act input.dlx-qo-qty:focus { outline: none; border-color: var(--dlx-green); }
.dlxf-table .c-act .dlx-cart-add {
	display: inline-block;
	padding: 6px 12px;
	font-size: 12.5px;
	border: 0;
	border-radius: 5px;
	background: var(--dlx-green);
	color: #fff;
	cursor: pointer;
	vertical-align: middle;
	transition: .18s;
}
.dlxf-table .c-act .dlx-cart-add:hover { background: var(--dlx-green-d); }

.dlxf-empty {
	padding: 40px 16px;
	text-align: center;
	color: #8b9a90;
	font-size: 14px;
	border: 1px dashed #dde5e0;
	border-radius: 10px;
}

/* 选型页：询盘清单抽屉不阻断表格交互——
 * 抽屉打开时仍可点击行内「产品询盘」（再次点击即关闭抽屉）与「加入询盘清单」，
 * 与 Fitok 浮层行为一致；关闭仍可用抽屉右上角 × */
body.dlx-page-filter #dlxCartMask { pointer-events: none; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1000px) {
	body.dlx-page-filter .dlx-plist { grid-template-columns: 1fr; }
	.dlxf-side { position: static; }
	.dlxf-opts { max-height: none; }
}

/* ---------- 分页条（Fitok 式） ---------- */
.dlxf-pager {
	display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
	gap: 6px; margin: 18px 0 8px; font-size: 14px; color: #2c3a33;
}
.dlxf-pg-btn {
	min-width: 36px; height: 34px; padding: 0 10px;
	border: 1px solid #c8d2cb; border-radius: 4px; background: #fff;
	color: #2c3a33; font-size: 14px; cursor: pointer;
}
.dlxf-pg-btn:hover:not(:disabled) { border-color: #2f9e44; color: #2f9e44; }
.dlxf-pg-btn:disabled { opacity: .45; cursor: default; }
.dlxf-pg-num { padding: 0 8px; }
.dlxf-pg-cur, .dlxf-pg-cur:hover:not(:disabled) {
	background: #2f9e44; border-color: #2f9e44; color: #fff; font-weight: 600;
}
.dlxf-pg-dots { min-width: 20px; text-align: center; color: #8a968e; }
.dlxf-pg-size { margin-left: 22px; color: #43514a; display: inline-flex; align-items: center; gap: 8px; }
.dlxf-pg-sel {
	height: 32px; padding: 0 6px; border: 1px solid #c8d2cb; border-radius: 4px;
	background: #fff; color: #2c3a33; font-size: 14px; cursor: pointer;
}
@media (max-width: 760px) {
	.dlxf-pager { justify-content: flex-start; }
	.dlxf-pg-size { margin-left: 0; width: 100%; }
}

/* ---------- Fitok 式行展开详情 ---------- */
.dlxf-table .c-name { white-space: nowrap; }
.dlxf-exp {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; margin-right: 8px; padding: 0;
	border: 1px solid #c8d2cb; border-radius: 4px; background: #fff;
	cursor: pointer; vertical-align: middle; transition: .15s;
}
.dlxf-exp:hover { border-color: var(--dlx-green); }
.dlxf-exp-i {
	display: block; width: 0; height: 0;
	border-left: 4px solid transparent; border-right: 4px solid transparent;
	border-top: 5px solid #43514a; transition: transform .15s;
}
.dlxf-table tr.dlxf-open .dlxf-exp-i { transform: rotate(180deg); border-top: 0; border-bottom: 5px solid var(--dlx-green); }
.dlxf-table tr.dlxf-open .c-name .nm { color: var(--dlx-green); }

.dlxf-detail > td { background: #fafbfa; padding: 14px 16px !important; border-bottom: 1px solid #eef2f0 !important; white-space: normal !important; }
.dlxf-detail-in { display: flex; gap: 22px; align-items: flex-start; }
.dlxf-d-img {
	flex: 0 0 132px; min-height: 132px;
	background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><rect width="48" height="48" fill="none"/><path d="M8 34 L20 20 L28 28 L34 22 L40 34 Z" fill="%23e2eae5"/><circle cx="17" cy="15" r="4" fill="%23e2eae5"/></svg>') center center no-repeat;
	background-size: 56px 56px;
	border: 1px dashed #dde5e0; border-radius: 6px;
}
.dlxf-d-img img { width: 132px; height: 132px; object-fit: contain; background: #fff; border: 1px solid #eef2f0; border-radius: 6px; }
.dlxf-d-body { flex: 1 1 auto; min-width: 0; }
.dlxf-d-desc { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: #22312a; line-height: 1.55; }
.dlxf-d-model { margin: 0 0 12px; font-size: 13px; color: #4a5850; }
.dlxf-d-model .dlxf-d-mcode { font-weight: 600; color: #22312a; }
.dlxf-d-qty {
	display: inline-flex; align-items: center;
	border: 1px solid #c8d2cb; border-radius: 5px; overflow: hidden; margin-bottom: 14px;
}
.dlxf-d-qty .dlxf-d-step {
	width: 32px; height: 32px; border: 0; background: #fff;
	font-size: 16px; color: #43514a; cursor: pointer; line-height: 1;
}
.dlxf-d-qty .dlxf-d-step:hover { background: #eef6ee; color: var(--dlx-green); }
.dlxf-d-qty .dlxf-d-n { min-width: 44px; text-align: center; font-size: 14px; color: #22312a; border-left: 1px solid #e6ecea; border-right: 1px solid #e6ecea; line-height: 32px; }
.dlxf-d-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.dlxf-d-inq {
	padding: 9px 22px; border: 0; border-radius: 5px;
	background: var(--dlx-green); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: .18s;
}
.dlxf-d-inq:hover { background: var(--dlx-green-d); }
/* 「加入询盘清单」按钮：颜色/规格对齐产品页「产品选型」页签 .pdp-sel-quick .dlx-add-btn（橙红实底白字） */
.dlxf-d-addwrap .dlx-cart-add {
	display: inline-block; padding: 10px 18px; font-size: 13.5px; line-height: 1.2;
	border: 0; border-radius: 6px; background: #e8553a;
	color: #fff; font-weight: 600; cursor: pointer; transition: .18s;
}
.dlxf-d-addwrap .dlx-cart-add:hover { background: #d04226; }
/* 「加入对比」按钮：颜色/规格对齐产品页「产品选型」页签 .pdp-sel-quick .dlx-btn（绿实底白字） */
.dlxf-d-cmp {
	display: inline-block; padding: 10px 18px; font-size: 13.5px; line-height: 1.2;
	border: 0; border-radius: 6px; background: #339933; color: #fff;
	cursor: pointer; transition: .18s; font-weight: 600;
}
.dlxf-d-cmp:hover { background: #2a7d2a; }
.dlxf-d-cmp.is-in { background: #2a7d2a; }
.dlxf-d-cmp.is-in:hover { background: #22661f; }

/* ---------- 加入对比：浮条 + 对比弹窗（与产品页 dlx-product-specs 同风格） ---------- */
.dlxf-cmp-bar {
	position: fixed; right: 18px; bottom: 96px; z-index: 9998;
	display: flex; align-items: center; gap: 8px;
	background: #fff; border: 1px solid #cbd5e1; border-radius: 8px;
	padding: 8px 12px; box-shadow: 0 6px 20px rgba(15, 30, 60, .14); font-size: 13px;
}
.dlxf-cmp-bar b { color: #0b2f5b; }
/* 浮条按钮：配色/规格对齐产品页对比浮条 .dlx-bar .dlx-btn（绿实底白字，2026-10-25 用户要求） */
.dlxf-cmp-bar button {
	border: 0; border-radius: 8px; background: #339933; color: #fff;
	font-size: 13px; font-weight: 600; line-height: 1.2; padding: 6px 12px; cursor: pointer;
}
.dlxf-cmp-bar button:hover { background: #2a7d2a; }
.dlxf-cmp-mask {
	position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
	background: rgba(10, 31, 22, .66); backdrop-filter: blur(3px); padding: 24px;
}
.dlxf-cmp-modal {
	background: #fff; border-radius: 14px; box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
	max-width: 1400px; width: 94vw; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
}
.dlxf-cmp-hd {
	background: #1e4d38; color: #fff; padding: 14px 20px; display: flex;
	align-items: center; justify-content: space-between; flex: none;
}
.dlxf-cmp-hd h3 { margin: 0; color: #fff; font-size: 17px; letter-spacing: .5px; }
.dlxf-cmp-x {
	border: 0; background: rgba(255, 255, 255, .18); color: #fff; cursor: pointer;
	font-size: 17px; line-height: 1; padding: 4px 10px; border-radius: 10px;
}
.dlxf-cmp-x:hover { background: #c0392b; }
.dlxf-cmp-bd { overflow: auto; padding: 0; }
.dlxf-cmp-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 860px; font-size: 14px; background: #fff; }
.dlxf-cmp-table th, .dlxf-cmp-table td {
	border-bottom: 1px solid #e3eae5; border-right: 1px solid #e3eae5;
	padding: 11px 16px; text-align: center; vertical-align: middle; color: #21332a; background: #fff;
}
.dlxf-cmp-table td { min-width: 170px; font-weight: 600; }
.dlxf-cmp-table thead th { position: sticky; top: 0; background: #1e4d38; color: #fff; z-index: 2; }
.dlxf-cmp-table thead th a { color: #aee8c8; font-weight: 700; }
.dlxf-cmp-table thead th:first-child { position: sticky; left: 0; z-index: 3; background: #1e4d38; }
.dlxf-cmp-table tbody th {
	background: #eaf3ee; color: #1e4d38; font-weight: 700; text-align: left;
	white-space: nowrap; min-width: 130px; position: sticky; left: 0; z-index: 1;
}
.dlxf-cmp-table tbody tr:nth-child(even) td { background: #f5faf7; }
.dlxf-cmp-table tbody tr:hover td { background: #e2f0e8; }
.dlxf-cmp-del {
	margin-left: 8px; border: 0; background: rgba(255, 255, 255, .18); color: #fff;
	cursor: pointer; font-size: 13px; line-height: 1; padding: 3px 7px; border-radius: 10px;
}
.dlxf-cmp-del:hover { background: #c0392b; }
.dlxf-cmp-prod { display: block; font-weight: 400; font-size: 11px; color: #9fb8ab; white-space: normal; max-width: 240px; margin-top: 2px; }
@media (max-width: 760px) {
	.dlxf-cmp-bar { right: 12px; bottom: 96px; }
}
@media (max-width: 760px) {
	.dlxf-detail-in { flex-direction: column; }
	.dlxf-d-img img { width: 96px; height: 96px; }
}

/* 变截面(Ø8) 开关 */
.dlxf-varsec{margin:6px 12px 8px;padding:9px 11px;background:#f3faf3;border:1px solid #cfe6cf;border-radius:6px;}
.dlxf-varsec .dlxf-vs-lab{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#2c822c;cursor:pointer;}
.dlxf-varsec input[type=checkbox]{width:16px;height:16px;accent-color:#339933;cursor:pointer;margin:0;}
.dlxf-varsec.dlxf-vs-disabled{opacity:.5;background:#f5f5f5;border-color:#e3e3e3;}
.dlxf-varsec.dlxf-vs-disabled .dlxf-vs-lab{color:#999;cursor:not-allowed;}
/* 2026-10-28：变截面已移入「铠装/保护管外径」分组（.dlxf-opt-sec），此处样式仅作历史兼容，不再渲染 */