/* ════════════════════════════════════════════════════════════════
   FONTS.CSS — Garamond + Didot / LP Display System
   Include this AFTER bootstrap.min.css and style.css on every page
   ════════════════════════════════════════════════════════════════ */

/* ── Import EB Garamond (closest open web Garamond) ── */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,700&display=swap');

/* ── Import Cormorant (LP Display / Didot substitute — free, elegant) ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* ════════════════════════════════════════════════════════════════
   FONT VARIABLE DEFINITIONS
   --font-display  →  Cormorant Garamond  (Didot / LP Display feel)
   --font-body     →  EB Garamond         (classic Garamond)
   ════════════════════════════════════════════════════════════════ */
:root {
    --font-display: 'Cormorant Garamond', 'Didot', 'Bodoni MT', 'Playfair Display', serif;
    --font-body:    'EB Garamond', 'Garamond', 'Adobe Garamond Pro', 'Times New Roman', serif;
}

/* ════════════════════════════════════════════════════════════════
   GLOBAL OVERRIDE — Replace Open Sans & Playfair Display
   ════════════════════════════════════════════════════════════════ */

/* Body / paragraph text → EB Garamond */
body,
p,
span,
li,
a,
input,
textarea,
select,
button,
label,
.form-control,
.btn,
.nav-link,
.navbar-nav .nav-item,
.dropdown-item {
    font-family: var(--font-body) !important;
    font-size: 1.05rem; /* Garamond reads better slightly larger */
    letter-spacing: 0.01em;
}

/* All headings → Cormorant Garamond (Didot/LP Display feel) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display) !important;
    letter-spacing: -0.01em;
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════
   PAGE-SPECIFIC OVERRIDES
   All sections that explicitly set font-family
   ════════════════════════════════════════════════════════════════ */

/* ── Eyebrow / label text (was Open Sans uppercase) ── */
.about-eyebrow,
.story-eyebrow,
.values-eyebrow,
.team-eyebrow,
.journey-eyebrow,
.faq-eyebrow,
.cta-eyebrow,
.contact-eyebrow,
.contact-form-eyebrow,
.suggested-eyebrow,
.cart-eyebrow,
.checkout-eyebrow,
.prod-eyebrow,
.related-eyebrow,
.section-label,
.product-card-category,
.cart-prod-cat,
.summary-item-cat,
.sug-cat,
.team-card-role,
.contact-info-label,
.vu-stat-lbl,
.field-label,
.auth-label,
.co-label,
.info-card-head h6,
.filter-group-title,
.shipping-title {
    font-family: var(--font-body) !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.2em;
}

/* ── Large display headings ── */
.about-page-header h1,
.contact-page-header h1,
.cart-page-header h1,
.checkout-header h1,
.product-page-header h1,
.success-title,
.auth-hero-title,
.values-title,
.team-title,
.journey-title,
.faq-title,
.about-cta-section h2,
.contact-social-section h4,
.about-story-section h2,
.contact-form-title,
.timeline-year,
.stat-number,
.sum-total-val,
.sum-total-label,
.price-final,
.info-price-final,
.related-price,
.sug-price,
.spent-val,
.cart-unit-price,
.cart-row-total,
.summary-item-price,
.summary-item-name,
.os-item-name,
.cart-prod-name,
.product-card-name,
.related-name,
.sug-name,
.auth-form-logo,
.wa-cta-wrap .btn-wa-confirm {
    font-family: var(--font-display) !important;
    letter-spacing: -0.02em;
}

/* ── Form panel / card headings ── */
.form-panel-head h5,
.summary-head h5,
.os-head h5,
.summary-card-head h5,
.checkout-block-head h5,
.info-card-head h5,
.team-card-body h5,
.value-card h4,
.timeline-content h5,
.auth-form-logo,
.modal-head-name,
.vu-modal-name,
.vu-page-title {
    font-family: var(--font-display) !important;
}

/* ── Body text paragraphs (all pages) ── */
.about-story-section p,
.contact-form-subtitle,
.contact-info-card p,
.value-card p,
.team-card-body p,
.timeline-content p,
.about-cta-section p,
.auth-hero-desc,
.auth-perk,
.promo-strip p,
.wa-info-strip p,
.checkout-breadcrumb a,
.checkout-breadcrumb span,
.co-breadcrumb a,
.co-breadcrumb span,
.about-breadcrumb a,
.about-breadcrumb span,
.cart-breadcrumb a,
.cart-breadcrumb span,
.contact-breadcrumb a,
.contact-breadcrumb span,
.prod-breadcrumb a,
.prod-breadcrumb span {
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    line-height: 1.85;
}

