/* ============================================================
 * list/index3.css = list/index2.css 全文 + 卡片布局安全网
 * (2026-10-31)
 *
 * 【为什么要有这个文件】
 * 卡片布局被拆在两个文件里：
 *   list/index2.css      -> ul.cl 的 grid 网格（3 列，带 !important）
 *   category/index6.css  -> li 的 width:auto / float:none / .t 白底 /
 *                           .pic 去边框 / h6 排版 / ul::before 抑制
 * 这两组规则对 li 的选择器特异性相同（.rightint-goods-list .prolist ul li），
 * 只靠「文档顺序」决胜 —— 而 index6.css 挂在 <body> 里，
 * 一旦它没加载上，li 就退回模板原版的 width:31.333% + float:left，
 * 在 263px 的 grid 轨道里被压成 82.5px 的窄条（标题底色还变回深蓝 #3c3c4f）。
 *
 * 已线上复现的触发路径：
 *   filter/index8.js 的 applyCatBlock() 删除 <!-- noray-cat:start --> ~
 *   <!-- noray-cat:end --> 之间的 DOM 时，把块内 category/index6.css 的
 *   <link> 一起删了 -> 从「有描述块的页」AJAX 跳到「没有描述块的页」就塌。
 *   （已修：v7 删块时保留 <link>；本文件是第二道保险）
 *
 * 【本文件的作用】
 * 1) 完整保留 index2.css 的全部内容（本文件 = index2.css + 安全网），
 *    因此引用从 index2.css 换成 index3.css 后，文档顺序与视觉完全不变。
 * 2) 把「index6.css 独家提供、且当前线上实际生效」的声明，
 *    用与 index2.css 同等的选择器 + !important 再钉一遍，
 *    让卡片布局不再依赖 index6.css 是否加载成功。
 *
 * 【每一条的取值】都等于当前线上 index2.css 与 index6.css 叠加后的
 * 实际生效值，所以本文件不改变任何现有外观，只是把「万一它没加载上」兜住。
 *
 * 作用域 html.nrl-list 由 list/index2.js 运行时加到 <html>，只影响列表页。
 * 注：/_assets/* 是 immutable 一年缓存，改内容必须换文件名。
 * ============================================================ */

/* 产品列表页 —— dd3 版式（2026-10-29，2026-10-29 修订）
 *
 * 顶部大图 banner 一律不动，与 Application / 产品详情页保持同一套模板原生样式
 * （背景大图 + 左下白色大标题 + 🏠 面包屑，h1 36px / 面包屑 15px，均白色）。
 * 本文件只管三件事：
 *   左栏 By Material 折叠筛选（保留原有 AJAX 行为，只换外观与计数）
 *   右侧 3 列卡片：浅灰正方形图区 + 右上角材质角标 + 白底标题条
 *   左栏标题改成深青细标题
 *
 * 只加 CSS/JS 两个标签，HTML 正文与链接一律不动，回滚即删标签。
 * 所有规则挂在 html.nrl-list 下，只影响注入页。
 */

/* ---------- 1. 顶部大图 banner：保留模板原样，此处不加任何覆盖 ---------- */

/* ---------- 2. 网格：4 列 → 3 列，卡片改成 dd3 形状 ---------- */
html.nrl-list .main-right ul.cl {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  margin: 0 !important;
}
html.nrl-list .main-right ul.cl > li {
  background: #fff;
  border: 1px solid #e3e7ea;
  border-radius: 4px;
  overflow: hidden;
  display: flex; flex-direction: column;
  margin: 0 !important;
  padding: 0 !important;
  transition: border-color .18s, box-shadow .18s;
}
html.nrl-list .main-right ul.cl > li:hover {
  border-color: #1d4b57;
  box-shadow: 0 6px 20px rgba(29, 75, 87, .09);
}

/* 图片区：正方形、浅灰底、等比缩放不裁切 */
html.nrl-list .main-right ul.cl > li > a.pic {
  display: block; position: relative;
  flex: none !important;                 /* 否则会被 li 的 flex 布局压扁，失去正方形 */
  width: 100%; height: 0; padding: 0 0 100%;
  background: #f4f6f7;
  overflow: hidden; box-sizing: border-box;
}
html.nrl-list .main-right ul.cl > li > a.pic img {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 16px; box-sizing: border-box;
  transition: transform .25s;
}
html.nrl-list .main-right ul.cl > li:hover > a.pic img { transform: scale(1.04); }

/* 右上角材质角标 */
html.nrl-list .nrl-pill {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #dfe3e6; border-radius: 3px;
  font-size: 11.5px; line-height: 1; font-weight: 600;
  color: #4a5259; padding: 5px 8px; letter-spacing: .02em;
}

