/**
 * Estilos optimizados para títulos de productos
 * Reemplaza CSS inline masivo para mejor rendimiento
 */

@import url('esaico-global-variables.css');

:root {
    --product-title-color: var(--esaico_color_text, #1B1B1B);
    --product-title-hover: var(--esaico_color_primary, #0B996E);
    --product-title-font: var(--esaico_font_headings, 'Noto Sans JP');
    --product-title-weight: var(--esaico_font_weight_headings, 600);
}

/* Títulos de productos - especificidad optimizada */
.product-title,
.product-title a,
.card-title,
.card-title a,
h3.product-title,
h3.product-title a,
h3.card-title,
h3.card-title a {
    color: var(--product-title-color) !important;
    font-family: var(--product-title-font), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: var(--product-title-weight) !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    transition: color 0.3s ease !important;
}

/* Estados hover */
.product-title:hover,
.product-title a:hover,
.card-title:hover,
.card-title a:hover,
h3.product-title:hover,
h3.product-title a:hover,
h3.card-title:hover,
h3.card-title a:hover {
    color: var(--product-title-hover) !important;
    text-decoration: none !important;
}

/* Estados visited, active, focus */
.product-title:visited,
.product-title a:visited,
.product-title:active,
.product-title a:active,
.product-title:focus,
.product-title a:focus,
.card-title:visited,
.card-title a:visited,
.card-title:active,
.card-title a:active,
.card-title:focus,
.card-title a:focus {
    color: var(--product-title-color) !important;
    text-decoration: none !important;
}

/* Contextos específicos */
ul.products .product-title,
ul.products .product-title a,
ul.products .card-title,
ul.products .card-title a,
.woocommerce .product-title,
.woocommerce .product-title a,
.woocommerce .card-title,
.woocommerce .card-title a,
.woocommerce-page .product-title,
.woocommerce-page .product-title a,
.woocommerce-page .card-title,
.woocommerce-page .card-title a {
    color: var(--product-title-color) !important;
    font-family: var(--product-title-font), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: var(--product-title-weight) !important;
}

ul.products .product-title:hover,
ul.products .product-title a:hover,
ul.products .card-title:hover,
ul.products .card-title a:hover,
.woocommerce .product-title:hover,
.woocommerce .product-title a:hover,
.woocommerce .card-title:hover,
.woocommerce .card-title a:hover,
.woocommerce-page .product-title:hover,
.woocommerce-page .product-title a:hover,
.woocommerce-page .card-title:hover,
.woocommerce-page .card-title a:hover {
    color: var(--product-title-hover) !important;
}