/* ── Navigation ── */
.navbar-nav .nav-link,
.navbar-brand h1,
.dropdown-item {
    font-family: var(--font-body) !important;
    letter-spacing: 0.08em;
    font-size: 0.95rem !important;
}

/* ── Buttons ── */
.btn,
.btn-place-order,
.btn-checkout,
.btn-checkout-alt,
.btn-add-cart,
.btn-whatsapp-order,
.btn-wa-confirm,
.btn-auth-submit,
.btn-coupon,
.btn-contact-submit,
.btn-continue,
.btn-update-cart,
.btn-shop-now,
.btn-vu-search,
.btn-view,
.btn-vu-reset,
.overlay-btn,
.sug-btn,
.btn-action-primary,
.btn-action-outline,
.btn-admin-search,
.btn-admin-outline {
    font-family: var(--font-body) !important;
    letter-spacing: 0.14em;
    font-size: 0.85rem !important;
}

/* ── Form inputs ── */
.field-input,
.auth-input,
.co-input,
.coupon-input,
.search-input,
.vu-search-input,
.admin-select,
.vu-select,
.sidebar-select,
.sidebar-search-wrap input,
.form-control,
.cart-qty-input,
.qty-input {
    font-family: var(--font-body) !important;
    font-size: 0.98rem !important;
    letter-spacing: 0.02em;
}

/* ── Table cells ── */
.vu-table th,
.vu-table td,
.cart-table-head span,
.items-table th,
.items-table td,
.product-desc-table td,
.info-desc-table td {
    font-family: var(--font-body) !important;
}

/* ── Stats & numbers ── */
.stat-number,
.vu-stat-val,
.sum-total-val,
.price-final,
.info-price-final,
.cart-unit-price,
.summary-item-price,
.sug-price,
.related-price,
.u-spent,
.vor-total,
.mo-total {
    font-family: var(--font-display) !important;
    font-weight: 700;
    font-style: normal;
}

/* ── Footer ── */
.footer h4,
.copyright a {
    font-family: var(--font-display) !important;
}
.footer p,
.footer a,
.copyright {
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
}

/* ── Auth hero text ── */
.auth-hero-title {
    font-family: var(--font-display) !important;
    font-size: clamp(2rem, 3.5vw, 3.2rem) !important;
    font-weight: 600 !important;
    font-style: italic;
}

/* ── Size tweaks so Garamond/Cormorant read at right optical size ── */
/* Garamond needs to be ~10–15% larger than sans-serif to look the same */
.field-hint,
.auth-note,
.auth-form-sub,
.cart-prod-sku,
.u-email,
.u-date-time,
.vu-pagination-info,
.pagination-info,
.results-count,
.pin-hint,
.ship-eta,
.trust-item span,
.badge-item span {
    font-family: var(--font-body) !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.04em;
}

/* Small badges & labels */
.badge-offer,
.badge-out,
.badge-low,
.u-badge,
.mini-badge,
.vor-status,
.mo-status,
.order-badge,
.cat-pill,
.filter-chip,
.meta-pill,
.info-category,
.sug-cat,
.u-orders {
    font-family: var(--font-body) !important;
    letter-spacing: 0.14em;
    font-size: 0.72rem !important;
}

/* ── Italic em tags (Didot italic feel) ── */
h1 em, h2 em, h3 em, h4 em,
.about-page-header h1 em,
.contact-page-header h1 em,
.cart-page-header h1 em,
.checkout-header h1 em,
.auth-hero-title em,
.values-title em,
.team-title em,
.journey-title em,
.faq-title em,
.about-cta-section h2 em,
.success-title em,
.related-title em,
.suggested-title em {
    font-family: var(--font-display) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    color: #C9A96E;
}

/* ── Dashboard admin font ── */
.vu-page,
.vu-page * {
    font-family: var(--font-body) !important;
}
.vu-page h2,
.vu-page h5,
.vu-modal-name,
.vu-page-title {
    font-family: var(--font-display) !important;
}

/* ── Timeline year numbers ── */
.timeline-year {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    font-size: 2rem !important;
    letter-spacing: -0.03em;
}

/* ── Value card ghost numbers ── */
.value-card-number {
    font-family: var(--font-display) !important;
    font-size: 5rem !important;
    font-weight: 900 !important;
    font-style: italic;
    opacity: 0.08;
}

/* ════════════════════════════════════════════════════════════════
   FINE-TUNE — Cormorant Garamond has longer ascenders/descenders
   so line-height needs a slight increase
   ════════════════════════════════════════════════════════════════ */
h1, h2 { line-height: 1.08 !important; }
h3, h4 { line-height: 1.18 !important; }
h5, h6 { line-height: 1.28 !important; }
p       { line-height: 1.85 !important; }