@font-face {
  font-family: Jost;
  src: url("fonts/jost-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: NunitoSans;
  src: url("fonts/nunito-sans-var.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --mason-ink: #111;
  --mason-price: #737373;
  --mason-surface: #f9f9f9;
  --mason-line: #e5e5e5;
}

.mason-home,
.mason-header,
.mason-footer,
.mason-archive,
.mason-product {
  --mason-ink: var(--e-global-color-primary, #111);
  --mason-price: var(--e-global-color-secondary, #737373);
  --mason-surface: var(--e-global-color-surface, #f9f9f9);
  --mason-line: var(--e-global-color-line, #e5e5e5);
  font-family: var(--e-global-typography-text-font-family, NunitoSans), sans-serif;
  color: var(--mason-ink);
}

.mason-home img,
.mason-archive img,
.mason-product img {
  display: block;
}

#ast-scroll-top {
  background: var(--mason-ink);
  color: #fff;
}

.error404 #content {
  background: var(--mason-surface);
}

.mason-home a:focus-visible,
.mason-header a:focus-visible,
.mason-header button:focus-visible,
.mason-footer a:focus-visible,
.mason-archive :is(a, button, input, select):focus-visible,
.mason-product :is(a, button, input, select):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}