/* =========================================================
   BINOISE — Unified site layout system
   One horizontal rhythm for desktop header, home sections and footer.
   1440px viewport => 1384px content (28px each side)
   1920px viewport => 1680px content (120px each side)
   ========================================================= */

:root {
    --bnoise-layout-max: 1680px;
    --bnoise-layout-gutter: 20px;
    --bnoise-layout-inline-space: 40px;
}

@media (min-width: 1024px) {
    :root {
        --bnoise-layout-gutter: 28px;
        --bnoise-layout-inline-space: 56px;
    }
}

.bnoise-layout-shell {
    box-sizing: border-box;
    width: min(calc(100% - var(--bnoise-layout-inline-space)), var(--bnoise-layout-max));
    max-width: none !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

/* Header keeps its existing 20px mobile inset, then joins the shared desktop grid. */
.bnoise-site-header-shell {
    box-sizing: border-box;
    width: 100%;
    margin-inline: auto;
    padding-inline: 20px;
}

@media (min-width: 1024px) {
    .bnoise-site-header-shell {
        width: min(calc(100% - var(--bnoise-layout-inline-space)), var(--bnoise-layout-max));
        padding-inline: 0;
    }
}

/* Legacy homepage slider caps are intentionally neutralized here. */
.home-main .product-categories .categorySwiper,
.home-main .best-sellers .mySwiper,
.home-main .newest .mySwiper {
    width: 100% !important;
    max-width: none !important;
}