:root{
  --bg-darker:#052A22;
  --panel:#0E5C49;
  --accent:#1DB894;
  --accent-bright:#4FE8C4;
  --accent-soft:rgba(29,184,148,.12);
  --bg-light:#F3F9F7;
  --card-bg:#FFFFFF;
  --text-dark:#0B2A22;
  --text-gray:#5D7A70;
  --border:#E1EEE9;
  --danger:#D65A4A;
  --ok:#12A385;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter',sans-serif; background:var(--bg-light); color:var(--text-dark); -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Sora',sans-serif;}

.topbar{
  background:radial-gradient(circle at 15% 0%, #146B54 0%, var(--bg-darker) 70%);
  color:#F2FBF8; padding:16px 24px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:20;
}
.brandmark{display:flex; align-items:center; gap:11px;}
.badge{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); border:1.5px solid rgba(79,232,196,.5); display:flex; align-items:center; justify-content:center;}
.badge svg{width:20px; height:20px;}
.brand-text .b1{font-weight:800; font-size:15px;}
.brand-text .b2{font-weight:600; font-size:11px; color:var(--accent-bright); text-transform:uppercase; letter-spacing:.6px;}
.cart-btn{position:relative; background:var(--accent); color:#052A22; border:none; border-radius:10px; padding:10px 16px; font-family:'Sora'; font-weight:700; font-size:13px; cursor:pointer;}
.cart-count{position:absolute; top:-7px; right:-7px; background:var(--danger); color:#fff; font-size:10.5px; font-weight:800; border-radius:99px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding:0 3px;}

.hero{
  background:radial-gradient(circle at 85% 0%, #146B54 0%, var(--bg-darker) 70%);
  color:#F2FBF8; padding:44px 24px 54px; text-align:center;
}
.hero h1{font-size:clamp(24px,4vw,34px); margin-bottom:10px;}
.hero p{color:#AFD9CD; font-size:14.5px; max-width:520px; margin:0 auto 20px; line-height:1.6;}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.btn{padding:12px 22px; border-radius:10px; border:none; cursor:pointer; font-family:'Sora'; font-weight:700; font-size:13.5px; text-decoration:none; display:inline-flex; align-items:center; gap:7px;}
.btn-accent{background:var(--accent); color:#052A22;}
.btn-accent:hover{background:var(--accent-bright);}
.btn-outline{background:transparent; border:1.5px solid rgba(255,255,255,.35); color:#F2FBF8;}
.btn-outline:hover{border-color:var(--accent-bright); color:var(--accent-bright);}

.container{max-width:1040px; margin:0 auto; padding:34px 24px 70px;}
.section-title{font-size:20px; font-weight:700; margin-bottom:4px;}
.section-sub{color:var(--text-gray); font-size:13.5px; margin-bottom:22px;}

.product-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px;}
.product-card{background:var(--card-bg); border:1px solid var(--border); border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:10px;}
.product-img{width:100%; aspect-ratio:1.4; border-radius:12px; background:linear-gradient(135deg, var(--accent-soft), #E9F7F2); display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:34px; overflow:hidden;}
.product-img img{width:100%; height:100%; object-fit:cover;}
.product-cat{font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--ok); font-weight:700;}
.product-name{font-weight:700; font-size:14.5px; line-height:1.3;}
.product-price{font-family:'Sora'; font-weight:800; font-size:17px; color:var(--text-dark);}
.product-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto;}
.qty-picker{display:flex; align-items:center; border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.qty-picker button{background:#F5FAF8; border:none; width:28px; height:30px; cursor:pointer; font-size:15px; color:var(--text-dark);}
.qty-picker span{width:26px; text-align:center; font-size:13px; font-weight:700;}
.add-btn{background:var(--text-dark); color:#fff; border:none; border-radius:8px; padding:8px 14px; font-family:'Sora'; font-weight:700; font-size:12px; cursor:pointer;}
.add-btn:hover{background:#0B1F16;}
.out-of-stock{font-size:11.5px; color:var(--danger); font-weight:700;}

.empty-note{color:var(--text-gray); font-style:italic; font-size:13.5px; padding:20px 0;}

/* ---------- CART DRAWER ---------- */
.drawer-overlay{position:fixed; inset:0; background:rgba(5,42,34,.45); z-index:90; display:none;}
.drawer-overlay.active{display:block;}
.drawer{position:fixed; top:0; right:0; height:100vh; width:min(400px,100%); background:#fff; z-index:91; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .2s ease;}
.drawer.active{transform:translateX(0);}
.drawer-head{padding:20px 22px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;}
.drawer-head h2{font-size:17px;}
.drawer-close{background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-gray);}
.drawer-body{flex:1; overflow-y:auto; padding:14px 22px;}
.cart-item{display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--border); align-items:center;}
.cart-item .ci-name{font-weight:700; font-size:13.5px;}
.cart-item .ci-price{font-size:12px; color:var(--text-gray);}
.cart-item .ci-meta{flex:1;}
.cart-item .ci-remove{background:none; border:none; color:var(--danger); cursor:pointer; font-size:12px;}
.drawer-foot{padding:18px 22px; border-top:1px solid var(--border);}
.drawer-total{display:flex; justify-content:space-between; font-weight:700; font-size:15px; margin-bottom:14px;}

/* ---------- CHECKOUT MODAL ---------- */
.modal-overlay{position:fixed; inset:0; background:rgba(5,42,34,.5); z-index:100; display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow-y:auto;}
.modal-overlay.active{display:flex;}
.modal{background:#fff; border-radius:18px; width:min(520px,100%); padding:26px 26px 22px;}
.modal h2{font-size:18px; margin-bottom:4px;}
.modal .sub{font-size:12.5px; color:var(--text-gray); margin-bottom:18px;}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
.field label{font-size:12.5px; font-weight:600; color:var(--text-gray);}
.field input, .field select, .field textarea{padding:10px 12px; border:1px solid var(--border); border-radius:9px; font-size:13.5px; font-family:'Inter'; width:100%;}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent); border-color:var(--accent);}
.modal-close{position:absolute; top:16px; right:18px; background:none; border:none; font-size:20px; cursor:pointer; color:var(--text-gray);}
.modal{position:relative;}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border);}

.confirm-box{text-align:center; padding:10px 4px;}
.confirm-box .ok-badge{width:56px; height:56px; border-radius:50%; background:var(--accent-soft); color:var(--ok); display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 14px;}
.confirm-box p{color:var(--text-gray); font-size:13.5px; line-height:1.6; margin-bottom:18px;}

.footer-note{text-align:center; color:var(--text-gray); font-size:12px; padding:22px; border-top:1px solid var(--border);}

.floating-wa{position:fixed; bottom:22px; right:22px; background:#25D366; color:#fff; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:26px; box-shadow:0 6px 18px rgba(0,0,0,.2); z-index:50; text-decoration:none;}

@media(max-width:480px){ .hero{padding:34px 18px 44px;} }