

#product-cats {
    --lighter-gray3: #f1f1f1;
    background: var(--lighter-gray3);
    padding: 40px 0;
}

#product-cats .button-next,
#product-cats .button-prev {
    border-color: #e3e3e3;
    background: #fff url(../../images/redesign/child-category/arr.svg) no-repeat center;
    width: 30px;
    height: 30px;
    top: 50%;
    margin-top: -44px;
    z-index: 8;
}

#product-cats .button-next.swiper-button-disabled,
#product-cats .button-prev.swiper-button-disabled {
    display: none !important;
}

#product-cats .button-prev {
    transform: scale(-1);
}

#product-cats .button-prev {
    left: 15px;
    outline: none;
}

#product-cats .button-next {
    right: 15px;
    outline: none;
}

#product-cats .swiper-container {
    width: 1137px;
}

#product-cats a .image {
}

#product-cats a img {
    max-height: 100%;
}

#product-cats a:hover {
    box-shadow: none;
}

#product-cats a span {
    text-transform: lowercase;
    font-size: 14px;
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid var(--lighter-gray3);
}

#product-cats a:hover span{

    border-color: var(--orange);
}
#product-cats a span::first-letter {
    text-transform: uppercase;
}

@media screen and (max-width: 567px) {

    #product-cats.one-row .image {
        width: 115px;
    }

    #product-cats .swiper-slide {
        padding: 0;
    }

    #product-cats.one-row .image {
        width: 104px;
        height: 104px;
        line-height: 1;
        padding: 0;
    }

    #product-cats.one-row a {
        width: 134px;
        height: auto;
    }

    #product-cats.low-padding>div {
        padding: 0;
    }

    #product-cats a img {
        height: 104px;
        width: 100%;
        margin-left: 0;
    }

    #product-cats.two-row p,
    #product-cats.one-row p {
        font-size: 12px;
        line-height: 14px;
        font-weight: 400;
    }

    #product-cats .button-next,
    #product-cats .button-prev {
        display: none;
    }
}