<style>
    [x-cloak] {
        display: none !important;
    }

    .no-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .no-scrollbar {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
</style>

<section x-data="productCompare()">

    <div class="grid grid-cols-1 divide-y">
        {% for item in versus_products %}
        {% include "templates/components/versus/cards/product-card.twig" %}
        {% endfor %}
    </div>



    {% include "templates/components/versus/partials/versus-drawer.twig" %}

    {% include "templates/components/versus/partials/modal-alert.twig" %}


</section>


{% include "templates/components/versus/partials/versus-script.twig" %}