/* ===== 产品列表页（/products/）卡片改版 =====
----------------------------------------------------------------------------
目标（用户要求）：
1. 卡片改成**白色卡片**外观，与首页 Featured Products 完全统一
（白底 / 圆角 / 1px 边框 / 轻阴影 / hover 上浮）
2. 每张卡加 "View products →" 链接
3. **PC 端「标题 + View products →」横排**（同一行，标题左、链接右）
手机端仍为竖排
4. PC 保持 4 列
★★ 为什么必须用 !important + [data-visual-id]（与首页同一个坑，别删）
本页列表是一个可视化编辑器生成的模块：
...
它自己带了一串 static/css/*.css（f97a84a7...css / 580e9162...css 等），
这些 排在 productlist-inline.css **之后**。
模块 CSS 里对 .themes_prod 的布局声明与本文件**特异性打平**时，
后加载的模块 CSS 会赢 —— 于是 display:grid / flex 全部失效。
所以这里统一：
· 选择器加 [data-visual-id="54914"] 提升一层特异性
· 布局关键属性（display / width / float / grid-template-columns /
margin / padding-top）加 !important
双保险，模块 CSS 重新生成多少次都不受影响。
★ 页面 DOM 结构（实测，供维护参考）：
.ly_product_list_2[data-visual-id="54914"]
└ .wide > .section > .prdocuts_wrapper （flex：左栏 + 右栏）
├ .products_category_wrapper （左栏：CATEGORIES + HOT SALE）
│ ├ .products_category_box > .category_box > .one_item > .one_title > a.cate_item
│ └ .relate_box > .pro_list > .related_item
└ .list_wrapper （右栏：主列表）
├ .top_title > h1 （Products 标题）
├ .list_box （★ 主卡片栅格）
│ └ .themes_prod （★ 单张卡片）
│ ├ .pic_box.hover_scale_img
│ │ └ .compute_item_img
│ │ └ .compute_process_img[style="padding-top:100.00%"]
│ │ └ a > img
│ └ .name.themes_products_title
│ └ a.themes_products_title > h2
└ #turn_page （分页）
---------------------------------------------------------------------------- */
/* ============================================================
一、主卡片栅格：PC 4 列（与现状一致）
============================================================ */
.ly_product_list_2[data-visual-id="54914"] .list_box {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px !important;
align-items: stretch;
margin-top: 30px;
overflow: visible !important;
}
/* ============================================================
二、单张卡片：白底 / 圆角 / 边框 / 阴影
============================================================ */
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod {
display: flex !important; /* 压过模块 CSS 的 display:block / inline-block */
width: auto !important;
float: none !important;
margin: 0 !important; /* 清掉模块 CSS 的 margin-right:5px 之类 */
padding: 0;
box-sizing: border-box;
flex-direction: column;
background: #fff;
border: 1px solid #e8eae9;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
text-align: left !important; /* 模块 CSS 是 text-align:center */
transition: box-shadow .25s ease, transform .25s ease;
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod:hover {
box-shadow: 0 10px 26px rgba(0, 0, 0, .10);
transform: translateY(-2px);
}
/* ============================================================
三、图片区：保持正方形（模板内联 padding-top:100.00%）
—— 产品图都是圆形盘子，正方形最贴合，故不改比例，只做裁切与放大
============================================================ */
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .pic_box {
width: 100% !important;
margin: 0 !important; /* 模块 CSS 是 margin:0 0 15px */
padding: 0;
overflow: hidden;
background: #f6f8f7;
text-align: left !important;
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .compute_item_img,
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .compute_process_img {
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: left !important;
}
/* 图片是「绝对定位贴满四角 + margin:auto」的写法（配合 padding-top:100% 撑正方形），
所以 object-fit 能正常生效；这里只保证四边归零，不改定位方式。 */
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .pic_box a,
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .pic_box img {
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
margin: auto !important;
width: 100% !important;
height: 100% !important;
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .pic_box img {
object-fit: contain !important; /* ★ 产品图是圆形盘子，用 contain 完整显示不裁切
（原图自带正方形画布 + 浅蓝底，contain 与画布等宽，
视觉上无留白；用 cover 会把盘子上下切掉） */
transition: transform .5s ease;
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod:hover .pic_box img {
transform: scale(1.05);
}
/* ============================================================
四、标题区
============================================================ */
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .name {
display: flex !important;
flex-direction: column;
gap: 6px;
flex: 1 1 auto;
min-width: 0 !important; /* ★ 允许在 flex 容器里被压缩 */
margin: 0 !important; /* 模块 CSS 是 margin:0 0 10px */
padding: 14px 18px 16px !important; /* 模块 CSS 是 padding:0 30px；右留 18px 防链接贴边 */
text-align: left !important;
box-sizing: border-box;
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .name .themes_products_title {
display: block;
min-width: 0;
text-align: left !important;
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .name h2 {
margin: 0;
font-size: 16px;
font-weight: 700;
line-height: 1.35;
color: #14532d; /* 与首页一致的深绿 */
text-align: left !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ============================================================
五、"View products →" 链接
============================================================ */
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .prod_view_more {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #2f6b4f;
text-decoration: none;
white-space: nowrap;
position: relative;
align-self: flex-start;
transition: color .2s ease, gap .2s ease;
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .prod_view_more .prod_view_arrow {
display: inline-block;
transition: transform .2s ease;
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod:hover .prod_view_more {
color: #14532d;
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod:hover .prod_view_more .prod_view_arrow {
transform: translateX(3px);
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .prod_view_more::after {
content: "";
position: absolute;
left: 0; right: auto; bottom: -2px;
width: 0; height: 1px;
background: currentColor;
transition: width .25s ease;
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod:hover .prod_view_more::after {
width: 100%;
}
/* ============================================================
六、★ PC 端：标题与 View products 横排
（同一行，标题靠左 / 链接靠右；手机端不套用，保持竖排）
============================================================ */
@media (min-width: 769px) {
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .name {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: nowrap; /* ★ 不换行：确保标题与链接永远同一行 */
}
/* ★ 关键：标题链必须能被压缩。
只给外层 a 写 min-width:0 不够 —— a 是 flex 项，
但它内部的 h2 仍是块级、宽度由内容（-webkit-line-clamp 的两行文本）撑开，
会把 a 的实际占位撑满整行，于是链接被挤到第二行。
做法：a 上 overflow:hidden 建立新的格式化上下文，
再把 a / h2 一起 min-width:0 + width:100%，标题才会在超长时省略。 */
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .name .themes_products_title {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .name .themes_products_title h2,
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .name .themes_products_title h1,
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .name .themes_products_title h3 {
min-width: 0;
width: 100%;
}
/* 链接绝不被压缩、绝不被裁切 */
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .prod_view_more {
flex: 0 0 auto;
align-self: auto;
min-width: max-content;
}
}
/* ============================================================
七、列数自适应（平板降 3 列、手机 2 列）
============================================================ */
@media (max-width: 1100px) {
.ly_product_list_2[data-visual-id="54914"] .list_box {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 20px !important;
}
}
@media (max-width: 768px) {
.ly_product_list_2[data-visual-id="54914"] .list_box {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .name {
padding: 10px 12px 12px !important;
gap: 4px;
}
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .name h2 { font-size: 14px; }
.ly_product_list_2[data-visual-id="54914"] .list_box .themes_prod .prod_view_more { font-size: 12px; }
}
/* ============================================================
八、分页区（#turn_page）：去掉下划线、做小圆角方块，当前页高亮
============================================================ */
.ly_product_list_2[data-visual-id="54914"] #turn_page,
.ly_product_list_2[data-visual-id="54914"] .list_wrapper #turn_page {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
margin: 34px 0 6px;
font-size: 13px;
color: #666;
}
.ly_product_list_2[data-visual-id="54914"] #turn_page .page-status {
display: block;
width: 100%;
text-align: center;
margin-bottom: 8px;
color: #888;
font-size: 12px;
}
.ly_product_list_2[data-visual-id="54914"] #turn_page > span {
display: inline-flex;
align-items: center;
}
.ly_product_list_2[data-visual-id="54914"] #turn_page a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 10px;
border: 1px solid #e0e4e2;
border-radius: 6px;
background: #fff;
color: #444;
text-decoration: none;
line-height: 1;
transition: all .2s ease;
}
.ly_product_list_2[data-visual-id="54914"] #turn_page a:hover {
border-color: #2f6b4f;
color: #14532d;
box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.ly_product_list_2[data-visual-id="54914"] #turn_page a.page-num-current,
.ly_product_list_2[data-visual-id="54914"] #turn_page .page-num-current {
background: #14532d;
border-color: #14532d;
color: #fff;
font-weight: 700;
}
.ly_product_list_2[data-visual-id="54914"] #turn_page span.page-num:not(.page-num-current) {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 6px;
color: #888;
}