/* ============================================================================
   BAFLEH JEWELLERY PUBLIC TYPOGRAPHY B20 - 2026-09-06
   Final public-site typography authority. Loaded after all B19 styles.
   Scope: .bafleh-public-body only (does not affect Live/Admin/WhatsApp portal).

   English:
     Editorial / luxury headings -> Cormorant Garamond
     Body / UI / commerce       -> Montserrat
   Arabic and Traditional Chinese retain their script-specific families.
   ============================================================================ */

:root {
    --b20-font-editorial: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --b20-font-body: "Montserrat", Arial, Helvetica, sans-serif;
    --b20-font-arabic: "Noto Naskh Arabic", Tahoma, Arial, sans-serif;
    --b20-font-zh: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. GLOBAL PUBLIC BODY / FUNCTIONAL TEXT
   -------------------------------------------------------------------------- */
.bafleh-public-body {
    font-family: var(--b20-font-body) !important;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.bafleh-public-body p,
.bafleh-public-body li,
.bafleh-public-body a,
.bafleh-public-body label,
.bafleh-public-body small,
.bafleh-public-body address,
.bafleh-public-body table,
.bafleh-public-body th,
.bafleh-public-body td,
.bafleh-public-body button,
.bafleh-public-body input,
.bafleh-public-body select,
.bafleh-public-body textarea,
.bafleh-public-body .btn,
.bafleh-public-body .form-control {
    font-family: var(--b20-font-body) !important;
}

/* Form controls must inherit one predictable UI face on every browser. */
.bafleh-public-body button,
.bafleh-public-body input,
.bafleh-public-body select,
.bafleh-public-body textarea {
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   2. EDITORIAL HEADINGS
   Keep all major customer-facing headings on the same luxury serif family.
   -------------------------------------------------------------------------- */
.bafleh-public-body h1,
.bafleh-public-body h2,
.bafleh-public-body h3,
.bafleh-public-body h4,
.bafleh-public-body .bafleh-wp-home-title,
.bafleh-public-body .catalog-heading h1,
.bafleh-public-body .product-summary-live h1,
.bafleh-public-body .live-content-hero h1,
.bafleh-public-body .live-page-main h1,
.bafleh-public-body .live-page-main h2,
.bafleh-public-body .live-page-main h3,
.bafleh-public-body .cms-copy h1,
.bafleh-public-body .cms-copy h2,
.bafleh-public-body .cms-copy h3,
.bafleh-public-body .live-wordpress-page-content h1,
.bafleh-public-body .live-wordpress-page-content h2,
.bafleh-public-body .live-wordpress-page-content h3,
.bafleh-public-body .border-heading,
.bafleh-public-body .section-heading h1,
.bafleh-public-body .section-heading h2,
.bafleh-public-body .section-heading h3,
.bafleh-public-body .contact-live-heading h1,
.bafleh-public-body .contact-live-heading h2,
.bafleh-public-body .live-commerce-page-title h1,
.bafleh-public-body .commerce-heading h1,
.bafleh-public-body .commerce-auth-card h1,
.bafleh-public-body .commerce-success h1,
.bafleh-public-body .b19-bullion-intro h1,
.bafleh-public-body .b19-bullion-service-card h2,
.bafleh-public-body .b19-bullion-feature-copy h2,
.bafleh-public-body .b19-bullion-trust h2,
.bafleh-public-body .b19-bullion-partner h2,
.bafleh-public-body .b19-bullion-contact h2,
.bafleh-public-body .bafleh-live-newsletter h3 {
    font-family: var(--b20-font-editorial) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* Homepage headings contain spans; keep those spans in the same serif face. */
.bafleh-public-body .bafleh-wp-home-title,
.bafleh-public-body .bafleh-wp-home-title span {
    font-family: var(--b20-font-editorial) !important;
}

/* Major page-title rhythm: same scale language without forcing every H2 card. */
.bafleh-public-body .catalog-heading h1,
.bafleh-public-body .live-content-hero h1,
.bafleh-public-body .live-commerce-page-title h1,
.bafleh-public-body .commerce-heading > h1,
.bafleh-public-body .commerce-heading > div > h1 {
    line-height: 1.08 !important;
    font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   3. UI HEADINGS THAT MUST REMAIN SANS-SERIF
   Product names, filters and operational panels are functional UI, not
   editorial headlines. These explicit rules prevent global H3 rules from
   turning the shop into a mixture of serif/sans fonts.
   -------------------------------------------------------------------------- */
.bafleh-public-body .live-product-card h3,
.bafleh-public-body .live-product-info h3,
.bafleh-public-body .live-wishlist-product h3,
.bafleh-public-body .filter-block h3,
.bafleh-public-body .filter-title-row h3,
.bafleh-public-body .live-filter-heading,
.bafleh-public-body .new-menu-column h6,
.bafleh-public-body .bafleh-footer-title,
.bafleh-public-body .checkout-step-heading h3,
.bafleh-public-body .live-product-tab-nav button,
.bafleh-public-body .live-product-attributes th,
.bafleh-public-body .commerce-table th,
.bafleh-public-body .commerce-panel label {
    font-family: var(--b20-font-body) !important;
}

/* --------------------------------------------------------------------------
   4. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.bafleh-public-body .bafleh-live-menu > li > a,
.bafleh-public-body .bafleh-live-menu > li > button,
.bafleh-public-body .new-menu-dropdown-panel a,
.bafleh-public-body .mobile-nav-head,
.bafleh-public-body .mobile-nav-quicklinks a,
.bafleh-public-body .bafleh-header-action,
.bafleh-public-body .bafleh-live-localization-choice,
.bafleh-public-body .bafleh-live-localization-choice select {
    font-family: var(--b20-font-body) !important;
    font-weight: 500 !important;
}

@media (min-width: 981px) {
    .bafleh-public-body .bafleh-live-menu > li > a,
    .bafleh-public-body .bafleh-live-menu > li > button {
        font-size: 11px !important;
        letter-spacing: .025em !important;
    }
}

/* --------------------------------------------------------------------------
   5. SHOP / FILTER / PRODUCT CARDS
   -------------------------------------------------------------------------- */
.bafleh-public-body .live-filter-form,
.bafleh-public-body .live-filter-option,
.bafleh-public-body .filter-category-link,
.bafleh-public-body .filter-option-name,
.bafleh-public-body .filter-option-count,
.bafleh-public-body .filter-all-count,
.bafleh-public-body .catalog-filter-chip,
.bafleh-public-body .catalog-filter-apply-button,
.bafleh-public-body .catalog-filter-clear-button,
.bafleh-public-body .catalog-mobile-filter-button,
.bafleh-public-body .live-filter-price-button,
.bafleh-public-body .b13-price-value,
.bafleh-public-body .live-product-card,
.bafleh-public-body .live-product-card h3,
.bafleh-public-body .live-price-row,
.bafleh-public-body .live-add-cart,
.bafleh-public-body .live-clear-filters {
    font-family: var(--b20-font-body) !important;
}

.bafleh-public-body .live-product-card h3,
.bafleh-public-body .live-product-info h3 {
    font-weight: 500 !important;
    line-height: 1.42 !important;
}

.bafleh-public-body .live-price-row .price,
.bafleh-public-body .live-product-price-large,
.bafleh-public-body .live-detail-price {
    font-family: var(--b20-font-body) !important;
    font-weight: 600 !important;
}

.bafleh-public-body .filter-block h3,
.bafleh-public-body .filter-title-row h3,
.bafleh-public-body .live-filter-heading {
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   6. PRODUCT DETAIL
   -------------------------------------------------------------------------- */
.bafleh-public-body .product-summary-live,
.bafleh-public-body .product-short-description,
.bafleh-public-body .live-stock-line,
.bafleh-public-body .live-product-meta-lines,
.bafleh-public-body .live-product-tab-nav,
.bafleh-public-body .live-product-tab-panel,
.bafleh-public-body .live-product-attributes,
.bafleh-public-body .live-product-add-button,
.bafleh-public-body .product-whatsapp-enquiry,
.bafleh-public-body .live-product-enquiry {
    font-family: var(--b20-font-body) !important;
}

.bafleh-public-body .product-summary-live h1 {
    font-family: var(--b20-font-editorial) !important;
    font-weight: 500 !important;
    line-height: 1.13 !important;
}

/* --------------------------------------------------------------------------
   7. CONTENT / ABOUT / RETAIL / WHOLESALE / LAB / CONTACT / POLICIES
   -------------------------------------------------------------------------- */
.bafleh-public-body .live-page-main,
.bafleh-public-body .live-page-main p,
.bafleh-public-body .live-page-main li,
.bafleh-public-body .cms-copy,
.bafleh-public-body .cms-copy p,
.bafleh-public-body .cms-copy li,
.bafleh-public-body .live-wordpress-page-content,
.bafleh-public-body .live-wordpress-page-content p,
.bafleh-public-body .live-wordpress-page-content li,
.bafleh-public-body .about-live-copy,
.bafleh-public-body .live-center-copy,
.bafleh-public-body .live-hk-copy,
.bafleh-public-body .lead-copy,
.bafleh-public-body .live-basic-subtitle,
.bafleh-public-body .contact-live-section,
.bafleh-public-body .enquiry-form {
    font-family: var(--b20-font-body) !important;
}

/* Imported WordPress inline typography must not change the public font family. */
.bafleh-public-body .live-wordpress-page-content [style*="font-family"],
.bafleh-public-body .cms-copy [style*="font-family"] {
    font-family: inherit !important;
}

/* If migrated HTML itself carries a font-family on a heading, keep the heading
   editorial rather than inheriting body Montserrat from the normalization rule. */
.bafleh-public-body .live-wordpress-page-content h1[style*="font-family"],
.bafleh-public-body .live-wordpress-page-content h2[style*="font-family"],
.bafleh-public-body .live-wordpress-page-content h3[style*="font-family"],
.bafleh-public-body .cms-copy h1[style*="font-family"],
.bafleh-public-body .cms-copy h2[style*="font-family"],
.bafleh-public-body .cms-copy h3[style*="font-family"] {
    font-family: var(--b20-font-editorial) !important;
}

/* --------------------------------------------------------------------------
   8. COMMERCE / ACCOUNT / CART / CHECKOUT / ORDERS / WISHLIST
   -------------------------------------------------------------------------- */
.bafleh-public-body .commerce-page,
.bafleh-public-body .commerce-page p,
.bafleh-public-body .commerce-page li,
.bafleh-public-body .commerce-page label,
.bafleh-public-body .commerce-page input,
.bafleh-public-body .commerce-page select,
.bafleh-public-body .commerce-page textarea,
.bafleh-public-body .commerce-page button,
.bafleh-public-body .commerce-page .btn,
.bafleh-public-body .commerce-panel,
.bafleh-public-body .commerce-table,
.bafleh-public-body .checkout-item,
.bafleh-public-body .cart-product,
.bafleh-public-body .live-account-mobile-nav,
.bafleh-public-body .order-item-copy,
.bafleh-public-body .request-row {
    font-family: var(--b20-font-body) !important;
}

.bafleh-public-body .live-commerce-page-title h1,
.bafleh-public-body .commerce-heading h1,
.bafleh-public-body .commerce-auth-card h1,
.bafleh-public-body .commerce-success h1 {
    font-family: var(--b20-font-editorial) !important;
    font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   9. BUTTONS / CTAs / NEWSLETTER / FOOTER / WHATSAPP
   -------------------------------------------------------------------------- */
.bafleh-public-body .btn,
.bafleh-public-body [class*="button"],
.bafleh-public-body .b19-bullion-btn,
.bafleh-public-body .bafleh-smart-whatsapp,
.bafleh-public-body .bafleh-live-newsletter-form,
.bafleh-public-body .bafleh-live-footer,
.bafleh-public-body .bafleh-live-footer a,
.bafleh-public-body .bafleh-live-footer p,
.bafleh-public-body .bafleh-live-footer button,
.bafleh-public-body .bafleh-live-footer-bottom {
    font-family: var(--b20-font-body) !important;
}

.bafleh-public-body .bafleh-footer-title {
    font-family: var(--b20-font-body) !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
}

/* --------------------------------------------------------------------------
   10. MOBILE TYPOGRAPHY
   Use the same families as desktop; only sizing/rhythm changes.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .bafleh-public-body {
        font-size: 14px;
    }

    .bafleh-public-body .catalog-heading h1,
    .bafleh-public-body .live-content-hero h1,
    .bafleh-public-body .live-commerce-page-title h1,
    .bafleh-public-body .commerce-heading > h1,
    .bafleh-public-body .commerce-heading > div > h1 {
        font-family: var(--b20-font-editorial) !important;
        font-weight: 500 !important;
        line-height: 1.1 !important;
    }

    .bafleh-public-body .live-product-card h3,
    .bafleh-public-body .live-product-info h3 {
        font-family: var(--b20-font-body) !important;
        font-weight: 500 !important;
    }

    .bafleh-public-body .bafleh-live-menu > li > a,
    .bafleh-public-body .bafleh-live-menu > li > button,
    .bafleh-public-body .mobile-nav-quicklinks a {
        font-family: var(--b20-font-body) !important;
        font-weight: 500 !important;
    }
}

/* --------------------------------------------------------------------------
   11. LANGUAGE-SPECIFIC TYPOGRAPHY
   These rules intentionally come last so English typography cannot override
   Arabic or Traditional Chinese script rendering.
   -------------------------------------------------------------------------- */
html[lang="ar"] .bafleh-public-body,
html[lang="ar"] .bafleh-public-body p,
html[lang="ar"] .bafleh-public-body li,
html[lang="ar"] .bafleh-public-body a,
html[lang="ar"] .bafleh-public-body label,
html[lang="ar"] .bafleh-public-body small,
html[lang="ar"] .bafleh-public-body address,
html[lang="ar"] .bafleh-public-body h1,
html[lang="ar"] .bafleh-public-body h2,
html[lang="ar"] .bafleh-public-body h3,
html[lang="ar"] .bafleh-public-body h4,
html[lang="ar"] .bafleh-public-body button,
html[lang="ar"] .bafleh-public-body input,
html[lang="ar"] .bafleh-public-body select,
html[lang="ar"] .bafleh-public-body textarea,
html[lang="ar"] .bafleh-public-body .bafleh-wp-home-title,
html[lang="ar"] .bafleh-public-body .bafleh-wp-home-title span {
    font-family: var(--b20-font-arabic) !important;
}

html[lang^="zh"] .bafleh-public-body,
html[lang^="zh"] .bafleh-public-body p,
html[lang^="zh"] .bafleh-public-body li,
html[lang^="zh"] .bafleh-public-body a,
html[lang^="zh"] .bafleh-public-body label,
html[lang^="zh"] .bafleh-public-body small,
html[lang^="zh"] .bafleh-public-body address,
html[lang^="zh"] .bafleh-public-body h1,
html[lang^="zh"] .bafleh-public-body h2,
html[lang^="zh"] .bafleh-public-body h3,
html[lang^="zh"] .bafleh-public-body h4,
html[lang^="zh"] .bafleh-public-body button,
html[lang^="zh"] .bafleh-public-body input,
html[lang^="zh"] .bafleh-public-body select,
html[lang^="zh"] .bafleh-public-body textarea,
html[lang^="zh"] .bafleh-public-body .bafleh-wp-home-title,
html[lang^="zh"] .bafleh-public-body .bafleh-wp-home-title span {
    font-family: var(--b20-font-zh) !important;
}