<style>
.mt-7 {
	padding-top: 7px;
}
.mt-8 {
	padding-top: 8px;
}
.mt-13 {
	padding-top: 13px;
}
.header-cart .cross-sell .swiper-item {
	background: unset;
}

@media screen and (min-width: 1024px) {
	.d-pt-11 {
		padding-top: 11px;
	}
	.d-pb-11 {
		padding-bottom: 11px;
	}
}
</style>
<div id="cart-drawer-main" class="header-cart-wrapper bg-cream w-full h-full flex flex-column relative">
	{% # overlay & loading %}
	<div class="header-cart-loading cart-loading absolute top-0 left-0 w-full h-full zi-3 bg-beige opacity-5">&nbsp;</div>
	<div class="header-cart-note-overlay absolute top-0 left-0 w-full h-full zi-3 bg-beige opacity-5" onclick="$360.handleCartNote(event);">&nbsp;</div>
	{% # END overlay & loading %}

	{% # note form %}
	<div class="header-cart-note absolute bottom-0 left-0 w-full zi-4 bg-cream bt-1 b-light-grey">
		<div class="relative pt-20 pb-20 pl-20 pr-20">
			<div class="relative flex flex-column">
				<div class="h7">{{ 'cart.general.order_note' | t }}</div>
				<textarea name="note" class="header-cart-note-input p3 global-input mt-15 bg-dark-beige p-20" rows="5" maxlength="100" placeholder="{{ 'cart.general.note' | t }}">{{ cart.note }}</textarea>
				{% comment %}
				<div class="counter-wrp absolute left-10 bottom-10 p4 opacity-5">
					<span class="counter">0</span>
					<span>/</span>
					<span class="maxlength"></span>
				</div>
				{% endcomment %}
			</div>
			<button type="button" name="save-note" class="note-btn btn1 w-full mt-20" onclick="$360.updateCartNote(event, this);">
				<span>{{ 'cart.general.save_note' | t }}</span>
			</button>
		</div>
	</div>
	{% # END note form %}
	
	<div class="header-cart-title flex ai-center {% if cart.item_count == 0 %} jc-end {% else %}jc-between {% endif %} pt-20 pb-20 pl-25 pr-25">
		{%- if cart.item_count > 0 -%}
		<h3 class="h6 tl title-wrapper">{{ 'cart.general.title' | t }} {% if cart.item_count > 0 %}({{ cart.item_count }}){% endif %}</h3>
		{%- endif -%}
		<button type="button" class="header-cart-close flex ai-center jc-center zi-1" onclick="$360.hideHeaderCart()">{{ settings.icon_close }}</button>
	</div>
	{%- if cart.item_count == 0 -%}
		<div class="empty-cart h-full flex flex-column jc-center ai-center tl pl-25 pr-25 pb-25">
			{%- if settings.cart_empty_title -%}
				<h3 class="h3 tc max-320 t-max-320 d-max-320 hd-max-320">{{ settings.cart_empty_title }}</h3>
			{%- endif -%}
			{%- if settings.cart_empty_msg -%}
				<div class="p3 tc bold-400 mt-15 d-mt-20 max-320 t-max-320 d-max-320 hd-max-320">{{ settings.cart_empty_msg }}</div>
			{%- endif -%}
			{%- if settings.cart_empty_btn_label and settings.cart_empty_btn_url  -%}
				<a href="{{ settings.cart_empty_btn_url }}" class="link1 tc mt-20" title="{{ settings.cart_empty_btn_label | escape }}">{{ settings.cart_empty_btn_label }}</a>
			{%- endif -%}
		</div>
	{%- else -%}
		<div class="relative listing-cart-wrapper flex-1 bt-1 b-light-grey pt-20">
			{%- render 'free-shipping-info', padding_class: 'pl-25 pr-25', text_class: 'p2 pl' -%}
			<form action="{{ routes.cart_url }}" method="post" id="header-cart-form" class="header-cart-form">
				<div class="relative listing-cart-inner flex jc-between ai-start flex-column">
					<div class="header-cart-middle w-full flex flex-column pt-25 pt-35">
						<div class="cart-items-wrapper pb-30 pl-25 pr-25">
							<ul class="header-cart-items flex flex-column">
								{%- for item in cart.items -%}
									{%- assign pro = item.product -%}
									{%- assign group_id = false -%}
									{%- assign group_parent = false -%}
									{%- assign is_gwp = false -%}
									{%- if item.properties['_isGWP'] != blank -%}
										{%- assign is_gwp = true -%}
									{%- endif -%}
									{%- if item.properties['_group_id'] != blank -%}
										{%- assign group_id = item.properties['_group_id'] -%}
									{%- endif -%}
									{%- if item.properties['_group_parent'] != blank -%}
										{%- assign group_parent = item.properties['_group_parent'] -%}
									{%- endif -%}
									{%- unless forloop.last -%}
										{%- assign class = 'mb-30' -%}
									{%- endunless -%}

									{%- render 'cart-item', 
										index: forloop.index, 
										item: item, 
										group_id: group_id, 
										group_parent: group_parent, 
										is_cart_page: false,
										class: class
									-%}
								{%- endfor -%}
							</ul>
						</div>
						{%- if settings.cart_cross_sell_collection != blank -%}
							<div class="relative w-full pt-20 d-pt-25 bt-1 b-border">
								<div class="cross-sell">
									<div class="flex jc-between ai-center mb-20 w-full pl-25 pr-25">
										{%- if settings.cart_cross_sell_title != blank -%}
											<div class="p1 bold-500">{{ settings.cart_cross_sell_title }}</div>
										{%- endif -%}
										<div class="nav-wrapper relative w-auto flex jc-between ai-center colgap-20 d-colgap-25">
											<div class="swiper-btn-prev cursor">
												{{ settings.icon_slide_left }}
											</div>
											<div class="swiper-btn-next cursor">
												{{ settings.icon_slide_right }}
											</div>
										</div>
									</div>
									<div class="relative swiper pb-140">
										<div class="swiper-wrapper w-full">
											{%- for product in settings.cart_cross_sell_collection.products, limit: settings.cart_cross_sell_limit -%}
												<div class="swiper-slide h-full swiper-item">
													{%- render 'product-card-3', product: product, padding_class: 'pb-25 d-pb-30' -%}
												</div>
											{%- endfor -%}
										</div>
									</div>
								</div>
							</div>
						{%- endif -%}
					</div>
					<div class="header-cart-bottom bg-cream w-full pt-15 pb-10 zi-2">
						{%- render 'cart-action', cart: cart -%}
					</div>
				</div>
			</form>
		</div>
	{%- endif -%}
</div>
