/* ===================================================================== MUEVO · Front-end SCOPED shell (production, WordPress-safe) --------------------------------------------------------------------- The new design library's muevo-base.css restyles / globally (dark background, light text) — fine for the standalone demo, FATAL on a host WordPress theme. This file ships ONLY the safe parts of that base — a reset + the layout utilities the component builders use — all scoped under .muevo-theme-* so it can never touch the host page. Enqueue this INSTEAD of muevo-base.css on the front-end. ===================================================================== */ [class*="muevo-theme-"]{ font-family:var(--muevo-font,'Manrope',system-ui,sans-serif); color:var(--muevo-text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; } [class*="muevo-theme-"] *, [class*="muevo-theme-"] *::before, [class*="muevo-theme-"] *::after{ box-sizing:border-box; } [class*="muevo-theme-"] img{ display:block; max-width:100%; } [class*="muevo-theme-"] button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; } [class*="muevo-theme-"] a{ color:inherit; text-decoration:none; } /* The button reset above ([theme] button = 0,1,1) outspecs the plugin's own button classes (.mv-btn--primary = 0,1,0) and would strip their gold fill / borders. Re-assert the button styling here, scoped under the theme wrapper (= 0,2,x) so it always wins — over both this reset and any host-theme `button` rule. Primary = solid gold, secondary = frosted glass + thin gold (accent) border. */ [class*="muevo-theme-"] .mv-btn{ border:var(--muevo-stroke-width) solid transparent; } [class*="muevo-theme-"] .mv-btn--primary{ background:var(--muevo-primary); border-color:var(--muevo-primary); color:var(--muevo-on-primary); } [class*="muevo-theme-"] .mv-btn--primary:hover{ background:var(--muevo-primary-strong); } [class*="muevo-theme-"] .mv-btn--ghost,[class*="muevo-theme-"] .mv-btn--soft{ background:color-mix(in srgb, var(--muevo-surface) 55%, transparent); border-color:var(--muevo-border-strong); color:var(--muevo-text); -webkit-backdrop-filter:blur(10px) saturate(1.1); backdrop-filter:blur(10px) saturate(1.1); } [class*="muevo-theme-"] .mv-btn--ghost:hover,[class*="muevo-theme-"] .mv-btn--soft:hover{ border-color:var(--muevo-primary); background:color-mix(in srgb, var(--muevo-primary) 10%, var(--muevo-surface)); } /* amount pills (also