/* ============================================================
   KABIN DEALER ESTIMATOR — MOBILE OVERRIDES
   ------------------------------------------------------------
   Loaded after styles.css. Targets phones only (<=480px).
   Line items reflow from the desktop horizontal-scroll table
   into stacked cards, using the SAME markup as desktop — no JS
   changes needed here, just grid-template-areas + data-label
   pseudo-elements to relabel fields once the column headers
   are hidden.
   ============================================================ */

@media (max-width: 480px) {

  .frame { padding: 28px 20px 24px; }
  h1 { font-size: 24px; }
  .logo { height: 48px; }

  /* ---------- Line items: stacked cards, no horizontal scroll ---------- */

  .table {
    overflow-x: visible;
  }

  .row.row-head { display: none; }

  .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "product product"
      "qty      remove"
      "list     landed"
      "enduser  linetotal";
    gap: 10px 14px;
    min-width: 0;
    padding: 16px 14px;
    margin-bottom: 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
  }

  .row-product-wrap {
    grid-area: product;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .row-product { width: 100%; }

  .row-qty-wrap {
    grid-area: qty;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .row-mobile-label {
    display: block;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .row-qty { width: 50%; }

  .row-remove {
    grid-area: remove;
    justify-self: end;
    align-self: start;
    font-size: 22px;
  }

  .row-list { grid-area: list; }
  .row-landed { grid-area: landed; }
  .row-enduser { grid-area: enduser; }
  .row-linetotal { grid-area: linetotal; }

  .row-cell {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .row-cell::before {
    display: block;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }

  .add-row { width: 100%; text-align: center; }

  /* ---------- Totals ---------- */

  .totals {
    grid-template-columns: 1fr;
  }

  /* ---------- Footer ---------- */

  .footer {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}