<div class="recommend-product-popup-wrapper">
    <div class="recommend-product-popup">
        <span class="recommend-product-close">
            <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1.5"  stroke-linecap="round"  stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
        </span>
        <div class="recommend-product-title">{{ __("You might also like...") }}</div>
        <div class="recommend-product-subtitle">{{ __("Based on your cart, here's what we recommend") }}</div>
        <div class="recommend-product-list swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide recommend-product-item">
                    <div class="recommend-product-item-wrapper">
                        <a class="recommend-product-item-img " href="">
                            <img src="https://cdn.printerval.com/unsafe/540x540/assets.printerval.com/2023/03/08/64082ed3f15ff3.62951011.jpg" alt="@Copyright Printerval" referrerpolicy="no-referrer">
                        </a>    
                        <div class="recommend-product-info">
                            <a class="recommend-product-item-link " href="">
                                Vintage Marlboro Cowboy Wild West  Shirt
                            </a>
                            <div class="recommend-product-price">
                                <b>$17.95</b>
                                <del>$35.90</del>
                            </div>
                        </div>                                                    
                    </div>
                </div> 
                <div class="swiper-slide recommend-product-item">
                    <div class="recommend-product-item-wrapp">
                        <a class="recommend-product-item-img " href="">
                            <img src="https://cdn.printerval.com/unsafe/540x540/assets.printerval.com/2023/03/08/64082ed3f15ff3.62951011.jpg" alt="@Copyright Printerval" referrerpolicy="no-referrer">
                        </a>    
                        <div class="recommend-product-info">
                            <a class="recommend-product-item-link " href="">
                                Vintage Marlboro Cowboy Wild West  Shirt
                            </a>
                            <div class="recommend-product-price">
                                <b>$17.95</b>
                                <del>$35.90</del>
                            </div>
                        </div>                                                    
                    </div>
                </div> 
                <div class="swiper-slide recommend-product-item">
                    <div class="recommend-product-item-wrapp">
                        <a class="recommend-product-item-img " href="">
                            <img src="https://cdn.printerval.com/unsafe/540x540/assets.printerval.com/2023/03/08/64082ed3f15ff3.62951011.jpg" alt="@Copyright Printerval" referrerpolicy="no-referrer">
                        </a>    
                        <div class="recommend-product-info">
                            <a class="recommend-product-item-link " href="">
                                Vintage Marlboro Cowboy Wild West  Shirt
                            </a>
                            <div class="recommend-product-price">
                                <b>$17.95</b>
                                <del>$35.90</del>
                            </div>
                        </div>                                                    
                    </div>
                </div> 
                <div class="swiper-slide recommend-product-item">
                    <div class="recommend-product-item-wrapp">
                        <a class="recommend-product-item-img " href="">
                            <img src="https://cdn.printerval.com/unsafe/540x540/assets.printerval.com/2023/03/08/64082ed3f15ff3.62951011.jpg" alt="@Copyright Printerval" referrerpolicy="no-referrer">
                        </a>    
                        <div class="recommend-product-info">
                            <a class="recommend-product-item-link " href="">
                                Vintage Marlboro Cowboy Wild West  Shirt
                            </a>
                            <div class="recommend-product-price">
                                <b>$17.95</b>
                                <del>$35.90</del>
                            </div>
                        </div>                                                    
                    </div>
                </div> 
                <div class="swiper-slide recommend-product-item">
                    <div class="recommend-product-item-wrapp">
                        <a class="recommend-product-item-img " href="">
                            <img src="https://cdn.printerval.com/unsafe/540x540/assets.printerval.com/2023/03/08/64082ed3f15ff3.62951011.jpg" alt="@Copyright Printerval" referrerpolicy="no-referrer">
                        </a>    
                        <div class="recommend-product-info">
                            <a class="recommend-product-item-link " href="">
                                Vintage Marlboro Cowboy Wild West  Shirt
                            </a>
                            <div class="recommend-product-price">
                                <b>$17.95</b>
                                <del>$35.90</del>
                            </div>
                        </div>                                                    
                    </div>
                </div> 
                 
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
    </div>
    <div class="recommend-product-bg"></div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    new Swiper('.recommend-product-list.swiper-container', {
        slidesPerView: 4,
        spaceBetween: 16,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        breakpoints: {
            0: {
                slidesPerView: 1,
                spaceBetween: 0,
            },
            768: {
                slidesPerView: 2,
                spaceBetween: 16,
            },
            1024: {
                slidesPerView: 4,
                spaceBetween: 16,
            }
        }
    });

    document.querySelectorAll('.recommend-product-bg, .recommend-product-close').forEach(function(el) {
        el.addEventListener('click', function() {
            var wrapper = document.querySelector('.recommend-product-popup-wrapper');
            if (wrapper) wrapper.style.display = 'none';
        });
    });
});
</script>