/**
 * DIOPSA ACF Colors for Elementor
 *
 * Colores desde ACF: --dps-color-1 (primario), --dps-color-2 (secundario), --dps-color-3 (terciario)
 *
 * Uso en Elementor (Advanced → CSS Classes del widget, NO dentro del contenido):
 *   Heading:                    dps-title-split  (word 1: tertiary / black, word 2: secondary)
 *   Heading (solo terciario):     dps-title-single
 *   Text Editor:                dps-numlist
 *   WooCommerce Product Content: dps-numlist
 *   Button (primario):           dps-btn-primary
 *   Button (secundario):         dps-btn-secondary
 *   Button (outline):            dps-btn-outline
 *
 * Banners (Elementor container → Advanced → CSS Classes):
 *   Imagen desktop:              dps-banner-target
 *   Imagen móvil:                dps-banner-inline
 *   Texto desktop:               dps-banner-text
 *   Texto móvil:                 dps-banner-text-inline
 *
 * Shortcode: [dps_banner_slots terms="slug-categoria-texto"]
 */

/* ── 1. Título bicolor (clase dps-title-split en el widget Heading) ── */
/* Primera palabra: terciario (#000000 por defecto). Resto: secundario.        */
/* No usar dps-title-split__w1 en Elementor; lo genera el JS tras el split.    */

.dps-title-split .elementor-heading-title,
.diopsa-title-split .elementor-heading-title,
.elementor-heading-title.dps-title-split,
.elementor-heading-title.diopsa-title-split,
.dps-title-split.product_title,
.diopsa-title-split.product_title,
.dps-tab-target .dps-title-split .elementor-heading-title,
.dps-tab-target .diopsa-title-split .elementor-heading-title {
    font-weight: 400;
    line-height: 1.05;
}

