/* Products 目录样式只使用现有 Token，避免影响全局导航和首页组件。 */
.pattrix-catalog {
	background: var(--pattrix-color-bg);
	color: var(--pattrix-color-text);
	font-family: var(--wp--preset--font-family--sans);
}

/* WordPress 默认块间距会作用于 Header 后的顶层区块；目录页保持与现有导航连续。 */
.wp-site-blocks > .pattrix-catalog {
	margin-block-start: 0;
}

.pattrix-catalog-container {
	width: min(100% - (2 * var(--pattrix-layout-gutter)), var(--pattrix-layout-wide));
	margin: 0 auto;
}


/*
   筛选面板与类型选项

   筛选状态全部由服务端渲染决定，这里只负责呈现，不隐藏任何选项。 */


.pattrix-catalog-filter-fields {
	display: grid;
	flex: 1;
	min-width: 0;
	grid-template-columns: minmax(0, 1fr) minmax(200px, 0.42fr);
	gap: 16px;
}

.pattrix-catalog-filter-fields input[type='search'],
.pattrix-catalog-filter-fields select {
	width: 100%;
	min-height: 44px;
	box-sizing: border-box;
	padding: 8px 12px;
	border: 1px solid var(--pattrix-color-border-strong);
	border-radius: var(--pattrix-radius-control);
	background: var(--pattrix-color-input);
	color: var(--pattrix-color-text);
	font: inherit;
}

.pattrix-catalog-filter-fields input[type='search']::placeholder {
	color: var(--pattrix-color-text-muted);
	opacity: 1;
}

.pattrix-catalog-filter-group {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.pattrix-catalog-filter-group legend {
	margin-bottom: var(--pattrix-space-1);
	padding: 0;
	color: var(--pattrix-color-text-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
}

.pattrix-catalog-route-links,
.pattrix-catalog-filter-type-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--pattrix-space-1);
}

.pattrix-catalog-route-links a,
.pattrix-catalog-filter-type-option span {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 8px 12px;
	border: 1px solid var(--pattrix-color-border-strong);
	border-radius: var(--pattrix-radius-control);
	background: var(--pattrix-color-input);
	color: var(--pattrix-color-text);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.pattrix-catalog-filter-type-option {
	position: relative;
	display: block;
	min-width: 0;
	cursor: pointer;
}

.pattrix-catalog-filter-type-option input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pattrix-catalog-filter-type-option input:checked + span {
	border-color: var(--pattrix-color-inverse);
	background: var(--pattrix-color-inverse);
	color: var(--pattrix-color-on-inverse, #fff);
}

.pattrix-catalog-route-links a:hover,
.pattrix-catalog-filter-type-option:hover span {
	border-color: var(--pattrix-color-interaction);
	color: var(--pattrix-color-interaction);
}

.pattrix-catalog-filter-type-option input:checked + span:hover {
	background: var(--pattrix-color-interaction);
	color: var(--pattrix-color-on-inverse, #fff);
}

.pattrix-catalog-filter-type-option input:focus-visible + span {
	outline: 2px solid var(--pattrix-color-focus, var(--pattrix-color-brand));
	outline-offset: 3px;
}

/*
   目录网格与卡片

   卡片媒体比例固定，同行高度由标题行数决定，避免目录参差。 */

.pattrix-catalog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 24px;
}

/* 产品卡入场动画：门控类由 JS 添加，脚本未执行时卡片保持可见。 */
.pattrix-catalog-grid.pattrix-reveal-ready .pattrix-reveal-item {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--pattrix-duration-base) var(--pattrix-ease-standard),
	            transform var(--pattrix-duration-base) var(--pattrix-ease-standard);
	transition-delay: var(--pattrix-reveal-delay, 0ms);
}

.pattrix-catalog-grid.pattrix-reveal-ready .pattrix-reveal-item.is-visible {
	opacity: 1;
	transform: none;
}

.pattrix-catalog-card {
	display: flex;
	box-sizing: border-box;
	min-width: 0;
	flex-direction: column;
	padding: var(--pattrix-space-2);
	border: 1px solid var(--pattrix-color-border);
	background: var(--pattrix-color-surface);
	color: inherit;
	text-decoration: none;
}

.pattrix-catalog-card-media {
	display: block;
	aspect-ratio: var(--pattrix-media-frame-ratio, 4 / 5);
	overflow: hidden;
	background: #ffffff;
}

.pattrix-catalog-card-media > a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}

