/* Olga Gipich typography system v2: consistent, compact and readable. */

body.og-brand-design {
  --og-type-display: clamp(46px, 4vw, 58px);
  --og-type-title: clamp(42px, 3.6vw, 54px);
  --og-type-section: clamp(34px, 3vw, 44px);
  --og-type-card: clamp(24px, 2vw, 30px);
  --og-type-copy: 16px;
}

body.og-brand-design h1,
body.og-brand-design h2,
body.og-brand-design h3,
body.og-brand-design h4,
body.og-brand-design h5 {
  letter-spacing: -.025em;
}

/* Primary page titles */
body.og-brand-design .og-page-intro h1 {
  max-width: 900px;
  font-size: var(--og-type-display);
  line-height: 1.04;
}

body.og-brand-design .og-commerce-hero h1,
body.og-brand-design .og-catalog-header h1,
body.og-brand-design .og-single-summary h1,
body.og-brand-design .og-checkout-intro h1,
body.og-brand-design .og-empty-cart h1,
body.og-brand-design .catalog-page h1 {
  font-size: var(--og-type-title) !important;
  line-height: 1.04;
}

body.og-brand-design .og-commerce-hero h1 {
  font-size: clamp(40px, 3.3vw, 50px) !important;
}

body.og-brand-design .og-single-summary h1 {
  font-size: clamp(34px, 3.4vw, 44px) !important;
  line-height: 1.06;
}

body.og-brand-design .og-catalog-header h1 {
  max-width: 780px;
  font-size: clamp(38px, 3.3vw, 48px) !important;
}

body.og-brand-design .og-page-intro {
  margin-bottom: 62px;
}

body.og-brand-design .og-page-intro > p:last-child {
  max-width: 680px;
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.65;
}

body.og-brand-design .og-inner-page {
  padding-top: 74px;
  padding-bottom: 112px;
}

body.og-brand-design .og-inner-page.og-curated-catalog {
  padding-top: 16px;
}

/* Section titles */
body.og-brand-design .og-section-heading h2,
body.og-brand-design .og-order-brief h2,
body.og-brand-design .og-master-empty h2,
body.og-brand-design .og-story-copy h2,
body.og-brand-design .og-custom-order-copy h2,
body.og-brand-design .og-about-compact-copy h2,
body.og-brand-design .og-form-card-intro h2,
body.og-brand-design .og-palette-guide h2,
body.og-brand-design .og-guide h2,
body.og-brand-design .og-cta h2,
body.og-brand-design .og-resource-card h3,
body.og-brand-design .og-seo-copy h2 {
  font-size: var(--og-type-section);
  line-height: 1.08;
}

body.og-brand-design .og-seo-copy > p:not(.og-eyebrow) {
  font-size: 16px;
  line-height: 1.7;
}

body.og-brand-design .og-master-empty {
  padding: clamp(52px, 6vw, 78px);
}

body.og-brand-design .og-master-empty > p:not(.og-eyebrow) {
  margin-top: 22px;
  font-size: var(--og-type-copy);
}

body.og-brand-design .og-section {
  padding-top: 84px;
  padding-bottom: 84px;
}

body.og-brand-design .og-section-heading {
  margin-bottom: 38px;
}

/* Medium headings and structured content */
body.og-brand-design .og-contact-aside h2,
body.og-brand-design .og-info-grid h2,
body.og-brand-design .og-delivery-note h2,
body.og-brand-design .og-yarn-palette-strip h2,
body.og-brand-design .og-palette-card h2,
body.og-brand-design .og-process-grid h3,
body.og-brand-design .og-values-grid h3,
body.og-brand-design .og-custom-order-list h3,
body.og-brand-design .og-product-details summary,
body.og-brand-design .woocommerce-checkout .woocommerce-billing-fields h3,
body.og-brand-design .woocommerce-checkout .woocommerce-additional-fields h3,
body.og-brand-design .woocommerce-checkout #order_review_heading {
  font-size: var(--og-type-card);
  line-height: 1.16;
}

body.og-brand-design .og-faq-list summary {
  font-size: clamp(23px, 2vw, 28px);
  line-height: 1.25;
}

body.og-brand-design .og-category-card strong,
body.og-brand-design .og-direction-card strong,
body.og-brand-design .og-shop-path strong {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.05;
}

body.og-brand-design .og-commerce-assurance h2 {
  font-size: 22px;
  line-height: 1.18;
}

body.og-brand-design .og-single-intro,
body.og-brand-design .og-lead,
body.og-brand-design .og-about-compact-copy > p:not(.og-eyebrow),
body.og-brand-design .og-custom-order-copy > p:not(.og-eyebrow) {
  font-size: 16px;
  line-height: 1.65;
}

body.og-brand-design .og-eyebrow {
  font-size: 11px;
  line-height: 1.45;
}

body.og-brand-design .og-product-info h3 {
  font-family: "Manrope", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0;
}

body.og-brand-design .og-product-subline {
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 767px) {
  body.og-brand-design {
    --og-type-display: 40px;
    --og-type-title: 38px;
    --og-type-section: 32px;
    --og-type-card: 24px;
  }

  body.og-brand-design .og-page-intro h1,
  body.og-brand-design .og-commerce-hero h1,
  body.og-brand-design .og-catalog-header h1,
  body.og-brand-design .og-single-summary h1,
  body.og-brand-design .og-checkout-intro h1,
  body.og-brand-design .og-empty-cart h1,
  body.og-brand-design .catalog-page h1 {
    line-height: 1.06;
  }

  body.og-brand-design .og-commerce-hero h1 {
    font-size: 38px !important;
  }

  body.og-brand-design .og-single-summary h1 {
    font-size: 30px !important;
    line-height: 1.08;
  }

  body.og-brand-design .og-inner-page {
    padding-top: 48px;
    padding-bottom: 76px;
  }

  body.og-brand-design .og-inner-page.og-curated-catalog {
    padding-top: 12px;
  }

  body.og-brand-design .og-catalog-header h1 {
    max-width: 340px;
    font-size: 34px !important;
  }

  body.og-brand-design .og-page-intro {
    margin-bottom: 42px;
  }

  body.og-brand-design .og-page-intro > p:last-child {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.6;
  }

  body.og-brand-design .og-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  body.og-brand-design .og-section-heading {
    margin-bottom: 30px;
  }

  body.og-brand-design .og-master-empty {
    padding: 44px 22px;
  }

  body.og-brand-design .og-master-empty > p:not(.og-eyebrow) {
    font-size: 15px;
    line-height: 1.65;
  }

  body.og-brand-design .og-seo-copy > p:not(.og-eyebrow) {
    font-size: 15px;
    line-height: 1.65;
  }

  body.og-brand-design .og-category-card strong,
  body.og-brand-design .og-direction-card strong,
  body.og-brand-design .og-shop-path strong {
    font-size: 30px;
  }

  body.og-brand-design .og-faq-list summary {
    font-size: 23px;
  }

  body.og-brand-design .og-single-intro,
  body.og-brand-design .og-lead,
  body.og-brand-design .og-about-compact-copy > p:not(.og-eyebrow),
  body.og-brand-design .og-custom-order-copy > p:not(.og-eyebrow) {
    font-size: 15px;
    line-height: 1.65;
  }

  body.og-brand-design .og-product-info h3 {
    font-size: 15px;
  }

  body.og-brand-design .og-product-subline {
    font-size: 12px;
    line-height: 1.45;
  }
}