:root {
    --lili-site-shell-max: 1680px;
    --lili-site-shell-pad: 15px;
}

/*
 * Keep header/footer content aligned with the capped product content on
 * ultra-wide viewports and browser zoom-out. Row backgrounds remain full width.
 */
.whb-header .whb-row > .container,
.whb-full-width .whb-row > .container,
.whb-full-width + .whb-clone .whb-row > .container,
.whb-clone .whb-row > .container {
    box-sizing: border-box;
    width: 100% !important;
    max-width: var(--lili-site-shell-max) !important;
    margin-inline: auto !important;
    padding-inline: var(--lili-site-shell-pad) !important;
}

/* Footer, prefooter and copyrights use the same visual shell. */
.wd-footer > .container,
.wd-footer .main-footer.container,
.wd-footer .wd-copyrights > .container,
.wd-prefooter > .container,
footer.footer-container > .container,
footer.footer-container .main-footer.container,
footer.footer-container .copyrights-wrapper > .container {
    box-sizing: border-box;
    width: 100% !important;
    max-width: var(--lili-site-shell-max) !important;
    margin-inline: auto !important;
    padding-inline: var(--lili-site-shell-pad) !important;
}

/* If an HTML-block footer places its first layout container directly inside
 * main-footer, prevent that inner row from expanding beyond the same shell. */
.wd-footer .main-footer > :where(.wd-section, .vc_section, .elementor, .e-con, .container-fluid) {
    max-width: 100%;
}

@media (max-width: 1024px) {
    :root {
        --lili-site-shell-pad: 12px;
    }
}

@media (max-width: 576px) {
    :root {
        --lili-site-shell-pad: 10px;
    }
}