/* ==========================================================================
   bdBasket mobile v2: home + inner pages, Option B look (2026-10-15).
   Loaded after bb-mv2.css; same html.mv2 scope and :root tokens.
   ========================================================================== */
.mv2-home-top { display: none; }

/* Best Sellers renders 8 categories for the 4-column phone grid; everywhere
   else keeps the original 6 (two rows of 3). */
.bgg-last-cats-grid .bgg-hot-cat-box:nth-child(n+7) { display: none; }
@media (min-width: 768px) {
  .bgg-last-cats-grid .bgg-hot-cat-box:nth-child(4),
  .bgg-last-cats-grid .bgg-hot-cat-box:nth-child(5),
  .bgg-last-cats-grid .bgg-hot-cat-box:nth-child(6) { border-bottom: none; }
}

@media (max-width: 767px) {

  /* ── Home: circles + one banner slider replace the stacked banners ── */
  html.mv2 .bgg-top,
  html.mv2 .bgg-hot-cate-section,
  html.mv2 #epCatWrap { display: none !important; }

  html.mv2 .mv2-home-top { display: block; padding: 4px 0 6px; }

  html.mv2 .mv2-chips {
    display: flex; gap: 12px;
    overflow-x: auto;
    padding: 2px 16px 14px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  html.mv2 .mv2-chips::-webkit-scrollbar { display: none; }
  html.mv2 .mv2-chip {
    flex: 0 0 66px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-decoration: none; color: var(--mv2-ink);
    scroll-snap-align: start;
  }
  html.mv2 .mv2-chip-img {
    width: 58px; height: 58px; border-radius: 29px;
    background: #FFFFFF; border: 1px solid #E5E7EB;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  html.mv2 .mv2-chip-img img { width: 100%; height: 100%; object-fit: cover; }
  html.mv2 .mv2-chip-img i { font-size: 24px; color: var(--mv2-orange); }
  html.mv2 .mv2-chip-name {
    font-size: 11.5px; font-weight: 500; line-height: 1.25; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.5em;
  }
  html.mv2 .mv2-chip:active .mv2-chip-img { border-color: var(--mv2-orange); }

  html.mv2 .mv2-banners { position: relative; padding: 0 16px; }
  html.mv2 .mv2-bn-track {
    display: flex; align-items: center; gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: 20px;
  }
  html.mv2 .mv2-bn-track::-webkit-scrollbar { display: none; }
  html.mv2 .mv2-bn {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: block;
  }
  html.mv2 .mv2-bn img { display: block; width: 100%; height: auto; border-radius: 20px; }
  html.mv2 .mv2-bn-dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 2px; }
  html.mv2 .mv2-bn-dots button {
    position: relative;
    width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px;
    background: #CBD5E1; transition: width .2s, background .2s;
  }
  html.mv2 .mv2-bn-dots button.on { width: 18px; background: var(--mv2-navy); }
  /* Bigger tap area than the 6px dot itself. */
  html.mv2 .mv2-bn-dots button::after { content: ""; position: absolute; inset: -12px -5px; }

  /* ── Sections ── */
  html.mv2 .bgg-section,
  html.mv2 .bgg-section-alt { background: transparent !important; padding: 18px 0 6px !important; }
  html.mv2 .bgg-container { padding-left: 16px !important; padding-right: 16px !important; }
  html.mv2 .bgg-sec-hd { margin-bottom: 12px !important; padding-bottom: 0 !important; border: 0 !important; align-items: baseline !important; }
  html.mv2 .bgg-sec-dot { display: none !important; }
  html.mv2 .bgg-sec-title {
    font-size: 19px !important; font-weight: 700 !important;
    letter-spacing: -0.01em; color: var(--mv2-ink) !important;
  }
  html.mv2 .bgg-see-all {
    background: none !important; border: 0 !important; padding: 0 !important;
    font-size: 14px !important; font-weight: 600 !important;
    color: var(--mv2-orange) !important;
  }
  html.mv2 .bgg-see-all i { display: none; }

  /* "Best Sellers" category boxes → 4-column tiles: one square photo + name.
     The box's own "More" link (to the category) is stretched over the whole
     tile, so a tap anywhere opens the category. */
  html.mv2 .bgg-last-cats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  html.mv2 .bgg-last-cats-grid .bgg-hot-cat-box {
    position: relative;
    display: flex !important; flex-direction: column; gap: 6px;
    padding: 0 !important;
    border: 0 !important; border-radius: 0 !important;
    background: transparent !important; box-shadow: none !important;
    min-width: 0;
  }
  html.mv2 .bgg-last-cats-grid .bgg-hot-cat-prow { order: 1; display: block !important; }
  html.mv2 .bgg-last-cats-grid .bgg-hot-cat-pi {
    display: flex !important; align-items: center; justify-content: center;
    width: 100% !important; height: auto !important;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 16px !important;
    background: #FFFFFF !important;
    overflow: hidden;
  }
  html.mv2 .bgg-last-cats-grid .bgg-hot-cat-pi + .bgg-hot-cat-pi { display: none !important; }
  html.mv2 .bgg-last-cats-grid .bgg-hot-cat-pi img {
    display: block;
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    object-fit: cover !important; border-radius: 0 !important;
  }
  html.mv2 .bgg-last-cats-grid .bgg-hot-cat-pi i { font-size: 26px; color: var(--mv2-orange); }
  html.mv2 .bgg-last-cats-grid .bgg-hot-cat-hd {
    order: 2;
    display: block !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important; border: 0 !important;
  }
  html.mv2 .bgg-last-cats-grid .bgg-hot-cat-name {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; white-space: normal !important;
    font-size: 11.5px !important; font-weight: 500 !important; line-height: 1.25 !important;
    text-align: center; color: var(--mv2-ink) !important;
    min-height: 2.5em;
  }
  html.mv2 .bgg-last-cats-grid .bgg-hot-cat-more {
    position: absolute; inset: 0; z-index: 2;
    font-size: 0 !important; color: transparent !important;
    background: none !important; border: 0 !important; padding: 0 !important;
    border-radius: 16px;
  }
  html.mv2 .bgg-last-cats-grid .bgg-hot-cat-box:active .bgg-hot-cat-pi { outline: 2px solid var(--mv2-orange); outline-offset: -2px; }

  /* ── Product cards (home, shop, collections, related) ── */
  html.mv2 .bgg-shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px 12px !important; }
  html.mv2 .bgg-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  html.mv2 .bgg-card:hover { transform: none !important; }
  html.mv2 .bgg-card-img-wrap {
    border-radius: 18px !important;
    background: #FFFFFF !important;
    overflow: hidden;
  }
  html.mv2 .bgg-card-body { padding: 8px 2px 0 !important; background: transparent !important; }
  html.mv2 .bgg-card-cat { display: none !important; }
  html.mv2 .bgg-card-name {
    font-size: 14px !important; font-weight: 500 !important; line-height: 1.3 !important;
    color: var(--mv2-ink) !important;
  }
  html.mv2 .bgg-card-now { font-size: 16px !important; font-weight: 800 !important; color: var(--mv2-ink) !important; }
  html.mv2 .bgg-card-old { font-size: 12px !important; }
  html.mv2 .bgg-badge { border-radius: 8px !important; }

  /* Heart top-right and the round "+" (quick view / add) bottom-right, always shown. */
  html.mv2 .bgg-card-actions {
    opacity: 1 !important; transform: none !important;
    inset: 0 !important;
    pointer-events: none;
  }
  html.mv2 .bgg-card-act {
    pointer-events: auto;
    position: absolute !important;
    width: 34px !important; height: 34px !important;
    border-radius: 17px !important;
    border: 0 !important;
    display: flex !important; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(15,23,42,.12) !important;
  }
  html.mv2 .bgg-card-act.ox-wish-toggle { top: 8px; right: 8px; background: rgba(255,255,255,.92) !important; color: var(--mv2-ink) !important; }
  html.mv2 .bgg-card-act.ox-qv-trigger { bottom: 8px; right: 8px; background: var(--mv2-navy) !important; color: #FFFFFF !important; }
  html.mv2 .bgg-card-act.ox-qv-trigger i { display: none; }
  html.mv2 .bgg-card-act.ox-qv-trigger::before {
    content: ""; width: 14px; height: 14px;
    background:
      linear-gradient(#FFFFFF, #FFFFFF) center / 14px 2px no-repeat,
      linear-gradient(#FFFFFF, #FFFFFF) center / 2px 14px no-repeat;
  }
  html.mv2 .bgg-card-badges { top: 8px !important; left: 8px !important; }

  html.mv2 .bgg-load-more-btn {
    height: 48px; padding: 0 24px !important;
    border-radius: 24px !important;
    background: var(--mv2-navy) !important; color: #FFFFFF !important; border: 0 !important;
  }

  /* ── Inner pages ── */
  /* Title band under the dark header: plain title on the grey ground instead. */
  html.mv2 .bgg-shop-hero {
    background: transparent !important;
    background-image: none !important;
    padding: 14px 0 0 !important;
    min-height: 0 !important;
    border: 0 !important;
  }
  html.mv2 .bgg-shop-hero::before, html.mv2 .bgg-shop-hero::after { display: none !important; }
  html.mv2 .bgg-shop-hero-inner { display: flex !important; flex-direction: column-reverse; align-items: flex-start !important; gap: 4px !important; }
  html.mv2 .bgg-shop-hero-title { color: var(--mv2-ink) !important; font-size: 22px !important; font-weight: 700 !important; margin: 0 !important; }
  html.mv2 .bgg-shop-hero-sub { color: var(--mv2-muted) !important; }
  html.mv2 .bgg-shop-hero .bgg-breadcrumb, html.mv2 .bgg-shop-hero .bgg-breadcrumb a,
  html.mv2 .bgg-shop-hero .bgg-breadcrumb * { color: var(--mv2-muted) !important; font-size: 12.5px !important; }

  /* Contact / policy pages: same, from their inline gradient band. */
  html.mv2 section.py-4.border-bottom[style*="linear-gradient"] {
    background: transparent !important; border: 0 !important; padding: 14px 0 0 !important;
  }
  html.mv2 section.py-4.border-bottom[style*="linear-gradient"] .text-white,
  html.mv2 section.py-4.border-bottom[style*="linear-gradient"] .text-white * { color: var(--mv2-ink) !important; }
  html.mv2 section.py-4.border-bottom[style*="linear-gradient"] .breadcrumb,
  html.mv2 section.py-4.border-bottom[style*="linear-gradient"] .breadcrumb * { color: var(--mv2-muted) !important; font-size: 12.5px; }
  html.mv2 section.py-4.border-bottom[style*="linear-gradient"] h1 { font-size: 22px !important; font-weight: 700 !important; }

  /* Shop toolbar */
  html.mv2 .bgg-shop-toolbar { border: 0 !important; border-radius: 16px !important; box-shadow: none !important; }
  html.mv2 .bgg-filter-toggle, html.mv2 .bgg-sort-select {
    height: 44px !important; border-radius: 12px !important; font-size: 15px !important;
  }

  /* Generic cards, buttons and fields on inner pages */
  html.mv2 .container .card {
    border: 0 !important; border-radius: 18px !important; box-shadow: none !important;
  }
  html.mv2 input[type="text"], html.mv2 input[type="email"], html.mv2 input[type="tel"],
  html.mv2 input[type="password"], html.mv2 input[type="number"], html.mv2 input[type="search"],
  html.mv2 select, html.mv2 textarea {
    font-size: 16px !important; /* stops iOS zooming into the field */
  }
  html.mv2 input.form-control, html.mv2 select.form-select { min-height: 46px; border-radius: 12px !important; }
  html.mv2 textarea.form-control { border-radius: 12px !important; }
  html.mv2 .btn { border-radius: 12px !important; }

  /* Sign-in / register logo: the GIF's white box reads as a badge */
  html.mv2 .bgg-auth-logo { border-radius: 14px; }
}

/* ==========================================================================
   Orange gradient accents (2026-10-15): search button, active tab, Buy now,
   and the header menu button.
   ========================================================================== */
:root { --mv2-grad: linear-gradient(135deg, #FF8A1F 0%, #F26B0F 48%, #D94F00 100%); }

@media (max-width: 767px) {
  html.mv2 .ox-search-submit,
  html.mv2 .bgg-bn-item.bgg-bn-active,
  html.mv2 .bgg-bn-item.bgg-bn-active:hover,
  html.mv2 .ep2-sticky-buy {
    background: var(--mv2-grad) !important;
    box-shadow: 0 4px 12px rgba(228, 97, 3, .35);
  }
  html.mv2 .ox-mainhead .ox-icon-btn.d-xl-none,
  html.mv2 .ox-mainhead .ox-icon-btn.d-xl-none:active {
    background: var(--mv2-grad) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(228, 97, 3, .35);
  }
  html.mv2 .ox-mainhead .ox-icon-btn.d-xl-none:active { filter: brightness(.94); }
}

/* ==========================================================================
   Checkout "Your Items" on phones (any visitor): the 5-across row cut the
   name to "4 i…" and pushed the unit price under the quantity box. Two rows:
     [photo] name (2 lines) / unit price ........ [delete]
     [photo] [ − 1 + ] ........................... line total
   ========================================================================== */
@media (max-width: 575px) {
  .ep-item {
    grid-template-columns: 64px minmax(0, 1fr) auto !important;
    grid-template-areas: "img info del" "img qty line";
    column-gap: 12px !important;
    row-gap: 10px !important;
    align-items: start !important;
  }
  .ep-item-img  { grid-area: img; width: 64px !important; height: 64px !important; }
  .ep-item-info { grid-area: info; min-width: 0; }
  .ep-item-name {
    max-width: none !important;
    white-space: normal !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ep-item-price { margin-top: 2px !important; }
  .ep-item-del  { grid-area: del; justify-self: end; }
  .ep-item-qty  { grid-area: qty; justify-self: start; align-self: center; }
  .ep-item-line { grid-area: line; align-self: center; min-width: 0 !important; }
}