/*
Theme Name: Direct Components
Theme URI: https://example.com/directics
Author: directics theme rebuild
Description: 由 directics.com 静态镜像反向重建的经典主题。零插件依赖，不需要 Elementor。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: directics
*/

/* 弹窗默认隐藏，由 theme.js 加 .directics-popup--open 打开 */
[data-elementor-type="popup"] {
	display: none;
}

[data-elementor-type="popup"].directics-popup--open {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 9999;
	overflow-y: auto;
}

body.directics-popup-open {
	overflow: hidden;
}

/* 关闭按钮：源站由 Elementor Pro 的弹窗引擎运行时注入，此处由 theme.js 补上 */
.directics-popup-close {
	/* display / top / right / font-size 已由源站抓取的 post-8471xx.css
	   通过 #elementor-popup-modal-{id} 锚定给出（特异度更高），这里只补
	   源 CSS 没给、且因为我们用 <button> 元素而需要清掉的浏览器默认样式。 */
	position: absolute;
	background: none;
	border: 0;
	cursor: pointer;
}

/* 焦点圈：鼠标点击不留黑框，键盘 Tab 仍然看得见
   源站抓下来的 assets/css/2de221d0602f.style.css 里有一条
   a:focus{outline:-webkit-focus-ring-color auto 5px;outline-offset:-2px}，
   用的是 :focus 而不是 :focus-visible，所以鼠标点击也会触发——点一下左上角
   logo，<a> 拿到焦点，Chrome 把 -webkit-focus-ring-color 解析成近黑的
   rgb(16,16,16)，那圈黑框就贴在图标外面不走了。

   那个文件是构建产物（重跑 build_css.py 会覆盖），所以不动它，在这里覆盖：
   鼠标/触摸触发时清掉，键盘导航换成品牌蓝的可见焦点圈——直接一刀 outline:none
   会把键盘用户唯一的位置提示也抹掉。

   特异度要算准：a:focus 是 (0,1,1)，所以清除规则写成两个伪类的
   :focus:not(:focus-visible) (0,2,0) 才压得住，键盘那条也得带上元素选择器
   凑到 (0,1,1)，靠加载顺序在后面取胜。 */
:focus:not(:focus-visible) {
	outline: none;
}

:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #1071BC);
	outline-offset: 3px;
}

/* 兜底模板排版 */
.directics-fallback__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 60px 20px;
}

