/* HEADER AND SIDEBAR FIX - Override all other positioning rules */

/* 1. Header: Fixed at top (Height ~80px) */
.main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    height: 80px !important;
    /* Force explicit height for calculation */
}

/* 2. Search Bar: Fixed below Header (Height ~62px) */
.sticky-search-bar {
    position: fixed !important;
    top: 80px !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
    background: var(--white) !important;
    height: 62px !important;
    display: block !important;
    visibility: visible !important;
    /* Force explicit height */
}

.sticky-search-bar .container,
.sticky-search-bar .header-search,
.sticky-search-bar .header-search input,
.sticky-search-bar .header-search button {
    display: block !important;
    visibility: visible !important;
}

.sticky-search-bar .header-search {
    display: flex !important;
}

/* 3. Shipping Bar: Fixed below Search Bar (Height ~48px) */
.shipping-info-bar {
    position: fixed !important;
    top: 142px !important;
    /* 80 + 62 */
    left: 0 !important;
    width: 100% !important;
    z-index: 998 !important;
    display: block !important;
    visibility: visible !important;
    margin: 0 !important;
    height: 48px !important;
    /* Force explicit height */
}

/* 4. Body Padding: Pushes content down by total header stack height (80 + 62 + 48 = 190px) */
body {
    padding-top: 190px !important;
}

/* 5. Sidebar: Sticky relative to the scrolling content */
/* Top offset = Body Padding (190px) */
.shop-sidebar {
    position: sticky !important;
    top: 190px !important;
    align-self: start !important;
    max-height: calc(100vh - 190px) !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    /* For Firefox */
    z-index: 900 !important;
}

/* Custom scrollbar for webkit */
.shop-sidebar::-webkit-scrollbar {
    width: 6px;
}

.shop-sidebar::-webkit-scrollbar-thumb {
    background-color: var(--primary-blue);
    border-radius: 4px;
}

.shop-sidebar::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

/* Mobile/Tablet Responsiveness */
@media (max-width: 992px) {

    /* Header is smaller on mobile (60px) */
    .main-header {
        height: 60px !important;
    }

    /* Search bar moves up */
    .sticky-search-bar {
        top: 60px !important;
    }

    /* MOBILE: Shipping bar should scroll with the page, not be fixed */
    .shipping-info-bar {
        position: static !important;
        top: auto !important;
        height: auto !important;
        padding: 10px 20px !important;
        line-height: 1.4 !important;
        margin-bottom: 0 !important;
    }

    /* Reduce body padding since shipping bar is no longer fixed */
    body {
        padding-top: 140px !important;
        /* Only header + search bar */
    }

    /* MOBILE: Sidebar should NOT be sticky - scroll naturally with the page */
    .shop-sidebar {
        position: static !important;
        top: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        z-index: auto !important;
    }
}

/* Desktop App-Layout: Independent Scrolling Areas */
/* Enforce Sticky Sidebar on Desktop ONLY */
@media (min-width: 993px) {

    /* Ensure parent container allows sticky behavior (no overflow: hidden) */
    .shop-main-layout {
        overflow: visible !important;
    }

    /* Sidebar: Sticky, Fixed Height relative to Viewport, Internal Scroll */
    .shop-sidebar {
        position: sticky !important;
        top: 190px !important;
        /* Matches header stack height */
        align-self: start !important;
        height: auto !important;
        max-height: calc(100vh - 200px) !important;
        /* Viewport - Top Offset - Bottom Buffer */
        overflow-y: auto !important;
        z-index: 900 !important;
        scrollbar-width: thin;
    }
}

/* Revert Body Scroll (ensure it's not hidden) */
html,
body {
    overflow: visible !important;
    height: auto !important;
}