.pattrix-catalog-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var(--pattrix-duration-base) var(--pattrix-ease-standard);
}

.pattrix-catalog-card-hover-image {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--pattrix-duration-base) var(--pattrix-ease-standard);
}

.pattrix-catalog-card:hover .pattrix-catalog-card-media img,
.pattrix-catalog-card:focus-within .pattrix-catalog-card-media img {
	transform: scale(var(--pattrix-product-hover-scale, 1.015));
}

.pattrix-catalog-card-model {
	margin-top: 16px;
	color: var(--pattrix-color-text-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	text-transform: uppercase;
}

.pattrix-catalog-card-title {
	margin-top: 8px;
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 500;
}

/*
   分页与通用图标

   分页与图标是全站共用词汇，改动前先确认其它页面未复用。

   圆形单元画在 li 上（外径 40px，移动端 26px，margin 0 2px），当前页实底反白，
   首/末页是不可点的占位单元。
   本节单元必须显式 box-sizing: border-box：主题没有全局 border-box 重置，
   漏掉这条圆外径会变成 42/28。
   ul 与当前页 li 上的 .page-numbers 样式已不依赖：本节与目录的对比度覆盖都按
   .pagination > li 限定，保留它只为不改动 WordPress 的既有类名约定。 */

.pattrix-pagination {
	display: flex;
	justify-content: center;
	margin: 64px 0;
}

.pattrix-pagination .pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pattrix-pagination .pagination > li {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 2px;
	border: 1px solid var(--pattrix-color-border);
	border-radius: 50%;
	background: var(--pattrix-color-bg);
	color: var(--pattrix-color-text);
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	transition: background-color var(--pattrix-duration-fast) var(--pattrix-ease-standard), border-color var(--pattrix-duration-fast) var(--pattrix-ease-standard), color var(--pattrix-duration-fast) var(--pattrix-ease-standard), transform var(--pattrix-duration-fast) var(--pattrix-ease-standard);
}

/* 圆形与边框画在 li 上，可点区域因此覆盖整个圆而不只是数字。 */
.pattrix-pagination .pagination > li > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	color: inherit;
	text-decoration: none;
}

.pattrix-pagination .pagination > li .pattrix-ui-icon {
	--pattrix-icon-size: 18px;
}

