{% if specials %}
	{% for special in specials %}
		<li class="swiper-slide">
			<div class="itembox content-box rel paper">
				<div class="itembox-container clearfix {{ class_actions_one_line }}">
					<div>
						{% if special.image %}
							<a
								href="{{ special.href }}" title="{{ special.description }}" class="itembox-image-link">
								<!-- O estilo inline foi utilizado porque o valor tem que vir do php -->
								<div class="container-img">
									<picture>
										<source class="load-image" srcset="" data-src="{{ special.image.webp }}">
										<img class="load-image" src="" data-src="{{ special.image.jpg }}" alt="{{ special.description }}">
									</picture>
								</div>
							</a>
						{% else %}
							<a href="{{ special.href }}" title="{{ special.description }}" class="itembox-image-link">
								<div class="container-img" {{ special.ratio }}>
									<picture>
										<source class="load-image" srcset="" data-src="{{ special.image.webp }}">
										<img class="itembox-primary-image load-image" data-src="https://placehold.co/300x260?text=sem+imagem" alt="{{ special.description }}">
									</picture>
								</div>
							</a>
						{% endif %}
					</div>
					<div class="itembox-content">
						<div class="itembox-inner special-description">
							<h3 class="itembox-title font-family-header">
								<a class="product-name" href="{{ special.href }}" title="{{ special.description }}" style="margin-bottom: 0">
									{{ special.description }}
								</a>
							</h3>
						</div>
						<button type="button" data-special-href="{{ special.href }}" class="btn-default btn-medium-square js-btn-special">
							<span>Ver Produtos</span>
						</button>
					</div>
				</div>

			</div>
		</li>
	{#  #}
	{% endfor %}
{% endif %}

<script type="text/javascript">
	window.waitEvent('scripts_document', function () {
		$('.js-btn-special').on('click', function () {
			location.href = $(this).data('special-href');
		});
	});
</script>