﻿.single-products-box {
    position: relative;
    margin-bottom: 30px;
    -webkit-transition: .5s;
    transition: .5s
}

    .single-products-box .products-image {
        text-align: center;
        position: relative;
        overflow: hidden
    }

        .single-products-box .products-image a {
            position: relative;
            display: block
        }

            .single-products-box .products-image a img {
                -webkit-transition: .5s;
                transition: .5s
            }

    .single-products-box .products-content {
        margin-top: 20px;
        position: relative
    }

        .single-products-box .products-content h3 {
            margin-bottom: 0;
            font-size: 25px
        }

            .single-products-box .products-content h3 a {
                display: inline-block;
                color: #202647
            }

                .single-products-box .products-content h3 a:hover {
                    color: #f64c67
                }

        .single-products-box .products-content h5 {
            font-size: 18px;
            font-weight:400;
            margin-bottom: 10px;
        }

            .single-products-box .products-content h5 a {
                display: inline-block;
                color: #202647;
                text-decoration: none;
            }

                .single-products-box .products-content h5 a:hover {
                    color: #f64c67
                }

        .single-products-box .products-content .price {
            margin-top: 15px;
            -webkit-transition: .5s;
            transition: .5s;
            font-weight: 600;
            color: #f64c67
        }

            .single-products-box .products-content .price .old-price {
                text-decoration: line-through;
                color: #999;
                font-weight: 500
            }

        .single-products-box .products-content .star-rating {
            position: absolute;
            left: 0;
            bottom: 0;
            color: #f49f0b
        }

            .single-products-box .products-content .star-rating i {
                display: inline-block;
                margin-right: -2px
            }

        /* Price Wrapper Layout */
        .single-products-box .products-content .price-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-top: 10px;
            gap: 10px;
        }

        .single-products-box .products-content .price {
            margin: 0;
            text-align: right;
            flex-shrink: 0;
        }

        .single-products-box .products-content .add-to-cart {
            text-transform: capitalize;
            -webkit-transition: .5s;
            transition: .5s;
            display: inline-block;
            font-weight: 600;
            font-size: 15px;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            flex-shrink: 0;
            white-space: nowrap;
            text-decoration: none;
        }

            .single-products-box .products-content .add-to-cart:hover {
                color: #f64c67
            }

            /* Disabled/Processing state for add-to-cart button */
            .single-products-box .products-content .add-to-cart:disabled,
            .single-products-box .products-content .add-to-cart.processing {
                opacity: 0.5;
                cursor: not-allowed;
                pointer-events: none;
                color: #999;
            }

            /* Spinner animation for processing state */
            .single-products-box .products-content .add-to-cart.processing {
                position: relative;
                padding-right: 20px;
            }

                .single-products-box .products-content .add-to-cart.processing::after {
                    content: '';
                    position: absolute;
                    width: 14px;
                    height: 14px;
                    margin-right: 8px;
                    border: 2px solid #f64c67;
                    border-top-color: transparent;
                    border-radius: 50%;
                    animation: button-spinner 0.6s linear infinite;
                    top: 50%;
                    right: 0;
                    transform: translateY(-50%);
                }

@keyframes button-spinner {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}
