@charset "UTF-8";
/* =============================================================================
 * mldz 主题自定义覆盖层 —— 只放我们新增/调整的样式。
 * 原站 layout.css 保持原样不动，升级/比对时互不干扰。
 * ========================================================================== */

/* ── 0. 修复原主题断点缺口：1024–1279px 顶部导航消失 ──────────────────────────
 * 原 layout.css：.header-nav 基础样式是 display:none（移动端抽屉），
 * 只有 @media(min-width:1280px) 才改回 display:block；
 * 而 @media(min-width:1024px) 已经把汉堡按钮 .mobnav-btn 设成 display:none !important。
 * ⇒ 1024–1279px 之间既没有导航条、也没有汉堡按钮，导航完全消失（原站同样有此问题）。
 * 这里补上这一段区间的显示规则。 */
@media (min-width: 1024px) and (max-width: 1279px) {
	.header-nav {
		display: block;
		position: static;
		width: auto;
		height: auto;
		background: none;
		overflow-y: visible;
		padding: 0 0 0 200px;
	}
	/* 该区间横向空间紧张，缩一点字号与间距，保证 7 个一级栏目排得下 */
	.header-nav li h3 a { font-size: 14px; }
	.header-nav > ul > li { padding: 0 9px; }
}

/* ── 1. 顶部搜索：图标旁加「型号搜索」文案 ────────────────────────────────── */
.header-right .search-con {
	display: flex !important;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.header-right .search-label {
	font-size: 14px;
	color: #666;
	line-height: 1;
	transition: color .25s;
}
.header-right .search-con:hover .search-label {
	color: #d82019;
}
/* 移动端只留图标，省空间 */
@media (max-width: 991px) {
	.header-right .search-label { display: none; }
}

/* ── 2. 首页产品区：复用内页 product-list 卡片，补首页间距 ─────────────────── */
.indxProduct .product-list ul { margin: 0 -10px; }
.indxProduct .product-list li { padding: 10px; }
.indxProduct .index-more { margin-top: 10px; }

/* ── 2b. 内页顶部横幅：贴边全宽显示 ────────────────────────────────────────────
 * 原站把图按原始尺寸居中（width:auto + left:50% + translateX），窄屏裁切、宽屏留白。
 * 这里改成撑满视口宽度、高度自适应，左右不留白。 */
.inside-banner {
	width: 100%;
	overflow: hidden;
}
.inside-banner img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	left: 0;
	transform: none;
	-webkit-transform: none;
}
@media (max-width: 767px) {
	/* 移动端不再限制 120px 死高，交给等比缩放，避免变形/黑边 */
	.inside-banner img { max-height: none; }
}

/* ── 2c. 产品栏目页：不显示顶部横幅，直接进产品内容 ───────────────────────────── */
.page-noBanner .inside-banner { display: none; }

