.elementor .controller-products-card{/*
【Controller 产品列表页 · Loop 商品卡片完整 CSS】
更新日期：2026-09-29

用途：控制 LED Controller Product Card 单张循环商品卡片的图片、型号、标题、
    Input Voltage / Output Voltage / Output Signal / Applications 参数区、
    分隔线、等高布局和详情入口。
    不控制列表列数、商品查询、Taxonomy Filter、搜索框或分页。

WordPress 后台入口：
Templates → Theme Builder → Loop Item → LED Controller Product Card → Edit

Elementor Navigator 完整元素路径：
LED Controller Product Card
└─ Product Card（最外层容器）

准确粘贴位置：
Product Card → Style → Classes → 选中命名 Class「controller-products-card」
→ Custom CSS → CSS code

操作方式：
1. 必须选中命名 Class「controller-products-card」，不能选紫色 local / element.style。
2. 全选并删除该 Class 内的旧 CSS。
3. 复制本文件全文，完整替换；不要添加  标签，不要拆到子元素。
4. 点击 Update。

前台验收页面：
Pages → LED Controller Products → View
页面地址：/led-controller-products/

验收重点：
- 每行卡片等高，商品名称完整显示。
- 参数区显示 INPUT VOLTAGE、OUTPUT VOLTAGE、OUTPUT SIGNAL、APPLICATIONS 四项。
- 参数区使用自然高度，不再由空字段制造 175px / 76px 大块空白。
- Product Family 保留显示 Controller Series；字段内容由 Elementor 动态绑定提供。

本地维护文件：
C:\Users\Bylen\Documents\ChatGPT\LED 官网项目\modules\Controller\03-产品列表页\controller-products-loop-card.css
*/
/* 可读性更新：按用户要求放大辅助文字，保留原字体体系与卡片等高布局。 */
/* ==================================================
 产品 Finder 通用模板 · 商品循环卡片（当前为 LED Controller 实例）
 粘贴位置：卡片模板 Product Card → Style → Custom CSS。
 适用 Atomic Flexbox：沿用首屏已验证的 & 作用域写法。
 每次更新整体替换本文件内容，不叠加旧版。
 只负责单张卡片；列表列数由 Catalog Section 控制。
 本版移除编辑器禁止的 hover / focus 伪状态；保留浏览器默认焦点提示。
 字体须由站点加载；字段值由商品动态标签提供。
 等高配合：Catalog 网格拉伸循环项，本卡片撑满循环项。
 不固定总高度、不截断商品名称；同一行以最高卡片为准。
 ================================================== */

/* 01. 卡片：直角白底；悬停边线需另在编辑器对应状态中配置 */
& {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
width: 100% !important;
min-width: 0 !important;
flex: 1 1 auto !important;
align-self: stretch !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid transparent;
border-radius: 0;
background: #fff;
color: #101820;
font-family: "Inter", Arial, sans-serif;
transition: border-color .18s;
}
& * { box-sizing: border-box; }


/* 清理模板小工具默认间距，仅影响本卡片 */
& .elementor-widget,
& .elementor-widget-container {
min-width: 0;
margin: 0;
padding: 0;
}
& p { margin: 0; }

/* 02. 图片区：沿用设计稿 1.8:1 比例 */
& .controller-products-card-media {
position: relative;
display: block !important;
flex: 0 0 auto !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
aspect-ratio: 1.8;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
background: #f8fafb;
}
& .controller-products-card-image {
display: block;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover;
object-position: center;
}
& .controller-products-card-image .elementor-widget-container,
& .controller-products-card-image a,
& .controller-products-card-image picture {
display: block;
width: 100%;
height: 100%;
}
& .controller-products-card-image img {
display: block;
width: 100% !important;
max-width: 100%;
height: 100% !important;
object-fit: cover;
object-position: center;
}

/* 图片角落提示：暂保持隐藏；悬停显示需另配置状态规则，不在此写伪状态 */
& .controller-products-card-image-action {
position: absolute !important;
right: 16px;
bottom: 15px;
z-index: 1;
width: auto !important;
margin: 0 !important;
pointer-events: none;
opacity: 0;
transition: opacity .18s;
}
& .controller-products-card-image-action,
& .controller-products-card-image-action p {
color: #fff !important;
font-family: "IBM Plex Mono", Consolas, monospace !important;
font-size: 12px !important;
line-height: 1.5 !important;
}


/* 03. 卡片正文 */
& .controller-products-card-body {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
flex: 1 1 auto !important;
gap: 0 !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 20px 18px !important;
}

/* 04. 型号与展示系列 */
& .controller-products-card-meta {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
gap: 16px !important;
flex: 0 0 auto !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 0 12px !important;
padding: 0 !important;
}
& .controller-products-card-model,
& .controller-products-card-family {
width: auto !important;
min-width: 0;
margin: 0 !important;
overflow-wrap: anywhere;
}
& .controller-products-card-model,
& .controller-products-card-model p,
& .controller-products-card-family,
& .controller-products-card-family p {
font-family: "IBM Plex Mono", Consolas, monospace !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
}
& .controller-products-card-model,
& .controller-products-card-model p { color: #087dff !important; }
& .controller-products-card-family,
& .controller-products-card-family p {
color: #637580 !important;
text-transform: uppercase;
}

/* 05. 商品名称：动态绑定后显示，不在 CSS 里生成占位商品 */
& .controller-products-card-title {
width: 100% !important;
flex: 0 0 auto !important;
min-height: 2.6em;
margin: 0 0 18px !important;
}
& .controller-products-card-title,
& .controller-products-card-title .elementor-heading-title {
color: #101820 !important;
font-family: "Manrope", Arial, sans-serif !important;
font-size: 18px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
letter-spacing: -.03em !important;
text-transform: none !important;
}
& .controller-products-card-title .elementor-heading-title { margin: 0; }

/* 06. 四项参数：两列两行，自然高度。
 顶部 auto 外边距吸收短标题卡片的剩余空间，
 让同排卡片的参数与底部链接对齐；长标题仍完整显示。 */
& .controller-products-card-specs {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: auto auto !important;
gap: 8px !important;
flex: 0 0 auto !important;
width: 100% !important;
min-height: 0 !important;
margin: auto 0 0 !important;
padding: 15px 0 0 !important;
border-top: 1px solid #d9e1e7;
}
& .controller-products-spec-voltage,
& .controller-products-spec-power,
& .controller-products-spec-dimming,
& .controller-products-spec-ip {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
width: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
& .controller-products-spec-value,
& .controller-products-spec-label {
width: 100% !important;
margin: 0 !important;
}
& .controller-products-spec-value {
min-height: 0 !important;
}
& .controller-products-spec-value,
& .controller-products-spec-value p {
color: #101820 !important;
font-family: "IBM Plex Mono", Consolas, monospace !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.6 !important;
}
& .controller-products-spec-label {
margin-top: 5px !important;
}
& .controller-products-spec-label,
& .controller-products-spec-label p {
color: #76858f !important;
font-family: "IBM Plex Mono", Consolas, monospace !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.6 !important;
}

/* 07. 底部详情链接：兼容原生新版 Button 与旧版 Button 小工具 */
& .controller-products-card-footer {
display: flex !important;
flex-direction: row !important;
justify-content: flex-start !important;
align-items: center !important;
gap: 12px !important;
flex: 0 0 auto !important;
width: 100% !important;
min-height: 0 !important;
margin: 23px 0 0 !important;
padding: 0 !important;
}
& .controller-products-card-link {
width: auto !important;
margin: 0 !important;
}
& a.controller-products-card-link,
& button.controller-products-card-link,
& .controller-products-card-link a,
& .controller-products-card-link button {
display: inline-flex;
align-items: center;
margin: 0 !important;
padding: 0 0 7px !important;
border: 0 !important;
border-bottom: 1px solid #00a9e8 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #101820 !important;
font-family: "Inter", Arial, sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.5 !important;
letter-spacing: .03em !important;
text-decoration: none !important;
}



/* 08. 手机：沿用设计稿正文边距与自然标题高度 */
@media (max-width: 700px) {
& .controller-products-card-body { padding: 22px !important; }
& .controller-products-card-title { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
&,
& .controller-products-card-image-action { transition: none; }
}\n}