*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:linear-gradient(135deg,#0f5132,#198754);
min-height:100vh;
color:white;
}

/* HEADER */
header{
position:sticky;
top:0;
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 20px;
background:rgba(255,255,255,0.15);
backdrop-filter:blur(12px);
z-index:100;
}

.logo{
font-weight:600;
font-size:18px;
}

header input{
padding:8px 15px;
border-radius:20px;
border:none;
width:40%;
}

.header-icons{
display:flex;
gap:15px;
align-items:center;
}

.cart-icon{
background:white;
color:black;
padding:8px 15px;
border-radius:20px;
cursor:pointer;
font-weight:600;
position:relative;
}

.cart-icon span{
position:absolute;
top:-5px;
right:-8px;
background:red;
color:white;
font-size:12px;
padding:2px 6px;
border-radius:50%;
}

/* CATEGORY */
.category-wrapper{
background:rgba(255,255,255,0.1);
padding:10px 0;
position:sticky;
top:65px;
z-index:99;
backdrop-filter:blur(10px);
}

.categoryBar{
display:flex;
gap:10px;
overflow-x:auto;
padding:0 15px;
}

.categoryBar button{
border:none;
padding:8px 18px;
border-radius:25px;
cursor:pointer;
background:#e5e7eb;
color:#2563eb;
}

.categoryBar button.active{
background:#16a34a;
color:white;
}

/* PRODUCT GRID */
main{
padding:20px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

@media(max-width:900px){
main{
grid-template-columns:repeat(2,1fr);
}
}

.card{
background:rgba(255,255,255,0.15);
backdrop-filter:blur(12px);
border-radius:20px;
padding:15px;
color:white;
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
}

.card img{
width:100%;
height:150px;
object-fit:contain;
border-radius:15px;
background:#fff3;
}

.placeholder{
height:150px;
display:flex;
align-items:center;
justify-content:center;
background:#ffffff30;
border-radius:15px;
}

.price{
font-weight:600;
margin:5px 0;
}

.desc{
font-size:12px;
opacity:0.8;
margin-bottom:10px;
}

.addBtn{
background:#16a34a;
color:white;
border:none;
padding:8px;
border-radius:20px;
cursor:pointer;
width:100%;
}

/* CART */
.cartDrawer{
position:fixed;
top:0;
right:-400px;
width:350px;
height:100%;
background:white;
color:black;
transition:0.3s;
display:flex;
flex-direction:column;
z-index:200;
}

.cartDrawer.active{
right:0;
}

.cartHeader{
display:flex;
justify-content:space-between;
padding:15px;
border-bottom:1px solid #ddd;
}

.cartItems{
flex:1;
overflow-y:auto;
padding:10px;
}

.cartBottom{
padding:15px;
border-top:1px solid #ddd;
}

.cartBottom input,
.cartBottom textarea{
width:100%;
padding:8px;
margin-bottom:10px;
border-radius:8px;
border:1px solid #ccc;
}

.cartBottom button{
width:100%;
padding:10px;
background:#16a34a;
color:white;
border:none;
border-radius:20px;
cursor:pointer;
}