<!-- MODAL AREA START (Quick View Modal) -->
<div class="ltn__modal-area ltn__quick-view-modal-area">
    <div class="modal fade" id="quick_view_modal" tabindex="-1">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        <!-- <i class="fas fa-times"></i> -->
                    </button>
                </div>
                <div class="modal-body">
                    <div class="ltn__quick-view-modal-inner">
                        <div class="modal-product-item">
                            <div class="row">
                                <div class="col-lg-6 col-12">
                                    <div class="modal-product-img">
                                        <img src="{{'assets/img/product/4.png'|theme}}" alt="#">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-12">
                                    <div class="modal-product-info shop-details-info pl-0">
                                        <h3>Pink Flower Tree Red</h3>
                                        <div class="product-price-ratting mb-20">
                                            <ul>
                                                <li>
                                                    <div class="product-price">
                                                        <span>$49.00</span>
                                                        <del>$65.00</del>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="product-ratting">
                                                        <ul>
                                                            <li><a href="index.html#"><i class="icon-star"></i></a></li>
                                                            <li><a href="index.html#"><i class="icon-star"></i></a></li>
                                                            <li><a href="index.html#"><i class="icon-star"></i></a></li>
                                                            <li><a href="index.html#"><i class="icon-star"></i></a></li>
                                                            <li><a href="index.html#"><i class="icon-star"></i></a></li>
                                                            <li class="review-total"> <a href="index.html#"> (
                                                                    95 Reviews )</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="modal-product-brief">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                                Dignissimos repellendus repudiandae incidunt quidem pariatur
                                                expedita, quo quis modi tempore non.</p>
                                        </div>
                                        <div class="modal-product-meta ltn__product-details-menu-1 mb-20">
                                            <ul>
                                                <li>
                                                    <div class="ltn__color-widget clearfix">
                                                        <strong class="d-meta-title">Color</strong>
                                                        <ul>
                                                            <li class="theme"><a href="index.html#"></a></li>
                                                            <li class="green-2"><a href="index.html#"></a></li>
                                                            <li class="blue-2"><a href="index.html#"></a></li>
                                                            <li class="white"><a href="index.html#"></a></li>
                                                            <li class="red"><a href="index.html#"></a></li>
                                                            <li class="yellow"><a href="index.html#"></a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="ltn__size-widget clearfix mt-25">
                                                        <strong class="d-meta-title">Size</strong>
                                                        <ul>
                                                            <li><a href="index.html#">S</a></li>
                                                            <li><a href="index.html#">M</a></li>
                                                            <li><a href="index.html#">L</a></li>
                                                            <li><a href="index.html#">XL</a></li>
                                                            <li><a href="index.html#">XXL</a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="ltn__product-details-menu-2 product-cart-wishlist-btn mb-30">
                                            <ul>
                                                <li>
                                                    <div class="cart-plus-minus">
                                                        <input type="text" value="02" name="qtybutton"
                                                            class="cart-plus-minus-box">
                                                    </div>
                                                </li>
                                                <li>
                                                    <a href="index.html#"
                                                        class="theme-btn-1 btn btn-effect-1 d-add-to-cart"
                                                        title="Add to Cart" data-bs-toggle="modal"
                                                        data-bs-target="#add_to_cart_modal">
                                                        <span>ADD TO CART</span>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="index.html#" class="btn btn-effect-1 d-add-to-wishlist"
                                                        title="Add to Cart" data-bs-toggle="modal"
                                                        data-bs-target="#liton_wishlist_modal">
                                                        <i class="icon-heart"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="ltn__social-media mb-30">
                                            <ul>
                                                <li class="d-meta-title">Share:</li>
                                                <li><a href="index.html#" title="Facebook"><i
                                                            class="icon-social-facebook"></i></a></li>
                                                <li><a href="index.html#" title="Twitter"><i
                                                            class="icon-social-twitter"></i></a></li>
                                                <li><a href="index.html#" title="Pinterest"><i
                                                            class="icon-social-pinterest"></i></a></li>
                                                <li><a href="index.html#" title="Instagram"><i
                                                            class="icon-social-instagram"></i></a></li>

                                            </ul>
                                        </div>
                                        <div class="modal-product-meta ltn__product-details-menu-1 mb-30 d-none">
                                            <ul>
                                                <li><strong>SKU:</strong> <span>12345</span></li>
                                                <li>
                                                    <strong>Categories:</strong>
                                                    <span>
                                                        <a href="index.html#">Flower</a>
                                                    </span>
                                                </li>
                                                <li>
                                                    <strong>Tags:</strong>
                                                    <span>
                                                        <a href="index.html#">Love</a>
                                                        <a href="index.html#">Flower</a>
                                                        <a href="index.html#">Heart</a>
                                                    </span>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="ltn__safe-checkout d-none">
                                            <h5>Guaranteed Safe Checkout</h5>
                                            <img src="{{'assets/img/icons/payment-2.png'|theme}}" alt="Payment Image">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- MODAL AREA END -->

<!-- MODAL AREA START (Add To Cart Modal) -->
<div class="ltn__modal-area ltn__add-to-cart-modal-area">
    <div class="modal fade" id="add_to_cart_modal" tabindex="-1">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="ltn__quick-view-modal-inner">
                        <div class="modal-product-item">
                            <div class="row">
                                <div class="col-12">
                                    <div class="modal-add-to-cart-content clearfix">
                                        <div class="modal-product-img">
                                            <img src="{{'assets/img/product/1.png'|theme}}" alt="#">
                                        </div>
                                        <div class="modal-product-info">
                                            <h5><a href="product-details.html">Heart's Desire</a></h5>
                                            <p class="added-cart"><i class="fa fa-check-circle"></i>
                                                Successfully added to your Cart</p>
                                            <div class="btn-wrapper">
                                                <a href="cart.html" class="theme-btn-1 btn btn-effect-1">View
                                                    Cart</a>
                                                <a href="checkout.html"
                                                    class="theme-btn-2 btn btn-effect-2">Checkout</a>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- additional-info -->
                                    <div class="additional-info d-none--">
                                        <p>We want to give you <b>10% discount</b> for your first order, <br>
                                            Use (fiama10) discount code at checkout</p>
                                        <div class="payment-method">
                                            <img src="{{'assets/img/icons/payment.png'|theme}}" alt="#">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- MODAL AREA END -->

<!-- MODAL AREA START (Wishlist Modal) -->
<div class="ltn__modal-area ltn__add-to-cart-modal-area">
    <div class="modal fade" id="liton_wishlist_modal" tabindex="-1">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="ltn__quick-view-modal-inner">
                        <div class="modal-product-item">
                            <div class="row">
                                <div class="col-12">
                                    <div class="modal-product-img">
                                        <img src="{{'assets/img/product/7.png'|theme}}" alt="#">
                                    </div>
                                    <div class="modal-product-info">
                                        <h5><a href="product-details.html">Brake Conversion Kit</a></h5>
                                        <p class="added-cart"><i class="fa fa-check-circle"></i> Successfully
                                            added to your Wishlist</p>
                                        <div class="btn-wrapper">
                                            <a href="wishlist.html" class="theme-btn-1 btn btn-effect-1">View
                                                Wishlist</a>
                                        </div>
                                    </div>
                                    <!-- additional-info -->
                                    <div class="additional-info d-none">
                                        <p>We want to give you <b>10% discount</b> for your first order, <br>
                                            Use discount code at checkout</p>
                                        <div class="payment-method">
                                            <img src="{{'assets/img/icons/payment.png'|theme}}" alt="#">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- MODAL AREA END -->
