Important Style breaks Styling

Hey guys 🙂
I really like your plugin. I have one suggestion though:
Currently our ATC-Styling was broken due to a line of css in your code. This is what it currently looks like with your plugin:

View post on imgur.com

This is what it should look like:

View post on imgur.com

The reason is, that in your file “/assets/css/frontend.min.css” you declare:

.woocommerce-variation-add-to-cart, form.cart {
    flex-wrap: wrap !important;
}

This is way to broad and especially using the “!important” overwrites almost all styles. In its current form it applies to all products and is not limited to products that are actually using the product fields.

A cleaner solution would be to use :has(), which now is supported in all major browsers for some time (https://caniuse.com/?search=has).
Even better would be to only load the css-Sheet in the frontend for products that use the fields and don’t load it at all on other products.

The :has()-Solution would look like this:

.woocommerce-variation-add-to-cart:has(.wapf),
form.cart:has(.wapf) {
    flex-wrap: nowrap !important;
}

This is my current solution:

.woocommerce-variation-add-to-cart:not(:has(.wapf)),
form.cart:not(:has(.wapf)) {
    flex-wrap: nowrap !important;
}