*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;}
body{background:#f5f5f5;}

/* HEADER */
header{
  background:#2e7d32;color:white;
  padding:15px 5%;display:flex;
  justify-content:space-between;align-items:center;position:relative;
}
header h1{font-size:22px;}
nav{display:flex;gap:15px;align-items:center;}
nav a{color:white;text-decoration:none;font-weight:bold;font-size:14px;}
.menu-toggle{display:none;font-size:26px;cursor:pointer;}

/* MINI CART */
#cartPreview{
  position:absolute;top:55px;right:5%;
  width:250px;background:white;box-shadow:0 3px 10px rgba(0,0,0,0.2);
  border-radius:8px;display:none;flex-direction:column;z-index:1000;
  max-height:350px;overflow:auto;
}
#cartPreview.active{display:flex;}
#cartPreview .item{display:flex;align-items:center;padding:10px;border-bottom:1px solid #eee;}
#cartPreview img{width:40px;height:40px;object-fit:cover;margin-right:10px;border-radius:5px;}
.item-name{flex:1;font-size:14px;}
.item-price{font-size:14px;}
.view-cart-btn{margin:10px;padding:8px;text-align:center;background:#2e7d32;color:white;text-decoration:none;border-radius:5px;}

/* PAGE */
.container{padding:20px 5%;}
h2{text-align:center;margin-bottom:20px;}
#searchBar{width:100%;padding:10px;margin-bottom:20px;border-radius:5px;border:1px solid #ccc;}

/* CATEGORY */
.categories{display:flex;justify-content:center;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.categories button{padding:8px 15px;background:#eee;border:none;border-radius:5px;cursor:pointer;}
.categories button.active{background:#4caf50;color:white;}

/* PRODUCTS */
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;}
.card{background:white;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,0.1);text-align:center;padding-bottom:15px;cursor:pointer;}
.card img{width:100%;height:160px;object-fit:cover;}
.card h3{margin:10px 0 5px;}
.card p{color:#555;margin-bottom:10px;}
.card button{padding:8px 16px;border:none;background:#2e7d32;color:white;border-radius:5px;cursor:pointer;}
.card button:hover{background:#1b5e20;}

/* MODAL */
#productModal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);justify-content:center;align-items:center;}
.modal-content{background:white;padding:20px;border-radius:10px;width:90%;max-width:400px;position:relative;}
.modal-content img{width:100%;border-radius:10px;margin-bottom:15px;}
.close-btn{position:absolute;top:10px;right:15px;font-size:20px;cursor:pointer;}

/* MOBILE */
@media(max-width:768px){
.menu-toggle{display:block;}
nav{display:none;flex-direction:column;position:absolute;top:60px;left:0;width:100%;background:#2e7d32;padding:10px 5%;}
nav.active{display:flex;}
}