/* 导航与搜索；依赖共享组件，并由全站 Header 消费。 */

/*
   站点头部

   WordPress 模板部件才是顶层导航节点，吸顶不受外层包装影响。 */

.wp-site-blocks > header.wp-block-template-part:has(> .pattrix-site-header) {
	position: sticky;
	top: 0;
	z-index: 50;
	margin-block-start: 0;
	isolation: isolate;
}

.wp-site-blocks > header.wp-block-template-part:has(> .pattrix-site-header) > .pattrix-site-header {
	position: relative;
	top: auto;
	z-index: auto;
}

.pattrix-site-header[data-pattrix-nav] {
	position: relative;
	z-index: 80;
	min-height: 75px;
	background: var(--pattrix-color-header);
	border: 0;
	backdrop-filter: none;
}

/* PHP 详情模板直接输出 Header，没有区块模板的外层吸顶节点。 */
body > .pattrix-site-header[data-pattrix-nav] {
	position: sticky;
	top: 0;
}

/*
   桌面导航与工具区

   各弹出面板共用同一组进入过渡参数。 */

.pattrix-site-header[data-pattrix-nav] .pattrix-header-inner {
	display: flex;
	align-items: center;
	width: min(calc(100% - 40px), 1671px);
	min-height: 75px;
	margin: 0 auto;
	gap: 0;
}

.pattrix-desktop-nav {
	display: grid;
	grid-template-columns: repeat(6, max-content);
	column-gap: clamp(24px, 2.5vw, 44px);
	align-items: center;
	align-self: stretch;
	margin: 0 auto 0 clamp(48px, 5vw, 82px);
}

.pattrix-nav-trigger {
	position: relative;
	min-height: 75px;
	padding: 0;
	color: var(--pattrix-color-text);
	background: transparent;
	border: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 17.5px;
	font-weight: 400;
	line-height: 1;
	text-align: left;
	cursor: pointer;
}

.pattrix-nav-trigger > span {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 75px;
}

.pattrix-nav-trigger > span::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 10px;
	width: 100%;
	height: 2px;
	background: var(--pattrix-color-text);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--pattrix-duration-hover) var(--pattrix-ease-out);
}

.pattrix-desktop-nav a.pattrix-nav-trigger--link {
	color: var(--pattrix-color-text);
	font-family: var(--wp--preset--font-family--display);
	font-size: 17.5px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.pattrix-desktop-nav a.pattrix-nav-trigger--link:hover { text-decoration: underline; text-underline-offset: 4px; }

.pattrix-nav-trigger[aria-expanded="true"] > span::after,
.pattrix-nav-trigger:hover > span::after {
	transform: scaleX(1);
}

.pattrix-header-tools {
	display: flex;
	align-items: center;
	gap: 0;
	margin-left: auto;
	width: 151.5px;
	height: 75px;
}

.pattrix-header-tools > .pattrix-tool-button,
.pattrix-language-control { flex: 0 0 50.5px; width: 50.5px; min-width: 50.5px; justify-content: flex-end; }

@media (min-width: 992px) and (max-width: 1199px) {
	.pattrix-site-header[data-pattrix-nav] .pattrix-header-inner { width: min(calc(100% - 32px), 1671px); }
	.pattrix-desktop-nav { column-gap: 18px; margin-left: 32px; }
	.pattrix-nav-trigger, .pattrix-desktop-nav a.pattrix-nav-trigger--link { font-size: 16px; }
	.pattrix-header-tools { width: 101px; }
	.pattrix-search-reveal { right: max(121px, calc((100% - 1671px) / 2 + 101px)); }
}

.pattrix-tool-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50.5px;
	height: 75px;
	padding: 0;
		color: var(--pattrix-color-text);
	background: transparent;
	border: 0;
	text-decoration: none;
	cursor: pointer;
}

.pattrix-tool-button[data-tool-trigger="search"] { justify-content: flex-end; }

.pattrix-tool-button .pattrix-ui-icon { --pattrix-icon-size: 22px; }
.pattrix-tool-button .pattrix-ui-icon--close { display: none; }
.pattrix-tool-button[data-tool-trigger="search"][aria-expanded="true"] .pattrix-ui-icon--search { display: none; }
.pattrix-tool-button[data-tool-trigger="search"][aria-expanded="true"] .pattrix-ui-icon--close { display: inline-block; }

