
/* Kids overflowed 87px at 360px. The cause: an unnamed <section> sitting
   inside .ls-entry-inner rendered 397px wide inside a 312px parent, dragging
   ~900 descendants past the edge with it. Constraining that section (and the
   min-width:auto that flex/grid children default to) fixes it at source rather
   than clipping the page.
   The .kd-kids children strip is a DELIBERATE horizontal scroller and is left
   alone. */
@media (max-width:900px){
  #page-kids .ls-entry-inner,
  #page-kids .ls-entry{ max-width:100% !important; }
  #page-kids .ls-entry-inner > section,
  #page-kids .ls-entry-inner section{
    width:100% !important; max-width:100% !important; box-sizing:border-box !important; }
  /* flex and grid items default to min-width:auto, so a wide child refuses to
     shrink and pushes its parent out */
  #page-kids .ls-entry-inner *:not(.kd-kids):not(.kd-kids *){ min-width:0; }
  #page-kids .chef-explorer-section,
  #page-kids .chef-explorer-wrap,
  #page-kids .kcp,
  #page-kids .ff2-section,
  #page-kids .container{ max-width:100% !important; box-sizing:border-box !important; }
  #page-kids img:not(.kd-av){ max-width:100%; height:auto; }
  /* the children strip keeps its own sideways scroll */
  #page-kids .kd-kids{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
}