.pattrix-pagination .pagination > li.active {
	border-color: var(--pattrix-color-inverse);
	background: var(--pattrix-color-inverse);
	color: var(--pattrix-color-on-inverse, #fff);
	font-weight: 500;
}

/* 首/末页箭头占位：不可点，配色按主题的弱化文字色处理。 */
.pattrix-pagination .pagination > li.disabled {
	color: var(--pattrix-color-text-muted);
}

/* 省略号是主题的 Lucide 图标而非文字字符；该单元不可点，所以 li 直接带上
   .pattrix-ui-icon--ellipsis，形状由 component 层那份 mask 声明提供（不在这里重复写一遍）。
   这里只需把底色调成 currentColor —— li 基类的白底特异性更高，不覆盖就会把图标遮成白的。 */
.pattrix-pagination .pagination > li.dots {
	width: 24px;
	border-color: transparent;
	background-color: currentColor;
}

@media (hover: hover) and (pointer: fine) {
	.pattrix-pagination .pagination > li:not(.active, .disabled, .dots):hover {
		border-color: var(--pattrix-color-border-strong);
		background: var(--pattrix-color-surface);
	}
}

.pattrix-pagination .pagination > li > a:active {
	transform: scale(0.97);
}

/* 移动断点用主题既有的 1023px，避免多插一个孤立断点。 */
@media (max-width: 1023px) {
	.pattrix-pagination .pagination > li {
		width: 26px;
		height: 26px;
		font-size: 12px;
	}

	.pattrix-pagination .pagination > li .pattrix-ui-icon {
		--pattrix-icon-size: 14px;
	}

	.pattrix-pagination .pagination > li.dots {
		width: 16px;
	}
}

/*
   空状态、SEO 正文与报价带

   无结果时仍要保留可索引的正文与下一步入口，不能只显示一句提示。 */

.pattrix-catalog-empty {
	padding: 64px 0;
	color: var(--pattrix-color-text-muted);
}

.pattrix-catalog-quote-band .pattrix-catalog-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.pattrix-catalog a:focus-visible,
.pattrix-catalog select:focus-visible,
.pattrix-catalog button:focus-visible {
	outline: 2px solid var(--pattrix-color-focus, var(--pattrix-color-brand));
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.pattrix-catalog-card-media img { transition: none; }
}

.pattrix-catalog-active-filters {
	margin: var(--pattrix-space-2) 0 0;
	color: var(--pattrix-color-text-muted);
	font-size: var(--wp--preset--font-size--small);
	gap: var(--pattrix-space-1);
}

.pattrix-catalog-active-filters__label {
	color: var(--pattrix-color-text-muted);
	font-weight: 500;
}

.pattrix-catalog-active-filters__values {
	color: var(--pattrix-color-text);
	font-weight: 600;
}

.pattrix-catalog-active-filters__overflow {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 6px;
	border: 1px solid var(--pattrix-color-border-strong);
	border-radius: 999px;
	color: var(--pattrix-color-text-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
}

.pattrix-catalog-clear-active-filters {
	color: var(--pattrix-color-interaction);
	font-weight: 600;
	text-decoration: none;
}

.pattrix-catalog-clear-active-filters:hover,
.pattrix-catalog-clear-active-filters:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 当前条件是可逐个撤销的 SSR 链接；排序保留在结果侧的单独控件。 */
.pattrix-catalog-result-context {
	margin: 0;
	color: var(--pattrix-color-text-muted);
	font-size: 14px;
}

.pattrix-catalog-result-context--toolbar {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.pattrix-catalog-result-context__label { flex: 0 0 auto; }

.pattrix-catalog-active-filter-chips {
	display: flex;
	gap: 6px;
	min-width: 0;
	overflow: auto;
	white-space: nowrap;
}

.pattrix-catalog-active-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 4px 12px;
	border: 1px solid var(--pattrix-catalog-control-border, var(--pattrix-color-border-strong));
	border-radius: 6px;
	background: var(--pattrix-color-surface);
	color: var(--pattrix-color-text);
	text-decoration: none;
}

.pattrix-catalog-active-filter-chip:hover { color: var(--pattrix-color-interaction); }

.pattrix-catalog-result-context--results { display: none; }

.pattrix-catalog-filter-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
}

/*
   移动端工具与卡片规格

   移动端把筛选收进抽屉，卡片规格必须仍可比较，不因收窄而降级。 */

.pattrix-catalog-mobile-tools,
.pattrix-catalog-filter-close {
	display: none;
}

.pattrix-catalog-filter-fields {
	grid-template-columns: minmax(220px, 1fr) minmax(210px, .64fr) minmax(210px, .64fr) minmax(150px, .32fr);
}

.pattrix-catalog-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pattrix-space-5) var(--pattrix-space-4);
	margin-top: var(--pattrix-space-5);
}

.pattrix-catalog-card-media {
	aspect-ratio: 4 / 5;
}

.pattrix-catalog-card-title,
.pattrix-catalog-card-title a,
.pattrix-catalog-card-meta,
.pattrix-catalog-card-facts dd {
	min-width: 0;
	overflow-wrap: break-word;
}

.pattrix-catalog-card-title {
	margin: var(--pattrix-space-2) 0 0;
	min-block-size: 2.7em;
	line-height: 1.35;
}

