*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#f7f5ef;color:#20241f}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:14px;padding:12px 16px;background:#36672f;color:white;font-weight:700}.center{min-height:100vh;display:grid;place-items:center}.card{background:white;border-radius:24px;padding:24px;box-shadow:0 12px 40px #0001}.pin{width:min(380px,92vw);text-align:center}.card input,.pin input{width:100%;padding:14px;border:1px solid #ddd;border-radius:12px;margin:14px 0}header{position:-webkit-sticky;position:sticky;top:0;z-index:3;background:white;padding:16px 20px;display:flex;justify-content:space-between;box-shadow:0 2px 12px #0001}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:12px;gap:12px;padding:16px;max-width:900px;margin:auto}.product{background:white;border-radius:18px;padding:12px;box-shadow:0 4px 18px #0000000b}.photo{height:120px;border-radius:14px;background:#eee;display:grid;place-items:center;font-size:48px;overflow:hidden;margin-bottom:10px}.photo img{width:100%;height:100%;object-fit:cover}.top,.variant{display:flex;width:100%;justify-content:space-between;margin-top:8px;background:#f0f3ec;color:#23431f}.cart{position:-webkit-sticky;position:sticky;bottom:0;background:white;padding:16px;border-radius:20px 20px 0 0;box-shadow:0 -5px 25px #0002;max-width:900px;margin:auto}.line{display:flex;justify-content:space-between;border-bottom:1px solid #eee;padding:9px 0}.line small{display:block;color:#777}.total{display:flex;justify-content:space-between;font-size:20px;padding:14px 0}.cart>button{width:100%}.modal{position:fixed;inset:0;background:#0008;z-index:10;display:grid;place-items:end center;padding:12px}.modal .card{width:min(600px,100%);max-height:90vh;overflow:auto}.ghost{background:#eee;color:#333;margin-top:8px;width:100%}.paytabs{display:flex;gap:8px}.paytabs button{flex:1 1;background:#eee;color:#333}.paytabs .active{background:#36672f;color:white}.qris{padding:30px;text-align:center;background:#f1f1f1;border-radius:16px}.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:#20241f;color:white;padding:14px 18px;border-radius:14px;z-index:20;max-width:90vw}@media(min-width:800px){.grid{grid-template-columns:repeat(3,1fr)}.cart{position:fixed;right:18px;bottom:18px;width:360px;z-index:5;border-radius:20px}.grid{max-width:calc(100% - 400px);margin-left:0}}