/* Mobile drawer for filters (keeps products visible by default) */
@media (max-width: 900px){
  .vp-wrap{ grid-template-columns: 1fr; }

  /* Sidebar becomes an off-canvas drawer */
  .vp-sidebar{
    display:none;
    position:fixed !important;
    inset:0;
    z-index:99999;
    padding:0;
    background:transparent;
    border-radius:0;
    max-height:none;
    overflow:visible;
  }
  .vp-sidebar.is-open{ display:block; }
  .vp-sidebar::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
  }
  .vp-sidebar-panel{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    max-height:85vh;
    overflow:auto;
    background:var(--vp-sidebar,#111827);
    color:#fff;
    padding:16px;
    border-radius:16px 16px 0 0;
    box-shadow:0 -18px 40px rgba(0,0,0,.25);
  }

  /* close button inside drawer */
  .vp-mobile-close{
    display:inline-grid;
    place-items:center;
    width:40px;
    height:40px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
    float:right;
    margin-bottom:10px;
  }
  .vp-mobile-close:hover{ background:rgba(255,255,255,.12); }

  /* Mobile bottom bar */
  .vp-mobilebar{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:99998;
    padding:10px;
    justify-content:center;
    background:rgba(17,24,39,.92);
    backdrop-filter: blur(6px);
  }
  .vp-mobilebar-btn{
    width:100%;
    max-width:560px;
    border:none;
    border-radius:14px;
    padding:12px 14px;
    background:#0EA5E9;
    color:#fff;
    font-weight:900;
    letter-spacing:.4px;
    cursor:pointer;
  }
  .vp-mobilebar-btn:active{ filter:brightness(.95); }

  /* Give space so the bar doesn't cover products */
  .vp-content{ padding-bottom:78px; }

  /* Lock background scroll when drawer is open */
  body.vp-drawer-open{ overflow:hidden; }
}