/* Structural chrome ported from the static site's index.html/nav.js — the parts that aren't Elementor Pro widgets on the free tier (responsive nav, the quote slide-over). Content styling (headings, body copy, section colors) comes from Elementor's Global Colors/Fonts/Theme Style instead. */ /* The quote panel is `position:fixed;right:0` pushed off-screen with `transform:translateX(100%)` — off-screen for scrolling/painting purposes, but its un-transformed box still registers as horizontal overflow on the document in some engines, adding an accidental scrollbar/scroll-right gap the whole page long. Confirmed via scrollWidth vs clientWidth against the running site, not assumed; this is the standard guard for it. */ html,body{overflow-x:hidden;margin:0} /* -- Layout. Flex/grid direction, gap, padding, margin, widths, min-height and border-radius on Elementor Containers are ALL set natively in homepage-builder.php (Elementor prints its own per-element CSS for these with a guaranteed fallback default — e.g. 10px padding — at the same specificity as a ported class, so a plain CSS rule silently loses; see that file's header comment). What's left here is only what Elementor has no control for: max-width+margin:auto centering (confirmed safe — see below), text-align, exact font sizes, and fixed logo/image sizing. -- */ .sme-page{width:100%;font-family:'Lato',-apple-system,sans-serif} .sme-page *{box-sizing:border-box} .sme-page a{text-decoration:none} /* Elementor's own outer-container max-width rule (`max-width:min(100%,var(--width))`) computes to a no-op when a container's content_width stays the default 'boxed' (no --width variable is set, and var() has no fallback there), so these plain max-width+margin:auto rules apply uncontested — confirmed via computed styles against the running site, not assumed. */ .header-inner,.hero-row,.wrap-gutter,.why-row,.footer-inner{max-width:1440px;margin-left:auto;margin-right:auto} /* Header/footer band color + internal flex layout for plain-PHP-rendered templates (single-sme_product.php, taxonomy-sme_product_category.php, via includes/site-chrome.php) — a second, CSS-only copy of layout the homepage sets natively on its Elementor Containers instead. Everything here is scoped under `.sme-plain` (a class those templates put on their root wrapper) rather than applied to the shared class names globally: an earlier unscoped version assumed Elementor's own CSS would always win on the homepage, but Elementor applies inline padding via a plain `.e-con{padding-inline-*}` rule that these tied with and beat (later in source order), quietly shifting the homepage header/footer gutters at 640–767px — confirmed via computed padding at 700px. */ .sme-plain{min-height:100vh;display:flex;flex-direction:column} .sme-plain main{flex:1} .sme-plain .sme-site-header,.sme-plain .sme-site-footer{background:#262262} .sme-plain .header-inner{display:flex;align-items:center;gap:44px;padding:0 188px;min-height:90px} .sme-plain .footer-inner{display:flex;gap:60px;padding:64px 188px 30px} .sme-plain .footer-brand{display:flex;flex-direction:column;flex-shrink:0} .sme-plain .wrap-gutter{padding:0 188px} @media (max-width:1023px){ .sme-plain .header-inner,.sme-plain .wrap-gutter{padding-left:48px;padding-right:48px} .sme-plain .footer-inner{padding:64px 48px 30px;gap:40px} } @media (max-width:767px){ .sme-plain .header-inner,.sme-plain .wrap-gutter{padding-left:20px;padding-right:20px} .sme-plain .footer-inner{padding:40px 20px 20px;flex-direction:column;gap:32px} .sme-plain .footer-brand{width:100%} } @media (max-width:639px){ .sme-plain .header-inner{min-height:72px} } /* SME_Site_Nav_Widget renders both the toggle button and the absolutely positioned