/* ============================================================ wf-components — Sections 1-3 (mobile-first, RTL, self-contained) Tokens are namespaced --wfc-* so they never collide with the live Astra site. In wf-blocks they map to the theme's --wf-* tokens. ============================================================ */ :root { --wfc-primary: #8A5FAC; --wfc-primary-soft: #AB92BF; --wfc-primary-deep: #5E3D7E; --wfc-bg: #FFFCFA; --wfc-surface: #FFFFFF; --wfc-surface-soft: #F3F0FF; --wfc-text: #2A2A2A; --wfc-text-muted: #6B6B6B; --wfc-border: #E4DAED; --wfc-divider: rgba(42, 42, 42, 0.08); --wfc-radius: 16px; --wfc-radius-pill: 9999px; --wfc-shadow-sm: 0 1px 2px rgba(42, 42, 42, 0.06); --wfc-shadow-md: 0 4px 12px rgba(42, 42, 42, 0.08); --wfc-ease: cubic-bezier(0.2, 0, 0, 1); --wfc-font: "Assistant", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* unified layout rhythm — consistent side gutter + vertical spacing across blocks */ --wfc-gutter: clamp(16px, 4vw, 22px); --wfc-section-y: 22px; --wfc-head-gap: 16px; /* head → content */ } /* ── Unified section headings (same across all content blocks) ── */ /* Home H1 (audit F3): visible, compact, on-brand — sits right below the hero. */ .wf-home-h1 { text-align: center; font-size: clamp(17px, 3vw, 22px); font-weight: 600; color: #5c3d7a; margin: clamp(18px, 3vw, 26px) var(--wfc-gutter) 0; line-height: 1.3; } .wf-quicklinks__head, .wf-pc__head { text-align: center; margin: 0 var(--wfc-gutter) var(--wfc-head-gap); } .wf-pc__badge { display: inline-block; margin: 0 0 10px; background: #f3f0ff; color: #5c3d7a; font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 999px; } .wf-pc.is-dark .wf-pc__badge { background: rgba(255,255,255,.16); color: #fff; } .wf-quicklinks__title, .wf-pc__title { font-size: clamp(20px, 5.5vw, 26px); font-weight: 800; color: var(--wfc-primary-deep); margin: 0; line-height: 1.15; } .wf-quicklinks__sub, .wf-pc__sub { font-size: clamp(14px, 3.6vw, 16px); color: var(--wfc-text-muted); margin: 6px 0 0; line-height: 1.4; } [class^="wf-"], [class*=" wf-"] { box-sizing: border-box; } /* ══ THE CHROME CANNOT BORROW THE THEME'S RESET ═══════════════════════════ The product page dequeues every astra* and elementor* stylesheet, and the header and footer live OUTSIDE .wf-pdp — so they lost the only global box-sizing on the page and every padded element started measuring content-box. Measured on the live canary: box-sizing computed to content-box on , and a fresh

, and the header came apart. The rule above only ever covered elements whose class starts with wf-, which is not the logo , not the and