<span class="product-card__second-row-score">
{% set productAverageScore = product.reviewsAvgScore %}
{% if productAverageScore == 0 %}
{% set productAverageScore = 5 %}
{% endif %}
{% for star in 1..5 %}
{% if star <= productAverageScore %}
<svg xmlns="http://www.w3.org/2000/svg"
width="32" height="32">
<defs>
<linearGradient id="half_grad-{{ loop.index }}">
<stop offset="100%" stop-color="#fed94b"/>
<stop offset="0%" stop-color="white" stop-opacity="1"/>
</linearGradient>
</defs>
<path style="transform: scale(0.57);"
d="M31.547 12a.848.848 0 00-.677-.577l-9.427-1.376-4.224-8.532a.847.847 0 00-1.516 0l-4.218 8.534-9.427 1.355a.847.847 0 00-.467 1.467l6.823 6.664-1.612 9.375a.847.847 0 001.23.893l8.428-4.434 8.432 4.432a.847.847 0 001.229-.894l-1.615-9.373 6.822-6.665a.845.845 0 00.214-.869z"
fill="url(#half_grad-{{ loop.index }})" stroke-width="1" stroke="#fed94b"/>
</svg>
{% elseif (star - productAverageScore) > 0 and (star - productAverageScore) < 1 %}
{% set fill = (star - productAverageScore)*100 %}
{% set white = 100 - fill %}
<svg xmlns="http://www.w3.org/2000/svg"
width="32" height="32">
<defs>
<linearGradient id="half_grad-{{ loop.index }}" x1="0" y1="0" x2="100%" y2="0">
<stop offset="{{ fill }}%" stop-color="#fed94b"/>
<stop offset="{{ white }}%" stop-color="white"/>
</linearGradient>
</defs>
<path style="transform: scale(0.57);"
d="M31.547 12a.848.848 0 00-.677-.577l-9.427-1.376-4.224-8.532a.847.847 0 00-1.516 0l-4.218 8.534-9.427 1.355a.847.847 0 00-.467 1.467l6.823 6.664-1.612 9.375a.847.847 0 001.23.893l8.428-4.434 8.432 4.432a.847.847 0 001.229-.894l-1.615-9.373 6.822-6.665a.845.845 0 00.214-.869z"
fill="url(#half_grad-{{ loop.index }})" stroke-width="1" stroke="#fed94b"/>
</svg>
{% else %}
<svg xmlns="http://www.w3.org/2000/svg"
width="32" height="32">
<defs>
<linearGradient id="half_grad-{{ loop.index }}" x1="0" y1="0" x2="100%" y2="0">
<stop offset="0%" stop-color="#fed94b"/>
<stop offset="0%" stop-color="white" stop-opacity="1"/>
</linearGradient>
</defs>
<path style="transform: scale(0.57);"
d="M31.547 12a.848.848 0 00-.677-.577l-9.427-1.376-4.224-8.532a.847.847 0 00-1.516 0l-4.218 8.534-9.427 1.355a.847.847 0 00-.467 1.467l6.823 6.664-1.612 9.375a.847.847 0 001.23.893l8.428-4.434 8.432 4.432a.847.847 0 001.229-.894l-1.615-9.373 6.822-6.665a.845.845 0 00.214-.869z"
fill="url(#half_grad-{{ loop.index }})" stroke-width="1" stroke="#fed94b"/>
</svg>
{% endif %}
{% endfor %}
</span>