*{box-sizing:border-box}body{margin:0;font:15px/1.4 system-ui,sans-serif;background:#f4f6fa;color:#1b2333}
header{background:#1f3f8f;color:#fff;padding:.6rem 1rem}h1{margin:0;font-size:1.25rem}
.banner{margin-top:.4rem;background:#ffd76a;color:#3a2a00;padding:.3rem .6rem;border-radius:6px;font-size:.85rem}
.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.5rem;padding:.75rem 1rem;background:#fff;border-bottom:1px solid #dde}
label{display:flex;flex-direction:column;font-size:.8rem;color:#445}label.chk{flex-direction:row;align-items:center;gap:.4rem}
input,select,button{font:inherit;padding:.45rem;border:1px solid #bcc;border-radius:6px}
button{background:#2a7a3a;color:#fff;border:0;cursor:pointer}button.secondary{background:#667}
.presets{display:flex;gap:.3rem;margin-top:.3rem}.presets button{padding:.3rem .5rem;font-size:.8rem;background:#1f3f8f}
main{display:grid;grid-template-columns:1fr 340px;gap:1rem;padding:1rem}
@media(max-width:760px){main{grid-template-columns:1fr}.order{position:sticky;bottom:0;max-height:45vh;overflow:auto}}
.items{display:grid;gap:.5rem}.card{background:#fff;border-radius:8px;padding:.6rem .8rem;display:flex;justify-content:space-between;gap:.5rem;align-items:center;box-shadow:0 1px 2px #0001}
.card.straw{border:2px solid #d22;background:#fff2f2}.tag{color:#d22;font-weight:700;font-size:.8rem}
.meta{font-size:.8rem;color:#556}.meta a{color:#1f3f8f}.name{font-weight:600}
.order{background:#fff;border-radius:8px;padding:.8rem;align-self:start;box-shadow:0 1px 3px #0002}.order h2{margin:.1rem 0 .5rem;font-size:1.05rem}
#olist{list-style:none;padding:0;margin:0}#olist li{display:flex;justify-content:space-between;align-items:center;gap:.3rem;padding:.25rem 0;border-bottom:1px solid #eee;font-size:.85rem}
.qty button{padding:.15rem .5rem;background:#1f3f8f}.qty span{display:inline-block;min-width:1.5rem;text-align:center}
#totals{margin:.6rem 0;font-size:.9rem}.bar{height:10px;background:#e3e6ee;border-radius:5px;overflow:hidden;margin:.3rem 0}.bar div{height:100%;background:#2a7a3a}
.over .bar div{background:#d22}.warn{color:#d22;font-weight:700}.empty{color:#778;font-style:italic}
.byo{background:#fff;border-radius:8px;padding:.6rem;margin-bottom:.6rem;box-shadow:0 1px 2px #0001}
#byoToggle{width:100%;background:#1f3f8f}#byoToggle.on{background:#b5651d}#byoBody{margin-top:.5rem;display:grid;gap:.4rem}
#byoList{list-style:none;padding:0;margin:0}#byoList li{display:flex;justify-content:space-between;padding:.2rem 0;border-bottom:1px solid #eee;font-size:.85rem}
.sz{display:flex;flex-direction:column;gap:.25rem}.sz button{padding:.3rem .45rem;font-size:.8rem;white-space:nowrap}
.calcrow{grid-column:1/-1;font-size:.85rem}.calcrow:empty{display:none}a.calc{color:#1f3f8f}.unv{color:#889;font-size:.75rem}
.linkonly{background:#fff;border-radius:8px;padding:1rem;box-shadow:0 1px 2px #0001}a.calc.big{display:inline-block;background:#1f3f8f;color:#fff;padding:.7rem 1rem;border-radius:8px;text-decoration:none;font-weight:600;margin:.3rem 0}