/* * SHARED CHROME — site-wide alignment lock * Owner directive 2026-05-10: every page must align identically — same nav width, * same content max-width, same footer. This file is the single source of truth. * * Loaded LAST in every page so its rules win against per-page CSS. */ /* ============================================================ NAV ALIGNMENT — pin row 1 + row 2 to identical 1280px container ============================================================ */ .nav.nav-2row .nav-row1, .nav.nav-2row .nav-row2 { max-width: 1280px !important; margin: 0 auto !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } .nav.nav-2row .nav-row1 { padding-top: 18px !important; padding-bottom: 18px !important; display: flex !important; align-items: center !important; gap: 18px !important; background: #fff !important; } /* Owner directive 2026-05-10: bump row 1 size — bigger logo + taller search bar */ .nav.nav-2row .nav-row1 .nav-logo { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -0.03em !important; } .nav.nav-2row .nav-row2 { padding-top: 10px !important; padding-bottom: 10px !important; display: flex !important; align-items: center !important; gap: 32px !important; font-size: 15px !important; background: transparent !important; } .nav.nav-2row .nav-row1 .nav-search { flex: 1 1 auto !important; min-width: 0 !important; } .nav.nav-2row .nav-row2-band { background: #0f172a !important; width: 100% !important; } /* Row 1 link consistency */ .nav.nav-2row .nav-link-r1 { color: #0f172a !important; font-size: 15px !important; font-weight: 500 !important; text-decoration: none !important; padding: 8px 6px !important; white-space: nowrap !important; flex-shrink: 0 !important; } .nav.nav-2row .nav-link-r1:hover { color: #f97316 !important; } /* Row 2 link consistency — pure white tabs */ .nav.nav-2row .nav-link-r2, .nav.nav-2row a.nav-link.nav-link-r2 { color: #fff !important; text-decoration: none !important; font-weight: 500 !important; padding: 6px 0 !important; background: transparent !important; letter-spacing: 0.01em !important; } .nav.nav-2row .nav-link-r2:hover { color: #f97316 !important; background: transparent !important; } .nav.nav-2row .nav-cta-r2 { color: #f97316 !important; font-weight: 700 !important; font-size: 16px !important; margin-left: auto !important; } .nav.nav-2row .nav-cta-r2:hover { color: #fb923c !important; } .nav.nav-2row .nav-flag-r2 { font-size: 18px !important; margin-left: 14px !important; } /* ============================================================ CONTAINER ALIGNMENT — pin all .container to 1280px (matches nav-row width — body content lines up under nav) ============================================================ */ .container { max-width: 1280px !important; margin: 0 auto !important; padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } /* ============================================================ LEGACY TRUST-STRIP / TOPBAR CLEANUP — hide any leftover instances ============================================================ */ .trust-strip, .trust-bar, .topbar, .topbar-inner, .header-strip, .announcement-bar, .info-bar, .promo-bar { display: none !important; } /* ============================================================ MOBILE — preserve mobile-friendly nav padding ============================================================ */ @media(max-width: 700px) { .nav.nav-2row .nav-row1 { padding: 10px 14px !important; gap: 10px !important; } .nav.nav-2row .nav-row1 .nav-link-r1 { display: none !important; } .nav.nav-2row .nav-row2 { padding: 6px 14px !important; gap: 14px !important; overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; } .nav.nav-2row .nav-row2 .nav-link-r2 { white-space: nowrap !important; } .container { padding-left: 16px !important; padding-right: 16px !important; } } /* ============================================================ NAV SEARCH BAR — full input + button styling so every page renders the search bar identically (some subpages had .nav-search without any input styling, causing squeeze) ============================================================ */ .nav.nav-2row .nav-row1 .nav-search { position: relative !important; max-width: none !important; } .nav.nav-2row .nav-row1 .nav-search input { width: 100% !important; height: 56px !important; padding: 0 64px 0 26px !important; border: 2px solid #cbd5e1 !important; border-radius: 50px !important; font-size: 16px !important; outline: none !important; background: #fff !important; box-shadow: 0 2px 14px rgba(0,0,0,0.05) !important; font-family: inherit !important; box-sizing: border-box !important; color: #0f172a !important; } .nav.nav-2row .nav-row1 .nav-search input:focus { border-color: #f97316 !important; box-shadow: 0 2px 16px rgba(249,115,22,0.10) !important; } .nav.nav-2row .nav-row1 .nav-search input::placeholder { color: #94a3b8 !important; } .nav.nav-2row .nav-row1 .nav-search button { position: absolute !important; right: 6px !important; top: 6px !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: #f97316 !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; cursor: pointer !important; } .nav.nav-2row .nav-row1 .nav-search button svg { width: 20px !important; height: 20px !important; } .nav.nav-2row .nav-row1 .nav-search button:hover { background: #fb923c !important; } .nav.nav-2row .nav-row1 .nav-search button svg { width: 16px !important; height: 16px !important; stroke: #fff !important; fill: none !important; stroke-width: 2.5 !important; } /* ============================================================ NAV CART — fix the "0" badge breaking out ============================================================ */ .nav.nav-2row .nav-row1 .nav-cart { position: relative !important; padding: 8px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; text-decoration: none !important; } .nav.nav-2row .nav-row1 .nav-cart svg { width: 22px !important; height: 22px !important; stroke: #f97316 !important; fill: none !important; stroke-width: 2 !important; } .nav.nav-2row .nav-row1 .nav-cart-count { position: absolute !important; top: -2px !important; right: -2px !important; background: #dc2626 !important; color: #fff !important; font-size: 10px !important; font-weight: 700 !important; min-width: 18px !important; height: 18px !important; padding: 0 4px !important; border-radius: 9px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; line-height: 1 !important; } .nav.nav-2row .nav-row1 .hamburger { display: none !important; } @media(max-width: 700px) { .nav.nav-2row .nav-row1 .hamburger { display: inline-flex !important; } .nav.nav-2row .nav-row1 .nav-search input { height: 40px !important; font-size: 14px !important; } } /* ============================================================ FOOTER ALIGNMENT — canonical 4-column footer styling so any page that adopts the canonical footer renders identically ============================================================ */ .footer, footer.footer { background: #0f172a !important; color: rgba(255,255,255,0.85) !important; padding: 56px 0 32px !important; margin-top: 64px !important; } .footer .container, footer.footer .container { max-width: 1280px !important; margin: 0 auto !important; padding: 0 20px !important; box-sizing: border-box !important; } .footer .footer-grid, footer .footer-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 32px !important; margin-bottom: 32px !important; max-width: 1280px !important; padding: 0 !important; } .footer .footer-col h4, footer .footer-col h4 { font-size: 14px !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 14px !important; letter-spacing: 0.02em !important; } .footer .footer-col a, footer .footer-col a { display: block !important; font-size: 14px !important; color: rgba(255,255,255,0.75) !important; padding: 4px 0 !important; text-decoration: none !important; line-height: 1.5 !important; } .footer .footer-col a:hover, footer .footer-col a:hover { color: #f97316 !important; } .footer .footer-bottom, footer .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1) !important; padding-top: 24px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 16px !important; font-size: 13px !important; color: rgba(255,255,255,0.6) !important; } .footer .footer-payments, footer .footer-payments { display: inline-flex !important; gap: 8px !important; flex-wrap: wrap !important; } .footer .footer-payments span, footer .footer-payments span { display: inline-flex !important; align-items: center !important; padding: 4px 10px !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 4px !important; color: rgba(255,255,255,0.75) !important; font-size: 12px !important; font-weight: 600 !important; }