:root{ --navy-950:#070d16; --navy-900:#0b1522; --navy-800:#10203a; --navy-700:#16304f; --steel-500:#4a7fb5; --steel-400:#6ea0d1; --gold-500:#c9972e; --gold-400:#e0b355; --ink-900:#101820; --ink-600:#4a5560; --ink-400:#7c8896; --paper-0:#ffffff; --paper-50:#f6f7f9; --paper-100:#eceef2; --line:#e2e5ea; --radius:14px; --maxw:1240px; } *{box-sizing:border-box; margin:0; padding:0;} /* !important: the Woodmart parent theme sets its own font (Ubuntu on body, Manrope on headings, etc.) on individual elements with enough specificity to beat a plain "body{font-family:...}" rule — this universal override forces the Cairo design-system font everywhere on SAF pages. The WP admin toolbar is genuinely excluded from the selector (not just re-overridden) so WordPress's own dashicons icon font — visible only to logged-in staff — keeps working instead of turning into boxes. */ *:not(#wpadminbar):not(#wpadminbar *){font-family:'Cairo',system-ui,-apple-system,sans-serif !important;} html{scroll-behavior:smooth;} body{ background:var(--paper-0); color:var(--ink-900); line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block;} a{text-decoration:none; color:inherit;} ul{list-style:none;} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;} /* language toggle: driven purely by , set synchronously by an inline script in (before first paint) and updated live by site.js on click. !important guarantees this always wins over component display values (flex, inline-flex...) regardless of selector specificity or source order — and, just as importantly, over the Woodmart parent theme's own CSS. */ html[lang="en"] [data-lang="ar"]{display:none !important;} html[lang="ar"] [data-lang="en"]{display:none !important;} /* [hidden] kept as a belt-and-braces fallback in case any element is ever hidden a different way. */ [hidden]{display:none !important;} /* ---------- Top bar ---------- */ /* !important: Woodmart gives real