:root {
  --brand-orange: #ee4d2d;
  --brand-orange-container: #ff623f;
}

/* Mobile preview helpers */
body[data-m="1"] {
  max-width: 430px !important;
  margin: 0 auto !important;
  min-height: 100vh;
  background: #f9f9f9;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
  position: relative;
}

/* Keep bottom bars inside phone frame on desktop preview */
body[data-m="1"] nav.fixed.bottom-0,
body[data-m="1"] .fixed.bottom-0 {
  max-width: 430px;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: 100%;
}

/* Force show mobile bottom nav even on desktop (Stitch had md:hidden) */
body[data-m="1"] nav.fixed.bottom-0.md\\:hidden,
body[data-m="1"] nav.fixed.bottom-0 {
  display: flex !important;
}

/* Unify active tab / accents to brand orange on mobile */
body[data-m="1"] .bg-primary,
body[data-m="1"] .text-primary,
body[data-m="1"] .border-primary {
  /* Tailwind utilities already use config; this backs inline leftovers */
}
body[data-m="1"] .bg-primary-container {
  background-color: var(--brand-orange-container) !important;
}
body[data-m="1"] .text-price-red {
  color: var(--brand-orange) !important;
}