body {
  font-family: var(--ommo-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ommo-ink);
  background: var(--ommo-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ommo-h1,
.ommo-h2,
.ommo-section-title,
.ommo-page-title,
.ommo-subtitle,
.ommo-product-card__title,
.ommo-manifest-card__title,
.ommo-step__title,
.ommo-footer__mega,
.ommo-ingredient-row__title {
  font-family: var(--ommo-font-display);
  font-weight: 800;
  color: inherit;
  text-transform: none;
}

.ommo-h1,
.ommo-hero__wordmark {
  font-size: clamp(110px, 24vw, 360px);
  line-height: .82;
  letter-spacing: -.04em;
  margin: 0;
  text-transform: lowercase;
}

.ommo-page-title {
  font-size: clamp(72px, 13vw, 180px);
  line-height: .88;
  letter-spacing: -.05em;
  margin: 24px 0 40px;
  text-transform: lowercase;
}

/* Critical Flatsome reset:
   UX Text outputs <div class="text class"><p>...</p></div>.
   Flatsome gives p { margin-bottom: 1.3em }, which creates the fake space.
*/
.ommo-h1 p,
.ommo-h2 p,
.ommo-hero__wordmark p,
.ommo-page-title p,
.ommo-section-title p,
.ommo-subtitle p,
.ommo-hero__tagline p,
.ommo-shop__title p,
.ommo-footer__mega p {
  margin: 0 !important;
  padding: 0 !important;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.ommo-h1 em,
.ommo-h2 em,
.ommo-hero__wordmark em,
.ommo-page-title em,
.ommo-section-title em,
.ommo-subtitle em,
.ommo-hero__tagline em,
.ommo-shop__title em,
.ommo-footer__mega em {
  font-style: italic;
  line-height: inherit;
}

.ommo-h2,
.ommo-section-title,
.ommo-shop__title {
  font-size: clamp(40px, 6vw, 96px);
  line-height: .92;
  letter-spacing: -.03em;
  margin: 0;
}

.ommo-shop__title {
  font-size: clamp(44px, 7vw, 104px);
  line-height: .9;
}

.ommo-subtitle,
.ommo-hero__tagline {
  font-size: clamp(28px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0;
}

.ommo-body,
.ommo-section-copy,
.ommo-hero__intro {
  font-family: var(--ommo-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ommo-ink-soft);
  margin: 0;
  text-wrap: pretty;
}

.ommo-body p,
.ommo-section-copy p,
.ommo-hero__intro p,
.ommo-page-intro p {
  margin: 0 !important;
  padding: 0 !important;
}

.ommo-section-copy,
.ommo-hero__intro {
  max-width: 420px;
}

.ommo-kicker,
.ommo-meta,
.ommo-mono,
.ommo-product-card__price,
.ommo-product-card__tag,
.ommo-product-card__vibe,
.ommo-manifest-card__number,
.ommo-step__number,
.ommo-ingredient-row__number,
.ommo-footer__heading {
  font-family: var(--ommo-font-mono);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ommo-kicker {
  color: var(--ommo-taupe-deep);
}

.ommo-meta {
  color: color-mix(in srgb, var(--ommo-ink) 60%, transparent);
}

.ommo-meta--right {
  text-align: right;
}


@media (max-width: 540px) {
  .ommo-page-title,
  .ommo-page-title p {
    font-size: clamp(58px, 18vw, 72px);
    line-height: .88;
    letter-spacing: -.07em;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .ommo-page-title,
  .ommo-page-title p {
    font-size: clamp(52px, 17vw, 62px);
  }
}

@media (max-width: 820px) {
  .ommo-body,
  .ommo-section-copy,
  .ommo-hero__intro {
    font-size: 16px;
  }
}