/* Responsive finishing rules for the database-backed Beat Store. */
.genre-card-name,.genre-card-count{font-size:.76rem}
.beats-heading,
.beat-row,
.checkout-panel,
.cart-panel,
.cart-item,
.admin-card {
  min-width: 0;
}

.beat-description,
.checkout-description,
.checkout-player-now,
.cart-heading > p,
.cart-download-link {
  overflow-wrap: anywhere;
}

.paypal-wrap,
.paypal-wrap #paypalButtons,
.cart-panel #paypalButtons {
  min-width: 0;
  max-width: 100%;
}

.cart-download-link {
  max-width: 100%;
}

.admin-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.admin-table {
  min-width: 650px;
}

.admin-card input,
.admin-card select,
.admin-card textarea {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 760px) {
  .beats-section {
    padding-top: 54px;
    padding-bottom: 48px;
  }

  .beats-heading {
    margin-bottom: 22px;
  }

  .beats-heading h2 {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .beat-meta {
    line-height: 1.5;
  }

  .beat-price small {
    white-space: normal;
  }

  .beat-buy {
    margin: 0;
    white-space: normal;
    text-align: center;
  }

  .cart-total {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .cart-total > span {
    flex: 1 1 180px;
  }

  .checkout-preview-controls {
    min-width: 0;
  }

  .checkout-player-now {
    min-width: 0;
  }

  .admin-wrap {
    padding: var(--page-header-offset, 96px) 18px 56px;
  }

  .admin-wrap h1 {
    font-size: 1.8rem;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .admin-card {
    padding: 18px;
  }

  .admin-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .beat-row {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 10px;
    row-gap: 8px;
    padding: 15px 8px;
  }

  .beat-number {
    grid-column: 1;
    grid-row: 1;
  }

  .beat-main {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .beat-play {
    grid-column: 1;
    grid-row: 2;
    width: 44px;
    height: 44px;
    justify-self: center;
  }

  .genre-tab {
    min-height: 44px;
  }

  .beat-price {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    text-align: left;
  }

  .beat-buy {
    grid-column: 1 / -1;
    grid-row: 4;
    justify-self: stretch;
    width: 100%;
    max-width: none;
  }

  .beat-description {
    font-size: 0.76rem;
  }

  .beat-meta {
    column-gap: 8px;
  }

  .player-now {
    align-items: flex-start;
  }

  .player-now > span:nth-child(2) {
    flex: 1 1 calc(100% - 24px);
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .cart-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cart-item-details {
    min-width: 0;
  }

  .cart-item-price {
    justify-items: start;
  }

  .cart-item-price small {
    white-space: normal;
  }

  .cart-remove {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
  }

  .admin-wrap {
    padding-inline: 12px;
  }

  .admin-card {
    padding: 15px 12px;
    margin-block: 16px;
  }
}

@media (max-width: 400px) {
  .container {
    padding-inline: 18px;
  }

  .genre-nav {
    margin-inline: -4px;
  }

  .genre-tab {
    padding-inline: 12px;
  }

  .format-choices {
    grid-template-columns: minmax(0, 1fr);
  }

  .format-choice {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .format-price {
    grid-column: 2;
  }

  .checkout-panel,
  .cart-panel {
    padding: 15px 12px;
  }

  .cart-total {
    gap: 8px;
  }

  .cart-total strong {
    font-size: 1rem;
  }

  .checkout-preview-controls {
    gap: 8px;
  }

  .admin-table {
    min-width: 620px;
  }
}