/* Shared outer grid. Loaded last in the storefront layout, never in admin/checkout.
   Only page shells are selected: card/dialog internals retain their own spacing. */
.forte-storefront {
    --forte-site-width: 1400px;
    --forte-site-gutter: 24px;
}

.forte-storefront :is(
    .forte-site-container,
    .forte-home__container,
    .forte-pdp__container,
    .forte-catalog__container,
    .forte-directory__container,
    .brand-page__container,
    .compare-container,
    .pc-builder__container,
    .forte-commerce-container
),
/* Legacy search/wishlist pages have a direct outer Bootstrap container. */
.forte-storefront > .container-fluid {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--forte-site-width) !important;
    margin-inline: auto;
    /* Bootstrap px-xl-5 and older page overrides also use !important. */
    padding-left: var(--forte-site-gutter) !important;
    padding-right: var(--forte-site-gutter) !important;
}

/* Background strips stay edge-to-edge; their contents share the page grid. */
.forte-storefront .forte-utility-shell { background: #f5f5f5; }
.forte-storefront .forte-mobile-search-shell { padding-inline: 0; }
.forte-storefront .forte-footer-bottom { margin-inline: 0; }

/* Include sticky purchase controls in the same alignment without constraining
   their full-width backdrop or changing top/bottom safe-area spacing. */
.forte-storefront .forte-pdp-mobile-buy {
    padding-inline: max(var(--forte-site-gutter), calc((100% - var(--forte-site-width)) / 2 + var(--forte-site-gutter)));
}

@media (max-width: 991.98px) {
    .forte-storefront { --forte-site-gutter: 16px; }
    .forte-storefront .forte-pdp__breadcrumb { margin-inline: 0; }
    /* The autocomplete panel must follow the search field, not an old 12px gutter. */
    .forte-storefront .forte-search--mobile .forte-search__panel {
        width: 100%;
        max-width: 100%;
    }
}