/* ==========================================================================
   FUNION LiteTrade · 产品列表页样式（v1.0.19 · M1-04 改版）
   --------------------------------------------------------------------------
   按 product-ui-demo/2-hybrid-longpage.html「列表页」重做：
   Hero(kicker/大标题/count 徽标/sub) + 横向分类 pills + 产品卡网格。
   v1.0.17 的左侧竖排分类树样式（pl-sidebar/pl-tree/pl-item…）已全部移除。
   所有规则以 .flt-product-list 为作用域，不与首页产品区/详情推荐区冲突。
   ========================================================================== */

/* 列表页整体留白
   v1.0.24：overflow-x:clip 兜底——任何子元素意外超宽时直接裁切，
   不给 body 撑出横向滚动条的机会（页面横移比贴边损失更伤体验）。
   clip 不生成滚动容器，不影响 pills 自己的 overflow-x 滑动。 */
body.post-type-archive-flt_product .flt-product-list,
body.tax-flt_product_cat .flt-product-list{
	padding:64px 0 96px;
	overflow-x:clip
}

/* ---------- Hero ---------- */
.flt-product-list .pl-hero{
	padding:64px 0 20px
}
.flt-product-list .pl-hero .wrap{
	display:flex;
	flex-direction:column;
	align-items:flex-start
}

.flt-product-list .kicker{
	display:inline-flex;
	align-items:center;
	gap:9px;
	font-family:var(--mono);
	font-size:10.5px;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--text-2)
}
.flt-product-list .kicker::before{
	content:"";
	width:7px;
	height:7px;
	border-radius:2px;
	background:var(--primary)
}

.flt-product-list .lead{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:16px 32px;
	flex-wrap:wrap;
	margin-top:14px;
	width:100%
}
.flt-product-list .lead h1{
	font-size:clamp(28px,3.6vw,48px);
	font-weight:700;
	letter-spacing:-.02em;
	line-height:1.18;
	margin:0
}
/* v1.0.21：双行标题第二行主色高亮（对齐博客归档/demo 列表屏） */
.flt-product-list .lead h1 .accent{
	color:var(--primary)
}
.flt-product-list .count{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	gap:7px;
	font-family:var(--mono);
	font-size:12.5px;
	color:var(--text-3);
	border:1px solid var(--border);
	border-radius:999px;
	padding:6px 13px;
	margin-bottom:4px;
	white-space:nowrap
}
.flt-product-list .count b{
	font-family:var(--mono);
	font-size:16px;
	font-weight:700;
	color:var(--primary);
	line-height:1
}

.flt-product-list .sub{
	max-width:780px;
	font-size:14.5px;
	line-height:1.85;
	color:var(--text-2);
	margin:14px 0 0
}

/* ---------- 横向分类 pills（demo filters） ---------- */
/* v1.0.24：pills 全端统一「单行 + 横向滑动」，直接写进基础规则。
   原先 nowrap 依赖媒体查询覆盖 wrap，特异性/断点一有出入就退回跨行
   （Boss 真机复现）。桌面 pills 少不会溢出，行为一致；溢出才出滚动。 */
.flt-product-list .filters{
	display:flex;
	align-items:center;
	flex-wrap:nowrap;
	overflow-x:auto;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
	gap:9px;
	margin-top:30px;
	padding-top:22px;
	padding-bottom:4px;
	border-top:1px solid var(--border);
	width:100%
}
.flt-product-list .filters::-webkit-scrollbar{display:none}
/* v1.0.27：min-width:0 + max-width:100% —— flex 子项默认 min-width:auto 会被
   内容（5 个 pill ≈ 611px）撑开，导致滚动容器自身超宽溢出视口，又被外层
   overflow-x:clip 裁掉：既滚不了也看不到（Boss 390px 真机复现，容器 611）。
   显式收缩后溢出回到容器内部，overflow-x:auto 才有滚动空间。 */
