/* BabyFood V11 — Daraz-style mobile app layout. Mobile-only visual changes; desktop and data logic untouched. */
@media (max-width: 767px) {
  html, body { overscroll-behavior-y: contain; }
  body { background: hsl(var(--background)); }

  /* Compact app header */
  .bf-top-info { display: none !important; }
  .bf-app-header {
    border-bottom: 1px solid hsl(var(--border)) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
  }
  .bf-main-header-row {
    height: 52px !important;
    padding-left: 12px !important;
    padding-right: 8px !important;
    gap: 8px !important;
  }
  .bf-main-header-row > a { gap: 7px !important; min-width: 0; }
  .bf-main-header-row > a img { width: 34px !important; height: 34px !important; }
  .bf-main-header-row > a > div { min-width: 0; }
  .bf-main-header-row > a > div > div:first-child {
    font-size: 13px !important;
    line-height: 1.15 !important;
    max-width: 185px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bf-main-header-row > a > div > div:last-child { display: none !important; }
  .bf-main-header-row > div:last-child { gap: 0 !important; }
  .bf-main-header-row button[aria-label="পণ্য সার্চ"] { display: none !important; }
  .bf-main-header-row > div:last-child > a,
  .bf-main-header-row > div:last-child > button,
  .bf-main-header-row > div:last-child button {
    min-width: 36px;
    min-height: 36px;
  }

  /* Search always visible below the header, like a shopping app */
  .bf-header-search {
    display: block !important;
    padding: 7px 10px 8px !important;
    border-top: 0 !important;
    background: hsl(var(--card)) !important;
  }
  .bf-header-search > div { max-width: none !important; }
  .bf-header-search input {
    height: 38px !important;
    border-radius: 10px !important;
    padding-left: 38px !important;
    padding-right: 68px !important;
    font-size: 12px !important;
    background: hsl(var(--secondary) / .55) !important;
  }
  .bf-header-search svg { left: 12px !important; width: 17px !important; height: 17px !important; }
  .bf-header-search button[type="submit"] {
    height: 30px !important;
    top: 4px !important;
    right: 4px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-radius: 8px !important;
  }

  /* Home: products come into view much sooner */
  .bf-home-page > section:first-of-type {
    padding-top: 16px !important;
    padding-bottom: 14px !important;
  }
  .bf-home-page > section:first-of-type > div.relative {
    gap: 8px !important;
  }
  .bf-home-page > section:first-of-type h1 {
    font-size: 24px !important;
    line-height: 1.18 !important;
    margin-bottom: 8px !important;
  }
  .bf-home-page > section:first-of-type p {
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
  }
  .bf-home-page > section:first-of-type .flex.flex-wrap.gap-3 { gap: 7px !important; }
  .bf-home-page > section:first-of-type .flex.gap-8.mt-8 { display: none !important; }
  .bf-home-page > section:first-of-type button,
  .bf-home-page > section:first-of-type a > button {
    min-height: 34px !important;
    padding: 6px 11px !important;
    font-size: 12px !important;
  }
  /* Hide the large reassurance strip on mobile; its content remains on desktop. */
  .bf-home-page > section:nth-of-type(2) { display: none !important; }
  .bf-home-page > section:nth-of-type(3) {
    padding-top: 16px !important;
    padding-bottom: 18px !important;
  }
  .bf-home-page > section:nth-of-type(3) > div > div:first-child { margin-bottom: 12px !important; }
  .bf-home-page > section:nth-of-type(3) h2 { font-size: 18px !important; line-height: 1.2 !important; }
  .bf-home-page > section:nth-of-type(3) p { font-size: 11px !important; }
  .bf-home-page > section:nth-of-type(3) .grid { gap: 8px !important; }
  .bf-home-page > section:nth-of-type(3) .text-center.mt-6 { margin-top: 12px !important; }

  /* Products page compact like a marketplace app */
  .products-hero-compact {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }
  .products-hero-compact .products-hero-breadcrumb,
  .products-hero-compact .products-hero-subtitle { display: none !important; }
  .products-hero-compact .products-hero-row {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .products-hero-compact .products-hero-title {
    font-size: 18px !important;
    line-height: 1.2 !important;
  }
  .products-hero-compact .products-hero-sort > span { display: none !important; }
  .products-hero-compact .products-hero-sort select {
    font-size: 11px !important;
    padding: 5px 10px !important;
    min-width: 112px;
  }
  .bf-product-grid { gap: 8px !important; }

  /* Smaller Daraz-like product cards */
  .product-card {
    padding: 7px !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  }
  .product-card > div:first-of-type { border-radius: 9px !important; }
  .product-card .pt-3 { padding-top: 7px !important; row-gap: 3px !important; }
  .product-card h3 { font-size: 12.5px !important; line-height: 1.25 !important; min-height: 31px; }
  .product-card p { font-size: 10px !important; line-height: 1.25 !important; }
  .product-card .text-amber-400 { font-size: 9px !important; }
  .product-card .font-bold.text-primary { font-size: 13px !important; }
  .product-card button {
    margin-top: 5px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    border-radius: 9px !important;
    font-size: 10.5px !important;
  }

  /* App bottom navigation */
  .bf-mobile-nav {
    height: calc(62px + env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,.98) !important;
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,.07) !important;
  }
  .bf-mobile-nav > a,
  .bf-mobile-nav > button {
    padding-top: 6px !important;
    padding-bottom: 4px !important;
    gap: 2px !important;
    font-size: 10px !important;
  }
  .bf-mobile-nav svg { width: 21px !important; height: 21px !important; }
  .bf-mobile-nav > a:nth-child(3) > span:first-child {
    width: 42px !important;
    height: 42px !important;
    margin-top: -20px !important;
    border-width: 3px !important;
  }
  .bf-mobile-menu-overlay > div {
    border-radius: 24px 24px 0 0 !important;
    padding: 16px 14px 82px !important;
  }

  /* App mode: avoid a long desktop-style footer on phone */
  .bf-site-shell footer { display: none !important; }

  /* Floating chat stays above the nav */
  .bf-site-shell [aria-label="Open live chat"],
  .bf-site-shell [aria-label="Close live chat"] {
    transform: scale(.9);
    transform-origin: bottom right;
  }
}

@media (display-mode: standalone) and (max-width: 767px) {
  body { user-select: none; -webkit-user-select: none; }
  input, textarea { user-select: text; -webkit-user-select: text; }
  .bf-app-header { padding-top: env(safe-area-inset-top); }
}