Adding POS availability to Product Page via Custom Liquid

[Sjoefke]

Hi,

Can someone help me out? I tried to add the availability of my POS stores on the product page, but unfortunately something goes wrong. I added the following code:

{% assign availability_hilvarenbeek = product.metafields.custom.availability_hilvarenbeek %}
{% assign pos_availability = product.metafields.custom.pos_availability %}
{% assign show_availability_header = false %}

{% if availability_hilvarenbeek > 0 or pos_availability > 0 %}
{% assign show_availability_header = true %}
{% endif %}

{% if show_availability_header %}
<div style="background-color: #f0f0f0; border-radius: 10px; padding: 20px; margin: 20px 0;">
<div style="font-size: 12px; margin-top: 0px; padding-left: 18px;">
<b>Ook in de winkel:</b><br>
{% if availability_hilvarenbeek > 0 %}
⌂ Van Gool Hilvarenbeek: {{ availability_hilvarenbeek }}<br>
{% endif %}
{% if pos_availability > 0 %}
⌂ Padel Club Rotterdam: {{ pos_availability }}<br>
{% endif %}
</div>
{% endif %}

This works perfectly fine:

I added the code via a custom liquid section:

Unfortunately it also creates a lot of blank space underneath the product before the next section and I have no clue why this keeps happening:

Someone who knows what I do wrong?

Thanks!