CSS variable conflict prevention

Section CSS is loaded alongside Ecwid’s storefront styles. Custom properties (CSS variables) cascade globally; if you use the same names as Ecwid, load order is not guaranteed and styles can break.

Rule: Prefix all your CSS variables with a unique namespace (e.g. agency or project name).

Do	Don’t
--acme-primary	--primary
--myapp-spacing	--spacing
--acme-section-background	--background

Names Ecwid uses (do not define these yourself):

• --global-* — theme/site tokens (e.g. --global-title-font-family-stack, --global-body-font-size, --global-tile-max-width, --global-background-color, --global-button-color, --global-link-color).
• --ls-* — editor UI (e.g. --ls-color-fg-go-default, --ls-color-bg-neutral-top, --ls-color-border-neutral-strong).
• Unprefixed names — layout and colors, e.g. --vh, --max-width-regular, --max-width-wide, --bg-static-light-color, --fg-static-dark-color, --white-color, --button-color, --link-color, --header-height, --cover-height, --grid-gap, --grid-padding, --grid-max-width.

Prefix your own variables (e.g. --acme-*) and avoid defining any of the names above.

Example — safe:

:root {
  --acme-primary: #ff0000;
  --acme-spacing: 1rem;
  --acme-background: white;
}
.my-section { background: var(--acme-background); }

Example — avoid:

:root {
  --primary: #ff0000;      /* can conflict with Ecwid */
  --spacing: 1rem;
  --background: white;
}

Recommendation: use a short, consistent prefix in every variable (e.g. --acme-* or --projectname-*).