/* ================================================================
   Makmai — Mobile Responsive Overrides
   Breakpoints:
     768px  tablets + phones
     600px  modal bottom-sheet trigger
     480px  phones (most Android: 360–430px, iPhone 14/15: 390–430px)
     430px  iPhone Plus / Pro Max
     375px  iPhone SE / older Android
   ================================================================ */

/* ── Header ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mm-header-inner {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .mm-nav,
  .mm-search-btn,
  .mm-lang-btn { display: none !important; }

  .mm-logo { width: 42px !important; height: 42px !important; }

  .mm-branch-pill {
    padding: 6px 10px !important;
    font-size: 12px !important;
    margin-left: 0 !important;
  }
  .mm-branch-name {
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
  .mm-user-name { display: none !important; }
  .mm-user-pill { padding: 5px 8px 5px 6px !important; }
}

/* ── Main container ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mm-main { padding: 0 14px !important; }
}

/* ── Hero ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mm-hero {
    grid-template-columns: 1fr !important;
    padding: 28px 20px !important;
    margin: 12px 0 !important;
    border-radius: 20px !important;
    gap: 20px !important;
  }
  .mm-hero-img {
    height: 200px !important;
    order: -1;
  }
  .mm-hero-badges { flex-wrap: wrap !important; gap: 14px !important; }
}
@media (max-width: 430px) {
  .mm-hero { padding: 20px 16px !important; }
  .mm-hero-img { height: 170px !important; }
}

/* ── Section head (title + "see all" link) ──────────────────────── */
@media (max-width: 768px) {
  .mm-section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-bottom: 14px !important;
  }
}

/* ── Category chips — horizontal scroll on mobile ───────────────── */
@media (max-width: 768px) {
  .mm-chips-wrap {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 4px !important;
    gap: 8px !important;
  }
  .mm-chips-wrap::-webkit-scrollbar { display: none; }
  .mm-chips-wrap > button { flex-shrink: 0 !important; }
}

/* ── Product grid — 2 columns on phone ─────────────────────────── */
@media (max-width: 768px) {
  .mm-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}
@media (max-width: 360px) {
  .mm-product-grid { grid-template-columns: 1fr !important; }
}

/* ── Why Makmai strip ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .mm-why-strip {
    grid-template-columns: 1fr 1fr !important;
    padding: 28px 20px !important;
    gap: 18px !important;
    margin: 40px 0 8px !important;
    border-radius: 18px !important;
  }
}
@media (max-width: 430px) {
  .mm-why-strip { grid-template-columns: 1fr !important; }
}

/* ── Footer ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .mm-footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 20px !important;
    padding: 0 20px !important;
  }
  .mm-footer-brand { grid-column: 1 / -1 !important; }
}
@media (max-width: 480px) {
  .mm-footer-grid { grid-template-columns: 1fr !important; }
  .mm-footer-bottom {
    flex-direction: column !important;
    gap: 6px !important;
    align-items: flex-start !important;
    padding: 16px 20px 0 !important;
  }
}

/* ── Cart Drawer ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .mm-cart-drawer { width: 100vw !important; }
}

/* ── Checkout Sheet — bottom sheet on mobile ────────────────────── */
@media (max-width: 600px) {
  .mm-checkout-sheet {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 94vh !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    border-radius: 22px 22px 0 0 !important;
    animation: slideUpSheet 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
}

/* ── Modals (Branch, Auth) — full-width bottom sheet ───────────── */
@media (max-width: 600px) {
  .mm-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    top: auto !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    border-radius: 22px 22px 0 0 !important;
    animation: slideUpSheet 260ms cubic-bezier(0.22, 1, 0.36, 1) !important;
  }
}

/* Confirmation keeps centered but fits screen */
@media (max-width: 480px) {
  .mm-confirm-modal { width: 94vw !important; }
}

/* ── Slide-up animation for bottom sheets ───────────────────────── */
@keyframes slideUpSheet {
  from { transform: translateX(-50%) translateY(40px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0);    opacity: 1; }
}

/* ── Sections spacing ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .mm-menu-section { margin-top: 32px !important; }
  .mm-featured-section { margin: 8px 0 4px !important; }
}

/* ── Bottom Navigation Bar ──────────────────────────────────────── */
@media (max-width: 768px) {
  .mm-bottom-nav {
    display: block !important;
  }

  /* Push footer and main content up so bottom nav doesn't overlap */
  .mm-main {
    padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
  }

  footer {
    margin-bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  }
}