/* Category Slider CSS */
.kohler-category-slider-container {
    position: relative;
    padding: 0 40px;
    /* Space for arrows */
}

.kohler-cat-slide {
    text-align: left;
    overflow: hidden;
    transition: all 0.3s ease;
}

.kohler-cat-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: black;
}

.kohler-cat-link:hover .kohler-cat-image-wrapper {

    /* &:after {
        background-color: rgba(0, 0, 0, .4);
    } */

    img {
        transform: scale(1.1);
    }
}

.kohler-cat-image-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;

    /* &:after {
        content: '';
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0);
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 0;
        transition: ease-in-out .25s;
    } */
}

.kohler-cat-image {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transform: scale(1);
    transition: all 0.3s ease;
}

.kohler-cat-title {
    font-size: 20px;
    font-weight: 400;
    width: 100%;
    padding: 10px 15px;
    transition: color 0.3s ease-in-out;
}

/* Active State */
.active-category {
    background-color: white;

    .kohler-cat-image-wrapper {}

    .kohler-cat-title {
        background: var(--e-global-color-primary);
        color: white;
    }
}

/* Navigation Arrows */
.kohler-cat-prev,
.kohler-cat-next {
    /* color: #000; */
    width: 50px;
    height: 50px;
    opacity: 1;
    /* background: #fff; */
    /* border-radius: 50%; */
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */

    svg {

        rect,
        path {
            transition: 0.3s ease-in-out;
        }

        rect {
            fill: white;
            stroke: white;
        }

        path {
            stroke: var(--e-global-color-primary);
        }
    }

    &:hover {

        svg {
            rect {
                fill: var(--e-global-color-primary);
                stroke: var(--e-global-color-primary);
            }

            path {
                stroke: white;
            }
        }
    }

    &.swiper-button-disabled {
        display: none;
    }
}

.kohler-cat-prev:after,
.kohler-cat-next:after {
    display: none;
    /* Hide default swiper arrows */
}

.kohler-cat-prev-icon svg,
.kohler-cat-next-icon svg,
.kohler-cat-prev-icon i,
.kohler-cat-next-icon i {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.kohler-cat-prev {
    left: 0;
}

.kohler-cat-next {
    right: 0;
}

/* Responsive Images */
@media (max-width: 768px) {
    .kohler-cat-title {
        font-size: 14px;
    }
}

/* Grid Layout */
.kohler-category-grid-container {
    display: grid;
    grid-template-columns: repeat(var(--category-grid-columns, 4), 1fr);
    gap: var(--category-grid-gap, 20px);
    width: 100%;
    box-sizing: border-box;
}

.kohler-cat-grid-item {
    width: 100%;
}