/* Runtime class is added by assets/js/sticky-filters.js only on configured devices. */
.moze-sticky-filters-runtime {
    position: sticky !important;
    top: var(--moze-sticky-header-height, 0px);
    z-index: 99 !important;
    isolation: isolate;
    padding: 10px 12px;
    background: #fff;
    transition:
        transform 0.28s ease,
        top 0.12s linear,
        box-shadow 0.28s ease,
        opacity 0.12s ease;
    will-change: transform, top;
}

/* Elementor containers can clip or stack the sticky bar below product cards. */
.moze-sticky-filters-stack-parent {
    overflow: visible !important;
}

.moze-sticky-filters-runtime.moze-is-sticky {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.moze-sticky-filters-runtime.moze-scroll-hidden {
    transform: translate3d(0, -140%, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        transform 0s linear,
        top 0.12s linear,
        box-shadow 0.28s ease,
        opacity 1s linear,
        visibility 1s linear;
}

.moze-sticky-filters-runtime:not(.moze-scroll-hidden) {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
}

/*
 * WoodMart creates a separate cloned header during scroll. Keep both the
 * initial header and the runtime clone above the filters bar.
 */
@media (max-width: 1024px) {
    .whb-header,
    .whb-main-header,
    .whb-header .whb-sticky-row,
    .whb-sticky-header.whb-clone,
    .whb-sticky-header.whb-clone .whb-row,
    .whb-sticky-header.whb-clone .whb-sticky-row {
        z-index: 100 !important;
    }
}