*{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;}

/* HERO */
.hero{
  min-height:60vh;
  background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
  url("https://images.unsplash.com/photo-1500595046743-cd271d694d30");
  background-size:cover;
  background-position:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:white;
  padding:20px;
}
.hero h2{font-size:36px;margin-bottom:10px;}
.hero p{font-size:18px;margin-bottom:20px;}
.hero .shop-btn{
  display:inline-block;
  padding:12px 25px;
  background:#4caf50;
  color:white;
  text-decoration:none;
  font-size:16px;
  border-radius:6px;
  transition:0.3s;
}
.hero .shop-btn:hover{background:#388e3c;}

/* SERVICES */
.services{
  padding:50px 5%;
  background:white;
  text-align:center;
}
.services h2{margin-bottom:30px;font-size:28px;}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
}
.service-card{
  background:#f9f9f9;
  padding:25px;
  border-radius:10px;
  box-shadow:0 3px 10px rgba(0,0,0,0.1);
  transition:0.4s;
  opacity:0;
  transform:translateY(30px);
}
.service-card.show{
  opacity:1;
  transform:translateY(0);
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 8px 18px rgba(0,0,0,0.2);
}
.service-card .icon{font-size:40px;margin-bottom:12px;}
.service-card h3{margin-bottom:8px;color:#2e7d32;}
.service-card p{color:#555;font-size:14px;}

/* PRODUCTS */
.products{padding:50px 5%;}
.products h2{text-align:center;margin-bottom:20px;}
.categories{
  display:flex;justify-content:center;gap:15px;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;}
.carousel-container{position:relative;overflow:hidden;}
.carousel-track{display:flex;transition:transform 0.5s ease;gap:20px;}
.card{background:white;border-radius:10px;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,0.1);text-align:center;padding-bottom:15px;min-width:200px;flex-shrink:0;transition:transform 0.3s, box-shadow 0.3s;}
.card img{width:100%;height:160px;object-fit:cover;transition:transform 0.3s;}
.card:hover{transform:translateY(-5px);box-shadow:0 6px 15px rgba(0,0,0,0.2);}
.card:hover img{transform:scale(1.05);}
.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;transition:0.3s;}
.card button:hover{background:#1b5e20;}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:white;border:none;font-size:24px;padding:10px;cursor:pointer;border-radius:50%;transition:0.3s;}
.carousel-btn:hover{background:rgba(0,0,0,0.8);}
.carousel-btn.prev{left:10px;}
.carousel-btn.next{right:10px;}

/* RECENTLY VIEWED */
.recently-viewed{padding:40px 5%;background:#f9f9f9;}
.recently-viewed h3{margin-bottom:15px;}
.rv-grid{display:flex;gap:15px;overflow-x:auto;}
.rv-card{background:white;border-radius:10px;flex-shrink:0;width:150px;box-shadow:0 3px 8px rgba(0,0,0,0.1);text-align:center;cursor:pointer;transition:0.3s;}
.rv-card img{width:100%;height:100px;object-fit:cover;border-radius:10px 10px 0 0;}
.rv-card h4{font-size:14px;padding:5px;}
.rv-card:hover{transform:translateY(-3px);box-shadow:0 6px 15px rgba(0,0,0,0.2);}

/* 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;z-index:100;}
.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;}
.modal-content h3{margin-bottom:10px;}
.modal-content p{margin-bottom:15px;}
.modal-content button{padding:10px 20px;background:#4caf50;color:white;border:none;border-radius:5px;cursor:pointer;transition:0.3s;}
.modal-content button:hover{background:#388e3c;}
.close-btn{position:absolute;top:10px;right:15px;font-size:20px;cursor:pointer;transition:0.3s;}
.close-btn:hover{color:#4caf50;}

/* CART PREVIEW */
#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 .item img{width:40px;height:40px;object-fit:cover;border-radius:5px;margin-right:10px;}
#cartPreview .item-name{flex:1;font-size:14px;}
#cartPreview .item-price{font-size:14px;}
#cartPreview .view-cart-btn{margin:10px;padding:8px;text-align:center;background:#2e7d32;color:white;text-decoration:none;border-radius:5px;}

footer{background:#1b5e20;color:white;text-align:center;padding:20px;margin-top:40px;}

@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 a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.2);}
  nav.active{display:flex;}
  .carousel-container{overflow-x:auto;}
  .carousel-track{gap:15px;}
  .card{min-width:150px;}
  .rv-card{width:120px;}
}