.pattrix-catalog-card-title a {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: inherit;
	overflow: hidden;
	text-decoration: none;
}

.pattrix-catalog-card-meta,
.pattrix-catalog-card-colors {
	margin: var(--pattrix-space-2) 0 0;
	color: var(--pattrix-color-text-muted);
	font-size: var(--wp--preset--font-size--small);
}

.pattrix-catalog-card-facts {
	display: grid;
	gap: var(--pattrix-space-1);
	margin: var(--pattrix-space-3) 0 0;
	padding: var(--pattrix-space-3) 0;
	border-top: 1px solid var(--pattrix-color-border);
	border-bottom: 1px solid var(--pattrix-color-border);
}

.pattrix-catalog-card-facts > div {
	display: block;
}

.pattrix-catalog-card-facts dt,
.pattrix-catalog-card-facts dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.pattrix-catalog-card-facts dt {
	color: var(--pattrix-color-text-muted);
	white-space: nowrap;
}

.pattrix-catalog-card-facts dd {
	margin-top: 4px;
	text-align: left;
}

.pattrix-catalog-card-fact--dimensions dd {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* 说明值走两行槽位：槽位 = 行高 1.6 × 2 行 = 3.2em，与标题（2.7em/1.35）和型号（1.4em/1.4）
 * 是同一套"行高 × 行数"算法。Material 实测 22–70 字，同一网格里会占 1 行或 2 行；
 * 不留槽位就会把后面的 Dimensions 行顶开一行（实测 22px），同一行卡片的事实行就对不齐。
 * 尺寸行是单行数字且已 nowrap，不需要槽位。 */
.pattrix-catalog-card-facts > div:not(.pattrix-catalog-card-fact--dimensions) dd {
	line-height: 1.6;
	min-block-size: 3.2em;
}

.pattrix-catalog-card-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: var(--pattrix-space-3);
	color: var(--pattrix-color-text);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color var(--pattrix-duration-base) var(--pattrix-ease-standard);
}

.pattrix-catalog-card-meta { margin-top: auto; }

@media (hover: hover) and (pointer: fine) {
	.pattrix-catalog-card:hover .pattrix-catalog-card-link,
	.pattrix-catalog-card-title a:hover {
		color: var(--pattrix-color-interaction);
	}
	.pattrix-catalog-card:hover {
		border-color: var(--pattrix-color-interaction);
	}
	.pattrix-catalog-card:focus-within {
		border-color: var(--pattrix-color-interaction);
	}
	.pattrix-catalog-card-media:hover .pattrix-catalog-card-hover-image {
		opacity: 1;
	}
}

.pattrix-catalog-card-media.has-error img:not(.pattrix-catalog-card-hover-image) { opacity: .22; }

.pattrix-catalog-card-media:focus-within .pattrix-catalog-card-hover-image {
	opacity: 1;
}

.pattrix-catalog-card-media.has-error .pattrix-catalog-card-hover-image { opacity: 0; }

.pattrix-catalog-primary-link:active,
.pattrix-catalog-card-link:active {
	transform: scale(.97);
}

.pattrix-catalog-filter-backdrop { display: none; }

/*
   列表工具栏与排序

   工具栏吸顶层级低于站点导航，滚动时不得遮挡面包屑。 */

.pattrix-catalog-content {
	/* 侧栏宽与列间距随视口流式收缩，而不是在断点上跳档：在断点上跳档时（≤1199 一个值、
	   ≥1200 突然回到更大的值），视口跨过 1200 变宽 1px，卡片反而从 260px 缩到 241px。
	   系数取到 1440 时正好触顶（260/60），1440 以上保持该排版。 */
	--pattrix-catalog-filter-width: clamp(200px, 18.1vw, 260px);
	--pattrix-catalog-column-gap: clamp(24px, 4.2vw, 60px);
	display: grid;
	grid-template-columns: var(--pattrix-catalog-filter-width) minmax(0, 1fr);
	align-items: start;
	column-gap: var(--pattrix-catalog-column-gap);
	margin-top: 16px;
	transition: grid-template-columns .3s cubic-bezier(.25, .45, .45, .95);
}

