/*
Theme Name:   Ola y Óle — Child Theme
Theme URI:    https://olayole.es
Description:  Child theme de Astra para Ola y Óle. Paleta cromática, tipografías y estilos de marca.
Author:       Ola y Óle
Template:     astra
Version:      1.3.0
Text Domain:  astra-child-olayole
*/

@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 — PALETA Y TIPOGRAFÍAS
   ══════════════════════════════════════════════════════════ */
:root {
    /* Paleta Ola y Óle */
    --olo-fondo:          #FAFAFA;
    --olo-lila:           #C8B8D8;
    --olo-lila-oscuro:    #C8B8D8;
    --olo-lila-claro:     #F2EDF7;
    --olo-madera:         #C4A882;
    --olo-madera-claro:   #F5EFE6;
    --olo-texto-oscuro:   #3A2F42;
    --olo-texto-medio:    #6B5F77;
    --olo-blanco:         #ffffff;

    /* Tipografías */
    --olo-font-titulo: 'Cormorant Garamond', Georgia, serif;
    --olo-font-cuerpo: 'Montserrat', Arial, sans-serif;

    /* Override variables Astra */
    --ast-global-color-0: var(--olo-lila-oscuro);
    --ast-global-color-1: var(--olo-lila);
    --ast-global-color-2: var(--olo-texto-oscuro);
    --ast-global-color-3: var(--olo-texto-medio);
    --ast-global-color-4: var(--olo-madera);
    --ast-global-color-5: var(--olo-lila-claro);

    /* Override variables Elementor */
    --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';
    --e-global-typography-primary-font-weight:   600;
    --e-global-typography-text-font-weight:      400;
    --e-global-typography-accent-font-weight:    500;

    --font-heading: var(--olo-font-titulo);
    --font-body:    var(--olo-font-cuerpo);
}

/* ══════════════════════════════════════════════════════════
   2. BODY Y FONDO GENERAL
   ══════════════════════════════════════════════════════════ */
html,
html body {
    background-color: #FAFAFA !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    color: #6B5F77 !important;
}

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 {
    font-family: 'Montserrat', Arial, sans-serif !important;
    color: #6B5F77 !important;
}

/* ══════════════════════════════════════════════════════════
   3. HEADINGS — Cormorant Garamond / #3A2F42
   ══════════════════════════════════════════════════════════ */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body h1 a, html body h2 a,
html body h3 a, html body h4 a,
html body .entry-title,
html body .site-title,
html body .elementor-heading-title,
html body .elementor-widget-heading .elementor-heading-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: #3A2F42 !important;
    letter-spacing: 0.02em !important;
}

html body h1 { font-size: clamp(28px, 4vw, 48px) !important;  font-weight: 600 !important; }
html body h2 { font-size: clamp(22px, 3vw, 36px) !important;  font-weight: 600 !important; }
html body h3 { font-size: clamp(18px, 2.5vw, 28px) !important; font-weight: 500 !important; }
html body h4 { font-size: clamp(16px, 2vw, 22px) !important;  font-weight: 500 !important; }

/* ══════════════════════════════════════════════════════════
   4. LINKS
   ══════════════════════════════════════════════════════════ */
