Adding WC Elements to a page breaks the Variable text Styling

I set all my sites to use variable dynamic text as per one of Josh’s videos. In global css i set

:root {
–cs-sm: clamp(0.8rem, 0.08vi + 0.78rem, 0.84rem);
–cs-base: clamp(1rem, 0.23vi + 0.94rem, 1.13rem);
–cs-md: clamp(1.25rem, 0.45vi + 1.14rem, 1.5rem);
–cs-lg: clamp(1.56rem, 0.79vi + 1.36rem, 2rem);
–cs-xl: clamp(1.95rem, 1.29vi + 1.63rem, 2.66rem);
–cs-xxl: clamp(2.44rem, 2.02vi + 1.94rem, 3.55rem);
–cs-xxxl: clamp(3.05rem, 3.06vi + 2.29rem, 4.73rem);
}

On this latest site I’m building it has woocommerce included. Whenever I add a woocommerce element to a page, all the variable sizing breaks on that page only. It all gets set to the same size and when I inspect the text element it shows as variable undefined.

Here is an example of a page with some wc elements added.
https://darrenh275.sg-host.com/customised-composition/

The WC archive and single pages work fine with reading the variable text.

Thanks.