/* ============================================================
   Catálogo MOBILE (app-shell) — visual "1B" do mockup Claude Design.
   Ativo só em telas ≤760px; acima disso o desktop (Marketplace) assume.
   A lógica vive em mobile.js; o desktop (app.js) NÃO roda no mobile.
   ============================================================ */
:root {
  --m-navy: #0E1C2B;
  --m-navy-soft: #16222f;
  --m-orange: #FF7A2E;
  --m-orange-press: #f06a15;
  --m-bg: #f4f5f7;
  --m-muted: #8a95a3;
  --m-muted2: #6b7787;
  --m-line: #e7eaef;
  --m-wa: #25D366;
}

/* Alterna desktop × mobile por breakpoint. */
#mobile-root { display: none; }
@media (max-width: 760px) {
  #mobile-root { display: block; }
  #desktop-app { display: none !important; }
  body { background: var(--m-bg); }
}

/* Fonte + reset local do shell */
#mobile-root, #mobile-root * { box-sizing: border-box; font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; }
#mobile-root { color: var(--m-navy-soft); }
#mobile-root a { color: var(--m-orange); text-decoration: none; }

/* esconde scrollbar nas faixas roláveis */
#mobile-root .scroll::-webkit-scrollbar { width: 0; height: 0; }
#mobile-root .scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* animações do mockup */
@keyframes mSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes mFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* stepper de número — remove setas nativas */
#mobile-root input[type=number]::-webkit-inner-spin-button,
#mobile-root input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#mobile-root input[type=number] { -moz-appearance: textfield; }

/* app ocupa a viewport inteira em coluna (header fixo + conteúdo rolável + nav).
   ALTURA FIXA (100dvh) + min-height:0 nos filhos flex → só o .m-body rola;
   header e bottom-nav ficam fixos. Sem isso a página inteira rolava e o header sumia. */
.m-app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--m-bg); overflow: hidden; }
.m-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.m-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* header navy comum */
.m-head { background: var(--m-navy); padding: env(safe-area-inset-top, 0) 0 0; flex: none; }
.m-head-pad { padding: 16px 20px 14px; }
.m-head-tall { padding: 20px 22px 20px; }

/* toast */
.m-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: var(--m-navy); color: #fff; font-size: 13px; font-weight: 600;
  padding: 11px 18px; border-radius: 12px; box-shadow: 0 10px 30px -8px rgba(14,28,43,.6);
  z-index: 200; max-width: 88%; text-align: center; animation: mFadeIn .18s ease;
}
.m-toast.hidden { display: none; }
.m-toast.erro { background: #a02424; }

.m-press:active { transform: scale(.96); }