.pattrix-catalog-listing-toolbar {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: var(--pattrix-catalog-filter-width) var(--pattrix-catalog-column-gap) minmax(0, 1fr) auto;
	align-items: center;
	min-height: 45px;
	border-bottom: 1px solid var(--pattrix-color-border);
}

.pattrix-catalog-listing-summary { grid-column: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; padding: 8px 16px 8px 0; }
.pattrix-catalog-result-count { margin: 0; color: var(--pattrix-color-text-muted); font-size: 14px; white-space: nowrap; }

.pattrix-catalog-active-filters.pattrix-catalog-active-filters--toolbar {
	grid-column: 3;
	align-self: stretch;
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pattrix-catalog-active-filters--results {
	display: none;
}

.pattrix-catalog-sort-control { grid-column: 4; }

.pattrix-catalog-desktop-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 16px;
	cursor: pointer;
}

.pattrix-catalog-tool-icon,
.pattrix-catalog-tool-icon svg,
.pattrix-catalog-tool-chevron {
	display: block;
}

.pattrix-catalog-tool-chevron {
	width: 24px;
	height: 24px;
	transition: transform .25s ease;
}

.pattrix-catalog.is-desktop-filter-collapsed .pattrix-catalog-content {
	grid-template-columns: 0 minmax(0, 1fr);
}

