Woocommerce related products image effect & button hover effect

I have some difficulty trying to customize my Woocommerce related products section on my test site.
I need some CSS help.
Basically I want this section to be the same as my products page when it comes to:

• filter: brightness effect
• clickability of image and product link (besides add to cart button)
• hover effect of add to cart button

So there is a discrepancy between my shop page and single product page ‘related products’ section (‘You may also like’ on my site).
My shop page is a custom Elementor page (free version).

So in my single product page – related products section (which I cannot edit in Elementor Free):

1. The filter: brightness effect should only affect the thumbnail and not the product title and price.
2. Only the thumbnail itself and the title should be clickable to link to the product.
3. The cart button gets the hover effect as soon as you hover the area that wraps everything (thumb, title, price, button section). I would like the cart button to have the hover effect only when you actually hover that button.

As for the filter effect, I have added it to my single product page this way:

/*single product page - related products - hover brightness effect */
.woocommerce ul.products li.product a:hover {
filter: brightness(1.2);
}

But I’m guessing I targeted the wrong class here when inspecting. I’m still learning about hover effects, and targeting elements that have a hover effect for that matter. Could you guys please point me in the right direction?

Thanks in advance
Levi

• This topic was modified 21 hours, 32 minutes ago by evillevi.
• This topic was modified 21 hours, 32 minutes ago by evillevi.
• This topic was modified 21 hours, 30 minutes ago by evillevi.
• This topic was modified 21 hours, 28 minutes ago by evillevi.

The page I need help with: [log in to see the link]