/* Compact mobile catalog toolbar matched to the reference layout. */
@media (max-width: 767px) {
  body[data-member-page="catalog"] .page-title {
    margin-bottom: 20px;
  }

  body[data-member-page="catalog"] .catalog-shell .catalog-controls {
    min-height: 64px;
    justify-content: flex-start;
    gap: 12px;
  }

  body[data-member-page="catalog"] .catalog-periods {
    box-sizing: border-box;
    width: 252px;
    min-width: 0;
    max-width: calc(100% - 72px);
    min-height: 40px;
    height: 40px;
    flex: 0 1 252px;
    display: grid;
    grid-template-columns: minmax(42px, 46px) minmax(52px, 58px) minmax(58px, 66px) minmax(66px, 74px);
    align-items: stretch;
    padding: 4px;
  }

  body[data-member-page="catalog"] .catalog-period {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    height: 32px;
    flex: none;
    padding: 6px 2px;
    color: var(--muted) !important;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500 !important;
  }

  body[data-member-page="catalog"] .catalog-period.active,
  body[data-member-page="catalog"] .catalog-period.active:hover,
  body[data-member-page="catalog"] .catalog-period.active:focus-visible {
    color: #fff !important;
    font-weight: 600 !important;
  }

  body[data-member-page="catalog"] .catalog-filter-button {
    box-sizing: border-box;
    width: 60px;
    min-width: 60px;
    height: 40px;
    flex: 0 0 60px;
    gap: 7px;
    padding: 0 9px;
  }

  body[data-member-page="catalog"] .catalog-filter-button > svg {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  body[data-member-page="catalog"] .catalog-filter-count {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
  }
}

@media (max-width: 359px) {
  body[data-member-page="catalog"] .catalog-shell .catalog-controls {
    gap: 8px;
  }

  body[data-member-page="catalog"] .catalog-periods {
    max-width: calc(100% - 64px);
    grid-template-columns: .78fr .92fr 1.08fr 1.22fr;
  }

  body[data-member-page="catalog"] .catalog-filter-button {
    width: 56px;
    min-width: 56px;
    flex-basis: 56px;
  }
}