:root {
  --hc:#27ae60; --pc:#2980b9; --fb:#8e44ad; --hm:#e67e22; --ag:#c0392b;
}
body{margin:0;font-family:Segoe UI,Tahoma,sans-serif;background:#f4f6f9}
header{background:linear-gradient(135deg,#0f3443,#34e89e);color:#fff;text-align:center;padding:35px 15px}
.container{max-width:1200px;margin:auto;padding:20px}

.category-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.cat-card{
  background:#fff;width:190px;padding:22px;border-radius:12px;
  box-shadow:0 4px 15px rgba(0,0,0,.1);text-align:center;cursor:pointer;transition:.3s;border-top:5px solid #ccc
}
.cat-card:hover{transform:translateY(-8px)}
.cat-card div{font-size:45px}
.cat-card h3{font-size:14px;margin:10px 0}
.open-btn{display:inline-block;padding:6px 18px;border-radius:20px;font-size:12px;color:#fff;font-weight:bold}

.product-section{display:none;margin-top:30px; animation: slideDown 0.4s ease-out;}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.section-title{text-align:center;font-size:1.5rem;margin-bottom:20px;color:#333; border-bottom: 2px solid #ddd; padding-bottom: 10px;}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}

.p-card{background:#fff;border-radius:15px;padding:15px;text-align:center;box-shadow:0 4px 10px rgba(0,0,0,.08);display:flex;flex-direction:column;border: 1px solid #eee}
.p-name{font-weight:bold;font-size:14px;margin:12px 0;min-height:42px;color:#2c3e50}

.btn-group{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.btn{border:none;padding:10px;border-radius:8px;font-weight:bold;cursor:pointer;font-size:13px;text-align:center;text-decoration:none}
.view-img-btn{background:#f1f2f6;color:#2c3e50;border:1px solid #ccc}
.seller-btn{background:#e3f2fd;color:#0277bd;border:1px solid #0277bd}
.cust-btn{background:#25D366;color:#fff}

.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:1000; overflow: hidden;}
.modal-content{margin:auto;position:relative;top: 50%; transform: translateY(-50%); text-align:center; padding: 10px;}

.img-zoom-container {
  max-width: 90%;
  max-height: 80vh;
  margin: auto;
  overflow: hidden;
  border-radius: 15px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
#fullImg {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  transition: transform 0.5s ease;
  cursor: zoom-in;
}
#fullImg:hover {
  transform: scale(2.5);
}

.close{position:absolute;right:20px;top:-55px;font-size:45px;color:#fff;cursor:pointer;font-weight:bold}
.modal-wa-btn{background:#25D366;color:#fff;padding:12px 22px;border-radius:25px;text-decoration:none;display:inline-block;margin-top:15px;font-weight:bold}
footer{text-align:center;padding:40px 15px;color:#777;font-size:14px}