/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:0 Unexpected "{"
Line 17:1 Expected identifier but found "%"
Line 30:0 Unexpected "<"
Line 35:13 Unexpected "{"
Line 35:15 Expected identifier but found "'general.cart_drawer.title'"
Line 35:49 Unexpected "<"
Line 36:52 Unexpected "{"
Line 36:54 Expected identifier but found "'general.close'"
... and 305 more hidden warnings

**/
{%- if settings.cart_drawer -%}
{%- liquid
  assign free_shipping_threshold = 10000
  assign cart_total = cart.total_price
  assign remaining = free_shipping_threshold | minus: cart_total

  assign free_shipping_progress = cart_total | times: 100 | divided_by: free_shipping_threshold
  if free_shipping_progress < 0
    assign free_shipping_progress = 0
  endif
  if free_shipping_progress > 100
    assign free_shipping_progress = 100
  endif
-%}
<div class="side-panel cart-drawer" id="Cart-Drawer" tabindex="-1">
  <div class="side-panel-inner">

    <div class="side-panel-header">
      <div class="drawer-header-top">
        <h4>{{ 'general.cart_drawer.title' | t }}</h4>
        <side-panel-close class="side-panel-close">{{ 'general.close' | t }}</side-panel-close>
      </div>

      {%- if cart != empty -%}
        <div
          class="drawer-free-shipping"
          role="status"
          aria-live="polite"
          data-progress="{{ free_shipping_progress }}"
          style="--p: 0; --ship-color: var(--color-accent2, #0b3b39);"
        >
          <div class="drawer-free-shipping__top">
            {%- if cart_total >= free_shipping_threshold -%}
              <span class="drawer-free-shipping__title">Free UK shipping unlocked</span>
            {%- else -%}
              <span class="drawer-free-shipping__title">Add {{ remaining | money }} more for free shipping</span>
            {%- endif -%}
            <span class="drawer-free-shipping__meta">{{ cart_total | money }} / {{ free_shipping_threshold | money }}</span>
          </div>

          <div class="drawer-free-shipping__trackwrap" aria-hidden="true">
            <div class="drawer-free-shipping__track">
              <span class="drawer-free-shipping__fill"></span>
            </div>

            <span class="drawer-free-shipping__icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" fill="none">
                <path d="M3 7h12v9H3V7Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                <path d="M15 10h3.6l2.4 2.8V16H15v-6Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
                <path d="M7 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" stroke="currentColor" stroke-width="1.6"/>
                <path d="M18 18a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" stroke="currentColor" stroke-width="1.6"/>
              </svg>
            </span>
          </div>
        </div>
      {%- endif -%}
    </div>

    <div class="side-panel-content">
      {%- if cart != empty -%}
        <div class="product-cart-item--container">
          {% for item in cart.items %}
            <div class="product-cart-item" id="CartDrawerItem-{{ item.index | plus: 1 }}">
              <div class="product-cart-item-image">
                {% if item.image %}
                  {%- render 'responsive-image', image: item.image, sizes: '168x0' -%}
                {% else %}
                  <div class="thb-placeholder" style="width: 100px;">
                    {{ 'product-1' | placeholder_svg_tag }}
                  </div>
                {% endif %}
                <div class="loading-overlay">
                  {% render 'svg-icons' with 'thb-loading' %}
                </div>
              </div>

              <div>
                <a href="{{ item.url }}" title="{{ item.product.title | escape }}" class="cart-product-link">{{ item.product.title }}</a>

                <span class="price">
                  {%- if item.original_line_price != item.final_line_price -%}
                    <del><span class="amount">{{ item.original_line_price | money }}</span></del>
                    <ins><span class="amount">{{ item.final_line_price | money }}</span></ins>
                  {%- else -%}
                    <ins><span class="amount">{{ item.original_line_price | money }}</span></ins>
                  {%- endif -%}

                  {%- if item.variant.available and item.unit_price_measurement -%}
                    <small class="unit-price">
                      {{ item.variant.unit_price | money }}
                      <span class="unit-price-separator">/</span>
                      {%- if item.variant.unit_price_measurement.reference_value != 1 -%}
                        {{- item.variant.unit_price_measurement.reference_value -}}
                      {%- endif -%}
                      {{ item.variant.unit_price_measurement.reference_unit }}
                    </small>
                  {%- endif -%}
                </span>

                {% if item.selling_plan_allocation %}
                  <div class="properties">
                    <span class="selling-plan">{{ item.selling_plan_allocation.selling_plan.name }}</span>
                  </div>
                {% endif %}

                {% unless item.variant.title contains 'Default' %}
                  <div class="product-cart-item-options">
                    {% for option in item.product.options %}
                      {{ item.variant.options[forloop.index0] | replace: ' Wax', '' | replace: ' Oil', '' | strip }}{% if forloop.last != true %}, {% endif %}
                    {% endfor %}
                  </div>
                {% endunless %}

                {%- for property in item.properties -%}
                  {%- assign property_first_char = property.first | slice: 0 -%}
                  {%- if property.last != blank and property_first_char != '_' -%}
                    <div class="product-cart-item-options">
                      <span>{{ property.first }}: </span>
                      {%- if property.last contains '/uploads/' -%}
                        <a href="{{ property.last }}" class="link" target="_blank">
                          {{ property.last | split: '/' | last }}
                        </a>
                      {%- else -%}
                        {{ property.last }}
                      {%- endif -%}
                      <br/>
                    </div>
                  {%- endif -%}
                {%- endfor -%}

                {%- if item.discounts != blank -%}
                  <ul class="discounts" role="list">
                    {%- for discount in item.discounts -%}
                      <li class="discounts__discount">
                        {%- render 'svg-icons' with 'discount' -%}
                        {{ discount.title }} (-{{ discount.amount | money }})
                      </li>
                    {%- endfor -%}
                  </ul>
                {%- endif -%}

                <quantity-selector class="quantity cart-update small-qty" data-id="{{ item.key | escape }}">
                  <button class="minus" type="button" aria-label="{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}">{% render 'svg-icons' with 'minus' %}</button>

                  <input
                    type="number"
                    name="updates[]"
                    id="updates_{{ item.key }}"
                    value="{{ item.quantity }}"
                    min="{{ item.variant.quantity_rule.min }}"
                    {% if item.variant.quantity_rule.max != null %}
                      max="{{ item.variant.quantity_rule.max }}"
                    {% elsif item.variant.inventory_management != null and item.variant.inventory_quantity > 0 %}
                      max="{{ item.variant.inventory_quantity }}"
                    {% endif %}
                    step="{{ item.variant.quantity_rule.increment }}"
                    class="qty"
                    data-index="{{ item.index | plus: 1 }}"
                    aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
                  >

                  <button class="plus" type="button" aria-label="{{ 'products.product.quantity.increase' | t: product: item.product.title | escape }}">{% render 'svg-icons' with 'plus' %}</button>
                </quantity-selector>

                <a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0" class="remove" data-index="{{ item.index | plus: 1 }}">{% render 'svg-icons' with 'trash' %}</a>
              </div>
            </div>
          {% endfor %}
        </div>

