.product-item{display:block;background:#fff;border:1px solid var(--color-line);border-radius:var(--radius);overflow:hidden;transition:border-color .3s,box-shadow .3s,transform .3s}
.product-item:hover{border-color:var(--color-main);box-shadow:0 12px 30px rgba(26,112,218,.12);transform:translateY(-4px)}
.product-item__pic{position:relative;aspect-ratio:1;background:#f7f9fc;overflow:hidden}
.product-item__pic img{width:100%;height:100%;object-fit:contain;padding:18px;transition:transform .4s}
.product-item:hover .product-item__pic img{transform:scale(1.06)}
.product-item__title{padding:14px 12px 16px;text-align:center;font-size:15px;font-weight:600;line-height:1.4;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.product-wrap{padding:56px 0 72px;background:#f7f9fc}
.product{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}
.product__side{position:sticky;top:calc(var(--header-height) + 24px);display:grid;gap:20px}
.product-cate,.product-hot{background:#fff;border:1px solid var(--color-line);border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(13,27,46,.04)}
.product-cate h2,.product-hot h2{padding:16px 20px;background:var(--color-dark);color:#fff;font-size:16px;font-weight:700;position:relative}
.product-cate h2:before,.product-hot h2:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--color-main)}
.product-cate li{border-bottom:1px solid var(--color-line)}
.product-cate li:last-child{border-bottom:0}
.product-cate a{display:flex;align-items:center;padding:14px 20px 14px 24px;color:#444;font-size:15px;transition:color .25s,background .25s,padding-left .25s}
.product-cate a:before{content:'';width:6px;height:6px;margin-right:12px;border-radius:50%;background:#c5d0de;flex:none;transition:background .25s}
.product-cate a:hover{color:var(--color-main);background:#f3f7fd;padding-left:28px}
.product-cate a:hover:before,.product-cate .is-active a:before{background:var(--color-main)}
.product-cate .is-active a{color:var(--color-main);background:#f3f7fd;font-weight:600}
.product-hot{padding:0 20px 24px}
.product-hot h2{margin:0 -20px 18px}
.product-hot p{color:var(--color-muted);font-size:14px;line-height:1.8;margin-bottom:16px}
.product-hot__tel{display:flex;align-items:center;margin-bottom:16px;color:var(--color-main);font-size:20px;font-weight:700}
.product-hot__tel:before{content:'';width:18px;height:18px;margin-right:8px;background:var(--color-main);mask:var(--svg-phone) center/contain no-repeat;-webkit-mask:var(--svg-phone) center/contain no-repeat}
.product-hot .btn{width:100%}
.product__head .mod-title{text-align:left;margin-bottom:16px}
.product__head .mod-title h2:after{margin-left:0}
.product__intro{margin-bottom:28px;color:var(--color-muted);font-size:15px;line-height:1.85}
.product__list{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1440px){
.product{grid-template-columns:232px minmax(0,1fr);gap:24px}
.product__list{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1280px){
.product{grid-template-columns:210px minmax(0,1fr)}
.product__list{gap:16px}
}
@media (max-width:1024px){
.product{grid-template-columns:1fr;gap:24px}
.product__side{position:static;grid-template-columns:1.1fr .9fr;align-items:stretch}
.product-cate a:hover{padding-left:24px}
.product__list{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
.product-wrap{padding:40px 0 56px}
.product__side{grid-template-columns:1fr}
.product__list{grid-template-columns:repeat(2,1fr);gap:12px}
.product-item__pic img{padding:12px}
.product-item__title{padding:12px 8px 14px;font-size:14px}
.product__intro{font-size:14px;margin-bottom:20px}
}
@media (max-width:360px){
.product__list{gap:8px}
.product-cate a{padding:12px 16px}
}