/* Page envelopes only: nested cards, modals and form columns keep their layout. */
:root {
  --ca-page-width:100%;
  --ca-page-gutter:16px;
  --ca-catalog-width:var(--ca-page-width);
}
@media(min-width:576px) {
  :root { --ca-page-width:calc(100% - 32px); --ca-page-gutter:24px; }
}
@media(min-width:992px) {
  :root { --ca-page-width:min(1280px,calc(100% - 64px)); }
}

:root body > :is(main:not(.ca-login):not(.email-pref),.ca-member-layout,.container,.container-fluid,.container-xxl,.ca-page-shell),
:root .ca-header-inner,
:root body > nav > .container,
:root .ca-footer > .container,
:root .mainfooter > .footer-middle > .container {
  box-sizing:border-box;
  width:100%;
  max-width:var(--ca-page-width);
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--ca-page-gutter);
  padding-right:var(--ca-page-gutter);
}

/* The compact footer already has a padded inner container. */
:root .mainfooter { padding-left:0!important; padding-right:0!important; }

/* Short authentication forms stay focused, with the same mobile gutter. */
:root body > :is(.ca-login,.email-pref) {
  box-sizing:border-box;
  width:100%;
  padding-left:var(--ca-page-gutter);
  padding-right:var(--ca-page-gutter);
}