/* ============================================================
   responsive.css — Mobile-friendly overrides for Cool Ass Parts
   Loaded AFTER style.css and each page's inline <style>, so these
   rules win. Desktop appearance is UNCHANGED (the phone-only rules
   live inside the @media block at the bottom).
   ============================================================ */

/* Use real screen width instead of a rigid 900px.
   Desktop still renders up to 900px, centered — no visible change. */
html, body {
  width: auto !important;
  max-width: 900px !important;
  margin: 10px auto !important;
}

/* Images scale to fit and keep their proportions.
   Overrides the hard-coded width/height baked into every <img>. */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* Never let an oversized table force sideways scrolling. */
table {
  max-width: 100% !important;
}

/* -------------------- PHONES (768px and narrower) -------------------- */
@media screen and (max-width: 768px) {

  html, body {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;            /* kill any leftover horizontal scroll */
  }

  /* Collapse the fixed-width nested tables into one stacked column
     so nothing gets squeezed off the side of the screen. */
  table, tbody, tr, td {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  td { text-align: center !important; }

  /* Thin out the heavy blue outer border so it doesn't eat the screen */
  body > table[border] { border-width: 2px !important; }

  /* Make the PayPal size dropdowns and buy buttons touch-friendly */
  select, input[type="image"] {
    max-width: 92% !important;
    margin: 6px auto !important;
  }
}