/* =========================================
   SHOPTIMIZER BB CHILD — Overrides (Phase 1)
   Goal: Full width shell + consistent gutters
   Wrappers:
   - #page.hfeed.site
   - header#masthead.site-header
   - #content.site-content
   - footer.site-footer  (Shoptimizer)
   ========================================= */

/* 0) Safety: prevent horizontal scroll from layout */
html,
body {
    overflow-x: clip;
}

button {
    background-color:#000!important;
    color:#fff!important;
}

.button {
    background-color: #000 !important;
    color: #fff !important;
}

/* 1) Global shell */
#page.hfeed.site {
    width: 100%;
}

/* 2) Header: full width background + centered content */
header#masthead.site-header {
    width: 100%;
    background: var(--bb-bg);
    color: var(--bb-fg);
}

/* Shoptimizer wrappers inside header (common) */
header#masthead.site-header .col-full,
header#masthead.site-header .main-header.col-full {
    max-width: var(--bb-max);
    margin-inline: auto;
    padding-inline: var(--bb-gutter);
}

/* 3) Main content: full width + centered inner */
#content.site-content {
    width: 100%;
    padding-inline: var(--bb-gutter);
    padding-top: 18px;
    padding-bottom: 28px;
}

/* Center first-level content blocks (pages/blog/editorial) */
#content.site-content>* {
    max-width: var(--bb-max);
    margin-inline: auto;
}

/* Woo pages: avoid accidentally boxing complex wrappers */
body.woocommerce #content.site-content>* {
    max-width: none;
}

/* 4) Footer (Shoptimizer): full width background + centered content */
footer.site-footer,
footer.copyright {
    width: 100%;
    background: #000 !important;
    color: #fff !important;
    border-top: 1px solid var(--bb-line);
}

/* Shoptimizer footers often use .col-full too */
footer.site-footer .col-full {
    max-width: var(--bb-max);
    margin-inline: auto;
    padding-inline: var(--bb-gutter);
    padding-top: 18px;
    padding-bottom: 22px;
}

/* Desktop: first footer widget = double width (2fr vs 1fr each for the other 4) */
@media (min-width: 993px) {
    footer.site-footer .col-full .widget:first-child {
        flex: 2 !important;
    }
}



