#compare {
    margin-top: 30px;
    overflow: hidden
}

#compare .product__slider-slider {
    & .compare--slider {
    }

    &[class*="-fixed"] {
        & {
            top: 0;
            left: 0;
            background: var(--color-white);
            z-index: 1001;
            gap: 0;
            width: 50%;
            padding: 0 10px;
            border-right: 1px solid var(--color-gray2)
        }

        .compare--right & {
            left: 50%
        }

        @media screen and (min-width: 992px) {
            & {
                width:100%
            }
        }

        & .compare--slider {
            max-width: calc(var(--max-width) - 2 * var(--container_pad));
            padding: 10px 0
        }

        & .slider-fraction {
            & {
                font-size: var(--font-size-small);
                margin-top: 10px;
            }

            & .fraction-dots {
            }
        }

        & .card {
            & {
                background: transparent;
                color: var(--color-dark)
            }

            &:after {
                content: '';
                top: 0;
                right: -10px;
                width: 1px;
                height: 100%;
                background: var(--color-gray2);
                position: absolute
            }

            & .card__column {
                gap: 5px
            }

            & .card__img {
                & {
                    width: 90px;
                    aspect-ratio: 1;
                    margin: 0 auto;
                }

                & img {
                    max-width: 95%;
                    max-height: 95%
                }
            }

            & .card__status, & .card__item-tags {
                display: none!important
            }

            & .card__title {
            }

            & [data-cart] {
                & {
                    filter: brightness(.75) invert(1)
                }
            }
        }
    }
}

#compare .compare-tabs-slider {
    margin-bottom: 30px
}

#compare .compare-tabs .nav-tabs {
    border: 0
}

#compare .compare-tabs .nav-item {
    width: auto;
    --bs-nav-tabs-link-hover-border-color: transparent;
    --bs-nav-tabs-border-radius: 0;
    --bs-nav-tabs-link-active-bg: transparent;
    --bs-nav-tabs-link-active-border-color: transparent;
    --bs-nav-tabs-border-width: 0 0 2px;
    --bs-nav-tabs-border-color: transparent;
    --bs-nav-tabs-link-active-color: var(--color-white);
    border: 0;
    margin: 0;
    position: relative;
    outline: 0
}

#compare .compare-tabs .nav-item:not(:first-of-type):after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 100%;
    width: 17px;
    height: 2px;
    background: var(--color-dark)
}

#compare .compare-tabs .nav-item.active {
    border-color: var(--color-main)
}

#compare .compare-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 0 5px;
    border-bottom: 2px solid var(--color-dark);
    border-radius: 0;
    box-shadow: none;
    text-transform: uppercase;
    color: var(--color-gray)
}

#compare .compare-tabs .nav-link:hover {
    color: var(--color-gray2)
}

#compare .compare-tabs .nav-link.active {
    border-color: var(--color-gray2);
    color: var(--color-gray2)
}

#compare .compare-tabs .nav-link span {
    width: 17px;
    aspect-ratio: 1;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: var(--radius-circle);
    background: var(--color-green);
    font-size: var(--font-size-small);
    color: var(--color-gray2);
    font-weight: 700
}

#compare .compare--actions {
    margin-bottom: 30px;
    gap: 20px;
    color: var(--color-gray);
    font-size: var(--font-size-price)
}

#compare .compare--actions label {
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    transition: var(--hover-opacity)
}

#compare .compare--actions label:hover {
    color: var(--color-gray2)
}

#compare .compare--actions label:before {
    content: '';
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-main);
    vertical-align: middle;
    transition: var(--duration-fast) background ease
}

#compare .compare--actions input:checked + label:before {
    background: var(--color-main);
    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M8.22959 14.7568L5.21523 11.78744L4.21045 12.7772L8.22959 16.7364L16.842 8.25248L15.8372 7.2627L8.22959 14.7568Z" fill="%23333"%3E%3C/path%3E%3C/svg%3E')
}

#compare .compare-clear {
    display: inline-flex;
    align-items: center;
    background: none;
    gap: 5px;
    color: inherit;
    line-height: 1;
}

#compare .compare--actions input:disabled + label {
    opacity: .5
}

#compare .compare-clear:hover {
    color: var(--color-gray2)
}

#compare .card:hover {
    box-shadow: none;
    transform: none
}

#compare .content__empty {
    margin-bottom: 80px
}

#compare .content__empty p {
    margin-bottom: 40px;
    color: var(--color-gray2);
    font-size: var(--font-size-price)
}

#compare .content__empty i {
    width: 30px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    filter: none;
    margin-left: 5px
}

@media screen and (max-width: 992px) {
    #compare {
        margin-top:20px
    }

    #compare .compare-tabs-slider,#compare .compare--actions {
        margin-bottom: 20px;
        font-size: var(--font-size-body)
    }

    #compare .compare-tabs-slider {
        width: calc(100% + var(--container_pad))
    }

    #compare .content__empty {
        margin-bottom: 40px
    }

    #compare .content__empty p {
        margin-bottom: 20px
    }
}