/**
 * apm-responsive-v2.css — ONLY unified storefront breakpoints.
 *
 * Contract:
 *   - Tablet / small-tablet: max-width 576px
 *   - Mobile: max-width 400px
 *
 * Add layout rules for these cutovers here (or in apm-{feature}-v2.css files).
 * Do not add other max-width breakpoints without team agreement.
 */

/* Tablet and below — 576px */
@media (max-width: 576px) {
  .apm-container-v2 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .apm-sec-head-v2 h2 {
    font-size: 26px;
  }

  .apm-grid-cards-v2 {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* Mobile — 400px */
@media (max-width: 400px) {
  .apm-grid-cards-v2 {
    grid-template-columns: 1fr;
  }

  .apm-sec-head-v2 {
    flex-direction: column;
    align-items: flex-start;
  }
}