/* Two fixes found by measuring every page at 390px. Both are inside a
   max-width query, so the desktop artboards are untouched. */

@media (max-width: 1024px) {

  /* The shop's bottom tab bar is a four-column grid, and a grid item defaults
     to min-width:auto - so the widest label pushed the bar 3px past the
     viewport. A fixed bar still counts toward scrollWidth, which is why the
     whole page could be nudged sideways by three pixels. */
  .jd-tabs { overflow: hidden; }
  .jd-tab { min-width: 0; }
  .jd-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The "Start with the room" chips are a two-column grid, but .jd-chip sets
     white-space:nowrap for the horizontal rails - so a long room name ran past
     its own button and took the page 3px wider than the screen. The rails
     still need nowrap; only the gridded ones wrap. */
  #rooms .jd-chip { white-space: normal; }
  #rooms .jd-chip > span { min-width: 0; overflow-wrap: anywhere; }


}