/**
 * Sticky Sidebar Styles
 * Common styles for synchronized sticky sidebar behavior
 */

/* Wrapper container for sticky sidebar */
.sidebar_wrap {
    position: relative;
}

/* Sidebar element with absolute positioning for transform-based animation */
.sidebar_wrap > .sidebar,
.sidebar_wrap > .catalog_sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    z-index: 99;
}

/* Mobile reset - disable sticky behavior */
@media (max-width: 968px) {
    .sidebar_wrap > .sidebar,
    .sidebar_wrap > .catalog_sidebar {
        position: relative !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        width: auto !important;
    }

    .sidebar_wrap {
        height: auto !important;
        min-height: auto !important;
    }

    /* Ensure sidebar is visible when active on mobile */
    .catalog_sidebar.active .sidebar {
        position: relative !important;
        z-index: 1000;
        display: contents !important;
    }

    .sidebar_wrap > .sidebar {
        display: contents !important;
    }

    .catalog_sidebar.active {
        display: block !important;
        height: 100vh !important;
        max-height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* ===== Nested mode (Universal) ===== */
/* Use .sidebar-nested class to disable inner sticky behavior when component 
   is placed inside another sticky wrapper */
.sidebar_wrap.sidebar-nested {
    position: static;
    min-height: auto;
    width: 100% !important; /* Take full width of parent sticky .sidebar */
}

.catalog_sidebar.sidebar-nested {
    position: static;
    top: auto;
    left: auto;
    width: 100% !important;
    transform: none !important;
    will-change: auto;
}