/* Mobile-only Price Guide stability fix.
   Keep this scoped to phones so desktop grids in Browse List, For You,
   Favorites, and My Collection keep their original width/layout. */
@media (max-width:780px){
  html,
  body{
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  body{
    position:relative;
  }

  .container,
  #result{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
  }

  /* Scope overflow fixes to the Price Guide only. */
  .mc-price-guide,
  .mc-price-guide *,
  .mc-price-chart-card,
  .mc-price-chart-wrap,
  .mc-price-list,
  .mc-price-head,
  .mc-price-row{
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }

  .mc-price-chart-card,
  .mc-price-chart-wrap,
  .mc-price-list{
    overflow:hidden !important;
  }

  .mc-price-chart-wrap{
    width:100% !important;
    touch-action:pan-y !important;
  }

  .mc-price-chart-wrap svg{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .mc-price-head,
  .mc-price-row{
    width:100% !important;
  }

  .mc-price-picker-panel.open{
    max-width:calc(100vw - 24px) !important;
  }

  /* Keep the tab strip stable on mobile without changing desktop grids. */
  .mc-tabs{
    max-width:100% !important;
    overscroll-behavior-x:contain !important;
    scroll-padding-left:4px !important;
    scroll-padding-right:4px !important;
  }
}