:root {
  --ath-site-content-width: 1280px;
  --ath-site-gutter: 32px;
}

/*
 * Canonical ATH site frame.
 * Background bands remain full-bleed; navigational and page content share one
 * centered 1280px grid across the homepage, shop pages and footer.
 */
html body.boxed {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

body.boxed #wrapper,
body.boxed #main,
body.boxed #header,
body.boxed #header .header-wrapper,
body.boxed #masthead,
body.boxed #footer,
body.boxed .footer-wrapper,
body.boxed .footer-widgets,
body.boxed .product-footer {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

body.boxed #wrapper {
  box-shadow: none !important;
}

/*
 * Flatsome's boxed rule also targets every nested <header> and every .row.
 * Release the premium product hero and purchase grid from that legacy 1080px
 * cap while retaining the product experience's intentional 1240px grid.
 */
body.single-product.ath-product-premium #main > .shop-container > .container {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

body.single-product.ath-product-premium .ath-product-hero-heading {
  max-width: none !important;
}

body.single-product.ath-product-premium .product-main .row.content-row {
  max-width: 1240px !important;
}

/* Footer-linked information pages use mixed Blank/UX Builder templates. */
body.page-id-20369 #main .ath-guide-v2 {
  box-sizing: border-box;
  width: min(calc(100% - var(--ath-site-gutter) - var(--ath-site-gutter)), var(--ath-site-content-width)) !important;
  max-width: var(--ath-site-content-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

body.page-id-21720 #main .section-content > .row:not(.row-full-width),
body.page-id-14996 #main .section-content > .row:not(.row-full-width),
body.page-id-21732 #main .section-content > .row:not(.row-full-width) {
  box-sizing: border-box;
  width: min(calc(100% - var(--ath-site-gutter) - var(--ath-site-gutter)), var(--ath-site-content-width)) !important;
  max-width: var(--ath-site-content-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

body #masthead > .container,
body #masthead > .header-inner.container,
body #wide-nav > .container,
body .page-title > .container,
body #main > .container,
body #main > .page-wrapper > .container,
body #main > .shop-container > .container,
body #content > .row.row-main,
body .product-footer > .container,
body #footer > .container,
body #footer .absolute-footer > .container,
body .footer-widgets > .row {
  box-sizing: border-box;
  width: min(calc(100% - var(--ath-site-gutter) - var(--ath-site-gutter)), var(--ath-site-content-width)) !important;
  max-width: var(--ath-site-content-width) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

@media (max-width: 1024px) {
  :root {
    --ath-site-gutter: 24px;
  }
}

@media (max-width: 640px) {
  :root {
    --ath-site-gutter: 16px;
  }
}