html body a {
    color: var(--olo-lila-oscuro) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

html body a:hover {
    color: #C8B8D8 !important;
}

/* ══════════════════════════════════════════════════════════
   5. MENÚ DE NAVEGACIÓN
   Fondo blanco | borde inferior 0.5px #C8B8D8 | links #6B5F77
   ══════════════════════════════════════════════════════════ */
.main-header-bar,
#masthead,
.site-header,
.ast-above-header-bar {
    background-color: #ffffff !important;
    border-bottom: 0.5px solid #C8B8D8 !important;
    box-shadow: none !important;
}

html body .main-navigation a,
html body .ast-header-nav-link,
html body #ast-hf-menu-1 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--main .elementor-item,
html body nav a {
    font-family: 'Montserrat', Arial, sans-serif !important;
    color: #6B5F77 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

html body .main-navigation a:hover,
html body .ast-header-nav-link:hover,
html body #ast-hf-menu-1 a:hover,
html body .elementor-nav-menu a:hover,
html body .elementor-nav-menu--main .elementor-item:hover {
    color: #C8B8D8 !important;
}

/* Submenús */
html body .main-navigation .sub-menu,
html body .elementor-nav-menu .sub-menu,
html body .elementor-nav-menu--dropdown {
    background-color: #ffffff !important;
    border: 1px solid #C8B8D8 !important;
    border-top: 2px solid #C8B8D8 !important;
}

html body .main-navigation .sub-menu a,
html body .elementor-nav-menu--dropdown .elementor-item {
    color: #6B5F77 !important;
    font-size: 12px !important;
}

html body .main-navigation .sub-menu a:hover,
html body .elementor-nav-menu--dropdown .elementor-item:hover {
    background-color: #F2EDF7 !important;
    color: #3A2F42 !important;
}

/* ══════════════════════════════════════════════════════════
   6. BOTONES
   Fondo #C8B8D8 | color blanco | border-radius 2px
   ══════════════════════════════════════════════════════════ */
html body .ast-button,
html body .button,
html body button:not(.menu-toggle),
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 .ast-woo-checkout-place-order-btn,
html body .woocommerce a.button.add_to_cart_button,
html body .woocommerce button.single_add_to_cart_button {
    background-color: #C8B8D8 !important;
    color: #ffffff !important;
    border: 2px solid #C8B8D8 !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    padding: 10px 24px !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

html body .ast-button:hover,
html body .button:hover,
html body button:not(.menu-toggle):hover,
html body input[type="submit"]:hover,
html body .woocommerce a.button:hover,
html body .woocommerce button.button:hover,
html body .woocommerce a.button.add_to_cart_button:hover,
html body .woocommerce button.single_add_to_cart_button:hover,
html body .elementor-button:hover,
html body .elementor-button-wrapper .elementor-button:hover {
    background-color: #C4A882 !important;
    border-color: #C4A882 !important;
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   7. WOOCOMMERCE — PRECIOS Y PRODUCTOS
   Precios: color #C4A882 | font-family Montserrat
   ══════════════════════════════════════════════════════════ */

/* Precios */
html body .woocommerce .price,
html body .woocommerce .amount,
html body .woocommerce ins .amount,
html body .wc-block-grid__product-price,
html body .woocommerce-Price-amount,
html body .woocommerce .price .woocommerce-Price-amount {
    color: #C4A882 !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-weight: 600 !important;
}

html body .woocommerce del,
html body .woocommerce del .amount,
html body .woocommerce del .woocommerce-Price-amount {
    color: #6B5F77 !important;
    opacity: 0.7 !important;
}

/* Títulos de producto en grid */
html body .woocommerce-loop-product__title,
html body .woocommerce .products .product .woocommerce-loop-product__title,
html body .wc-block-grid__product-title,
html body .product-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #3A2F42 !important;
    letter-spacing: 0.02em !important;
}

/* Título single de producto */
html body .woocommerce h1.product_title,
html body .product_title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: #3A2F42 !important;
    font-weight: 600 !important;
}

/* Fichas de producto */
html body .woocommerce .products li.product {
    border: 1px solid #C8B8D8 !important;
    border-radius: 4px !important;
    padding: 16px !important;
    background-color: #ffffff !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

html body .woocommerce .products li.product:hover {
    box-shadow: 0 6px 20px rgba(125, 106, 142, 0.18) !important;
    border-color: #C8B8D8 !important;
}

/* Tabs producto single */
html body .woocommerce-tabs .tabs li a {
    color: #6B5F77 !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
}
html body .woocommerce-tabs .tabs li.active a {
    color: #C8B8D8 !important;
    border-bottom: 2px solid #C8B8D8 !important;
}

/* Mensajes WooCommerce */
html body .woocommerce-message,
html body .woocommerce-info {
    border-top-color: #C8B8D8 !important;
}

/* Breadcrumb */
html body .woocommerce .woocommerce-breadcrumb a {
    color: #C8B8D8 !important;
}

/* ══════════════════════════════════════════════════════════
   8. FORMULARIOS
   ══════════════════════════════════════════════════════════ */
html body input[type="text"],
html body input[type="email"],
html body input[type="tel"],
html body input[type="password"],
html body input[type="search"],
html body input[type="number"],
html body textarea,
html body select {
    border: 1px solid #C8B8D8 !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    color: #3A2F42 !important;
    border-radius: 2px !important;
    background-color: #ffffff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html body input[type="text"]:focus,
html body input[type="email"]:focus,
html body input[type="tel"]:focus,
html body textarea:focus,
html body select:focus {
    border-color: #C8B8D8 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(200, 184, 216, 0.35) !important;
}

/* ══════════════════════════════════════════════════════════
   9. WIDGETS Y SIDEBAR
   ══════════════════════════════════════════════════════════ */
html body .widget-title,
html body .widgettitle {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: #3A2F42 !important;
    border-bottom: 2px solid #C8B8D8 !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
}

/* ══════════════════════════════════════════════════════════
   10. FOOTER
   Fondo #FFFFFF | texto #7D6A8E
   ══════════════════════════════════════════════════════════ */
html body .site-footer,
html body #colophon,
html body .footer-widget-area,
html body .ast-above-footer,
html body .ast-below-footer,
html body .ast-footer-overlay,
html body footer {
    background-color: #ffffff !important;
    color: #7D6A8E !important;
}

html body .site-footer p,
html body #colophon p,
html body .footer-widget-area p,
html body .site-footer li,
html body #colophon li,
html body .site-footer span,
html body #colophon span {
    color: #7D6A8E !important;
}

html body .site-footer a,
html body #colophon a,
html body .footer-widget-area a {
    color: #7D6A8E !important;
}

html body .site-footer a:hover,
html body #colophon a:hover {
    color: #C4A882 !important;
}

html body .site-footer h1, html body .site-footer h2,
html body .site-footer h3, html body .site-footer h4,
html body .site-footer h5, html body .site-footer h6,
html body #colophon h1, html body #colophon h2,
html body #colophon h3, html body #colophon h4 {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: #7D6A8E !important;
}

html body .site-footer .widget-title,
html body #colophon .widget-title {
    color: #7D6A8E !important;
    border-bottom-color: #C8B8D8 !important;
}

/* ══════════════════════════════════════════════════════════
   11. SEPARADORES
   ══════════════════════════════════════════════════════════ */
hr {
    border-color: #C8B8D8 !important;
    opacity: 0.5;
}

/* ══════════════════════════════════════════════════════════
   12. ELEMENTOR — OVERRIDES
   ══════════════════════════════════════════════════════════ */
html body .elementor-widget-container {
    font-family: 'Montserrat', Arial, sans-serif !important;
    color: #6B5F77 !important;
}

html body .elementor-heading-title {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    color: #3A2F42 !important;
}