/* 标题条：白底 + 上边框 + 两行截断 */
html.nrl-list .main-right ul.cl > li > .t {
  border-top: 1px solid #edf0f2;
  padding: 13px 14px 15px;
  flex: 1; display: flex; flex-direction: column; justify-content: flex-start;
  text-align: left;
}
html.nrl-list .main-right ul.cl > li > .t h6 {
  margin: 0; font-size: 14.5px; line-height: 1.45; font-weight: 600;
  color: #2f353b;
}
html.nrl-list .main-right ul.cl > li > .t h6 a {
  color: #2f353b; text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
html.nrl-list .main-right ul.cl > li:hover > .t h6 a { color: #1d4b57; }
/* 卡片里可能有的次要文字（价格/型号）压小 */
html.nrl-list .main-right ul.cl > li > .t p,
html.nrl-list .main-right ul.cl > li > .t span {
  font-size: 12.5px; color: #8b929a; margin: 6px 0 0;
}

/* ---------- 3. 左栏：标题改成 dd3 的样式（橙色块 → 深青细标题） ---------- */
html.nrl-list .main-left h2 {
  background: none !important;
  color: #1d4b57 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 0 0 10px !important;
  margin: 18px 0 0 !important;
  border-bottom: 2px solid #1d4b57 !important;
}
html.nrl-list .main-left .nf-counter {
  float: right; font-weight: 600; color: #9aa3ab; font-size: 12px;
}

/* ---------- 4. 分页 ---------- */
html.nrl-list .main-right .pagination,
html.nrl-list .main-right .pages {
  margin-top: 26px;
}

/* ---------- 5. 手机端 ---------- */
@media (max-width: 900px) {
  html.nrl-list .main-right ul.cl {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html.nrl-list .main-right ul.cl > li > .t { padding: 10px 11px 12px; }
  html.nrl-list .main-right ul.cl > li > .t h6 { font-size: 13px; }
}

/* ============================================================
 * 安全网 —— 以下声明在当前线上均由 category/index6.css 独家提供，
 * 一旦那张表缺失，卡片就会塌成窄条。这里用与 index2.css 相同的选择器
 * 加上 !important 重新钉死，取值 = 当前实际生效值（零视觉变化）。
 * ============================================================ */

/* ---------- 1. 卡片本体：宽度 / 浮动 / 对齐 ----------
 * 模板原版是 width:31.333% + float:left + text-align:center，
 * 网格里 31.333% 会算成 82.5px 的窄条，float 还会让它脱离网格流。 */
html.nrl-list .main-right ul.cl > li {
  width: auto !important;
  float: none !important;
  text-align: left !important;
}

/* ---------- 2. 标题条：白底（模板原版是深蓝 #3c3c4f） ---------- */
html.nrl-list .main-right ul.cl > li > .t {
  background: #fff !important;
}

/* ---------- 3. 图片区：去掉模板的 1px #c9c9c9 边框与圆角 ---------- */
html.nrl-list .main-right ul.cl > li > a.pic {
  border: 0 !important;
  border-radius: 0 !important;
}

/* ---------- 4. 标题排版：与线上现状一致 ---------- */
html.nrl-list .main-right ul.cl > li > .t h6 {
  height: auto !important;
  min-height: 63px;
  display: -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left !important;
  align-items: initial !important;
  justify-content: initial !important;
}

html.nrl-list .main-right ul.cl > li > .t h6 a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 5. clearfix 伪元素不得占用 grid 单元格 ----------
 * 旧站 .cl 是 clearfix：.cl:before / .cl:after { display:table; content:" " }
 * 是**内联在每个 HTML 页里**的全局样式（935 页都有），所以永远存在。
 * 在 grid 布局下，这两个伪元素会各自占掉一个单元格 —— 必须显式干掉，
 * 否则商品会从第 2 格开始排、最后两格空着。 */
html.nrl-list .main-right ul.cl::before,
html.nrl-list .main-right ul.cl::after,
html.nrl-list .main-right ul.cl > li::before,
html.nrl-list .main-right ul.cl > li::after {
  content: none !important;
  display: none !important;
}

/* ---------- 6. 悬停：上浮 2px（index2.css 只给了边框与阴影） ---------- */
html.nrl-list .main-right ul.cl > li:hover {
  transform: translateY(-2px);
}

/* ---------- 7. 小屏：标题最小高度 57px（与 index6.css 移动端一致） ---------- */
@media (max-width: 767px) {
  html.nrl-list .main-right ul.cl > li > .t h6 {
    min-height: 57px;
  }
}