.scroll-btn {
    user-select: none;
}

    .scroll-btn.side {
        width: 50px;
        border: none;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        /* ✅ THIS makes them match card height */
        align-self: stretch;
        margin: 0 5px;
        height: auto;
        background: rgba(0,0,0,0.15);
        transition: background 0.2s ease;
    }

        .scroll-btn.side:hover {
            background: rgba(0,0,0,0.35);
        }

.position-relative:hover .scroll-btn {
    opacity: 1;
}


#cardScroll {
    scrollbar-width: none;
}

    /* 🔥 THIS FIXES YOUR ORIGINAL PROBLEM */
    #cardScroll > .col-3 {
        flex: 0 0 auto;
    }

    /* Optional: cleaner look */
    #cardScroll::-webkit-scrollbar {
        display: none;
    }

#cardScrollWrapper {
    min-width: 0; /* ✅ prevents flex overflow bugs */
}