Hey @DesignMunky,
The issue you’re experiencing is possibly caused by a combination of invalid syntax characters and how the Pro Theme (Cornerstone) processes CSS when WooCommerce elements are present.
1. The “Smart Dash” Issue (Primary Cause)
In the CSS snippet you provided, you are using an En-dash (–) instead of two Hyphens (--).
-
Invalid:
–cs-md (This is one long character)
-
Valid:
--cs-md (This is two standard hyphens)
If you copied this from a blog or a “smart” text editor, the two hyphens were likely auto-corrected into a single long dash. CSS variables must start with --. When you inspect the element, the browser sees var(--cs-md) but cannot find a matching definition because yours starts with a –.
2. The vi Unit & CSS Parsing
You are using the vi (Viewport Inline) unit. While valid in modern browsers, it is a relatively new CSS unit.
-
Why it breaks with WooCommerce: When you add a WooCommerce element to a standard page, Pro Theme triggers a “Dynamic CSS” bundling process. This process often runs your Global CSS through a PHP-based CSS minifier/parser to merge it with WooCommerce’s specific styles.
-
The Problem: Many older CSS parsers (including some used by WordPress themes and plugins) do not recognize
vi as a valid unit. When the parser encounters vi, it assumes the line is a syntax error and strips the entire variable definition to prevent the CSS from breaking.
3. Why it works on Archive/Single pages
In the Pro Theme, WooCommerce Archive and Single pages are typically handled by the Layout Builder, while standard pages use the Content Builder.
- The Layout Builder outputs Global CSS in a “raw” or prioritized state that avoids the specific minification/bundling logic triggered by “Cornerstone WooCommerce Elements” on standard pages.
- This is why the browser sees the variables on those pages but loses them on standard pages where the stricter parser has “cleaned” them out.
How to Fix It:
-
Replace all En-dashes: Ensure every variable starts with exactly two standard hyphens (
--).
-
Switch
vi to vw: Change vi to vw (Viewport Width). In a standard horizontal website, they function identically, but vw is universally recognized by all CSS parsers and minifiers.
-
Wrap in
calc() if needed: While clamp() handles math, some older parsers prefer complex expressions inside a calc(). However, fixing the dashes and the unit will likely resolve it immediately.
Sample Correct Snippet:
:root {
--cs-sm: clamp(0.8rem, 0.08vw + 0.78rem, 0.84rem);
--cs-base: clamp(1rem, 0.23vw + 0.94rem, 1.13rem);
--cs-md: clamp(1.25rem, 0.45vw + 1.14rem, 1.5rem);
--cs-lg: clamp(1.56rem, 0.79vw + 1.36rem, 2rem);
--cs-xl: clamp(1.95rem, 1.29vw + 1.63rem, 2.66rem);
--cs-xxl: clamp(2.44rem, 2.02vw + 1.94rem, 3.55rem);
--cs-xxxl: clamp(3.05rem, 3.06vw + 2.29rem, 4.73rem);
}