/* =========================================================================== VRU Theme — Base + WooCommerce styles Mirrors the previous Astra output for non-Elementor surfaces (Woo shop/ product/cart/checkout, search, archives, 404). Elementor pages bring their own styling and simply inherit the tokens above. Breakpoints follow Astra defaults: tablet <=921px, mobile <=544px. ========================================================================== */ /* --- Reset / base --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--vru-font-body); font-weight: var(--vru-fw-body); font-size: var(--vru-base-font-size); line-height: var(--vru-base-line-height); color: var(--vru-color-text); background-color: var(--vru-color-bg); -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; } a { color: var(--vru-color-link); text-decoration: none; } a:hover, a:focus { color: var(--vru-color-link-hover); } /* --- Headings (responsive scale = old Astra font-size-h*) ------------------ */ h1, h2, h3, h4, h5, h6, .entry-title { font-family: var(--vru-font-heading); font-weight: var(--vru-fw-heading); color: var(--vru-color-heading); line-height: 1.25; margin: 0 0 0.6em; } h1 { font-size: var(--vru-h1); } h2 { font-size: var(--vru-h2); } h3 { font-size: var(--vru-h3); } h4 { font-size: var(--vru-h4); } h5 { font-size: var(--vru-h5); } h6 { font-size: var(--vru-h6); } @media (max-width: 921px) { :root { --vru-base-font-size: 16px; --vru-h1: 48px; --vru-h2: 32px; --vru-h3: 28px; --vru-h4: 22px; --vru-h5: 18px; --vru-h6: 13px; } } @media (max-width: 544px) { :root { --vru-base-font-size: 14px; --vru-h1: 40px; --vru-h2: 28px; --vru-h3: 24px; --vru-h4: 20px; --vru-h5: 16px; --vru-h6: 12px; } } /* --- Structural titles ----------------------------------------------------- WordPress renders product/post/page/archive titles as

, but the 72px display-H1 token is meant for in-content hero headings only. Keep these titles at a sane size (matches the prior Astra product-title scale ~30px). */ .product_title, .entry-title, .page-title, .woocommerce-products-header__title { font-size: 32px; line-height: 1.3; } .single-product .product_title { font-size: 30px; margin-bottom: .35em; } @media (max-width: 544px) { .product_title, .entry-title, .page-title, .woocommerce-products-header__title { font-size: 24px; } } /* --- Layout / container (= site-content-width 1200, boxed) ----------------- */ .vru-container { width: 100%; max-width: var(--vru-content-width); margin-inline: auto; padding-inline: var(--vru-gutter); } /* Section padding applies to the theme's own templates only; Elementor full-width/canvas content is not wrapped in .vru-container, so it stays edge-to-edge with no forced padding. */ .site-content > .vru-container { padding-block: var(--vru-section-pad); } .vru-main { min-height: 40vh; } .no-sidebar .vru-main { width: 100%; } /* Two-column layout when a sidebar is present (category sidebars) */ .has-sidebar .vru-content-area { display: flex; gap: 40px; align-items: flex-start; } .has-sidebar .vru-main { flex: 1 1 auto; min-width: 0; } .has-sidebar #secondary { flex: 0 0 28%; max-width: 320px; } @media (max-width: 921px) { .has-sidebar .vru-content-area { display: block; } .has-sidebar #secondary { max-width: none; margin-top: 40px; } } /* --- Buttons (= theme-button-* ) ------------------------------------------ */ button, input[type="button"], input[type="submit"], .button, .wp-block-button__link, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit { display: inline-block; font-family: var(--vru-font-body); font-weight: 600; line-height: 1.2; color: var(--vru-btn-color); background-color: var(--vru-btn-bg); border: none; border-radius: var(--vru-btn-radius); padding: var(--vru-btn-py) var(--vru-btn-px); cursor: pointer; transition: background-color .2s ease, color .2s ease; } button:hover, input[type="submit"]:hover, .button:hover, .wp-block-button__link:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce button.button.alt:hover, .woocommerce #respond input#submit:hover { background-color: var(--vru-btn-bg-hover); color: var(--vru-btn-color-hover); } @media (max-width: 544px) { :root { --vru-btn-py: 12px; --vru-btn-px: 24px; } } /* --- Forms ---------------------------------------------------------------- */ input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea, select { width: 100%; max-width: 100%; padding: 10px 14px; font: inherit; color: var(--vru-color-text); background: #fff; border: 1px solid var(--vru-color-border); border-radius: var(--vru-btn-radius); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--vru-color-primary); box-shadow: 0 0 0 2px rgba(1,112,185,.15); } /* --- WooCommerce ----------------------------------------------------------- All WooCommerce + sticky-add-to-cart styles live in assets/css/woocommerce.css, enqueued only on Woo and product-search pages to keep this global file lean. */ /* --- Footer fallback (only when Elementor footer not yet built) ----------- */ .vru-footer-fallback { background: var(--vru-color-surface); color: var(--vru-color-text); padding-block: 2.5em; } .vru-footer-fallback a { color: var(--vru-color-text); } .vru-footer-fallback a:hover { color: var(--vru-color-link-hover); } .vru-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } @media (max-width: 921px) { .vru-footer-cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 544px) { .vru-footer-cols { grid-template-columns: 1fr; } } .vru-footer-copyright { text-align: center; padding-top: 2em; margin-top: 2em; border-top: 1px solid var(--vru-color-muted); font-size: 14px; } /* --- Header fallback ------------------------------------------------------ */ .vru-header-fallback { background: #fff; border-bottom: 1px solid var(--vru-color-border); } .vru-header-fallback .vru-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 14px; } .vru-header-fallback .vru-logo img { max-height: 48px; width: auto; } .vru-header-fallback nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; } .vru-header-fallback nav a { color: var(--vru-color-heading); font-weight: 500; } /* === Block site header (Crutchfield / eVacuumStore-style) ================== */ /* Declare these flex layouts explicitly. WP's generated block-layout styles (justify-content / flex-wrap / gap / orientation) are NOT emitted when the header & footer render via block_template_part() in a classic context (Elementor pages, cart/checkout) because wp_head has already fired — that made the homepage header lose its space-between. Hard-coding keeps every page identical. */ /* Promo bar: the paragraph inherits the theme's gray body colour, and on Elementor pages Elementor's kit applies a !important paragraph colour that bleeds into the (theme-rendered) header. Force white with matching specificity + !important so "Free Shipping…" is readable on the blue bar on every page. */ .has-primary-background-color.has-white-color, .has-primary-background-color.has-white-color p, .has-primary-background-color.has-white-color a { color: #fff !important; } .vru-header-bar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 30px; } .vru-header-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 26px; } .vru-callus { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; color: var(--vru-color-heading); text-decoration: none; } .vru-header-bar .wp-block-site-logo img { max-height: 58px; width: auto; } /* Prominent centre search */ .vru-header-search { flex: 1 1 auto; max-width: 760px; margin: 0; } .vru-header-search .wp-block-search__inside-wrapper { border: 1px solid var(--vru-color-border); border-radius: var(--vru-btn-radius); overflow: hidden; padding: 0; } .vru-header-search input.wp-block-search__input { border: 0; background: var(--vru-color-surface); padding: 12px 16px; font-size: 15px; } .vru-header-search input.wp-block-search__input:focus { box-shadow: none; outline: none; } .vru-header-search .wp-block-search__button { margin: 0; border: 0; border-radius: 0; background: var(--vru-color-primary); color: #fff; padding: 0 22px; } .vru-header-search .wp-block-search__button:hover { background: var(--vru-color-link-hover); } .vru-header-search .wp-block-search__button svg { fill: currentColor; } /* Right cluster: call us, account, cart */ .vru-header-actions { flex: 0 0 auto; } .vru-callus:hover, .vru-callus:hover .vru-callus__num { color: var(--vru-color-primary); } .vru-callus__icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--vru-color-primary); } .vru-callus__num { font-size: 20px; font-weight: 700; color: var(--vru-color-heading); white-space: nowrap; } .vru-header-actions .wp-block-woocommerce-customer-account a, .vru-header-actions .wc-block-customer-account { color: var(--vru-color-heading); text-decoration: none; } /* Category nav bar (its own row, like their category bars) */ .vru-nav-bar { border-top: 1px solid var(--vru-color-border); border-bottom: 1px solid var(--vru-color-border); } .vru-nav-bar .wp-block-navigation { font-family: var(--vru-font-heading); font-weight: 500; font-size: 15px; } .vru-nav-bar .wp-block-navigation > ul, .vru-nav-bar .wp-block-navigation__container { gap: 0; } .vru-nav-bar .wp-block-navigation a { color: var(--vru-color-heading); } .vru-nav-bar .wp-block-navigation .wp-block-navigation-item > a { padding: 12px 16px; } .vru-nav-bar .wp-block-navigation .wp-block-navigation-item > a:hover, .vru-nav-bar .wp-block-navigation .current-menu-item > a { color: var(--vru-color-primary); } /* Mobile hamburger nav — sits left of the logo on phones, hidden on desktop (the desktop horizontal nav lives in .vru-nav-bar). Since the 2026 nav rework these are DIFFERENT menus: mobile = ref 900001 (accordion), desktop = ref 900000. !important is required because the Navigation block forces its own display. */ .vru-mobile-nav { display: none !important; } /* 3-bar hamburger (WP's default open button draws only 2 bars) */ .vru-mobile-nav .wp-block-navigation__responsive-container-open { position: relative; width: 30px; height: 24px; color: var(--vru-color-heading); padding: 0; } .vru-mobile-nav .wp-block-navigation__responsive-container-open svg { display: none; } .vru-mobile-nav .wp-block-navigation__responsive-container-open::before { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 2px; margin: -1px 0 0 -12px; background: currentColor; box-shadow: 0 -7px currentColor, 0 7px currentColor; } /* --- Responsive header: stack on phones / small tablets ------------------- */ @media (max-width: 768px) { /* Row 1: [hamburger] [logo] [account/cart]; search wraps to its own line. */ .vru-header-bar { flex-wrap: wrap !important; gap: 12px 14px; padding: 12px 16px !important; } .vru-mobile-nav { display: flex !important; order: 1; } .vru-header-bar .wp-block-site-logo { order: 2; } .vru-header-bar .wp-block-site-logo img { max-height: 42px; } .vru-header-actions { order: 3; gap: 18px; } /* Keep the phone as a compact tap-to-call icon on mobile; hide the number text. */ .vru-callus { padding: 5px; } .vru-callus__num { display: none; } .vru-callus__icon { width: 26px; height: 26px; } /* Account = icon only on phones (font-size:0 drops the text, SVG keeps its size) so phone + account + cart form one compact icon row that fits beside the logo. */ .vru-header-actions .wp-block-woocommerce-customer-account a { font-size: 0; } .vru-header-actions .wp-block-woocommerce-customer-account svg { width: 24px !important; height: 24px !important; } .vru-header-actions { gap: 14px; } .vru-header-search { order: 5; flex: 1 1 100%; max-width: none; } /* The gray desktop nav row is replaced by the hamburger above — drop it. */ .vru-nav-bar { display: none; } /* Pull the breadcrumb/content up tight under the header (was margin 24 + pad 30). */ .vru-woo-wrap { margin-top: 0; padding: 12px 16px 40px !important; } } /* === Site footer ========================================================== */ .vru-site-footer { color: var(--vru-color-text); } .vru-footer-brand .vru-footer-tagline { font-size: 15px; color: var(--vru-color-muted); margin: 1rem 0 0; max-width: 30ch; } .vru-footer-brand .vru-footer-contact { font-size: 15px; margin: 1.3rem 0 0; line-height: 1.4; } .vru-footer-brand .vru-footer-contact strong { display: block; color: var(--vru-color-heading); font-weight: 600; } .vru-footer-brand .vru-footer-contact a { font-size: 22px; font-weight: 700; color: var(--vru-color-primary); } .vru-footer-brand .vru-footer-contact a:hover { color: var(--vru-color-link-hover); } /* Column headings — small uppercase (à la Crutchfield/eVacuumStore) */ .vru-footer-heading { font-family: var(--vru-font-heading); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; color: var(--vru-color-heading); margin: 0 0 1.1rem; } .vru-site-footer .wp-block-navigation { font-size: 15px; } .vru-site-footer .wp-block-navigation ul.wp-block-navigation__container { display: flex; flex-direction: column; gap: .55rem 0; } .vru-site-footer .wp-block-navigation a { color: var(--vru-color-muted); } .vru-site-footer .wp-block-navigation a:hover { color: var(--vru-color-primary); } .vru-footer-copyright { color: var(--vru-color-muted); } .vru-footer-copyright p { margin: 0; } /* Colorado mountain backdrop — full-bleed brand graphic at the very bottom. Image lives in the theme (assets/images) so it travels to prod with the repo. */ .vru-footer-mountain { width: 100%; /* full-bleed — a max-height here would let aspect-ratio back-compute width to 1788px and leave a side gap */ aspect-ratio: 1788 / 342; /* full image, proportional height (≈19.1% of width) */ background-image: url("../images/footer-mountain.png"); background-repeat: no-repeat; background-position: center bottom; background-size: cover; /* ratio matches the image, so cover fills with no crop */ } @media (max-width: 600px) { .vru-site-footer { padding-left: 18px !important; padding-right: 18px !important; } } /* --- Utilities ------------------------------------------------------------ */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; background: #fff; padding: 10px 16px; z-index: 100000; } .skip-link:focus { left: 10px; } .vru-pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2em; } .vru-pagination .page-numbers { display: inline-block; padding: 8px 14px; border: 1px solid var(--vru-color-border); border-radius: var(--vru-btn-radius); color: var(--vru-color-heading); } .vru-pagination .page-numbers.current { background: var(--vru-color-primary); color: #fff; border-color: var(--vru-color-primary); } /* === 2026 nav rework: desktop mega menu (Desktop Header Nav 2026, ref 900000) The desktop nav block runs with showSubmenuIcon:false + hover mode, so its markup is 100% anchors (no