/* ============================================================
   olayole.es — Tipografías personalizadas v2.0
   Cormorant Garamond → Títulos  |  Montserrat → Cuerpo/UI
   Reforzado para sobreescribir Elementor Pro
   ============================================================ */

@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,600&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── 1. Variables CSS ────────────────────────────────────────
   Se declaran aquí para sobreescribir las del Elementor Kit
   (nuestro CSS carga después de Elementor, misma especificidad
   → la última declaración gana en cascada)
   ─────────────────────────────────────────────────────────── */
:root {
    --font-heading: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Montserrat', Arial, sans-serif;

    /* Variables internas de Elementor Pro Global Typography */
    --e-global-typography-primary-font-family:   'Cormorant Garamond';
    --e-global-typography-secondary-font-family: 'Cormorant Garamond';
    --e-global-typography-text-font-family:      'Montserrat';
    --e-global-typography-accent-font-family:    'Montserrat';

    /* Pesos que Elementor usa junto a las variables */
    --e-global-typography-primary-font-weight:   600;
    --e-global-typography-secondary-font-weight: 600;
    --e-global-typography-text-font-weight:      400;
    --e-global-typography-accent-font-weight:    500;
}

/* ── 2. Cuerpo y texto base ──────────────────────────────────
   Prefijo "html body" sube la especificidad por encima de los
   selectores de Elementor sin llegar a inline styles
   ─────────────────────────────────────────────────────────── */
html body,
html body p,
html body li,
html body td,
html body th,
html body label,
html body span,
html body input,
html body textarea,
html body select,
html body blockquote,
html body .ast-container,
html body .entry-content,
html body .widget,
html body .elementor-widget-container,
html body .elementor-widget-container p,
html body .elementor-widget-container span,
html body .elementor-widget-container li,
html body .elementor-text-editor,
html body .elementor-widget-text-editor .elementor-widget-container {
    font-family: 'Montserrat', Arial, sans-serif !important;
}

/* ── 3. Títulos (h1–h4) ──────────────────────────────────── */
html body h1,
html body h2,
html body h3,
html body h4,
html body h1 a,
html body h2 a,
html body h3 a,
html body h4 a,
html body .entry-title,
html body .entry-title a,
html body .site-title,
html body .product_title,
html body .woocommerce-loop-product__title,
html body .elementor h1,
html body .elementor h2,
html body .elementor h3,
html body .elementor h4,
html body .elementor-heading-title,
html body .elementor-widget-heading .elementor-heading-title,
html body .elementor-widget-heading .elementor-widget-container h1,
html body .elementor-widget-heading .elementor-widget-container h2,
html body .elementor-widget-heading .elementor-widget-container h3,
html body .elementor-widget-heading .elementor-widget-container h4 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* ── 4. Menú de navegación ───────────────────────────────── */
html body nav,
html body nav a,
html body nav li,
html body .main-navigation,
html body .main-navigation a,
html body .main-navigation li,
html body #ast-hf-menu-1,
html body #ast-hf-menu-1 a,
html body .ast-header-nav-link,
html body .ast-header-nav-link a,
html body .menu-toggle,
html body .ast-mobile-menu-trigger-markup,
html body .ast-above-header-menu a,
html body .ast-below-header-menu a,
html body .sub-menu a,
html body .elementor-nav-menu a,
html body .elementor-nav-menu__container a,
html body .elementor-nav-menu--main .elementor-item,
html body .elementor-nav-menu--dropdown .elementor-item,
html body .e-n-menu a,
html body header a {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    font-size: 13px !important;
}

/* ── 4b. Tamaño y espaciado del menú ─────────────────────── */
html body .main-navigation a,
html body #ast-hf-menu-1 a,
html body .ast-header-nav-link,
html body .ast-header-nav-link a,
html body .ast-above-header-menu a,
html body .ast-below-header-menu a,
html body .elementor-nav-menu a,
html body .elementor-nav-menu__container a,
html body .elementor-nav-menu--main .elementor-item,
html body .e-n-menu a {
    font-size: 13px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* ── 5. Botones ──────────────────────────────────────────── */
html body .ast-button,
html body .button,
html body button,
html body input[type="button"],
html body input[type="submit"],
html body input[type="reset"],
html body .wp-block-button__link,
html body .woocommerce a.button,
html body .woocommerce button.button,
html body .woocommerce input.button,
html body .woocommerce #respond input#submit,
html body .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
html body .elementor-button,
html body .elementor-button-wrapper .elementor-button,
html body .elementor-button-wrapper a,
html body .ast-woo-checkout-place-order-btn {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
}

/* ── 6. WooCommerce ──────────────────────────────────────── */
html body .woocommerce .price,
html body .woocommerce .amount,
html body .woocommerce .stock,
html body .woocommerce-product-details__short-description,
html body .woocommerce-tabs .wc-tab,
html body .woocommerce-loop-product__title {
    font-family: 'Montserrat', Arial, sans-serif !important;
}

/* ── 7. Elementor — widgets de texto y estructura ────────── */
html body .elementor-widget-icon-box .elementor-icon-box-description,
html body .elementor-widget-testimonial .elementor-testimonial-content,
html body .elementor-widget-image-box .elementor-image-box-description,
html body .elementor-widget-accordion .elementor-tab-content,
html body .elementor-widget-tabs .elementor-tab-content,
html body .elementor-widget-toggle .elementor-tab-content,
html body .elementor-widget-counter .elementor-counter-number,
html body .elementor-widget-price-list .elementor-price-list-item,
html body .elementor-popup-modal .elementor-widget-container {
    font-family: 'Montserrat', Arial, sans-serif !important;
}

/* Títulos dentro de widgets de Elementor */
html body .elementor-widget-icon-box .elementor-icon-box-title,
html body .elementor-widget-image-box .elementor-image-box-title,
html body .elementor-widget-testimonial .elementor-testimonial-name,
html body .elementor-widget-accordion .elementor-accordion-title,
html body .elementor-widget-tabs .elementor-tab-title,
html body .elementor-widget-toggle .elementor-toggle-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-weight: 600 !important;
}

/* ── 8. Títulos de productos WooCommerce ─────────────────── */
.woocommerce-loop-product__title,
.woocommerce h1.product_title,
.woocommerce .products .product .woocommerce-loop-product__title,
.product-title,
.wc-block-grid__product-title {
    font-family: 'Cormorant Garamond', serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
}