.pattrix-language-control { position: relative; display: flex; align-self: stretch; }
.pattrix-language-control > .pattrix-tool-button { width: 100%; min-width: 0; justify-content: flex-end; }
.pattrix-language-icon { display: block; width: 22px; height: 22px; }

.pattrix-tool-popover {
	position: absolute;
	top: 75px;
	right: max(20px, calc((100% - 1671px) / 2));
	z-index: 4;
	padding: 18px;
		background: var(--pattrix-color-bg);
	border: 0;
	box-shadow: 0 18px 40px rgba(29, 29, 31, .12);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
}

.pattrix-tool-popover[hidden] { display: none; }
.pattrix-tool-popover--search { width: min(320px, calc(100vw - 40px)); }
.pattrix-tool-popover--search form { display: flex; align-items: center; gap: 10px; }
.pattrix-tool-popover--search input { flex: 1; min-height: 42px; padding: 0 12px; border: 1px solid var(--pattrix-color-border-strong); background: var(--pattrix-color-header); color: var(--pattrix-color-text); }
.pattrix-tool-popover--search button { width: 42px; min-height: 42px; border: 0; background: var(--pattrix-color-inverse); color: var(--pattrix-color-on-inverse); }
.pattrix-tool-popover--language { top: 100%; right: 0; box-sizing: border-box; z-index: 9; width: 13.9375rem; padding: 4.375rem 1.875rem; box-shadow: none; opacity: 0; pointer-events: none; text-align: center; transform: scaleY(.96); transform-origin: top center; transition: transform var(--pattrix-duration-enter) var(--pattrix-ease-out), opacity var(--pattrix-duration-enter) var(--pattrix-ease-out); }
.pattrix-tool-popover--language p { margin: 0 0 1.25rem; color: var(--pattrix-color-text); font-size: .875rem; line-height: 1; }
.pattrix-tool-popover--language :is(a, button, .is-unavailable) { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 1.875rem; padding: 0; color: var(--pattrix-color-text-muted); background: var(--pattrix-color-header); border: 0; border-radius: 3.125rem; font: 600 .875rem/1.875rem var(--wp--preset--font-family--sans); letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.pattrix-tool-popover--language .pattrix-language-chevron { display: block; flex: 0 0 auto; width: .9375rem; height: .5rem; margin-left: 1.375rem; }
.pattrix-tool-popover--language.is-open { opacity: 1; pointer-events: auto; transform: none; }
@media (hover: hover) and (pointer: fine) {
	.pattrix-site-header[data-pattrix-nav]:has([data-tool-trigger="language"]:hover) .pattrix-tool-popover--language,
	.pattrix-site-header[data-pattrix-nav]:has(.pattrix-tool-popover--language:hover) .pattrix-tool-popover--language { opacity: 1; pointer-events: auto; transform: none; }
}

/* 展开层以品牌末端和工具区起点为边界，覆盖全部桌面导航而不遮挡两侧控件。 */
.pattrix-search-reveal { position: absolute; top: 0; right: max(171.5px, calc((100% - 1671px) / 2 + 151.5px)); left: max(161px, calc((100% - 1671px) / 2 + 141px)); z-index: 99; height: 75px; overflow: hidden; opacity: 0; pointer-events: none; transform: scaleX(.96); transform-origin: right center; transition: transform var(--pattrix-duration-enter) var(--pattrix-ease-out), opacity var(--pattrix-duration-enter) var(--pattrix-ease-out); will-change: transform, opacity; }
.pattrix-search-reveal-inner { display: flex; align-items: center; width: 100%; min-width: 0; height: 100%; }
.pattrix-search-reveal.is-open { opacity: 1; transform: none; }
.pattrix-search-reveal form { position: relative; width: 100%; pointer-events: none; }
.pattrix-search-reveal.is-open form { pointer-events: auto; }
.pattrix-search-reveal input { box-sizing: border-box; width: 100%; min-height: 0; height: 36px; padding: 0 0 0 40px; color: var(--pattrix-color-text); background: var(--pattrix-color-border-strong); border: 0; border-radius: 50px; outline: 0; appearance: none; font-family: var(--wp--preset--font-family--sans); font-size: 16px; line-height: 36px; }
.pattrix-search-reveal input:focus-visible { box-shadow: inset 0 0 0 2px var(--pattrix-color-interaction); }
.pattrix-search-reveal button { position: absolute; top: 50%; left: 8px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 36px; min-height: 0; padding: 0; color: var(--pattrix-color-text); background: transparent; border: 0; transform: translateY(-50%); }
.pattrix-search-reveal button .pattrix-ui-icon { --pattrix-icon-size: 18px; }

/*
   Mega 面板

   容器全宽但 pointer-events 常关，仅展开的面板接收指针事件。 */

.pattrix-mega-panels { position: absolute; top: 75px; left: 0; right: 0; z-index: 2; height: 0; pointer-events: none; }
.pattrix-mega-panel { position: absolute; top: 0; right: 0; left: 0; overflow: hidden; opacity: 0; background: var(--pattrix-color-bg); transform: scaleY(.96); transform-origin: top center; pointer-events: none; transition: transform var(--pattrix-duration-enter) var(--pattrix-ease-out), opacity var(--pattrix-duration-enter) var(--pattrix-ease-out); will-change: transform, opacity; }
.pattrix-mega-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.pattrix-mega-panel-inner { display: flex; width: min(calc(100% - 40px), 1671px); margin: 0 auto; padding: 70px 0; }
.pattrix-mega-spacer { flex: 0 0 142px; }
.pattrix-mega-columns { display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: clamp(40px, 5vw, 96px); width: min(880px, 100%); }
.pattrix-mega-columns--news { grid-template-columns: minmax(0, 1fr); width: min(640px, 100%); }
.pattrix-mega-news-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 7vw, 112px); }
.pattrix-mega-columns h2 { margin: 0 0 18px; color: var(--pattrix-color-text-secondary); font-family: var(--wp--preset--font-family--display); font-size: 17.5px; font-weight: 700; line-height: 1.65; }
.pattrix-mega-columns a { position: relative; display: block; width: fit-content; margin-bottom: 17px; padding-bottom: 5px; color: var(--pattrix-color-text); font-family: var(--wp--preset--font-family--display); font-size: 19.4px; font-weight: 400; line-height: 1.2; text-decoration: none; }
.pattrix-mega-feature { display: grid; place-items: end start; flex: 1; margin-left: 40px; padding: 24px; color: var(--pattrix-color-on-inverse); background: var(--pattrix-color-inverse); font-family: var(--wp--preset--font-family--display); font-size: 24px; line-height: 1.08; }

