/* ═══════════════════════════════════════════════════════════════════
   MMART — COMPREHENSIVE MOBILE RESPONSIVE CSS
   Pure CSS overrides · zero functionality changes · desktop untouched
   Targets: 320px · 360px · 375px · 390px · 414px · 430px · 480px
            768px · 820px · 1024px (tablet)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. GLOBAL OVERFLOW — only overflow-x is applied unconditionally
        (horizontal scroll is broken at every viewport; max-width is NOT
        set globally so fixed-width desktop containers are unaffected) ── */
html, body {
  overflow-x: hidden;
}

/* All other base rules are scoped to ≤ 1024px only */
@media (max-width: 1024px) {
  *, *::before, *::after {
    box-sizing: border-box;
  }
  img, video, svg, canvas {
    max-width: 100%;
    height: auto;
  }
}

/* ── 2. GLOBAL MOBILE BASE (≤ 768px) ────────────────────────────── */
@media (max-width: 768px) {

  /* Prevent any element from causing horizontal scroll */
  [class*="min-w-"], [class*="w-["] {
    max-width: 100%;
  }

  /* Text never overflows */
  p, span, h1, h2, h3, h4, h5, h6, a, li, td, th, label, div {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Touch-friendly: minimum 44px tap targets */
  button, [role="button"], a, input[type="submit"], input[type="button"] {
    min-height: 40px;
  }

  /* Inputs resize correctly */
  input, select, textarea {
    width: 100%;
    font-size: 16px !important; /* prevents iOS zoom on focus */
    max-width: 100%;
  }
  input[type="checkbox"],
  input[type="radio"] {
    width: auto;
    min-height: 0;
  }
}

/* ── 3. ANNOUNCEMENT BAR ─────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Ticker / announcement bar — keep text readable */
  [class*="text-xs"].flex, [class*="text-xs"][class*="gap"] {
    font-size: 11px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }
}

