/* =========================
CardShop Home V5.1
========================= */


*{

box-sizing:border-box;

}



body{

margin:0;

background:#080808;

color:#fff;

font-family:

"Microsoft YaHei",
Arial,
sans-serif;

}



a{

text-decoration:none;

color:inherit;

}






/* =====================
Header
===================== */


.header{


height:72px;


display:flex;


align-items:center;


justify-content:space-between;


padding:0 8%;


background:#111;


border-bottom:1px solid #222;


}





.logo{


color:#ffc43d;


font-size:30px;


font-weight:bold;


}




.logo small{


display:block;


font-size:12px;


color:#888;


font-weight:normal;


}





.header nav{


display:flex;


gap:35px;


}



.header nav a{


color:#aaa;


font-size:16px;


}



.header nav a:hover{


color:#ffc43d;


}









/* =====================
区块1 Hero
===================== */


.hero{


height:520px;


display:flex;


align-items:center;


justify-content:center;


text-align:center;


background:


radial-gradient(

circle at center,

#342900,

#080808 70%

);


}





.hero-box{


max-width:1100px;


}





.cloud{


font-size:14px;


color:#ddd;


margin-bottom:20px;


}





.hero h1{


font-size:72px;


margin:0;


font-weight:900;


}





.hero h1 span{


color:#ffc43d;


}





.hero p{


font-size:22px;


color:#aaa;


margin:30px 0 40px;


}





.main-btn{


display:inline-block;


background:#ffc43d;


color:#111;


padding:16px 45px;


border-radius:40px;


font-size:18px;


margin-right:20px;


}





.text-btn{


color:#ffc43d;


font-size:18px;


}



/* =====================
区块2 商品
===================== */


.products{


padding:80px 8%;


}




.section-title{


text-align:center;


margin-bottom:40px;


}




.section-title h2{


font-size:42px;


}




.section-title span{


color:#ffc43d;


}




.section-title p{


color:#999;


}






.search-box{


display:flex;


justify-content:center;


margin-bottom:30px;


}




.search-box input{


width:380px;


padding:15px 25px;


background:#111;


border:1px solid #333;


border-radius:30px;


color:white;


}







.categories{


display:flex;


justify-content:center;


gap:15px;


margin-bottom:45px;


flex-wrap:wrap;


}




.categories button{


background:#151515;


color:#aaa;


border:1px solid #333;


padding:10px 25px;


border-radius:30px;


}





.categories button:hover{


border-color:#ffc43d;


color:#ffc43d;


}






.product-grid{


width:100%;


max-width:1400px;


margin:auto;


display:grid;


grid-template-columns:


repeat(3,1fr);


gap:30px;


}





.product-card{


background:#151515;


border:1px solid #222;


border-radius:25px;


padding:20px;


height:500px;


display:flex;


flex-direction:column;


}





.product-card img{


width:100%;


height:220px;


object-fit:cover;


border-radius:18px;


}





.product-card h3{


font-size:26px;


}




.product-card .price{


margin-top:auto;


font-size:32px;


color:#ffc43d;


}




.product-card button{


height:45px;


background:#ffc43d;


border-radius:30px;


margin-top:20px;


}



/* =====================
区块3 Footer Area
===================== */


.footer-area{


padding:70px 8%;


border-top:1px solid #111;


}





.footer-box{


max-width:1400px;


margin:auto;


display:grid;


grid-template-columns:


repeat(3,1fr);


gap:30px;


}





.footer-box div{


background:#151515;


border:1px solid #222;


border-radius:20px;


padding:30px;


}





.footer-box h3{


color:#ffc43d;


}





.footer-box p{


color:#aaa;


}





.links,

.contact{


max-width:1400px;


margin:40px auto 0;


text-align:center;


}




.links a{


color:#ffc43d;


margin:10px;


}




footer{


text-align:center;


padding:40px;


color:#777;


}