@keyframes animated-product-hover-div {
            from {
                transform: translateY(50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        @keyframes animated-product-hover-div-color {
            from {
                transform: translateY(10px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }        

        .product-card {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease-in-out;
        }
        .product-img {
            width: 100%;
            display: block;
            transition: all 0.3s ease-in-out;
        }
        .hover-boxP {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0px;
            display: flex;
            justify-content: space-between;
            opacity: 0;
            transition: all 0.3s ease-in-out;
        }

        .product-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
        }
        .product-info span {
            font-size: 11px;
        }

        .like-icon {
            font-size: 1.5rem;
            cursor: pointer;
            color: gray;
        }
        .like-icon:hover {
            color: red;
        }
        .btn-add {
            font-size: 0.7em;
            padding: 0px 10px;
            border-radius: 0px !important;
        }
        .card.product-card .form-select {
            font-size: 10px;
            padding: 5px;
            border-radius: 0px;
        }
        .product-price {
            font-size: 0.8em;
            font-weight: bold;
            margin: -8px 11px 0px;
        }
        .color-product {
                display: flex;
                justify-content: center;
                opacity:0;
                margin-bottom:10px;
            }

    .color-option-p {
        margin: 0 2px;
    }

.color-option-p input {
    display: none;
}

.color-option-p label {
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid transparent;
    transition: 0.3s;
}

.color-option-p input:checked + label {
    border-color: black;
}
        .product-card:hover .hover-boxP {
             animation: animated-product-hover-div 0.5s ease-out forwards;
        }
        .product-card:hover ~ .color-product  {
             animation: animated-product-hover-div-color 0.5s ease-out forwards;
        }
        
        
        
        .productCart-custom-select {
            position: relative;
        }
        
        .productCart-select.active .productCart-options {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .productCart-select-box {
            background: #f9f9f9;
            padding: 2px 10px;
            cursor: pointer;
            text-align: center;
        }
        
        .productCart-options {
            position: absolute;
            bottom: 100%; /* باز شدن به سمت بالا */
            left: 0;
            width: 100%;
            background: #fff;
            border:1px solid #ccc;
            border-radius: 0px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease-in-out;
        }
        
  
        
        .productCart-option {
            padding: 2px 10px;
            cursor: pointer;
        }
        
        .productCart-option:hover {
            background: #f0f0f0;
        }
        
        
        .hover-boxP .productCart-select , .hover-boxP .btn-add {
            flex-basis: 50%;
        }