/* =====================
   全局基础
===================== */


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    background:#faf8f3;

    color:#302820;

    font-family:

    "Microsoft YaHei",
    Arial,
    sans-serif;

}



a{

    text-decoration:none;

    color:inherit;

}



img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}



/* =====================
   全局颜色
===================== */


:root{


    --gold:#b47a35;

    --brown:#30251c;

    --white:#fff;

    --gray:#777;

    --line:#eee4d5;

    --shadow:
    0 15px 40px rgba(0,0,0,.08);


}



/* =====================
   顶部优惠栏
===================== */


.topbar{


    height:42px;

    background:#30251c;

    color:#fff;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:14px;


}



.topbar span{


    color:#ffd98b;

    margin-left:10px;


}




/* =====================
   Header导航
===================== */


.header{


    height:76px;


    background:#fff;


    display:flex;


    align-items:center;


    justify-content:space-between;


    padding:0 6%;


    border-bottom:1px solid var(--line);


    position:sticky;


    top:0;


    z-index:1000;


}




/* Logo */


.logo{


    display:flex;


    align-items:center;


    gap:10px;


    font-size:26px;


    font-weight:bold;


    color:#8c5b25;


}




.logo-box{


    width:42px;


    height:42px;


    background:var(--gold);


    color:#fff;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:10px;


}



/* 导航 */


.nav{


    display:flex;


    gap:35px;


}



.nav a{


    color:#555;


    transition:.3s;


}



.nav a:hover{


    color:var(--gold);


}




/* Header按钮 */

.header-btn{


    background:var(--gold);


    color:#fff;


    padding:12px 28px;


    border-radius:30px;


}






/* =====================
   悬浮购物车
===================== */



.float-cart{


    position:fixed;


    right:30px;


    bottom:40px;


    width:65px;


    height:65px;


    background:#9b5b32;


    color:#fff;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:32px;


    text-decoration:none;


    z-index:999999;


    box-shadow:
    0 8px 20px rgba(0,0,0,.25);


    transition:.3s;


}




.float-cart:hover{


    transform:scale(1.1);


}




/* 购物车数量 */


.float-cart span{


    position:absolute;


    top:-5px;


    right:-5px;


    width:25px;


    height:25px;


    background:#e53935;


    color:#fff;


    border-radius:50%;


    font-size:13px;


    font-weight:bold;


    display:flex;


    align-items:center;


    justify-content:center;


}






/* =====================
   电脑端购物车保证显示
===================== */


@media(min-width:769px){


.float-cart{


    display:flex;


}


}




/* =====================
   手机购物车
===================== */


@media(max-width:600px){



.float-cart{


    right:15px;


    bottom:25px;


    width:55px;


    height:55px;


    font-size:26px;


}



}

/* =====================
   Banner 首页
===================== */


.hero{


    width:100%;

    overflow:hidden;

    background:#fff;


}



.hero-img{


    width:100%;


    height:520px;


}



.hero-img img{


    width:100%;


    height:100%;


    object-fit:cover;


    object-position:center;


}




/* 大屏 */


@media(min-width:1400px){


.hero-img{


    height:600px;


}


}




/* 普通电脑 */


@media(min-width:769px) and (max-width:1399px){


.hero-img{


    height:520px;


}


}






/* =====================
   公共区域
===================== */


.section{


    width:88%;


    max-width:1200px;


    margin:90px auto;


}




.title{


    text-align:center;


    margin-bottom:45px;


}




.title h2{


    font-size:42px;


    font-weight:bold;


}



.title p{


    color:#777;


    margin-top:10px;


}






/* =====================
   家具分类
===================== */



.category{


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:25px;


}




.category-item{


    background:#fff;


    padding:35px 15px;


    text-align:center;


    border-radius:18px;


    transition:.3s;


}



.category-item:hover{


    transform:translateY(-8px);


    box-shadow:var(--shadow);


}



.category-icon{


    font-size:45px;


    margin-bottom:15px;


}







/* =====================
   商品列表
===================== */



.products{


    display:grid;


    grid-template-columns:repeat(4,1fr);


    gap:25px;


}






.product{


    background:#fff;


    border-radius:18px;


    overflow:hidden;


    transition:.3s;


}





.product:hover{


    transform:translateY(-8px);


    box-shadow:var(--shadow);


}






.product-img{


    height:260px;


}




.product-img img{


    width:100%;


    height:100%;


    object-fit:cover;


}






.product-info{


    padding:20px;


}




.product-info h3{


    font-size:18px;


    margin-bottom:10px;


}





.product-info p{


    color:#777;


    font-size:14px;


    line-height:1.6;


}






/* =====================
   商品价格
===================== */



