/* BM Traders v3.6.4 — mobile theme compatibility hotfix
   CSS-only overrides loaded after the theme. No data/schema changes. */

@media (max-width: 900px) {
  html, body { max-width:100%; overflow-x:hidden; }
  body { -webkit-text-size-adjust:100%; }

  /* Keep the website app-like, but do not show install/download UI on phones. */
  .bm-install-app,
  .bm-install-guide,
  [data-bm-install],
  [data-bm-install-guide] { display:none !important; visibility:hidden !important; pointer-events:none !important; }

  /* Header/search become compact app-style cards. */
  .main-head { position:relative; z-index:80; }
  .main-head .omp-container { padding:10px 12px !important; gap:9px !important; }
  .bm-header-brand { min-width:0 !important; }
  .bm-header-brand .site-logo-image img,
  .site-logo-image img { width:200px !important; max-width:64vw !important; height:auto !important; max-height:70px !important; object-fit:contain !important; }
  .search-box { width:100% !important; height:44px !important; border-radius:12px !important; overflow:hidden !important; box-shadow:0 7px 22px rgba(8,47,104,.08) !important; }
  .search-box input { min-width:0 !important; font-size:14px !important; }
  .search-box button { min-width:48px !important; }
  .nav-main { position:sticky !important; top:0 !important; z-index:9990 !important; box-shadow:0 8px 24px rgba(8,47,104,.12) !important; }

  /* MAIN HERO: preserve the full 2048x768 / 1600x600 design instead of cropping it. */
  .bm-v350-hero .hero-main-column { width:100% !important; min-width:0 !important; gap:12px !important; }
  .bm-v350-hero .hero-slider,
  .hero-slider { width:100% !important; height:auto !important; min-height:0 !important; aspect-ratio:8 / 3 !important; border-radius:14px !important; background:#061f48 !important; overflow:hidden !important; }
  .bm-v350-hero .hero-slide,
  .hero-slide { padding:0 !important; background-size:contain !important; background-repeat:no-repeat !important; background-position:center center !important; }
  .bm-v350-hero .hero-slide::before,
  .hero-slide::before { background:transparent !important; }
  .bm-v350-hero .hero-copy,
  .hero-copy { display:none !important; }
  .hero-arrow { width:42px !important; height:52px !important; font-size:32px !important; opacity:.94 !important; top:50% !important; transform:translateY(-50%) !important; }
  .hero-prev { left:10px !important; }
  .hero-next { right:10px !important; }
  .hero-dots { bottom:8px !important; left:50% !important; transform:translateX(-50%) !important; }
  .hero-dots button { width:20px !important; height:4px !important; border-radius:999px !important; }

  /* Promotional banners directly under hero: swipe horizontally, no duplicate overlay text. */
  .bm-hero-promos { display:flex !important; grid-template-columns:none !important; gap:12px !important; width:100% !important; overflow-x:auto !important; overflow-y:hidden !important; scroll-snap-type:x mandatory !important; scrollbar-width:none !important; padding:2px 1px 9px !important; -webkit-overflow-scrolling:touch !important; }
  .bm-hero-promos::-webkit-scrollbar { display:none !important; }
  .bm-hero-promo,
  .bm-hero-promo.is-large { flex:0 0 88% !important; width:88% !important; min-width:88% !important; height:auto !important; min-height:0 !important; aspect-ratio:8 / 3 !important; grid-column:auto !important; grid-row:auto !important; border-radius:14px !important; background:#061f48 !important; scroll-snap-align:center !important; }
  .bm-hero-promo img { width:100% !important; height:100% !important; object-fit:contain !important; object-position:center !important; background:#061f48 !important; }
  .bm-hero-promo::after { display:none !important; }
  .bm-hero-promo > span { display:none !important; }

  /* Hot selling categories behave like a native horizontal app carousel. */
  .bm-hot-section { padding:15px 0 !important; background:#f4f7fb !important; }
  .bm-hot-section .omp-container { padding:0 12px !important; }
  .bm-section-heading { align-items:center !important; margin-bottom:14px !important; }
  .bm-section-heading p { display:none !important; }
  .bm-section-heading .section-title { font-size:24px !important; line-height:1.15 !important; }
  .bm-hot-arrows button { width:38px !important; height:38px !important; border-radius:10px !important; }
  .bm-hot-slider { margin:0 -2px !important; }
  .bm-hot-track { gap:10px !important; }
  .bm-hot-track .hot-card { width:132px !important; }
  .bm-hot-track .hot-image { border-radius:14px !important; }

  /* Side category banners: never crop admin-uploaded artwork. */
  .bm-v350-showcase .showcase-row,
  .showcase-row { display:block !important; width:100% !important; max-width:100% !important; overflow:hidden !important; border-radius:16px !important; }
  .bm-v350-showcase .showcase-sponsor-slider,
  .showcase-sponsor-slider { position:relative !important; width:100% !important; height:auto !important; min-height:0 !important; aspect-ratio:16 / 9 !important; background:#061f48 !important; border-radius:16px 16px 0 0 !important; }
  .showcase-sponsor-slider .showcase-sponsor { min-height:0 !important; background:#061f48 !important; }
  .showcase-sponsor img,
  .bm-v350-showcase .showcase-sponsor img { width:100% !important; height:100% !important; object-fit:contain !important; object-position:center !important; background:#061f48 !important; }
  .bm-v350-showcase .showcase-products,
  .showcase-products { width:100% !important; max-width:100% !important; padding:10px !important; border-radius:0 0 16px 16px !important; overflow:hidden !important; }
  .bm-v350-showcase .showcase-products .omp-product-grid,
  .showcase-products .omp-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important; }

  /* Product cards: keep all 3 actions aligned on one line where possible. */
  .omp-product-card { min-width:0 !important; border-radius:14px !important; overflow:hidden !important; }
  .omp-product-body { padding:9px !important; min-width:0 !important; }
  .omp-product-body h3 { font-size:12px !important; line-height:1.28 !important; min-height:31px !important; }
  .omp-price strong { font-size:14px !important; }
  .omp-card-actions { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:5px !important; }
  .omp-card-actions .omp-add-cart,
  .omp-card-actions .omp-wa-order,
  .omp-card-actions .omp-share-product { width:100% !important; min-width:0 !important; min-height:34px !important; padding:6px 3px !important; font-size:9px !important; line-height:1.15 !important; border-radius:7px !important; white-space:normal !important; }
  .omp-card-actions .omp-wa-order span { display:none !important; }
  .omp-card-actions .omp-wa-svg { width:18px !important; height:18px !important; }

  /* Reviews/payment/service cards become clean mobile app sections. */
  .bm-v340-reviews .omp-container,
  .bm-v340-payments .omp-container,
  .bm-v350-benefits .omp-container,
  .omp-home-video .omp-container { padding-left:12px !important; padding-right:12px !important; }

  /* Keep fixed helper buttons clear of the app bottom navigation. */
  body .omp-ai-widget { left:14px !important; bottom:88px !important; }
  body .omp-ai-toggle { width:52px !important; height:52px !important; font-size:15px !important; }
  body .bm-whatsapp-support { right:14px !important; bottom:88px !important; width:54px !important; height:54px !important; min-width:54px !important; padding:0 !important; border-radius:50% !important; }
  body .bm-whatsapp-support img,
  body .bm-whatsapp-support svg { width:30px !important; height:30px !important; }

  /* Avoid accidental horizontal width caused by admin/site components. */
  .omp-container,
  .content-area,
  .single-product,
  .omp-shop-wrap,
  .omp-cart-layout { max-width:100% !important; }
}

@media (max-width: 560px) {
  .omp-container { padding-left:12px !important; padding-right:12px !important; }
  .bm-v350-hero .hero-slider,
  .hero-slider { aspect-ratio:8 / 3 !important; border-radius:12px !important; }
  .bm-hero-promo,
  .bm-hero-promo.is-large { flex-basis:92% !important; width:92% !important; min-width:92% !important; }
  .hero-arrow { width:38px !important; height:48px !important; }
  .showcase-sponsor-slider { aspect-ratio:16 / 9 !important; }
}

@media (max-width: 390px) {
  .omp-card-actions .omp-add-cart,
  .omp-card-actions .omp-wa-order,
  .omp-card-actions .omp-share-product { font-size:8px !important; padding:5px 2px !important; }
  .bm-hot-track .hot-card { width:118px !important; }
}