/* top bar */
.top{flex:none; z-index:20; display:flex; align-items:center; gap:8px; padding:10px 4px; background:var(--frost)}
.shopname{flex:1; font-weight:800; font-size:22px; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pill{display:flex; align-items:center; gap:4px; background:var(--card); border:3px solid var(--line); border-radius:999px; padding:2px 12px; font-weight:800; font-size:20px}
.pill.bank{border-color:var(--lemon)}
.iconbtn{border:none; background:var(--card); border-radius:50%; width:44px; height:44px; font-size:22px; border:3px solid var(--line)}
.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.25)}}

/* bottom nav */
.nav{flex:none; z-index:30; background:var(--card); border-top:3px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); display:flex; justify-content:center; gap:2px}
.nav button{flex:1; max-width:120px; border:none; background:none; border-radius:16px; padding:4px 2px; display:flex; flex-direction:column; align-items:center; font-size:13px; font-weight:700; color:var(--ink2)}
.nav button span{font-size:26px; line-height:1.1}
.nav button.on{background:var(--frost2); color:var(--ink)}