/* Shared page shell for every storefront theme and the admin layout.
 * 1640px is the desktop cap; small screens retain usable side gutters.
 * Internal columns, forms and dialogs keep their component widths.
 */
:root {
    --ep-page-max: 1640px;
    --ep-page-gutter: 32px;
}
@media (max-width: 700px) {
    :root { --ep-page-gutter: 16px; }
}
html:not(.ep-admin-layout) body .container,
html:not(.ep-admin-layout) body .container-fluid,
html:not(.ep-admin-layout) body .mp-container {
    box-sizing: border-box;
    width: calc(100% - var(--ep-page-gutter) * 2) !important;
    min-width: 0 !important;
    max-width: var(--ep-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Nested Bootstrap containers must fit their column, not subtract gutters again. */
html:not(.ep-admin-layout) body :is(.container, .container-fluid, .mp-container) :is(.container, .container-fluid, .mp-container) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}
/* Admin keeps its own sidebar, typography and internal content grid. */
html.ep-admin-layout body > .wrapper {
    position: relative;
    box-sizing: border-box;
    width: calc(100% - var(--ep-page-gutter) * 2);
    min-width: 0;
    max-width: var(--ep-page-max);
    margin-left: auto;
    margin-right: auto;
}