/* Buy page — mobile-first responsive layout */

.page-buy .app-main {
  overflow-x: hidden;
}

.buy-page {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* Header */
.buy-page__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.buy-page__header-text {
  flex: 1 1 12rem;
  min-width: 0;
}

.buy-page__subtitle {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0.25rem 0 0;
  line-height: 1.45;
}

.buy-page__header .btn {
  flex-shrink: 0;
  align-self: center;
}

/* Filter form */
.buy-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  width: 100%;
  min-width: 0;
}

.buy-filters__search {
  grid-column: 1 / -1;
}

.buy-filters .form-input,
.buy-filters .form-select {
  min-width: 0;
  width: 100%;
  font-size: 0.8125rem;
  padding: 0.625rem 0.75rem;
}

@media (min-width: 480px) {
  .buy-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .buy-filters {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .buy-filters .form-input,
  .buy-filters .form-select {
    font-size: var(--text-sm);
    padding: 0.75rem 1rem;
  }
}

/* Product grid */
.buy-page__grid {
  width: 100%;
  max-width: 100%;
}

.page-buy .device-card--compact .device-card__meta {
  max-height: none;
  flex-wrap: wrap;
}

@media (max-width: 380px) {
  .page-buy .device-card--compact .device-card__meta .badge:nth-child(n + 3) {
    display: none;
  }

  .page-buy .device-card__footer--compact .btn {
    font-size: 0.625rem;
    padding: 0.375rem 0.3125rem;
    letter-spacing: -0.01em;
  }
}

@media (max-width: 320px) {
  .buy-page__header {
    flex-direction: column;
    align-items: stretch;
  }

  .buy-page__header .btn {
    width: 100%;
    justify-content: center;
  }

  .buy-filters {
    grid-template-columns: 1fr;
  }
}