Customize default_pagination numbers styling

[avocado23]

I am trying to customize the numbers for the default_pagination filter. I need to show a box around the numbers. So for this, I need to create a custom class for the numbers, and change the style in CSS. But I can't figure out how to do it. A bit of help will be much appreciated.

This is my code:

<div class="container">
    {% paginate collection.products by 5 %}
        {% for product in collection.products %}
            <a href="{{ product.url }}"><img src="{{ product.featured_image | img_url: 'medium' }}" alt="{{ product.title }}">
                <figcaption>{{ product.title }} 
                    {% if product.compare_at_price_max > 0 %}
                        <span>{{ product.compare_at_price_max | money }}</span>
                        <span>{{ product.price | money }}</span>
                    {% else %} 
                        <span>{{ product.price | money }}</span>
                    {% endif %}
                </figcaption>
            </a>
        {% endfor %}
    {{ paginate | default_pagination: next: '>', previous: '<' }}   
   {% endpaginate %}
</div>

[LitExtension]

Hi @avocado23,

Please send your site and if your site is password protected, please send me the password. I will check it.