/* ePasal desktop website layout — widens the app into a real desktop page instead of a
   narrow floating phone column, and turns the horizontal-scroll product rows into
   proper multi-column grids. Native app is completely unaffected (gated by html.web,
   which the app's own boot script only ever adds outside the Capacitor app). Phones and
   narrow browser windows are also unaffected — everything here is gated to wide screens. */
@media (min-width:900px){
  html.web body{max-width:1180px !important}

  /* Section padding scales up a bit with the extra room */
  html.web .sec{padding:32px 40px 0 !important}
  html.web .sec-t{font-size:19px !important}

  /* Horizontal-scroll rows -> wrapping multi-column grids, Amazon-style */
  html.web .rail{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important;
    overflow:visible !important;
    margin:0 !important;
  }
  /* Cards inside a rail were sized for horizontal scrolling (fixed min/max-width,
     flex-basis) — let them fill their grid cell instead so columns line up cleanly */
  html.web .rail > *{min-width:0 !important;max-width:none !important;flex:none !important}

  /* The two inline product/category grids get more columns where there's room */
  html.web .ep-grid3{grid-template-columns:repeat(6,1fr) !important}  /* bestsellers shows up to 6 categories — one clean row */
  html.web .ep-grid4{grid-template-columns:repeat(5,1fr) !important}  /* grocery grid shows up to 10 — two even rows */

  /* Header / search / category-tab rows: cap at a sensible width and center them,
     so they read as a proper page header instead of stretching edge to edge */
  html.web .page > div:first-child,
  html.web .page > div:nth-child(2){max-width:1180px;margin-left:auto;margin-right:auto;width:100%}

  /* Bottom tab bar stays a compact floating pill rather than stretching full-width */
  html.web .bnav{max-width:480px !important}

}