/* Selection guide fix, including desktop screens.
   The original float + fixed 150px height lets its image overlap the next section. */
.boxB {
  width: 800px;
  max-width: 100%;
  margin: 0 auto 18px;
  display: flow-root;
  clear: both;
}
.boxB > .box4 {
  float: none;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.boxB > .box4 > .box5 {
  float: none;
  width: 420px;
  max-width: 100%;
  height: auto;
  padding: 7px;
  margin: 0 auto 12px;
  text-align: center;
  box-sizing: border-box;
}
.boxB > .box4 > .box5 img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
}
.boxB + table { clear: both; margin-left: auto; margin-right: auto; }

/* mill.html responsive trial: only applies to screens up to 767px.
   Keep css/style.css in place for desktop presentation. */
@media screen and (max-width: 767px) {
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; padding: 10px 12px 24px; box-sizing: border-box; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
  body *, body *::before, body *::after { box-sizing: border-box; }
  body > center { display: block; width: 100%; max-width: 100%; text-align: center; }
  .box0, .boxB, .box4, .box5, .boxA, .box1, .box2, .box3 {
    width: 100% !important; max-width: 100% !important;
    float: none !important; margin-left: auto !important; margin-right: auto !important;
  }
  .box0 h1 { font-size: 1.35rem; line-height: 1.45; margin: 0.6em 0; }
  .boxB, .boxA { overflow: visible; }
  .box1 { padding: 8px 10px !important; text-align: left; }
  .box1 h3 { margin: 0; font-size: 1.05rem; line-height: 1.5; }
  .box2 { padding: 12px 8px; text-align: center; }
  .box3 { height: auto !important; min-height: 0; padding: 12px !important; text-align: left; }
  .box3 ul { margin: 0.3em 0 0.8em; padding-left: 1.5em; }
  .box3 li { margin-bottom: 0.4em; }
  /* Selection guide: .boxB > .box4 > .box5 (not a product row). */
  .boxB { display: block !important; width: 100% !important; clear: both; }
  .boxB > .box4 { display: block !important; width: 100% !important; float: none !important; text-align: center; }
  .boxB > .box4 > .box5 {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 440px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 12px !important;
    text-align: center;
  }
  .boxB > .box4 > .box5 img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
  .boxB > .box4 > hr { display: block; clear: both; }

  img { max-width: 100%; height: auto; }
  hr, hr[width="800"] { width: 100% !important; max-width: 100%; }
  /* On this particular page, tables are used for layout, not specifications. */
  table { width: 100% !important; max-width: 100%; border-collapse: collapse; }
  table tr, table td { max-width: 100%; }
  table td { width: auto !important; height: auto !important; }
  /* Footer's 200px logo column and 600px link column must stack on phones. */
  table:last-of-type, table:last-of-type tbody, table:last-of-type tr,
  table:last-of-type td { display: block; width: 100% !important; }
  table:last-of-type td { padding: 6px 0; }
  a { overflow-wrap: anywhere; }
}