/* ========================================================================== IPEKERP_STOREFRONT_CATEGORY_NAV_STICKY_ONLY_V1 DESKTOP SCROLL BEHAVIOR ONLY - Whole storefront header is no longer sticky. - Benefit bar + logo/search/actions scroll away naturally. - Only the approved category navigation becomes fixed after reaching top. - Normal/top-of-page category design is NOT changed. - Sticky state is compact to preserve product browsing space. - Existing routes, SVGs, mega-menu and category flyouts remain untouched. ========================================================================== */ @media (min-width: 1180px) { /* --------------------------------------------------------------- 1) Disable the old "entire header sticky" contract. The old final-polish JS may still toggle sf4-header--compact; this layer intentionally neutralizes its layout side-effects. --------------------------------------------------------------- */ body header.sf-site-header.sf4-approved-header, body header.sf-site-header.sf4-approved-header.sf4-header--compact { position: relative !important; top: auto !important; z-index: auto !important; isolation: auto !important; transform: none !important; box-shadow: none !important; } body header.sf-site-header.sf4-approved-header.sf4-header--compact .sf4-approved-header__main-inner { min-height: revert-layer !important; } body header.sf-site-header.sf4-approved-header.sf4-header--compact .sf4-approved-nav__inner { min-height: 98px !important; } /* Spacer exists only to prevent a layout jump when nav becomes fixed. */ .sf4-nav-sticky-only-spacer { display: none; width: 100%; height: var(--sf4-nav-sticky-spacer-h, 0px); pointer-events: none; } .sf4-nav-sticky-only-spacer[data-active="true"] { display: block; } /* --------------------------------------------------------------- 2) Fixed category-only state. --------------------------------------------------------------- */ body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck { position: fixed !important; z-index: 1600 !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; margin: 0 !important; padding: 7px 0 8px !important; background: rgba(255, 255, 255, 0.975) !important; border: 0 !important; border-bottom: 1px solid rgba(211, 222, 234, 0.92) !important; box-shadow: 0 9px 24px rgba(15, 42, 76, 0.10), 0 2px 6px rgba(15, 42, 76, 0.045) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; overflow: visible !important; } body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__inner { width: min(calc(100% - 36px), 1800px) !important; max-width: 1800px !important; min-height: 72px !important; height: 72px !important; margin: 0 auto !important; padding: 5px 10px !important; border: 1px solid #dce5ef !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: 0 5px 14px rgba(15, 42, 76, 0.055), 0 1px 2px rgba(15, 42, 76, 0.02) !important; } /* --------------------------------------------------------------- 3) Compact only while stuck. Normal page-top dimensions remain owned by V1/V2. --------------------------------------------------------------- */ body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__inner > a:not(.sf4-approved-nav__all) { min-height: 60px !important; height: 60px !important; padding: 5px 3px 4px !important; gap: 3px !important; border-radius: 9px !important; transform: none !important; } body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__inner > a:not(.sf4-approved-nav__all) > span { font-size: 10.8px !important; line-height: 1.06 !important; font-weight: 710 !important; } body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__inner > a:not(.sf4-approved-nav__all) > svg.sf4-nav-icon { width: 22px !important; height: 22px !important; min-width: 22px !important; flex: 0 0 22px !important; stroke-width: 2.02 !important; } /* Slight compensation for the visually narrow icons. */ body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__motor > svg.sf4-nav-icon, body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__suspension > svg.sf4-nav-icon, body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__belt > svg.sf4-nav-icon, body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__ignition > svg.sf4-nav-icon { width: 23px !important; height: 23px !important; min-width: 23px !important; flex-basis: 23px !important; } body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__inner > a.sf4-approved-nav__all { flex: 0 0 214px !important; width: 214px !important; min-width: 214px !important; min-height: 56px !important; height: 56px !important; margin: 0 12px 0 2px !important; padding: 0 16px !important; gap: 9px !important; border-radius: 9px !important; } body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__all > svg.sf4-nav-icon { width: 21px !important; height: 21px !important; min-width: 21px !important; flex-basis: 21px !important; } body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__all > span { font-size: 12px !important; line-height: 1 !important; } body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__brands { flex-basis: 88px !important; width: 88px !important; min-width: 88px !important; margin-left: 3px !important; padding-left: 9px !important; } body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__inner > a[data-sf-nav-active="true"]:not(.sf4-approved-nav__all)::after { bottom: -6px !important; height: 3px !important; } /* Hover remains subtle while floating above product content. */ body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__inner > a:not(.sf4-approved-nav__all):hover, body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck .sf4-approved-nav__inner > a:not(.sf4-approved-nav__all):focus-visible { transform: none !important; } } /* Existing tablet/mobile behavior stays unchanged. */ @media (max-width: 1179px) { .sf4-nav-sticky-only-spacer { display: none !important; } body header.sf-site-header.sf4-approved-header nav.sf-site-nav.sf4-approved-nav.sf4-nav-only--stuck { position: relative !important; top: auto !important; left: auto !important; right: auto !important; } }