.pattrix-catalog.is-desktop-filter-collapsed .pattrix-catalog-filters {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.pattrix-catalog.is-desktop-filter-collapsed .pattrix-catalog-tool-chevron {
	transform: rotate(180deg);
}

.pattrix-catalog-filters {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}

.pattrix-catalog-filter-sticky {
	position: sticky;
	top: calc(var(--pattrix-header-height) + 24px);
}

.pattrix-catalog-filter-topline,
.pattrix-catalog-filter-group-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pattrix-catalog-filter-topline {
	display: none;
}

.pattrix-catalog-filter-heading {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
}

.pattrix-catalog-filter-topline .pattrix-catalog-filter-heading {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pattrix-catalog-filter-close {
	display: none;
}

.pattrix-catalog-filter-fields {
	display: block;
	margin: 0;
}

.pattrix-catalog-filter-group {
	margin: 0;
	padding: 0 0 10px;
	border: 0;
}

.pattrix-catalog-filter-group--search {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 132px;
	align-items: center;
	gap: 8px;
	padding-top: 20px;
	padding-bottom: 30px;
}

.pattrix-catalog-filter-group-toggle {
	width: 100%;
	min-height: 45px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 16px;
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}

.pattrix-catalog-filter-group-toggle svg {
	flex: 0 0 24px;
	transition: transform .25s ease;
}

.pattrix-catalog-filter-group-toggle[aria-expanded='true'] svg {
	transform: rotate(180deg);
}

/* 折叠用 grid-template-rows 0fr↔1fr 而不是 max-height：后者属会触发布局的属性，
   每帧都要重算布局。行高动画不改变盒模型，也不必再读 scrollHeight 去量内容高度。
   网格项默认 min-height:auto 会顶住内容高度，必须显式归零，0fr 才收得下去；
   子项 overflow:hidden 负责在收起过程中裁剪，父项的 overflow 兜住其余溢出。 */
.pattrix-catalog-filter-group-content {
	display: grid;
	grid-template-rows: 1fr;
	opacity: 1;
	overflow: hidden;
	transition: grid-template-rows .3s cubic-bezier(.25, .45, .45, .95), opacity .3s cubic-bezier(.25, .45, .45, .95);
}

.pattrix-catalog-filter-group-content > * {
	min-height: 0;
	overflow: hidden;
}

.pattrix-catalog-filter-group-content.is-collapsed {
	grid-template-rows: 0fr;
	opacity: 0;
}

.pattrix-catalog-filter-group-content > * {
	min-width: 0;
}

.pattrix-catalog-filter-group-content[hidden] {
	display: none !important;
	opacity: 0;
}

.pattrix-catalog-filter-fields input[type='search'] {
	min-height: 44px;
	padding: 10px 12px;
	border: 0;
	border-radius: 6px 0 0 6px;
	background: transparent;
	font-size: 14px;
}

.pattrix-catalog-filter-search-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	border: 1px solid var(--pattrix-catalog-control-border);
	border-radius: 6px;
	background: var(--pattrix-color-surface);
}

/* 折叠容器会裁剪外轮廓，键盘焦点使用控件内部的可见轮廓。 */
.pattrix-catalog-filter-search-inner input:focus-visible,
.pattrix-catalog-search-submit:focus-visible { outline-offset: -3px; }

.pattrix-catalog-search-submit {
	display: grid;
	place-items: center;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0 6px 6px 0;
	background: transparent;
	color: var(--pattrix-color-text);
	cursor: pointer;
}

.pattrix-catalog-search-submit:hover { background: var(--pattrix-color-surface-strong); }

.pattrix-catalog-route-links,
.pattrix-catalog-filter-type-options {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.pattrix-catalog-route-links a,
.pattrix-catalog-filter-type-option span {
	min-height: 40px;
	justify-content: center;
	padding: 8px 10px;
	border-color: #c7c8c8;
	border-radius: 3px;
	background: #fff;
	font-size: 14px;
}

.pattrix-catalog-filter-type-option span {
	position: relative;
	justify-content: flex-start;
	gap: 8px;
}


.pattrix-catalog-filter-type-option input:checked + span {
	border-color: var(--pattrix-color-inverse);
	background: var(--pattrix-color-inverse);
	color: var(--pattrix-color-on-inverse, #fff);
}


/* 产品类型为可扫描的原生多选列表，保留 checkbox 的明确选中语义。 */
.pattrix-catalog-filter-type-options {
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.pattrix-catalog-filter-type-option {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 30px;
}

.pattrix-catalog-filter-type-option input {
	position: static;
	flex: 0 0 16px;
	inline-size: 16px;
	block-size: 16px;
	margin: 0;
	overflow: visible;
	clip-path: none;
	accent-color: var(--pattrix-color-interaction);
}

.pattrix-catalog-filter-type-option span,
.pattrix-catalog-filter-type-option input:checked + span,
.pattrix-catalog-filter-type-option input:checked + span:hover {
	min-height: 0;
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--pattrix-color-text);
	font-size: 14px;
	line-height: 1.4;
}

.pattrix-catalog-filter-type-option:hover span {
	color: var(--pattrix-color-interaction);
}

.pattrix-catalog-filter-tick {
	display: none !important;
}

.pattrix-catalog-filter-type-option input:focus-visible {
	outline: 2px solid var(--pattrix-color-focus, var(--pattrix-color-brand));
	outline-offset: 2px;
}

.pattrix-catalog-clear-filters {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	box-sizing: border-box;
	padding: 8px 14px;
	border: 1px solid var(--pattrix-color-border-strong);
	border-radius: 6px;
	background: var(--pattrix-color-surface);
	color: var(--pattrix-color-text);
	font-size: 14px;
	text-decoration: none;
}

.pattrix-catalog-clear-filters:hover { background: var(--pattrix-color-surface-strong); }

/*
   结果区与筛选分组形态

   结果计数与已选条件同源，避免两处各自计算导致数字不一致。 */

.pattrix-catalog-results {
	min-width: 0;
}

.pattrix-catalog-active-filters {
	margin: 0;
	color: var(--pattrix-color-text-muted);
	font-size: 14px;
}

.pattrix-catalog-active-filters {
	margin: 0 0 20px;
}

.pattrix-catalog-sort-control {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.pattrix-catalog-sort-control select {
	min-height: 40px;
	padding: 8px 32px 8px 10px;
	border: 1px solid #c7c8c8;
	border-radius: 3px;
	appearance: none;
	background: #fff;
	color: inherit;
	font: inherit;
}

.pattrix-catalog-sort-control svg {
	position: absolute;
	right: 8px;
	pointer-events: none;
}

.pattrix-catalog-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* 每个自动网格行由内容最多的卡片决定高度，同行卡片随行高拉伸。 */
	align-items: stretch;
	gap: 48px 30px;
	margin-top: 0;
}

.pattrix-catalog-card {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 0;
	background: transparent;
}

.pattrix-catalog-card-model {
	display: block;
	min-block-size: 1.4em;
	line-height: 1.4;
	margin-top: 14px;
}

/* 平板与手机共用抽屉：1199 及以下统一走抽屉，网格拿全宽并给 3 列。
   768–1199 若维持「常驻侧栏 + 3 列」，卡片实测只有 128px（1440 是 315px），
   而 768–1199 正是展厅/车间平板的宽度。 */
@media (max-width: 1199px) {
	.pattrix-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pattrix-catalog.is-filter-enhanced .pattrix-catalog-mobile-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pattrix-space-2); margin-top: var(--pattrix-space-3); }
	.pattrix-catalog-mobile-tools button,
	.pattrix-catalog-filter-close { min-height: 44px; border: 1px solid var(--pattrix-color-border-strong); border-radius: var(--pattrix-radius-control); background: var(--pattrix-color-bg); color: var(--pattrix-color-text); font: inherit; }
	.pattrix-catalog-mobile-tools button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
	.pattrix-catalog.is-filter-enhanced .pattrix-catalog-filters { display: none; }
	.pattrix-catalog.is-filter-enhanced.is-filter-open .pattrix-catalog-filters { position: fixed; inset: auto 0 0; z-index: 60; display: flex; max-height: min(80vh, 640px); overflow: auto; padding: var(--pattrix-space-4) var(--pattrix-layout-gutter); background: var(--pattrix-color-bg); border-top: 1px solid var(--pattrix-color-border-strong); box-sizing: border-box; }
	.pattrix-catalog-filter-backdrop { position: fixed; inset: 0; z-index: 59; display: none; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(15, 15, 16, .32); cursor: pointer; }
	.pattrix-catalog.is-filter-enhanced.is-filter-open .pattrix-catalog-filter-backdrop { display: block; }
	.pattrix-catalog.is-filter-enhanced.is-filter-open .pattrix-catalog-filters { overscroll-behavior: contain; }
	.pattrix-catalog.is-filter-enhanced .pattrix-catalog-filter-close { display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; padding: 0 var(--pattrix-space-3); }
	.pattrix-catalog.is-filter-enhanced .pattrix-catalog-filter-fields { grid-template-columns: minmax(0, 1fr); }
	.pattrix-catalog-content { display: block; margin-top: var(--pattrix-space-3); }
	/* 工具栏在抽屉模式下**保持显示**，改为一行 flex 以承载排序控件。
	   整体 display:none 会让手机上排序既不可用、又留下「Sort」按钮这个 0×0 焦点目标
	   （focus() 无效，activeElement 停在 BODY）。 */
	.pattrix-catalog-listing-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--pattrix-space-3); min-height: 44px; }
	.pattrix-catalog-desktop-filter-toggle { display: none; }
		.pattrix-catalog-active-filters--results { display: flex; align-items: center; flex-wrap: wrap; margin: 0 0 20px; }
		.pattrix-catalog-result-context--toolbar { display: none; }
		.pattrix-catalog-result-context--results { display: block; margin: 0 0 20px; }
		.pattrix-catalog-filter-sticky { position: static; }
		.pattrix-catalog.is-filter-enhanced.is-filter-open .pattrix-catalog-filter-sticky { display: flex; flex-direction: column; width: 100%; }
		.pattrix-catalog.is-filter-enhanced.is-filter-open .pattrix-catalog-filter-actions { position: sticky; top: 0; z-index: 1; order: 1; margin: 0; padding: var(--pattrix-space-2) 0; background: var(--pattrix-color-bg); }
		.pattrix-catalog.is-filter-enhanced.is-filter-open .pattrix-catalog-filter-fields { order: 2; }
	.pattrix-catalog.is-filter-enhanced.is-filter-open .pattrix-catalog-filters { display: block; }
	.pattrix-catalog.is-filter-enhanced .pattrix-catalog-filter-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; }
	.pattrix-catalog-filter-topline { display: flex; min-height: 52px; }
	.pattrix-catalog-filter-group--search { grid-template-columns: minmax(0, 1fr); }
	.pattrix-catalog-filter-group-toggle { min-height: 48px; }
	.pattrix-catalog-results { margin-top: var(--pattrix-space-4); }
}

