/* ============================================================
   MasnoonHub Express - site-wide mobile bottom tab bar (.mh-botnav)
   Ported from previews/nav-preview.css .mtab (itself from home.css),
   adapted to fixed-bottom on the live document + shown only below the
   960px homepage breakpoint. Always visible (no hide-on-scroll), like
   Amazon and Daraz. Rendered by inc/mh-bottom-nav.php.
   ============================================================ */

.mh-botnav{
  display:none; /* shown only on mobile, below 960px */
  position:fixed; left:0; right:0; bottom:0; z-index:1200;
  background:#fff; border-top:1px solid var(--line, #ececef);
  grid-template-columns:repeat(5, 1fr);
  padding:7px 4px calc(9px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 18px -12px rgba(20,29,51,.3);
  font-family:var(--font-body, "Hanken Grotesk", "Noto Sans Bengali", system-ui, sans-serif);
}
.mh-botnav *{ box-sizing:border-box; }
.mh-botnav a{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  text-decoration:none; color:var(--ink-3, #8d909b);
  position:relative; -webkit-tap-highlight-color:transparent; min-width:0;
}
.mh-botnav a .lbl{ font-size:10px; font-weight:600; line-height:1; white-space:nowrap; }
.mh-botnav a svg{ width:22px; height:22px; }
.mh-botnav a.on{ color:var(--brand, #e0530f); }

/* center Rehnuma tab — orange gradient dot */
.mh-botnav a.aitab .dot{
  width:23px; height:23px; border-radius:50%;
  background:linear-gradient(180deg, var(--brand-bright, #f26417), var(--brand, #e0530f));
  display:grid; place-items:center;
}
.mh-botnav a.aitab .dot svg{ width:14px; height:14px; color:#fff; }

/* cart badge */
.mh-botnav a.cart .bdg{
  position:absolute; top:-3px; left:calc(50% + 4px);
  min-width:16px; height:16px; padding:0 4px; border-radius:9px;
  background:var(--brand, #e0530f); color:#fff; font-size:10px; font-weight:800;
  display:grid; place-items:center; line-height:1;
}

/* keyboard focus ring that doesn't shift layout */
.mh-botnav a:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--brand-soft, #fdeadf); border-radius:8px; }

/* ===== mobile only: same 960px cutoff as the homepage mobile shell ===== */
@media (max-width: 959.98px){
  .mh-botnav{ display:grid; }
  /* --mh-botnav-h is the bar's outer height (excl. the iOS safe area, which is
     added separately via env()). Exposed as a variable so the PDP sticky buy bar
     (woo-single.css) can sit flush on top of this nav instead of under it. */
  body.mh-has-botnav{
    --mh-botnav-h:54px;
    /* clear the fixed bar so the footer / last content is never hidden behind it */
    padding-bottom:calc(var(--mh-botnav-h) + env(safe-area-inset-bottom)) !important;
  }
  /* the ModernCart floating cart FAB duplicates the Cart tab and collides with
     the bar on phones; hide it where our bar is shown (desktop keeps it). */
  body.mh-has-botnav .moderncart-floating-cart-button,
  body.mh-has-botnav .moderncart-floating-cart{ display:none !important; }
  /* the homepage's own home-mobile.php .mtab is position:sticky (does not pin to
     the viewport on a phone), so hide it and let our fixed .mh-botnav take over
     for one consistent bar everywhere. */
  body.home .mtab{ display:none !important; }
}