/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}
ul,ol {list-style: none;}
a {text-decoration: none;color: inherit;}
img {max-width: 100%;display: block;object-fit: cover;}
button,input,textarea {border: none;cursor: pointer;font-size: 14px;outline: none;}
body {color: #333;background: #fff;line-height: 1.6;}

/* 顶部导航栏 */
.top-bar {
    background: #000;color: #fff;padding: 8px 5%;
    display: flex;justify-content: space-between;align-items: center;
    font-size: 14px;
}
.top-contact {display: flex;gap: 20px;align-items: center;}
.top-search {display: flex;gap: 0;}
.top-search input {
    background: #222;color: #fff;padding: 6px 12px;width: 220px;
}
.top-search button {background: #222;color: #fff;padding: 6px 10px;}

/* 主导航 */
.main-nav {
    padding: 15px 5%;display: flex;justify-content: space-between;align-items: center;
    border-bottom: 1px solid #eee;position: sticky;top:0;background:#fff;z-index:99;
}
.nav-links {display: flex;gap: 35px;font-weight: 500;text-transform: uppercase;}
.nav-icons {display: flex;gap: 22px;font-size: 18px;align-items: center;}
.icon-badge {position: relative;cursor: pointer;}
.icon-badge span {
    position: absolute;top: -8px;right: -8px;background: #f00;color:#fff;
    border-radius: 50%;width:16px;height:16px;font-size:10px;
    display:flex;align-items:center;justify-content:center;
}

/* Banner轮播 */
.banner-wrap {position: relative;height: 70vh;overflow: hidden;}
.banner-item {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:0.6s;}
.banner-item.active {opacity:1;}
.banner-item img {width:100%;height:100%;object-fit:cover;}
.banner-content {
    position:absolute;top:50%;left:10%;transform:translateY(-50%);
    color:#fff;
}
.banner-content h2 {font-size: 64px;line-height:1.2;margin-bottom:20px;text-transform: uppercase;}
.btn-white {
    background:#fff;color:#000;padding:12px 32px;font-weight:600;
    transition:0.3s;display:inline-block;text-transform: uppercase;
}
.btn-white:hover {background:#000;color:#fff;}
.banner-arrow {
    position:absolute;top:50%;transform:translateY(-50%);
    width:40px;height:40px;border-radius:50%;background:rgba(0,0,0,0.4);
    color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;
    cursor: pointer;
}
.arrow-left {left:3%;}
.arrow-right {right:3%;}

/* 通用区块标题 */
.section-title {text-align:center;margin:60px 0 40px;}
.section-title p {color:#999;font-size:16px;letter-spacing:1px;}
.section-title h3 {font-size:32px;text-transform:uppercase;position:relative;display:inline-block;}
.section-title h3::before,.section-title h3::after {
    content:"";width:60px;height:1px;background:#000;position:absolute;top:50%;
}
.section-title h3::before {left:-70px;}
.section-title h3::after {right:-70px;}

/* 商品网格 */
.product-grid {
    padding:0 5%;display:grid;grid-template-columns: repeat(4,1fr);gap:30px;margin-bottom:60px;
}
.product-card {position:relative;transition:0.3s;border:1px solid #eee;background:#fff;}
.product-img {height:300px;overflow:hidden;}
.product-img img {transition:0.4s;width:100%;height:100%;}
.product-card:hover .product-img img {transform:scale(1.08);}
.product-action {
    position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:8px;
}
.action-btn {
    width:34px;height:34px;background:#fff;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:16px;
    box-shadow:0 2px 8px #0001;cursor:pointer;transition:0.3s;
}
.action-btn:hover {background:#000;color:#fff;}
.product-info {padding:15px;text-align:center;}
.product-name {font-size:15px;margin-bottom:8px;color:#222;min-height:42px;}
.product-price {color:#f00;font-weight:600;font-size:17px;}
.btn-cart {
    width:100%;padding:10px;background:#000;color:#fff;margin-top:12px;
    opacity:0;transition:0.3s;text-transform: uppercase;
}
.product-card:hover .btn-cart {opacity:1;}

/* 商品列表页3列网格 */
.list-product-grid {grid-template-columns: repeat(3,1fr);}

/* 分页样式 */
.pagination {display:flex;justify-content:center;gap:10px;margin:60px 0;}
.page-item {
    width:40px;height:40px;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:0.3s;
}
.page-item.active {background:#000;color:#fff;border-color:#000;}
.page-item:hover:not(.active) {border-color:#000;}

/* ========== 修复后的商品详情页核心样式 ========== */
.detail-wrap {
    /* 关键修复：固定最大宽度、居中、上下外边距隔离footer */
    max-width: 1400px;
    margin: 60px auto;
    padding: 0 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    /* 禁止内容溢出挤压页面 */
    overflow: visible;
}
.detail-img {
    width: 100%;
    height: 500px;
    background: #f7f7f7;
}
.detail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.detail-info {
    display: flex;
    flex-direction: column;
}
.detail-title {font-size:32px;margin-bottom:15px;}
.detail-price {font-size:24px;color:#f00;margin-bottom:20px;font-weight:bold;}
.spec-title {font-weight:600;margin:12px 0 8px;}
.spec-list {display:flex;gap:10px;margin-bottom:25px;flex-wrap:wrap;}
.spec-item {
    padding:8px 16px;border:1px solid #ddd;cursor:pointer;min-width:50px;text-align:center;
}
.spec-item.active {background:#000;color:#fff;border-color:#000;}
.detail-btns {display:flex;gap:15px;margin-top:30px;margin-bottom:40px;}
.btn-addcart {
    flex:1;padding:14px;background:#000;color:#fff;font-weight:600;text-transform: uppercase;
}
.btn-wish {padding:14px 24px;border:1px solid #000;background:#fff;text-transform: uppercase;}

/* 服务区块 */
.service-wrap {
    padding:60px 5%;display:grid;grid-template-columns: repeat(3,1fr);gap:40px;
    text-align:center;border-top:1px solid #eee;border-bottom:1px solid #eee;margin:60px 0;
}
.service-item i {font-size:36px;margin-bottom:16px;}
.service-item h4 {margin-bottom:8px;font-size:18px;}
.service-item p {color:#666;font-size:14px;}

/* 侧边弹窗通用 */
.drawer-mask {
    position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);
    z-index:998;display:none;
}
.drawer {
    position:fixed;top:0;right:-420px;width:420px;height:100%;background:#fff;
    z-index:999;transition:right 0.4s;overflow-y:auto;
}
.drawer.open {right:0;}
.drawer-header {
    padding:20px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;
    align-items:center;font-size:18px;font-weight:600;text-transform: uppercase;
}
.drawer-close {font-size:24px;cursor:pointer;}
.drawer-body {padding:20px;}
.cart-item {display:flex;gap:15px;padding:15px 0;border-bottom:1px solid #eee;}
.cart-item-img {width:80px;height:80px;background:#f7f7f7;}
.cart-item-info h5 {margin-bottom:6px;}
.cart-item-price {color:#f00;font-weight:bold;}
.cart-del {color:#999;margin-top:8px;cursor:pointer;font-size:13px;}
.drawer-footer {padding:20px;border-top:1px solid #eee;}
.cart-total {display:flex;justify-content:space-between;font-size:18px;margin-bottom:20px;font-weight:bold;}
.btn-checkout {width:100%;padding:14px;background:#000;color:#fff;font-weight:600;text-transform: uppercase;}

/* 内页容器（about/contact/政策页面） */
.page-container {padding:60px 5%;max-width:1200px;margin:0 auto;}
.page-title {font-size:36px;margin-bottom:40px;text-align:center;text-transform:uppercase;}
.page-text {line-height:1.9;color:#444;font-size:16px;margin-bottom:20px;}
.contact-form {margin-top:40px;display:flex;flex-direction:column;gap:18px;}
.contact-form input,.contact-form textarea {
    padding:14px;border:1px solid #ddd;font-size:15px;
}
.contact-form button {
    width:160px;padding:14px;background:#000;color:#fff;font-weight:600;text-transform: uppercase;
}

/* ========== 修复页脚：独立分段，不会被上方内容挤压 ========== */
footer {
    background:#000;color:#fff;padding:60px 5% 30px;
    /* 强制页脚独占一行，不和上方详情图片粘连 */
    margin-top: 80px;
    clear: both;
    width: 100%;
}
.newsletter {text-align:center;margin-bottom:50px;}
.newsletter h4 {font-size:22px;margin-bottom:10px;text-transform: uppercase;}
.newsletter p {color:#aaa;margin-bottom:20px;}
.news-form {display:flex;justify-content:center;gap:0;max-width:520px;margin:0 auto;}
.news-form input {
    flex:1;padding:14px;background:#222;color:#fff;
}
.news-form button {padding:14px 30px;background:#fff;color:#000;font-weight:600;text-transform: uppercase;}
.footer-content {display:grid;grid-template-columns: 1.2fr 1fr 1fr;gap:40px;margin-bottom:50px;}
.footer-col h5 {font-size:18px;margin-bottom:22px;text-transform:uppercase;}
.footer-col p {color:#aaa;margin-bottom:10px;font-size:14px;line-height:1.8;}
.footer-links li {margin-bottom:12px;color:#aaa;}
.footer-links a:hover {color:#fff;}
.footer-bottom {
    border-top:1px solid #222;padding-top:30px;display:flex;justify-content:space-between;
    align-items:center;color:#aaa;font-size:14px;
}
.payment-img {display:flex;gap:10px;}
.payment-img img {height:26px;}

/* 响应式适配 */
@media(max-width:1024px){
    .product-grid {grid-template-columns: repeat(3,1fr);}
    .list-product-grid {grid-template-columns: repeat(2,1fr);}
    .detail-wrap {grid-template-columns:1fr;gap:30px;}
    .footer-content {grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
    .product-grid {grid-template-columns: repeat(2,1fr);}
    .footer-content {grid-template-columns:1fr;gap:30px;}
    .service-wrap {grid-template-columns:1fr;}
    .nav-links {display:none;}
    .detail-img {height:380px;}
}
@media(max-width:480px){
    .product-grid {grid-template-columns:1fr;}
    .drawer {width:100%;}
    .banner-content h2 {font-size:36px;}
    .detail-wrap {margin:30px auto;}
    .footer-bottom {flex-direction:column;gap:15px;text-align:center;}
}
/* 遮罩层默认隐藏 */
.drawer-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 998;
    display: none; /* 默认隐藏 */
}
/* 侧边抽屉容器，默认右移出屏幕 */
.drawer {
    position: fixed;
    top: 0;
    right: -400px; /* 完全隐藏在右侧外面 */
    width: 380px;
    height: 100%;
    background: #fff;
    z-index: 999;
    transition: right 0.3s ease;
}
/* 激活类：点击后添加，弹窗滑出 */
.drawer.active {
    right: 0;
}
/* 遮罩激活后显示 */
.drawer-mask.active {
    display: block;
}
/* 关闭按钮基础样式 */
.drawer-close {
    cursor: pointer;
}
.drawer-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 998;
    display: none;
}
.drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    height: 100%;
    background: #fff;
    z-index: 999;
    transition: right 0.3s ease;
}
.drawer-mask.active {
    display: block;
}
.drawer.active {
    right: 0;
}
.drawer-close {
    cursor: pointer;
    font-size: 24px;
}