<script>
  (function () {
    function animateFreeShipping() {
      var root = document.querySelector('#Cart-Drawer .drawer-free-shipping');
      if (!root) return;

      var p = parseFloat(root.getAttribute('data-progress') || '0');
      p = Math.max(0, Math.min(100, p));

      root.style.setProperty('--p', '0');

      root.classList.remove('is-anim');
      void root.offsetWidth;
      root.classList.add('is-anim');

      requestAnimationFrame(function () {
        root.style.setProperty('--p', String(p));
      });
    }

    function refreshCartDrawer() {
      return fetch('/?sections=cart-drawer,cart-bubble', { credentials: 'same-origin' })
        .then(function (r) { return r.json(); })
        .then(function (sections) {
          if (sections['cart-drawer']) {
            var html = new DOMParser().parseFromString(sections['cart-drawer'], 'text/html');
            var newDrawer = html.querySelector('#Cart-Drawer');
            var oldDrawer = document.querySelector('#Cart-Drawer');
            if (newDrawer && oldDrawer) {
              oldDrawer.innerHTML = newDrawer.innerHTML;
            }
          }

          if (sections['cart-bubble']) {
            var bubbleHtml = new DOMParser().parseFromString(sections['cart-bubble'], 'text/html');
            var newBubble = bubbleHtml.querySelector('.thb-item-count');
            var oldBubble = document.querySelector('.thb-item-count');
            if (newBubble && oldBubble) {
              oldBubble.innerHTML = newBubble.innerHTML;
            }
          }

          document.dispatchEvent(new CustomEvent('cart-drawer:open'));
        });
    }

    function addUpsellToCart(variantId, btn) {
      if (!variantId) return;

      btn && btn.setAttribute('disabled', 'disabled');

      var body = new URLSearchParams();
      body.append('id', variantId);
      body.append('quantity', '1');

      fetch('/cart/add.js', {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
        body: body.toString(),
        credentials: 'same-origin'
      })
      .then(function (res) {
        return res.json().then(function (data) {
          if (!res.ok) throw data;
          return data;
        });
      })
      .then(function () {
        return refreshCartDrawer();
      })
      .catch(function (err) {
        console.error('Upsell add error', err);
        alert((err && err.description) ? err.description : 'Could not add item to cart');
      })
      .finally(function () {
        btn && btn.removeAttribute('disabled');
      });
    }

    document.addEventListener('click', function (e) {
      var btn = e.target.closest('.js-upsell-add');
      if (!btn) return;
      e.preventDefault();
      addUpsellToCart(btn.getAttribute('data-variant-id'), btn);
    });

    document.addEventListener('cart-drawer:open', function () {
      setTimeout(animateFreeShipping, 30);
    });

    document.addEventListener('DOMContentLoaded', function () {
      setTimeout(animateFreeShipping, 30);
    });
  })();
