/* 全局重置 + 移动端自适应 */
*{margin:0;padding:0;box-sizing:border-box;font-family:Microsoft YaHei, sans-serif;}
a{text-decoration:none;color:#333;}
ul,li{list-style:none;}
img{max-width:100%;display:block;}
input,textarea,button{outline:none;font-size:14px;}

/* 头部导航 */
header{background:#192a56;color:#fff;padding:16px 5%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.nav a{color:#fff;margin:0 10px;display:inline-block;padding:4px 0;}
.nav a:hover{border-bottom:2px solid #fff;}

/* 横幅轮播 */
.banner{height:320px;background:#273c75;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 20px;}
.banner h1{font-size:36px;margin-bottom:10px;}
.banner p{font-size:18px;opacity:0.9;}

/* 容器通用宽度 */
.container{width:1200px;margin:40px auto;padding:0 20px;max-width:100%;}
.title{text-align:center;font-size:26px;margin-bottom:35px;color:#222;position:relative;}
.title::after{content:"";width:80px;height:3px;background:#192a56;position:absolute;left:50%;transform:translateX(-50%);bottom:-10px;}

/* 产品卡片布局 */
.pro-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.pro-card{border:1px solid #eee;padding:14px;transition:0.3s;}
.pro-card:hover{box-shadow:0 3px 12px #eee;transform:translateY(-3px);}
.pro-card img{width:100%;height:190px;object-fit:cover;margin-bottom:12px;}
.pro-card h4{font-size:16px;margin-bottom:8px;color:#222;}
.price{color:#e53935;font-weight:bold;font-size:17px;margin:6px 0;}
.btn{display:inline-block;padding:9px 18px;background:#192a56;color:#fff;margin-top:8px;border-radius:2px;}
.btn:hover{background:#142048;}

/* 分类筛选栏 */
.cate-box{margin-bottom:30px;padding:16px;border:1px solid #eee;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.cate-box a{padding:6px 14px;border:1px solid #ddd;border-radius:2px;}
.cate-box a.active{background:#192a56;color:#fff;border-color:#192a56;}

/* 详情页布局 */
.detail-box{display:flex;gap:40px;margin:40px 0;flex-wrap:wrap;}
.detail-left{width:48%;min-width:300px;}
.detail-right{width:48%;min-width:300px;}
form input,form textarea{width:100%;margin:9px 0;padding:11px;border:1px solid #ddd;border-radius:2px;}
form button{width:100%;padding:13px;background:#192a56;color:#fff;border:none;font-size:16px;cursor:pointer;}

/* 底部页脚 */
footer{margin-top:80px;background:#222;color:#aaa;text-align:center;padding:35px 20px;line-height:1.8;}

/* ========== 移动端自适应媒体查询 ========== */
@media (max-width:992px){
    .pro-wrap{grid-template-columns:repeat(2,1fr);}
    .detail-left,.detail-right{width:100%;}
    .banner h1{font-size:28px;}
}
@media (max-width:640px){
    .pro-wrap{grid-template-columns:1fr;}
    header{flex-direction:column;text-align:center;}
    .nav{margin-top:8px;}
    .banner{height:240px;}
    .banner h1{font-size:22px;}
    .title{font-size:22px;}
}