/* Navibiz — one content container and one outer page rhythm. */
:root {
  --su-container-max: 1300px;
  --su-container-gutter: max(20px, calc((100vw - var(--su-container-max)) / 2));
  --su-header-height: 76px;
  --su-page-gap: 64px;
}

/* .su-site-main is the only owner of outer width and spacing. */
.su-site-main {
  min-height: 65vh;
  overflow: clip;
  background: var(--su-bg);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-top: calc(var(--su-header-height) + var(--su-page-gap));
  padding-right: var(--su-container-gutter);
  padding-bottom: var(--su-page-gap);
  padding-left: var(--su-container-gutter);
}

/* Services marketplace */
.page-id-12 .su-site-main {
  padding-top: calc(var(--su-header-height));
}

/* Legacy shells no longer create a second container. */
.su-site-main>.su-page-content,
.su-site-main>.su-service-page,
.su-site-main .su-content-shell,
.su-site-main .su-single-post,
.su-site-main .su-commerce-content,
.su-site-main .su-market,
.su-site-main .nb-blog,
.su-site-main .nb-article,
.su-site-main .su-page-content> :not(.sellerup-page):not(.sellerup-catalog) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Vertical space next to header/footer also belongs only to main. */
body:not(.home) .su-page-content,
.su-site-main .su-content-shell,
.su-site-main .su-single-post,
.su-site-main .su-commerce-content,
.su-site-main .su-market,
.su-site-main .nb-blog,
.su-site-main .nb-article,
.su-site-main .su-contacts {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.su-site-main>.su-not-found {
  margin-top: 0;
  margin-bottom: 0;
}

/* Blog inherits the site typography and the full 1300px content grid. */
.su-site-main .nb-blog,
.su-site-main .nb-article {
  font-family: inherit;
  color: var(--su-text);
}

/* Homepage background remains full bleed; its content uses the same grid. */
.su-site-main .sellerup-page {
  margin-top: 0 !important;
  margin-left: calc(-1 * var(--su-container-gutter));
  margin-right: calc(-1 * var(--su-container-gutter));
  padding-right: var(--su-container-gutter);
  padding-bottom: 0 !important;
  padding-left: var(--su-container-gutter);
}

.home .su-site-main .su-hero {
  padding-top: 0 !important;
}

@media (max-width: 760px) {
  :root {
    --su-container-gutter: 14px;
    --su-header-height: 68px;
    --su-page-gap: 42px;
  }

  .su-site-main .sellerup-page {
    padding-left: var(--su-container-gutter);
    padding-right: var(--su-container-gutter);
  }
}