</script>

        {% render 'cart-upsell',
          p1: settings.cart_upsell_product_1,
          p2: settings.cart_upsell_product_2,
          p3: settings.cart_upsell_product_3,
          p4: settings.cart_upsell_product_4,
          enabled: settings.cart_upsell_enable
        %}
      {%- else -%}
        <div class="cart-drawer__empty-cart">
          {% render 'svg-icons' with 'thb-empty-cart' %}
          <p>{{ 'general.cart_drawer.cart_empty' | t }}</p>
          <a class="button accent2" href="{{ routes.all_products_collection_url }}"><span>{{ 'general.cart_drawer.start_shopping' | t }}</span></a>
        </div>
      {%- endif -%}

      {%- if cart != empty and settings.cart_recommendations -%}
        <product-recommendations class="product-recommendations-drawer" data-url="{{ routes.product_recommendations_url }}?section_id=cart-drawer&product_id={{ cart.items[0].product_id }}&limit=4">
          {% if recommendations.performed and recommendations.products_count > 0 %}
            <p class="product-recommendations-drawer__heading">{{ 'general.cart_drawer.you_may_also_like' | t }}</p>
            <scroll-shadow>
              <div class="product-recommendations-drawer__products">
                {% for recommendation in recommendations.products %}
                  {% render 'product-card-small' product_small: recommendation %}
                {% endfor %}
              </div>
            </scroll-shadow>
          {% endif %}
        </product-recommendations>
      {%- endif -%}
    </div>

    {%- if cart != empty -%}
      <div class="side-panel-footer">
        {%- if settings.cart_drawer_notes_enable -%}
          <button type="button" class="order-note-toggle" id="order-note-toggle" aria-controls="mini-cart-note">{{ 'general.cart_drawer.add_order_note' | t }}</button>
          <div class="order-note-toggle__content">
            <label for="mini-cart__notes">{{ 'general.cart_drawer.add_order_note' | t }}</label>
            <textarea name="note" id="mini-cart__notes" rows="5">{{ cart.note }}</textarea>
            <button class="button full"><span>{{ 'general.cart_drawer.save' | t }}</span></button>
            <div class="order-note-toggle__content-overlay"></div>
          </div>
        {%- endif -%}

        {%- if cart.cart_level_discount_applications.size > 0 -%}
          {%- for discount in cart.cart_level_discount_applications -%}
            <div class="mini-cart__row mini-cart__discount">
              <div class="mini-cart__label">{{ discount.title }}</div>
              {% if settings.currency_code_enabled %}
                <span>(-{{ discount.total_allocated_amount | money_with_currency }})</span>
              {% else %}
                <span>(-{{ discount.total_allocated_amount | money }})</span>
              {% endif %}
            </div>
          {%- endfor -%}
        {%- endif -%}

        <div class="mini-cart__row mini-cart__total total">
          <div class="mini-cart__label">{{ 'sections.cart.subtotal' | t }}
            <p class="cart-policy-text">
              {%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
                {{ 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
              {%- elsif cart.taxes_included -%}
                {{ 'sections.cart.taxes_included_but_shipping_at_checkout' | t }}
              {%- elsif shop.shipping_policy.body != blank -%}
                {{ 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
              {%- else -%}
                {{ 'sections.cart.taxes_and_shipping_at_checkout' | t }}
              {%- endif -%}
            </p>
          </div>
          <span class="amount">
            {% if settings.currency_code_enabled %}
              {{ cart.total_price | money_with_currency }}
            {% else %}
              {{ cart.total_price | money }}
            {% endif %}
          </span>
        </div>

        {% if settings.cart_terms_conditions_enable %}
          <div class="cart-drawer-terms">
            <input type="checkbox" id="CartDrawerTerms" required>
            <label for="CartDrawerTerms">
              {% if settings.cart_terms_conditions_page != blank %}
                {{ 'sections.cart.terms_html' | t: url: settings.cart_terms_conditions_page.url }}
              {% else %}
                {{ 'sections.cart.terms' | t }}
              {% endif %}
            </label>
          </div>
        {% endif %}

        <div class="cart-drawer-buttons">
          {%- if settings.cart_drawer_cart_button -%}
            <a href="{{ routes.cart_url }}" class="button full outline" title="{{ 'general.cart_drawer.view_cart' | t | escape }}">{{ 'general.cart_drawer.view_cart' | t }}</a>
          {%- endif -%}

          {%- if settings.cart_drawer_checkout_button -%}
            <form action="{{ routes.cart_url }}" method="post" novalidate class="drawer-checkout-form">
              <button type="submit" class="button full checkout drawer-checkout-button" name="checkout" title="Proceed to secure checkout">
                Proceed to secure checkout
              </button>

              <div class="secure-checkout-line">
                <span class="secure-checkout-title">Secure checkout</span>
                <span class="secure-checkout-subtitle">Encrypted payments</span>
              </div>

              <div class="secure-checkout-icons-center" aria-label="Payment methods">
                {{ 'amex' | payment_type_svg_tag }}
                {{ 'apple_pay' | payment_type_svg_tag }}
                {{ 'google_pay' | payment_type_svg_tag }}
                {{ 'master' | payment_type_svg_tag }}
                {{ 'maestro' | payment_type_svg_tag }}
                {{ 'paypal' | payment_type_svg_tag }}
                {{ 'visa' | payment_type_svg_tag }}
                {{ 'klarna' | payment_type_svg_tag }}
              </div>
            </form>
          {%- endif -%}
        </div>
      </div>
    {%- endif -%}
  </div>
</div>

<style>
  #Cart-Drawer .drawer-header-top{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
  }

  #Cart-Drawer .drawer-free-shipping{
    width:100% !important;
    margin: 8px 0 0 !important;
  }

  #Cart-Drawer .drawer-free-shipping__top{
    display:flex !important;
    align-items:baseline !important;
    justify-content:space-between !important;
    gap:10px !important;
    margin: 0 0 6px !important;
    font-size:13px !important;
    line-height:1.2 !important;
  }

  #Cart-Drawer .drawer-free-shipping__title{
    font-weight:600 !important;
  }

  #Cart-Drawer .drawer-free-shipping__meta{
    opacity:.7 !important;
    white-space:nowrap !important;
    font-size:12px !important;
  }

  #Cart-Drawer .drawer-free-shipping__trackwrap{
    position:relative !important;
    height:28px !important;
    width:100% !important;
    display:flex !important;
    align-items:center !important;
  }

  #Cart-Drawer .drawer-free-shipping__track{
    position:relative !important;
    width:100% !important;
    height:12px !important;
    border-radius:999px !important;
    background: rgba(0,0,0,.12) !important;
    overflow:hidden !important;
  }

  #Cart-Drawer .drawer-free-shipping__fill{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    height:100% !important;
    width: calc(var(--p) * 1%) !important;
    border-radius:999px !important;
    background: var(--ship-color) !important;
  }

  #Cart-Drawer .drawer-free-shipping__icon{
    position:absolute !important;
    top:50% !important;
    left: clamp(14px, calc(var(--p) * 1%), calc(100% - 14px)) !important;
    transform: translate(-50%,-50%) !important;
    width:28px !important;
    height:28px !important;
    border-radius:999px !important;
    background: var(--ship-color) !important;
    color:#fff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.12) !important;
    z-index:2 !important;
  }

  #Cart-Drawer .drawer-free-shipping__icon svg{
    width:16px !important;
    height:16px !important;
    display:block !important;
  }

  #Cart-Drawer .drawer-free-shipping.is-anim .drawer-free-shipping__fill{
    transition: width 900ms cubic-bezier(.2,.9,.2,1) !important;
  }

  #Cart-Drawer .drawer-free-shipping.is-anim .drawer-free-shipping__icon{
    transition: left 900ms cubic-bezier(.2,.9,.2,1) !important;
  }

  #Cart-Drawer .secure-checkout-line{
    display:flex !important;
    align-items:baseline !important;
    justify-content:center !important;
    gap:10px !important;
    margin-top:10px !important;
    text-align:center !important;
  }

  #Cart-Drawer .secure-checkout-title{
    font-weight:700 !important;
    font-size:12px !important;
    line-height:1.1 !important;
  }

  #Cart-Drawer .secure-checkout-subtitle{
    font-size:12px !important;
    opacity:.7 !important;
    line-height:1.1 !important;
  }

  #Cart-Drawer .secure-checkout-icons-center{
    margin-top:8px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px !important;
    flex-wrap:wrap !important;
  }

  #Cart-Drawer .secure-checkout-icons-center svg{
    height:18px !important;
    width:auto !important;
    display:block !important;
  }
</style>
{%- endif -%}