/**
 * Frontend typography system — keep home / catalog / marketplace / account consistent.
 * Families: Poppins (headings, CTAs, labels) + Roboto (body, forms, meta).
 */
:root {
  --font-heading: var(--font-family-primary, 'Poppins', system-ui, sans-serif);
  --font-body: var(--font-family-secondary, 'Roboto', system-ui, sans-serif);

  --type-xs: 0.75rem;      /* 12px meta / badges */
  --type-sm: 0.8125rem;    /* 13px crumbs / secondary */
  --type-md: 0.875rem;     /* 14px body */
  --type-base: 0.9375rem;  /* 15px forms / card titles */
  --type-lg: 1.125rem;     /* 18px section titles */
  --type-xl: 1.375rem;     /* 22px page h2 */
  --type-2xl: 1.75rem;     /* 28px page h1 */
  --type-3xl: 2rem;        /* 32px hero h1 (desktop) */

  --type-color: var(--color-gray-800, #1e293b);
  --type-muted: var(--color-gray-500, #64748b);
  --type-faint: var(--color-gray-400, #94a3b8);
  --type-strong: var(--color-gray-900, #0f172a);
}

/* ---------- Global base ---------- */
html body {
  font-family: var(--font-body);
  font-size: var(--type-md);
  line-height: 1.55;
  color: var(--type-color);
  -webkit-font-smoothing: antialiased;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .section-head h2,
body .section-h2 {
  font-family: var(--font-heading);
  color: var(--type-strong);
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/*
 * Dark surfaces — force light headings.
 * Global body h1/h2 color must never win on navy/blue heroes.
 */
body .hero-wrap h1,
body .hero-h1,
body .catalog-hero h1,
body .catalog-hero h2,
body .supplier-hero h1,
body .supplier-hero h2,
body .static-hero h1,
body .static-hero h2,
body .product-detail-hero h1,
body .search-hero h1,
body .error-hero h1,
body .blog-detail-hero h1,
body .product-cta-band h2,
body .product-cta-band__inner h2,
body .service-cta-strip__inner h2,
body .trial-banner h1,
body .trial-banner h2,
body .trial-banner__title,
body .about-placeholder h3,
body .contact-side-card--whatsapp h3,
body .bulk-side-card--whatsapp h3,
body .blog-side-card--cta h3,
body .mp-inquiry-head h2 {
  font-family: var(--font-heading);
  color: #fff !important;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

body .hero-h1 .highlight {
  color: #F97316 !important;
}

body p,
body li,
body td,
body th,
body label,
body input,
body select,
body textarea,
body .form-control,
body .form-label {
  font-family: var(--font-body);
}

body .btn,
body .catalog-btn,
body .hero-btn-primary,
body .hero-btn-ghost,
body .hero-btn-wa,
body .nav-link,
body .header-quote-btn,
body .mp-inquiry-submit,
body .supplier-submit,
body .desk-card__name,
body .desk-card__pill,
body .product-card__btn-inquiry {
  font-family: var(--font-heading);
}

/* Product titles must stay dark on white cards */
body .desk-card__name,
body .desk-card__name a {
  color: #0f172a !important;
}
body .desk-card__name a:hover {
  color: #1557bf !important;
}

/* Blue CTA buttons only */
body .product-card__btn-inquiry,
body button.product-card__btn-inquiry,
body .mp-inquiry-submit {
  color: #fff !important;
}

/* ---------- Marketplace / supplier pages ---------- */
.supplier-hero h1,
.catalog-hero h1,
.static-hero h1,
.search-hero h1 {
  font-size: clamp(1.5rem, 2.4vw, var(--type-2xl));
  font-weight: 700;
}

.supplier-hero p,
.catalog-hero p,
.static-hero p,
.static-hero__line {
  font-family: var(--font-body);
  font-size: var(--type-md);
  line-height: 1.55;
}

.supplier-crumb,
.catalog-breadcrumb {
  font-family: var(--font-body);
  font-size: var(--type-sm);
}

.supplier-card h2,
.buyer-panel h2,
.search-section h2 {
  font-family: var(--font-heading);
  font-size: var(--type-lg);
  font-weight: 700;
  color: var(--type-strong);
}

.supplier-card .lead,
.supplier-muted,
.buyer-row__meta,
.dir-meta,
.dir-card__meta,
.dir-card__cats {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  color: var(--type-muted);
  line-height: 1.5;
}

.supplier-card .form-label,
.buyer-nav a,
.dir-badge,
.search-badge,
.buyer-badge {
  font-family: var(--font-heading);
}

.supplier-card .form-label {
  font-size: var(--type-md);
  font-weight: 600;
}

.supplier-card .form-control,
.supplier-card select.form-control,
.supplier-card textarea.form-control {
  font-family: var(--font-body);
  font-size: var(--type-base);
}

.supplier-hint,
.supplier-section span,
.supplier-step-btn span {
  font-family: var(--font-body);
  font-size: var(--type-xs);
  color: var(--type-muted);
}

.supplier-section strong {
  font-family: var(--font-heading);
  font-size: var(--type-base);
  font-weight: 700;
}

.supplier-submit,
.dir-submit,
.mp-inquiry-submit {
  font-family: var(--font-heading);
  font-size: var(--type-md);
  font-weight: 700;
}

.dir-card__name {
  font-family: var(--font-heading);
  font-size: var(--type-base);
  font-weight: 700;
}

.buyer-nav a {
  font-size: var(--type-sm);
  font-weight: 700;
}

.buyer-stat strong {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--type-strong);
}

.buyer-stat span,
.buyer-row__meta {
  font-size: var(--type-sm);
  font-family: var(--font-body);
  color: var(--type-muted);
}

.buyer-panel h2 {
  font-size: var(--type-lg);
}

.buyer-row__title {
  font-family: var(--font-heading);
  font-size: var(--type-base);
  font-weight: 700;
}

.buyer-badge {
  font-size: 0.6875rem;
  font-weight: 700;
}

/* Product cards already Poppins — keep aligned to scale */
.desk-card__name {
  font-size: var(--type-base) !important;
  font-weight: 600;
}

.desk-card__store {
  font-family: var(--font-heading);
  font-size: var(--type-sm) !important;
}

.desk-card__price strong {
  font-family: var(--font-heading);
  font-size: var(--type-base) !important;
}

.desk-card__pill {
  font-size: 0.62rem;
}

.desk-card__spec span {
  font-size: 0.58rem !important;
}

.desk-card__spec strong {
  font-size: 0.68rem !important;
}

.product-card__btn-inquiry {
  font-size: 0.82rem !important;
}

/* Inquiry modal — title must stay white on blue header (overrides body h2) */
body .mp-inquiry-head h2 {
  font-family: var(--font-heading) !important;
  color: #fff !important;
}

.mp-inquiry-submit,
.mp-inquiry-product__title,
.mp-inquiry-product__eyebrow {
  font-family: var(--font-heading) !important;
}

.mp-inquiry-form label,
.mp-inquiry-field input,
.mp-inquiry-field textarea,
.mp-inquiry-note,
.mp-inquiry-product__supplier,
.mp-inquiry-product__price {
  font-family: var(--font-body) !important;
}

.mp-inquiry-field label {
  font-size: var(--type-sm) !important;
}

.mp-inquiry-field input,
.mp-inquiry-field textarea {
  font-size: var(--type-md) !important;
}

@media (max-width: 767px) {
  .supplier-hero h1,
  .catalog-hero h1,
  .static-hero h1 {
    font-size: 1.45rem;
  }
}