/**
 * Keeps the announcement bar + header pinned to the top of the viewport
 * on scroll — applies on both mobile and desktop (no breakpoint gating).
 * Both elements are wrapped in a single .mv-sticky-top container (see
 * MV_Assets::render_app_header()) so they stick together as one unit
 * without needing to know either element's exact height in advance.
 */
.mv-sticky-top {
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Order Now page's category selector — sticks just below the header
 * instead of scrolling away, using the header height measured live by
 * sticky-header.js rather than a guessed pixel value. z-index sits
 * below the header/drawers (1000+) but above regular page content. */
.mv-category-tiles {
    position: sticky;
    top: var(--mv-sticky-header-height, 0px);
    z-index: 500;
    background: #ffffff;
}