/* =========================
CardShop Home V5.5
========================= */



*{

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;

}



.brand h2{

margin:0;

font-size:28px;

color:#ffc43d;

}



.brand p{

margin:3px 0 0;

font-size:12px;

color:#888;

}



.header nav{

display:flex;

gap:35px;

}



.header nav a{

color:#aaa;

font-size:16px;

}



.header nav a:hover{

color:#ffc43d;

}







/* =====================
Hero
===================== */


.hero{

height:500px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

background:

radial-gradient(

circle at center,

#332900,

#080808 70%

);

}





.hero-content{

max-width:1100px;

}





.hero-tip{

font-size:14px;

color:#ccc;

margin-bottom:25px;

}





.hero h1{

font-size:72px;

font-weight:900;

margin:0;

line-height:1.2;

}





.highlight{

color:#ffc43d;

}





.hero p{

font-size:22px;

color:#aaa;

margin:30px 0 40px;

}





.hero-actions a{

display:inline-block;

padding:15px 45px;

border-radius:40px;

font-size:18px;

}





.primary-btn{

background:#ffc43d;

color:#111;

}





.secondary-btn{

color:#ffc43d;

margin-left:25px;

}









/* =====================
Container
===================== */


.container{

width:100%;

max-width:1200px;

margin:auto;

padding:0 20px;

}







/* =====================
Products
===================== */


.products-section{

padding:80px 0;

}





.section-header{

text-align:center;

margin-bottom:40px;

}





.section-header h2{

font-size:42px;

margin:0;

}



.section-header span{

color:#ffc43d;

}



.section-header p{

color:#888;

}







.search-box{

display:flex;

justify-content:center;

margin-bottom:30px;

}





.search-box input{

width:380px;

height:45px;

background:#111;

border:1px solid #333;

border-radius:30px;

padding:0 25px;

color:white;

}





.categories{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

margin-bottom:45px;

}



.categories button{

background:#151515;

border:1px solid #333;

color:#aaa;

padding:10px 25px;

border-radius:30px;

}



.categories button:hover{

color:#ffc43d;

border-color:#ffc43d;

}








.product-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}







.product-card{

height:480px;

background:#151515;

border:1px solid #222;

border-radius:22px;

padding:20px;

display:flex;

flex-direction:column;

}





.product-card img{

width:100%;

height:210px;

object-fit:cover;

border-radius:15px;

}





.product-card h3{

font-size:24px;

margin:18px 0;

}





.product-card .desc{

color:#999;

height:45px;

overflow:hidden;

}





.product-card .stock{

color:#aaa;

margin-top:10px;

}





.product-card .price{

margin-top:auto;

font-size:32px;

font-weight:bold;

color:#ffc43d;

}





.product-card button{

margin-top:15px;

height:45px;

background:#ffc43d;

border-radius:30px;

color:#111;

}








/* =====================
Service
===================== */


.service-section{

padding:40px 0 80px;

}



.service-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}





.service-card{

background:#151515;

border:1px solid #222;

border-radius:22px;

padding:35px;

text-align:center;

}





.service-card h3{

color:#ffc43d;

font-size:22px;

}





.service-card p{

color:#aaa;

}








/* =====================
Footer
===================== */


footer{

background:#050505;

border-top:1px solid #111;

padding:60px 8% 30px;

}





.footer-container{

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:

repeat(4,1fr);

gap:30px;

}





.footer-brand h2{

color:#ffc43d;

}





.footer-brand p{

color:#888;

}





.footer-column h3{

color:#ffc43d;

}





.footer-column a{

display:block;

margin:12px 0;

color:#aaa;

}





.footer-column a:hover{

color:#ffc43d;

}





.friend-links{

text-align:center;

margin-top:40px;

}





.friend-links a{

color:#ffc43d;

margin:10px;

}





.copyright{

text-align:center;

margin-top:30px;

padding-top:25px;

border-top:1px solid #111;

color:#666;

}








/* =====================
Responsive
===================== */


@media(max-width:900px){


.product-grid{

grid-template-columns:

repeat(2,1fr);

}



.footer-container{

grid-template-columns:

repeat(2,1fr);

}


}




@media(max-width:600px){


.header{

padding:0 20px;

}



.header nav{

display:none;

}





.hero{

height:420px;

}





.hero h1{

font-size:40px;

}





.hero p{

font-size:16px;

}





.product-grid{

grid-template-columns:

1fr;

}





.service-grid{

grid-template-columns:

1fr;

}





.footer-container{

grid-template-columns:

1fr;

}



}