{% if cartList %}
	<div class="flex flex-row nowrap-xs">
		<a class="btn-default btn-medium btn-full btn-outline right-margin-x-small" href="{{ cart }}">
			<span>{{ text_cart }}</span>
		</a>
		<a class="btn-default btn-medium btn-full btn-proceed-checkout left-margin-x-small" href="{{ checkout }}">
			<span>{{ text_checkout }}</span>
		</a>
	</div>

	{% for product in cartList %}
		{% if isCartPage %}
			<a href="{{ product.href }}" class="flex flex-row middle-xs nowrap-xs top-margin-large">
				<div class="flex-auto right-margin-medium">
					<div style="width:40px;height:40px;">
						{% if product.thumb %}
							<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" width="40" height="40" class="visible-block"/>
						{% endif %}
					</div>
				</div>
				<div class="flex-1 text-ellipsis">
					<span class="visible-block text-medium text-bold text-ellipsis bottom-margin-x-small">{{ product.name }}</span>
					<span class="text-small text-gray">Quantidade</span>
					<span class="text-small text-bold text-dark right-margin-x-small">{{ product.quantity }}</span>
				</div>
			</a>
		{% else %}
			<div style="display: flex; align-items: center;" class="top-margin-large product-container">
				<div class="flex-auto" style="width: 40px; height: 40px; margin-right: 10px;">
					<a href="{{ product.href }}">
						{% if product.thumb %}
							<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" width="40" height="40" class="visible-block"/>
						{% endif %}
					</a>
				</div>

				<div style="display: flex; flex-direction: column; justify-content: center; width: calc(100% - 50px);">
					<a href="{{ product.href }}">
						<span class="visible-block text-medium text-bold text-ellipsis bottom-margin-x-small">
							{{ product.name }}
						</span>
					</a>

					<div class="top-margin-x-small" style="display: flex; align-items: center;">
						<span class="text-small text-gray right-margin-small">Quantidade</span>
						<div class="flex nowrap-xs rel" data-product-id="{{ product.key }}">
							<div class="product-item itembox-quantity-control quantity-controls floating-cart-itembox">
								<button class="itembox-btn btn-down btn-decrement" style="width: 20px; padding: 0;">
									<i aria-hidden="true" class="fas fa-minus"></i>
								</button>

								<input 
									type="text" 
									name="quantity[{{ product.key }}]" 
									autocomplete="off" 
									size="1" 
									maxlength="3"
									value="{{ product.quantity }}"
									class="mask-number input-text quantity quantity-input {{ not product.stock ? 'field-entry-error' : ''}}" 
									style="font-size: 16px; text-align: center; width: 30px; padding: 0; margin: 0 5px;" 
									onkeydown="if ((event.code === 'Enter') || (event.code === 'NumpadEnter')) event.preventDefault();">

								<button class="itembox-btn btn-up btn-increment" style="width: 20px; padding: 0;">
									<i aria-hidden="true" class="fas fa-plus"></i>
								</button>
							</div>
							<button class="btn-trash btn-remove-product left-margin-small">
								<i aria-hidden="true" class="fas fa-trash"></i>
							</button>
						</div>
					</div>
				</div>
			</div>
		{% endif %}

		<!-- Origem Lista Escolar, se aplicável -->
		{% if product.isListaEscolar %}
			<span class="text-small text-gray">Origem</span>
			<span class="text-small text-bold text-dark right-margin-x-small">Lista Escolar</span>
		{% endif %}
	{% endfor %}

	{% if itens_cart_restantes %}
		<a href="{{ cart }}" class="visible-block text-small text-center vertical-padding-small top-margin-medium">
			<span>+{{ itens_cart_restantes }}
				produtos no carrinho</span>
				 <span id="hidden-items-quantity" style="display:none;">{{ qtd_items }}</span>
		</a>
	{% endif %}
{% else %}
	<span class="text-medium text-bold text-dark visible-block text-center">{{ text_empty }}</span>
{% endif %}
