/* ===== LMELL 产品中心页版式（2026-10-17）｜沿用首页已上线的 D-橙金设计语言 =====
   作用域 .pr；不依赖 homepage 的 lmell_home.css，也不修改任何主题主文件。        */
.pr{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;color:#1B2733;background:#F5F7FA;line-height:1.65;-webkit-font-smoothing:antialiased}
.pr *{box-sizing:border-box}
.pr img{display:block;max-width:100%}
.pr a{color:inherit;text-decoration:none}
.pr .wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* 面包屑 */
.pr .crumb{max-width:1200px;margin:0 auto;padding:14px 24px 0;font-size:13px;color:#5B6B7C}
.pr .crumb a{color:#5B6B7C}
.pr .crumb a:hover{color:#8F5C15}

/* 页头标题 */
.pr .pg-head{max-width:1200px;margin:0 auto;padding:20px 24px 24px}
.pr .pg-head h1{font-size:30px;font-weight:600;color:#0A2540;margin:0 0 10px;letter-spacing:.3px;line-height:1.35}
.pr .pg-head .intro{color:#5B6B7C;font-size:14.5px;max-width:780px;margin:0;line-height:1.75}

/* 分类导航（原 260px 竖向 navbar 改横向标签） */
.pr .chips{max-width:1200px;margin:0 auto 28px;padding:0 24px 24px;display:flex;gap:10px;flex-wrap:wrap;border-bottom:1px solid #E3E8EF}
.pr .chip{display:inline-block;background:#fff;border:1px solid #E3E8EF;border-radius:22px;padding:8px 18px;font-size:14px;color:#1B2733;transition:.2s}
.pr .chip:hover{border-color:#E9A23B;color:#0A2540}
.pr .chip.active{background:#0A2540;border-color:#0A2540;color:#fff}

/* 产品栅格 */
.pr .pgrid{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;gap:22px}
.pr .pgrid.cols3{grid-template-columns:repeat(3,1fr)}
.pr .pcard{background:#fff;border:1px solid #E3E8EF;border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(10,37,64,.05),0 3px 8px rgba(10,37,64,.045);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
@media (hover:hover){ .pr .pcard:hover{border-color:#E9A23B;box-shadow:0 2px 4px rgba(10,37,64,.05),0 12px 28px rgba(10,37,64,.13);transform:translateY(-4px)} .pr .pcard:hover .ph{box-shadow:inset 0 1px 2px rgba(233,162,59,.20)} .pr .pcard:hover .ph img{filter:drop-shadow(0 2px 3px rgba(10,37,64,.10))} }
.pr .ph{position:relative;aspect-ratio:4/3;background:linear-gradient(180deg,#F9FBFD 0%,#F2F5FA 100%);box-shadow:inset 0 1px 2px rgba(10,37,64,.05);display:flex;align-items:center;justify-content:center;padding:16px;border-bottom:1px solid #E9EDF3;overflow:hidden;transition:box-shadow .22s ease}
.pr .ph img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .3s ease,filter .22s ease}
@media (hover:hover){ .pr .pcard:hover .ph img{transform:scale(1.03)} }
.pr .pb{padding:15px 17px 17px;flex:1;display:flex;flex-direction:column}
.pr .pcard h3{font-size:15px;font-weight:600;color:#0A2540;margin:0 0 8px;line-height:1.45}
.pr .pcard p{font-size:13px;color:#5B6B7C;line-height:1.7;margin:0 0 14px;flex:1;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pr .pcard .more{font-size:13px;color:#8F5C15;font-weight:600}
.pr .pcard .more i{font-style:normal;display:inline-block;margin-left:5px;transition:transform .2s ease}
.pr .pcard .more i:before{content:"\2192"}
@media (hover:hover){ .pr .pcard:hover .more i{transform:translateX(4px)} }
.pr .pg-empty{max-width:1200px;margin:0 auto;padding:60px 24px;text-align:center;color:#5B6B7C;background:#fff;border:1px dashed #E3E8EF;border-radius:10px}
.pr .pg-foot{padding:34px 0 0}

@media(max-width:1000px){
  .pr .pgrid{grid-template-columns:repeat(2,1fr)}
  .pr .pg-head h1{font-size:26px}
}
@media(max-width:640px){
  .pr .pgrid{grid-template-columns:1fr}
  .pr .crumb,.pr .pg-head,.pr .chips,.pr .pgrid{padding-left:16px;padding-right:16px}
  .pr .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pr .chip{flex:0 0 auto}
}