.similar-products{
    padding-bottom: 40px;
    & h2{
        margin-bottom: 40px;
    }
}

.similar-products__carousel{
    display: flex;
    flex-wrap: nowrap;
    overflow: visible auto;
    scrollbar-width: 0;
    scroll-snap-type: x mandatory;    
    padding-bottom: 40px;
    gap: 20px;
    &::-webkit-scrollbar{display: none;}
    & h3{
        font-size: 1.8rem;
        line-height: 2.4rem;
        font-weight: 500;
    }
    & img{
        object-fit: contain;
    }
    & > article{
        background-color: white;
        border-radius: 10px;
        padding: 10px;
        scroll-snap-align: start;
        width: 350px;
        flex-shrink: 0;
        & > a{
            display: block;
            width: 100%;
            color: black;
        }        
        &:hover .products__item-action{
            position: relative;
            opacity: 1;
            visibility: visible;
            transform: translate(0, 0);
        }
    }
}

.similar-products__price{
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    & ins{
        text-decoration: none;
    }
    & del{
        font-size: 1.35rem;
        font-weight: 400;
        text-decoration-color: #F45656;
        text-decoration-thickness: 2px;
        margin-left: 1rem;
    }
}

.similar-products__wrapper{
    position: relative;
    & > button{
        --size: 50px;
        display: grid;
        place-content: center;
        width: var(--size);
        height: var(--size);
        font-size: 40px;
        font-weight: 700;
        position: absolute;
        top: calc(50% - var(--size) / 2);
        border-radius: 100vw;
        background: var(--theme-primary-color);
        color: #fff;
        transition: 300ms ease;
        &:hover{
            filter: brightness(1.2);
        }
        &[disabled]{
            opacity: .5;
            cursor: not-allowed;
        }
        & span{
            margin-top: -10px;
        }
        &.similar-products__arrow--prev{
            left: calc(var(--size) / 2 * -1);
        }
        &.similar-products__arrow--next{
            right: calc(var(--size) / 2 * -1);
        }        
    }
}

@media screen and (max-width: 992px){
    .similar-products__carousel article{
        width: 300px;
    }
    .similar-products__wrapper > button{        
        font-size: 40px !important;
        &.similar-products__arrow--prev{
            left: 0;
        }
        &.similar-products__arrow--next{
            right: 0;
        }        
    }
}