/* ── 4. NAVBAR / HEADER ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Nav padding fix on tablet */
  .sticky.top-0, header.sticky {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

@media (max-width: 768px) {
  /* Nav height and padding */
  .h-16, [class*="h-16"] {
    height: 56px !important;
  }

  /* Search bar inside nav — prevent overflow */
  .flex-1.rounded-full {
    max-width: 100%;
    min-width: 0 !important;
  }

  /* Search input full width on mobile */
  .flex-1.rounded-full.h-13 {
    height: 40px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 14px !important;
  }

  /* Nav icon buttons — touch friendly */
  nav button[aria-label],
  header button[aria-label] {
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  /* Shrink nav padding more on very small screens */
  [class*="px-4"].sticky,
  .sticky.top-0 {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* ── 5. MOBILE MENU (hamburger panel) ───────────────────────────── */
@media (max-width: 1024px) {
  /* Mobile menu container — full width overlay */
  [class*="fixed"][class*="inset-0"][class*="z-50"]:not([class*="bg-black"]):not([class*="bg-white/0"]) {
    width: 100vw;
    max-width: 100vw;
  }

  /* Mobile nav drawer */
  [class*="fixed"][class*="top-0"][class*="left-0"][class*="h-full"],
  [class*="fixed"][class*="top-0"][class*="right-0"][class*="h-full"] {
    width: min(320px, 88vw) !important;
  }

  /* Mobile menu links — larger touch targets */
  [class*="fixed"] nav a,
  [class*="fixed"] [role="navigation"] a {
    padding: 12px 20px !important;
    font-size: 16px !important;
    display: block !important;
    min-height: 44px;
  }
}

/* ── 6. SEARCH OVERLAY ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .mc-search-overlay {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 60px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    width: calc(100vw - 16px) !important;
    z-index: 100000 !important;
    border-radius: 12px !important;
  }

  .mc-search-results-wrap {
    max-height: 60vh !important;
  }
}

@media (max-width: 480px) {
  .mc-search-overlay {
    left: 4px !important;
    right: 4px !important;
    width: calc(100vw - 8px) !important;
    max-width: calc(100vw - 8px) !important;
    top: 56px !important;
  }

  .mc-search-item {
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  .mc-search-thumb {
    width: 44px !important;
    height: 44px !important;
  }
}

/* ── 7. HERO BANNER ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hero section height */
  .relative.h-\[92vh\],
  [class*="h-[92vh]"] {
    height: 70vh !important;
    min-height: 420px !important;
  }

  /* Hero content text — prevent overflow */
  [class*="h-[92vh]"] h1,
  [class*="h-[92vh]"] h2,
  .relative.h-\[92vh\] h1,
  .relative.h-\[92vh\] h2 {
    font-size: clamp(22px, 6vw, 36px) !important;
    line-height: 1.25 !important;
    word-break: break-word;
  }

  /* Hero subtitle / description */
  [class*="h-[92vh]"] p,
  .relative.h-\[92vh\] p {
    font-size: clamp(13px, 3.5vw, 16px) !important;
  }

  /* Hero badge (NEW ARRIVAL etc.) */
  .badge-glass {
    font-size: 11px !important;
    padding: 5px 12px !important;
  }

  /* Hero CTA buttons — full width stacked on tiny screens */
  [class*="h-[92vh]"] .flex.gap-4,
  [class*="h-[92vh]"] .flex.gap-3 {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  [class*="h-[92vh]"] a[class*="bg-gradient"],
  [class*="h-[92vh]"] button[class*="bg-gradient"],
  [class*="h-[92vh]"] a[class*="bg-\["],
  [class*="h-[92vh]"] button[class*="bg-\["] {
    font-size: 13px !important;
    padding: 10px 18px !important;
  }
}

@media (max-width: 480px) {
  .relative.h-\[92vh\],
  [class*="h-[92vh]"] {
    height: 60vh !important;
    min-height: 360px !important;
  }
}

/* ── 8. CATEGORY CARDS ───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Category tall cards — reduce height */
  .group.relative.h-\[500px\],
  [class*="h-[500px]"] {
    height: 280px !important;
  }

  [class*="h-[400px]"] { height: 240px !important; }
  [class*="h-[450px]"] { height: 260px !important; }

  /* Category grid — 2 columns on mobile */
  [class*="grid-cols-4"][class*="category"],
  [class*="grid-cols-4"] .group.relative {
    /* allow parent grid to reflow */
  }

  /* Category section carousel scroll */
  [class*="flex-[0_0_78%]"],
  [class*="flex-[0_0_88%]"] {
    max-width: 78vw !important;
  }
}

@media (max-width: 480px) {
  .group.relative.h-\[500px\],
  [class*="h-[500px]"] {
    height: 200px !important;
  }
}

/* ── 9. PRODUCT GRID ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Any non-mc-grid product grids */
  .grid.grid-cols-2 { gap: 10px !important; }
  .grid.grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }

  /* Product card image on small screens */
  [class*="aspect-[3/4]"],
  [class*="aspect-square"],
  .aspect-\[3\/4\] {
    max-width: 100%;
  }
}

/* ── 10. PRODUCT DETAIL PAGE ─────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Product detail: image + info — may be side-by-side grid */
  [class*="grid-cols-2"][class*="gap-8"],
  [class*="grid-cols-2"][class*="gap-6"],
  [class*="grid-cols-2"][class*="gap-12"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Product image — full width on tablet/mobile */
  .aspect-\[3\/4\].rounded-3xl,
  [class*="aspect-[3/4]"].rounded-3xl {
    max-width: 480px !important;
    margin: 0 auto !important;
  }

  /* Thumbnail strip */
  [class*="grid-cols-4"][class*="gap-2"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 640px) {
  /* Product title on detail page */
  h1[class*="text-3xl"],
  h1[class*="text-2xl"] {
    font-size: clamp(20px, 5.5vw, 28px) !important;
    line-height: 1.3 !important;
  }

  /* Price on detail page */
  [class*="text-3xl"][class*="font-bold"],
  [class*="text-2xl"][class*="font-bold"] {
    font-size: clamp(20px, 5vw, 28px) !important;
  }

  /* Add to cart + Buy now buttons — full width */
  [class*="flex-1.h-12"],
  .flex.gap-3 > button.flex-1,
  .flex.gap-4 > button.flex-1,
  .flex.gap-3 > a.flex-1 {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  /* Size selector chips — wrap on mobile */
  [class*="flex"][class*="gap-2"][class*="flex-wrap"],
  [class*="flex"][class*="gap-3"][class*="flex-wrap"] {
    gap: 8px !important;
  }
}

/* ── 11. CART PAGE ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Cart: items + order summary — stack vertically */
  [class*="grid"][class*="grid-cols-3"],
  [class*="grid"][class*="gap-8"][class*="lg"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  /* Cart item row — stack image and details */
  [class*="flex"][class*="gap-4"] > [class*="w-24"],
  [class*="flex"][class*="gap-4"] > [class*="w-20"],
  [class*="flex"][class*="gap-3"] > [class*="w-20"] {
    width: 72px !important;
    height: 72px !important;
    flex-shrink: 0 !important;
  }

  /* Quantity controls — make them touch-friendly */
  [class*="border"][class*="rounded-xl"][class*="flex"][class*="items-center"] button {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

/* ── 12. CHECKOUT PAGE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Checkout two-column — stack */
  [class*="lg:grid-cols-2"],
  [class*="lg:grid-cols-3"] {
    /* Tailwind already handles lg: prefix; these are extra safeguards */
  }

  /* If checkout uses a manual grid */
  form + aside,
  .checkout-form + .order-summary {
    margin-top: 24px;
  }
}

@media (max-width: 640px) {
  /* Checkout section padding */
  [class*="rounded-2xl"][class*="p-6"],
  [class*="rounded-xl"][class*="p-6"] {
    padding: 16px !important;
  }

  [class*="rounded-2xl"][class*="p-8"],
  [class*="rounded-xl"][class*="p-8"] {
    padding: 16px !important;
  }

  /* Form grid rows — stack on mobile */
  [class*="grid-cols-2"] input,
  [class*="grid-cols-2"] select {
    /* Parent grid override */
  }
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
}

/* ── 13. WISHLIST PAGE ───────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Wishlist grid — 2 cols on mobile */
  .grid.grid-cols-3,
  .grid.grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 14. LOGIN / PROFILE PAGES ───────────────────────────────────── */
@media (max-width: 640px) {
  /* Auth cards — full width on mobile */
  [class*="max-w-md"],
  [class*="max-w-sm"] {
    max-width: 100% !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  /* Login form padding */
  [class*="max-w-md"][class*="rounded"],
  [class*="max-w-sm"][class*="rounded"] {
    padding: 24px 20px !important;
  }
}

/* ── 15. TABLES (Admin + Order History) ──────────────────────────── */
@media (max-width: 1024px) {
  /* All tables — scroll horizontally instead of overflowing */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  thead, tbody, tfoot, tr, th, td {
    /* Allow table to become scrollable block */
  }

  th, td {
    min-width: 100px;
    padding: 10px 12px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }

  th {
    font-size: 12px !important;
  }
}

@media (max-width: 640px) {
  th, td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

/* ── 16. ADMIN PANEL ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Admin layout: sidebar + main — sidebar should be hidden/overlay on mobile */
  /* The React bundle uses lg:hidden / lg:flex already, these are extra safeguards */

  /* Admin sidebar when shown as overlay */
  [class*="fixed"][class*="inset-0"][class*="z-40"] ~ [class*="w-64"],
  [class*="fixed"][class*="inset-0"][class*="z-40"] + [class*="w-64"] {
    width: min(260px, 85vw) !important;
  }

  /* Admin main content area */
  [class*="flex-1"][class*="overflow-y-auto"][class*="p-4"],
  [class*="flex-1"][class*="overflow-y-auto"][class*="p-6"] {
    padding: 16px !important;
  }

  /* Admin stat cards grid */
  .flex-1.grid.grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 640px) {
  /* Admin stat/info cards — single column on phones */
  .flex-1.grid.grid-cols-3,
  .grid.grid-cols-3.gap-6,
  .grid.grid-cols-4.gap-4 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Admin header bar */
  [class*="flex"][class*="justify-between"][class*="items-center"][class*="mb-6"],
  [class*="flex"][class*="justify-between"][class*="items-center"][class*="mb-8"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Admin action buttons */
  [class*="flex"][class*="gap-3"] > button[class*="bg-gradient"],
  [class*="flex"][class*="gap-2"] > button[class*="bg-gradient"] {
    font-size: 13px !important;
    padding: 8px 14px !important;
  }
}

/* Admin: h-screen overflow-hidden layout fix on mobile */
@media (max-width: 1024px) {
  .flex.h-screen.bg-\[\#F8FAFC\].overflow-hidden,
  [class*="flex h-screen"][class*="overflow-hidden"] {
    height: 100dvh !important;
    height: 100vh !important;
  }

  /* Admin sidebar — collapsed on mobile (lg:hidden already handled by Tailwind) */
  [class*="w-64"][class*="flex-col"][class*="sidebar"],
  [class*="w-64"].flex-col.overflow-y-auto {
    min-width: 64px;
  }
}

/* ── 17. ORDER HISTORY / PROFILE PAGE ───────────────────────────── */
@media (max-width: 640px) {
  /* Order cards — stack details */
  [class*="flex"][class*="justify-between"] > [class*="text-sm"] {
    font-size: 12px !important;
  }

  /* Order status badges */
  [class*="rounded-full"][class*="px-3"][class*="py-1"] {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
}

/* ── 18. SECTIONS — PADDING & SPACING ───────────────────────────── */
@media (max-width: 768px) {
  #mc-all-products-section {
    padding: 32px 0 48px !important;
  }

  .mc-container {
    padding: 0 12px !important;
  }

  .mc-section-header {
    margin-bottom: 24px !important;
  }

  .mc-load-more-btn {
    padding: 12px 32px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  #mc-all-products-section {
    padding: 24px 0 36px !important;
  }

  .mc-container {
    padding: 0 10px !important;
  }
}

/* ── 19. SECTION CONTAINERS — scoped to #root so nav/admin are safe ── */
@media (max-width: 768px) {
  /* Common content containers inside #root */
  #root [class*="max-w-7xl"],
  #root [class*="max-w-6xl"],
  #root [class*="max-w-5xl"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Large horizontal padding inside page sections */
  #root section [class*="px-8"],
  #root main [class*="px-8"]  { padding-left: 16px !important; padding-right: 16px !important; }
  #root section [class*="px-10"],
  #root main [class*="px-10"] { padding-left: 16px !important; padding-right: 16px !important; }
  #root section [class*="px-12"],
  #root main [class*="px-12"] { padding-left: 16px !important; padding-right: 16px !important; }

  /* Section vertical spacing inside #root sections */
  #root section [class*="py-20"],
  #root main [class*="py-20"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  #root section [class*="py-24"],
  #root main [class*="py-24"] { padding-top: 48px !important; padding-bottom: 48px !important; }
  #root section [class*="py-16"],
  #root main [class*="py-16"] { padding-top: 40px !important; padding-bottom: 40px !important; }
}

@media (max-width: 480px) {
  #root [class*="max-w-7xl"],
  #root [class*="max-w-6xl"],
  #root [class*="max-w-5xl"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #root section [class*="py-20"],
  #root main [class*="py-20"] { padding-top: 36px !important; padding-bottom: 36px !important; }
  #root section [class*="py-16"],
  #root main [class*="py-16"] { padding-top: 32px !important; padding-bottom: 32px !important; }
}

/* ── 20. FEATURES ROW (Free Shipping / Returns / Secure) ─────────── */
@media (max-width: 768px) {
  /* Features row — 2 cols on mobile/tablet */
  [class*="grid-cols-4"][class*="gap-4"][class*="rounded"],
  [class*="grid-cols-4"] > [class*="rounded-2xl"][class*="bg-white"][class*="border"] {
    /* handled via parent grid */
  }

  /* Fallback for features section grid */
  section [class*="grid-cols-4"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
  section [class*="grid-cols-3"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  section [class*="grid-cols-4"],
  section [class*="grid-cols-3"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* ── 21. FOOTER (custom HTML in index.html) ──────────────────────── */
@media (max-width: 768px) {
  .mmart-footer {
    padding: 32px 16px 20px !important;
  }

  .mmart-footer-inner {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .mmart-footer-brand {
    font-size: 18px !important;
  }

  .mmart-footer-tagline {
    max-width: 100% !important;
    font-size: 13px !important;
  }

  .mmart-footer-col h4 {
    margin-bottom: 10px !important;
  }

  .mmart-footer-contact-item {
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .mmart-footer {
    padding: 28px 14px 18px !important;
  }

  .mmart-footer-bottom {
    font-size: 11px !important;
    margin-top: 24px !important;
    padding-top: 16px !important;
  }
}

/* ── 22. REACT FOOTER (in #root) ─────────────────────────────────── */
@media (max-width: 768px) {
  /* Footer grid columns → single column */
  footer .grid,
  footer [class*="grid-cols"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }

  footer [class*="px-8"],
  footer [class*="px-12"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  footer [class*="py-16"],
  footer [class*="py-12"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

@media (max-width: 480px) {
  footer .grid,
  footer [class*="grid-cols"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* ── 23. WHATSAPP FLOAT BUTTON ───────────────────────────────────── */
@media (max-width: 768px) {
  .wa-float {
    bottom: 16px !important;
    right: 16px !important;
  }

  .wa-btn {
    width: 50px !important;
    height: 50px !important;
  }

  .wa-btn svg {
    width: 24px !important;
    height: 24px !important;
  }

  /* Hide label on mobile — just show the button */
  .wa-label {
    display: none !important;
  }
}

/* ── 24. MODALS & DRAWERS ────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Modals — full screen on mobile */
  .fixed.inset-0 > [class*="max-w-"],
  .fixed.inset-0 > [class*="rounded-2xl"],
  .fixed.inset-0 > [class*="rounded-3xl"] {
    max-width: calc(100vw - 24px) !important;
    border-radius: 16px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  /* Cart / wishlist sidebar drawer */
  .fixed.top-0.right-0.h-full,
  [class*="fixed top-0 right-0"][class*="h-full"] {
    width: min(380px, 100vw) !important;
    max-width: 100vw !important;
  }

  /* Drawer content padding */
  [class*="fixed top-0"][class*="p-6"] {
    padding: 16px !important;
  }
}

/* ── 25. BREADCRUMBS ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  nav[aria-label="breadcrumb"],
  [class*="flex"][class*="items-center"][class*="gap-1"][class*="text-sm"] {
    font-size: 12px !important;
    flex-wrap: wrap !important;
  }
}

/* ── 26. PAGINATION ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  [class*="flex"][class*="gap-2"] > [class*="rounded-lg"][class*="w-8"],
  [class*="flex"][class*="gap-1"] > [class*="rounded"][class*="w-8"] {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
  }
}

/* ── 27. TOAST / NOTIFICATIONS ───────────────────────────────────── */
@media (max-width: 480px) {
  [role="alert"],
  [role="status"],
  .toast,
  [class*="fixed"][class*="bottom"][class*="right"] > [class*="rounded"] {
    max-width: calc(100vw - 24px) !important;
    right: 12px !important;
    bottom: 12px !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
  }
}

/* ── 28. FILTER SIDEBAR (Products page) ─────────────────────────── */
@media (max-width: 1024px) {
  /* Filter panels that are overlays on tablet */
  [class*="w-72"][class*="fixed"],
  [class*="w-64"][class*="fixed"] {
    width: min(280px, 88vw) !important;
  }
}

/* ── 29. MC TOOLBAR (sort/filter row on homepage) ────────────────── */
@media (max-width: 480px) {
  .mc-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .mc-count {
    font-size: 12px !important;
  }
}

/* ── 30. IMAGE GALLERY (product detail thumbnails) ───────────────── */
@media (max-width: 640px) {
  /* Thumbnail strip — smaller on mobile */
  .aspect-\[3\/4\].rounded-2xl {
    border-radius: 8px !important;
  }
}

/* ── 31. CATEGORY CAROUSEL / HORIZONTAL SCROLL ───────────────────── */
@media (max-width: 768px) {
  /* Horizontal scroll containers — ensure smooth scrolling */
  [class*="overflow-x-auto"],
  [class*="overflow-x-scroll"] {
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  [class*="overflow-x-auto"]::-webkit-scrollbar,
  [class*="overflow-x-scroll"]::-webkit-scrollbar {
    display: none !important;
  }

  /* Category chips/pills overflow row */
  .flex.gap-1.overflow-x-auto,
  .flex.gap-2.overflow-x-auto {
    padding-bottom: 4px !important;
  }
}

/* ── 32. PREMIUM LOADER ──────────────────────────────────────────── */
@media (max-width: 480px) {
  .pm-loader-label {
    font-size: 0.9rem !important;
    letter-spacing: 0.08em !important;
  }

  .pm-loader-bar {
    width: 120px !important;
  }
}

/* ── 33. ORDER DETAILS / INVOICE ─────────────────────────────────── */
@media (max-width: 640px) {
  /* Two column info rows in order detail */
  [class*="grid-cols-2"][class*="gap-4"] > [class*="rounded"],
  [class*="grid-cols-2"][class*="gap-3"] > [class*="rounded"] {
    /* The parent grid-cols-2 override in section 12 handles this */
  }
}

/* ── 34. SCOPED TAILWIND OVERRIDES FOR SMALL SCREENS ─────────────── */
/* Scoped to main app content (#root) and footer so nav/admin are unaffected */
@media (max-width: 640px) {
  /* text size overrides for readability — scoped to page body */
  #root .text-5xl { font-size: clamp(26px, 7vw, 36px) !important; }
  #root .text-4xl { font-size: clamp(22px, 6vw, 30px) !important; }
  #root .text-3xl { font-size: clamp(20px, 5.5vw, 26px) !important; }

  /* Large paddings — scoped to main content sections */
  #root section .p-8,
  #root main .p-8    { padding: 16px !important; }
  #root section .p-10,
  #root main .p-10   { padding: 20px !important; }
  #root section .p-12,
  #root main .p-12   { padding: 24px !important; }

  /* Gaps — scoped to prevent affecting nav/header grids */
  #root section .gap-8  { gap: 16px !important; }
  #root section .gap-12 { gap: 20px !important; }
  #root main .gap-8     { gap: 16px !important; }
  #root main .gap-12    { gap: 20px !important; }

  /* Margins — scoped to main content */
  #root section .mb-12 { margin-bottom: 24px !important; }
  #root section .mb-16 { margin-bottom: 32px !important; }
  #root section .mt-12 { margin-top: 24px !important; }
  #root section .mt-16 { margin-top: 32px !important; }
}

@media (max-width: 480px) {
  #root .text-5xl { font-size: clamp(22px, 6.5vw, 28px) !important; }
  #root .text-4xl { font-size: clamp(20px, 5.8vw, 24px) !important; }
  #root .text-3xl { font-size: clamp(18px, 5.2vw, 22px) !important; }
}

/* ── 35. PREVENT HOVER TRANSFORMS ON TOUCH DEVICES ──────────────── */
@media (hover: none) and (pointer: coarse) {
  .card-3d:hover,
  .rounded-2xl.bg-white.shadow:hover,
  .rounded-3xl.bg-white:hover,
  .rounded-2xl.overflow-hidden:hover,
  .mc-card:hover,
  .card-frost:hover {
    transform: none !important;
    box-shadow: var(--p-card-shadow) !important;
  }

  button:active, [role="button"]:active {
    transform: scale(0.97) !important;
    opacity: 0.85 !important;
  }

  /* Disable cursor glow on touch */
  #pm-cursor { display: none !important; }
}

/* ── 36. SAFE AREA (iPhone notch/home bar) ───────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mmart-footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
  }

  .wa-float {
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)) !important;
  }

  /* Sticky nav — account for status bar */
  .sticky.top-0 {
    padding-top: max(0px, env(safe-area-inset-top)) !important;
  }
}

/* ── 37. TABLET-SPECIFIC TWEAKS (768–1024px) ─────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Product grid — 3 cols on tablet */
  .mc-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }

  /* Hero — comfortable height on tablet */
  .relative.h-\[92vh\],
  [class*="h-[92vh]"] {
    height: 80vh !important;
  }

  /* Category cards — medium height on tablet */
  .group.relative.h-\[500px\],
  [class*="h-[500px]"] {
    height: 360px !important;
  }

  /* Section padding */
  [class*="px-12"] {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  [class*="py-24"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/* ── 38. 320px EXTREME SMALL SCREEN FIXES ────────────────────────── */
@media (max-width: 360px) {
  .mc-card-body {
    padding: 8px 8px 10px !important;
  }

  .mc-card-title {
    font-size: 11px !important;
  }

  .mc-price {
    font-size: 12px !important;
  }

  .mc-btn-cart, .mc-btn-buy {
    font-size: 9px !important;
    padding: 6px 4px !important;
    gap: 3px !important;
  }

  .mc-btn-cart svg, .mc-btn-buy svg {
    width: 10px !important;
    height: 10px !important;
  }

  /* Nav even more compact */
  .h-16, [class*="h-16"] {
    height: 52px !important;
  }

  [class*="px-4"].sticky {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Hero */
  .relative.h-\[92vh\],
  [class*="h-[92vh]"] {
    height: 55vh !important;
    min-height: 300px !important;
  }
}

/* ── 39. BULK IMPORT & PRODUCT MANAGER PAGES ─────────────────────── */
@media (max-width: 768px) {
  /* standalone HTML pages served from /public */
  body .container,
  body > main,
  body > .wrapper {
    padding: 16px !important;
    max-width: 100% !important;
  }
}