/* ── Mobile overrides for Tranzform I.T. Supply Hub ── */

@media (max-width: 767px) {

  /* Top bar */
  .top-bar { padding: 5px 14px; font-size: 10px; gap: 10px; }

  /* Header — logo has inline height:42px/width:auto which makes it ~412px wide; override */
  .page-header { padding: 10px 14px; flex-wrap: wrap; gap: 8px; }
  .page-header .meta { font-size: 10px; text-align: left; }
  .header-left a img { height: auto !important; max-height: 34px; max-width: 55vw; }

  /* Nav: collapse from 5 cols → 3 cols */
  .cat-nav { grid-template-columns: repeat(3, 1fr); }
  .cat-nav-item.home-link { grid-column: 1 / -1; padding: 7px 14px; }
  .cat-nav-item { padding: 8px 6px 6px; font-size: 10px; }
  .nav-label { font-size: 10px; }
  .nav-count { font-size: 9px; }

  /* Strip side padding on utility bars / notices */
  .notice      { padding: 7px 14px; }
  .ctrl-bar    { padding: 8px 14px; }
  .toc-bar     { padding: 8px 14px; }
  .content     { padding: 10px 14px; }
  .cat-body    { padding: 8px; }

  /* Make product tables scroll horizontally instead of squishing */
  .sub-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    display: block;
  }
  table { min-width: 520px; }

  /* Slightly smaller product images */
  .img-cell              { width: 56px; min-width: 56px; }
  .img-cell img, .no-img { width: 48px; height: 48px; }
  table th:nth-child(1),
  table td:nth-child(1)  { width: 56px; }

  /* Footer */
  .page-footer  { padding: 12px 14px; }

  /* Index page */
  .index-intro  { padding: 12px 14px; }
  .index-grid   { grid-template-columns: repeat(2, 1fr); padding: 12px 14px; gap: 10px; }
}

@media (max-width: 480px) {

  /* Nav: 2-col on very small screens */
  .cat-nav { grid-template-columns: repeat(2, 1fr); }
  .cat-nav-item { padding: 8px 4px 6px; }
  .nav-count { font-size: 8px; }

  /* Tighter table images on tiny screens */
  table          { min-width: 440px; }
  .img-cell              { width: 44px; min-width: 44px; }
  .img-cell img, .no-img { width: 38px; height: 38px; }
  table th:nth-child(1),
  table td:nth-child(1)  { width: 44px; }
  table th:nth-child(3),
  table td:nth-child(3)  { width: 80px; }
  table th:nth-child(4),
  table td:nth-child(4)  { width: 80px; }
  table th:nth-child(5),
  table td:nth-child(5)  { width: 70px; }
  table th:nth-child(6),
  table td:nth-child(6)  { width: 70px; }

  /* Single-column index grid on tiny screens */
  .index-grid { grid-template-columns: 1fr; }

  /* Wrap control-bar buttons more tightly */
  .ctrl-bar button { padding: 4px 9px; font-size: 10.5px; }
}