/**
 * The page shell: how wide the site is allowed to get.
 *
 * Loaded last and DELIBERATELY UNLAYERED (Magento_Theme/layout/default.xml), so
 * it outranks every layered rule regardless of specificity. That is why this one
 * small file, not base/index.css, is the single source of truth for page width.
 *
 * WHAT THIS USED TO DO, AND WHY IT CHANGED
 *
 * This file used to say `max-width: none !important; width: 100% !important`,
 * cancelling the `.page-main { max-width: 80rem }` that base/index.css sets in
 * @layer base. The result was a site with a GUTTER but no CAP: `main` carries
 * padding-inline 1.5/2.5/4/5rem (components/index.css, matching header.phtml and
 * footer.phtml), which holds content off the window edge but never stops the page
 * growing. On a large external display every band just kept stretching.
 *
 * The homepage hero showed it worst, and misleadingly: its inner bands ARE capped
 * (max-w-screen-xl = 1280px) while the charcoal slab around them was not, so the
 * slab grew and its contents did not, leaving wide empty margins inside the hero.
 * That looks like a hero bug and is not one.
 *
 * WHY 90rem
 *
 * 90rem = 1440px, and box-sizing is border-box, so the gutter is INSIDE the cap:
 * at xl the visible content column is 1440 - (2 x 5rem) = 1280px. That is the
 * width the hero was already built to, so `max-w-screen-xl` now binds exactly and
 * its empty sides close with no change to hero.phtml. It is also the conventional
 * page width for a catalogue of this shape, and what Magento's own Luma uses.
 *
 * Change this number and THREE other places must change with it, or they will sit
 * on different edges than the content. None can inherit it -- all live outside
 * <main>:
 *   - header.phtml    (main header row)
 *   - footer.phtml    (link row + copyright row)
 *   - .breadcrumbs    (capped below; it renders in div.top-container)
 */
main.page-main {
    max-width: 90rem;
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * Breadcrumbs render in `div.top-container`, a sibling of <main>, so the cap above
 * does not reach them. components/index.css already gives them the same
 * padding-inline as `main`, which was enough while the page had no cap at all --
 * but with one, an uncapped breadcrumb trail starts at the WINDOW's gutter while
 * the content below starts at the page's. Measured on a 2560px display before this
 * rule: breadcrumb text at x=80, category content at x=633.
 */
.breadcrumbs {
    max-width: 90rem;
    margin-left: auto !important;
    margin-right: auto !important;
}

/*
 * `.columns` fills whatever `main` allows -- the cap belongs to the shell, not to
 * the content inside it. Without this, Hyva re-centres and re-pads a second
 * container in here and the page ends up inset twice.
 */
main .columns {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}