/* ==========================================================================
   Mobile / tablet layer for the G.M. Traders theme.
   The original theme is a fixed 1000px layout; every rule here only applies
   below 1024px, so the desktop rendering stays pixel-identical.
   ========================================================================== */

img { max-width: 100%; }

/* ---------------- Tablet & below ---------------- */
@media screen and (max-width: 1023px) {

  /* Fixed-width containers become fluid */
  .aa, .ab, .ah, .al, .ao, .ap, .aq, .w770 {
    width: 100% !important;
    box-sizing: border-box;
  }
  .ab { padding: 0 12px; }
  .al, .ao { margin-left: 0; }
  .ag { width: 100% !important; padding: 0 10px; box-sizing: border-box; }

  /* --- Header / navigation --- */
  .l.z1 { float: none; width: 100%; text-align: center; }
  .ac {
    float: none !important;
    display: inline-block;
    height: auto;
    margin: 15px auto 0 !important;
    top: 0;
  }
  .ac img { float: none; height: 90px; width: auto; }

  .w770 { display: flex; }
  .w770 > .l { flex: 1 1 20%; float: none; }
  .ad, .ad1, .ad2, .ad2:hover {
    width: 100% !important;
    box-sizing: border-box;
    padding: 12px 2px !important;
    font-size: 12px;
    letter-spacing: 0;
  }
  .ad img { float: none; display: block; margin: 0 auto; height: 28px; width: auto; }
  .ad .h20 { height: 6px; }

  /* Products category drop-down: let it grow with content
     (!important also beats the jQuery-animated inline height) */
  #list { height: auto !important; }
  .prolist { width: 100%; box-sizing: border-box; padding: 12px; }
  .prolist .l { width: 50%; box-sizing: border-box; padding: 4px; }
  .an {
    width: 100% !important;
    box-sizing: border-box;
    font-size: 15px;
    padding: 6px 4px !important;
    border: 1px solid #fadb89;
  }

  /* --- Home slider ---
     Slides are 1600x450 (28.1% ratio); scale the fixed 450px height
     proportionally so nothing is cropped or letter-boxed. */
  .ei-slider { height: 28.2vw; min-height: 100px; }
  .ei-slider-large li img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
  }
  .ei-title h2 { font-size: 18px; }

  /* --- Product grid --- */
  .ba {
    width: 48% !important;
    box-sizing: border-box;
    margin: 1%;
    padding: 12px 6px 6px;
    border: 1px dashed #ccc;
  }
  .ba img, .ba a img {
    width: 100% !important;
    height: auto !important;
    float: none;
  }
  .bb { font-size: 14px; padding: 10px 0; }

  /* --- Contact page --- */
  .av, .av1 {
    width: 100% !important;
    height: auto;
    min-height: 0;
    border-left: 0;
    border-top: 1px dashed #ccc;
    padding: 20px 0;
  }
  .av:first-child { border-top: 0; }
  .av .h30 { height: 10px; }
  .al iframe { width: 100% !important; height: 320px !important; }

  /* --- Enquiry form --- */
  .aq { padding: 15px; }
  .ar {
    width: 100% !important;
    background: transparent;
    border-bottom: 0;
    text-align: left;
    padding-left: 0;
    height: auto;
  }
  .as, .at {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
    border: 1px solid #ddd;
  }
  .w210 { width: 0; }
  .au { margin-bottom: 8px; }

  /* Misc spacing tightening */
  .h60 { height: 30px; }
  .ap { margin: 30px 0; }
}

/* ---------------- Phones ---------------- */
@media screen and (max-width: 600px) {

  .ac img { height: 64px; }

  /* Nav: keep one row of 5, just smaller */
  .ad, .ad1, .ad2, .ad2:hover { font-size: 10px; padding: 8px 1px !important; }
  .ad img { height: 22px; }

  .prolist .l { width: 100%; padding: 3px 0; }

  /* Product grid: one card per row */
  .ba { width: 98% !important; }

  .ao { font-size: 20px; }
  .ag, .al, .ax { font-size: 16px; line-height: 28px; }

  .al iframe { height: 260px !important; }

  .au { width: 100%; box-sizing: border-box; margin: 0 0 10px; }
  .w30.h30, .w50.h30 { display: none; }
}