/* ============================================================ Sticky Red Top Bar (User Side) - Only the red utility top bar (.header-top-area) stays pinned on scroll. The logo / search / cart area and the navigation menu scroll normally. - The bar is a direct child of so it sticks for the whole page (CSS position:sticky, no layout shift). ============================================================ */ .header--sticky { position: sticky; top: 0; z-index: 9999; /* Remove all effects */ transition: none !important; animation: none !important; transform: none !important; box-shadow: none; } .header--sticky.sticky, .header--sticky.fixed, .header--sticky.is-sticky { position: fixed; top: 0; left: 0; width: 100%; transition: none !important; animation: none !important; transform: none !important; } @media only screen and (min-width: 768px) and (max-width: 991px) { .header--sticky, .header--sticky.sticky, .header--sticky.fixed, .header--sticky.is-sticky { width: 100%; max-width: 100%; overflow-x: hidden; left: 0; right: 0; box-sizing: border-box; } .header--sticky .container, .header--sticky .container-2, .header--sticky .container-3 { padding-left: 15px; padding-right: 15px; max-width: 100%; } } @media only screen and (max-width: 767px) { .header--sticky, .header--sticky.sticky, .header--sticky.fixed, .header--sticky.is-sticky { width: 100%; max-width: 100%; overflow-x: hidden; left: 0; right: 0; box-sizing: border-box; } .header--sticky .container, .header--sticky .container-2, .header--sticky .container-3 { padding-left: 12px; padding-right: 12px; max-width: 100%; } }