/* ==========================================================================
   bdBasket storefront, mobile v2 "Option B" (2026-10-15)
   Dark rounded header with search, floating dark tab bar, floating buy bar
   on product pages, system font.
   Everything except the Categories sheet is scoped to html.mv2 (set by the gate in layouts/store.blade.php).
   Remove the class and the store renders exactly as before.
   ========================================================================== */

:root {
  --bb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans",
             "Helvetica Neue", Arial, "Nirmala UI", "Noto Sans Bengali", "Bangla Sangam MN",
             "Vrinda", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --mv2-navy: #0F172A;
  --mv2-orange: #E46103;
  --mv2-ground: #F4F5F7;
  --mv2-ink: #0F172A;
  --mv2-muted: #64748B;
  --mv2-safe: env(safe-area-inset-bottom, 0px);
  --mv2-bar: 64px;          /* floating tab bar height */
  --mv2-gap: 16px;          /* tab bar distance from the screen edge */
  --mv2-clear: calc(var(--mv2-bar) + var(--mv2-gap) + var(--mv2-safe));
}

/* ── System font, whole storefront (icon fonts excluded) ── */
html.mv2 body,
html.mv2 body *:not(i):not([class^="ri-"]):not([class*=" ri-"]):not(code):not(pre):not(kbd) {
  font-family: var(--bb-font) !important;
}
html.mv2 body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.mv2 .bgg-dsp { letter-spacing: -0.01em !important; }

/* The white logo only shows in the navy mv2 phone header. */
.mv2-logo-dark { display: none; }

/* ── Categories sheet (Categories tab). Not gated: the tab bar opens it for
   everyone, so it must work with or without .mv2. ── */
#mv2Cats {
  width: 100% !important;
  border: 0 !important;
  background: var(--mv2-ground);
}
#mv2Cats .mv2-cats-head {
  background: var(--mv2-navy);
  border-radius: 0 0 24px 24px;
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
#mv2Cats .mv2-cats-top { display: flex; align-items: center; justify-content: space-between; }
#mv2Cats h2 { margin: 0; font-size: 22px; font-weight: 700; color: #FFFFFF; letter-spacing: -0.01em; }
#mv2Cats .mv2-cats-close {
  width: 44px; height: 44px; border: 0; border-radius: 22px;
  background: rgba(255,255,255,.08); color: #FFFFFF;
  display: inline-flex; align-items: center; justify-content: center;
}
#mv2Cats .mv2-cats-search {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 16px;
  background: #FFFFFF; border-radius: 16px; color: var(--mv2-muted);
}
#mv2Cats .mv2-cats-search input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  font-size: 16px; color: var(--mv2-ink);
}
#mv2Cats .mv2-cats-list {
  padding: 14px 16px calc(var(--mv2-clear) + 20px);
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
}
#mv2Cats .mv2-cat {
  min-height: 56px;
  background: #FFFFFF; border-radius: 16px;
  padding: 8px 14px 8px 8px;
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--mv2-ink);
  font-size: 15px; font-weight: 600;
}
#mv2Cats .mv2-cat:active { background: #FFF4EC; }
#mv2Cats .mv2-cat-ini {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  background: #FFF1E6; color: #B54D02;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800;
}
#mv2Cats .mv2-cat-all .mv2-cat-ini { background: var(--mv2-navy); color: #FFFFFF; }
#mv2Cats .mv2-cat span.mv2-cat-name { flex: 1; }
#mv2Cats .mv2-cat svg { color: #94A3B8; flex: none; }
#mv2Cats .mv2-cats-empty { padding: 24px 8px; text-align: center; color: var(--mv2-muted); display: none; }


