.scroll-wrapper {
    position: relative;
}

.category-scroll-container {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    scroll-behavior: smooth;
    transition: transform 0.3s ease-in-out;
}

.category-item {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 0.5rem;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    font-size: 2rem;
    padding: 0.25rem 0.75rem;
    cursor: pointer;
}

.scroll-left {
    left: 0;
}

.scroll-right {
    right: 0;
}

/* Responsive: On small screens, stack items vertically */
@media (max-width: 767.98px) {
    .category-scroll-container {
        flex-direction: column;
        overflow: visible;
    }

    .category-item {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0.5rem 0;
    }

    .scroll-btn {
        display: none;
    }
}