In version 3.x, the safest styling workflow is:

1. use the built-in theme options first
2. add custom CSS only for small brand or layout adjustments
3. scope your CSS to the modern calculator wrappers

Recommended places for custom CSS are your child theme, the WordPress Customizer, or a snippets plugin used for site-level CSS.

Use these stable wrappers when possible:

• [data-yps-calcsheet-app="product"]
• .yps-calcsheet-product-app
• .yps-calcsheet-vue-product

Example:

[data-yps-calcsheet-app="product"] .yps-calcsheet-vue-product {
  margin-top: 1rem;
}

.yps-calcsheet-vue-product {
  --awspc-accent-color: #0f766e;
}