/* Hunhun storefront typography — role-based source of truth, 2026-09-11.
 * A named layer with important typography declarations intentionally supersedes
 * legacy page !important declarations. Only the listed roles are affected.
 * Equal :where specificity makes specialization follow the documented role order.
 * Product detail image/article area, captions, source excerpts, prices and forms
 * retain their existing content and behavior.
 */
@layer hhTypography {
:root {
 --hh-type-page: 36px;
 --hh-type-section: 32px;
 --hh-type-display: 40px;
 --hh-type-subsection: 28px;
 --hh-type-card: 22px;
 --hh-type-feature: 28px;
 --hh-type-small: 20px;
 --hh-type-compact: 18px;
 --hh-type-blog: 20px;
 --hh-type-product: 32px;
}
/* page */
body :where(.hh-products-intro h1,
 .hh-concerns-intro h1,
 .hh-events-intro h1,
 .hh-health-intro h1,
 .hh-customer-hero h1,
 .hh-legal-hero h1,
 .hh-refund__hero h1,
 .hh-login-hero h1,
 .hh-member-hero h1,
 .hh-cart-hero h1,
 .hh-order-hero h1,
 .hh-account-hub__heading h1,
 .hh-guest-heading h1,
 .hh-join-complete h1,
 .hh-health-detail__header h1,
 .hc-heading h1) {
 font-size:var(--hh-type-page)!important; font-weight:700!important; line-height:1.3!important; letter-spacing:-0.035em!important;
}
/* section */
body :where(.hh-section-heading h2,
 .hh-concern-section__head h2,
 .hh-products-finder__copy h2,
 .hh-events-section-head h2,
 .hh-health-list-head h2,
 .hh-health-principle__inner h2,
 .hh-brand-section-head h2,
 .hh-brand-standards__title h2,
 .hh-brand-health__copy h2,
 .hh-brand-promise__head h2,
 .hh-brand-closing__inner h2,
 .hh-customer-content__head h2,
 .hh-legal-content__head h2,
 .hh-refund__heading h2,
 .hh-refund__cta h2,
 .hh-health-detail__product h2,
 .hh-login-guide h2,
 .hh-member-benefit h2,
 .hc-wide h2) {
 font-size:var(--hh-type-section)!important; font-weight:700!important; line-height:1.35!important; letter-spacing:-0.03em!important;
}
/* display */
body :where(#products .hh-section-heading h2,
 #videos .hh-section-heading h2,
 #wellness .hh-section-heading h2,
 #community .hh-section-heading h2,
 .hh-brand__copy h2,
 .hh-brand-hero__copy h1,
 .hh-brand-moments__intro h2) {
 font-size:var(--hh-type-display)!important; font-weight:700!important; line-height:1.3!important; letter-spacing:-0.035em!important;
}
/* subsection */
body :where(.hh-member-card__heading h2,
 .hh-detail-panel__heading h2,
 .cartx-empty h2,
 .hh-myqna__head h2,
 .hh-health-detail__article h2,
 .hc-section>h2) {
 font-size:var(--hh-type-subsection)!important; font-weight:700!important; line-height:1.35!important; letter-spacing:-0.03em!important;
}
/* card */
body :where(.hh-product-card__body h3,
 .hh-products-card__name,
 .hh-concern-product__body h3,
 .hh-concern-solo__copy h3,
 .hh-column-card__body h3,
 .hh-health-card__body>strong,
 .hh-health-related__grid strong,
 .hh-concern-choice h2,
 .hh-events-feature-card__body>strong,
 .hh-events-card__body>strong,
 .hh-events-benefit__copy strong,
 .hh-refund__steps strong,
 .hh-brand-reason__grid strong,
 .hh-brand-moment__products strong,
 .hc-product-copy h3) {
 font-size:var(--hh-type-card)!important; font-weight:600!important; line-height:1.4!important; letter-spacing:-0.025em!important;
}
/* feature */
body :where(#wellness .hh-column-card--feature h3,
 .hh-health-feature__copy h2,
 .hh-brand-moment__copy>strong) {
 font-size:var(--hh-type-feature)!important; font-weight:600!important; line-height:1.4!important; letter-spacing:-0.025em!important;
}
/* small */
body :where(.hh-purchase-guide__copy h3,
 .hh-customer-login-card strong,
 .hh-myqna-empty h2,
 .hh-health-empty>strong,
 .hh-sticky-buy__inner h2,
 .hh-brand-standards__list strong,
 .hc-key h3,
 .hc-research h3,
 .hc-section>h3,
 .hc-health>h2,
 .hc-sources>h2,
 .hc-related-product>h2,
 .hc-related-reading>h2) {
 font-size:var(--hh-type-small)!important; font-weight:600!important; line-height:1.4!important; letter-spacing:-0.02em!important;
}
/* compact */
body :where(.hh-video-item__copy strong,
 .cartx-name a,
 .orderx-name,
 .sit_option>h3,
 .quick_option_tit,
 .cartx-sec-title,
 .orderx-sec-title,
 .hh-customer-help strong) {
 font-size:var(--hh-type-compact)!important; font-weight:600!important; line-height:1.45!important; letter-spacing:-0.02em!important;
}
/* blog */
body :where(.hh-blog-entry h4) {
 font-size:var(--hh-type-blog)!important; font-weight:600!important; line-height:1.5!important; letter-spacing:-0.025em!important;
}
/* product */
body :where(#sit_title) {
 font-size:var(--hh-type-product)!important; font-weight:700!important; line-height:1.35!important; letter-spacing:-0.035em!important;
}

/* Preserve highlighted words while sharing the title's weight. */
body :where(.hh-refund__hero h1 strong){font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;letter-spacing:inherit!important}
/* A comparable title should have a comparable introduction footprint. */
body :where(.hh-products-intro,.hh-concerns-intro,.hh-events-intro,.hh-health-intro,.hh-customer-hero,.hh-legal-hero,.hh-login-hero,.hh-member-hero,.hh-cart-hero,.hh-order-hero){padding-top:40px!important;padding-bottom:36px!important}
body :where(.hh-refund__hero,.hh-brand-hero){padding-top:56px!important;padding-bottom:56px!important}
body :where(.hh-events-intro__inner,.hh-health-intro__inner,.hh-customer-hero__inner,.hh-legal-hero__inner){gap:32px!important}
body :where(.hh-events-intro__lead,.hh-health-intro__lead,.hh-customer-hero__lead,.hh-legal-hero__lead){font-size:15px!important;font-weight:400!important;line-height:1.7!important;letter-spacing:0!important}
body :where(.hh-events-intro__eyebrow,.hh-health-intro__eyebrow,.hh-customer-hero__eyebrow,.hh-legal-hero__eyebrow){font-size:12px!important;font-weight:700!important;line-height:1.5!important;letter-spacing:.12em!important;margin-bottom:12px!important}
/* Two-line blog excerpt geometry stays coupled to its 1.5 line height. */
body :where(.hh-blog-entry h4){height:3em!important;min-height:3em!important;max-height:3em!important}
@media(max-width:700px){
 :root {
 --hh-type-page: 28px;
 --hh-type-section: 24px;
 --hh-type-display: 30px;
 --hh-type-subsection: 24px;
 --hh-type-card: 18px;
 --hh-type-feature: 24px;
 --hh-type-small: 18px;
 --hh-type-compact: 16px;
 --hh-type-blog: 18px;
 --hh-type-product: 28px;
 }
 body :where(.hh-products-intro,.hh-concerns-intro,.hh-events-intro,.hh-health-intro,.hh-customer-hero,.hh-legal-hero,.hh-login-hero,.hh-member-hero,.hh-cart-hero,.hh-order-hero){padding-top:28px!important;padding-bottom:28px!important}
 body :where(.hh-refund__hero,.hh-brand-hero){padding-top:36px!important;padding-bottom:36px!important}
 body :where(.hh-events-intro__inner,.hh-health-intro__inner,.hh-customer-hero__inner,.hh-legal-hero__inner){gap:16px!important}
 body :where(.hh-events-intro__lead,.hh-health-intro__lead,.hh-customer-hero__lead,.hh-legal-hero__lead){font-size:14px!important}
 body :where(.hh-events-intro__eyebrow,.hh-health-intro__eyebrow,.hh-customer-hero__eyebrow,.hh-legal-hero__eyebrow){font-size:11px!important}
}
}