/* ========================================================================== ETHOS BIO — GLOBAL LAYOUT SYSTEM (single source of truth) One set of spacing tokens, one container, one section rhythm. Linked LAST in on every storefront page so it resolves the competing container rules that used to live in ethos-product-v2.css, ethos-v2.css, and the homepage/checkout inline styles. ========================================================================== */ :root{ --page-max:1520px; --page-gutter-desktop:64px; --page-gutter-tablet:32px; --page-gutter-mobile:20px; --section-y-xl:128px; --section-y-lg:96px; --section-y-md:72px; } /* -------------------------------------------------------------------------- THE container. Full-bleed section backgrounds stay edge-to-edge; their inner content wrapper carries one of these classes and snaps to the shared gutter grid. Every historical wrapper class is aliased here so the whole site shares one measurement — no more competing max-width/padding. -------------------------------------------------------------------------- */ .site-container, .e-shell, .page-w, .e-wrap-wide, .hero-inner, .nav-inner, .rlh > .in, .guides, .idx, .rl-grid{ width:min(var(--page-max), calc(100% - (var(--page-gutter-desktop) * 2))); max-width:none; margin-inline:auto; padding-left:0; padding-right:0; } @media (max-width:1024px){ .site-container, .e-shell, .page-w, .e-wrap-wide, .hero-inner, .nav-inner, .rlh > .in, .guides, .idx, .rl-grid{ width:calc(100% - (var(--page-gutter-tablet) * 2)); } } @media (max-width:640px){ .site-container, .e-shell, .page-w, .e-wrap-wide, .hero-inner, .nav-inner, .rlh > .in, .guides, .idx, .rl-grid{ width:calc(100% - (var(--page-gutter-mobile) * 2)); } } /* -------------------------------------------------------------------------- Section vertical rhythm utilities (token-driven, responsive downshift). -------------------------------------------------------------------------- */ .section-y-xl{padding-top:var(--section-y-xl);padding-bottom:var(--section-y-xl)} .section-y-lg{padding-top:var(--section-y-lg);padding-bottom:var(--section-y-lg)} .section-y-md{padding-top:var(--section-y-md);padding-bottom:var(--section-y-md)} @media (max-width:1024px){ .section-y-xl{padding-top:var(--section-y-lg);padding-bottom:var(--section-y-lg)} .section-y-lg{padding-top:var(--section-y-md);padding-bottom:var(--section-y-md)} } @media (max-width:640px){ .section-y-xl,.section-y-lg{padding-top:56px;padding-bottom:56px} .section-y-md{padding-top:48px;padding-bottom:48px} }