/* Center cabinet content groups horizontally; keep the shared header full width. */
.main-content {
  --page-content-width: 1200px;
}

/* Preserve the wider form layout and the compact two-card gallery. */
.main-content:has(> .form-layout) {
  --page-content-width: 1240px;
}
.main-content:has(> .cards-layout) {
  --page-content-width: 820px;
}

.main-content > :is(
  .dashboard-overview,
  .operations-section,
  .cards-layout,
  .card-empty,
  .page-intro,
  .stepper,
  .form-layout,
  .brand-catalog,
  .product-detail,
  .product-information,
  .orders-panel,
  .commerce-footnote,
  .activity-content,
  [data-service-content],
  [data-service-not-found],
  [data-order-missing],
  .page-footer,
  .shop-catalog-footer
) {
  width: 100%;
  max-width: var(--page-content-width);
  margin-inline: auto;
}

/* Keep short back links at the content edge, without widening their click area. */
.main-content > :is(.commerce-back, .service-back) {
  display: flex;
  width: fit-content;
  max-width: 100%;
  margin-inline-start: max(0px, calc((100% - var(--page-content-width)) / 2));
  margin-inline-end: 0;
}

/* Narrow blocks stay centered when their responsive group becomes one column. */
.dashboard-overview > .payment-card {
  justify-self: center;
}
.service-layout > .service-summary {
  width: 100%;
  justify-self: center;
}
.brand-catalog > .brand-catalog-empty {
  margin-inline: auto;
}

@media (max-width: 1040px) {
  .main-content:has(> .cards-layout) {
    --page-content-width: 400px;
  }
}