/* Global typography scale. Keep this file loaded after page-level CSS. */
:root {
  --type-h1: 48px;
  --type-h2: 36px;
  --type-h3: 24px;
  --type-h4: 20px;
  --type-header: 16px;
  --type-body: 16px;
  --type-small: 14px;
}

body {
  font-size: var(--type-body);
}

h1,
.hero-h1,
.electronics-hero__title {
  font-size: var(--type-h1) !important;
}

h2,
.section-head h2,
.inquiry-head h2,
.gift-faq-head h2,
.gb-inserts-head h2 {
  font-size: var(--type-h2) !important;
}

h3,
.gift-faq-help h3 {
  font-size: var(--type-h3) !important;
}

h4 {
  font-size: var(--type-h4) !important;
}

p,
.section-intro,
.hero-subtitle,
.electronics-hero__text {
  font-size: var(--type-body) !important;
}

small,
.small,
.section-label,
.hero-label,
.about-section-label,
.gb-eyebrow,
.product-card-cat,
.feature-chip,
.cert-badge,
.footer-heading,
.footer-copy,
.footer-bottom-link,
.field-hint,
.field-error,
.form-privacy,
.gb-qc-steps p {
  font-size: var(--type-small) !important;
}

@media (max-width: 768px) {
  :root {
    --type-h1: 32px;
    --type-h2: 24px;
    --type-h3: 20px;
    --type-h4: 18px;
    --type-small: 12px;
  }
}