/* ── 3. 页脚二维码（后台可配，可放多张）────────────────────────────────────── */
.footer .footer-qrcode {
	display: flex;
	gap: 18px;
	justify-content: flex-end;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.footer .footer-qrcode .qr-item { text-align: center; }
.footer .footer-qrcode .qr-item img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	background: #fff;
	padding: 4px;
	border-radius: 2px;
	display: block;
}
/* 页脚「技术支持」：跟在版权后面，弱化处理不抢版权信息 */
.footer .tech-support { margin-left: 10px; white-space: nowrap; }
.footer .tech-support a { color: inherit; opacity: .85; transition: opacity .2s, color .2s; }
.footer .tech-support a:hover { color: #d82019; opacity: 1; }
@media (max-width: 767px) {
	.footer .tech-support { display: block; margin-left: 0; margin-top: 4px; }
}

.footer .footer-qrcode .qr-item span {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #999;
	line-height: 1.4;
}
@media (max-width: 767px) {
	.footer .footer-qrcode { justify-content: center; }
	.footer .footer-qrcode .qr-item img { width: 88px; height: 88px; }
}

/* ── 4. 首页合作伙伴：长方形 logo 静态网格（8-10 个一屏全显示，不再走轮播）────────
 * 每格是横向长方形，logo 用 contain 完整显示不裁切、不拉伸。 */
.inxpart-list .partner-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.inxpart-list .partner-grid li { float: none; margin: 0; }
.inxpart-list .partner-grid li a {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 长方形：宽高比 2.4 : 1 */
	aspect-ratio: 12 / 5;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid #dbdced;
	overflow: hidden;
	transition: border-color .25s, box-shadow .25s, transform .25s;
}
.inxpart-list .partner-grid li a:hover {
	border-color: #d82019;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}
.inxpart-list .partner-grid li img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: none;
}
.inxpart-list .partner-grid li:hover img { transform: none; }
@media (max-width: 1023px) {
	.inxpart-list .partner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 767px) {
	.inxpart-list .partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

/* ── 5. 多级栏目：子栏目列表 ────────────────────────────────────────────────── */
.cat-empty { text-align: center; padding: 60px 0; color: #999; }

.cat-grid { display: grid; gap: 20px; list-style: none; margin: 0; padding: 0; }
.cat-grid li { float: none; margin: 0; }
.cat-grid > li > a {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #e3e4ee;
	color: #333;
	transition: border-color .25s, box-shadow .25s, transform .25s;
}
.cat-grid > li > a:hover {
	border-color: #d82019;
	box-shadow: 0 6px 18px rgba(216, 32, 25, .10);
	transform: translateY(-2px);
}
.cat-grid .cat-logo {
	/* logo 位随卡片宽度伸缩：卡片被挤窄时（侧栏 + 多列）也给品牌名留够位置，
	   固定 128px 会在 1024px 三列时把文字压到 33px 而溢出 */
	flex: 0 1 clamp(76px, 32%, 128px);
	/* 长方形 logo 位，contain 不裁切 */
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fafbfc;
	border: 1px solid #eceef4;
	overflow: hidden;
}
.cat-grid .cat-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cat-grid .cat-text { min-width: 0; }
.cat-grid .cat-name {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: #222;
	/* 「MINMAX模块电源 AC/DC」这类长名允许换行，绝不横向溢出被裁掉 */
	overflow-wrap: anywhere;
	word-break: break-word;
}
.cat-grid > li > a:hover .cat-name { color: #d82019; }
.cat-grid .cat-desc {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-style: normal;
	line-height: 1.6;
	color: #888;
}
/* 品牌层：一行 3 个（带 logo，卡片更宽） */
.cat-grid--brand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 系列层：纯文字，一行 4 个，居中显示 */
.cat-grid--series { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cat-grid--series > li > a { justify-content: center; text-align: center; padding: 18px 14px; }
.cat-grid--series .cat-name { font-size: 15px; font-weight: 500; }
/* 1280 以下：正文区被侧栏挤窄，品牌卡改两列、系列改三列，避免文字被压扁 */
@media (max-width: 1279px) {
	.cat-grid--brand { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cat-grid--series { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.cat-grid--brand, .cat-grid--series { grid-template-columns: 1fr; gap: 12px; }
	.cat-grid .cat-logo { flex-basis: 96px; }
}

/* ── 6. 规格参数表（三级/四级页，可横向滑动）───────────────────────────────── */
.spec-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid #e3e4ee;
	background: #fff;
}
.spec-table {
	width: 100%;
	/* 不设 min-width：让表格随容器收缩、靠换行把参数放进一屏，而不是整屏左右拖动 */
	border-collapse: collapse;
	font-size: 12.5px;
	line-height: 1.55;
	table-layout: auto;
}
.spec-table thead th {
	position: sticky;
	top: 0;
	background: #f5f6fa;
	color: #333;
	font-weight: 600;
	text-align: center;
	/* 表头也允许折行，否则「输入电压 (VDC)」这类会把列撑宽 */
	white-space: normal;
	word-break: break-word;
	padding: 10px 8px;
	border-bottom: 2px solid #d82019;
}
.spec-table tbody th,
.spec-table tbody td {
	padding: 9px 8px;
	border-bottom: 1px solid #eceef4;
	text-align: center;
	color: #555;
	vertical-align: middle;
	/* 参数值常是「3.3、5、9、12、15、±12」这种长串，允许在任意处断行 */
	overflow-wrap: anywhere;
	word-break: break-word;
}
.spec-table tbody th {
	font-weight: 600;
	color: #222;
	text-align: left;
	background: #fcfcfd;
	white-space: normal;
}
/* 型号列与详情列不折行，保证可读与可点 */
.spec-table thead th:first-child,
.spec-table tbody th:first-child { min-width: 92px; }
.spec-table thead th:last-child,
.spec-table tbody td:last-child { width: 62px; white-space: nowrap; }
.spec-table tbody tr:hover th,
.spec-table tbody tr:hover td { background: #fff7f7; }
.spec-table .spec-more {
	display: inline-block;
	padding: 4px 14px;
	border: 1px solid #d82019;
	color: #d82019;
	white-space: nowrap;
	transition: background .2s, color .2s;
}
.spec-table .spec-more:hover { background: #d82019; color: #fff; }
.spec-hint { display: none; }

/* 手机：9 列表格再怎么压也读不了，改成「一行一张卡片」的堆叠式，
   每格左侧显示列名（data-label），彻底不用左右滑动。 */
@media (max-width: 767px) {
	.spec-table-wrap { border: 0; background: transparent; overflow-x: visible; }
	.spec-table { min-width: 0; font-size: 13px; }
	.spec-table thead { display: none; }
	.spec-table tbody tr {
		display: block;
		margin-bottom: 12px;
		background: #fff;
		border: 1px solid #e3e4ee;
	}
	.spec-table tbody tr:hover th,
	.spec-table tbody tr:hover td { background: transparent; }
	.spec-table tbody th,
	.spec-table tbody td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		width: auto;
		padding: 9px 12px;
		text-align: right;
		border-bottom: 1px solid #f2f3f7;
	}
	.spec-table tbody th {
		background: #fafbfc;
		font-size: 15px;
		border-bottom: 1px solid #e3e4ee;
	}
	.spec-table tbody tr > *:last-child { border-bottom: 0; }
	.spec-table tbody th::before,
	.spec-table tbody td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		color: #999;
		font-weight: 400;
		font-size: 12px;
		text-align: left;
	}
}

/* ── 7. 产品页两栏布局：左侧固定分类栏 + 右侧内容 ──────────────────────────── */
.prod-layout {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}
.prod-main { min-width: 0; }

.prod-side {
	/* 跟随滚动吸顶（顶部导航约 100px，留 20px 呼吸位） */
	position: sticky;
	top: 120px;
	background: #fff;
	border: 1px solid #e3e4ee;
	/* 网格项默认 min-width:auto，会被内容（移动端 11 项横排菜单）撑破整页；
	   置 0 才能让下面的 overflow-x:auto 真正生效 */
	min-width: 0;
}
.prod-side-hd {
	padding: 16px 18px;
	background: #d82019;
	color: #fff;
}
.prod-side-hd h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: #fff; }
.prod-side-hd span { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .12em; opacity: .75; }

.prod-side-nav ul { list-style: none; margin: 0; padding: 0; }
.prod-side-nav > ul > li { border-bottom: 1px solid #eceef4; }
.prod-side-nav > ul > li:last-child { border-bottom: 0; }
.prod-side-nav > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 18px;
	font-size: 14px;
	line-height: 1.5;
	color: #444;
	transition: color .2s, background .2s, padding-left .2s;
}
.prod-side-nav > ul > li > a:hover {
	color: #d82019;
	background: #fafbfc;
	padding-left: 22px;
}
.prod-side-nav > ul > li.is-active > a { color: #d82019; font-weight: 600; background: #fff6f5; }
.prod-side-nav .caret {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	transform: rotate(-45deg);
	opacity: .45;
}
.prod-side-nav > ul > li.is-active .caret { transform: rotate(45deg); opacity: .9; }

.prod-side-sub { background: #fbfbfd; border-top: 1px solid #eceef4; }
.prod-side-sub li { border-bottom: 1px dashed #e8eaf0; }
.prod-side-sub li:last-child { border-bottom: 0; }
.prod-side-sub a {
	display: block;
	padding: 10px 18px 10px 30px;
	font-size: 13px;
	line-height: 1.5;
	color: #777;
	position: relative;
	transition: color .2s, background .2s;
}
.prod-side-sub a::before {
	content: '';
	position: absolute;
	left: 19px;
	top: 50%;
	width: 4px;
	height: 1px;
	background: currentColor;
	opacity: .5;
}
.prod-side-sub a:hover { color: #d82019; background: #fff; }
.prod-side-sub li.is-active > a { color: #d82019; font-weight: 600; background: #fff; }

.prod-side-contact {
	padding: 16px 18px;
	border-top: 3px solid #f2f3f7;
	background: #fafbfc;
}
.prod-side-contact .tit { margin: 0 0 4px; font-size: 12px; color: #999; }
.prod-side-contact .tel { margin: 0 0 8px; font-size: 19px; font-weight: 700; color: #d82019; line-height: 1.25; }
.prod-side-contact .tel a { color: inherit; }
.prod-side-contact .line { margin: 0 0 4px; font-size: 12px; color: #888; line-height: 1.6; word-break: break-all; }

/* 平板及以下：侧栏收到顶部，横向可滑，不再吸顶 */
@media (max-width: 991px) {
	.prod-layout { grid-template-columns: 1fr; gap: 18px; }
	.prod-side { position: static; }
	.prod-side-hd { padding: 12px 16px; }
	.prod-side-hd h3 { font-size: 16px; }
	.prod-side-nav { max-width: 100%; overflow: hidden; }
	.prod-side-nav > ul {
		display: flex;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.prod-side-nav > ul > li { border-bottom: 0; border-right: 1px solid #eceef4; flex: 0 0 auto; }
	.prod-side-nav > ul > li > a { padding: 10px 16px; white-space: nowrap; }
	.prod-side-nav > ul > li > a:hover { padding-left: 16px; }
	.prod-side-sub, .prod-side-contact { display: none; }
}

/* 正文区标题（产品页唯一的 h1，侧栏不再重复栏目名） */
.prod-hd {
	/* 兜底：主题有全局 header{position:fixed;background:#fff}，
	   这块一旦被写成 <header> 就会浮起来盖住顶部导航 —— 强制回归普通流 */
	position: static;
	box-shadow: none;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 2px solid #f0f1f5;
}
.prod-hd h1 {
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
	color: #222;
}
.prod-hd h1::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 19px;
	margin-right: 10px;
	background: #d82019;
	vertical-align: -2px;
}
.prod-hd p { margin: 8px 0 0 14px; font-size: 13px; color: #888; line-height: 1.7; }
@media (max-width: 767px) {
	.prod-hd h1 { font-size: 20px; }
}

/* ── 7b. 系列快捷条（品牌页顶部，等同原站的二级目录）────────────────────────── */
.series-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}
.series-chips .chip {
	display: inline-block;
	padding: 6px 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
	background: #f5f6fa;
	border: 1px solid #e6e8f0;
	border-radius: 2px;
	transition: color .2s, background .2s, border-color .2s;
}
.series-chips a.chip:hover { color: #fff; background: #d82019; border-color: #d82019; }
.series-chips .chip.is-current { color: #fff; background: #d82019; border-color: #d82019; font-weight: 600; }

/* ── 8. 规格表快筛 ─────────────────────────────────────────────────────────── */
.spec-filter {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
	flex-wrap: wrap;
}
.spec-filter input {
	flex: 1 1 240px;
	max-width: 320px;
	height: 38px;
	padding: 0 14px;
	border: 1px solid #dcdde6;
	font-size: 13px;
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
}
.spec-filter input:focus {
	outline: none;
	border-color: #d82019;
	box-shadow: 0 0 0 3px rgba(216, 32, 25, .1);
}
.spec-count { font-size: 12px; color: #999; }

/* 产品详情页的规格小表 */
.spec-detail { margin: 20px 0; border: 1px solid #e3e4ee; }
.spec-detail table { width: 100%; border-collapse: collapse; font-size: 14px; }
.spec-detail th, .spec-detail td { padding: 10px 14px; border-bottom: 1px solid #eceef4; text-align: left; }
.spec-detail th { width: 34%; background: #f7f8fb; color: #333; font-weight: 600; }
.spec-detail td { color: #555; }