/* ========================================================================== OXYZ UI โ€” storefront design system Loaded at the end of (see inc/oxyz-ui.php). Mobile-first. ========================================================================== */ :root { --oz-green: #087b5e; --oz-green-600: #066b52; --oz-green-700: #04483a; --oz-green-50: #e8f4ef; --oz-gold: #d3b05f; --oz-gold-600: #bf9c4a; --oz-gold-ink: #86651a; --oz-cream: #faf7ef; --oz-cream-2: #f4efe6; --oz-ink: #16211c; --oz-body: #3d4a44; --oz-muted: #6b7771; --oz-line: #e8e3d7; --oz-white: #fff; --oz-danger: #b3261e; --oz-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --oz-r-sm: 10px; --oz-r: 14px; --oz-r-lg: 18px; --oz-pill: 999px; --oz-shadow-sm: 0 1px 2px rgba(8, 40, 28, .06), 0 2px 8px rgba(8, 40, 28, .04); --oz-shadow-md: 0 10px 30px -10px rgba(8, 40, 28, .22); --oz-shadow-lg: 0 24px 60px -20px rgba(8, 40, 28, .35); --oz-ease: cubic-bezier(.2, .7, .2, 1); --oz-ease-out: cubic-bezier(.16, 1, .3, 1); --oz-ann: 0px; --oz-hh: 64px; --oz-gutter: 16px; } @media (min-width: 768px) { :root { --oz-gutter: 24px; } } @media (min-width: 1025px) { :root { --oz-hh: 76px; --oz-gutter: 32px; } } /* ---------- Base helpers ---------- */ .oz-container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--oz-gutter); box-sizing: border-box; } .oz-section { padding: clamp(48px, 7vw, 96px) 0; font-family: var(--oz-font); } .oz-h2 { font-family: var(--oz-font); font-size: clamp(24px, 2.2vw + 14px, 38px); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; color: var(--oz-green); margin: 6px 0 0; text-transform: none; } .oz-lead { font-size: 15px; line-height: 1.7; color: var(--oz-body); margin: 14px 0 22px; } .oz-eyebrow { display: inline-block; font-family: var(--oz-font); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oz-gold-ink); text-decoration: none; } .oz-eyebrow--light { color: var(--oz-gold); } .oz-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--oz-font); font-size: 14px; font-weight: 600; color: var(--oz-green) !important; text-decoration: none !important; } .oz-link .oz-i { transition: transform .25s var(--oz-ease); } .oz-link:hover .oz-i { transform: translateX(3px); } .oz-i { flex-shrink: 0; display: block; } /* The parent theme fills SVG shapes with currentColor; our icons are outline-only. */ .oz-i, .oz-i * { fill: none !important; } /* The parent theme paints decorative ::before/::after layers on every