.flt-product-list .filters{
	min-width:0;
	max-width:100%
}
.flt-product-list .filter{flex:0 0 auto}
.flt-product-list .filter{
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:8px 15px;
	border:1px solid var(--border);
	border-radius:999px;
	font-family:var(--font);
	font-size:13.5px;
	font-weight:500;
	color:var(--text-2);
	background:var(--bg);
	cursor:pointer;
	/* v1.0.133：恢复原始过渡（Boss 指定）—— 详见 pills.css 同名注释：
	   v1.0.132 已定位真因（JS 点击瞬间加类触发重绘 + 紧接导航），
	   过渡本身无问题，因此恢复原值 ✓ */
	transition:all .15s;
	text-decoration:none;
	white-space:nowrap
}
.flt-product-list .filter:hover{
	border-color:var(--primary);
	color:var(--primary)
}
/* v1.0.132【兜底】把 `.active` 与 `.on` 视作同一个"选中态"。
   来历：main.js 有一段遗留代码会给归档页 pill 加 `.active`（那是**首页产品区**的旧约定），
   而本文件只给 `.on` 定义了选中态样式 ⇒ 一旦有 `.active` 混进来，元素会掉回
   main.css 的通用 `.filter`（圆角 5px）+ 主色底，长得"四不像"（Boss 见过方块状蓝块）。
   现在两套类名视觉完全一致；即便将来再有脚本/子主题加 `.active` 也不会出怪样子 ✓ */
.flt-product-list .filter.active,
.flt-product-list .filter.active:hover{
	background:var(--primary);
	color:#fff;
	border-color:var(--primary)
}
.flt-product-list .filter.on,
.flt-product-list .filter.on:hover{
	background:var(--primary);
	color:#fff;
	border-color:var(--primary)
}
.flt-product-list .filter .n{
	font-family:var(--mono);
	font-size:11px;
	line-height:1;
	padding:2px 7px;
	border-radius:999px;
	background:rgba(0,0,0,.07);
	color:inherit
}
.flt-product-list .filter.on .n{
	background:rgba(255,255,255,.18)
}

/* ---------- 工具行：分类 pills + 产品搜索框（v1.0.22 · M1-07） ----------
   pills 原本自带上边框与间距，包进 .pl-tools 后由容器统一承担分隔线，
   .filters 自身的内边距与边框在此重置，避免出现第二条横线。 */
.flt-product-list .pl-tools{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	margin-top:30px;
	padding-top:22px;
	border-top:1px solid var(--border);
	width:100%
}
.flt-product-list .pl-tools .filters{
	margin-top:0;
	padding-top:0;
	border-top:0;
	width:auto;
	max-width:100%;
	min-width:0;
	flex:1 1 auto
}
.flt-product-list .pl-search{
	display:flex;
	align-items:center;
	border:1px solid var(--border);
	border-radius:999px;
	background:var(--bg);
	overflow:hidden;
	flex:0 0 auto
}
.flt-product-list .ps-input{
	border:0;
	background:transparent;
	font-family:var(--font);
	font-size:13.5px;
	color:var(--text);
	padding:9px 14px;
	width:230px;
	min-height:38px;
	outline:none
}
.flt-product-list .ps-input::placeholder{color:var(--text-2)}
.flt-product-list .ps-btn{
	border:0;
	background:transparent;
	color:var(--text-2);
	display:grid;
	place-items:center;
	width:40px;
	min-height:38px;
	cursor:pointer;
	padding:0
}
.flt-product-list .ps-btn svg{width:17px;height:17px}
.flt-product-list .ps-btn:hover{color:var(--primary)}
.flt-product-list .pl-tools .pl-search:focus-within{border-color:var(--primary)}
/* 搜索结果页「你可能在找」推荐位标题 */
.flt-product-list .pl-rec-title{margin:44px 0 18px;font-size:20px}

/* ---------- 产品卡网格（demo pgrid） ---------- */
.flt-product-list .pl-body{
	padding-top:30px
}
.flt-product-list .prod-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:20px
}
/* 卡片本体对齐 demo：型号主色、标题与信息行字号微调。
   其余间距/悬停/hover 缩放沿用 main.css .prod-card 基础规则。
   v1.0.83：主图不再单设 4/3 —— 改由全局统一封面比例（main.css --cover-ratio: 16/9）提供，
   保证产品 / 案例 / 博客三类列表卡封面高度完全一致。 */
