/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 18:7 Expected identifier but found whitespace
Line 18:16 Unexpected "/"
Line 26:1 Expected identifier but found "%"
Line 28:0 Unexpected "<"
Line 33:5 Expected identifier but found "%"
Line 33:28 Expected identifier but found "%"
Line 34:4 Unexpected "<"
Line 53:5 Expected identifier but found "%"
... and 100 more hidden warnings

**/
{% comment %}
  Premium Cart Drawer
  File: snippets/cart-drawer-premium.liquid
  
  Features:
  - Slides in from right
  - Shows cart items with thumbnails
  - Quantity controls
  - Free shipping progress bar
  - Smooth animations
{% endcomment %}

<div class="cart-drawer" id="cart-drawer">
  <div class="cart-drawer__overlay" data-cart-drawer-close></div>
  
  <div class="cart-drawer__container">
    
    {%- comment -%} Header {%- endcomment -%}
    <div class="cart-drawer__header">
      <h2 class="cart-drawer__title">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M9 2L7.17 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z" fill="currentColor"/>
        </svg>
        Your Cart (<span class="cart-drawer__count">{{ cart.item_count }}</span>)
      </h2>
      <button 
        type="button" 
        class="cart-drawer__close" 
        data-cart-drawer-close
        aria-label="Close cart"
      >
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
        </svg>
      </button>
    </div>

    {%- comment -%} Free Shipping Progress {%- endcomment -%}
    {%- assign free_shipping_threshold = 50 -%}
    {%- assign cart_total_price = cart.total_price | divided_by: 100.0 -%}
    {%- assign remaining = free_shipping_threshold | minus: cart_total_price -%}
    {%- assign progress = cart_total_price | divided_by: free_shipping_threshold | times: 100 -%}
    {%- if progress > 100 -%}{%- assign progress = 100 -%}{%- endif -%}

    <div class="cart-drawer__shipping-bar">
      {%- if remaining > 0 -%}
        <p class="cart-drawer__shipping-text">
          Add <strong>{{ remaining | money }}</strong> more for <strong>FREE SHIPPING</strong>
        </p>
      {%- else -%}
        <p class="cart-drawer__shipping-text cart-drawer__shipping-text--success">
          🎉 You've qualified for <strong>FREE SHIPPING!</strong>
        </p>
      {%- endif -%}
      <div class="cart-drawer__progress">
        <div class="cart-drawer__progress-bar" style="width: {{ progress }}%"></div>
      </div>
    </div>

    {%- comment -%} Cart Items {%- endcomment -%}
    <div class="cart-drawer__items" id="cart-drawer-items">
      {%- if cart.item_count == 0 -%}
        <div class="cart-drawer__empty">
          <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
            <circle cx="40" cy="40" r="38" stroke="#ddd" stroke-width="4"/>
            <path d="M30 40h20M40 30v20" stroke="#ddd" stroke-width="4" stroke-linecap="round"/>
          </svg>
          <h3>Your cart is empty</h3>
          <p>Start adding some amazing products!</p>
          <button 
            type="button" 
            class="cart-drawer__continue-btn"
            data-cart-drawer-close
          >
            Continue Shopping
          </button>
        </div>
      {%- else -%}
        {%- for item in cart.items -%}
          <div class="cart-drawer__item" data-cart-item="{{ item.key }}">
            
            {%- comment -%} Product Image {%- endcomment -%}
            <a href="{{ item.url }}" class="cart-drawer__item-image">
              {%- if item.image -%}
                <img
                  src="{{ item.image | image_url: width: 150 }}"
                  alt="{{ item.image.alt | escape }}"
                  loading="lazy"
                  width="80"
                  height="80"
                >
              {%- endif -%}
            </a>

            {%- comment -%} Product Details {%- endcomment -%}
            <div class="cart-drawer__item-details">
              <a href="{{ item.url }}" class="cart-drawer__item-title">
                {{ item.product.title }}
              </a>
              
              {%- if item.variant.title != 'Default Title' -%}
                <p class="cart-drawer__item-variant">{{ item.variant.title }}</p>
              {%- endif -%}

              <div class="cart-drawer__item-price">
                <span class="cart-drawer__item-price-value">{{ item.final_line_price | money }}</span>
                {%- if item.original_line_price > item.final_line_price -%}
                  <span class="cart-drawer__item-price-compare">{{ item.original_line_price | money }}</span>
                {%- endif -%}
              </div>

              {%- comment -%} Quantity Controls {%- endcomment -%}
              <div class="cart-drawer__item-qty">
                <button 
                  type="button" 
                  class="cart-drawer__qty-btn"
                  data-cart-qty-decrease="{{ item.key }}"
                  {%- if item.quantity == 1 -%}disabled{%- endif -%}
                  aria-label="Decrease quantity"
                >
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                </button>
                
                <input 
                  type="number" 
                  class="cart-drawer__qty-input"
                  value="{{ item.quantity }}"
                  min="1"
                  data-cart-qty-input="{{ item.key }}"
                  aria-label="Quantity"
                >
                
                <button 
                  type="button" 
                  class="cart-drawer__qty-btn"
                  data-cart-qty-increase="{{ item.key }}"
                  aria-label="Increase quantity"
                >
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                    <path d="M8 4v8M4 8h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                  </svg>
                </button>
              </div>
            </div>

            {%- comment -%} Remove Button {%- endcomment -%}
            <button 
              type="button" 
              class="cart-drawer__item-remove"
              data-cart-item-remove="{{ item.key }}"
              aria-label="Remove item"
            >
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              </svg>
            </button>

          </div>
        {%- endfor -%}
      {%- endif -%}
    </div>

    {%- comment -%} Footer {%- endcomment -%}
    {%- if cart.item_count > 0 -%}
      <div class="cart-drawer__footer">
        
        {%- comment -%} Subtotal {%- endcomment -%}
        <div class="cart-drawer__subtotal">
          <span>Subtotal</span>
          <span class="cart-drawer__subtotal-price" id="cart-drawer-subtotal">
            {{ cart.total_price | money }}
          </span>
        </div>

        {%- comment -%} Checkout Button {%- endcomment -%}
        <a href="/checkout" class="cart-drawer__checkout-btn">
          Proceed to Checkout
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
            <path d="M7 3l7 7-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </a>

        {%- comment -%} Continue Shopping {%- endcomment -%}
        <button 
          type="button" 
          class="cart-drawer__continue-link"
          data-cart-drawer-close
        >
          Continue Shopping
        </button>

        {%- comment -%} Trust Badges {%- endcomment -%}
        <div class="cart-drawer__trust">
          <div class="cart-drawer__trust-item">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M10 1l2.5 6.5L19 8l-5 4.5L15.5 19 10 15l-5.5 4L6 12.5 1 8l6.5-.5L10 1z" fill="#27ae60"/>
            </svg>
            <span>Secure Checkout</span>
          </div>
          <div class="cart-drawer__trust-item">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
              <path d="M18 8V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v2m16 0v8c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V8m16 0H2" stroke="#27ae60" stroke-width="2"/>
            </svg>
            <span>Free Returns</span>
          </div>
        </div>

      </div>
    {%- endif -%}

  </div>
</div>