/**
 * Cosmetics Design System - Typography Component Rules
 * Harmonized, even, elegant typography across SKKIN Cosmetics & WooCommerce.
 * Ensures consistent proportions: no gigantic headings, no microscopic fine print.
 */

/* ==========================================================================
   1. GLOBAL BODY & BASE TYPOGRAPHY
   ========================================================================== */
html,
body,
.site,
.entry-content,
button,
input,
select,
textarea {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: var(--font-size-base, 14.5px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-body, 1.6);
  letter-spacing: var(--letter-spacing-normal, 0);
  color: #1f2937;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.entry-content p,
p {
  font-size: var(--font-size-base, 14.5px);
  line-height: var(--line-height-body, 1.6);
  margin-bottom: 1rem;
}

/* ==========================================================================
   2. HARMONIZED HEADINGS HIERARCHY (No Oversized Text)
   ========================================================================== */

/* Hero H1 & Main Page Titles (26px to 32px max - Balanced & Elegant) */
.site h1,
.entry-content h1,
h1.page-title,
.hero-section h1,
.elementor-widget-heading h1.elementor-heading-title,
.woocommerce-products-header__title.page-title {
  font-family: var(--font-heading, 'Montserrat', 'Poppins', sans-serif) !important;
  font-size: var(--font-size-display, clamp(24px, 2.5vw, 30px)) !important;
  font-weight: var(--font-weight-bold, 700) !important;
  line-height: var(--line-height-ultra-tight, 1.2) !important;
  letter-spacing: var(--letter-spacing-tighter, -0.02em) !important;
  color: #111111;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* Section H2 (22px to 25px max - Clean and Confident) */
.site h2,
.wp-block-heading h2,
.elementor-widget-heading h2.elementor-heading-title,
.related > h2:first-child,
.upsells > h2:first-child,
.cross-sells > h2:first-child,
.woocommerce-tabs h2,
.woocommerce-products-header__title {
  font-family: var(--font-heading, 'Montserrat', 'Poppins', sans-serif) !important;
  font-size: var(--font-size-2xl, clamp(20px, 2vw, 25px)) !important;
  font-weight: var(--font-weight-bold, 700) !important;
  line-height: var(--line-height-tight, 1.25) !important;
  letter-spacing: var(--letter-spacing-tight, -0.015em) !important;
  color: #111111;
  margin-top: 0;
  margin-bottom: 0.85rem;
}

/* Section H3 & Sub-headers (17px to 19px) */
.site h3,
.wp-block-heading h3,
.elementor-widget-heading h3.elementor-heading-title,
.widget-title,
.widgettitle {
  font-family: var(--font-heading, 'Montserrat', 'Poppins', sans-serif) !important;
  font-size: var(--font-size-xl, clamp(16.5px, 1.2vw, 19px)) !important;
  font-weight: var(--font-weight-bold, 700) !important;
  line-height: var(--line-height-snug, 1.35) !important;
  letter-spacing: var(--letter-spacing-snug, -0.01em) !important;
  color: #111111;
  margin-top: 0;
  margin-bottom: 0.65rem;
}

/* H4 & Smaller Headings (15px to 16px) */
.site h4,
.wp-block-heading h4,
.elementor-widget-heading h4.elementor-heading-title {
  font-family: var(--font-heading, 'Montserrat', 'Poppins', sans-serif) !important;
  font-size: 15.5px !important;
  font-weight: var(--font-weight-semibold, 600) !important;
  line-height: var(--line-height-snug, 1.35) !important;
  color: #111111;
}

/* Overlines, Eyebrows & Section Subtitles */
.skkin-section-eyebrow,
.skkin-section-eyebrow {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: var(--font-size-xs, 11.5px) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--letter-spacing-badge, 0.1em) !important;
  color: #e11d48 !important;
  margin-bottom: 6px !important;
}

.skkin-section-subtitle,
.skkin-section-subtitle {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: var(--font-size-base, 14px) !important;
  color: #64748b !important;
  line-height: 1.55 !important;
}

/* ==========================================================================
   3. NAVIGATION (13.5px to 14px, Weight: 600)
   ========================================================================== */
.site .menu-primary-menu-container > ul > li > a,
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a,
.skkin-menu-list > li > a,
.site-header-cart .cart-contents,
.secondary-navigation a {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

.main-navigation ul.menu ul li > a,
.main-navigation ul.nav-menu ul li > a,
.skkin-menu-list .sub-menu li a {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   4. PRODUCT CARD LOOP TYPOGRAPHY (Clean Uniform Grid)
   ========================================================================== */

/* Product Card Title (12.5px, Weight: 600, 2-line clamp) */
ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2.woocommerce-loop-product__title,
.skkin-card-title {
  font-family: var(--font-heading, 'Montserrat', 'Poppins', sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: #18181b !important;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 33px !important;
}

/* Product Card Eyebrow / Benefit */
.skkin-card-benefit {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #e11d48 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 4px !important;
  text-transform: uppercase !important;
}

/* Product Card Price (16px Bold + 12.5px Strikethrough) */
ul.products li.product .price,
ul.products li.product .price ins,
ul.products li.product .price > .amount,
.skkin-current-price {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  line-height: 1.2 !important;
}

ul.products li.product .price del,
ul.products li.product .price del .amount,
.skkin-regular-price {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
}

/* Star Rating Badge */
.skkin-card-rating,
.shoptimizer_ratingCount {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #111111 !important;
}

/* ==========================================================================
   5. SINGLE PRODUCT (PDP) TYPOGRAPHY
   ========================================================================== */

/* Main PDP Heading (26px to 30px - Elegant, Never Obnoxious) */
.summary h1.entry-title,
.summary h1.product_title,
.skkin-pdp-title {
  font-family: var(--font-heading, 'Montserrat', 'Poppins', sans-serif) !important;
  font-size: clamp(24px, 2.5vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  color: #111111 !important;
  margin: 0 0 8px 0 !important;
}

/* PDP Subtitle */
.skkin-pdp-subtitle {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  color: #52525b !important;
  margin: 0 0 16px 0 !important;
}

/* PDP Accent Price Strip */
.skkin-pdp-accent-price {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #e11d48 !important;
}

.skkin-pdp-mrp-info {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 13.5px !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* PDP Section Titles (Helps With, Hero Ingredients, Description, Offers) */
.skkin-block-title {
  font-family: var(--font-heading, 'Montserrat', 'Poppins', sans-serif) !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: -0.01em !important;
}

/* PDP Card Labels */
.skkin-feature-label {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  line-height: 1.3 !important;
}

/* ==========================================================================
   6. BUTTONS & PILLS (Even Proportions)
   ========================================================================== */
.button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.checkout-button,
#place_order {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  border-radius: 9999px !important;
}

/* Badges, Chips & Pills (11.5px to 12px - Clear & Legible) */
li.product .onsale,
.product-label,
.skkin-badge-pill,
.skkin-discount-badge,
.skkin-ticker-badge,
.skkin-reel-shop-chip,
.badge-pill {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  border-radius: 9999px !important;
  padding: 3px 9px !important;
}

/* Size Pills */
.skkin-size-pill,
.skkin-pdp-size-pills button {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

/* Breadcrumbs (12.5px - Unobtrusive, readable) */
.woocommerce-breadcrumb,
.skkin-breadcrumb-nav {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

/* ==========================================================================
   7. WOOCOMMERCE CART & CHECKOUT TYPOGRAPHY
   ========================================================================== */
.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-order-details__title {
  font-family: var(--font-heading, 'Montserrat', 'Poppins', sans-serif) !important;
  font-size: var(--font-size-xl, 18px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  color: #111111 !important;
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

/* Cart Table Typography */
.woocommerce table.shop_table th {
  font-family: var(--font-heading, 'Montserrat', 'Poppins', sans-serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #475569 !important;
}

.woocommerce table.shop_table td.product-name a {
  font-family: var(--font-heading, 'Montserrat', 'Poppins', sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #18181b !important;
  line-height: 1.35 !important;
}

.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #111111 !important;
}

.woocommerce-cart .cart_totals table.shop_table th {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.woocommerce-cart .cart_totals table.shop_table td {
  font-size: 14px !important;
  color: #111111 !important;
}

.woocommerce-cart .cart_totals table.shop_table .order-total td strong {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #e11d48 !important;
}

/* Checkout Form Labels & Details */
.woocommerce-checkout label {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  margin-bottom: 6px !important;
}

.woocommerce-checkout .woocommerce-input-wrapper input,
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout .woocommerce-input-wrapper textarea {
  font-size: 14px !important;
}

#payment ul.payment_methods li label {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #111111 !important;
}

#payment div.payment_box p {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
}

/* ==========================================================================
   8. SIDEBAR & FOOTER WIDGETS TYPOGRAPHY
   ========================================================================== */
.sidebar .widget-title,
.widget-area .widget-title {
  font-family: var(--font-heading, 'Montserrat', 'Poppins', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #111111 !important;
  margin-bottom: 14px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.sidebar ul li,
.widget-area ul li,
.sidebar ul li a,
.widget-area ul li a {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  line-height: 1.5 !important;
}

/* Footer Typography */
.site-footer .widget-title {
  font-family: var(--font-heading, 'Montserrat', 'Poppins', sans-serif) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #ffffff !important;
}

.site-footer p,
.site-footer ul li,
.site-footer ul li a {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 13px !important;
  color: #a1a1aa !important;
  line-height: 1.6 !important;
}

.site-info,
.site-info p,
.site-info a {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 12px !important;
  color: #71717a !important;
}

/* ==========================================================================
   9. NOTICES, ALERTS & BADGES
   ========================================================================== */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  font-family: var(--font-body, 'Poppins', sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  border-radius: 12px !important;
}

/* ==========================================================================
   10. UNIVERSAL LOWER-BOUND & UPPER-BOUND SAFEGUARDS
   Ensures zero microscopic (sub-11.5px) text and no giant (over-32px) headings.
   ========================================================================== */
small,
.small,
.posted_in,
.tagged_as,
.product_meta,
.sku_wrapper,
.woocommerce-review-link {
  font-size: 12px !important;
  line-height: 1.4 !important;
}

/* Clamp any oversized headings throughout the site */
.site h1, h1 {
  font-size: var(--font-size-display, clamp(24px, 2.5vw, 28px)) !important;
}

.site h2, h2 {
  font-size: var(--font-size-2xl, clamp(20px, 2vw, 24px)) !important;
}

.site h3, h3 {
  font-size: var(--font-size-xl, clamp(16.5px, 1.2vw, 18.5px)) !important;
}

.site h4, h4 {
  font-size: 15.5px !important;
}

.site h5, h5 {
  font-size: 14px !important;
}

.site h6, h6 {
  font-size: 13px !important;
}