/**
 * Progressive responsive rules.
 * The base layer is mobile-first; these queries only enhance wider screens.
 */
.mxr-desktop-only {
  display: none !important;
}

.mxr-product-grid {
  display: grid;
  gap: var(--mxr-space-5);
  grid-template-columns: minmax(0, 1fr);
}

.mxr-editorial-grid {
  display: grid;
  gap: var(--mxr-space-5);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  :root {
    --mxr-container: min(100% - 3rem, 1180px);
    --mxr-container-wide: min(100% - 3rem, 1600px);
    --mxr-header-height: 4.5rem;
  }

  .mxr-mobile-only {
    display: none !important;
  }

  .mxr-desktop-only {
    display: initial !important;
  }

  .mxr-section {
    padding-block: var(--mxr-space-8);
  }

  .mxr-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mxr-editorial-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  }
}

@media (min-width: 64rem) {
  :root {
    --mxr-header-height: 5rem;
  }

  .mxr-section {
    padding-block: var(--mxr-space-9);
  }

  .mxr-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mxr-card {
    transition: background var(--mxr-transition-base), transform var(--mxr-transition-base);
  }

  .mxr-card:hover {
    background: var(--mxr-color-surface-high);
    transform: translateY(-2px);
  }
}

@media (min-width: 90rem) {
  .mxr-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}