.price{


    margin:15px 0;


    color:#c46d28;


    font-size:18px;


    font-weight:bold;


}





.discount-price{


    font-size:24px;


    color:#c46d28;


}




.price del{


    color:#999;


    font-size:10px;


    margin-left:10px;


}





.discount-tag{


    background:#fff1e8;


    color:#d4380d;


    font-size:13px;


    padding:4px 8px;


    border-radius:15px;


    margin-left:8px;


}





.old-price{


    color:#999;


    font-size:14px;


    text-decoration:none;


    margin-top:10px;


}





.discount{


    display:inline-block;


    background:#fff1e8;


    color:#d4380d;


    padding:3px 8px;


    border-radius:15px;


    font-size:13px;


    margin-left:8px;


}






/* =====================
   加入购物车按钮
===================== */



.buy-btn{


    display:inline-block;


    background:#30251c;


    color:#fff;


    padding:10px 25px;


    border-radius:30px;


    cursor:pointer;


    transition:.3s;


}




.buy-btn:hover{


    background:#b47a35;


}






/* =====================
   套餐展示
===================== */



.category-item .price{


    margin-top:15px;


}



.category-item .old-price{


    text-decoration:line-through;


}





/* =====================
   活动区域
===================== */



.sale-box{


    background:

    linear-gradient(
    135deg,
    #30251c,
    #8b6338
    );


    color:#fff;


    padding:70px 20px;


    border-radius:25px;


    text-align:center;


}




.sale-box h2{


    font-size:42px;


    margin-bottom:20px;


}




.sale-box p{


    font-size:20px;


    margin-bottom:30px;


}

/* =====================
   底部 Footer
===================== */


.footer{


    background:#24201c;


    color:#bbb;


    padding:50px 8% 25px;


}




.footer-content{


    max-width:1200px;


    margin:auto;


    display:grid;


    grid-template-columns:repeat(3,1fr);


    gap:40px;


}




.footer h3,
.footer h4{


    color:#fff;


    margin-bottom:15px;


}





.footer p{


    line-height:2;


    font-size:14px;


}




.footer a{


    color:#aaa;


}





.footer a:hover{


    color:#fff;


}







/* =====================
   版权
===================== */


.copyright{


    margin-top:40px;


    padding-top:20px;


    border-top:

    1px solid rgba(255,255,255,.15);


    text-align:center;


}








/* =====================
   平板
===================== */



@media(max-width:1024px){



.products{


    grid-template-columns:repeat(3,1fr);


}



.category{


    grid-template-columns:repeat(2,1fr);


}



.hero-img{


    height:420px;


}



}









/* =====================
   手机端
===================== */


@media(max-width:768px){



.header{


    height:65px;


    padding:0 20px;


}



.logo{


    font-size:20px;


}




.logo-box{


    width:36px;


    height:36px;


}





.nav{


    display:none;


}



.header-btn{


    padding:8px 15px;


    font-size:14px;


}





.hero-img{


    height:300px;


}



.hero-img img{


    object-position:center;


}





.section{


    width:92%;


    margin:50px auto;


}





.title{


    margin-bottom:25px;


}



.title h2{


    font-size:28px;


}




.title p{


    font-size:14px;


}







/* 分类手机两列 */


.category{


    grid-template-columns:repeat(2,1fr);


    gap:12px;


}



.category-item{


    padding:25px 10px;


    border-radius:12px;


}



.category-icon{


    font-size:35px;


}








/* 商品手机两列 */


.products{


    grid-template-columns:repeat(2,1fr);


    gap:12px;


}




.product{


    border-radius:12px;


}





.product-img{


    height:150px;


}





.product-info{


    padding:12px;


}





.product-info h3{


    font-size:15px;


}




.product-info p{


    font-size:12px;


}





.discount-price{


    font-size:18px;


}





.price{


    margin:10px 0;


}




.buy-btn{


    width:100%;


    text-align:center;


    padding:9px 5px;


    font-size:14px;


}







.footer{


    padding:40px 20px 20px;


}





.footer-content{


    grid-template-columns:1fr;


    text-align:center;


}





}








/* =====================
   小屏手机
===================== */


@media(max-width:400px){



.products{


    gap:8px;


}




.product-img{


    height:130px;


}




.product-info{


    padding:10px;


}



.buy-btn{


    font-size:13px;


}



}






/* =====================
   悬浮购物车最终保险
===================== */


.float-cart{


    display:flex !important;


    visibility:visible !important;


    opacity:1 !important;


}






@media(max-width:600px){


.float-cart{


    width:55px;


    height:55px;


    right:15px;


    bottom:25px;


    font-size:26px;


}



}