/* Products 分类由后台层级 taxonomy 输出；网格会随一级分类数量自动换行。 */
.pattrix-products-panel-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, min(31vw, 460px)); align-items: stretch; gap: clamp(40px, 6vw, 96px); width: 100%; min-width: 0; }
.pattrix-products-navigation { display: flex; flex-direction: column; min-width: 0; }
.pattrix-products-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 30px clamp(24px, 4vw, 64px); align-items: start; width: 100%; }
.pattrix-products-group { min-width: 0; }
.pattrix-products-layout h2 { margin: 0; color: var(--pattrix-color-text-secondary); font-family: var(--wp--preset--font-family--display); font-size: 18px; font-weight: 700; line-height: 30px; text-transform: uppercase; }
.pattrix-products-group > h2 { margin: 0 0 18px; }
/* 主类既是组标题又是入口：标题里的链接继承 h2 的字号/字重/大写/颜色，只去掉默认下划线；
   悬停下划线与组内子类链接共用上面两条 ::after 规则；改动这两条规则会同时影响本链接。
   width: fit-content 让下划线与可点区域只覆盖文字，而不是整列宽度。 */
.pattrix-products-layout h2 a { position: relative; display: block; width: fit-content; padding-bottom: 5px; color: inherit; text-decoration: none; }
.pattrix-products-links a { position: relative; display: block; width: fit-content; min-height: 0; margin-bottom: 13px; padding-bottom: 5px; color: var(--pattrix-color-text); font-family: var(--wp--preset--font-family--display); font-size: 20px; font-weight: 400; line-height: 24px; text-decoration: none; }
.pattrix-products-links--all { display: flex; justify-content: center; margin-top: auto; padding-top: 42px; }
.pattrix-products-links--all a { color: var(--pattrix-color-text-secondary); font-size: 17px; text-transform: uppercase; }
.pattrix-products-links--all a::after { background: var(--pattrix-color-text-secondary); }
/* 轮播框与 Resources 下拉的内容高度保持一致，避免 Products 面板被方形图片撑高。 */
.pattrix-products-latest { position: relative; align-self: center; justify-self: stretch; width: 100%; height: 308px; min-width: 0; max-width: 100%; overflow: hidden; outline: 0; }
.pattrix-products-latest:focus-visible { outline: 2px solid var(--pattrix-color-interaction); outline-offset: 8px; }
.pattrix-products-latest-slides, .pattrix-products-latest-slide { position: relative; }
.pattrix-products-latest-slides { position: relative; width: 100%; height: 100%; background: var(--pattrix-color-surface); }
.pattrix-products-latest-slide { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: 100%; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity var(--pattrix-duration-fade) var(--pattrix-ease-out); }
.pattrix-products-latest-slide.is-active { z-index: 2; opacity: 1; visibility: visible; }
.pattrix-products-latest-slide.is-leaving { z-index: 1; opacity: 1; visibility: visible; }
.pattrix-products-latest-link, .pattrix-products-latest-media, .pattrix-products-latest-media > .pattrix-picture { display: block; width: 100%; height: 100%; min-width: 0; max-width: 100%; }
.pattrix-products-latest-image { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: center top; }

