/* ==========================================================================
   Entrava 子主题 · 产品模块样式
   文件：assets/css/products.css
   加载：wp_enqueue_scripts（仅产品相关页面），依赖主题主样式 'stylesheet'

   约定：
   1. 产品模块的所有样式一律放本文件，不写进子主题 style.css，
      避免全局样式与业务样式互相干扰、后续改动牵连全站。
   2. 全部类名走 .entrava-products-* 命名空间，与父主题 .post-loop-* 等内部类解耦，
      父主题改版不会波及产品页。
   3. 颜色/圆角优先复用父主题 CSS 变量，变量缺失时给硬编码兜底值。
   ========================================================================== */

/* ---------- 归档页 / 分类页 Hero（历史样式） ----------
   配色说明（2026-10-26 复核）：
   --theme-color 跟随后台「主题设置 → 主题色」（实测 #ff6200），
   所以品牌色一律用它 + 硬编码兜底（见下方 var(--theme-color,#F26B21)）。
   --theme-color-h/s/l 是「深色统色」的 HSL 分量（当前 0/0%/15% = 近黑 #262626），
   供 --theme-black-color / --theme-gray-color 使用，与品牌色无关。
   切勿用 --theme-gray-color（半透明深灰）当底 —— 会变成深底深字、标题看不清。

   2026-10-29：/products 归档页 hero 已统一到 .term-hero（functions.php 的
   entrava_child_hero()），下面三条规则不再被任何模板输出。
   保留的原因：万一模板更新了、CSS 还是旧缓存，有这三条至少不会白底白字；
   确认无回退后可以整段删除。 */
.entrava-products-hero{background:var(--theme-black-color,#262626)}
.entrava-products-hero>.container{padding-bottom:70px;padding-top:70px}
.entrava-products-hero-title{color:#fff;font-size:34px;font-weight:600;line-height:1.25;margin:0}

/* ---------- Hero 高度 / 图片遮罩（可配置 · 2026-10-29） ----------
   --term-hero-h     Hero 最小高度（后台「产品 → 产品页设置 → Hero 高度」）
   --term-hero-mask  图片压暗强度 0–1（同上「图片压暗强度」）
   两个变量由 functions.php 的 entrava_child_hero() 写在 style 属性上。
   用 CSS 变量而不是直接写 min-height，是为了让下面的媒体查询能覆盖 ——
   inline 的 min-height 写在元素上，媒体查询压不过它。
   term 页不传这两个参数 → 变量取默认值 → 与改造前完全一致。 */
.term-hero{min-height:var(--term-hero-h,0px)}

/* 遮罩层：压在图上、文字下（.term-hero > .container 是 z-index:1） */
.term-hero::after{
	content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
	background:rgba(0,0,0,var(--term-hero-mask,0));
}

/* 设了高度时文字垂直居中；没设高度（.term-hero-tall 不加）保持原来的贴顶排版。
   注意：**不要给 .container 写 width:100%** —— 父主题 .container 是固定 1200px +
   margin:0 auto，写 100% 会把它撑满视口、margin 变成 0，文字直接贴到屏幕左边
   （2026-10-29 线上实测：hero 内文字 left=0，而面包屑 left=113）。 */
.term-hero-tall{display:flex;align-items:center}

/* 文字对齐（「产品 → 产品页设置 → 文字对齐」，默认左对齐 = 不加类） */
.term-hero-align-center{text-align:center}
.term-hero-align-center .term-hero-desc{margin-left:auto;margin-right:auto}
.term-hero-align-right{text-align:right}
.term-hero-align-right .term-hero-desc{margin-left:auto;margin-right:0}

@media(max-width:767px){
	/* 手机上固定高度会吃掉半屏，按 65% 缩 */
	.term-hero{min-height:calc(var(--term-hero-h,0px) * .65)}
}

/* Hero 摘要宽度：桌面与平板收窄到 600px（2026-11-05 客户指定），手机不放这条 ——
   <768 时容器本身比 600 还窄，管不管都一样。
   为什么写在 products.css 而不是 style.css：本文件用 filemtime 做版本，
   传上去刷新即生效；style.css 要被 WPCOM 重新打包才生效，容易误判成「改了没用」。 */
@media(min-width:768px){
	.term-hero-desc{max-width:600px}
}

/* <picture> 只是承载 srcset 的壳：图本身是 position:absolute 的，
   壳不占高度、也不能多出一条行内空白（否则 hero 顶部会多出一条缝）。 */
.term-hero picture{display:block}

/* 手机端 Hero 上下内边距（2026-11-05 客户指定）：top 48 → 0，bottom 保持 48。
   为什么只挂在 .term-hero-tall 上：
   · **设了高度**的 hero（/products，580×0.65 = 377px）是 `display:flex; align-items:center`，
     上下 padding 纯粹是留白，去掉 top 让文字块整体上移、不再「悬在画面中间」；
   · **没设高度**的 hero（分类 / 系列 / 能力页）高度由内容撑开，
     padding-top 归 0 会让标题直接顶到色块上边缘 —— 那些页面必须保持 48。
   桌面 70/70、平板 48/48 都在 style.css 里，本条不碰。 */
@media(max-width:767px){
	.term-hero-tall > .container{padding-top:0}
}

/* ---------- 产品网格 ---------- */
.entrava-products-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));list-style:none;margin:0;padding:0}

/* ---------- 产品卡片 ---------- */
.entrava-products-card{background:#fff;border:1px solid var(--theme-line-color,hsla(217,20%,90%,1));border-radius:var(--theme-border-radius-l,8px);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .25s ease,transform .25s ease}
.entrava-products-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-2px)}

