'size' on custom product metafield returns '0' - shopify

Question

I'm building a component which checks the character count of a custom product metafield; if it's above 24 characters, the data is output as an accordion, otherwise the metafield content is printed in its entirety. The conditional below fails as the metafield size always returns 0, but I can see the content printing via the else statement so I'm certain the path is valid:
{% if product.metafields.custom.product_note.size >= 24 %}
<div class="product-note has--dropdown">
<span class="item__heading item__trigger">Product information</span>
<div class="item__content">
{{ product.metafields.custom.product_note }}
</div>
</div>
{% else %}
<div class="product-note">
<div class="item__content">
{{ product.metafields.custom.product_note }}
</div>
</div>
{% endif %}
I'm not sure it's relevant, but the product_note metafield is a multi-line text field. If anyone could point me in the right direction as to why size is failing to produce a value, I'd appreciate it massively.

Answer 1

You could always try working off the value contained in the metafield. It appears you are short-cutting by referring to just the combo of namespace and key, without actually saying: what is the length of the value stored at that namespace and key. Just a thought. You could at least try that.

Answer 2

Final answer, courtesy of #David Lazar's suggestion:
{% assign data_product_note = product.metafields.custom.product_note.value %}
{% if data_product_note.size >= 24 %}
<div class="product-note has--dropdown">
<span class="item__heading item__trigger">Product information</span>
<div class="item__content">
{{ data_product_note }}
</div>
</div>
{% else %}
<div class="product-note">
<div class="item__content">
{{ data_product_note }}
</div>
</div>
{% endif %}