:root { color-scheme: light; --brand:#f28c28; --brand-dark:#c96509; --paper:#fff; --ink:#171717; --muted:#6b6b6b; --line:#e8e8e8; }
* { box-sizing:border-box; margin:0; padding:0; }
html { background:#f5f5f5; }
body { min-height:100dvh; padding-bottom:110px; background:#f5f5f5; color:var(--ink); font-family:Arial,sans-serif; }
button, input { font:inherit; touch-action:manipulation; }
button { cursor:pointer; }
.header { position:sticky; top:0; z-index:1000; display:flex; align-items:center; justify-content:center; min-height:70px; padding-top:env(safe-area-inset-top); background:var(--brand); color:#fff; }
.header-title { font-size:22px; font-weight:700; }
.menu-btn { position:absolute; left:14px; top:50%; transform:translateY(-50%); border:0; background:none; color:#fff; font-size:28px; }
#sidebar { position:fixed; inset:0 auto 0 -300px; z-index:2000; width:300px; overflow:auto; padding:20px; border-right:1px solid #ddd; background:#fff; transition:left .18s ease; -webkit-overflow-scrolling:touch; }
#sidebar.open { left:0; }
.sidebar-group-title { margin:20px 0 12px; font-size:18px; font-weight:700; }
.sidebar-tab { width:100%; margin-bottom:10px; padding:16px; border:0; border-radius:10px; background:#f0f0f0; color:#000; text-align:left; font-size:18px; font-weight:700; }
.sidebar-tab.active { background:var(--brand); color:#fff; }
#overlay { position:fixed; inset:0; z-index:1500; border:0; background:rgb(0 0 0 / 28%); opacity:0; pointer-events:none; transition:opacity .2s ease; }
#overlay.show { opacity:1; pointer-events:auto; }
#current-city { padding:16px 20px; border-bottom:1px solid #e5e5e5; background:#fff; color:var(--brand-dark); text-align:center; font-size:28px; }
.status { padding:0 20px; color:var(--muted); text-align:center; }
#products { padding:14px; }
.card { content-visibility:auto; contain-intrinsic-size:379px 450px; overflow:hidden; margin-bottom:16px; border:1px solid var(--line); border-radius:16px; background:var(--paper); box-shadow:0 2px 8px rgb(0 0 0 / 3%); }
.card img { display:block; width:100%; height:240px; padding:10px; background:#fafafa; object-fit:contain; aspect-ratio:379 / 278; }
.card-content { padding:14px; }
.code { font-size:20px; font-weight:700; }
.finish { margin-top:4px; color:var(--muted); }
.qty-wrapper, .quick-qty { display:flex; align-items:center; gap:10px; margin-top:12px; }
.qty-input { width:100%; min-width:0; padding:13px 8px; border:1px solid #bbb; border-radius:10px; text-align:center; font-size:18px; }
.qty-btn { flex:0 0 46px; height:46px; border:0; border-radius:12px; background:var(--brand); color:#fff; font-size:28px; font-weight:700; }
.quick-btn { flex:1; padding:10px; border:0; border-radius:10px; background:#fff3e6; color:var(--brand-dark); font-size:16px; font-weight:700; }
.qty-btn:active, .quick-btn:active { transform:scale(.94); }
.bottom-bar { position:fixed; inset:auto 0 0; z-index:1200; padding:14px 14px calc(14px + env(safe-area-inset-bottom)); background:#fff; box-shadow:0 -2px 10px rgb(0 0 0 / 10%); }
#bottom-total { display:none; margin-bottom:12px; color:var(--brand-dark); text-align:center; font-size:18px; font-weight:700; }
#bottom-total.show { display:block; }
.submit-btn { width:100%; padding:16px; border:0; border-radius:12px; background:var(--brand); color:#fff; font-size:18px; font-weight:700; }
.submit-btn:disabled { cursor:wait; opacity:.65; }
#toast { position:fixed; left:50%; bottom:100px; z-index:3000; max-width:calc(100vw - 32px); padding:14px 22px; border-radius:12px; background:#333; color:#fff; opacity:0; pointer-events:none; transform:translateX(-50%) translateY(8px); transition:.2s; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
#success-modal { position:fixed; inset:0; z-index:4000; display:none; align-items:center; justify-content:center; padding:20px; background:rgb(0 0 0 / 50%); }
#success-modal.show { display:flex; }
.success-box { width:min(320px,100%); padding:30px; border-radius:18px; background:#fff; text-align:center; }
.success-title { margin-bottom:24px; font-size:24px; font-weight:700; }
.success-box button { padding:14px 30px; border:0; border-radius:12px; background:var(--brand); color:#fff; font-size:18px; font-weight:700; }
button:focus-visible, input:focus-visible { outline:3px solid #174ea6; outline-offset:2px; }
@media (min-width:768px) { #products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; } .card { margin:0; } }
@media (min-width:1200px) {
  body { padding:0 0 120px 320px; }
  .menu-btn, #overlay, #current-city { display:none; }
  #sidebar { left:0; width:320px; }
  .header { position:fixed; left:320px; right:0; }
  #products { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding:90px 20px 20px; }
  .card img { height:220px; }
  .bottom-bar { left:320px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }