.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:28px}
.product-cate{background:#fff;border:1px solid #dfe5ec;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgba(13,27,46,.04)}
.product-cate h2{display:flex;align-items:center;height:52px;padding:0 20px;background:#f3f5f8;color:var(--color-dark);font-size:17px;font-weight:700;position:relative}
.product-cate h2:before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--color-main)}
.product-cate li{border-bottom:1px solid #e9eef4}
.product-cate li:last-child{border-bottom:0}
.product-cate a{display:flex;align-items:center;height:52px;padding:0 12px;color:#596575;font-size:15px;transition:color .25s,background .25s,padding-left .25s}
.product-cate a:before{content:'';width:5px;height:5px;margin-right:12px;border-radius:50%;background:#b8c5d4;flex:none;transition:background .25s,transform .25s}
.product-cate a:after{content:'';width:14px;height:14px;margin-left:auto;background:currentColor;opacity:0;mask:var(--svg-right) center/contain no-repeat;-webkit-mask:var(--svg-right) center/contain no-repeat;transition:opacity .25s,transform .25s}
.product-cate a:hover{color:var(--color-main);background:#f4f8fd;padding-left:16px}
.product-cate a:hover:before,.product-cate .is-active a:before{background:var(--color-main);transform:scale(1.35)}
.product-cate a:hover:after{opacity:.7;transform:translateX(2px)}
.product-cate .is-active a{color:var(--color-main);font-weight:600}
.product-hot{padding:22px 20px 24px;background:#eef5fc;border:1px solid #dbe8f5;border-radius:8px;box-shadow:none}
.product-hot h2{display:flex;align-items:center;height:32px;padding:0 0 12px;color:var(--color-dark);font-size:17px;font-weight:700;position:relative}
.product-hot h2:after{content:'';position:absolute;left:0;bottom:-1px;width:34px;height:3px;border-radius:2px;background:var(--color-main)}
.product-hot p{color:#647386;font-size:14px;line-height:1.85;margin:18px 0 16px}
.product-hot__tel{display:flex;align-items:center;margin-bottom:18px;color:var(--color-main);font-size:20px;font-weight:700;letter-spacing:.02em}
.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-hot{display:none}
.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}
}