body{
margin:0;
background:#000;
color:white;
font-family:Arial
}

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px;
background:black
}

.logo img{
height:40px
}

.brand{
color:gold;
font-size:22px;
font-weight:bold
}

.btnSmall{
padding:6px 10px
}

.cartBtn{
background:gold;
color:black;
padding:10px 16px;
border-radius:10px;
border:none
}

.searchBar{
padding:10px;
background:#111
}

.searchBar input{
width:100%;
padding:10px;
border-radius:8px;
border:none
}

.container{
padding:16px
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:16px
}

.card{
background:#111;
border-radius:14px;
overflow:hidden;
padding-bottom:10px
}

.carousel img{
width:100%;
height:200px;
object-fit:cover
}

.info{
padding:10px
}

.price{
color:gold;
font-weight:bold
}

.qty{
display:flex;
justify-content:center;
align-items:center;
gap:10px
}

.qty button{
background:gold;
border:none;
width:34px;
height:34px;
border-radius:6px
}

.drawer{
position:fixed;
right:0;
top:0;
width:320px;
height:100%;
background:#111;
padding:20px;
display:none;
overflow:auto
}

.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.8);
display:none;
align-items:center;
justify-content:center
}

.modalBox{
background:#111;
padding:20px;
width:90%;
max-width:420px;
border-radius:12px
}

.btn{
background:gold;
border:none;
padding:12px;
margin-top:10px;
width:100%
}

@media (max-width:600px){

.brand{
font-size:18px
}

.grid{
grid-template-columns:repeat(2,1fr)
}

}