*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Poppins',sans-serif;
background:#f6f6f6;
color:#111;
overflow-x:hidden;
}

:root{
--red:#e53935;
--dark:#111;
--soft:#f7ebe5;
--gray:#f5f5f5;
--white:#fff;
}

.container{
max-width:1450px;
margin:auto;
padding:0 18px;
}

.topbar{
height:34px;
background:#f7ebe5;
display:flex;
align-items:center;
justify-content:center;
font-size:13px;
color:#222;
}

.header{
background:#fff;
position:sticky;
top:0;
z-index:999;
box-shadow:0 2px 15px rgba(0,0,0,0.05);
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:25px;
padding:18px 0;
}

.logo{
font-size:42px;
font-weight:700;
letter-spacing:-2px;
color:#111;
text-decoration:none;
}

.logo span{
font-weight:300;
font-size:22px;
}

.search-box{
flex:1;
height:54px;
background:#fff;
border:1px solid #eee;
border-radius:14px;
overflow:hidden;
display:flex;
box-shadow:0 3px 12px rgba(0,0,0,0.05);
}

.search-box input{
flex:1;
border:none;
padding:0 18px;
font-size:14px;
outline:none;
}

.search-box select{
width:140px;
border:none;
border-left:1px solid #eee;
outline:none;
background:#fafafa;
padding:0 10px;
}

.search-box button{
width:60px;
border:none;
background:#111;
color:#fff;
font-size:18px;
cursor:pointer;
}

.header-right{
display:flex;
align-items:center;
gap:28px;
}

.header-icon{
font-size:14px;
color:#111;
}

.header-icon i{
font-size:18px;
margin-right:6px;
}

.navbar{
background:#fff;
border-top:1px solid #eee;
}

.nav-inner{
display:flex;
align-items:center;
gap:40px;
height:58px;
}

.all-cat{
font-weight:600;
font-size:14px;
}

.nav-links{
display:flex;
gap:35px;
}

.nav-links a{
text-decoration:none;
font-size:14px;
font-weight:500;
color:#111;
position:relative;
}

.nav-links .active{
color:var(--red);
}

.hero{
padding:20px 0;
}

.hero-grid{
display:grid;
grid-template-columns:260px 1fr;
gap:20px;
}

.sidebar{
background:#fff;
border-radius:20px;
padding:18px;
box-shadow:0 4px 18px rgba(0,0,0,0.05);
}

.side-item{
display:flex;
align-items:center;
justify-content:space-between;
padding:13px 10px;
border-radius:12px;
font-size:14px;
transition:0.3s;
cursor:pointer;
}

.side-item:hover{
background:#fff3f3;
color:var(--red);
}

.banner{
background:#f7ebe5;
border-radius:28px;
padding:45px;
display:flex;
align-items:center;
justify-content:space-between;
overflow:hidden;
min-height:430px;
}

.banner h1{
font-size:82px;
font-weight:300;
line-height:1;
margin:12px 0;
}

.banner p{
font-size:22px;
color:#555;
margin-bottom:30px;
}

.banner button{
width:170px;
height:56px;
border:none;
background:#111;
color:#fff;
border-radius:14px;
font-weight:600;
cursor:pointer;
}

.banner img{
width:440px;
max-width:100%;
}

.features{
padding:20px 0 10px;
}

.features-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
}

.feature{
background:#fff;
border-radius:18px;
padding:20px;
display:flex;
gap:15px;
align-items:center;
box-shadow:0 4px 15px rgba(0,0,0,0.04);
}

.feature i{
font-size:24px;
color:#e53935;
}

.section{
padding:35px 0;
}

.section-head{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:24px;
}

.section-head h2{
font-size:32px;
}

.section-head a{
text-decoration:none;
font-weight:600;
color:#111;
}

.product-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:22px;
}

.product-card{
background:#fff;
border-radius:24px;
overflow:hidden;
position:relative;
transition:0.35s;
box-shadow:0 5px 18px rgba(0,0,0,0.05);
}

.product-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 35px rgba(0,0,0,0.12);
}

.badge{
position:absolute;
top:14px;
left:14px;
background:#e53935;
color:#fff;
padding:6px 10px;
border-radius:8px;
font-size:12px;
font-weight:600;
z-index:2;
}

.product-img{
height:260px;
background:#fafafa;
padding:20px;
display:flex;
align-items:center;
justify-content:center;
}

.product-img img{
max-width:100%;
max-height:220px;
transition:0.35s;
}

.product-content{
padding:18px;
}

.product-title{
font-size:15px;
line-height:1.5;
height:46px;
overflow:hidden;
margin-bottom:12px;
}

.price{
font-size:24px;
font-weight:700;
color:#e53935;
margin-bottom:8px;
}

.old-price{
font-size:13px;
color:#999;
text-decoration:line-through;
margin-left:8px;
}

.add-btn{
width:100%;
height:48px;
border:2px solid #e53935;
background:transparent;
color:#e53935;
font-weight:600;
border-radius:14px;
transition:0.3s;
cursor:pointer;
}

.add-btn:hover{
background:#e53935;
color:#fff;
}

.footer{
background:#fff;
margin-top:70px;
padding:60px 0 20px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:40px;
margin-bottom:40px;
}

.footer h3{
margin-bottom:18px;
}

.footer a,
.footer p{
display:block;
text-decoration:none;
color:#666;
margin-bottom:10px;
font-size:14px;
}

.copy{
text-align:center;
padding-top:20px;
border-top:1px solid #eee;
color:#777;
font-size:14px;
}

.mobile-nav{
display:none;
}

.product-link{
text-decoration:none;
color:inherit;
display:block;
}

@media(max-width:768px){

.hero-grid{
grid-template-columns:1fr;
}

.sidebar{
display:none;
}

.banner{
flex-direction:column;
text-align:center;
padding:28px;
}

.banner h1{
font-size:48px;
}

.features-grid,
.product-grid,
.footer-grid{
grid-template-columns:repeat(2,1fr);
}

.product-img{
height:180px;
}

.product-img img{
max-height:150px;
}

.mobile-nav{
position:fixed;
bottom:0;
left:0;
width:100%;
height:70px;
background:#fff;
display:flex;
align-items:center;
justify-content:space-around;
box-shadow:0 -5px 20px rgba(0,0,0,0.08);
z-index:999;
}

.mobile-nav a{
text-decoration:none;
color:#111;
font-size:12px;
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
}

body{
padding-bottom:90px;
}

}