/* 768–1023：抽屉已收起、网格满宽，但三列会让卡片掉到 230px 上下，改用两列维持与 1440 同量级的卡片宽。 */
@media (max-width: 1023px) {
	.pattrix-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pattrix-space-4) var(--pattrix-space-3); }
}

@media (max-width: 767px) {
	.pattrix-catalog-card { padding: var(--pattrix-space-1); }
	.pattrix-catalog-card-model { margin-top: var(--pattrix-space-2); }
	.pattrix-catalog-card-title { font-size: var(--wp--preset--font-size--small); }
	.pattrix-catalog-card-facts { gap: 4px; margin-top: var(--pattrix-space-2); padding: var(--pattrix-space-2) 0; }
	.pattrix-catalog-card-facts dt,
	.pattrix-catalog-card-facts dd,
	.pattrix-catalog-card-meta,
	.pattrix-catalog-card-more-variants,
	.pattrix-catalog-card-link { font-size: var(--wp--preset--font-size--caption); }
}

@media (max-width: 479px) {
	.pattrix-catalog-grid { grid-template-columns: minmax(0, 1fr); }
	.pattrix-catalog-card { padding: var(--pattrix-space-2); }
}

.pattrix-catalog .pattrix-catalog-filter-group--search {
	display: block;
	padding-bottom: 12px;
}

