/* ===== production overrides: full-viewport centered app + in-site theme switcher ===== */
html{height:100%}
body{min-height:100%}
#root{min-height:100dvh}

/* the mockup's phone becomes a centered mobile-width column on desktop, full-bleed on phones */
.app{max-width:540px;margin:0 auto;height:100svh;box-shadow:0 0 90px rgba(0,0,0,.5)}
@media (max-width:540px){.app{box-shadow:none}}

/* real header — drop the iOS status-bar offset */
.appbar{padding-top:14px}

/* content top offsets reduced now that there's no phone status bar */
.menubar{padding-top:66px}
.abouthero{padding-top:62px}
.hero--deco{padding-top:68px}

/* persistent order CTA + clearance so content isn't hidden behind it */
.scroll{padding-bottom:96px}
.basket{bottom:18px}
.basket--cta{cursor:pointer}
.basket--cta .basket__total{display:flex;align-items:center}
.basket--cta .basket__total svg{width:18px;height:18px}

/* theme switcher (inside the nav overlay) — 3 directions × dark/light = 6 themes */
.themesw{margin-top:18px}
.themesw__lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}
.themesw__opts{display:flex;gap:8px}
.themebtn{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 8px;border-radius:13px;
  background:var(--surface);border:1px solid var(--border);color:var(--ink);transition:.15s}
.themebtn:hover{border-color:var(--accent)}
.themebtn.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.themebtn__dot{width:30px;height:30px;border-radius:9px}
.themebtn__txt{font-size:12px;font-weight:700}
.themebtn__dot[data-dir="noir"]{background:linear-gradient(135deg,#0d0d0d 40%,#c9a84c)}
.themebtn__dot[data-dir="panda"]{background:linear-gradient(135deg,#15c2cc 0%,#c026d3 60%,#ff3b30)}
.themebtn__dot[data-dir="deco"]{background:linear-gradient(135deg,#efe9dd 45%,#6e1f3a 46%,#1b2238)}