@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;
	/* 上限而不是死高：横幅图是商家自己传的，正方形/竖图传上来时等比放大能占满整屏，
	   内容被推到首屏之外。封顶之后 object-fit 才接管，只裁多出来的那部分、不拉伸。
	   （实测：960×383 的图在 1435px 宽下会被撑到 573px 高。） */
	max-height: 420px;
	object-fit: cover;
	object-position: center;
	left: 0;
	transform: none;
	-webkit-transform: none;
}
@media (max-width: 767px) {
	/* 移动端按等比缩放，避免变形/黑边；窄屏本来也高不到哪去 */
	.inside-banner img { max-height: 200px; }
}

/* ── 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)」这类会把列撑宽；但只准在空格/顿号这种
	   天然断点上折，别把「认证」两个字劈成上下两行（min-width 兜住两字列名的底）。 */
	white-space: normal;
	overflow-wrap: break-word;
	/* 两字列名（「认证」）的底：3.6em 减去左右 padding 正好还剩两个字。 */
	min-width: 3.6em;
	max-width: 16em;
	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` 等价于它）：
	   它让每一列的 min-content 塌成一个字符宽，auto 表格布局于是把「认证」列压到
	   21px —— 表头劈成「认/证」、值劈成「Ye/s」，尺寸串也从数字中间断开。
	   break-word 只在单个词整行都放不下时才硬断，列宽至少留得下一个完整的词。 */
	overflow-wrap: break-word;
	/* 单列封顶。auto 布局按 max-content 的比例分配宽度：明龙的「输出电压」一格能列到
	   `5、12、15、24、48、±12、±15、+5/+12…`（max-content 415px），它一列就把 940px
	   的表吃掉一大半，剩下八列全被压到 max-content 以下 —— 于是「PCB 塑壳」「3000 VAC」
	   这些本来一行放得下的短值也跟着折。封顶后长枚举自己多折两行（它本来就该折），
	   短值列拿回各自的完整宽度。16em ≈ 200px，约占表宽两成。 */
	max-width: 16em;
}
.spec-table tbody th {
	font-weight: 600;
	color: #222;
	text-align: left;
	background: #fcfcfd;
	white-space: normal;
}
/* 型号列与详情列不折行，保证可读与可点。
   最后一列不写 width —— 写过 62px，而那一格里 datasheet 按钮实测就要 103px，
   auto 布局按 min-content 兜底，这个数字从来没生效过，只会误导下一个人。 */
.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 { white-space: nowrap; }
.spec-table tbody tr:hover th,
.spec-table tbody tr:hover td { background: #fff7f7; }
/* 型号可点进详情：颜色不变（商家要求），悬停只加下划线提示能点。 */
.spec-table .spec-model,
.spec-table .spec-model:hover { color: inherit; }
.spec-table .spec-model:hover,
.spec-table .spec-model:focus-visible { text-decoration: underline; }
.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; }
/* 真的指向 PDF 的那一格给个红点，和"暂时只能跳详情页"的区分开 —— 两种都写着
   datasheet，长得一模一样的话商家永远不知道自己传没传成功。 */
.spec-table .spec-more.is-pdf { border-color: #d82019; color: #d82019; }

/* 详情页的手册下载按钮。商家没传时这块整个不渲染（模板里 {{with}} 一判）。 */
.datasheet-download { margin: 0 0 20px; }
.datasheet-download a {
	display: inline-block;
	padding: 9px 20px;
	background: #d82019;
	color: #fff;
	font-size: 14px;
	border-radius: 2px;
	transition: opacity .2s;
}
.datasheet-download a:hover { opacity: .85; color: #fff; }
.spec-hint { display: none; }

/* 1260 以下：容器变回流体（左右各 40px 内边距），正文区比 1260 以上的 940px 还窄，
   而规格表的宽度下限是由数据定的、不随屏幕缩水。实测五张产品表里 992px 这一档最吃紧
   （正文只剩 652px，minmax-acdc 要 731px）。所以 1260 以下把格子的左右内边距收一档 ——
   9 列各省 6px，够把表放进去，而 1260 以上（940px 够用）的观感原样不动。
   ≤767 是卡片式（下面那段 media 会把 padding 重新写成 9px 12px），不受这里影响。 */
@media (max-width: 1259px) {
	.spec-table thead th { padding-left: 5px; padding-right: 5px; }
	.spec-table tbody th,
	.spec-table tbody td { padding-left: 5px; padding-right: 5px; }
}

/* 手机：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;
		/* 桌面版的单列封顶要在这里还原：卡片里每一格是整行，封到 16em 就成了一条
		   208px 的窄带，右侧的值全挤成竖条。 */
		max-width: none;
		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;
	/* 🔥 吸顶的东西比屏幕高就等于「下半截永远够不着」：明龙的产品侧栏（11 个品牌 +
	   展开的系列 + 联系方式）实测 1379px，而笔记本可视区才 900px —— 它跟着页面一起
	   走，怎么滚都露不出底下的系列。所以吸顶必须配一个自己的滚动条。
	   140px = 顶部 120px 吸顶位 + 20px 底部呼吸位；内容不满一屏时不会出现滚动条。 */
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.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; max-height: none; overflow: visible; }
	.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; }
}

/* 992~1259 还得再让一步：侧栏 232px + 26px 间距是照 1260 以上的 1200px 容器定的，
   搬到 992px 上就占掉正文区四分之一还多。这一档把侧栏收窄、间距减半，
   省出来的 64px 全给规格表 —— 比起为了 40px 把字号和行距一路压小，收侧栏更划算，
   分类名多折一行没人在意，规格表少一列没法看。 */
@media (min-width: 992px) and (max-width: 1259px) {
	.prod-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 14px; }
	.prod-side-hd { padding: 14px; }
	.prod-side-hd h3 { font-size: 16px; }
	.prod-side-nav > ul > li > a { padding: 11px 14px; }
	.prod-side-nav > ul > li > a:hover { padding-left: 17px; }
	/* 收窄后短横线要跟着左移，否则它顶到文字上（基础值 left:19px + 4px 宽 vs 24px 内边距）。 */
	.prod-side-sub a { padding-left: 24px; padding-right: 12px; }
	.prod-side-sub a::before { left: 13px; }
	.prod-side-contact { padding: 14px; }
}

/* 正文区标题（产品页唯一的 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; }

/* ── 8. 通用按钮与留言表单 ────────────────────────────────────────────────────
 * 原主题没有按钮/表单的基础样式（源站的联系页是一张图 + 一段 iframe 地图），
 * 而我们的「联系我们」单页带在线留言、搜索页和 404 页也各有一个按钮。 */
.btn {
	display: inline-block;
	height: 38px;
	line-height: 38px;
	padding: 0 22px;
	font-size: 14px;
	border: 0;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.btn-primary { background: #d82019; color: #fff; }
.btn-primary:hover { background: #b8140e; color: #fff; }

.contact-form-wrap { max-width: 720px; }
.contact-form .field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.contact-form .field-row input { flex: 1 1 220px; }
.contact-form input,
.contact-form textarea {
	display: block;
	width: 100%;
	margin-bottom: 12px;
	padding: 9px 14px;
	border: 1px solid #dcdde6;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	transition: border-color .2s, box-shadow .2s;
}
.contact-form textarea { resize: vertical; min-height: 110px; }
.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: #d82019;
	box-shadow: 0 0 0 3px rgba(216, 32, 25, .1);
}
.form-ok, .form-error { margin-bottom: 12px; font-size: 14px; }

/* 详情页「返回列表」 */
.news-detail-foot .back { font-size: 14px; color: #666; }
.news-detail-foot .back:hover { color: #d82019; }

/* ── 9. 品牌卡片改竖版：logo 是主角，品牌名退居标注 ──────────────────────────
 * 原来是横排（左侧小 logo + 右侧大字名称），实测 logo 只渲染到 54×34px，而源图是
 * 674×437 —— 等于按 8% 在显示，品牌墙上最该被认出来的东西反而最小。
 * 改成竖版：logo 占满卡片宽度（约 265px，面积约为原来的 12 倍、宽度约 5 倍），
 * 品牌名从 17px 降到 15px 并去掉加粗感，让视觉重量从文字挪回图。
 * 只作用于 --brand（带 logo 的品牌层）；--series 是纯文字层，保持原样。 */
/* 卡片外壳长在 li 上，不在 a 上 —— 品牌卡里现在有**两个**链接：
   图（点开看大图）和文字（进栏目），边框/悬浮只该画一次。
   --series 是纯文字层、只有一个链接，仍旧沿用上面 `.cat-grid > li > a` 那套。 */
.cat-grid--brand > li {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid #e3e4ee;
	text-align: center;
	transition: border-color .25s, box-shadow .25s, transform .25s;
}
.cat-grid--brand > li:hover {
	border-color: #d82019;
	box-shadow: 0 6px 18px rgba(216, 32, 25, .10);
	transform: translateY(-2px);
}
.cat-grid--brand > li:hover .cat-name { color: #d82019; }
/* 把 `.cat-grid > li > a` 那套卡片样式从两个内层链接身上卸干净 */
.cat-grid--brand > li > a,
.cat-grid--brand > li > a:hover {
	display: block;
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	transform: none;
}
/* 图那条链接：光标给放大镜，说明它是"看大图"不是"跳转" */
.cat-grid--brand > li > a.cat-zoom { cursor: zoom-in; }
.cat-grid--brand > li > a.cat-zoom:focus-visible { outline: 2px solid #d82019; outline-offset: 2px; }
.cat-grid--brand > li > a.cat-zoom:hover .cat-logo { border-color: #d82019; }
.cat-grid--brand .cat-logo {
	/* flex-basis 的 clamp 在竖版下没有意义了：直接占满整行宽度。
	   aspect-ratio 16/7 是一条横幅带，长方形 logo 放进去不会被裁。 */
	flex: none;
	width: 100%;
	aspect-ratio: 16 / 7;
	padding: 10px 14px;
	background: #fff;
	border-color: #f0f1f5;
}
.cat-grid--brand .cat-text { min-width: 0; }
.cat-grid--brand .cat-name {
	font-size: 15px;
	font-weight: 500;
}
.cat-grid--brand .cat-desc {
	margin-top: 4px;
	font-size: 12px;
	/* 描述最多两行，免得卡片高度被一句长文案带跑、整排参差不齐 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (max-width: 767px) {
	/* 手机上一行一个，logo 已经足够大，不用再拉高 */
	.cat-grid--brand .cat-logo { aspect-ratio: 16 / 6; }
}


/* 首页「产品展示」的品牌卡：首页没有侧栏，版面比栏目页宽，一行 4 个；
   窄屏逐级降到 3 / 2 列（手机上 2 列而不是 1 列：首页是一眼扫过去的入口，一列要翻很久）。 */
.cat-grid--brand.home-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1279px) { .cat-grid--brand.home-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px)  { .cat-grid--brand.home-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .cat-grid--brand.home-brands { gap: 12px; } .cat-grid--brand.home-brands > li { padding: 12px; } }


/* ── 10. 看大图浮层（品牌卡片的图点开）───────────────────────────────────────
 * 触发与退化路径写在 assets/js/imgzoom.js 的注释里：脚本没跑起来时，
 * a.cat-zoom 退化成"新标签页打开原图"，仍然能放大。
 * 层级 1300：站里最高的是吸顶导航（z-index 999），这层必须压过它。 */
.imgzoom {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px 24px;
	/* .92 不是 .88：底下的页面文字太清楚时，会和图下面那行标题挤在一起（手机上尤其明显）。 */
	background: rgba(24, 24, 28, .92);
}
.imgzoom[hidden] { display: none; }
.imgzoom-fig {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 100%;
	max-height: 100%;
}
.imgzoom-fig img {
	/* 按原始像素显示，但绝不超出视口 —— 674×437 的图在 1440 屏上是原尺寸，
	   977×798 的图会被视口收住而不是撑破。白底是因为模块图多为白底去背图，
	   压在深色遮罩上不给底色会看不出边界。 */
	max-width: 100%;
	max-height: calc(100vh - 150px);
	object-fit: contain;
	background: #fff;
	padding: 12px;
	cursor: default;
}
.imgzoom-fig figcaption {
	color: #f2f2f4;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}
.imgzoom-close {
	position: absolute;
	top: 14px;
	right: 18px;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .35);
	background: transparent;
	color: #fff;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.imgzoom-close:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.imgzoom-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* 浮层开着时锁住背景滚动：不锁的话滚轮会带着底下的页面跑。 */
html.imgzoom-open, html.imgzoom-open body { overflow: hidden; }
@media (max-width: 767px) {
	.imgzoom { padding: 56px 12px 24px; }
	.imgzoom-fig img { max-height: calc(100vh - 130px); }
}