body{font-family:sans-serif;margin:0;background:#fff;color:#222}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid #eee}
.logo{font-weight:800;font-size:22px}
.logo span{color:#d8082e}
.container{max-width:1000px;margin:auto;padding:20px}
.card{border:1px solid #eee;padding:20px;border-radius:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.product{border:1px solid #eee;border-radius:10px;padding:10px;text-align:center}
.btn{padding:10px 14px;border:none;border-radius:10px;cursor:pointer;font-weight:600}
.btn.primary{background:#d8082e;color:#fff}
.btn.ghost{border:1px solid #d8082e;color:#d8082e;background:#fff}
.fab{position:fixed;bottom:20px;right:20px;background:#d8082e;color:#fff;border:none;border-radius:50%;padding:14px 18px;font-weight:bold;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,0.2)}
.fab.pay{right:90px;background:#222}
.popup{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center}
.popup.hidden{display:none}
.popup-content{background:#fff;border-radius:14px;width:90%;max-width:400px;box-shadow:0 5px 20px rgba(0,0,0,0.2);display:flex;flex-direction:column}
.popup-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #eee}
.popup-body{padding:10px 16px;flex:1;overflow:auto;max-height:50vh}
.popup-footer{display:flex;justify-content:space-between;padding:14px 16px;border-top:1px solid #eee}
.icon-btn{background:none;border:none;font-size:18px;cursor:pointer}
.itemRow{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;border-bottom:1px solid #f1f1f1;padding-bottom:4px}
.itemRow input{margin-right:8px}