/* ============================================================================
   BILA — DESKTOP / WIDE-SCREEN OVERRIDES
   Load this AFTER your existing app styles (theme.css / app.css).
   No HTML or JS changes required — pure CSS override layer.
   Mobile (<860px) is untouched: same phone-app experience as today.
   ============================================================================ */

@media (min-width: 860px) {

  /* Let the app fill the real viewport instead of a fixed phone frame */
  body{
    padding: 0;
    align-items: stretch;
    background: var(--bg);
  }
  .frame{
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-width: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  /* Cap each app-shell section at a comfortable reading/shopping width
     and center it, so content doesn't stretch edge-to-edge on big monitors */
  .app-header,
  .search-row,
  .tabs-row,
  .grid-area,
  .bottom-nav{
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Product grid: stop horizontal swipe-paging, stack pages vertically,
     and let cards flow into as many columns as fit */
  .pager{
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
    gap: 16px;
  }
  .page{
    flex: none;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-template-rows: none;
    height: auto;
  }
  .card{
    height: auto;
  }
  .card .img{
    flex: none;
    aspect-ratio: 1 / 1;
  }
  /* Pagination dots only make sense for swipe paging on mobile */
  .dots{
    display: none;
  }

  /* Orders list can also breathe a bit wider */
  .orders-list{
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }

  /* Overlays (search, menu, cart, checkout, personal order, errand, support,
     settings) become a docked side panel instead of a full-bleed takeover */
  .overlay{
    max-width: 480px;
    left: auto;
    right: 0;
    margin-left: auto;
    border-left: 1px solid var(--line);
    box-shadow: -20px 0 50px rgba(0,0,0,0.12);
  }
}

/* Extra breathing room on very large monitors */
@media (min-width: 1440px) {
  .page{
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}