@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{
  --g:#2D5F3F;--gl:#3D7A52;--gp:#E8F5E9;--gd:#1A3D27;
  --y:#FFD600;--o:#FF6B35;--r:#E53935;
  --bg:#F2F5F3;--card:#fff;--border:#DDE8E1;
  --txt:#1A2E1F;--txt2:#5A7A62;--txt3:#9BB5A5;
  --rad:16px;--shadow:0 2px 12px rgba(45,95,63,0.10);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{font-family:'Nunito',sans-serif;background:var(--bg);color:var(--txt);max-width:480px;margin:0 auto;min-height:100vh;padding-bottom:80px;overflow-x:hidden}
a{text-decoration:none;color:inherit}

/* HEADER */
.hdr{background:var(--g);padding:14px 16px;position:sticky;top:0;z-index:300;box-shadow:0 2px 16px rgba(0,0,0,0.18)}
.hdr-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.hdr-logo{color:#fff;font-size:1.1rem;font-weight:900}
.hdr-sub{color:rgba(255,255,255,0.65);font-size:0.72rem;font-weight:600;margin-top:1px}
.hdr-icons{display:flex;gap:8px}
.ico-btn{width:36px;height:36px;background:rgba(255,255,255,0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.9rem;cursor:pointer;position:relative;border:none;flex-shrink:0}
.bdg{position:absolute;top:-4px;right:-4px;background:var(--y);color:#111;font-size:0.6rem;font-weight:900;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}

/* BACK HEADER */
.back-hdr{background:var(--g);padding:14px 16px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:300}
.back-btn{width:34px;height:34px;background:rgba(255,255,255,0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;border:none;flex-shrink:0}
.back-title{color:#fff;font-size:1.05rem;font-weight:800;flex:1}

/* SEARCH */
.srch{display:flex;align-items:center;background:#fff;border-radius:12px;padding:10px 14px;gap:10px;cursor:pointer}
.srch i{color:var(--txt3)}
.srch input{border:none;outline:none;font-family:'Nunito',sans-serif;font-size:0.9rem;color:var(--txt);flex:1;background:transparent;cursor:pointer}
.srch input::placeholder{color:var(--txt3)}

/* BOTTOM NAV */
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;border-top:1.5px solid var(--border);display:flex;z-index:300;box-shadow:0 -4px 24px rgba(0,0,0,0.08)}
.ni{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 14px;flex:1;cursor:pointer;border:none;background:none}
.ni i{font-size:1.2rem;color:var(--txt3)}
.ni span{font-size:0.62rem;font-weight:800;color:var(--txt3)}
.ni.on i{color:var(--g)}
.ni.on span{color:var(--g)}
.ni.on{background:var(--gp)}

/* PRODUCT CARD */
.pc{background:var(--card);border-radius:var(--rad);border:1.5px solid var(--border);overflow:hidden;cursor:pointer;transition:transform 0.15s}
.pc:active{transform:scale(0.97)}
.pimg{background:var(--gp);height:148px;display:flex;align-items:center;justify-content:center;position:relative;padding:12px}
.pimg img{width:100%;height:100%;object-fit:contain}
.pemoji{font-size:3.8rem}
.dtag{position:absolute;top:8px;left:8px;background:var(--o);color:#fff;font-size:0.62rem;font-weight:800;padding:2px 8px;border-radius:6px}
.pinfo{padding:10px 12px 12px}
.pname{font-size:0.88rem;font-weight:800;color:var(--txt);margin-bottom:2px;line-height:1.3}
.psize{font-size:0.7rem;color:var(--txt3);margin-bottom:8px}
.pfoot{display:flex;justify-content:space-between;align-items:center}
.pprices{display:flex;flex-direction:column}
.pnew{font-size:1rem;font-weight:900;color:var(--g)}
.pold{font-size:0.7rem;color:var(--txt3);text-decoration:line-through}

/* BUTTONS */
.add-btn{background:var(--g);color:#fff;border:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;flex-shrink:0}
.qty{display:flex;align-items:center;background:var(--g);border-radius:10px;padding:3px 8px;gap:6px}
.qb{background:none;border:none;color:#fff;font-size:1.1rem;cursor:pointer;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif}
.qn{color:#fff;font-weight:900;font-size:0.88rem;min-width:16px;text-align:center}
.btn-pri{width:100%;padding:15px;background:var(--g);color:#fff;border:none;border-radius:14px;font-family:'Nunito',sans-serif;font-size:1rem;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-sec{width:100%;padding:13px;background:var(--gp);color:var(--g);border:2px solid var(--g);border-radius:14px;font-family:'Nunito',sans-serif;font-size:0.95rem;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}

/* FORM */
.fg{margin-bottom:14px}
.fl{display:block;font-size:0.8rem;font-weight:800;color:var(--txt2);margin-bottom:5px}
.fi{width:100%;padding:12px 14px;border:2px solid var(--border);border-radius:12px;font-family:'Nunito',sans-serif;font-size:0.9rem;color:var(--txt);background:#fff;outline:none;transition:border 0.2s}
.fi:focus{border-color:var(--g)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* CARDS */
.card{background:var(--card);border-radius:var(--rad);border:1.5px solid var(--border);box-shadow:var(--shadow)}
.card-p{padding:16px}

/* STATUS BADGES */
.sb{padding:4px 10px;border-radius:20px;font-size:0.7rem;font-weight:800;display:inline-block}
.s-pending{background:#FFF3CD;color:#856404}
.s-confirmed{background:#D1ECF1;color:#0C5460}
.s-processing{background:#CCE5FF;color:#004085}
.s-packed{background:#D4EDDA;color:#155724}
.s-shipped{background:#B8DAFF;color:#004085}
.s-delivered{background:#28A745;color:#fff}
.s-cancelled{background:#F8D7DA;color:#721C24}

/* MISC */
.divider{height:8px;background:var(--bg);margin:12px 0 0}
.sec{margin:16px 0 0}
.sec-hdr{display:flex;justify-content:space-between;align-items:center;padding:0 16px;margin-bottom:12px}
.sec-ttl{font-size:1.05rem;font-weight:900;color:var(--txt)}
.see-all{color:var(--g);font-size:0.82rem;font-weight:800}
.hscroll{display:flex;gap:12px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px}
.wa-btn{position:fixed;bottom:88px;right:16px;width:50px;height:50px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.4rem;box-shadow:0 4px 16px rgba(37,211,102,0.4);z-index:199}

/* SKELETON */
.sk{background:linear-gradient(90deg,#eaf0ec 25%,#dce8de 50%,#eaf0ec 75%);background-size:200% 100%;animation:sk 1.4s infinite;border-radius:8px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* EMPTY STATE */
.empty{text-align:center;padding:50px 20px}
.empty i{font-size:3.5rem;opacity:0.2;display:block;margin-bottom:14px}
.empty h3{font-size:1rem;font-weight:800;color:var(--txt2);margin-bottom:6px}
.empty p{font-size:0.82rem;color:var(--txt3)}

/* ALERTS */
.alert{padding:12px 16px;border-radius:12px;margin:12px 16px;font-size:0.85rem;font-weight:700;display:flex;align-items:center;gap:8px}
.a-ok{background:#E8F5E9;color:#2D5F3F}
.a-err{background:#FFEBEE;color:#C62828}

@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.fu{animation:fadeUp 0.35s ease forwards}