/* Shared content frame. Section backgrounds, videos and floating UI stay full width. */
:root {
  --container-max-width: 1322px;
  --container-gutter: 16px;
  --container-width: min(var(--container-max-width), calc(100% - 2 * var(--container-gutter)));
}

/* Legacy page wrappers share the same reusable .site-container geometry. */
.site-container,
#root .ref-container,
#root .ref-main-inner,
#root .ref-nav-inner,
#root .alaska-catalog-layout,
#root .ref-catalog-page > .ref-catalog-breadcrumb-only,
main .shell,
main .content-breadcrumb,
.pa-directory .content-breadcrumb,
.catalog-showcase .cl-container,
.cd2 .cd2-wrap,
.pa-directory .pa-list,
.pa-grouped.editorial-experience .pa-list,
.pa-journal .pa-list,
main .pa-container,
main:has(.contact-redesign) .content-breadcrumb,
.contact-hero-inner,
.contact-redesign .contact-page-inner,
.contact-redesign .company-locations .shell,
.contact-close-copy,
.home-v3 .v3-container,
.home-v3 .v3-products .v3-container,
.home-v3 .v3-design-grid,
.home-v3 .v3-decision > .v3-container,
.home-v3 .v3-section > .v3-container,
main .b2b-home .shell.b2b-about-inner,
.b2b-home .b2b-hero-content.shell,
.news-main,
.ar-focus.editorial-experience .ar-about-wrap,
.ar-focus.editorial-experience .ar-about-customers,
.ar-focus .ar-hero-new > .ar-about-wrap,
.pa-directory-hero,
.site-footer .site-footer-grid,
.site-footer.home-v3-footer .site-footer-grid,
.site-footer--catalog .site-footer-grid,
#root:has(.ar-focus) .site-footer-grid {
  width: var(--container-width);
  max-width: var(--container-max-width);
  margin-inline: auto;
}

/* Page-specific outer frames use the same left and right edges as the header. */
#root .cd2 .cd2-wrap,
#root .privacy-page,
#root .ad-page,
#root .ad-article,
#root .ad-related-shell,
#root .news-main,
#root main:has(.news-page) .content-breadcrumb,
#root .solutions-container,
#root .cart-flow-page > .cart-flow-container,
#root .shop-cart-page > .shop-container,
#root .pa-project-index .pa-project-viewport,
#root .pa-project-index .pa-empty,
#root .home-v3 .v3-container {
  width: var(--container-width);
  max-width: var(--container-max-width);
  margin-inline: auto;
}

#root .cd2-product-detail .cd2-product-layout { width: 100%; max-width: none; }
#root:has(.pa-project-index) .ref-header .ref-container,
#root:has(.pa-project-index) .ref-footer .ref-container {
  width: var(--container-width);
  max-width: var(--container-max-width);
  margin-inline: auto;
}

/* Full-width artwork and section backgrounds keep their own layout. */
.home-v3 .v3-container,
.home-v3 .v3-products .v3-container,
.home-v3 .v3-design-grid,
.home-v3 .v3-decision > .v3-container,
.home-v3 .v3-section > .v3-container,
.site-footer.home-v3-footer .site-footer-grid { padding-inline: 0; }

/* The customer cards are already inside the shared About-page frame. */
.ar-focus.editorial-experience .ar-about-customers > .ar-about-wrap {
  width: 100%;
  max-width: 100%;
}

/* Center header controls without constraining the white header background. */
@media (min-width: 1251px) {
  .b2b-site-header {
    padding-inline: max(var(--container-gutter), calc((100% - var(--container-max-width)) / 2));
  }
}

/* The project CTA remains a full-width band; align its copy to the frame. */
@media (min-width: 1100px) {
  .pa-grouped.editorial-experience .pa-contact {
    padding-inline: max(var(--container-gutter), calc((100% - var(--container-max-width)) / 2));
  }
}

/* Keep the product detail section tabs scrollable on narrow screens. */
@media (max-width: 760px) {
  .cd2-section-nav .cd2-wrap {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}