:root{font-family:Arial,"Segoe UI",sans-serif;color:#10201d;background:#eaf1ec}
*{box-sizing:border-box}
body{margin:0}
.app-shell{max-width:660px;min-height:100vh;margin:auto;background:#fff;box-shadow:0 0 40px #11332220;padding-bottom:89px}
.top{padding:18px 16px 12px;background:white;position:sticky;top:0;z-index:10}
.toprow{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.logo{font-family:"Montserrat",sans-serif !important;font-weight:500;font-size:22px;letter-spacing:2px;color:#000;white-space:nowrap}

.logo .brand-kedai{color:#000}.logo .brand-anda{color:#f17820}.logo .brand-kedai,.logo .brand-anda{font-family:"Montserrat",sans-serif !important;font-weight:500}.topactions{display:flex;gap:15px}
.icon-btn{width:43px;height:43px;background:white;border:0;position:relative;padding:5px;cursor:pointer}
.icon-btn svg{width:30px;height:30px;fill:none;stroke:#05131a;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.count{position:absolute;top:-5px;right:-2px;border-radius:20px;background:#f22;color:#fff;padding:3px 7px;font-size:12px}
.search{height:57px;display:flex;align-items:center;border:1px solid #dee7e6;border-radius:15px;overflow:hidden;box-shadow:0 2px 8px #0000000a}
.search span{font-size:37px;padding:0 12px;line-height:1;transform:rotate(-20deg)}
.search input{border:0;outline:none;flex:1;min-width:0;font-size:16px}
.search button{height:100%;width:68px;background:#0abb3f;border:0;color:white;font-size:38px;cursor:pointer}
main{padding:0 12px}
.hero{position:relative;overflow:hidden;border-radius:10px;margin:0 0 10px}
.hero>img{display:block;width:100%;aspect-ratio:616/244;object-fit:cover}
.hero-link{position:absolute;inset:0}
.dots{position:absolute;bottom:10px;display:flex;gap:9px;left:50%;transform:translateX(-50%)}
.dots i{width:9px;height:9px;border-radius:50%;background:#b4c5c0}
.dots .current{background:white}
.card{border-radius:14px;background:#fff;box-shadow:0 3px 15px #122a1d12}
.package-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.package{border-radius:12px;min-height:190px;padding:17px 12px;display:flex;position:relative;overflow:hidden}
.mint{background:linear-gradient(110deg,#e5fff3,#d5f4e8)}
.cream{background:linear-gradient(110deg,#fff4d4,#fff7e7)}
.package-copy{z-index:1}
.package h2{font-size:24px;line-height:.98;margin:0 0 13px;letter-spacing:-.8px}
.mint h2{color:#006b3c}
.package h2 small{font-size:19px}
.package p{font-size:12px;margin:5px 0}
.package button{background:#008c4d;color:white;border:0;border-radius:9px;padding:11px 14px;margin-top:8px;cursor:pointer;font-weight:700;font-size:12px}
.package-art{position:absolute;right:4px;top:60px;font-size:53px;opacity:.85}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-heading h2{font-size:23px;margin:0;border-left:6px solid #008e52;padding-left:11px;letter-spacing:-.5px}
.section-heading button{background:none;border:0;color:#007c45;font-size:12px;font-weight:700;cursor:pointer}
.content-section{margin-bottom:23px}
.shops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.shop{border-radius:10px;overflow:hidden;box-shadow:0 2px 10px #0001;border:1px solid #f1f1f1}
.shop img{width:100%;aspect-ratio:1.65;object-fit:cover}
.shop-copy{padding:8px}
.shop strong{font-size:12px;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.shop small{font-size:10px;color:#45514d;display:block;white-space:nowrap;overflow:hidden}
.shop button{display:block;margin:9px auto 0;background:#009047;color:#fff;border:0;border-radius:7px;padding:9px 5px;width:100%;font-weight:bold;font-size:11px;cursor:pointer}
.products{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.product{display:flex;position:relative;align-items:stretch;border:1px solid #ededed;border-radius:11px;overflow:hidden;min-height:113px;box-shadow:0 1px 8px #00000012}
.product .product-photo{width:42%;flex:none;object-fit:cover;cursor:pointer}
.product-info{padding:10px 8px 8px;min-width:0;flex:1}
.product-name{padding:0;border:0;background:none;cursor:pointer;text-align:left;font-weight:bold;font-size:12px;line-height:1.2;display:block}
.price{display:block;color:#ec1313;font-weight:bold;font-size:15px;margin:8px 0 6px}
.location{display:block;color:#65716c;font-size:10px}
.rating{font-size:10px;margin-top:6px}
.rating b{color:orange}
.add-quick{position:absolute;right:6px;bottom:6px;background:#008d49;border:0;color:white;width:33px;height:33px;border-radius:8px;font-size:21px;cursor:pointer}
.bottomnav{position:fixed;z-index:15;bottom:0;width:min(100%,660px);height:77px;background:white;box-shadow:0 -3px 15px #0001;border-top:1px solid #e7ece9;display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom)}
.bottomnav button{border:0;background:white;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;gap:3px;cursor:pointer;color:#243840}
.bottomnav button span{font-size:30px}
.bottomnav .active{color:#00844b;background:#e3f3ea;border-radius:12px;font-weight:700}
dialog{position:fixed;max-width:490px;width:calc(100% - 24px);max-height:88dvh;border:0;border-radius:20px;padding:0;box-shadow:0 14px 70px #0006;overflow:auto}
dialog::backdrop{background:#00150ba8}
.dialog-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#fff;border-bottom:1px solid #edf0ed}
.dialog-head h2{margin:0;font-size:19px}
.dialog-head button{border:0;background:#eaf1ed;width:32px;height:32px;border-radius:50%;font-size:18px;cursor:pointer}
#modalBody{padding:16px}
.detail-photo{width:100%;max-height:230px;object-fit:cover;border-radius:12px}
.detail-price{color:#e11;font-size:24px;font-weight:800}
.detail-desc{line-height:1.5;color:#41514a}
.qty-row,.total-row,.cart-row{display:flex;align-items:center;justify-content:space-between;margin:16px 0}
.qty-controls{display:flex;gap:12px;align-items:center}
.qty-controls button{width:35px;height:35px;border:1px solid #ddd;background:white;border-radius:8px;font-size:20px;cursor:pointer}
.primary{border:0;border-radius:10px;background:#008d4b;color:white;padding:14px;font-size:15px;font-weight:700;width:100%;cursor:pointer}
.secondary{border:1px solid #008d4b;color:#008d4b;border-radius:10px;padding:12px;background:white;width:100%;cursor:pointer;margin-top:10px}
.muted{font-size:13px;color:#7c8982}
.empty{padding:20px;text-align:center;color:#708079}
.cart-row{gap:12px;border-bottom:1px solid #eee;padding-bottom:12px}
.cart-row img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.cart-row div{flex:1}
.cart-row button{border:0;background:#f3e8e8;color:#b11;border-radius:7px;padding:9px;cursor:pointer}
@media (max-width:430px){
.top{padding:13px 12px 10px}
.package h2{font-size:19px}
.package h2 small{font-size:16px}
.package p{font-size:10px}
.package-art{font-size:40px;top:70px}
.package{min-height:180px;padding:12px 8px}
.shops{gap:5px}
.shop-copy{padding:5px}
.shop button{font-size:9px}
.section-heading h2{font-size:20px}
.product{min-height:110px}
.product-info{padding:7px 5px}
.product-name{font-size:11px}
.price{font-size:13px}
.add-quick{width:28px;height:28px;font-size:18px}}
:root{font-family:Inter,"Segoe UI",Arial,sans-serif;background:#e6ece9;color:#172922}
.app-shell{max-width:660px;background:#fff;box-shadow:0 18px 70px rgba(0,35,20,.14)}
.top{box-shadow:0 3px 14px rgba(12,52,34,.055);padding:16px 19px 13px}


.topactions{gap:9px}
.icon-btn{border-radius:12px}
.icon-btn:hover,.icon-btn:focus-visible{background:#edf7f1}
.icon-btn svg{stroke-width:1.85}
.search{border-color:#d9e5df;border-radius:13px;height:52px;box-shadow:0 4px 12px #1338200b}
.search .search-symbol{display:grid;place-items:center;padding:0 12px;transform:none}
.ui-icon{display:block;width:23px;height:23px;flex-shrink:0}
.search .search-symbol .ui-icon{width:22px;height:22px}
.search button{display:grid;place-items:center;background:#09864d;font-size:inherit;width:60px}
.search button .ui-icon{width:24px;height:24px}
main{padding:12px 15px 2px}
.hero{min-height:230px;background:radial-gradient(circle at 90% 17%,#2da972 0%,transparent 38%),linear-gradient(115deg,#06462f 0%,#087b4a 100%);display:flex;align-items:center;color:white;padding:28px 23px;border-radius:17px;margin-bottom:18px}
.hero-copy{position:relative;z-index:2;max-width:66%}
.hero-eyebrow{letter-spacing:1.8px;font-size:9px;font-weight:800;display:flex;gap:8px;align-items:center;color:#c5f3dc}
.hero-eyebrow-dot{width:7px;height:7px;border-radius:50%;background:#9fe3b2}
.hero h1{font-size:29px;line-height:1.12;letter-spacing:-1px;margin:13px 0 11px;font-weight:850}
.hero h1 em{font-style:normal;color:#c6f4d6}
.hero p{font-size:12px;line-height:1.55;max-width:280px;color:#e2f6e9;margin:0 0 17px}
.hero-cta{border:0;border-radius:9px;padding:12px 15px;background:#ffdb6e;color:#233016;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 4px 0 #c49e33}
.hero-cta span{padding-left:7px}
.hero-visual{position:absolute;right:5%;top:16%;height:70%;width:30%;display:grid;place-items:center}
.hero-bag{background:#ffffff18;backdrop-filter:blur(6px);border:1px solid #ffffff35;box-shadow:0 15px 30px #00392466;width:130px;height:145px;border-radius:25px;display:grid;place-items:center;transform:rotate(8deg)}
.hero-bag svg{width:80%;height:85%;filter:drop-shadow(0 8px 7px #0003)}
.orbit{position:absolute;border:1px solid #ffffff24;border-radius:100%;width:180px;height:180px}
.orbit-two{width:220px;height:220px}
.hero-spark{position:absolute;top:10px;right:8px;color:#ffd768;font-size:29px}
.dots{bottom:10px}
.dots i{width:6px;height:6px}
.dots .current{width:18px;border-radius:6px;background:#f4d264}
.package-grid{gap:12px}
.package{min-height:183px;border-radius:14px;padding:18px 14px;box-shadow:0 4px 18px #1c51320c}
.mint{background:linear-gradient(125deg,#e7f9ef,#d3f2e2)}
.cream{background:linear-gradient(120deg,#fff4db,#fff3d5)}
.package h2{font-size:24px;line-height:1.06}
.package p{font-size:11px;color:#395146}
.package button{background:#087d4a;letter-spacing:.1px}
.package-art{right:3px;top:48px;opacity:.8;width:80px}
.package-art svg{width:100%}
.content-section{margin-top:25px;margin-bottom:27px}
.section-heading h2{font-size:22px;font-weight:800;border-left-width:4px;border-radius:2px}
.section-heading button{color:#087d4a;font-size:11px}
.shops{gap:9px}
.shop{border:1px solid #e8eee9;border-radius:12px;box-shadow:0 5px 15px #172e1a0d}
.shop img{aspect-ratio:1.3}
.shop-copy{padding:9px 7px}
.shop strong{font-size:11px}
.shop small{font-size:10px}
.shop button{border-radius:7px;background:#0b8050}
.products{gap:11px}
.product{box-shadow:0 5px 16px #082d1b0d;border-color:#eaf0eb;min-height:125px;border-radius:13px}
.product-name{font-size:12px}
.price{font-size:16px}
.location{display:flex;align-items:center;gap:3px}
.location .ui-icon{width:11px;height:11px}
.add-quick{display:grid;place-items:center;background:#078451;border-radius:9px}
.add-quick .ui-icon{width:20px;height:20px}
.bottomnav{height:80px;border-top:1px solid #e6eee8;box-shadow:0 -8px 24px #12392312;padding:7px 8px max(7px,env(safe-area-inset-bottom));gap:4px}
.bottomnav button{gap:5px;color:#62716b;font-size:11px;font-weight:600;border-radius:13px;transition:background .12s,color .12s}
.bottomnav .nav-symbol{display:grid;place-items:center;height:27px}
.bottomnav .nav-symbol .ui-icon{width:24px;height:24px;stroke-width:1.8}
.bottomnav .active{color:#067343;background:#e8f6ee;font-weight:800}
.bottomnav button:hover{background:#f0f8f3}
dialog{border:1px solid #dae8df}
@media (max-width:430px){.top{padding:12px 13px 10px}

main{padding:10px 10px 0}
.hero{padding:20px 17px;min-height:206px}
.hero h1{font-size:24px}
.hero p{font-size:11px}
.hero-bag{width:96px;height:110px}
.package{padding:14px 10px}
.package-art{width:61px;right:0;top:60px}
.package h2{font-size:20px}
.package p{font-size:10px}
.shop-copy{padding:7px 4px}
.shop button{font-size:9px}
.bottomnav{height:75px}
.section-heading h2{font-size:19px}}
:root,html,body,.app-shell{font-family:"Poppins",sans-serif !important;}
*,*::before,*::after{box-sizing:border-box;font-family:inherit !important;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{font-size:13px;line-height:1.45;}
button,input,textarea,select,option,dialog{font-family:"Poppins",sans-serif !important;}
.app-shell{width:100%;max-width:460px;min-height:100dvh;margin:0 auto;overflow-x:hidden;padding-bottom:90px;}
.top{padding:13px 13px 10px;}

.topactions{gap:3px}
.icon-btn{width:38px;height:38px}
.icon-btn svg{width:24px;height:24px}
.search{height:46px}
.search input{font-size:12px}
.search button{width:49px}
main{padding:9px 10px 4px}
.hero{min-height:177px;padding:18px 15px;border-radius:11px;margin-bottom:12px}
.hero h1{font-size:22px;letter-spacing:-.6px}
.hero p{font-size:10px}
.hero-bag{width:77px;height:93px}
.package{min-height:158px;padding:12px 9px}
.package-grid{gap:7px}
.package h2{font-size:17px;letter-spacing:-.4px}
.package h2 small{font-size:13px}
.package p{font-size:9px}
.package button{font-size:10px;padding:8px}
.package-art{width:48px;top:68px;right:0}
.section-heading h2{font-size:18px}
.section-heading button{font-size:10px}
.content-section{margin-top:18px;margin-bottom:21px}
.shops{gap:6px}
.shop-copy{padding:6px 4px}
.shop strong{font-size:9px}
.shop small{font-size:8px}
.shop button{font-size:9px;padding:7px 2px}
.products{gap:6px}
.product{min-height:97px}
.product-name{font-size:10px}
.price{font-size:13px}
.location,.rating{font-size:9px}
.bottomnav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:460px;height:75px;padding:6px 7px max(6px,env(safe-area-inset-bottom));gap:0;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;}
.bottomnav button{min-width:0;width:100%;overflow:hidden;white-space:nowrap;font-size:10px !important;font-weight:500;line-height:1.2;gap:4px;padding:6px 0;letter-spacing:-.15px;}
.bottomnav button>span:last-child{font-size:10px !important;white-space:nowrap;letter-spacing:-.2px;}
.bottomnav .nav-symbol{height:24px;line-height:1}
.bottomnav .nav-symbol .ui-icon{height:22px;width:22px;stroke-width:1.8;}
.bottomnav .active{font-weight:600;background:#e2f2e9;border-radius:11px;}
@media (max-width:380px){.bottomnav button,.bottomnav button>span:last-child{font-size:9px !important}
.bottomnav .nav-symbol .ui-icon{width:20px;height:20px}
.shop button{font-size:8px}
.hero h1{font-size:19px}}
@media (min-width:461px){body{background:#e9f0ed}
.app-shell{box-shadow:0 10px 55px #15442b20}}