:root{
  --bg:#fffaf6;
  --accent:#ff97c2;
  --accent-2:#ffd9e8;
  --muted:#7a6b6b;
  --card:#fff;
  --shadow: 0 6px 18px rgba(79,57,57,0.07);
  --radius:14px;
  --glass: rgba(255,255,255,0.7);
}
*{box-sizing:border-box}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; background:linear-gradient(180deg,var(--bg) 0%, #fff 100%); color:#2b2b2b}
a{color:inherit}
.container{width:min(1100px,94%);margin:24px auto}

/* Header */
header{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo .mark{width:48px;height:48px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#ffb3d6);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:18px;box-shadow:var(--shadow)}
nav{display:flex;gap:18px;align-items:center}
.pill{background:var(--card);padding:8px 12px;border-radius:999px;box-shadow:var(--shadow);font-size:14px}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:center;margin-top:12px}
.hero-card{background:linear-gradient(180deg, #fff 0%, #fffaf6 100%);padding:28px;border-radius:18px;box-shadow:var(--shadow)}
.hero h1{margin:0;font-size:26px}
.hero p{color:var(--muted);margin:10px 0 18px}
.search{display:flex;gap:10px}
.search input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid #f0dce7;background:transparent;font-size:15px}
.search button{padding:12px 14px;border-radius:12px;border:none;background:var(--accent);color:#fff;font-weight:600}
.hero-cta{display:flex;gap:10px;margin-top:12px}
.chip{background:var(--accent-2);padding:8px 12px;border-radius:12px;font-size:13px}

/* Side promo */
.promo{background:linear-gradient(180deg,#fff7fb,#fff0f8);padding:14px;border-radius:12px;text-align:center}
.promo h3{margin:8px 0}
.promo img{width:100%;border-radius:10px}

/* Sections */
.section{margin-top:22px}
.section h3{margin:6px 0 12px}

/* Category pills */
.categories{display:flex;gap:10px;flex-wrap:wrap}
.cat{background:var(--card);padding:8px 12px;border-radius:12px;box-shadow:var(--shadow);font-size:14px}

/* UMKM / seller cards */
.sellers{display:flex;gap:12px;overflow:auto;padding-bottom:4px}
.seller{min-width:200px;background:var(--card);padding:12px;border-radius:12px;box-shadow:var(--shadow);display:flex;gap:10px;align-items:center}
.seller .thumbnail{width:64px;height:64px;border-radius:10px;background:linear-gradient(135deg,#ffd9e8,#fff);display:flex;align-items:center;justify-content:center;font-weight:600}
.seller small{color:var(--muted)}

/* Products grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.card{background:var(--card);padding:12px;border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.thumb{height:120px;border-radius:10px;background:linear-gradient(135deg,#ffecec,#fff);display:flex;align-items:center;justify-content:center;font-weight:700}
.meta{display:flex;justify-content:space-between;align-items:center}
.name{font-weight:600}
.price{color:#ff5a99;font-weight:700}
.add{padding:8px;border-radius:10px;border:none;background:#ff5a99;color:#fff;font-weight:700}

/* Footer */
footer{margin-top:28px;padding:20px 0;color:var(--muted);font-size:14px}

/* Cart modal */
.cart-btn{position:fixed;right:18px;bottom:18px;background:var(--accent);color:#fff;padding:14px;border-radius:999px;box-shadow:var(--shadow);z-index:40;border:none}
.cart-side{position:fixed;right:0;top:0;height:100%;width:360px;background:linear-gradient(180deg,#fff,#fffaf6);box-shadow:-8px 0 30px rgba(0,0,0,0.08);padding:18px;transform:translateX(110%);transition:transform .28s;z-index:50}
.cart-side.open{transform:translateX(0%)}
.cart-item{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.qty{display:flex;gap:6px;align-items:center}
.qty button{padding:6px;border-radius:8px;border:1px solid #eee;background:#fff}

/* responsive */
@media (max-width:880px){
  .hero{grid-template-columns:1fr;}
  .promo{order:3}
  .cart-side{width:92vw}
}