/*
 * ---------------------------------------------------------------
 * Copyright © psdevsolution.com - All Rights Reserved.
 * ---------------------------------------------------------------
 */

.product-item {}

.product-item .product-img {
    border-radius: 10px;
    -webkit-transition: .3s ease;
    -o-transition: .3s ease;
    transition: .3s ease;
}

.product-item .product-img img {
    width: 100%;
    aspect-ratio: 4 / 4;
    object-fit: cover;
    border-radius: 10px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.product-item:hover .product-img {
    -webkit-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
}

.product-item:hover .product-img img {
    opacity: .8;
}

.product-item .product-img i {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    font-size: 45px;
    color: var(--bs-primary);
    line-height: 0;
    padding: 15px;
    background: rgba(var(--bs-primary-rgb), .6);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -webkit-transform: translate(-50%, -50%) scale(0);
    transform: translate(-50%, -50%) scale(0);
    transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.product-item:hover .product-img i {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
    transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.product-item .product-img i::before{
    position: relative;
    display: block;
    content: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%20fill%3D%22%23fbebd0%22%3E%3Cpath%20d%3D%22M226.5%2092.9c14.3%2042.9-.3%2086.2-32.6%2096.8s-70.1-15.6-84.4-58.5s.3-86.2%2032.6-96.8s70.1%2015.6%2084.4%2058.5zM100.4%20198.6c18.9%2032.4%2014.3%2070.1-10.2%2084.1s-59.7-.9-78.5-33.3S-2.7%20179.3%2021.8%20165.3s59.7%20.9%2078.5%2033.3zM69.2%20401.2C121.6%20259.9%20214.7%20224%20256%20224s134.4%2035.9%20186.8%20177.2c3.6%209.7%205.2%2020.1%205.2%2030.5l0%201.6c0%2025.8-20.9%2046.7-46.7%2046.7c-11.5%200-22.9-1.4-34-4.2l-88-22c-15.3-3.8-31.3-3.8-46.6%200l-88%2022c-11.1%202.8-22.5%204.2-34%204.2C84.9%20480%2064%20459.1%2064%20433.3l0-1.6c0-10.4%201.6-20.8%205.2-30.5zM421.8%20282.7c-24.5-14-29.1-51.7-10.2-84.1s54-47.3%2078.5-33.3s29.1%2051.7%2010.2%2084.1s-54%2047.3-78.5%2033.3zM310.1%20189.7c-32.3-10.6-46.9-53.9-32.6-96.8s52.1-69.1%2084.4-58.5s46.9%2053.9%2032.6%2096.8s-52.1%2069.1-84.4%2058.5z%22%2F%3E%3C%2Fsvg%3E');
    width: 40px;
    height: 40px;
}

.product-item .product-title {
    font-size: 18px;
    font-weight: 400;
    color: var(--bs-body-color);
    -webkit-transition: .3s;
    transition: .3s;
}

.product-item:hover .product-title {
    color: var(--bs-primary);
}

.product-item .product-price {
    font-size: 18px;
    font-weight: 400;
    color: var(--bs-body-color);
}

@media (max-width: 767.5px) {

    .product-item .product-title {
        font-size: 16px;
    }

    .product-item .product-price {
        font-size: 16px;
    }

}

/*
 * ---------------------------------------------------------------
 * Copyright © psdevsolution.com - All Rights Reserved.
 * ---------------------------------------------------------------
 */