/*
 * Product CTA colour bridge.
 * Opt-in only: add hfq-product-cta to an Elementor Button widget.
 * Add hfq-product-cta--filled to retain a filled rather than outline treatment.
 */
.hfq-product-cta {
    --hfq-product-cta-color: #272B5B;
    --hfq-product-cta-contrast: #FFFFFF;
    --hfq-product-cta-outline-text: #272B5B;
}

/* A fallback-template item owns the variables even if Elementor reuses parsed
   template data while rendering the second product. */
.hfq-product-item .hfq-product-cta {
    --hfq-product-cta-color: var(--hfq-product-item-cta-color) !important;
    --hfq-product-cta-contrast: var(--hfq-product-item-cta-contrast) !important;
    --hfq-product-cta-outline-text: var(--hfq-product-item-cta-outline-text) !important;
}

.hfq-product-cta .elementor-button,
a.hfq-product-cta.elementor-button,
button.hfq-product-cta.elementor-button {
    background-color: transparent !important;
    border-color: var(--hfq-product-cta-color) !important;
    color: var(--hfq-product-cta-outline-text) !important;
    /* The neutral halo makes transparent outline labels legible without
       assuming that the Elementor section itself has a light background. */
    text-shadow:
        -1px 0 #FFFFFF,
        0 1px #FFFFFF,
        1px 0 #FFFFFF,
        0 -1px #FFFFFF !important;
}

.hfq-product-cta .elementor-button:hover,
.hfq-product-cta .elementor-button:focus,
.hfq-product-cta .elementor-button:focus-visible,
.hfq-product-cta .elementor-button:active,
a.hfq-product-cta.elementor-button:hover,
a.hfq-product-cta.elementor-button:focus,
a.hfq-product-cta.elementor-button:focus-visible,
a.hfq-product-cta.elementor-button:active,
button.hfq-product-cta.elementor-button:hover,
button.hfq-product-cta.elementor-button:focus,
button.hfq-product-cta.elementor-button:focus-visible,
button.hfq-product-cta.elementor-button:active {
    background-color: var(--hfq-product-cta-color) !important;
    border-color: var(--hfq-product-cta-color) !important;
    color: var(--hfq-product-cta-contrast) !important;
    text-shadow: none !important;
}

.hfq-product-cta--filled .elementor-button,
a.hfq-product-cta--filled.elementor-button,
button.hfq-product-cta--filled.elementor-button,
.hfq-product-cta--filled .elementor-button:hover,
.hfq-product-cta--filled .elementor-button:focus,
.hfq-product-cta--filled .elementor-button:focus-visible,
.hfq-product-cta--filled .elementor-button:active,
a.hfq-product-cta--filled.elementor-button:hover,
a.hfq-product-cta--filled.elementor-button:focus,
a.hfq-product-cta--filled.elementor-button:focus-visible,
a.hfq-product-cta--filled.elementor-button:active,
button.hfq-product-cta--filled.elementor-button:hover,
button.hfq-product-cta--filled.elementor-button:focus,
button.hfq-product-cta--filled.elementor-button:focus-visible,
button.hfq-product-cta--filled.elementor-button:active {
    background-color: var(--hfq-product-cta-color) !important;
    border-color: var(--hfq-product-cta-color) !important;
    color: var(--hfq-product-cta-contrast) !important;
    text-shadow: none !important;
}

.hfq-product-cta .elementor-button:focus,
.hfq-product-cta .elementor-button:focus-visible,
a.hfq-product-cta.elementor-button:focus,
a.hfq-product-cta.elementor-button:focus-visible,
button.hfq-product-cta.elementor-button:focus,
button.hfq-product-cta.elementor-button:focus-visible {
    outline: 3px solid var(--hfq-product-cta-color) !important;
    outline-offset: 3px;
}