.pattrix-catalog .pattrix-catalog-filter-group--search .pattrix-catalog-filter-group-content,
.pattrix-catalog .pattrix-catalog-filter-group--search input[type='search'] {
	width: 100%;
}

.pattrix-catalog .pattrix-catalog-filter-group--types {
	margin-top: -4px;
}

.pattrix-catalog .pattrix-catalog-filter-group-toggle {
	transition: color var(--pattrix-duration-fast) var(--pattrix-ease-standard);
}

.pattrix-catalog .pattrix-catalog-filter-group-toggle:hover {
	color: var(--pattrix-color-interaction);
}

/* 交互控件的边界要达到 WCAG 1.4.11 的 3:1。分页圆点用的 --pattrix-color-border
   (#EBEBEC) 对白底只有 1.19:1，表单边框用的 --pattrix-color-border-strong (#C7C8C8)
   只有 1.68:1 —— 两者在白底上几乎看不见边界。#949494 对白底为 3.03:1，是达标的下限。
   只在目录这一层覆盖，不动全站 token（改成深色会连带改变导航、卡片等处的细线观感）。

   只作用于**可点的普通页码**：当前页与省略号必须排除。这两格有自己的边框语义
   （active 与填充同色，边框应当看不见；
   dots 是透明的图标格），而本条的选择器特异性更高，不排除就会给它们各描一圈灰边。 */
.pattrix-catalog { --pattrix-catalog-control-border: #949494; }

.pattrix-catalog .pattrix-pagination .pagination > li:not(.active, .dots),
.pattrix-catalog .pattrix-catalog-filter-fields select,
.pattrix-catalog .pattrix-catalog-sort-control select,
.pattrix-catalog .pattrix-catalog-filter-type-option span { border-color: var(--pattrix-catalog-control-border); }

@media (prefers-reduced-motion: reduce) {
	/* 筛选开合仍同步最终状态，但不播放尺寸、淡入或箭头旋转过渡。 */
	.pattrix-catalog-content,
	.pattrix-catalog-filters,
	.pattrix-catalog-filter-group-content,
	.pattrix-catalog-tool-chevron,
	.pattrix-catalog-filter-group-toggle svg { transition: none; }
}