/* ============================================
   Content Shell
   Canonical width container. Page content and the header (nav-wrapper)
   share --content-max-width / --content-gutter so content edges line up
   with the logo and nav for a cohesive visual hierarchy.
   ============================================ */

.content-shell {
    width: 100%;
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: var(--content-gutter);
}

/* Commerce product pages (Discovery, Ghost variants, pricing) are built from
   full-bleed bands whose backgrounds must span the viewport, so they can't sit
   inside a width-capped .content-shell. Instead they wrap their post-hero
   content in .product-marketing-shell and widen the inner content caps to the
   canonical content width, so band content aligns with the header while the
   band backgrounds stay full-bleed. */
.product-marketing-shell .container,
.product-marketing-shell .unified-section-inner {
    max-width: var(--content-max-width);
}