Adjust add to cart button layout on mobile product page

HI

I put the code you mentioned, but it looked like this:
https://imgur.com/g6aTz8d

I want the black button to fill the entire space.

Note: remember that I want to make this adjustment only for Mobile, on Desktop it is already ok, I have these 2 codes that you gave me to adjust the button on Desktop:

1-`/* Justificar os Botões Comprar na Página do Produto */

.woocommerce-variation-add-to-cart .single_add_to_cart_button,
.woocommerce-variation-add-to-cart .wd-buy-now-btn {
flex-grow: 1;
flex-basis: calc(50% – 52px);
}`

2- `/* Justificar os Botões Comprar na Página do Produto Simples */
.summary-inner form.cart :where(.single_add_to_cart_button, .wd-buy-now-btn) {
flex: 1 1 auto;
}`

How can I adjust the code to only work on Mobile?

Hello!

The code is not yet valid, see, I’m testing it on this other website of mine:
https://www.bhlfitness.com.br/produto/proteina-isolada-e-hidrolisada-true-whey-837g-true-source/

https://imgur.com/jhphWd0

Black button still doesn’t fill, and green one is on one side of the screen.

It needs to be 100 and not 93% for the green button to be ok: max-width: 100%;

I made some adjustments to your code, and visually it looks better, but there’s still a big gap here:

/* Justificar Botões Comprar no Mobile */
form.cart :where(.single_add_to_cart_button,.wd-buy-now-btn,.quantity) {
    flex: 1 0 auto;
}

.single-product button#wd-add-to-cart {
    flex: 0 0 100%;
    max-width: 100%;
}

https://imgur.com/JN3HY79

And I also don’t know if this code can cause any other layout problem, I don’t understand lol, I was just testing it.

I replicated it on another site with this entire block and it worked.

Thank you very much.