.flt-product-list .prod-card .body{padding:15px 16px 16px}
.flt-product-list .prod-card .model{font-size:10.5px;letter-spacing:.08em}
.flt-product-list .prod-card h3{font-size:15.5px;margin:6px 0 3px}
.flt-product-list .prod-card .tl{
	font-size:12px;
	line-height:1.6;
	color:var(--text-2);
	margin:8px 0 11px;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden
}
.flt-product-list .prod-card .kv{font-size:10.5px;padding-top:9px;margin-bottom:10px}
.flt-product-list .prod-card .kv i{font-size:10.5px}
.flt-product-list .prod-card .price{font-size:15.5px}

/* ---------- 分页 ---------- */
.flt-product-list .pagination{
	margin:46px 0 0;
	display:flex;
	justify-content:center
}
.flt-product-list .pagination .nav-links{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:7px
}
.flt-product-list .page-numbers{
	display:inline-grid;
	place-items:center;
	min-width:38px;
	height:38px;
	padding:0 10px;
	border:1px solid var(--border);
	border-radius:8px;
	font-family:var(--mono);
	font-size:13px;
	color:var(--text-2);
	background:var(--bg);
	text-decoration:none;
	transition:all .15s
}
.flt-product-list .page-numbers:hover{
	border-color:var(--primary);
	color:var(--primary)
}
.flt-product-list .page-numbers.current,
.flt-product-list .page-numbers.current:hover{
	background:var(--primary);
	color:#fff;
	border-color:var(--primary)
}
.flt-product-list .pagination .dots{
	border:0;
	background:transparent
}

/* ---------- 空态 ---------- */
.flt-product-list .pl-empty{
	text-align:center;
	padding:76px 0 30px
}
.flt-product-list .pl-empty h2{
	font-size:20px;
	font-weight:600;
	margin:0 0 12px
}
.flt-product-list .pl-empty p{
	color:var(--text-2);
	font-size:14.5px;
	line-height:1.8;
	margin:0 auto 26px;
	max-width:520px
}

/* ==========================================================================
   断点
   ========================================================================== */

/* 1280 以下宽桌面：4 列单卡偏窄，降 2 列（延续 v1.0.17 的取舍） */
@media(min-width:1024px) and (max-width:1279px){
	.flt-product-list .prod-grid{grid-template-columns:repeat(2,1fr);gap:20px}
}

/* ≤1023：降 2 列 */
@media(max-width:1023px){
	.flt-product-list .prod-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}

/* ≤1023：平板与手机「工具行纵向堆叠 + 搜索框全宽」（v1.0.23 引入，v1.0.24 简化）
   pills 的单行滑动已上移到基础规则全端生效，本断点不再管滚动。 */
@media(max-width:1023px){
	.flt-product-list .pl-tools{flex-direction:column;align-items:stretch;gap:14px}
	/* v1.0.24：撤掉负 margin 贴边写法——真机上它把 body 撑出横向滚动，
	   滑 pills 时整页跟着横移（Boss 截图复现：标题/搜索框/卡片整体左偏）。
	   nowrap 与滑动已由基础规则全端承担，这里只保留工具行堆叠与搜索框全宽。 */
	.flt-product-list .pl-search{width:100%}
	.flt-product-list .ps-input{flex:1;width:auto}
}

/* ≤767：Hero 纵向堆叠（v1.0.83：主图比例不再单设 1:1，统一沿用全局 --cover-ratio） */
@media(max-width:767px){
    .flt-product-list .pl-hero{padding:20px 0 20px}
	.flt-product-list{padding:44px 0 70px}
	.flt-product-list .lead{margin-top:12px}
	.flt-product-list .count{margin-bottom:0}
	.flt-product-list .prod-card h3{font-size:14.5px}
	.flt-product-list .prod-card .tl{font-size:11.5px;-webkit-line-clamp:2}
	.flt-product-list .prod-card .kv{font-size:10px}
	.flt-product-list .prod-card .price{font-size:14.5px}
	.flt-product-list .filter{min-height:32px}
	/* pills 单行横向滑动 / 工具行纵向堆叠：已由上方 ≤1023 断点统一承担 */
}

/* ≤479：单列卡片 */
@media(max-width:479px){
	.flt-product-list .prod-grid{grid-template-columns:1fr;gap:16px}
	.flt-product-list .count{white-space:normal}
}