/* ===========================================================================
   Hot Products USA - legacy page responsive layer
   ---------------------------------------------------------------------------
   Every pre-existing page on the site is built the same way: a fixed
   <TABLE width="760" border="1" align="center"> wrapper, a nested 100% table,
   then rows for the header, the content and the footer.

   This stylesheet does not rewrite that markup. It neutralises the fixed
   wrapper so the page becomes fluid, and then applies phone-sized rules at
   the bottom. It is loaded by _header.php, so all legacy pages pick it up
   automatically.

   It is deliberately additive: Style.css is untouched, so anything that
   already looks right keeps looking right.
   =========================================================================== */

/* ---------- 1. the fixed 760px wrapper becomes a fluid column ------------ */
body > table,
body > table[width="760"]{
  width:100% !important;
  max-width:1060px !important;
  margin:0 auto !important;
  border:0 !important;
  border-collapse:collapse !important;
  background:transparent;
}
body > table > tbody > tr > td,
body > table > tr > td{
  border:0 !important;
  padding:0;
}

/* the inner 100% table should fill the column, not sit in a 1px box */
body > table > tbody > tr > td > table{
  border:0 !important;
}

/* ---------- 2. nothing may be wider than its container ------------------- */
img{
  max-width:100%;
  height:auto;
}

/* A replaced element with max-width:100% reports a min-content width of
   zero, because the percentage cannot be resolved while the table is being
   measured. In auto table layout that means the cell holding the image is
   given no space at all and the image renders 0x0 - which is what made the
   catalog cover in the home page rail and the MAS90 product thumbnails on
   the inventory lookup page disappear. Legacy pages put almost every
   meaningful image inside a table cell, so cells keep intrinsic sizing and
   the container rules above handle the rest. */
td img,
th img{
  max-width:none;
}

table{
  max-width:100%;
}

/* ---------- 3. header band sits flush inside the column ------------------ */
.hp-head{
  max-width:1060px;
  margin:0 auto;
}

/* the utility strip and nav are full-bleed inside the column */
.hp-head .hp-wrap{
  padding-left:22px;
  padding-right:22px;
}

/* ---------- 4. content gets readable breathing room ---------------------- */
body > table > tbody > tr > td > table > tbody > tr > td{
  vertical-align:top;
}

/* ---------- 5. data tables scroll instead of bursting the page ----------- */
table.display{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ===========================================================================
   PHONE / SMALL TABLET
   =========================================================================== */
@media (max-width:760px){

  html,
  body{
    overflow-x:hidden;
    max-width:100%;
  }

  body > table,
  body > table > tbody > tr > td{
    width:100% !important;
    max-width:100vw !important;
    display:block;
  }

  /* the header row and content row are block-level so nothing sits beside
     anything else on a narrow screen */
  body > table > tbody > tr > td > table > tbody > tr > td{
    display:block;
    width:100% !important;
  }

  /* hard-coded column widths must give way */
  td[width],
  th[width]{
    width:auto !important;
  }
  table[width="100"],
  table[width="760"],
  table[width="600"],
  table[width="500"],
  table[width="400"],
  table[width="300"]{
    width:100% !important;
  }

  /* DataTables lists scroll sideways rather than squeezing every column.
     Without nowrap the browser shrinks cells until headers break mid-word
     ("Actio n"), which is far harder to read than a short scroll. */
  table.display{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  table.display th,
  table.display td{
    white-space:nowrap;
  }
  table.display th,
  table.display td{
    padding:6px 8px;
  }

  /* 16px inputs stop iOS from zooming the whole page on focus */
  input[type=text],
  input[type=email],
  input[type=tel],
  input[type=password],
  input[type=search],
  input[type=number],
  input[type=url],
  select,
  textarea{
    font-size:16px !important;
    max-width:100%;
    box-sizing:border-box;
  }

  /* comfortable tap targets */
  input[type=submit],
  input[type=button],
  button,
  .btn-system{
    min-height:44px;
  }


  /* The admin strip has no hamburger of its own. Rather than hiding it
     outright on a phone (which strands admins on whatever page they landed
     on), let it scroll horizontally as a compact row of tabs. */
  .hp-head{ max-width:100%; }
  /* The admin strip has no hamburger of its own. Hiding it outright would
     strand admins on whatever page they landed on, so it wraps into a few
     rows of compact tabs instead. Wrapping (rather than a horizontal
     scroller) keeps the min-content width small, which stops the legacy
     layout table from stretching past the viewport. */
  .hp-nav.admin{
    display:flex;
    flex-wrap:wrap;
    gap:1px;
    width:100%;
    max-width:100%;
  }
  .hp-nav.admin a{
    display:flex !important;
    flex:1 1 auto;
    justify-content:center;
    padding:9px 10px;
    min-height:40px;
    font-size:11px;
    white-space:nowrap;
  }

  /* long unbroken strings (part numbers, emails) must not push the page out */
  body{
    word-wrap:break-word;
    overflow-wrap:break-word;
  }

  /* legacy two-column content rows stack cleanly */
  .hp-head .hp-wrap{
    padding-left:14px;
    padding-right:14px;
  }
}

/* very narrow phones */
@media (max-width:380px){
  body > table > tbody > tr > td > table > tbody > tr > td{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}