@charset "utf-8";
/* ==========================================================================
   产品列表页 product.css
   与首页 home.css、内页 about.css 使用同一套视觉语言：
   14px 圆角卡片、轻边框、hover 上浮、橙色强调、克制的字重层级
   只作用于 .product-main 与 .pl-* 类，不影响其他页面
   ========================================================================== */

/* ==========================================================================
   1. 首屏 banner：与 about.css 的 .ab-hero 完全同尺寸
      高度、标题字号、副标题字号、内边距、断点全部照 about.css 抄，
      改这里之前先看 about.css 的 .ab-hero-media / .ab-h1 / .ab-h1-sub，
      两页必须同步改，否则又会出现「两个页面 banner 不一样高」
      ----------------------------------------------------------
      高度用 min-height 而不是 height：
      每个子栏目的介绍长短不一样，写死 height 会把长文案裁掉，
      用 min-height 保底 + 内容撑高，图片始终 cover 铺满。
   ========================================================================== */
.pl-hero{
  position:relative;overflow:hidden;background:#0d141a;
  display:flex;align-items:flex-end;
  min-height:clamp(300px,34vw,520px);
}
.pl-hero-media{position:absolute;inset:0;z-index:0}
.pl-hero-media img{
  position:absolute;inset:0;display:block;
  width:100% !important;max-width:100%;height:100% !important;
  object-fit:cover;object-position:center;
}
.pl-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,13,18,.94) 0%,rgba(8,13,18,.66) 42%,rgba(8,13,18,.16) 100%);
}
.pl-hero-copy{
  position:relative;z-index:2;width:100%;
  padding-top:clamp(72px,11vw,150px);
  padding-bottom:clamp(26px,3vw,48px);
}
.pl-hero-eye{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:14px;
  color:#fff;font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;line-height:1;
}
.pl-hero-eye::before{content:"";width:26px;height:2px;background:var(--color);flex:none}
.pl-hero-h1{
  margin:0 0 14px;
  font-size:clamp(28px,3.6vw,50px);
  line-height:1.12;letter-spacing:-.02em;font-weight:800;
  color:#fff;text-transform:none;max-width:20em;
}
/* 副标题 = 后台「栏目描述1」，每个子栏目各一句。
   没填时给一句通用兜底，避免 banner 只剩一个标题显得空；
   后台填了就会盖掉这句，不必改代码。 */
.pl-hero-sub{
  margin:0;max-width:44em;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.7;color:rgba(255,255,255,.82);
  text-shadow:0 1px 12px rgba(8,13,18,.45);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.pl-hero-sub:empty::after{
  content:"Engineered around your pallet dimensions, per-level load capacity, and clear height.";
  color:rgba(255,255,255,.72);
}
/* 要点条 = 后台「栏目描述2 / 3」，可留空；空的自动隐藏，两个都空整条消失 */
.pl-hero-facts{
  display:flex;flex-wrap:wrap;gap:8px 26px;
  margin:18px 0 0;padding:0;list-style:none;max-width:60em;
}
.pl-hero-facts li{
  position:relative;padding-left:16px;
  font-size:14px;line-height:1.6;font-weight:500;
  color:rgba(255,255,255,.92);
}
.pl-hero-facts li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:6px;height:6px;border-radius:50%;
  background:var(--color);box-shadow:0 0 0 3px rgba(255,255,255,.08);
}
.pl-hero-facts li:empty{display:none}
.pl-hero-facts:not(:has(li:not(:empty))){display:none}

/* ==========================================================================
   1b. 面包屑条：与 About 页、其他内页同一套
       浅底横条 + 左栏目名 + 右 HOME >> 路径
   ========================================================================== */
.pl-crumb-bar{
  background:#FAFAFA;
  border-top:1px solid #eceef0;
  border-bottom:1px solid #eceef0;
}
.pl-crumb-bar .l-wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:14px;padding-bottom:14px;
}
.pl-crumb-bar .banner-title-h1{
  font-size:20px;font-weight:700;line-height:1.2;
  color:var(--fontcolortitle,#131415);
  text-transform:uppercase;margin:0;
}
.pl-crumb-bar .banner-breadcrumbs{
  font-size:14px;line-height:1.5;color:#6b7178;
}
.pl-crumb-bar .banner-breadcrumbs a{color:inherit;transition:color .2s linear}
.pl-crumb-bar .banner-breadcrumbs a:hover{color:var(--color)}

/* ==========================================================================
   2. 分类介绍（H1 已在首屏，这里只留正文段落）
   ========================================================================== */
.pl-intro{
  margin:0 0 30px;
  max-width:70em;
  font-size:16px;line-height:1.85;
  color:#4a4f55;
}
.pl-intro:empty{display:none}

/* ==========================================================================
   2. 产品网格
   ========================================================================== */
.pro-list.pl-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  margin:0;padding:0;list-style:none;
}
/* 覆盖 list.css 里 .pro-list.list1 li 的 32% 宽度与边框 */
.pro-list.pl-grid > li.pl-card{
  width:auto;margin:0;padding:0;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid #e8eaed;
  border-radius:14px;
  overflow:hidden;
  text-align:left;
  position:relative;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),
             box-shadow .4s cubic-bezier(.22,.61,.36,1),
             border-color .3s ease;
}
.pro-list.pl-grid > li.pl-card:hover{
  transform:translateY(-5px);
  border-color:#dfe3e8;
  box-shadow:0 24px 46px -22px rgba(19,20,21,.42),0 2px 8px rgba(19,20,21,.05);
}
/* 图片区：固定 4:3，避免各产品图高矮不齐把卡片撑得参差 */
.pl-card .pl-media{
  display:block;
  position:relative;
  overflow:hidden;
  aspect-ratio:4 / 3;
  background:#f2f4f6;
}
.pl-card .pl-media img{
  display:block;
  position:static;
  width:100% !important;
  height:100% !important;
  object-fit:cover;
  transform:none;
  transition:transform .75s cubic-bezier(.22,.61,.36,1);
}
.pl-card:hover .pl-media img{transform:scale(1.06)}

