.product-payment-methods {
    display: none;
}

.product-payment-mobile-inline {
    display: none;
}

@media (min-width: 992px) {
    .product-payment-methods {
        direction: rtl;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        width: 100%;
        height: 40px;
        margin-top: 7px;
        padding: 6px 10px 5px;
        border-top: 1px solid #edf0f3;
    }

    .product-payment-method {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        opacity: .58;
        filter: grayscale(1) saturate(0) contrast(.86);
        animation: productPaymentReveal 12s ease-in-out infinite;
        transition: filter .18s ease, opacity .18s ease, transform .18s ease;
    }

    .product-payment-method:nth-child(2) {
        animation-delay: 3s;
    }

    .product-payment-method:nth-child(3) {
        animation-delay: 6s;
    }

    .product-payment-method:nth-child(4) {
        animation-delay: 9s;
    }

    .product-payment-method img,
    .product-payment-method svg {
        display: block;
        width: 25px;
        height: 25px;
        object-fit: contain;
    }

    .product-payment-method--online {
        filter: none;
    }

    .product-payment-method--online svg {
        fill: none;
        stroke: #7f8b99;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
        animation: productPaymentCardReveal 12s ease-in-out infinite;
        transition: stroke .18s ease;
    }
}

@keyframes productPaymentReveal {
    0%, 6%, 26%, 100% {
        opacity: .58;
        filter: grayscale(1) saturate(0) contrast(.86);
    }

    11%, 21% {
        opacity: 1;
        filter: grayscale(0) saturate(1) contrast(1);
    }
}

@keyframes productPaymentCardReveal {
    0%, 6%, 26%, 100% {
        stroke: #7f8b99;
    }

    11%, 21% {
        stroke: #f39c12;
    }
}

@media (min-width: 992px) and (hover: hover) {
    .product-payment-method:hover {
        animation-play-state: paused;
        opacity: 1;
        filter: none !important;
        transform: translateY(-1px);
    }

    .product-payment-method--online:hover svg {
        animation-play-state: paused;
        stroke: #f39c12 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-payment-method,
    .product-payment-method--online svg {
        animation: none;
    }
}

@media (max-width: 767px) {
    .content-main .product-page .desc-product .options-product > #AddToCart {
        margin-bottom: 5px;
    }

    .content-main .product-page .desc-product .options-product > #CartInline:not(.hidden) {
        margin-bottom: 5px;
    }

    .product-payment-mobile-inline {
        box-sizing: border-box;
        direction: rtl;
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 4px;
        height: 38px;
        margin: 0;
        padding: 3px 12px 2px;
        border: 1px solid #e7ebef;
        border-radius: 9px;
        background: #f5f6f7;
        box-shadow: none;
    }

    .product-payment-mobile-inline--purchase {
        clear: both;
        float: none;
        width: calc(100% + 30px) !important;
        margin-right: -15px;
        margin-left: -15px;
        margin-bottom: 5px;
    }

    .product-payment-mobile-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 32px;
        opacity: 1;
        filter: none;
    }

    .product-payment-mobile-logo img,
    .product-payment-mobile-logo svg {
        display: block;
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .product-payment-mobile-logo small {
        display: block;
        margin-top: 2px;
        color: #59636e;
        font-size: 7px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
    }

    .product-payment-mobile-logo--online {
        filter: none;
    }

    .product-payment-mobile-logo--online svg {
        fill: none;
        stroke: #f39c12;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}