/* En Stock — centered storefront shell + mobile-safe width
   Restores the original contained desktop layout without changing catalog/business logic. */
:root{--storefront-shell:1400px}

@media (min-width:821px){
  body:not(.adminBody) #app{
    width:min(var(--storefront-shell),calc(100% - 40px))!important;
    max-width:var(--storefront-shell)!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body:not(.adminBody) #siteHeaderMount .nav{
    width:min(var(--storefront-shell),calc(100% - 40px))!important;
    max-width:var(--storefront-shell)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body:not(.adminBody) .siteFooter{
    width:min(var(--storefront-shell),calc(100% - 40px))!important;
    max-width:var(--storefront-shell)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Tablet/phone: use the viewport safely, never create sideways page scrolling. */
@media (max-width:820px){
  html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important}
  body:not(.adminBody) #app{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0 auto!important;
  }
  body:not(.adminBody) #app > *{min-width:0!important;max-width:100%!important}
  body:not(.adminBody) .categoryCollectionBanner,
  body:not(.adminBody) .categoryHero,
  body:not(.adminBody) .grid,
  body:not(.adminBody) .detail,
  body:not(.adminBody) .accountShell,
  body:not(.adminBody) .cartShell,
  body:not(.adminBody) .checkoutShell{
    min-width:0!important;
    max-width:100%!important;
  }
}

/* Very small phones: one product per row prevents cramped/cut cards. */
@media (max-width:390px){
  body:not(.adminBody) #app .grid{grid-template-columns:1fr!important}
  body:not(.adminBody) #app .card{width:100%!important;min-width:0!important}
}