.product .card {
    transition: transform 0.2s ease;
    display: inline-block;
    background-color: transparent;
    border: none;
    height: 100%;
}

    .product .card::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        transition: transform 250ms;
        border: 1px solid rgba(0, 0, 0, 0.175);
        cursor: pointer;
    }

    .product .card.active::after {
        border-top: 0.5rem solid var(--sg-primary);
        transform: scaleY(1.1);
    }

    .product .card.active:hover::after {
        background-color: var( --sg-primary);
        border-top: 0.5rem solid #1F1F1F;
        color: #FFFFFF;
        cursor: pointer;
    }

    .product .card.active:hover .product-card-head-title {
        color: #FFFFFF !important;
    }

    .product .card.active:hover .product-card-body {
        color: #FFFFFF;
    }

    .product .card.active:hover .btn {
        color: var(--sg-font-color);
        background-color: #FFFFFF;
    }

    .product .card:not(.active) {
        position: relative;
    }

        .product .card:not(.active)::after {
            border-top: 0.5rem solid #1F1F1F;
        }

        .product .card:not(.active):hover::after {
            border-top: 0.5rem solid var(--sg-primary);
            transform: scaleY(1.1);
        }

        .product .card:not(.active):hover .product-card-head-title {
            color: var( --sg-primary) !important;
        }

    .product .card:hover .btn {
        color: #FFFFFF;
        background-color: var( --sg-primary);
    }

.product .product-img {
    height: 40px;
    width: auto;
}

.product-card-body {
    font-size: 0.85rem;
    font-family: var(--sg-font-family-regular);
    color: #141414;
    margin: 2rem 0.5rem;
}

.product-card-head-title {
    font-family: var(--sg-heading-font-family-bold);
}

.product-list-img {
    height: 250px;
    padding-top: 1rem;
}

.product-img-hover {
    display: none;
}

.product .card:hover .product-img-black {
    display: none;
}

.product .card:hover .product-img-hover {
    display: inline;
}