:root{
  --primary:#006633;
  --secondary:#0F8A5F;
  --gold:#D4AF37;
  --bg:#F5F7FA;
  --dark:#17202A;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); font-family:'Poppins',sans-serif; color:var(--dark);
  padding-bottom:70px; /* space for bottom nav on mobile */
}
a{ text-decoration:none; }

/* ---------- Sticky header ---------- */
.site-header{
  position:sticky; top:0; z-index:900; background:#fff; border-bottom:1px solid #EAECF0;
  padding:12px 16px; display:flex; align-items:center; gap:14px;
}
.site-header .brand{ font-weight:700; color:var(--primary); font-size:1.15rem; white-space:nowrap; }
.site-header .brand span{ color:var(--gold); }
.header-search{
  flex:1; background:#F5F7FA; border-radius:14px; padding:9px 14px; display:flex; align-items:center; gap:8px;
}
.header-search input{ border:none; background:transparent; outline:none; width:100%; font-size:.85rem; }
.header-icons{ display:flex; gap:14px; align-items:center; }
.header-icons a{ color:var(--dark); position:relative; }
.header-icons .badge-count{
  position:absolute; top:-6px; right:-8px; background:var(--primary); color:#fff; font-size:.6rem;
  padding:1px 5px; border-radius:10px; min-width:16px; text-align:center;
}
.desktop-menu{ display:none; gap:18px; margin-left:12px; }
.desktop-menu a{ color:var(--dark); font-size:.9rem; font-weight:500; }
.desktop-menu a:hover{ color:var(--primary); }

@media (min-width:992px){
  .desktop-menu{ display:flex; }
  body{ padding-bottom:0; }
}

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #EAECF0;
  display:flex; justify-content:space-around; padding:8px 0 10px; z-index:900;
}
.bottom-nav a{ color:#98A2B3; text-align:center; font-size:.65rem; display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
.bottom-nav a.active{ color:var(--primary); }
.bottom-nav svg{ width:20px; height:20px; }
@media (min-width:992px){ .bottom-nav{ display:none; } }

/* ---------- Hero ---------- */
.hero{
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  color:#fff; border-radius:0 0 28px 28px; padding:34px 20px 46px;
}
.hero h1{ font-size:1.5rem; font-weight:700; margin-bottom:8px; }
.hero p{ opacity:.92; font-size:.88rem; margin-bottom:18px; }
.hero .btn-hero{ background:#fff; color:var(--primary); border-radius:12px; padding:10px 18px; font-weight:600; font-size:.85rem; }
.hero .btn-hero-outline{ border:1.5px solid rgba(255,255,255,.7); color:#fff; border-radius:12px; padding:10px 18px; font-weight:600; font-size:.85rem; }

/* ---------- Section ---------- */
.section{ padding:22px 16px; }
.section-title{ font-weight:700; font-size:1.05rem; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; }
.section-title a{ font-size:.78rem; color:var(--primary); font-weight:600; }

/* ---------- Cards ---------- */
.category-scroll{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.category-scroll::-webkit-scrollbar{ display:none; }
.category-chip{
  flex:0 0 auto; background:#fff; border-radius:16px; padding:14px 16px; text-align:center; min-width:84px;
  box-shadow:0 4px 12px rgba(0,0,0,.04); color:var(--dark); font-size:.72rem; font-weight:500;
}
.category-chip .icon-wrap{
  width:38px; height:38px; border-radius:12px; background:#E7F6EC; color:var(--primary); display:flex;
  align-items:center; justify-content:center; margin:0 auto 8px;
}

.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:768px){ .product-grid{ grid-template-columns:repeat(4,1fr); } }

.product-card{
  background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.05); position:relative;
}
.product-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:#F0F2F5; }
.product-card .badge-tag{
  position:absolute; top:8px; left:8px; background:var(--gold); color:#fff; font-size:.6rem; font-weight:700;
  padding:3px 8px; border-radius:8px;
}
.product-card .wishlist-btn{
  position:absolute; top:8px; right:8px; background:rgba(255,255,255,.9); border-radius:50%; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center; border:none; color:#98A2B3;
}
.product-card .p-body{ padding:10px 12px 14px; }
.product-card .p-name{ font-size:.82rem; font-weight:600; margin-bottom:4px; line-height:1.3; height:2.6em; overflow:hidden; }
.product-card .p-price{ color:var(--primary); font-weight:700; font-size:.88rem; }
.product-card .p-price-old{ color:#98A2B3; font-size:.7rem; text-decoration:line-through; margin-left:4px; }
.product-card .p-rating{ color:var(--gold); font-size:.7rem; }

.promo-banner{
  border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.promo-banner img{ width:100%; display:block; }

/* ---------- Buttons ---------- */
.btn-brand{ background:var(--primary); border-color:var(--primary); color:#fff; border-radius:12px; font-weight:600; }
.btn-brand:hover{ background:var(--secondary); border-color:var(--secondary); color:#fff; }
.btn-outline-brand{ border:1.5px solid var(--primary); color:var(--primary); border-radius:12px; font-weight:600; }

/* ---------- Floating WhatsApp ---------- */
.fab-whatsapp{
  position:fixed; bottom:78px; right:16px; background:#25D366; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.2); z-index:950;
}
@media (min-width:992px){ .fab-whatsapp{ bottom:24px; } }

/* ---------- Skeleton ---------- */
.skeleton{ background:linear-gradient(90deg,#eee 25%,#f5f5f5 37%,#eee 63%); background-size:400% 100%; animation:skeleton-loading 1.4s ease infinite; border-radius:12px; }
@keyframes skeleton-loading{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

/* ---------- Toast (fallback if no JS lib) ---------- */
.toast-ak{ position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:var(--dark); color:#fff; padding:10px 18px; border-radius:12px; font-size:.82rem; z-index:2000; opacity:0; transition:opacity .3s; }
.toast-ak.show{ opacity:1; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--dark); color:#CBD5E1; padding:32px 16px; font-size:.82rem; }
.site-footer a{ color:#CBD5E1; }
.site-footer h6{ color:#fff; font-weight:700; margin-bottom:12px; }
.site-footer .disclaimer{ border-top:1px solid rgba(255,255,255,.1); margin-top:20px; padding-top:16px; color:#8895A7; font-size:.72rem; }