:root{--gold:#b8893b;--dark:#1c1c1c;--cream:#faf6ee;--ink:#222}
*{box-sizing:border-box}body{margin:0;font:16px/1.4 system-ui,sans-serif;background:var(--cream);color:var(--ink);padding-bottom:5rem}
header{background:var(--dark);color:#fff;padding:1.2rem 1rem;padding-top:calc(1.2rem + env(safe-area-inset-top))}
h1{margin:0;font-size:1.5rem;color:var(--gold)}header p{margin:.3rem 0 0}
#demo{background:var(--gold);color:#000;padding:.4rem 1rem;font-size:.85rem;text-align:center}
#sticky{position:sticky;top:0;background:var(--cream);padding:.6rem 1rem;z-index:5;border-bottom:1px solid #ddd}
#search{width:100%;padding:.7rem;font-size:1rem;border:1px solid #bbb;border-radius:8px}
#chips{display:flex;gap:.4rem;overflow-x:auto;margin-top:.5rem;padding-bottom:.2rem}
.chip{flex:none;padding:.5rem .9rem;border:1px solid var(--gold);border-radius:99px;background:#fff;font-size:.9rem;min-height:44px}
.chip.on{background:var(--gold);color:#fff}
main{padding:1rem;display:grid;gap:.7rem;max-width:760px;margin:auto}
h2{margin:.8rem 0 0;font-size:1.1rem}
.card{background:#fff;border-radius:10px;padding:.8rem;display:flex;gap:.6rem;justify-content:space-between;align-items:center;box-shadow:0 1px 3px #0002}
.card.out{opacity:.55}.price{font-weight:600}.sub{font-size:.85rem;color:#666}
details{font-size:.85rem;margin-top:.3rem}
button{font:inherit;cursor:pointer}
.add,.step button{min-width:44px;min-height:44px;border:0;border-radius:8px;background:var(--dark);color:#fff;padding:0 .8rem}
.step{display:flex;align-items:center;gap:.4rem}
#bar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;width:100%;border:0;background:var(--gold);color:#fff;padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom));font-weight:600;z-index:9}
dialog{width:100%;max-width:520px;margin:auto auto 0;border:0;border-radius:14px 14px 0 0;padding:1rem;max-height:90vh}
dialog::backdrop{background:#0008}
.line{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.4rem 0;border-bottom:1px solid #eee}
textarea,input.f{width:100%;padding:.6rem;margin:.3rem 0;border:1px solid #bbb;border-radius:8px;font:inherit}
.wa{width:100%;min-height:48px;border:0;border-radius:10px;background:#1f9d55;color:#fff;font-weight:600;margin-top:.5rem}
.wa:disabled{background:#999}.warn{color:#a33;font-size:.9rem}.link{background:none;border:0;color:#666;text-decoration:underline}
@media (prefers-reduced-motion:no-preference){.chip,.add{transition:background .15s}}
[hidden]{display:none!important}