/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:40 Unexpected "/"
Line 20:1 Expected identifier but found "%"
Line 22:0 Unexpected "{"
Line 22:1 Expected identifier but found "%"
Line 23:0 Unexpected "{"
Line 23:1 Expected identifier but found "%"
Line 24:2 Unexpected "{"
Line 24:3 Expected identifier but found "%"
... and 97 more hidden warnings

**/
{%- comment -%}
  Mowelli Smart Cart Upsell — snippets/mowelli-cart-upsell.liquid
  No Swiper dependency — uses CSS scroll + vanilla JS arrows.
  Works in both cart page and mini cart drawer.
{%- endcomment -%}

{%- assign cart_ids = '' -%}
{%- for item in cart.items -%}
  {%- assign cart_ids = cart_ids | append: '|' | append: item.product_id | append: '|' -%}
{%- endfor -%}

{%- assign shown_ids = '' -%}
{%- assign shown_count = 0 -%}
{%- assign max_upsells = 12 -%}
{%- assign has_upsells = false -%}

{%- for item in cart.items -%}
  {%- assign candidates = item.product.metafields.custom.upsell_product.value -%}
  {%- if candidates != nil -%}
    {%- for candidate in candidates -%}
      {%- if shown_count < max_upsells and candidate != nil -%}
        {%- assign cid = '|' | append: candidate.id | append: '|' -%}
        {%- unless cart_ids contains cid or shown_ids contains cid -%}
          {%- assign shown_ids = shown_ids | append: cid -%}
          {%- assign shown_count = shown_count | plus: 1 -%}
          {%- assign has_upsells = true -%}
        {%- endunless -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}
{%- endfor -%}

{%- if has_upsells -%}
{%- assign upsell_uid = 'mwu-' | append: cart.token | slice: 0, 6 -%}

<style>
  .mw-upsell { margin-top: 0; padding-top: 0; }
  .mw-upsell h3 {
    font-weight: 700;
    margin-bottom: 1rem;
    color: #280D0D;
  }
  .mw-upsell__outer { position: relative; }
  .mw-upsell__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    /* Critical: only capture horizontal gestures, let vertical pass through */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  .mw-upsell__track::-webkit-scrollbar { display: none; }
  .mw-upsell__slide {
    flex: 0 0 160px;
    width: 160px;
  }
  .mw-upsell__slide img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    display: block;
    border-radius: 2px;
  }
  .mw-upsell__slide a { text-decoration: none; color: inherit; display: block; }
  .carousel_item_title {
    max-width: 130px;
    font-weight: 700;
    margin-bottom: 0;
    padding-top: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #280D0D;
    font-size: 13px;
  }
  .carousel_item_price {
    font-weight: 600;
    padding-top: 4px;
    color: #280D0D;
    font-size: 13px;
  }
  /* Arrow buttons */
  .mw-upsell__arrow {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.95);
    box-shadow: 0 1px 5px rgba(0,0,0,0.18);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: opacity 0.2s;
    padding: 0;
  }
  .mw-upsell__arrow:hover { opacity: 0.7; }
  .mw-upsell__arrow--prev { left: 4px; }
  .mw-upsell__arrow--next { right: 4px; }
  .mw-upsell__arrow svg { width: 10px; height: 10px; stroke: #280D0D; fill: none; stroke-width: 2.5; }
  .mw-upsell__arrow.is-hidden { opacity: 0; pointer-events: none; }
  .t4s-cartPage__footer--inner { align-items: flex-start !important; }
</style>

<div class="mw-upsell" id="mw-upsell">
  <h3>Complete the look</h3>
  <div class="mw-upsell__outer">

    <button type="button" class="mw-upsell__arrow mw-upsell__arrow--prev is-hidden" data-upsell-prev="{{ upsell_uid }}" aria-label="Previous">
      <svg viewBox="0 0 10 10"><polyline points="6,2 2,5 6,8"/></svg>
    </button>

    <div class="mw-upsell__track" id="{{ upsell_uid }}">

      {%- assign shown_ids = '' -%}
      {%- assign shown_count = 0 -%}

      {%- for item in cart.items -%}
        {%- assign candidates = item.product.metafields.custom.upsell_product.value -%}
        {%- if candidates != nil -%}
          {%- for candidate in candidates -%}
            {%- if shown_count < max_upsells and candidate != nil -%}
              {%- assign cid = '|' | append: candidate.id | append: '|' -%}
              {%- unless cart_ids contains cid or shown_ids contains cid -%}
                {%- assign shown_ids = shown_ids | append: cid -%}
                {%- assign shown_count = shown_count | plus: 1 -%}
                {%- assign uv = candidate.first_available_variant | default: candidate.variants.first -%}
                {%- assign ui = candidate.featured_media -%}
                <div class="mw-upsell__slide">
                  <a href="{{ candidate.url }}">
                    {%- if ui -%}
                      <img src="{{ ui | image_url: width: 400 }}" alt="{{ ui.alt | escape }}" loading="lazy">
                    {%- endif -%}
                    <p class="carousel_item_title">{{ candidate.title }}</p>
                    <p class="carousel_item_price">{{ uv.price | money }}</p>
                  </a>
                </div>
              {%- endunless -%}
            {%- endif -%}
          {%- endfor -%}
        {%- endif -%}
      {%- endfor -%}

    </div>

    <button type="button" class="mw-upsell__arrow mw-upsell__arrow--next is-hidden" data-upsell-next="{{ upsell_uid }}" aria-label="Next">
      <svg viewBox="0 0 10 10"><polyline points="4,2 8,5 4,8"/></svg>
    </button>

  </div>
</div>

<script>
(function() {
  function initUpsellArrows(trackId) {
    var track = document.getElementById(trackId);
    if (!track) return;

    var outer = track.closest('.mw-upsell__outer');
    var btnPrev = outer.querySelector('[data-upsell-prev]');
    var btnNext = outer.querySelector('[data-upsell-next]');
    var slideW = 172; // 160px + 12px gap

    function update() {
      var hasOverflow = track.scrollWidth > track.clientWidth + 4;
      if (!hasOverflow) {
        btnPrev.classList.add('is-hidden');
        btnNext.classList.add('is-hidden');
        return;
      }
      var atStart = track.scrollLeft <= 4;
      var atEnd = track.scrollLeft + track.clientWidth >= track.scrollWidth - 4;
      btnPrev.classList.toggle('is-hidden', atStart);
      btnNext.classList.toggle('is-hidden', atEnd);
    }

    btnPrev.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      track.scrollLeft -= slideW * 2;
    });
    btnNext.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      track.scrollLeft += slideW * 2;
    });
    track.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', update);

    // Run update after layout settles + after images load
    requestAnimationFrame(update);
    setTimeout(update, 200);
    setTimeout(update, 800);
  }

  function tryInit() {
    initUpsellArrows('{{ upsell_uid }}');
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', tryInit);
  } else {
    tryInit();
  }

  // Re-init when mini cart opens (T4S fires drawer:open)
  document.addEventListener('drawer:open', function() {
    setTimeout(function() { tryInit(); }, 50);
  });
  // Also catch T4S cart update events
  document.addEventListener('cart:updated', function() {
    setTimeout(function() { tryInit(); }, 100);
  });
})();
</script>

{%- endif -%}