/* Shared Marketplace mobile navigation drawer */
.mp-mobile-menu-button,.mp-mobile-drawer,.mp-mobile-backdrop{display:none}
@media(max-width:850px){
  html.mp-drawer-open,body.mp-drawer-open{overflow:hidden!important;overscroll-behavior:none}
  .mp-mobile-menu-button{
    width:40px;height:40px;flex:0 0 40px;border:1px solid var(--line,#e6e1e8);
    border-radius:12px;background:#fff;color:var(--ink,#1c1b22);
    display:grid;place-items:center;cursor:pointer;position:relative;z-index:75;
    box-shadow:0 4px 15px rgba(31,25,42,.05)
  }
  .mp-mobile-menu-button svg{width:19px;height:19px}
  .mp-mobile-menu-button .mp-menu-bars{width:18px;height:14px;display:flex;flex-direction:column;justify-content:space-between}
  .mp-mobile-menu-button .mp-menu-bars i{display:block;width:18px;height:1.8px;border-radius:99px;background:currentColor}
  .mp-mobile-menu-button .mp-menu-badge{
    position:absolute;right:-4px;top:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;
    background:#6754d9;color:#fff;font-size:8px;font-weight:900;display:grid;place-items:center;border:2px solid #fff
  }
  .mp-mobile-menu-button .mp-menu-badge.hidden{display:none!important}

  /* Existing wide navigation is redundant once drawer is available */
  .topline>.action-chip:not(.cart),.track-head>nav,.simple-social-head>.social-head-actions{display:none!important}

  /*
   * Keep the existing PWA bottom navigation.
   * The drawer complements it rather than replacing it.
   */
  .bottom-nav{display:grid!important}

  .topline .mp-mobile-menu-button{margin-left:auto;order:80}
  .topline>.header-actions{order:90;margin-left:0!important}
  .topline>.header-actions .action-chip:not(.cart){display:none!important}
  .topline>.header-actions .action-chip.cart{display:flex!important}
  .topline>.cart.action-chip{margin-left:0;order:90}
  .track-head .mp-mobile-menu-button,.simple-social-head .mp-mobile-menu-button{margin-left:auto}

  .mp-mobile-backdrop{
    display:block;position:fixed;inset:0;z-index:7990;background:rgba(22,19,27,.42);
    opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)
  }
  .mp-mobile-backdrop.open{opacity:1;visibility:visible}

  .mp-mobile-drawer{
    display:flex;position:fixed;z-index:8000;top:0;right:0;bottom:0;width:min(86vw,350px);
    padding:calc(14px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));
    background:#fff;color:var(--ink,#1c1b22);box-shadow:-24px 0 70px rgba(26,20,33,.18);
    transform:translate3d(105%,0,0);transition:transform .24s cubic-bezier(.2,.75,.25,1);
    flex-direction:column;overflow:hidden
  }
  .mp-mobile-drawer.open{transform:translate3d(0,0,0)}
  .mp-mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 15px;border-bottom:1px solid #efebe7}
  .mp-mobile-drawer-brand{display:flex;align-items:center;gap:10px;min-width:0}
  .mp-mobile-drawer-mark{width:38px;height:38px;border-radius:12px 12px 12px 4px;background:#2c224a;color:#fff;display:grid;place-items:center;font-size:16px;font-weight:900}
  .mp-mobile-drawer-brand b{display:block;max-width:205px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
  .mp-mobile-drawer-brand small{display:block;margin-top:2px;color:#928c96;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
  .mp-mobile-drawer-close{width:36px;height:36px;border:0;border-radius:10px;background:#f5f3f5;color:#514b56;font-size:22px;line-height:1;cursor:pointer}

  .mp-mobile-profile{margin:13px 0 10px;padding:12px;border-radius:13px;background:#f7f5ef;display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
  .mp-mobile-profile-icon{width:34px;height:34px;border-radius:10px;background:#ebe6fb;color:#6754d9;display:grid;place-items:center}
  .mp-mobile-profile-icon svg{width:16px;height:16px}
  .mp-mobile-profile-copy{min-width:0;flex:1}.mp-mobile-profile-copy b{display:block;font-size:11px}.mp-mobile-profile-copy small{display:block;margin-top:2px;color:#8c8690;font-size:9px}
  .mp-mobile-profile-arrow{color:#8e8793}.mp-mobile-profile-arrow svg{width:14px;height:14px}

  .mp-mobile-nav-scroll{overflow-y:auto;overscroll-behavior:contain;padding:3px 0 12px;flex:1}
  .mp-mobile-nav-label{padding:12px 8px 6px;color:#aaa3ad;font-size:8px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}
  .mp-mobile-nav-link{
    min-height:47px;padding:0 10px;margin:2px 0;border-radius:11px;color:#4d4752;text-decoration:none;
    display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:11px;font-weight:800
  }
  .mp-mobile-nav-link:hover,.mp-mobile-nav-link.active{background:#f1edff;color:#5140bb}
  .mp-mobile-nav-link-icon{width:30px;height:30px;border-radius:9px;background:#f6f4f6;color:#6f6873;display:grid;place-items:center}
  .mp-mobile-nav-link.active .mp-mobile-nav-link-icon{background:#e8e1ff;color:#5b45ce}
  .mp-mobile-nav-link-icon svg{width:15px;height:15px}
  .mp-mobile-nav-count{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#f0edf2;color:#77707c;font-size:8px;display:grid;place-items:center}
  .mp-mobile-nav-link.active .mp-mobile-nav-count{background:#ddd5ff;color:#5540c5}
  .mp-mobile-nav-chevron svg{width:13px;height:13px}

  .mp-mobile-drawer-foot{padding-top:12px;border-top:1px solid #efebe7}
  .mp-mobile-drawer-foot a{min-height:42px;border-radius:10px;color:#665e69;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px;font-weight:850}
  .mp-mobile-drawer-foot svg{width:14px;height:14px}
  .mp-mobile-pwa-note{margin-top:7px;text-align:center;color:#aaa3ad;font-size:8px;line-height:1.45}

  /* Give compact headers a reliable place for the button */
  .topline,.track-head,.simple-social-head{position:relative}
}
@media(max-width:380px){
  .mp-mobile-drawer{width:90vw}
  .mp-mobile-drawer-brand b{max-width:170px}
}


/* Mobile PWA quick navigation + drawer coexistence */
@media(max-width:850px){
  .bottom-nav{
    position:fixed!important;
    left:8px!important;
    right:8px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    z-index:1200!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:4px!important;
    padding:5px!important;
    border:1px solid var(--line,#e6e1e8)!important;
    border-radius:20px!important;
    background:rgba(255,253,248,.96)!important;
    box-shadow:0 16px 48px rgba(28,27,34,.16)!important;
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
  }
  .bottom-nav>a,.bottom-nav>button{
    min-width:0!important;
    height:52px!important;
    padding:0 2px!important;
    border:0!important;
    border-radius:14px!important;
    background:transparent!important;
    color:var(--muted,#77717e)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    font-size:8px!important;
    font-weight:750!important;
    position:relative!important;
    text-decoration:none!important;
    cursor:pointer!important;
  }
  .bottom-nav>a.active{
    background:#2c224a!important;
    color:#fff!important;
  }
  .bottom-nav svg{width:18px!important;height:18px!important}
  .bottom-nav .mobile-cart b{
    position:absolute;top:1px;right:8px;min-width:17px;height:17px;
    padding:0 4px;border-radius:999px;background:#6754d9;color:#fff;
    font-size:8px;display:grid;place-items:center
  }
  .mp-bottom-more-icon{
    width:18px;height:18px;display:grid;grid-template-columns:repeat(3,4px);
    align-items:center;justify-content:center;gap:2px
  }
  .mp-bottom-more-icon i{
    display:block;width:4px;height:4px;border-radius:50%;background:currentColor
  }

  /* Ensure the main storefront menu button is not swallowed by header-actions. */
  .topline>.mp-mobile-menu-button{display:grid!important;visibility:visible!important;opacity:1!important}
  body{padding-bottom:78px}
}