.entrava-products-card-thumb{aspect-ratio:1/1;background:#fff;display:block;overflow:hidden}
.entrava-products-card-thumb img{display:block;height:100%;object-fit:contain;transition:transform .35s ease;width:100%}
.entrava-products-card:hover .entrava-products-card-thumb img{transform:scale(1.04)}
.entrava-products-card-thumb.is-empty{background:hsla(var(--theme-color-hsl,0,0%,88%),.06)}
.entrava-products-card-thumb-empty{align-items:center;color:var(--theme-gray-color,#8a8f98);display:flex;font-size:13px;height:100%;justify-content:center;padding:12px;text-align:center;word-break:break-word}
/* 缺图占位图（2026-10-29）：白底不叠灰；占位图不跟 hover 放大（放大会露馅） */
.entrava-products-card-thumb.is-placeholder{background:#fff}
.entrava-products-card:hover .entrava-products-card-thumb.is-placeholder img{transform:none}

.entrava-products-card-body{display:flex;flex:1 1 auto;flex-direction:column;padding:14px 16px 18px}
/*
 * 标题上方灰字：v1.35 起放「用户容量」（250 users），不再是型号（型号已在标题里）。
 * .entrava-products-card-model 是旧类名，保留同一套排版以便回滚。
 */
.entrava-products-card-model,.entrava-products-card-capacity{color:var(--theme-gray-color,#8a8f98);font-size:12px;letter-spacing:.3px;line-height:18px;margin:0 0 4px}
.entrava-products-card-title{font-size:16px;font-weight:500;line-height:1.45;margin:0}
.entrava-products-card-title a{color:var(--theme-black-color,#1a1d21);text-decoration:none}
.entrava-products-card-title a:hover{color:var(--theme-hover,#1162e8)}
.entrava-products-card-excerpt{color:var(--theme-gray-color,#8a8f98);font-size:13px;line-height:1.7;margin:8px 0 0}

/*
 * 卡片结构化信息（2026-10-28 新增）
 *
 * 两行：① 关键能力（开锁方式等，最多 3 个 + 余量计数）
 *       ② 关键规格（门厚 / 供电，细线分隔，视觉上比能力低一级）
 * 全部复用既有字段（能力开关 / 固定规格），不新增字段。
 *
 * 变量都写了 fallback：卡片在归档页（.entrava-archive 里定义了 --eaf-*）
 * 和详情页「Related Products」（没有这些变量）两处共用同一份模板。
 */
/*
 * 门类 / 系列 pill：v1.34 起卡片**不再输出**（分类页单条系列更累赘、归档页两条太吵），
 * 模板里的 .entrava-products-card-meta 已删。样式保留在这里，需要恢复时只改模板即可。
 */
.entrava-products-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 0}
.entrava-products-card-tag{
	background:hsla(var(--theme-color-hsl,24,90%,54%),.09);
	border:1px solid transparent;
	border-radius:5px;
	color:var(--eaf-ink,#1a1d21);
	font-size:11px;
	letter-spacing:.2px;
	line-height:1;
	padding:4px 7px;
}
.entrava-products-card-tag.is-series{
	background:transparent;
	border-color:var(--eaf-line,hsla(217,20%,90%,1));
	color:var(--eaf-ink2,#6b7280);
}
.entrava-products-card-caps{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0}
.entrava-products-card-cap{
	border:1px solid var(--eaf-line,hsla(217,20%,90%,1));
	border-radius:20px;
	color:var(--eaf-ink2,#6b7280);
	font-size:10.5px;
	line-height:1;
	padding:3px 7px;
}
.entrava-products-card-cap.is-more{background:#f6f7f7;font-weight:500}

/* 关键规格（门厚 / 供电）—— 与上面的 pill 用一条细线隔开，视觉上降一级 */
.entrava-products-card-specs{
	border-top:1px solid var(--eaf-line,hsla(217,20%,90%,1));
	display:flex;
	flex-wrap:wrap;
	gap:2px 16px; /* 两个规格之间留够距离，否则「40–120 mm  Power」会读成一句话 */
	margin:10px 0 0;
	padding-top:9px;
}
.entrava-products-card-spec{color:var(--eaf-ink2,#6b7280);font-size:11px;line-height:1.5}
.entrava-products-card-spec-l{color:#9aa1ab;margin-right:3px}
.entrava-products-card-spec-l::after{content:":"}

/* ---------- 空状态 ---------- */
.entrava-products-empty{padding:48px 0;text-align:center}
.entrava-products-empty p{color:var(--theme-gray-color,#8a8f98);margin:0}
.entrava-products-empty-act{margin-top:14px}
.entrava-af-clear-btn{
	background:var(--theme-black-color,#14100D);
	border-radius:8px;
	color:#fff;
	display:inline-block;
	font-size:13px;
	padding:9px 16px;
	text-decoration:none;
}
.entrava-af-clear-btn:hover{background:var(--theme-color,#F26B21);color:#fff}

/* ---------- 详情页 ---------- */
.entrava-products-single-model{color:var(--theme-gray-color,#8a8f98);font-size:14px;margin:6px 0 18px}
.entrava-products-single-thumb{margin-bottom:26px}
.entrava-products-single-thumb img{border-radius:var(--theme-border-radius-l,8px);height:auto;max-width:100%}
.entrava-products-single-content{line-height:1.85}

/* ---------- 分页器（复用父主题 wpcom_pagination()）----------
 * 父主题 themer/functions/pagination.php 的归档分支用
 * get_previous_posts_link('') / get_next_posts_link('') 输出**空文案**的
 * prev / next 链接（见该文件 55-56、80-81 行），图标由它自己的打包 CSS 补。
 * WPCOM 会把主题样式打进 /wp-content/uploads/wpcom/style.*.css，
 * 一旦那条 ::before 规则缺失，页码两侧就是两个空格子。
 * 这里自带一份，不依赖打包结果；码点取自 themer/assets/css/remixicon.css。
 * 码点：ri-arrow-left-s-line = U+EA64，ri-arrow-right-s-line = U+EA6E
 * 说明：不能用 markup 注入图标 —— get_*_posts_link() 会过 wp_sr_kses()，
 * 它会剥掉 class 属性，所以图标只能走 CSS。
 * 2026-10-28 起箭头改为**纯 CSS 边框**绘制（见下方注释），不再依赖图标字体，
 * 也就绕开了 C24 的字体兜底与父主题 iconbg 字形残留问题。 */
.entrava-products-pager{margin-top:44px}
.entrava-products-pager .pagination{margin:0}

/*
 * 上一页 / 下一页箭头（2026-10-28 两轮修完，最终版）
 *
 * 第一轮问题「双箭头」：父主题对 next 用 ::after（iconbg 的 \e64d），我们对 next 用 ::before
 *   —— 空文案链接上两个伪元素都落在同一个空格子里，叠成「»」。prev 两边都用 ::before，
 *   只有一个生效，所以只有下一页看着坏。
 * 第二轮问题「箭头和上边框重合」：靠图标字体画箭头有两个副作用 ——
 *   ① `line-height:1` 把 18px 字形塞进 18px 行盒并贴着 li 顶边，字形上升部顶出框外；
 *   ② 父主题那条 ::before 仍带 `font-family:iconbg` / `transform:rotate(180deg)`，
 *      我们只覆盖 content 时字体和翻转会残留，字形位置就更飘。
 *
 * 现在改用**纯 CSS 边框画箭头**，不再依赖任何图标字体与字号行高：
 *   · 6×6 空盒子 + border-top/border-right = 一个「┐」尖角；
 *   · next 旋转 45° → 指右；prev 旋转 -135° → 指左；
 *   · 链接本身 flex 居中，箭头永远在格子正中，不会顶边。
 * padding 保持父主题的 0 8px，宽度与页码格子一致。
 */
/*
 * 格子尺寸写死：父主题的 li 是 `display:inline-block; min-width:30px; line-height:28px`，
 * 宽度由内容撑 —— 而我们的箭头是绝对尺寸的空盒，撑不出宽度，flex 居中就没有参照物，
 * 箭头会贴到格子左上。这里给 prev / next 的格子固定 30×28、内部 a 铺满，
 * 居中才有意义（线上 1.42 首版就是这个毛病）。
 */
.entrava-products-pager .pagination>li.prev,
.entrava-products-pager .pagination>li.next{padding:0}

.entrava-products-pager .pagination>li.prev>a,
.entrava-products-pager .pagination>li.next>a{display:flex;align-items:center;justify-content:center;width:30px;height:28px;padding:0;font-size:0;line-height:0;color:var(--theme-black-color,#14100D)}

.entrava-products-pager .pagination>li.prev>a::before,
.entrava-products-pager .pagination>li.next>a::before{
	content:"";display:block;width:6px;height:6px;
	border-top:2px solid currentColor;border-right:2px solid currentColor;
	font-size:0;line-height:0;transform:none;
}

.entrava-products-pager .pagination>li.next>a::before{transform:rotate(45deg);margin-left:-2px}
.entrava-products-pager .pagination>li.prev>a::before{transform:rotate(-135deg);margin-right:-2px}

/* 父主题那份图标彻底取消（next 在 ::after 上，prev 在 ::before 上） */
.entrava-products-pager .pagination>li.prev>a::after,
.entrava-products-pager .pagination>li.next>a::after{content:none!important;display:none!important}

/* ---------- 响应式 ---------- */
@media(max-width:1199px){
	.entrava-products-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
@media(max-width:991px){
	.entrava-products-hero>.container{padding-bottom:48px;padding-top:48px}
	.entrava-products-hero-title{font-size:26px}
}
@media(max-width:767px){
	.entrava-products-grid{gap:16px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
	.entrava-products-card-body{padding:12px 12px 15px}
	.entrava-products-card-title{font-size:15px}
}

/* ============================================================
 * Phase 2-B · 归档页「左筛选 + 右结果」（§13.3）
 *
 * 前缀 .entrava-af-*（archive filter），与详情页 .entrava-single 互不影响。
 * 布局与原型 docs/phase2-archive-demo.html 对齐：
 *   246px 左栏 sticky，右结果 3 列 × 每页 9。
 * ============================================================ */
/* 设计令牌要挂在「抽屉」和「悬浮按钮」两个选择器上。
   原因（2026-11-05 客户手机实测）：.entrava-af-mobile 在 archive-body.php 里是
   `.entrava-archive` 的**兄弟节点**（写在 </div> 之后），拿不到祖先上的自定义属性；
   于是 `background: var(--eaf-ink)` 变成「无效值」→ 背景退回 transparent，
   而 color:#fff 照旧生效 → **白底白字，按钮上的 Filters 和角标全看不见**。
   令牌只定义一次、两个选择器共用，避免两处各写一份后逐渐漂移。 */
.entrava-archive,
.entrava-af-mobile{
	--eaf-line: var(--theme-line-color, hsla(217,20%,90%,1));
	--eaf-ink: var(--theme-black-color, #14100D);
	--eaf-ink2: var(--theme-gray-color, #6b7280);
	--eaf-brand: var(--theme-color, #F26B21);
	--eaf-hover: var(--theme-hover, #1162e8);
}
.entrava-archive{
	display:grid;
	gap:34px;
	grid-template-columns:246px minmax(0,1fr);
	align-items:start;
	padding:26px 0 64px;
}
.entrava-af-main{min-width:0}

/* ---------- 左栏 ---------- */
.entrava-af-panel{
	background:#fff;
	border:1px solid var(--eaf-line);
	border-radius:14px;
	max-height:calc(100vh - var(--e-header-h, 60px) - 34px);
	overflow-y:auto;
	overscroll-behavior:contain;
	padding:6px 16px 16px;
	position:sticky;
	top:calc(var(--e-header-h, 60px) + 16px);
}
.entrava-af-panel::-webkit-scrollbar{width:6px}
.entrava-af-panel::-webkit-scrollbar-thumb{background:#e3ded8;border-radius:3px}

/* 移动端抽屉头 / 桌面隐藏 */
.entrava-af-head{display:none}

.entrava-af-search{margin:14px 0 4px;position:relative}
.entrava-af-search input{
	background:hsla(217,20%,96%,1);
	border:1px solid var(--eaf-line);
	border-radius:10px;
	font-size:12.5px;
	padding:10px 28px 10px 32px;
	text-overflow:ellipsis;
	width:100%;
}
.entrava-af-search input:focus{
	background:#fff;
	border-color:var(--eaf-brand);
	box-shadow:0 0 0 3px hsla(var(--theme-color-hsl,24,90%,54%),.12);
	outline:0;
}
.entrava-af-search-ic{
	color:var(--eaf-ink2);
	font-size:15px;
	left:12px;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}
.entrava-af-search-clear{
	align-items:center;
	background:none;
	border:0;
	color:var(--eaf-ink2);
	cursor:pointer;
	display:none;
	height:26px;
	justify-content:center;
	position:absolute;
	right:6px;
	top:50%;
	transform:translateY(-50%);
	width:26px;
}
.entrava-af-search.has-value .entrava-af-search-clear{display:flex}

/* ---------- facet 组 ---------- */
.entrava-af-group{border-top:1px solid var(--eaf-line);margin-top:10px;padding-top:6px}
.entrava-af-group-h{
	align-items:center;
	background:none;
	border:0;
	cursor:pointer;
	display:flex;
	font-size:13.5px;
	font-weight:600;
	gap:8px;
	padding:9px 0;
	text-align:left;
	width:100%;
}
.entrava-af-group-h>i:first-child{color:var(--eaf-ink2);font-size:16px}
.entrava-af-group-t{flex:1 1 auto}
.entrava-af-group-n{
	background:var(--eaf-brand);
	border-radius:20px;
	color:#fff;
	font-size:11px;
	font-weight:700;
	line-height:17px;
	min-width:17px;
	padding:0 5px;
	text-align:center;
}
.entrava-af-caret{color:var(--eaf-ink2);font-size:16px;transition:transform .2s ease}
.entrava-af-group[data-entrava-open="0"] .entrava-af-caret{transform:rotate(-90deg)}
.entrava-af-group[data-entrava-open="0"] .entrava-af-group-b{display:none}

.entrava-af-group-b{padding:0 0 6px}
.entrava-af-opt{
	align-items:center;
	cursor:pointer;
	display:flex;
	font-size:13px;
	gap:8px;
	line-height:1.5;
	padding:6px 0;
	position:relative;
}
.entrava-af-opt input{
	accent-color:var(--eaf-brand);
	flex:0 0 auto;
	height:15px;
	margin:0;
	width:15px;
}
.entrava-af-opt-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.entrava-af-opt-c{color:var(--eaf-ink2);font-size:12px;font-variant-numeric:tabular-nums}
.entrava-af-opt.is-empty{opacity:.45}
.entrava-af-opt:hover{color:var(--eaf-hover)}

/* Function 组：子分组标题 + 「全系标配」说明行（2026-10-26） */
.entrava-af-sub{
	color:var(--eaf-ink2);
	font-size:10px;
	font-weight:700;
	letter-spacing:.11em;
	margin:12px 0 4px;
	text-transform:uppercase;
}
.entrava-af-sub:first-child{margin-top:2px}
.entrava-af-std{
	background:rgba(0,0,0,.022);
	border:1px dashed var(--eaf-line);
	border-radius:9px;
	color:var(--eaf-ink2);
	font-size:11.5px;
	line-height:1.6;
	margin:9px 0 2px;
	padding:7px 9px;
}
.entrava-af-std b{
	display:block;
	font-size:9.5px;
	font-weight:700;
	letter-spacing:.09em;
	margin-bottom:1px;
	text-transform:uppercase;
}

.entrava-af-clear{
	align-items:center;
	border-top:1px solid var(--eaf-line);
	color:var(--eaf-ink2);
	display:flex;
	font-size:12.5px;
	gap:6px;
	margin-top:10px;
	padding:12px 0 4px;
	text-decoration:none;
}
.entrava-af-clear:hover{color:var(--eaf-brand)}
.entrava-af-note{color:var(--eaf-ink2);font-size:11.5px;line-height:1.6;margin:8px 0 0}

/* 无 JS 降级才有意义的提交按钮：桌面常显、有 JS 时隐藏 */
.entrava-af-apply{
	background:var(--eaf-ink);
	border:0;
	border-radius:8px;
	color:#fff;
	cursor:pointer;
	display:none;
	font-size:13px;
	padding:10px 14px;
	width:100%;
}
html:not(.entrava-js) .entrava-af-apply{display:block;margin-top:10px}

/* ---------- 结果栏 ---------- */
/*
 * 2026-10-28 修：勾选多个筛选后 chips 变多，会把右侧「Sort」挤到第二行。
 *
 * 改法是「外框不换行、chips 自己内部换行、排序固定右上不收缩」：
 *   · resbar      → flex-wrap:nowrap，整体不再断行
 *   · chips       → flex:1 1 auto + min-width:0 + 自身 flex-wrap，多出来的 chip 在
 *                   这一格内部换行，永远吃不掉排序那一格
 *   · sortwrap    → flex:0 0 auto + align-self:flex-start，固定在右上第一条
 *
 * 不能用 `margin-left:auto` 单打独斗：容器一换行，排序就被带到下一行去。
 */
.entrava-af-resbar{
	align-items:flex-start;
	display:flex;
	flex-wrap:nowrap;
	gap:10px 14px;
	margin-bottom:20px;
	min-height:32px;
}
.entrava-af-count{color:var(--eaf-ink2);flex:0 0 auto;font-size:13px;line-height:26px;white-space:nowrap}
.entrava-af-count b{color:var(--eaf-ink);font-size:15px}
.entrava-af-chips{display:flex;flex:1 1 auto;flex-wrap:wrap;gap:8px;min-width:0}
.entrava-af-chip{
	align-items:center;
	background:hsla(var(--theme-color-hsl,24,90%,54%),.08);
	border:1px solid hsla(var(--theme-color-hsl,24,90%,54%),.22);
	border-radius:20px;
	color:var(--eaf-ink);
	display:inline-flex;
	font-size:12px;
	gap:5px;
	padding:3px 10px;
	text-decoration:none;
}
.entrava-af-chip:hover{background:hsla(var(--theme-color-hsl,24,90%,54%),.16)}
.entrava-af-chip i{color:var(--eaf-ink2);font-size:14px}

.entrava-af-sortwrap{align-self:flex-start;flex:0 0 auto;margin-left:auto}
.entrava-af-sort{align-items:center;display:inline-flex;position:relative}
.entrava-af-sort>i{color:var(--eaf-ink2);font-size:14px;pointer-events:none;position:absolute;right:8px}
.entrava-af-sort select{
	appearance:none;
	background:#fff;
	border:1px solid var(--eaf-line);
	border-radius:8px;
	cursor:pointer;
	font-size:12.5px;
	padding:7px 28px 7px 11px;
}
.entrava-af-sort select:focus{border-color:var(--eaf-brand);outline:0}

/* ---------- 3 × 3 网格（覆盖父主题的 auto-fill） ---------- */
.entrava-af-main .entrava-products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.entrava-af-main.is-loading{opacity:.55;pointer-events:none;transition:opacity .15s ease}

/* ---------- 移动端：底部抽屉 ---------- */
.entrava-af-mobile,
.entrava-af-scrim{display:none}

@media(max-width:1140px){
	.entrava-af-main .entrava-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:960px){
	.entrava-archive{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:14px}
	.entrava-af-panel{
		border-radius:20px 20px 0 0;
		bottom:0;
		box-shadow:0 -16px 44px rgba(20,16,13,.2);
		left:0;
		max-height:82vh;
		position:fixed;
		right:0;
		top:auto;
		transform:translateY(103%);
		transition:transform .26s ease;
		z-index:80;
	}
	.entrava-af-panel.is-open{transform:translateY(0)}
	.entrava-af-head{
		border-bottom:1px solid var(--eaf-line);
		display:block;
		padding:20px 0 12px;
		position:relative;
	}
	.entrava-af-grab{
		background:#e3ded8;
		border-radius:2px;
		height:4px;
		left:50%;
		position:absolute;
		top:8px;
		transform:translateX(-50%);
		width:38px;
	}
	.entrava-af-heading{font-size:15px;font-weight:700;margin:0}
	.entrava-af-close{
		align-items:center;
		background:none;
		border:0;
		border-radius:8px;
		color:var(--eaf-ink2);
		cursor:pointer;
		display:flex;
		height:30px;
		justify-content:center;
		position:absolute;
		right:0;
		top:26px;
		width:30px;
	}
	.entrava-af-close:hover{background:hsla(217,20%,96%,1);color:var(--eaf-ink)}
	.entrava-af-apply{display:block;margin-top:12px}
	.entrava-af-mobile{
		align-items:center;
		/* 兜底值不能省：变量万一再次拿不到（作用域变化），至少还是深色底 + 白字 */
		background:var(--eaf-ink,#14100D);
		border:0;
		border-radius:24px;
		bottom:18px;
		box-shadow:0 8px 24px rgba(20,16,13,.28);
		color:#fff;
		cursor:pointer;
		display:flex;
		font-size:13px;
		gap:7px;
		left:50%;
		padding:11px 18px;
		position:fixed;
		transform:translateX(-50%);
		z-index:78;
	}
	.entrava-af-mobile-n{
		background:var(--eaf-brand,#F26B21);
		border-radius:20px;
		font-size:11px;
		font-weight:700;
		line-height:17px;
		min-width:17px;
		padding:0 5px;
		text-align:center;
	}
	.entrava-af-scrim{
		background:rgba(20,16,13,.44);
		border:0;
		bottom:0;
		display:block;
		left:0;
		opacity:0;
		pointer-events:none;
		position:fixed;
		right:0;
		top:0;
		transition:opacity .24s ease;
		z-index:79;
	}
	.entrava-af-scrim.is-on{opacity:1;pointer-events:auto}
}

@media(max-width:680px){
	.entrava-af-main .entrava-products-grid{grid-template-columns:minmax(0,1fr)}
	/* 窄屏没有横向余地，让排序独占一行（chips 在上、排序在下），避免 nowrap 溢出 */
	.entrava-af-resbar{flex-wrap:wrap}
	.entrava-af-sortwrap{flex-basis:100%;margin-left:0}
}

/* =========================================================
   分类指南区块（Phase 3 · templates/products-part/cat-guide.php）
   只有 term 填了 _entrava_products_cat_guide 才输出，普通分类不受影响。
   ====================================================== */
.entrava-cat-guide{margin:0 0 28px}
.entrava-cat-guide-inner{
	background:#fafaf9;
	border:1px solid var(--theme-line-color, hsla(217,20%,90%,1));
	border-radius:16px;
	padding:26px 28px;
}
.entrava-cat-guide-kicker{
	display:inline-flex;align-items:center;gap:7px;
	font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
	color:var(--theme-color,#F26B21);margin-bottom:6px;
}
.entrava-cat-guide-body{color:var(--theme-black-color,#14100D)}
.entrava-cat-guide-body > h2{font-size:19px;font-weight:700;letter-spacing:-.015em;margin:24px 0 10px;line-height:1.4}
.entrava-cat-guide-body > h2:first-child{margin-top:6px}
.entrava-cat-guide-body > h3{font-size:16px;font-weight:700;margin:18px 0 8px;line-height:1.45}
.entrava-cat-guide-body p{font-size:14px;color:var(--theme-gray-color,#6b7280);line-height:1.85;margin:0 0 10px}
.entrava-cat-guide-body ul,
.entrava-cat-guide-body ol{margin:10px 0 12px 20px;font-size:14px;color:var(--theme-gray-color,#6b7280);line-height:1.9}
.entrava-cat-guide-body li{margin-bottom:2px}
.entrava-cat-guide-body strong{color:var(--theme-black-color,#14100D);font-weight:600}
.entrava-cat-guide-body table{
	width:100%;border-collapse:collapse;margin:14px 0 6px;font-size:13.5px;
	background:#fff;border:1px solid var(--theme-line-color, hsla(217,20%,90%,1));
	border-radius:10px;overflow:hidden;
}
.entrava-cat-guide-body th,
.entrava-cat-guide-body td{text-align:left;padding:10px 14px;border-bottom:1px solid #f1f1ef;vertical-align:top}
.entrava-cat-guide-body th{
	background:#fff;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
	color:var(--theme-gray-color,#6b7280);font-weight:700;
}
.entrava-cat-guide-body tr:last-child td{border-bottom:0}
.entrava-cat-guide-body details{border-top:1px solid var(--theme-line-color, hsla(217,20%,90%,1));padding:12px 0 2px}
.entrava-cat-guide-body details:first-of-type{border-top:0;padding-top:2px}
.entrava-cat-guide-body summary{
	font-size:14px;font-weight:600;cursor:pointer;list-style:none;
	display:flex;align-items:center;gap:8px;color:var(--theme-black-color,#14100D);
}
.entrava-cat-guide-body summary::-webkit-details-marker{display:none}
.entrava-cat-guide-body summary::before{content:"+";color:var(--theme-color,#F26B21);font-weight:700;width:12px;flex:0 0 auto}
.entrava-cat-guide-body details[open] summary::before{content:"-"}
.entrava-cat-guide-body details p{margin:8px 0 0 20px}

@media(max-width:680px){
	.entrava-cat-guide-inner{padding:20px 18px;border-radius:14px}
	.entrava-cat-guide-body table{display:block;overflow-x:auto}
}

/* =========================================================
   面包屑与下方内容之间的间距（2026-10-26）
   父主题两条规则先后覆盖：.breadcrumb{margin-bottom:20px}
   → 最后一条 .breadcrumb{margin-bottom:0;margin-top:20px}，
   结果 term 页上面包屑底部与指南卡片顶部实测 gap = 0px，
   卡片圆角压着面包屑，视觉上像重叠。
   只在产品三个页面加，不动站内其它页面的面包屑。
   ====================================================== */
body.tax-products_cat .breadcrumb-wrap,
body.tax-products_series .breadcrumb-wrap,
body.tax-products_feature .breadcrumb-wrap,
body.post-type-archive-products .breadcrumb-wrap{padding-bottom:16px}

@media(max-width:680px){
	body.tax-products_cat .breadcrumb-wrap,
	body.tax-products_series .breadcrumb-wrap,
	body.tax-products_feature .breadcrumb-wrap,
	body.post-type-archive-products .breadcrumb-wrap{padding-bottom:12px}
}

/* =========================================================
   Phase 3 · 短码区块（2026-11-01）
   [products_list] / [products_categories]

   只在这些页面加载 products.css：短码出现在正文里时由
   Shortcodes::needs_assets() 回填 Assets 的过滤器（见 class-entrava-products-shortcodes.php）。

   刻意不写容器宽度 / 左右 padding —— 短码可能插在主题 container 里，
   也可能插在整宽区块里，横向留白交给调用页面决定。
   ====================================================== */
.entrava-sc{margin:0 0 40px}
.entrava-sc:last-child{margin-bottom:0}

.entrava-sc-head{align-items:baseline;display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;margin:0 0 20px}
.entrava-sc-title{color:var(--theme-black-color,#14100D);font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:0}
.entrava-sc-all{
	align-items:center;color:var(--theme-color,#F26B21);display:inline-flex;
	font-size:13px;font-weight:600;gap:6px;text-decoration:none;white-space:nowrap;
}
.entrava-sc-all:hover{color:var(--theme-hover,#1162e8)}
.entrava-sc-all::after{content:"→";font-size:14px;line-height:1}

/* 「View all」位置：view_all_pos="bottom" / "both" 时卡片网格下方那块
   默认**居中** —— 它独占一行，是区块的出口，居中比右对齐更像「区块级」动作
   （右对齐单独一行会看着像掉队的尾巴）。顶部那条仍在 .entrava-sc-head 里靠右，
   两处互不影响。想改成右对齐：.entrava-sc-foot{justify-content:flex-end} */
.entrava-sc-foot{display:flex;justify-content:center;margin:20px 0 0}

/* 样式：view_all_style="button" → 实心按钮（顶部/底部通用） */
.entrava-sc-all--button{
	background:var(--theme-color,#F26B21);border-radius:999px;
	color:#fff;padding:10px 18px;
	transition:background .2s ease,color .2s ease;
}
.entrava-sc-all--button:hover{background:var(--theme-hover,#1162e8);color:#fff}

/* 列数：覆盖 .entrava-products-grid 的 auto-fill，让短码能精确控制 */
.entrava-sc-grid--cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.entrava-sc-grid--cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.entrava-sc-grid--cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* =========================================================
   布局：layout="feature" —— 形态 M1+（2026-11-01，v1.66）
   左 1fr = 大卡（高度撑满两行），右 2fr = 一个 li 里再包 ul 的 2×2 普通卡。
   基准 = products_list_feature_demo.html 的「形态 M1+」，样式逐条照搬，
   不要凭手感改比例 —— 三条硬规则（v1.64 就是没照这三条才翻车）：

   ① 大卡封面固定 4:3、`flex:0 0 auto`（**不吸高度**）：v1.64 用 `flex:1 1 0`
      让图去追右侧两行撑出来的高度，结果 380×860，方形图 contain 后上下
      各留 240px 空白。
   ② 小卡封面固定 `height:150px`：图变小 → 右侧两行变矮 → 左侧大卡自然
      跟着收短，两边高度接近，不需要谁去拉伸。
   ③ 大卡正文 `flex:1 1 auto` + `justify-content:center`：多出来的高度变成
      上下均分的呼吸位，而不是全堆在按钮下面。

   内容差异（大卡按 show 出含 caps/excerpt、小卡强制精简 image+meta+title
   +specs+cta）由 PHP 的 $side_show 决定，这里只管版式。
   ====================================================== */
.entrava-sc-grid.entrava-sc-feature{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:stretch}
.entrava-sc-feature>.entrava-products-card{min-width:0}

/* ---------- 大卡 ---------- */
.entrava-sc-feature>.entrava-products-card--feature-main{height:100%}
.entrava-sc-feature>.entrava-products-card--feature-main .entrava-products-card-thumb{
	aspect-ratio:4/3;background:#fff;flex:0 0 auto;padding:16px 20px;
}
.entrava-sc-feature>.entrava-products-card--feature-main .entrava-products-card-body{
	flex:1 1 auto;justify-content:center;padding:18px 22px 22px;
}
.entrava-sc-feature>.entrava-products-card--feature-main .entrava-products-card-capacity{font-size:12.5px;margin-bottom:6px}
.entrava-sc-feature>.entrava-products-card--feature-main .entrava-products-card-title{font-size:20px;font-weight:600;line-height:1.34}
.entrava-sc-feature>.entrava-products-card--feature-main .entrava-products-card-specs{
	display:grid;gap:14px 20px;grid-template-columns:1fr 1fr;margin-top:16px;padding-top:14px;
}
.entrava-sc-feature>.entrava-products-card--feature-main .entrava-products-card-spec{
	color:var(--eaf-ink,#1a1d21);font-size:13.5px;font-weight:600;
}
/* 大卡的规格标签变成「小标题在上、值在下」（demo 的读法：标签是字段名，不是前缀） */
.entrava-sc-feature>.entrava-products-card--feature-main .entrava-products-card-spec-l{
	color:#9aa1ab;display:block;font-size:10.5px;letter-spacing:.05em;margin:0 0 2px;text-transform:uppercase;
}
.entrava-sc-feature>.entrava-products-card--feature-main .entrava-products-card-spec-l::after{content:""}
.entrava-sc-feature>.entrava-products-card--feature-main .entrava-products-card-cta{
	align-self:flex-start;background:var(--theme-color,#F26B21);border-color:var(--theme-color,#F26B21);
	color:#fff;font-size:13px;margin-top:16px;padding:11px 16px;
}
/* 大卡摘要：最多 3 行，超出省略 —— 文案长短不一时不撑破版式（要摘要就把 excerpt 写进 show） */
.entrava-sc-feature>.entrava-products-card--feature-main .entrava-products-card-excerpt{
	color:#6b7280;display:-webkit-box;font-size:13.5px;line-height:1.68;margin:10px 0 0;
	-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
/* 摘要由模板输出**纯文本**（v1.68 起不再用 the_excerpt() 的 <p> 包裹），
   line-clamp 直接作用在这层 div 上即可；若将来改回 the_excerpt()，记得补
   `.…-excerpt p{display:inline;margin:0}`，否则块级子元素会让截断失效。 */

/* ---------- 右侧父容器：li 只是壳，内层 ul 才是 2×2 ---------- */
.entrava-sc-feature-side{background:transparent;border:0;display:block;margin:0;min-width:0;padding:0}
.entrava-sc-feature-side>ul{
	display:grid;gap:24px;grid-auto-rows:1fr;grid-template-columns:repeat(2,minmax(0,1fr));
	height:100%;list-style:none;margin:0;padding:0;
}
.entrava-sc-feature-side .entrava-products-card{height:100%}

/* 小卡封面：固定高度、contain 居中 —— 两行都不会把左侧大卡撑长 */
.entrava-sc-feature-side .entrava-products-card-thumb{aspect-ratio:auto;background:#FCFCFD;height:150px;padding:10px 16px}
.entrava-sc-feature-side .entrava-products-card-thumb img{height:100%;object-fit:contain}
.entrava-sc-feature-side .entrava-products-card-body{padding:13px 15px 16px}
/* 标题最多 2 行，保证每张卡高度可预测，不会 3 行把按钮挤爆 */
.entrava-sc-feature-side .entrava-products-card-title{
	display:-webkit-box;font-size:14.5px;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
/* specs 给「规格 ⇄ 按钮」留最小呼吸位；cta `margin-top:auto` 让按钮贴底、两张卡按钮对齐 */
.entrava-sc-feature-side .entrava-products-card-specs{gap:1px 14px;margin:9px 0 14px;padding-top:8px}
.entrava-sc-feature-side .entrava-products-card-cta{font-size:12px;margin-top:auto;padding:8px 12px}

/* 移动端：大卡一律回到纵向单列，此时不需要 strench 拉齐 */
@media(max-width:980px){
	.entrava-sc-grid.entrava-sc-feature{grid-template-columns:minmax(0,1fr)}
	.entrava-sc-feature>.entrava-products-card--feature-main{height:auto}
	.entrava-sc-feature>.entrava-products-card--feature-main .entrava-products-card-body{padding:16px 18px 20px}
	.entrava-sc-feature-side>ul{height:auto}
}
@media(max-width:520px){
	.entrava-sc-feature-side>ul{grid-template-columns:minmax(0,1fr)}
}

/* 卡片 CTA：只有短码传 cta="details" 时才输出（归档页卡片不变，整卡已是链接） */
.entrava-products-card-cta{
	align-items:center;align-self:flex-start;
	border:1px solid var(--theme-line-color,hsla(217,20%,90%,1));
	border-radius:8px;color:var(--theme-black-color,#14100D);
	display:inline-flex;font-size:12.5px;font-weight:600;gap:6px;line-height:1;
	/* margin-top:auto → 按钮贴卡片底部：同一行卡片等高时按钮自动齐平（2026-11-01，v1.69）。
	   契约在 .entrava-products-card-specs 的下外距（14px），所以没有余量时也不会贴死。 */
	margin-top:auto;padding:9px 14px;text-decoration:none;
	transition:background .2s ease,border-color .2s ease,color .2s ease;
}
/* `margin-top:auto` 在「没有多余空间」的卡上等于 0（一行里最高的那张），
   所以给「带按钮的卡」的规格块补 14px 下外距垫住；
   用 :has() 精确圈定，**归档页卡片没有按钮 → 不受影响**（不靠改基础外距，
   否则归档 9 张卡会统一变高 14px）。老浏览器忽略本规则时只剩「最高那张贴一点」，可接受。 */
.entrava-products-card-body:has(>.entrava-products-card-cta)>.entrava-products-card-specs{margin-bottom:14px}
/* 兜底：万一某款没有规格块（auto 在无余量时等于 0），至少保住 14px 间距 */
.entrava-products-card-caps + .entrava-products-card-cta,
.entrava-products-card-excerpt + .entrava-products-card-cta{margin-top:14px}
.entrava-products-card-cta::after{content:"→";font-size:13px}
.entrava-products-card-cta:hover{background:var(--theme-color,#F26B21);border-color:var(--theme-color,#F26B21);color:#fff}

/* 分类导航（默认 5 个门类；不输出数量，见 Shortcodes::render_categories） */
.entrava-sc-cat-list{
	display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
	list-style:none;margin:0;padding:0;
}
.entrava-sc-cat{margin:0}
.entrava-sc-cat-link{
	align-items:flex-start;background:#fff;
	border:1px solid var(--theme-line-color,hsla(217,20%,90%,1));
	border-radius:var(--theme-border-radius-l,8px);
	display:flex;flex-direction:column;gap:6px;height:100%;justify-content:center;
	min-height:96px;padding:18px 20px;text-decoration:none;
	transition:border-color .2s ease,box-shadow .25s ease,transform .25s ease;
}
.entrava-sc-cat-link:hover{border-color:var(--theme-color,#F26B21);box-shadow:0 6px 20px rgba(0,0,0,.06);transform:translateY(-2px)}
.entrava-sc-cat-name{color:var(--theme-black-color,#14100D);font-size:15.5px;font-weight:600;line-height:1.35}
.entrava-sc-cat-desc{color:var(--theme-gray-color,#8a8f98);font-size:12px;line-height:1.6}

@media(max-width:991px){
	.entrava-sc-grid--cols-3,.entrava-sc-grid--cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
	.entrava-sc-title{font-size:21px}
}
@media(max-width:680px){
	.entrava-sc-grid--cols-2,.entrava-sc-grid--cols-3,.entrava-sc-grid--cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
	.entrava-sc-cat-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
	.entrava-sc-cat-link{min-height:84px;padding:14px}
	.entrava-sc-title{font-size:19px}
}
@media(max-width:480px){
	.entrava-sc-grid--cols-2,.entrava-sc-grid--cols-3,.entrava-sc-grid--cols-4{grid-template-columns:minmax(0,1fr)}
}