.directics-fallback__title {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	color: var(--e-global-color-text, #231F20);
}

/* 右上角语言切换器（directics_language_switcher()） */
.directics-lang-switcher {
	align-items: center;
	display: flex;
	/* 头部右列是 justify-content:flex-end 的 flex 行，相邻 widget 的间距各自
	   由 margin 给出（Request Quote 按钮在桌面是 margin-left:40px）。切换器
	   自己没有 margin，会直接贴住导航最后一项 RESOURCES，这里补上左间距，
	   取和按钮同样的 40px，让两侧留白对称。 */
	margin-left: 40px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	gap: 6px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.directics-lang-switcher__item {
	color: var(--e-global-color-text, #231F20);
	text-decoration: none;
}

.directics-lang-switcher__item--current {
	color: var(--e-global-color-primary, #1071BC);
	font-weight: 700;
}

.directics-lang-switcher__item--missing {
	opacity: 0.4;
	cursor: not-allowed;
}

.directics-lang-switcher__sep {
	opacity: 0.4;
}

/* 平板及以下：导航菜单隐藏，Request Quote 按钮的间距从 margin-left:40px
   换成 margin-right:20px，切换器右侧就没人给间距了，改由自己补。 */
@media (max-width: 1024px) {
	.directics-lang-switcher {
		margin-left: 0;
		margin-right: 20px;
	}
}

/* 首页 hero：背景视频从源站的 YouTube 外链换成 AZOS 实拍（inc/setup.php
   的 directics_hero_video）后，画面比原来的纯黑底亮得多，压在上面的白色
   标题与副标题读不出来。Elementor 自带的 overlay 层在源站由内联样式上色，
   裁剪后只剩 opacity，这里把颜色补回去当压暗层。
   style.css 由 inc/enqueue.php 最后加载，选择器同级即可覆盖。 */
.elementor-845788 .elementor-element.elementor-element-3c71450 > .elementor-background-overlay {
	background-color: #04122b;
	opacity: 0.58;
}

/* 首页 hero：AZOS logo + 标题整体水平居中。
   源站这一排是 4 列（空占位 / logo / 标题 / 空占位），宽度 25% / 27% /
   60.987% / 5.958%，标题列比文字本身宽出一大截，右侧留白远多于左侧，
   整块看上去明显偏左。桌面端改成：隐藏两个空占位列，两个内容列按内容
   宽度收缩，再由 flex 容器居中。
   标题列的 widget-wrap 需要改成纵向 flex，否则求 max-content 宽度时会把
   两个标题的宽度横向相加（499 + 518），列宽被撑到 1018px 而不是 518px。
   仅桌面端生效：平板（768–1024）有自己的 50% / 45% 列宽，手机端是堆叠。 */
@media (min-width: 1025px) {
	.elementor-845788 .elementor-element.elementor-element-330b761 > .elementor-container {
		justify-content: center;
	}

	.elementor-845788 .elementor-element.elementor-element-619b7bf,
	.elementor-845788 .elementor-element.elementor-element-ef37b97 {
		display: none;
	}

	.elementor-845788 .elementor-element.elementor-element-704d119,
	.elementor-845788 .elementor-element.elementor-element-f15c0c2 {
		flex: 0 0 auto;
		max-width: none;
		width: auto;
	}

	.elementor-845788 .elementor-element.elementor-element-f15c0c2 > .elementor-widget-wrap {
		align-items: flex-start;
		flex-direction: column;
	}

	.elementor-845788 .elementor-element.elementor-element-49b261e {
		max-width: 100%;
		width: 100%;
	}
}

/* 平板（768–1024）：同样居中。这一档没有空占位列（elementor-hidden-tablet），
   但列宽是 50% / 45%，标题列同样比文字宽；另外列容器的左右内边距是
   19px / 50px 不对称，一并补成 50px，否则整块还会偏左 15px。 */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-845788 .elementor-element.elementor-element-d8f6e97 > .elementor-element-populated {
		padding-left: 50px;
	}

	.elementor-845788 .elementor-element.elementor-element-330b761 > .elementor-container {
		justify-content: center;
	}

	.elementor-845788 .elementor-element.elementor-element-704d119,
	.elementor-845788 .elementor-element.elementor-element-f15c0c2 {
		flex: 0 0 auto;
		max-width: none;
		width: auto;
	}

	.elementor-845788 .elementor-element.elementor-element-f15c0c2 > .elementor-widget-wrap {
		align-items: flex-start;
		flex-direction: column;
	}

	.elementor-845788 .elementor-element.elementor-element-49b261e {
		max-width: 100%;
		width: 100%;
	}
}

/* 首页 “Our Value Promise”（A / Z / O / S）整排居中。
   源站这一排是 DIRECT 六个字母，六列 elementor-col-16（各 16.666%）正好铺满；
   换成 AZOS 只剩四列，共 66.7%，靠左排，右边空出 1/3（1920 下右侧空 640px），
   和上方居中的标题对不齐。列宽保持源站的 16.666%，改由容器居中。 */
.elementor-845788 .elementor-element.elementor-element-26776ef > .elementor-container {
	justify-content: center;
}

/* 平板（768–1024）：四列各 33%，会排成 3 + 1；四个字母改成 2 × 2 更整齐。 */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-845788 .elementor-element.elementor-element-7aaf065,
	.elementor-845788 .elementor-element.elementor-element-03e35ac,
	.elementor-845788 .elementor-element.elementor-element-b8b8852,
	.elementor-845788 .elementor-element.elementor-element-ede9d16 {
		width: 50%;
	}
}

/* quality 页的检测设备图廊（inc/setup.php 的 directics_equipment_gallery）。
   配色与字体全部取站点自己的 Elementor token：主蓝 --e-global-color-primary
   #1071BC、正文色 --e-global-color-text #231F20、分隔灰 #EAEBED，字体沿用
   全站的 Helvetica Neue，不另起一套。 */
.directics-equipment {
	max-width: 1140px;
	margin: 0 auto;
	padding: 64px 20px 72px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	/* 图廊挂在 quality 页一个 font-style:italic 的 Elementor 区块里，
	   不显式归零，标签和说明会整片变斜体。 */
	font-style: normal;
}

.directics-equipment__title {
	margin: 0 0 12px;
	color: var(--e-global-color-text, #231F20);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.directics-equipment__lede {
	max-width: 62ch;
	margin: 0 0 40px;
	color: #55585c;
	font-size: 16px;
	line-height: 1.65;
}

.directics-equipment__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.directics-equipment__figure {
	margin: 0;
	height: 100%;
}

/* 图片本身是证据，边框只作收边，不喧宾夺主 */
.directics-equipment__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--e-global-color-4cf3fe0, #EAEBED);
	background: var(--e-global-color-4cf3fe0, #EAEBED);
	transition: transform 0.35s ease;
}

.directics-equipment__figure:hover .directics-equipment__image {
	transform: scale(1.02);
}

.directics-equipment__caption {
	display: block;
	/* 站点基础样式里有一条裸 figcaption{font-style:italic}，
	   父层归零管不到它，得在这一层再归一次。 */
	font-style: normal;
	/* 主蓝的短横线把标签和图连起来，是整块唯一的装饰 */
	border-top: 2px solid var(--e-global-color-primary, #1071BC);
	padding-top: 12px;
	margin-top: 14px;
}

.directics-equipment__label {
	display: block;
	margin-bottom: 6px;
	color: var(--e-global-color-primary, #1071BC);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.directics-equipment__text {
	display: block;
	color: var(--e-global-color-text, #231F20);
	font-size: 15px;
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.directics-equipment__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.directics-equipment {
		padding: 44px 18px 52px;
	}

	.directics-equipment__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.directics-equipment__image,
	.directics-equipment__figure:hover .directics-equipment__image {
		transform: none;
		transition: none;
	}
}

/* quality 页 hero（带 elementor-background-overlay 的 563499c 区块）压矮。
   overlay 铺满整个 section，高度由 section 的上下 padding 决定：桌面是
   11% / 13%，平板 50px / 130px，手机 130px / 50px。CTA 栏删除后标题下面
   直接接检测分区，原高度显得空，各档统一收到原来的一半左右。
   style.css 最后加载，同特异度覆盖 post-847736.css。 */
.elementor-847736 .elementor-element.elementor-element-563499c {
	padding-top: 64px;
	padding-bottom: 72px;
}

@media (max-width: 1024px) {
	.elementor-847736 .elementor-element.elementor-element-563499c {
		padding: 40px 50px 48px;
	}
}

@media (max-width: 767px) {
	.elementor-847736 .elementor-element.elementor-element-563499c {
		padding: 48px 20px;
	}
}

/* quality 页的第三方检测能力分区（inc/setup.php 的 directics_quality_testing）。
   版式复刻自 verifiedelectronics.com 的 third-party-testing 页中段：居中的
   引言 + 三张图文交替的类别卡。配色与字体沿用站点 token，与上面的检测设备
   图廊保持同一套。 */.directics-testing {
	max-width: 1140px;
	margin: 0 auto;
	padding: 64px 20px 24px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
}

.directics-testing__intro {
	text-align: center;
}

.directics-testing__eyebrow {
	margin: 0 0 10px;
	color: var(--e-global-color-primary, #1071BC);
	font-size: 14px;
	letter-spacing: 0.02em;
}

/* 标题色不写死：kit 的 h2 规则给的就是站点标题深蓝 */
.directics-testing__title {
	max-width: 22ch;
	margin: 0 auto 16px;
	font-size: clamp(26px, 3vw, 32px);
	font-weight: 600;
	line-height: 1.25;
}

.directics-testing__lede {
	max-width: 62ch;
	margin: 0 auto;
	color: var(--e-global-color-text, #231F20);
	font-size: 15px;
	line-height: 1.7;
}

.directics-testing__card {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 40px;
	border: 1px solid var(--e-global-color-4cf3fe0, #EAEBED);
	background: var(--e-global-color-4cf3fe0, #EAEBED);
}

/* 图文交替：偶数卡图片换到右侧 */
.directics-testing__card--flip .directics-testing__media {
	order: 2;
}

.directics-testing__media {
	background-color: #F8F9F9;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 320px;
}

.directics-testing__body {
	padding: 44px 48px;
	background: #F3F4F4;
}

.directics-testing__card-title {
	margin: 0 0 18px;
	color: var(--e-global-color-text, #231F20);
	font-size: clamp(20px, 2.2vw, 24px);
	font-weight: 600;
	line-height: 1.3;
}

.directics-testing__list {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 36px;
}

/* 主蓝对勾起头，和站点其它区块的主蓝短横线是同一套点缀 */
.directics-testing__item {
	position: relative;
	padding: 6px 0 6px 24px;
	break-inside: avoid;
	color: var(--e-global-color-text, #231F20);
	font-size: 15px;
	line-height: 1.5;
}

.directics-testing__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 14px;
	height: 11px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231071BC' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E") no-repeat 50% 50%;
}

@media (max-width: 1024px) {
	.directics-testing__list {
		columns: 1;
	}
}

@media (max-width: 767px) {
	.directics-testing {
		padding: 44px 18px 8px;
	}

	.directics-testing__card {
		grid-template-columns: 1fr;
		margin-top: 28px;
	}

	/* 手机端图一律排在文字上方 */
	.directics-testing__card--flip .directics-testing__media {
		order: 0;
	}

	.directics-testing__media {
		min-height: 220px;
	}

	.directics-testing__body {
		padding: 28px 22px;
	}
}

/* submit-rfq 页的询价表单（inc/rfq.php 的 directics_rfq_form）。

   只写站点自己的样式没管的部分：布局、标签的字距处理、提示条、蜜罐。
   输入框与提交按钮的皮肤（白底、1px #ACACAC 边、15px 圆角、药丸形按钮
   #073CA6、悬停转 accent 蓝）由 Elementor kit 给出，选择器是
   `.elementor-kit-845787 input:not([type="button"]):not([type="submit"])`
   这一类，特异度 (0,3,1)，本文件里任何单类选择器都压不过它。压不过就别写：
   写了也是死规则，哪天 kit 变了反而会突然生效，比现在更难查。 */
.directics-rfq__heading {
	margin: 0 0 10px;
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.directics-rfq__intro {
	max-width: 62ch;
	margin: 0 0 28px;
	color: #55585c;
	font-size: 15px;
	line-height: 1.65;
}

.directics-rfq__notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-left: 3px solid var(--e-global-color-primary, #1071BC);
	background: #f4f7fa;
	line-height: 1.5;
}

/* 出错与发送失败用暖色收边，成功沿用主蓝——两种结果不能只靠文字区分 */
.directics-rfq__notice--invalid,
.directics-rfq__notice--failed {
	border-left-color: #c0392b;
	background: #fdf3f2;
}

/* 双列：姓名、公司/电话这类短字段两两并排，补充说明整行 */
.directics-rfq__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
	max-width: 640px;
}

.directics-rfq__field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.directics-rfq__field--textarea {
	grid-column: 1 / -1;
}

/* 字号与颜色由 kit 的 label 规则给出，这里只补它没设的字距处理 */
.directics-rfq__label {
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* kit 没给输入框写 :focus，焦点提示得自己补。只用 box-shadow：
   border-color 归 kit 那条 (0,3,1) 的规则管，这里改不动。 */
.directics-rfq__input:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(16, 113, 188, 0.35);
}

.directics-rfq__submit {
	grid-column: 1 / -1;
	justify-self: start;
	cursor: pointer;
}

/* 蜜罐字段：对真人不可见，又不能用 display:none——那样一部分机器人会跳过它。
   留在文档流里但移出视口，同时 aria-hidden + tabindex="-1" 挡住读屏与键盘。 */
.directics-rfq__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 767px) {
	.directics-rfq__form {
		grid-template-columns: 1fr;
	}
}

/* 閒置庫存管理页（page-excess.php + inc/excess.php）与分类页共用的头图，
   见下面的 .directics-hero。閒置庫存页正文样式如下。

   这一页没有对应的源站镜像，也就没有随镜像抓下来的 post CSS，外观全部由
   本文件给出。配色与字体沿用站点自己的 Elementor token：主蓝
   --e-global-color-primary #1071BC、正文色 --e-global-color-text #231F20、
   分隔灰 #EAEBED，字体沿用全站的 Helvetica Neue，不另起一套。 */

/* 头图（inc/hero.php 的 directics_page_hero）：仓库照压暗，白字压在上面。
   閒置庫存页与 16 个分类页共用。深色叠层用站点首页 hero 同一个 #04122b，
   几处的暗底看起来才是一套。照片由 directics_page_hero() 出内联
   background-image，所以这里只给底色与铺法。 */
.directics-hero {
	position: relative;
	background-color: #04122b;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.directics-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #04122b;
	opacity: 0.66;
}

/* 内容要压在叠层之上，单独起一个层叠上下文 */
.directics-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1140px;
	margin: 0 auto;
	padding: 96px 20px 100px;
}

.directics-hero__eyebrow {
	margin: 0 0 14px;
	color: #7cc3f0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* 选择器要带上块名：kit 的 `.elementor-kit-845787 h1` 是 (0,1,1)，
   单靠一个类名 (0,1,0) 压不过，标题会被染回站点的深蓝。 */
.directics-hero .directics-hero__title {
	max-width: 18ch;
	margin: 0 0 18px;
	color: #fff;
	font-size: clamp(32px, 4.4vw, 52px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
}

.directics-hero__lede {
	max-width: 60ch;
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 17px;
	line-height: 1.7;
}

.directics-excess {
	max-width: 1140px;
	margin: 0 auto;
	padding: 72px 20px 88px;
	color: var(--e-global-color-text, #231F20);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.directics-excess__section {
	margin-bottom: 56px;
}

/* 正文里的小标题不设颜色：kit 的 h2 规则给的就是站点标题深蓝
   （--e-global-color-65cf800），正是想要的，写一遍反而多一处要同步的常量。 */
.directics-excess__subtitle {
	margin: 0 0 22px;
	padding-top: 24px;
	border-top: 1px solid var(--e-global-color-4cf3fe0, #EAEBED);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.directics-excess__list {
	display: grid;
	gap: 30px 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 三种合作方式并排；下面「能解决什么」条目多一倍，两列更耐读 */
.directics-excess__list--programs {
	grid-template-columns: repeat(3, 1fr);
}

.directics-excess__list--outcomes {
	grid-template-columns: repeat(2, 1fr);
	gap: 26px 36px;
}

/* 主蓝短横线把标签和正文连起来，和检测设备图廊用的是同一套装饰 */
.directics-excess__item {
	border-top: 2px solid var(--e-global-color-primary, #1071BC);
	padding-top: 12px;
}

.directics-excess__label {
	display: block;
	margin-bottom: 6px;
	color: var(--e-global-color-primary, #1071BC);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.directics-excess__text {
	display: block;
	font-size: 15px;
	line-height: 1.65;
}

/* 「清单怎么给」步骤在左、仓库照在右。小标题留在网格外面，
   它那条 border-top 要和上面两节一样通到整行宽。 */
.directics-excess__submit {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 40px;
}

.directics-excess__steps {
	margin: 0;
	padding-left: 1.2em;
}

.directics-excess__step {
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.65;
}

.directics-excess__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border: 1px solid var(--e-global-color-4cf3fe0, #EAEBED);
	background: var(--e-global-color-4cf3fe0, #EAEBED);
}

.directics-excess__cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 24px;
	padding-top: 28px;
	border-top: 1px solid var(--e-global-color-4cf3fe0, #EAEBED);
}

.directics-excess__cta-text {
	flex: 1 1 280px;
	margin: 0;
	color: #55585c;
	font-size: 15px;
	line-height: 1.6;
}

.directics-excess__link {
	color: var(--e-global-color-primary, #1071BC);
	font-size: 14px;
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.directics-excess__list--programs {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.directics-hero__inner {
		padding: 64px 18px 68px;
	}

	.directics-excess {
		padding: 52px 18px 64px;
	}

	.directics-excess__list--programs,
	.directics-excess__list--outcomes,
	.directics-excess__submit {
		grid-template-columns: 1fr;
	}

	/* 手机端图排在步骤后面 */
	.directics-excess__submit {
		gap: 28px;
	}
}

/* 產品分类页（page-category.php + inc/categories.php）。

   16 个页面（行業 7 + 製造商 9）共用这一套。头图走上面的 .directics-hero，
   这里只出正文。配色与字体沿用站点自己的 Elementor token。 */
.directics-cat {
	max-width: 1140px;
	margin: 0 auto;
	padding: 72px 20px 88px;
	color: var(--e-global-color-text, #231F20);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.directics-cat__section {
	margin-bottom: 52px;
}

/* 小标题不设颜色：kit 的 h2 规则给的就是站点标题深蓝
   （--e-global-color-65cf800），正是想要的。 */
.directics-cat__subtitle {
	margin: 0 0 20px;
	padding-top: 24px;
	border-top: 1px solid var(--e-global-color-4cf3fe0, #EAEBED);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* 常备料只有一行，给它大一号字当引文用 */
.directics-cat__parts {
	max-width: 68ch;
	margin: 0;
	font-size: 19px;
	line-height: 1.65;
}

.directics-cat__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 主蓝短横线把标签和正文连起来，和閒置庫存页、检测设备图廊是同一套装饰 */
.directics-cat__item {
	border-top: 2px solid var(--e-global-color-primary, #1071BC);
	padding-top: 12px;
}

.directics-cat__label {
	display: block;
	margin-bottom: 6px;
	color: var(--e-global-color-primary, #1071BC);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.directics-cat__text {
	display: block;
	font-size: 15px;
	line-height: 1.65;
}

/* 独立分销商声明（只出现在製造商页）。不是装饰，要读得到，
   但也不该抢过正文——灰底左收边，字号比正文小一档。 */
.directics-cat__notice {
	max-width: 78ch;
	margin: 0 0 52px;
	padding: 12px 16px;
	border-left: 3px solid var(--e-global-color-primary, #1071BC);
	background: #f4f7fa;
	color: #55585c;
	font-size: 14px;
	line-height: 1.6;
}

.directics-cat__cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 24px;
	padding-top: 28px;
	border-top: 1px solid var(--e-global-color-4cf3fe0, #EAEBED);
}

.directics-cat__cta-text {
	flex: 1 1 280px;
	margin: 0;
	color: #55585c;
	font-size: 15px;
	line-height: 1.6;
}

.directics-cat__link {
	color: var(--e-global-color-primary, #1071BC);
	font-size: 14px;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.directics-cat {
		padding: 52px 18px 64px;
	}

	.directics-cat__list {
		grid-template-columns: 1fr;
	}

	.directics-cat__parts {
		font-size: 17px;
	}
}

/* 零件類型页（page-part-types.php + inc/part-types.php）。

   七个元件大类分栏。头图走 .directics-hero，这里只出正文。 */
.directics-parts {
	max-width: 1140px;
	margin: 0 auto;
	padding: 72px 20px 88px;
	color: var(--e-global-color-text, #231F20);
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 三栏。七个大类排成 3 / 3 / 1，最后一栏是「其他產品」，
   本来就是收口的一类，落单不突兀。 */
.directics-parts__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 44px 36px;
	margin: 0 0 64px;
	padding: 0;
	list-style: none;
}

/* 主蓝短横线起头，和分类页、閒置庫存页是同一套装饰 */
.directics-parts__group {
	border-top: 2px solid var(--e-global-color-primary, #1071BC);
	padding-top: 14px;
}

.directics-parts__title {
	margin: 0 0 8px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.25;
}

.directics-parts__text {
	margin: 0 0 14px;
	color: #55585c;
	font-size: 14px;
	line-height: 1.6;
}

.directics-parts__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 子类之间用淡分隔线，不用项目符号——一栏六七条，圆点会显得碎 */
.directics-parts__item {
	padding: 7px 0;
	border-top: 1px solid var(--e-global-color-4cf3fe0, #EAEBED);
	font-size: 15px;
	line-height: 1.45;
}

.directics-parts__cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 24px;
	padding-top: 28px;
	border-top: 1px solid var(--e-global-color-4cf3fe0, #EAEBED);
}

.directics-parts__cta-text {
	flex: 1 1 280px;
	margin: 0;
	color: #55585c;
	font-size: 15px;
	line-height: 1.6;
}

.directics-parts__link {
	color: var(--e-global-color-primary, #1071BC);
	font-size: 14px;
	text-decoration: underline;
}

@media (max-width: 1024px) {
	.directics-parts__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.directics-parts {
		padding: 52px 18px 64px;
	}

	.directics-parts__grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}