/*
   移动端抽屉与搜索

   抽屉的 top 与高度使用同一 52px 吸顶偏移；dvh 声明覆盖 svh，跟随动态视口变化。 */

.pattrix-mobile-toggle,
.pattrix-mobile-drawer { display: none; }

html.pattrix-nav-open,
body.pattrix-nav-open {
	overflow: hidden;
}

@media (max-width: 991px) {
	.pattrix-site-header[data-pattrix-nav] { min-height: 52px; }
	.pattrix-site-header[data-pattrix-nav] .pattrix-header-inner { width: calc(100% - 30px); min-height: 52px; }
		.pattrix-desktop-nav, .pattrix-header-tools, .pattrix-mega-panels, .pattrix-tool-popover, .pattrix-search-reveal, .pattrix-products-latest { display: none; }
		.pattrix-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 52px; margin-left: auto; padding: 0 0 0 12px; color: var(--pattrix-color-text); background: transparent; border: 0; cursor: pointer; }
	.pattrix-mobile-toggle .pattrix-ui-icon { --pattrix-icon-size: 22px; }
	.pattrix-mobile-toggle .pattrix-ui-icon--close { display: none; }
	.pattrix-mobile-toggle[aria-expanded="true"] .pattrix-ui-icon--menu { display: none; }
	.pattrix-mobile-toggle[aria-expanded="true"] .pattrix-ui-icon--close { display: inline-block; }
		.pattrix-mobile-drawer { position: fixed; top: 52px; right: 0; left: 0; display: flex; flex-direction: column; width: 100%; height: calc(100svh - 52px); height: calc(100dvh - 52px); min-height: 0; overflow: hidden; background: var(--pattrix-color-bg); transform: translate3d(100%, 0, 0); transition: transform var(--pattrix-duration-enter) var(--pattrix-ease-in-out); will-change: transform; touch-action: pan-y; }
	.pattrix-mobile-drawer.is-open { transform: translate3d(0, 0, 0); }
	.pattrix-mobile-drawer[aria-hidden="true"] { pointer-events: none; }
	.pattrix-mobile-search { flex: 0 0 auto; padding: 56px 15px 0; }
	.pattrix-mobile-search form { position: relative; }
		.pattrix-mobile-search input { box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 45px 0 44px; color: var(--pattrix-color-text); background: var(--pattrix-color-border-strong); border: 0; border-radius: 22px; outline: 0; appearance: none; font-family: var(--wp--preset--font-family--sans); }
		.pattrix-mobile-search input:focus-visible { box-shadow: inset 0 0 0 2px var(--pattrix-color-interaction); }
		.pattrix-mobile-search button { position: absolute; top: 0; left: 9px; width: 34px; height: 40px; padding: 0; border: 0; color: var(--pattrix-color-text-muted); background: transparent; }
	.pattrix-mobile-search .pattrix-ui-icon { --pattrix-icon-size: 18px; }
	.pattrix-mobile-level-viewport { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-top: 34px; }
	.pattrix-mobile-level-track { display: flex; width: calc(100% * var(--mobile-levels)); height: 100%; transform: translateX(calc(-100% / var(--mobile-levels) * var(--mobile-index))); transition: transform var(--pattrix-duration-enter) var(--pattrix-ease-in-out); }
		.pattrix-mobile-level { box-sizing: border-box; flex: 0 0 calc(100% / var(--mobile-levels)); width: calc(100% / var(--mobile-levels)); min-height: 0; overflow-y: auto; padding: 0 15px calc(84px + env(safe-area-inset-bottom)); }
		.pattrix-mobile-level > button, .pattrix-mobile-level > a { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 59px; padding: 0; color: var(--pattrix-color-text); background: transparent; border: 0; border-bottom: 0; font-family: var(--wp--preset--font-family--display); font-size: 19px; font-weight: 600; text-align: left; text-decoration: none; }
	.pattrix-mobile-contact { display: grid; gap: 8px; margin: 12px 0 0; padding-top: 20px; border-top: 1px solid var(--pattrix-color-border); }
	.pattrix-mobile-contact a { color: var(--pattrix-color-text-secondary); font-size: 14px; line-height: 1.45; text-decoration: none; }
	.pattrix-mobile-contact a:hover { color: var(--pattrix-color-interaction); text-decoration: underline; text-underline-offset: 3px; }
	.pattrix-mobile-level > button > .pattrix-ui-icon { --pattrix-icon-size: 21px; }
	.pattrix-mobile-back { justify-content: flex-start !important; gap: 28px; min-height: 59px !important; margin-bottom: 16px; font-size: 20px !important; }
	.pattrix-mobile-back > .pattrix-ui-icon { --pattrix-icon-size: 22px; }
	.pattrix-mobile-columns { display: grid; gap: 30px; padding: 12px 0 40px; }
		.pattrix-mobile-columns h2 { margin: 0 0 12px; color: var(--pattrix-color-text-secondary); font-family: var(--wp--preset--font-family--display); font-size: 16px; line-height: 1.45; }
		/* 主类标题里的链接：保住标题的字号与浅色，不与子类行混同（否则主类读起来就像另一个子类），
		   但给足 44px 触控高度；右侧箭头由下面的 .pattrix-mobile-columns a::after 提供，作为"可点"提示。
		   本选择器 (0,1,2) 高于 .pattrix-mobile-columns a (0,1,1)，所以这里的覆盖与顺序无关。 */
		.pattrix-mobile-columns h2 a { color: inherit; font-size: inherit; font-weight: inherit; min-height: 44px; }
		.pattrix-mobile-columns a { display: flex; align-items: center; justify-content: space-between; min-height: 47px; color: var(--pattrix-color-text); font-family: var(--wp--preset--font-family--display); font-size: 17px; font-weight: 400; line-height: 1.2; text-decoration: none; }
	.pattrix-mobile-columns a::after { width: 18px; height: 18px; flex: 0 0 auto; background: currentColor; content: ""; -webkit-mask: url("../icons/lucide/arrow-right.svg") center / contain no-repeat; mask: url("../icons/lucide/arrow-right.svg") center / contain no-repeat; }
			.pattrix-mobile-tools { box-sizing: border-box; display: flex; justify-content: flex-end; gap: 25px; flex: 0 0 calc(73px + env(safe-area-inset-bottom)); margin: 0 15px; padding-top: 14px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--pattrix-color-border-strong); }
		.pattrix-mobile-tools a, .pattrix-mobile-tools button { display: inline-flex; align-items: flex-start; justify-content: center; width: 28px; height: 34px; padding: 0; color: var(--pattrix-color-text); background: transparent; border: 0; }
		.pattrix-tool-popover.is-mobile-open { position: absolute; top: auto; right: 15px; bottom: 73px; display: block; width: 160px; }
		.pattrix-products-links--all { margin-top: 0; }
}

@media (min-width: 992px) {
	.pattrix-mobile-toggle { display: none; }
}

/*
   导航项与菜单

   键盘焦点无条件生效：键盘用户也可能在触屏设备上。 */

.pattrix-nav-item--menu {
	display: flex;
	align-items: stretch;
	min-width: 0;
}

.pattrix-nav-item--menu .pattrix-nav-trigger--link {
	flex: 1 1 auto;
	min-width: 0;
}

.pattrix-nav-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	min-width: 28px;
	min-height: 44px;
	padding: 0;
	color: var(--pattrix-color-text);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.pattrix-nav-menu-toggle .pattrix-ui-icon {
	--pattrix-icon-size: 16px;
	transition: transform var(--pattrix-duration-hover) var(--pattrix-ease-out);
}

.pattrix-nav-menu-toggle[aria-expanded="true"] .pattrix-ui-icon {
	transform: rotate(180deg);
}