@media (max-width: 767px) {

  html.mv2 body {
    background: var(--mv2-ground) !important;
    padding-top: var(--mv2-head, 132px) !important;
    padding-bottom: calc(var(--mv2-clear) + 16px) !important;
  }

  /* ── Header: navy (same as the tab bar), as the Option B mockup ───────
     Row 1: white logo · menu. Row 2: full-width white search bar.
     Scrolling down tucks row 1 away and keeps the search (bb-mv2.js). */
  html.mv2 .ox-header {
    top: 0 !important;
    background: var(--mv2-navy) !important;
    border-radius: 0 0 24px 24px;
    border-bottom: 0;
    box-shadow: 0 8px 24px rgba(15,23,42,.18) !important;
    transition: top .25s cubic-bezier(.4,0,.2,1);
  }
  html.mv2.mv2-compact .ox-header { top: calc(-1 * var(--mv2-row1, 56px)) !important; }
  html.mv2 .ox-mainhead {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  html.mv2 .ox-mainhead .ox-wrap {
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 10px 16px 16px !important;
    row-gap: 10px !important;
    column-gap: 8px !important;
  }

  html.mv2 .ox-mainhead .ox-logo {
    order: 1;
    flex: 0 1 auto !important;
    margin-right: auto;
    display: flex; align-items: center;
    height: 44px;
  }
  html.mv2 .ox-logo img { max-height: 40px !important; width: auto !important; }
  /* White logo on navy; the GIF (white background) is for light backgrounds. */
  html.mv2 .ox-mainhead .ox-logo img:not(.mv2-logo-dark) { display: none !important; }
  html.mv2 .ox-mainhead .ox-logo .mv2-logo-dark { display: block !important; height: 38px; max-height: 38px !important; }

  html.mv2 .ox-mainhead .ox-icon-btn.d-xl-none {
    order: 2;
    flex: 0 0 44px !important;
    width: 44px; height: 44px;
    display: inline-flex !important; align-items: center; justify-content: center;
    border-radius: 22px;
    background: transparent !important;
    color: #FFFFFF !important;
  }
  html.mv2 .ox-mainhead .ox-icon-btn.d-xl-none:active { background: rgba(255,255,255,.10) !important; }
  /* Cart / wishlist / account live in the tab bar now. */
  html.mv2 .ox-mainhead .ox-head-actions { display: none !important; }

  /* Search: full-width second row (it used to be fixed above the bottom nav). */
  html.mv2 .ox-header .ox-mainhead .ox-search {
    order: 3;
    flex: 0 0 100% !important;
    position: relative !important;
    bottom: auto !important; left: auto !important; right: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  html.mv2 .ox-search-inner {
    display: flex !important;
    align-items: center !important;
    height: 48px;
    box-sizing: border-box;
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 16px !important;
    padding: 0 6px 0 16px !important;
    box-shadow: none !important;
  }
  html.mv2 .ox-search-inner:focus-within { box-shadow: 0 0 0 3px rgba(228,97,3,.45) !important; }
  html.mv2 .ox-search-input {
    flex: 1 1 auto; min-width: 0;
    height: 100%;
    border: 0 !important; outline: 0 !important;
    background: transparent !important;
    font-size: 16px !important; /* 16px stops iOS zooming on focus */
    padding: 0 !important;
  }
  html.mv2 .ox-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
  html.mv2 .ox-search-submit {
    flex: 0 0 36px;
    width: 36px !important; height: 36px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: var(--mv2-orange) !important;
    color: #FFFFFF !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    padding: 0 !important;
  }
  html.mv2 .ox-search-submit .mv2-ico { width: 19px; height: 19px; }
  html.mv2 .mv2-ico { display: block; flex: none; }

  html.mv2 #oxLiveSearch {
    top: calc(100% + 8px);
    border: 1px solid #E8EDF3;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15,23,42,.18);
    max-height: calc(100dvh - var(--mv2-head, 132px) - var(--mv2-clear) - 24px);
    overscroll-behavior: contain;
  }
  html.mv2 #oxSearchForm { margin: 0 !important; }

  /* ── Floating tab bar ─────────────────────────────────────────────── */
  html.mv2 .bgg-bottom-nav {
    left: var(--mv2-gap); right: var(--mv2-gap);
    bottom: calc(var(--mv2-gap) + var(--mv2-safe));
    height: var(--mv2-bar);
    padding: 0 8px;
    border: 0;
    border-radius: 32px;
    background: var(--mv2-navy);
    box-shadow: 0 12px 30px rgba(15,23,42,.28);
    align-items: center;
    justify-content: space-between;
    transition: transform .25s cubic-bezier(.4,0,.2,1), opacity .2s;
  }
  html.mv2 .bgg-bn-item {
    flex: 0 0 auto;
    flex-direction: row;
    width: 48px; height: 48px;
    padding: 0;
    gap: 8px;
    border-radius: 24px;
    color: #CBD5E1;
    background: none !important;
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
  }
  html.mv2 .bgg-bn-item .bgg-bn-label { display: none; }
  html.mv2 .bgg-bn-item:hover { color: #FFFFFF; }
  html.mv2 .bgg-bn-item.bgg-bn-active,
  html.mv2 .bgg-bn-item.bgg-bn-active:hover {
    background: var(--mv2-orange) !important;
    color: #FFFFFF;
  }
  /* Six items: the active one shows its label only where it fits. */
  @media (min-width: 420px) {
    html.mv2 .bgg-bn-item.bgg-bn-active { width: auto; padding: 0 16px; }
    html.mv2 .bgg-bn-item.bgg-bn-active .bgg-bn-label { display: inline; }
  }
  html.mv2 .bgg-bn-item { width: 46px; height: 46px; }
  /* WhatsApp lives in the tab bar now; the floating circle goes. */
  html.mv2 .bgg-bn-wa { color: #25D366; }
  html.mv2 .bgg-bn-wa:hover { color: #4ADE80; }
  html.mv2 .bgg-bn-wa i { font-size: 23px; line-height: 1; }
  html.mv2 .bgg-wa-fab { display: none !important; }
  html.mv2 .bgg-bn-item svg { width: 22px; height: 22px; flex: none; }
  html.mv2 .bgg-bn-active svg { width: 20px; height: 20px; }
  html.mv2 .bgg-bn-item:active svg { transform: scale(.9); }
  html.mv2 .bgg-bn-badge {
    top: -7px; right: -9px;
    min-width: 16px; height: 16px;
    font-size: 10px;
    border: 2px solid var(--mv2-navy);
    box-sizing: content-box;
  }
  html.mv2 .bgg-bn-badge-wish { background: #EF4444; }

  /* Floating helpers sit above the tab bar. */
  html.mv2 #ox-scroll-top { bottom: calc(var(--mv2-clear) + 14px) !important; }
  html.mv2 #bdbPushBar { bottom: calc(var(--mv2-clear) + 10px) !important; }

  /* ── Product page: floating buy bar replaces the tab bar ──────────── */
  html.mv2.mv2-pdp .bgg-bottom-nav { transform: translateY(140%); opacity: 0; pointer-events: none; }
  html.mv2.mv2-pdp .bgg-wa-fab { display: none !important; }
  html.mv2.mv2-pdp body { padding-bottom: calc(var(--mv2-clear) + 76px) !important; }
  html.mv2.mv2-pdp #ox-scroll-top { bottom: calc(var(--mv2-clear) + 72px) !important; }

  html.mv2 .ep2-sticky {
    display: flex !important;
    left: var(--mv2-gap) !important; right: var(--mv2-gap) !important;
    bottom: calc(var(--mv2-gap) + var(--mv2-safe)) !important;
    height: var(--mv2-bar);
    padding: 0 8px 0 18px !important;
    gap: 8px !important;
    border: 0 !important;
    border-radius: 32px;
    background: var(--mv2-navy) !important;
    box-shadow: 0 12px 30px rgba(15,23,42,.28) !important;
    transform: none !important;
    overflow: visible;
  }
  html.mv2 .ep2-sticky-img,
  html.mv2 .ep2-sticky-name { display: none !important; }
  html.mv2 .ep2-sticky-info::before {
    content: "Total";
    display: block;
    font-size: 12px; color: #CBD5E1; line-height: 1.2;
  }
  html.mv2 .ep2-sticky-price { color: #FFFFFF !important; font-size: 17px !important; }
  html.mv2 .ep2-sticky-atc {
    height: 48px;
    padding: 0 16px !important;
    border-radius: 24px !important;
    font-size: 14px !important;
    justify-content: center;
  }
  html.mv2 .ep2-sticky-cart {
    background: transparent !important;
    border: 1.5px solid rgba(255,255,255,.35) !important;
    padding: 0 12px !important;
  }
  html.mv2 .ep2-sticky-buy { background: var(--mv2-orange) !important; }
  html.mv2 .ep2-sticky-atc i { font-size: 16px; }
  html.mv2 .ep2-sticky-buy i { display: none; }
  /* WhatsApp: full-width pill just above the buy bar. */
  html.mv2 .ep2-sticky-wa {
    position: absolute;
    left: 0; right: 0;
    bottom: calc(100% + 10px);
    height: 48px;
    border-radius: 24px !important;
    justify-content: center;
    font-size: 15px !important;
    background: #128C3E !important;
    box-shadow: 0 8px 20px rgba(18,140,62,.25);
  }
  html.mv2 .ep2-sticky-wa span { display: inline !important; }
  html.mv2 .ep2-sticky-wa i { font-size: 20px; }
  /* Out-of-stock bar: one wide disabled pill. */
  html.mv2 .ep2-sticky .ep2-btn-oos { background: #475569 !important; }

  /* Product gallery: every image gets a thumbnail; the strip scrolls. */
  html.mv2 .ep2-gal-swiper { border-radius: 20px !important; border: 0 !important; background: #FFFFFF !important; }
  html.mv2 .ep2-hthumb {
    gap: 8px !important;
    padding: 10px 2px 4px !important;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html.mv2 .ep2-hthumb::-webkit-scrollbar { display: none; }
  html.mv2 .ep2-hthumb-btn {
    flex: 0 0 58px !important;
    width: 58px !important; height: 58px !important;
    border-radius: 12px !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    scroll-snap-align: center;
    padding: 0;
    overflow: hidden;
  }
  html.mv2 .ep2-hthumb-btn.active { border: 2px solid var(--mv2-orange) !important; }
}