.dps-title-split .dps-title-split__w1,
.diopsa-title-split .dps-title-split__w1,
.elementor-heading-title.dps-title-split .dps-title-split__w1,
.elementor-heading-title.diopsa-title-split .dps-title-split__w1,
.dps-tab-target .dps-title-split .dps-title-split__w1,
.dps-tab-target .diopsa-title-split .dps-title-split__w1,
.dps-title-split .elementor-heading-title:not(:has(.dps-title-split__w1)),
.elementor-heading-title.dps-title-split:not(:has(.dps-title-split__w1)) {
    color: var(--dps-color-3, var(--dps-color-tertiary, var(--diopsa-color-3, #000000))) !important;
}

.dps-title-split .dps-title-split__w2,
.diopsa-title-split .dps-title-split__w2,
.elementor-heading-title.dps-title-split .dps-title-split__w2,
.elementor-heading-title.diopsa-title-split .dps-title-split__w2,
.dps-tab-target .dps-title-split .dps-title-split__w2,
.dps-tab-target .diopsa-title-split .dps-title-split__w2 {
    color: var(--dps-color-2, var(--diopsa-color-2, #8bc53f)) !important;
}

/* ── 1b. Título unicolor (terciario / single_color_ids) ── */

.dps-title-single .elementor-heading-title,
.diopsa-title-single .elementor-heading-title,
body.dps-title-single-color .dps-title-split .elementor-heading-title,
body.dps-title-single-color .diopsa-title-split .elementor-heading-title,
html.dps-title-single-color .dps-title-split .elementor-heading-title,
html.dps-title-single-color .diopsa-title-split .elementor-heading-title,
body.dps-title-single-color .elementor-heading-title.dps-title-split,
body.dps-title-single-color .elementor-heading-title.diopsa-title-split,
body.dps-title-single-color .dps-title-split .dps-title-split__w1,
body.dps-title-single-color .dps-title-split .dps-title-split__w2,
body.dps-title-single-color .diopsa-title-split .dps-title-split__w1,
body.dps-title-single-color .diopsa-title-split .dps-title-split__w2,
.dps-tab-target .dps-title-single-color .dps-title-split .elementor-heading-title,
.dps-tab-target .dps-title-single-color .dps-title-split .dps-title-split__w1,
.dps-tab-target .dps-title-single-color .dps-title-split .dps-title-split__w2 {
    color: var(--dps-color-3, var(--dps-color-tertiary, var(--diopsa-color-3, #000000))) !important;
}

/* ── 2. Listas numeradas (clase en el widget, no en el HTML del producto) ── */

.single-product .elementor-widget-text-editor.dps-numlist ol,
.single-product .elementor-widget-text-editor.diopsa-numlist ol,
.single-product .elementor-widget-woocommerce-product-content.dps-numlist ol,
.single-product .elementor-widget-woocommerce-product-content.diopsa-numlist ol,
.woocommerce .elementor-widget-text-editor.dps-numlist ol,
.woocommerce .elementor-widget-text-editor.diopsa-numlist ol,
.woocommerce .elementor-widget-woocommerce-product-content.dps-numlist ol,
.woocommerce .elementor-widget-woocommerce-product-content.diopsa-numlist ol {
    list-style: none;
    counter-reset: dps-num;
    padding-left: 0;
    margin: 0 0 8px;
    color: inherit;
}

.single-product .elementor-widget-text-editor.dps-numlist ol > li,
.single-product .elementor-widget-text-editor.diopsa-numlist ol > li,
.single-product .elementor-widget-woocommerce-product-content.dps-numlist ol > li,
.single-product .elementor-widget-woocommerce-product-content.diopsa-numlist ol > li,
.woocommerce .elementor-widget-text-editor.dps-numlist ol > li,
.woocommerce .elementor-widget-text-editor.diopsa-numlist ol > li,
.woocommerce .elementor-widget-woocommerce-product-content.dps-numlist ol > li,
.woocommerce .elementor-widget-woocommerce-product-content.diopsa-numlist ol > li {
    counter-increment: dps-num;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    margin-bottom: 12px;
    line-height: 1.55;
    color: inherit;
    font-size: inherit;
    list-style: none;
}

.single-product .elementor-widget-text-editor.dps-numlist ol > li::before,
.single-product .elementor-widget-text-editor.diopsa-numlist ol > li::before,
.single-product .elementor-widget-woocommerce-product-content.dps-numlist ol > li::before,
.single-product .elementor-widget-woocommerce-product-content.diopsa-numlist ol > li::before,
.woocommerce .elementor-widget-text-editor.dps-numlist ol > li::before,
.woocommerce .elementor-widget-text-editor.diopsa-numlist ol > li::before,
.woocommerce .elementor-widget-woocommerce-product-content.dps-numlist ol > li::before,
.woocommerce .elementor-widget-woocommerce-product-content.diopsa-numlist ol > li::before {
    content: counter(dps-num);
    color: var(--dps-color-2, var(--diopsa-color-2, #8bc53f));
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    transform: translateY(-4px);
}

@media (max-width: 680px) {
    .single-product .elementor-widget-text-editor.dps-numlist ol > li,
    .single-product .elementor-widget-text-editor.diopsa-numlist ol > li,
    .single-product .elementor-widget-woocommerce-product-content.dps-numlist ol > li,
    .single-product .elementor-widget-woocommerce-product-content.diopsa-numlist ol > li,
    .woocommerce .elementor-widget-text-editor.dps-numlist ol > li,
    .woocommerce .elementor-widget-text-editor.diopsa-numlist ol > li,
    .woocommerce .elementor-widget-woocommerce-product-content.dps-numlist ol > li,
    .woocommerce .elementor-widget-woocommerce-product-content.diopsa-numlist ol > li {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 6px;
        margin-bottom: 10px;
    }

    .single-product .elementor-widget-text-editor.dps-numlist ol > li::before,
    .single-product .elementor-widget-text-editor.diopsa-numlist ol > li::before,
    .single-product .elementor-widget-woocommerce-product-content.dps-numlist ol > li::before,
    .single-product .elementor-widget-woocommerce-product-content.diopsa-numlist ol > li::before,
    .woocommerce .elementor-widget-text-editor.dps-numlist ol > li::before,
    .woocommerce .elementor-widget-text-editor.diopsa-numlist ol > li::before,
    .woocommerce .elementor-widget-woocommerce-product-content.dps-numlist ol > li::before,
    .woocommerce .elementor-widget-woocommerce-product-content.diopsa-numlist ol > li::before {
        font-size: 30px;
        transform: translateY(-3px);
    }
}

/* ── 3. Botones Elementor con colores ACF del producto ── */

.single-product .dps-btn-primary .elementor-button,
.single-product .dps-btn-primary .elementor-button-link,
.woocommerce .dps-btn-primary .elementor-button,
.woocommerce .dps-btn-primary .elementor-button-link,
.dps-tab-target .dps-btn-primary .elementor-button,
.dps-tab-target .dps-btn-primary .elementor-button-link,
.dps-banner-target .dps-btn-primary .elementor-button,
.dps-banner-text .dps-btn-primary .elementor-button {
    background-color: var(--dps-color-1, var(--product-primary, var(--nc1, #102e62))) !important;
    border-color: var(--dps-color-1, var(--product-primary, var(--nc1, #102e62))) !important;
    color: #fff !important;
    fill: #fff !important;
}

.single-product .dps-btn-primary .elementor-button:hover,
.single-product .dps-btn-primary .elementor-button:focus,
.woocommerce .dps-btn-primary .elementor-button:hover,
.woocommerce .dps-btn-primary .elementor-button:focus,
.dps-tab-target .dps-btn-primary .elementor-button:hover,
.dps-tab-target .dps-btn-primary .elementor-button:focus {
    background-color: color-mix(
        in srgb,
        var(--dps-color-1, var(--product-primary, var(--nc1, #102e62))) 85%,
        #000
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--dps-color-1, var(--product-primary, var(--nc1, #102e62))) 85%,
        #000
    ) !important;
    color: #fff !important;
}

.single-product .dps-btn-secondary .elementor-button,
.single-product .dps-btn-secondary .elementor-button-link,
.woocommerce .dps-btn-secondary .elementor-button,
.woocommerce .dps-btn-secondary .elementor-button-link,
.dps-tab-target .dps-btn-secondary .elementor-button,
.dps-tab-target .dps-btn-secondary .elementor-button-link,
.dps-banner-target .dps-btn-secondary .elementor-button,
.dps-banner-text .dps-btn-secondary .elementor-button {
    background-color: var(--dps-color-2, var(--product-secondary, var(--nc2, #8bc53f))) !important;
    border-color: var(--dps-color-2, var(--product-secondary, var(--nc2, #8bc53f))) !important;
    color: #fff !important;
    fill: #fff !important;
}

.single-product .dps-btn-secondary .elementor-button:hover,
.single-product .dps-btn-secondary .elementor-button:focus,
.woocommerce .dps-btn-secondary .elementor-button:hover,
.woocommerce .dps-btn-secondary .elementor-button:focus,
.dps-tab-target .dps-btn-secondary .elementor-button:hover,
.dps-tab-target .dps-btn-secondary .elementor-button:focus {
    background-color: color-mix(
        in srgb,
        var(--dps-color-2, var(--product-secondary, var(--nc2, #8bc53f))) 85%,
        #000
    ) !important;
    border-color: color-mix(
        in srgb,
        var(--dps-color-2, var(--product-secondary, var(--nc2, #8bc53f))) 85%,
        #000
    ) !important;
    color: #fff !important;
}

.single-product .dps-btn-outline .elementor-button,
.single-product .dps-btn-outline .elementor-button-link,
.woocommerce .dps-btn-outline .elementor-button,
.woocommerce .dps-btn-outline .elementor-button-link,
.dps-tab-target .dps-btn-outline .elementor-button,
.dps-tab-target .dps-btn-outline .elementor-button-link {
    background-color: transparent !important;
    border-color: var(--dps-color-1, var(--product-primary, var(--nc1, #102e62))) !important;
    color: var(--dps-color-1, var(--product-primary, var(--nc1, #102e62))) !important;
    fill: var(--dps-color-1, var(--product-primary, var(--nc1, #102e62))) !important;
}

/* ── Subcategoría del producto ([product_of_last_subcategory]) ── */

.dps-product-of-subcategory,
.upline-product-of-category {
    color: #293a85;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.dps-product-of-subcategory a,
.upline-product-of-category a {
    color: #293a85;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: 0;
    text-decoration: none;
}

.dps-product-of-subcategory a:hover,
.dps-product-of-subcategory a:focus,
.upline-product-of-category a:hover,
.upline-product-of-category a:focus {
    color: #293a85;
    text-decoration: none;
}

.dps-product-of-subcategory--secondary,
.dps-product-of-subcategory--secondary a,
.upline-product-of-category.dps-product-of-subcategory--secondary,
.upline-product-of-category.dps-product-of-subcategory--secondary a {
    color: var(--dps-color-2, var(--diopsa-color-2, #8bc53f)) !important;
}

.dps-product-of-subcategory--secondary a:hover,
.dps-product-of-subcategory--secondary a:focus,
.upline-product-of-category.dps-product-of-subcategory--secondary a:hover,
.upline-product-of-category.dps-product-of-subcategory--secondary a:focus {
    color: var(--dps-color-2, var(--diopsa-color-2, #8bc53f)) !important;
}

@media (max-width: 1024px) {
    .dps-product-of-subcategory,
    .dps-product-of-subcategory a,
    .upline-product-of-category,
    .upline-product-of-category a {
        font-size: 16px;
    }
}

.single-product .dps-btn-outline .elementor-button:hover,
.single-product .dps-btn-outline .elementor-button:focus,
.woocommerce .dps-btn-outline .elementor-button:hover,
.woocommerce .dps-btn-outline .elementor-button:focus,
.dps-tab-target .dps-btn-outline .elementor-button:hover,
.dps-tab-target .dps-btn-outline .elementor-button:focus {
    background-color: color-mix(
        in srgb,
        var(--dps-color-2, var(--product-secondary, var(--nc2, #8bc53f))) 12%,
        white
    ) !important;
    color: var(--dps-color-1, var(--product-primary, var(--nc1, #102e62))) !important;
}