/* Mobile horizontal gutters — loaded last so layout insets stay consistent site-wide */

@media (max-width: 1080px) {
  html {
    overflow-x: clip;
  }

  body[class$="-page"],
  body.home-page {
    overflow-x: clip;
    max-width: 100%;
  }

  body[class$="-page"] main,
  body.home-page main {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  .container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: auto;
    padding-left: max(20px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(20px, env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box;
  }

  /* Full-bleed rails outside .container */
  .rj-collection__clip {
    padding-left: max(20px, env(safe-area-inset-left, 0px));
    padding-right: max(20px, env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  /* Full-width cards inside padded containers (Quick find, etc.) */
  .container > .rj-finder,
  .container > .stk-finder {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Legacy markup: component + container on one node */
  .rj-finder.container,
  .stk-finder.container {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
  }
}