/* Shared horizontal gutters for storefront pages. */
:root { --storefront-page-gutter: 16px; }
@media (min-width: 1025px) {
    :root { --storefront-page-gutter: clamp(28px, 2.5vw, 64px); }
}
html body.shared-site-header:not(.staff-blue-page):not(.staff-admin-page):not(.magacin-page) > main {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--storefront-page-gutter) !important;
    padding-right: var(--storefront-page-gutter) !important;
}
/* The outer main supplies the gutter; listing wrappers must not add another. */
html body.shared-site-header:not(.staff-blue-page):not(.staff-admin-page):not(.magacin-page) > main > :is(.category-page, .brands-page, .subcategory-page, .account-order-page) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Include section padding in its width so the right edge cannot overflow. */
html body.shared-site-header:not(.staff-blue-page):not(.staff-admin-page):not(.magacin-page) > main > :is(section, div, article) {
    box-sizing: border-box !important;
    min-width: 0;
    max-width: 100%;
}
html body.shared-site-header:not(.staff-blue-page):not(.staff-admin-page):not(.magacin-page) > main :is(.product-catalog, .catalog-layout, .catalog-products, .product-grid--catalog) {
    box-sizing: border-box !important;
    min-width: 0;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}