Same button style not working in product detail page

Hi

Product list page:

Add to cart

.button, .added_to_cart, [type="submit"] {
    right: var(--has-effect,0);
    bottom: var(--has-effect,0);
    position: var(--has-effect,relative);
    box-shadow: var(--has-effect,7px 7px 0px 0px var(--button-shadow-color,var(--paletteColor4)));
    transition: all 0.12s cubic-bezier(.45,.05,.55,.95);
}

.button:hover, .added_to_cart:hover, [type="submit"]:hover {
    right: var(--has-effect,-7px);
    bottom: var(--has-effect,-7px);
    box-shadow: var(--has-effect,0px 0px 0px 0px var(--paletteColor4));
}

Why this same style is not working for Single product page ?

here is css for single product page

.single_add_to_cart_button
{
    right: var(--has-effect,0);
    bottom: var(--has-effect,0);
    position: var(--has-effect,relative);
    box-shadow: var(--has-effect,7px 7px 0px 0px var(--button-shadow-color,var(--paletteColor4)));
    transition: all 0.12s cubic-bezier(.45,.05,.55,.95);
}
.single_add_to_cart_button:hover {
    right: var(--has-effect,-7px);
    bottom: var(--has-effect,-7px);
    box-shadow: var(--has-effect,0px 0px 0px 0px var(--paletteColor4));
}

what is inside –has effect ? where we can find ?

please advice.