/* ========================================
   REMOVE PRODUCT LIST SCROLLING EFFECT
   Remove scrolling from "Explore Full Range of Moneypex Products" section
   Keep layout intact - only remove scrolling
   ======================================== */

/* ========================================
   1. REMOVE SCROLLING FROM PRODUCTS LIST
   Keep layout and positioning intact
   ======================================== */

/* Remove scrolling from mp-products-list - Keep sticky for layout */
.mp-products-list,
#mpProductsList {
    overflow-y: visible !important; /* Remove scrolling */
    overflow-x: hidden !important;
    max-height: none !important; /* Remove height constraint */
    /* Keep sticky positioning for layout */
    position: sticky !important;
    top: 100px !important;
    align-self: flex-start !important;
    height: auto !important; /* Auto height to show all items */
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: clamp(0.625rem, 1.5vw, 0.875rem) !important;
    padding-right: 0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Remove scrolling from modern-products-list - Keep sticky for layout */
.modern-products-section .modern-products-list,
.modern-products-list {
    overflow-y: visible !important; /* Remove scrolling */
    overflow-x: hidden !important;
    max-height: none !important; /* Remove height constraint */
    /* Keep sticky positioning for layout */
    position: sticky !important;
    top: 120px !important;
    align-self: flex-start !important;
    height: auto !important; /* Auto height to show all items */
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.875rem !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    
    /* Remove scrollbar completely */
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Hide scrollbar for Chrome/Safari/Opera/Modern Edge */
.modern-products-section .modern-products-list::-webkit-scrollbar,
.modern-products-list::-webkit-scrollbar,
.mp-products-list::-webkit-scrollbar,
#mpProductsList::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ========================================
   2. ENSURE ALL PRODUCT ITEMS ARE VISIBLE
   ======================================== */

/* Product items should display normally - ensure all are visible */
.product-item,
.modern-product-item {
    position: relative !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
}

/* Ensure no product items are hidden */
.mp-products-list .product-item,
.modern-products-list .product-item,
#mpProductsList .product-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ========================================
   3. PRODUCTS SECTION CONTAINER - KEEP LAYOUT
   ======================================== */

/* Ensure section doesn't have overflow issues but keeps layout */
.mp-products-section,
.modern-products-section {
    overflow: visible !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

/* Products list container - keep layout */
.mp-products-section .row,
.modern-products-section .row {
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

/* Column containers - ensure they work properly */
.mp-products-section .col-lg-7,
.mp-products-section .col-xl-5,
.mp-products-section .col-md-12,
.modern-products-section .col-lg-7,
.modern-products-section .col-xl-5,
.modern-products-section .col-md-12 {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    position: relative !important;
    display: block !important;
}

/* ========================================
   4. ENSURE NO ITEMS ARE CUT OFF
   ======================================== */

/* Make sure all product items render */
.mp-products-list > *,
.modern-products-list > *,
#mpProductsList > * {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
}

/* ========================================
   5. MOBILE OPTIMIZATIONS
   ======================================== */

@media (max-width: 991.98px) {
    .mp-products-list,
    .modern-products-list,
    #mpProductsList {
        overflow-y: visible !important;
        max-height: none !important;
        position: relative !important; /* Remove sticky on mobile */
        top: auto !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Ensure all items visible on mobile */
    .mp-products-list .product-item,
    .modern-products-list .product-item {
        display: flex !important;
        visibility: visible !important;
    }
}

/* ========================================
   6. DESKTOP OPTIMIZATIONS
   ======================================== */

@media (min-width: 992px) {
    .mp-products-list,
    .modern-products-list,
    #mpProductsList {
        overflow-y: visible !important;
        max-height: none !important;
        position: sticky !important; /* Keep sticky on desktop for layout */
        top: 100px !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Ensure all items visible on desktop */
    .mp-products-list .product-item,
    .modern-products-list .product-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ========================================
   7. REMOVE ALL SCROLL-RELATED PROPERTIES
   ======================================== */

/* Remove scroll behavior */
.mp-products-list,
.modern-products-list,
#mpProductsList {
    scroll-behavior: auto !important;
    overscroll-behavior: none !important;
}

/* ========================================
   8. ENSURE NATURAL FLOW
   ======================================== */

/* Products list container - ensure proper display */
.mp-products-section .col-lg-7,
.mp-products-section .col-xl-5,
.mp-products-section .col-md-12,
.modern-products-section .col-lg-7,
.modern-products-section .col-xl-5,
.modern-products-section .col-md-12 {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    position: relative !important;
}

/* ========================================
   9. FIX PRODUCT ITEMS SPACING & VISIBILITY
   ======================================== */

/* Ensure proper spacing between items */
.mp-products-list .product-item,
.modern-products-list .product-item {
    margin-bottom: 0 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
}

/* Force all product items to be visible - no hiding */
.mp-products-list .product-item:nth-child(n),
.modern-products-list .product-item:nth-child(n),
#mpProductsList .product-item:nth-child(n) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
}

/* ========================================
   10. ENSURE ALL 7 PRODUCTS ARE VISIBLE
   ======================================== */

/* Make sure no products are hidden by CSS */
.mp-products-list,
.modern-products-list,
#mpProductsList {
    /* Ensure container shows all children */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
}

/* All product items must be visible */
.mp-products-list > div,
.modern-products-list > div,
#mpProductsList > div {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
}

/* ========================================
   11. FINAL OVERRIDES - REMOVE SCROLLBARS
   ======================================== */

/* Force remove any remaining scroll */
.mp-products-section *,
.modern-products-section * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.mp-products-section *::-webkit-scrollbar,
.modern-products-section *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* But keep the list container visible */
.mp-products-list,
.modern-products-list,
#mpProductsList {
    display: flex !important;
    visibility: visible !important;
}