.pl-card .pl-body{
  display:flex;flex-direction:column;flex:1;
  padding:20px 22px 22px;
}
.pl-card .pl-name{
  margin:0 0 10px;
  font-size:17px;line-height:1.45;font-weight:700;
  color:var(--fontcolortitle,#131415);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.45em * 2);
}
.pl-card .pl-name a{color:inherit;text-decoration:none;transition:color .25s ease}
.pl-card:hover .pl-name a{color:var(--color)}

/* 卡片描述：列表页最缺的一块，也是 AI 判断产品差异的主要依据 */
.pl-card .pl-desc{
  margin:0 0 18px;
  flex:1;
  font-size:14.5px;line-height:1.75;
  color:#6b7178;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.75em * 3);
}
.pl-card .pl-desc:empty{display:none}

.pl-card .pl-more{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:auto;
  font-size:13.5px;font-weight:700;letter-spacing:.02em;
  color:var(--color);text-decoration:none;
}
.pl-card .pl-more svg{transition:transform .3s ease}
.pl-card:hover .pl-more svg{transform:translateX(4px)}

/* ==========================================================================
   3. 侧边栏：圆角与阴影跟首页卡片对齐
   ========================================================================== */
.product-main .sidebar-item{
  padding:26px;
  margin-bottom:24px;
  border:1px solid #eef0f2;
  border-radius:14px;
  box-shadow:0 18px 40px -26px rgba(19,20,21,.32),0 1px 3px rgba(19,20,21,.04);
}
.product-main .sidebar-item .sidebar-title{font-size:18px}

/* ==========================================================================
   4. 分页
   ========================================================================== */
.product-main .pagination{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:8px;
  margin:36px 0 0;
}
.product-main .pagination .page-item{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 14px;
  border:1px solid #e4e6e9;border-radius:9px;
  background:#fff;color:#5a6068;
  font-size:14px;text-decoration:none;
  transition:all .22s ease;
}
.product-main .pagination .page-item:hover{
  border-color:var(--color);color:var(--color);
}
.product-main .pagination .page-num-current,
.product-main .pagination .page-num-current a{
  background:var(--color);border-color:var(--color);color:#fff;
}

/* ==========================================================================
   5. 响应式
   ========================================================================== */
@media (max-width:1280px){
  .pro-list.pl-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
@media (max-width:1024px){
  .product-main .page-main{padding-left:0}
  .pl-hero-copy{padding-top:clamp(60px,9vw,110px)}
  .pl-hero-h1{max-width:16em}
}
/* 断点与数值照 about.css：≤900 换成 46vw，两页同时变 */
@media (max-width:900px){
  .pl-hero{min-height:clamp(280px,46vw,400px)}
}
@media (max-width:768px){
  .pl-hero-copy{padding-top:clamp(40px,12vw,80px);padding-bottom:26px}
  .pl-hero-eye{margin-bottom:10px}
  .pl-hero-eye::before{width:18px}
  .pl-hero-h1{margin-bottom:10px}
  .pl-hero-sub{-webkit-line-clamp:3}
  /* 手机端要点排成一行可横滑，避免换行把 banner 撑高 */
  .pl-hero-facts{
    flex-wrap:nowrap;overflow-x:auto;gap:16px;margin-top:12px;
    padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .pl-hero-facts::-webkit-scrollbar{display:none}
  .pl-hero-facts li{flex:none;white-space:nowrap;padding-left:14px}
  .pl-hero-facts li::before{width:5px;height:5px}
  /* 小屏隐藏左侧栏目名，只留路径，与其他内页一致 */
  .pl-crumb-bar .banner-title-h1{display:none}
  .pl-crumb-bar .banner-breadcrumbs{font-size:13px}
  .pl-intro{margin-bottom:22px;font-size:15px;line-height:1.8}
  .pro-list.pl-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .pl-card .pl-name{font-size:16px;min-height:0}
  .pl-card .pl-desc{min-height:0}
  .pl-card .pl-body{padding:16px 18px 18px}
  .product-main .pagination{margin-top:26px;gap:6px}
  .product-main .pagination .page-item{min-width:36px;height:36px;padding:0 11px;font-size:13px}
}