:root{
  --g:#1b4332;
  --g2:#2d6a4f;
  --bg:#f6f8f7;
  --card:#ffffff;
  --muted:#64748b;
  --ring:rgba(27,67,50,.14);
}

*{box-sizing:border-box}
body{background:var(--bg); color:#0f172a; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{text-decoration:none}

.topbar{
  background:linear-gradient(135deg,var(--g),#0b2f23);
  color:#eafff5;
  padding:8px 0;
}

.navwrap{
  background:#fff;
  border-bottom:1px solid #eef2f7;
}

.brand{font-weight:900; letter-spacing:-.2px}
.logoDot{
  display:inline-block; width:10px; height:10px; border-radius:999px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  margin-right:8px;
  box-shadow:0 0 0 6px rgba(34,197,94,.12);
}

.searchBox input{border-radius:999px 0 0 999px}
.searchBox button{border-radius:0 999px 999px 0}

.btn-cart{
  border-radius:999px;
  background:rgba(27,67,50,.06);
  border:1px solid rgba(27,67,50,.15);
  color:var(--g);
  font-weight:700;
}
.btn-cart:hover{background:rgba(27,67,50,.1)}
.cartCount{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:999px; margin-left:6px;
  background:var(--g); color:#fff; font-size:12px; font-weight:800;
}

.heroWrap{
  padding:34px 0 10px;
}
.heroCard{
  background:linear-gradient(135deg,#e7fff3,#ffffff);
  border:1px solid #e7efe9;
  border-radius:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
  overflow:hidden;
}
.heroLeft{padding:34px}
.heroTitle{font-weight:900; font-size:44px; letter-spacing:-1px; line-height:1.05}
.heroSub{color:var(--muted)}
.heroPills .pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px; border-radius:999px;
  background:#fff; border:1px solid #e7efe9;
  font-size:12px; font-weight:700; color:var(--g);
}
.heroRight{
  background:radial-gradient(800px 300px at 60% 20%, rgba(34,197,94,.18), transparent 55%);
  padding:18px;
  display:flex; align-items:center; justify-content:center;
}
.heroImg{
  width:100%;
  max-width:520px;
  height:auto;
  display:block;
  border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,.12);
}

/* Section headings */
.secHead{margin:26px 0 14px}
.secTitle{font-weight:900; letter-spacing:-.4px}
.secHint{color:var(--muted); font-size:13px}

/* Category chips */
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  border-radius:999px;
  padding:8px 12px;
  background:#fff;
  border:1px solid #e7efe9;
  font-weight:800;
  font-size:12px;
  color:#0f172a;
}
.chip:hover{box-shadow:0 0 0 6px var(--ring)}

/* Product Card (NO IMAGE CUT) */
.pcard{
  background:var(--card);
  border:1px solid #eef2f7;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(0,0,0,.08);
  transition:.25s;
}
.pcard:hover{transform:translateY(-4px)}
.pmedia{
  background:#fff;
  border-bottom:1px solid #eef2f7;
  padding:10px;
}
.pimgBox{
  width:100%;
  aspect-ratio: 1 / 1;           /* square without crop */
  background:#f8fafc;
  border-radius:14px;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.pimgBox img{
  width:100%;
  height:100%;
  object-fit:contain;            /* ✅ never cut */
  image-rendering:auto;
}
.pbody{padding:12px 14px}
.prating{font-size:12px; color:#f59e0b; font-weight:900}
.pname{font-weight:900; font-size:14px; margin:2px 0 4px}
.pshort{font-size:12px; color:var(--muted); min-height:34px}
.pbadges{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}
.pbadge{
  font-size:11px; font-weight:900; color:var(--g);
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.18);
  border-radius:999px;
  padding:4px 10px;
}
.pprice{display:flex; align-items:baseline; gap:10px}
.pprice .now{font-weight:900; font-size:16px}
.pprice .old{font-size:12px; color:#94a3b8; text-decoration:line-through}
.pcta{
  margin-top:12px;
  display:flex; gap:10px;
}
.btnBasket{
  flex:1;
  border-radius:999px;
  background:linear-gradient(135deg,var(--g),var(--g2));
  color:#fff;
  border:0;
  font-weight:900;
  padding:10px 12px;
}
.btnGhost{
  border-radius:999px;
  border:1px solid rgba(27,67,50,.2);
  color:var(--g);
  background:#fff;
  font-weight:900;
  padding:10px 12px;
}

/* Static premium blocks */
.softBlock{
  background:#fff;
  border:1px solid #eef2f7;
  border-radius:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.06);
  padding:18px;
}
.iconTile{
  background:linear-gradient(135deg,#e7fff3,#ffffff);
  border:1px solid #e7efe9;
  border-radius:18px;
  padding:18px;
}
.iconTile .t{font-weight:900}
.iconTile .d{color:var(--muted); font-size:13px}

/* Footer */
.footer{
  margin-top:40px;
  background:#0b2f23;
  color:#d5f5e6;
  padding:34px 0;
}
.brandFoot{font-weight:900; font-size:18px}
.footTitle{font-weight:900; margin-bottom:8px}
.footLink{display:block; color:#d5f5e6; opacity:.85; padding:3px 0}
.footLink:hover{opacity:1}
.muted{opacity:.85}
.soc{
  width:36px; height:36px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
}

/* Responsive hero */
@media (max-width: 992px){
  .heroTitle{font-size:36px}
  .heroLeft{padding:22px}
}
@media (max-width: 576px){
  .heroTitle{font-size:30px}
}
/* Mobile CTA Fix */
@media (max-width: 576px){
  .pcta{
    display:block !important;
  }
  .pcta .btnGhost{
    display:none !important;
    visibility:hidden !important;
  }
  .pcta .btnBasket{
    width:100% !important;
    flex:0 0 100% !important;
  }
}

.pname{
  color:#198754; /* bootstrap success green */
  font-weight:700;
}
.pname:hover{
  color:#146c43;
}
.cartCanvas{
  width:380px;
  max-width:100%;
}
.cartItemRow{
  background:#fff;
}
.cartItemRow{
  display:flex;
  align-items:center;
  gap:12px;
}

.miniImg{
  width:70px;
  height:70px;
  min-width:70px;
  border-radius:12px;
  overflow:hidden;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
}

.miniImg img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}

.miniTitle{
  font-weight:600;
  font-size:14px;
  color:#14532d;
}
.removeMini{
  color:#dc2626;
  font-size:16px;
}
.removeMini:hover{
  color:#b91c1c;
}
.cartFooter{
  background:#fff;
}