/**
 * responsive.css
 * Breakpoint-specific overrides that don't belong in layout.css's
 * structural rules. Mobile styles are the default throughout the
 * other CSS files; this file only adds desktop/tablet refinements.
 */

/* Tablet: two-column product grid for search results */
@media (min-width: 640px) {
  .results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
}

@media (min-width: 900px) {
  .results-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Desktop table view replaces history cards */
  .history-cards { display: none; }
  .data-table-wrap { display: block; }
}

@media (max-width: 899px) {
  .data-table-wrap { display: none; }
}

/* Desktop: wider two-pane layout for Price Manager */
@media (min-width: 900px) {
  .two-pane {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-5);
    align-items: start;
  }
}

/* Keep long/wide content (tables) scrollable within itself, never the page */
.scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}