Add To Cart button on Product Pages: Center & 100% Width on Mobile?

Site URL: https://shuifeng.squarespace.com

Hello. I'm trying to get the Add To Cart button on Product Pages to be centered with 100% width on mobile. The code I have only centers it, can someone help me figure this one out? I tried using .sqs-add-to-cart-button but that only modifies the Add To Cart button in Product Blocks, not Product Pages. I tried using .sqs-add-to-cart-button-inner also and that didn't work either.

Example page: https://activefengshui.com/shop/p/what-the-feng  Password: ShuiFeng

/*Add To Cart Button on Product Pages full width MOBILE*/
@media screen and (max-width: 640px ) {
.sqs-add-to-cart-button-wrapper {
  width: 100% !important;
  text-align: center !important;
  }}
/*Add To Cart Button on Product Pages full width MOBILE*/

11 hours ago, ShuiFeng said:

I'm trying to get the Add To Cart button on Product Pages to be centered with 100% width on mobile.

Before using custom code, you may want to try the built-in Layout options that are available for Product Detail Pages on Squarespace 7.1.

1. Open the product details page you want to edit (https://activefengshui.com/shop/p/what-the-feng)
2. Click Edit design in the top-left corner. On some sites, you may need to hover over Edit, click Edit design, then click the Pencil icon.

3. Choose from the following layout options:

• Simple - The product image and description display side by side, surrounded by whitespace. 
• Wrap - The product images wrap around the description. Images are always aligned left.
• Half - The product image splits the page with the description. The image is always aligned left.
• Full - Product images display in a full-bleed carousel above the description.

Paul, thank you... but I have already completed choosing those options/designs (simple/stacked). But for some reason I'm unable to get the button on the Product Pages to go full width & centered on mobile. 

3 hours ago, ShuiFeng said:

Paul, thank you... but I have already completed choosing those options/designs (simple/stacked). But for some reason I'm unable to get the button on the Product Pages to go full width & centered on mobile. 

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.ProductItem-details-checkout .sqs-add-to-cart-button-wrapper, .ProductItem-details-checkout .sqs-add-to-cart-button-wrapper div {
    width: 100% !important;
}
}

Thank you Tuan, that did it! I'm slowly catching on but getting stuck with some things as I clean up the site.