/* Shared 2px typography scale for both showroom directions.
   Desktop > tablet > mobile wherever the type size changes. */
:root {
  --type-hero: 64px;
  --type-section: 46px;
  --type-why: 50px;
  --type-banner: 44px;
  --type-catalog: 42px;
  --type-detail: 40px;
  --type-application: 30px;
  --type-company-intro: 80px;
  --type-company-section: 48px;
  --type-company-cta: 34px;
  --type-company-stat: 42px;
  --type-contact-hero: 42px;
  --type-contact-heading: 34px;
  --type-hotspot: 12px;
  --type-bag-tab: 14px;
  --type-category: 12px;
  --type-catalog-card: 16px;
}

:root.design-v2 {
  --type-hero: 50px;
  --type-section: 44px;
  --type-why: 54px;
  --type-banner: 60px;
  --type-catalog: 54px;
  --type-detail: 60px;
  --type-application: 34px;
  --type-company-intro: 72px;
  --type-company-section: 56px;
  --type-company-cta: 34px;
  --type-company-stat: 42px;
  --type-contact-hero: 62px;
  --type-contact-heading: 34px;
}

.hero-detail h1 { font-size: var(--type-hero); }
.parts-overview .section-head h2 { font-size: var(--type-section); }
.why-copy h2 { font-size: var(--type-why); }
.contact-banner h2 { font-size: var(--type-banner); }
.products-page .catalog-hero h1 { font-size: var(--type-catalog); }
.product-page .detail-copy h1 { font-size: var(--type-detail); }
.product-page .applications-section h2,
.product-page .related-section > h2 { font-size: var(--type-application); }
.company-main .company-intro h1 { font-size: var(--type-company-intro); }
.company-main h2,
.company-main .company-heading h2 { font-size: var(--type-company-section); }
.company-main .company-cta h2 { font-size: var(--type-company-cta); }
.company-main .factory-stats strong { font-size: var(--type-company-stat); }
.contact-page .catalog-hero h1 { font-size: var(--type-contact-hero); }
.contact-page .contact-information h2,
.contact-page .contact-form h2,
.contact-page .visit-banner h2 { font-size: var(--type-contact-heading); }
.hotspot-label { font-size: var(--type-hotspot); }
.bag-tab .tab-name { font-size: var(--type-bag-tab); }
.category-card { font-size: var(--type-category); }
.catalog-card h3 { font-size: var(--type-catalog-card); }

@media (max-width: 1100px) {
  :root {
    --type-hero: 52px;
    --type-section: 38px;
    --type-why: 42px;
    --type-banner: 38px;
    --type-catalog: 36px;
    --type-detail: 36px;
    --type-application: 28px;
    --type-company-intro: 62px;
    --type-company-section: 40px;
    --type-company-cta: 30px;
    --type-company-stat: 36px;
    --type-contact-hero: 36px;
    --type-contact-heading: 30px;
    --type-hotspot: 10px;
    --type-bag-tab: 12px;
    --type-category: 10px;
    --type-catalog-card: 14px;
  }

  :root.design-v2 {
    --type-hero: 44px;
    --type-section: 38px;
    --type-why: 46px;
    --type-banner: 50px;
    --type-catalog: 46px;
    --type-detail: 50px;
    --type-application: 30px;
    --type-company-intro: 58px;
    --type-company-section: 46px;
    --type-company-cta: 30px;
    --type-company-stat: 36px;
    --type-contact-hero: 50px;
    --type-contact-heading: 30px;
  }
}

@media (max-width: 700px) {
  :root {
    --type-hero: 44px;
    --type-section: 32px;
    --type-why: 34px;
    --type-banner: 32px;
    --type-catalog: 32px;
    --type-detail: 32px;
    --type-application: 26px;
    --type-company-intro: 44px;
    --type-company-section: 32px;
    --type-company-cta: 26px;
    --type-company-stat: 28px;
    --type-contact-hero: 32px;
    --type-contact-heading: 26px;
    --type-hotspot: 8px;
    --type-bag-tab: 10px;
    --type-category: 8px;
    --type-catalog-card: 12px;
  }

  :root.design-v2 {
    --type-hero: 38px;
    --type-section: 32px;
    --type-why: 38px;
    --type-banner: 40px;
    --type-catalog: 38px;
    --type-detail: 40px;
    --type-application: 26px;
    --type-company-intro: 44px;
    --type-company-section: 36px;
    --type-company-cta: 26px;
    --type-company-stat: 28px;
    --type-contact-hero: 40px;
    --type-contact-heading: 26px;
  }
}