Select Your Fragrance – Copy – Copy – Copy – Copy – Copy

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
{% style %}
.bcozx-wrapper-{{ section.id }}{
  position:relative;
  width:100%;
  font-family:'DM Sans',sans-serif;
  z-index:1;
  margin:0;
  padding:50px 0;
  background:#fdf4eb;
}

.bcozx-wrapper-{{ section.id }} .bcozx-track{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;
  padding:0 24px;
  scroll-snap-type:x mandatory;
  align-items:stretch;
}
.bcozx-wrapper-{{ section.id }} .bcozx-track::-webkit-scrollbar{display:none;}

/* CARD */
.bcozx-wrapper-{{ section.id }} .bcozx-card{
  width:280px;
  min-width:280px;
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  background:#FFFFFF;
  border:1px solid #E7E7E2;
  border-radius:12px;
  overflow:hidden;
  scroll-snap-align:start;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  transition:box-shadow .25s ease, border-color .25s ease;
}
.bcozx-wrapper-{{ section.id }} .bcozx-card:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}

/* VIDEO */
.bcozx-wrapper-{{ section.id }} .bcozx-video{
  position:relative;
  overflow:hidden;
  background:#000;
  cursor:pointer;
  border-radius:0;
  aspect-ratio:9/16;
}
.bcozx-wrapper-{{ section.id }} .bcozx-video video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.bcozx-wrapper-{{ section.id }} .bcozx-views{
  position:absolute;
  top:14px;
  right:14px;
  display:flex;
  align-items:center;
  gap:5px;
  color:#fff;
  font-size:11px;
  font-weight:700;
  z-index:5;
  text-shadow:0 2px 4px rgba(0,0,0,.8),0 4px 12px rgba(0,0,0,.4);
}

/* SAVE / CORNER BADGE (top-left over video) */
.bcozx-wrapper-{{ section.id }} .bcozx-save-badge,
.bcozx-wrapper-{{ section.id }} .bcozx-corner-badge{
  position:absolute;
  top:0;
  left:14px;
  z-index:5;
  flex-direction:column;
  text-align:center;
  width:52px;
  padding:10px 6px 12px;
  font-size:12px;
  font-weight:700;
  font-family:'DM Sans',sans-serif;
  background:#1F3D22;
  color:#fff;
  border-radius:0 0 10px 10px;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
}

/* CARD BODY */
.bcozx-wrapper-{{ section.id }} .bcozx-card-body{
  padding:16px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.bcozx-wrapper-{{ section.id }} .bcozx-btn-row{
  display:flex;
  justify-content:flex-end;    margin-top: -35px;
}


/* TITLE */
.bcozx-wrapper-{{ section.id }} .bcozx-title{
  font-family:"Roboto Slab",serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:0;
  text-transform:none;
  line-height:1.3;
  color:#1A1A1A;
  text-decoration:none;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* REVIEW */
.bcozx-wrapper-{{ section.id }} .bcozx-review{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:14px;
  font-family:"Figtree",sans-serif;
  margin-top:-2px;
}
.bcozx-wrapper-{{ section.id }} .bcozx-star{ color:#F5A623; }
.bcozx-wrapper-{{ section.id }} .bcozx-rating-value{ font-weight:600; color:#333; }
.bcozx-wrapper-{{ section.id }} .bcozx-review-count{ color:#777; }

/* PRICE */
.bcozx-wrapper-{{ section.id }} .bcozx-price-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px;
  margin-top:4px;
}
.bcozx-wrapper-{{ section.id }} .bcozx-price-group{
  display:flex;
  align-items:flex-end;
  gap:6px;
  flex-wrap:nowrap;
}
.bcozx-wrapper-{{ section.id }} .bcozx-price{
  font-size:15px;
  font-weight:700;
  color:#1A1A1A;
  line-height:1;
}
.bcozx-wrapper-{{ section.id }} .bcozx-compare{
  color:#9A9A9A;
  text-decoration:line-through;
  font-size:13px;
  line-height:1;
}
.bcozx-wrapper-{{ section.id }} .bcozx-save{
  background:#5B6F3F;
  color:#fff;
  font-size:11px;
  font-weight:700;
  padding:3px 9px;
  border-radius:0;
  border:1px dashed #ffffff;
}

/* ADD TO CART BUTTON (card) */
.bcozx-wrapper-{{ section.id }} .bcozx-btn{
position: relative;
    width: 100%;
    height: 30px;
    border: none;
    border-radius: 8px;
    background: #1F3D22;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .3s ease, transform .15s ease;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
    width: 96px;
    padding: 0 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.bcozx-wrapper-{{ section.id }} .bcozx-btn:active{transform:scale(.97);}
.bcozx-wrapper-{{ section.id }} .bcozx-btn:disabled{cursor:default;}
.bcozx-wrapper-{{ section.id }} .bcozx-btn.is-added{background:#33321F;}

.bcozx-wrapper-{{ section.id }} .bcozx-btn-label,
.bcozx-wrapper-{{ section.id }} .bcozx-btn .bcozx-spinner,
.bcozx-wrapper-{{ section.id }} .bcozx-btn .bcozx-check{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  transition:opacity .25s ease, transform .25s ease;
}

.bcozx-wrapper-{{ section.id }} .bcozx-btn .bcozx-spinner{
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.5);
}
.bcozx-wrapper-{{ section.id }} .bcozx-btn .bcozx-check{
  font-size:15px;
  opacity:0;
  transform:translate(-50%,-50%) scale(.4);
}

.bcozx-wrapper-{{ section.id }} .bcozx-btn.is-loading .bcozx-btn-label{opacity:0;transform:translate(-50%,-50%) scale(.8);}
.bcozx-wrapper-{{ section.id }} .bcozx-btn.is-loading .bcozx-spinner{opacity:1;transform:translate(-50%,-50%) scale(1);animation:bcozx-spin-{{ section.id }} .6s linear infinite;}
.bcozx-wrapper-{{ section.id }} .bcozx-btn.is-loading .bcozx-check{opacity:0;}

.bcozx-wrapper-{{ section.id }} .bcozx-btn.is-added .bcozx-btn-label{opacity:0;transform:translate(-50%,-50%) scale(.8);}
.bcozx-wrapper-{{ section.id }} .bcozx-btn.is-added .bcozx-spinner{opacity:0;}
.bcozx-wrapper-{{ section.id }} .bcozx-btn.is-added .bcozx-check{opacity:1;transform:translate(-50%,-50%) scale(1);}

@keyframes bcozx-spin-{{ section.id }}{to{transform:translate(-50%,-50%) rotate(360deg);}}

/* ARROWS */
.bcozx-wrapper-{{ section.id }} .bcozx-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  border-radius:999px;
  cursor:pointer;
  z-index:50;
  color:#1F2A1F;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
  box-shadow:0 2px 8px rgba(0,0,0,.06),0 10px 25px rgba(0,0,0,.10);
}
.bcozx-wrapper-{{ section.id }} .bcozx-prev{left:16px;}
.bcozx-wrapper-{{ section.id }} .bcozx-next{right:16px;}

/* HEADING */
.bcozx-wrapper-{{ section.id }} .bcozx-heading{text-align:center;margin-bottom:50px;}
.bcozx-wrapper-{{ section.id }} .bcozx-heading h2{margin:0;font-size:32px;font-weight:800;color:#1F2A1F;line-height:1.2;}

/* ============================================
   POPUP (unchanged)
============================================ */
.bcozx-reel-popup-{{ section.id }}{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:9999;}
.bcozx-reel-popup-{{ section.id }}.active{display:flex;}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-inner{width:380px;max-width:95vw;height:666px;border-radius:0;overflow:hidden;position:relative;background:#000;}
.bcozx-reel-popup-{{ section.id }} video{width:100%;object-fit:cover;}
.bcozx-reel-popup-{{ section.id }} .bcozx-close{position:absolute;top:15px;right:15px;width:42px;height:42px;border:none;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;cursor:pointer;z-index:20;font-size:16px;}
.bcozx-reel-popup-{{ section.id }} .bcozx-controls{position:absolute;right:15px;bottom:160px;display:flex;flex-direction:column;gap:12px;z-index:20;}
.bcozx-reel-popup-{{ section.id }} .bcozx-controls button{width:52px;height:52px;border:none;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;}

.bcozx-reel-popup-{{ section.id }} .bcozx-popup-prev,
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-next{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border:none;border-radius:50%;
  background:rgba(255,255,255,.18);backdrop-filter:blur(10px);
  color:#fff;font-size:15px;cursor:pointer;z-index:25;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-prev:hover,
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-next:hover{background:rgba(255,255,255,.32);}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-prev{left:10px;}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-next{right:10px;}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-prev:disabled,
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-next:disabled{opacity:.25;cursor:default;}

.bcozx-reel-popup-{{ section.id }} .bcozx-popup-dots{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:25;}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:.2s;}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-dots span.active{background:#fff;transform:scale(1.25);}

.bcozx-reel-popup-{{ section.id }} .bcozx-product-info{position:absolute;left:0;right:0;bottom:0;padding:15px;display:flex;flex-direction:column;gap:12px;background:linear-gradient(transparent,rgba(0,0,0,.85));}
.bcozx-reel-popup-{{ section.id }} .bcozx-product-info img{width:70px;height:70px;border-radius:0;object-fit:cover;}
.bcozx-reel-popup-{{ section.id }} .bcozx-product-image{flex-shrink:0;}
.bcozx-reel-popup-{{ section.id }} .bcozx-product-content{display:flex;align-items:center;gap:12px;}
.bcozx-reel-popup-{{ section.id }} .bcozx-product-content h4{margin:0 0 5px;color:#fff;font-size:12px;text-transform:uppercase;}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-price{color:#fff;font-size:13px;font-weight:700;}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-compare{color:#cfcfcf;text-decoration:line-through;font-size:10px;}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-save{color:#8FD65C;font-size:10px;font-weight:700;}

.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn{
  position:relative;
  width:100%;height:46px;border:none;border-radius:0;
  background:#6E7F3C;color:#fff;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.02em;cursor:pointer;
  overflow:hidden;
  transition:background .3s ease, transform .15s ease;
}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn:hover{background:#5C6B32;}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn:active{transform:scale(.98);}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn.is-added{background:#4B6B23;}

.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn .bcozx-btn-label,
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn .bcozx-spinner,
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn .bcozx-check{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  transition:opacity .25s ease, transform .25s ease;
}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn .bcozx-spinner{
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.5);
}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn .bcozx-check{font-size:15px;opacity:0;transform:translate(-50%,-50%) scale(.4);}

.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn.is-loading .bcozx-btn-label{opacity:0;transform:translate(-50%,-50%) scale(.8);}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn.is-loading .bcozx-spinner{opacity:1;transform:translate(-50%,-50%) scale(1);animation:bcozx-spin-{{ section.id }} .6s linear infinite;}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn.is-added .bcozx-btn-label{opacity:0;transform:translate(-50%,-50%) scale(.8);}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn.is-added .bcozx-spinner{opacity:0;}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-cart-btn.is-added .bcozx-check{opacity:1;transform:translate(-50%,-50%) scale(1);}

.bcozx-reel-popup-{{ section.id }} .bcozx-popup-image{width:70px;height:70px;border-radius:0;object-fit:cover;display:block;}
.bcozx-reel-popup-{{ section.id }} .bcozx-product-text{flex:1;min-width:0;}
.bcozx-reel-popup-{{ section.id }} .bcozx-popup-title{margin:0 0 6px;color:#fff;font-size:12px;line-height:1.4;text-transform:uppercase;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ============================================
   MOBILE
============================================ */
@media(max-width:767px){
  .bcozx-wrapper-{{ section.id }} .bcozx-track{gap:14px;padding:0 14px;}
  .bcozx-wrapper-{{ section.id }} .bcozx-card{min-width:60vw;}
  .bcozx-wrapper-{{ section.id }} .bcozx-arrow{display:none;}
  .bcozx-reel-popup-{{ section.id }} .bcozx-popup-inner{width:100%;border-radius:0;}
  .bcozx-wrapper-{{ section.id }} .bcozx-heading h2{font-size:24px;}
  .bcozx-wrapper-{{ section.id }} .bcozx-video{aspect-ratio:12/16!important;}
}
{% endstyle %}

<div class="bcozx-wrapper-{{ section.id }}" data-bcozx-root>
  <div class="bcozx-heading">
    <h2>{{ section.settings.heading }}</h2>
  </div>

  <button class="bcozx-arrow bcozx-prev" aria-label="Previous"><i class="fa-solid fa-chevron-left"></i></button>
  <button class="bcozx-arrow bcozx-next" aria-label="Next"><i class="fa-solid fa-chevron-right"></i></button>

  <div class="bcozx-track" data-bcozx-track>
   {% for block in section.blocks %}
{% assign product = all_products[block.settings.product] %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
  {% assign on_sale = true %}
  {% assign discount = product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round %}
{% endif %}
{% assign rating_decimal = product.id | modulo: 8 | plus: 2 %}
{% assign reviews = product.id | modulo: 900 | plus: 100 %}

<div class="bcozx-card">
  <div class="bcozx-video bcozx-open-reel"
       data-video="{{ block.settings.video.sources.first.url }}"
       data-title="{{ product.title }}"
       data-price="{{ product.price | money }}"
       data-compare="{{ product.compare_at_price | money }}"
       data-save="{% if on_sale %}{{ discount }}{% endif %}"
       data-image="{{ product.featured_image | image_url: width:600 }}"
       data-variant="{{ product.selected_or_first_available_variant.id }}">

    {% if on_sale %}
      <span class="bcozx-corner-badge bcozx-corner-badge--sale">-{{ discount }}% OFF</span>
    {% endif %}

    <div class="bcozx-views"><i class="fa-solid fa-eye"></i> {{ block.settings.views }}</div>

    {{ block.settings.video | video_tag: autoplay:true, loop:true, muted:true, controls:false, playsinline:true }}
  </div>

  <div class="bcozx-card-body">

    <div class="bcozx-btn-row">
      <button class="bcozx-btn" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
        <span class="bcozx-btn-label">Add To Cart</span>
        <span class="bcozx-spinner"></span>
        <i class="fa-solid fa-check bcozx-check"></i>
      </button>
    </div>

    <a href="{{ product.url }}" class="bcozx-title">{{ product.title }}</a>

    <div class="bcozx-review">
      <span class="bcozx-star">★</span>
      <span class="bcozx-rating-value">4.{{ rating_decimal }}</span>
      <span class="bcozx-review-count">({{ reviews }} reviews)</span>
    </div>

    <div class="bcozx-price-row">
      <div class="bcozx-price-group">
        {% if on_sale %}
          <span class="bcozx-compare">{{ product.compare_at_price | money }}</span>
        {% endif %}
        <span class="bcozx-price">{{ product.price | money }}</span>
      </div>
    </div>

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

<div class="bcozx-reel-popup-{{ section.id }}" data-bcozx-popup>
  <div class="bcozx-popup-inner">

    <button class="bcozx-close" data-bcozx-close><i class="fa-solid fa-xmark"></i></button>
    <div class="bcozx-popup-dots" data-bcozx-dots></div>

    <button class="bcozx-popup-prev" data-bcozx-prev aria-label="Previous video">
      <i class="fa-solid fa-chevron-left"></i>
    </button>
    <button class="bcozx-popup-next" data-bcozx-next aria-label="Next video">
      <i class="fa-solid fa-chevron-right"></i>
    </button>

    <video data-bcozx-video autoplay loop muted playsinline></video>

    <div class="bcozx-controls">
      <button data-bcozx-play><i class="fa-solid fa-pause"></i></button>
      <button data-bcozx-mute><i class="fa-solid fa-volume-xmark"></i></button>
    </div>

    <div class="bcozx-product-info">
      <div class="bcozx-product-content">
        <div class="bcozx-product-image"><img class="bcozx-popup-image" data-bcozx-image alt=""></div>
        <div class="bcozx-product-text">
          <h4 class="bcozx-popup-title" data-bcozx-title></h4>
          <div class="bcozx-price-row">
            <span class="bcozx-popup-price" data-bcozx-price></span>
            <span class="bcozx-popup-compare" data-bcozx-compare></span>
          </div>
          <div class="bcozx-popup-save" data-bcozx-save></div>
        </div>
      </div>
      <button class="bcozx-popup-cart-btn" data-bcozx-cart>
        <span class="bcozx-btn-label">Add To Cart</span>
        <span class="bcozx-spinner"></span>
        <i class="fa-solid fa-check bcozx-check"></i>
      </button>
    </div>

  </div>
</div>

<script>
(function () {
  function init() {
    var root = document.querySelector('.bcozx-wrapper-{{ section.id }}[data-bcozx-root]');
    var popup = document.querySelector('.bcozx-reel-popup-{{ section.id }}[data-bcozx-popup]');
    if (!root || !popup) return;

    var track   = root.querySelector('[data-bcozx-track]');
    var nextArr = root.querySelector('.bcozx-next');
    var prevArr = root.querySelector('.bcozx-prev');

    nextArr && nextArr.addEventListener('click', function(){ track.scrollBy({left:320, behavior:'smooth'}); });
    prevArr && prevArr.addEventListener('click', function(){ track.scrollBy({left:-320, behavior:'smooth'}); });

    /* CARD ADD TO CART */
    root.querySelectorAll('.bcozx-btn').forEach(function (btn) {
      btn.addEventListener('click', function () {
        if (btn.classList.contains('is-loading') || btn.classList.contains('is-added')) return;
        btn.classList.add('is-loading');
        btn.disabled = true;

        fetch('/cart/add.js', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ id: btn.dataset.variantId, quantity: 1 })
        })
          .then(function (r) { return r.json(); })
          .then(function () {
            btn.classList.remove('is-loading');
            btn.classList.add('is-added');
            setTimeout(function () {
              btn.classList.remove('is-added');
              btn.disabled = false;
            }, 1500);
          })
          .catch(function () {
            btn.classList.remove('is-loading');
            btn.disabled = false;
          });
      });
    });

    /* POPUP ELEMENTS */
    var video    = popup.querySelector('[data-bcozx-video]');
    var title    = popup.querySelector('[data-bcozx-title]');
    var image    = popup.querySelector('[data-bcozx-image]');
    var price    = popup.querySelector('[data-bcozx-price]');
    var compare  = popup.querySelector('[data-bcozx-compare]');
    var save     = popup.querySelector('[data-bcozx-save]');
    var cartBtn  = popup.querySelector('[data-bcozx-cart]');
    var playBtn  = popup.querySelector('[data-bcozx-play]');
    var muteBtn  = popup.querySelector('[data-bcozx-mute]');
    var prevBtn  = popup.querySelector('[data-bcozx-prev]');
    var nextBtn  = popup.querySelector('[data-bcozx-next]');
    var closeBtn = popup.querySelector('[data-bcozx-close]');
    var dotsWrap = popup.querySelector('[data-bcozx-dots]');

    var cards = Array.from(root.querySelectorAll('.bcozx-open-reel'));
    var currentIndex = 0;
    var variantId = '';

    function buildDots() {
      dotsWrap.innerHTML = '';
      cards.forEach(function (_, i) {
        var dot = document.createElement('span');
        if (i === currentIndex) dot.classList.add('active');
        dotsWrap.appendChild(dot);
      });
    }

    function updateDots() {
      dotsWrap.querySelectorAll('span').forEach(function (d, i) {
        d.classList.toggle('active', i === currentIndex);
      });
    }

    function updateArrows() {
      prevBtn.disabled = currentIndex === 0;
      nextBtn.disabled = currentIndex === cards.length - 1;
    }

    function openCard(index) {
      currentIndex = index;
      var card = cards[index];

      video.src = card.dataset.video;
      title.textContent   = card.dataset.title   || '';
      price.textContent   = card.dataset.price   || '';
      compare.textContent = card.dataset.compare || '';
      image.src            = card.dataset.image  || '';
      variantId             = card.dataset.variant;

      var sp = card.dataset.save;
      save.textContent = sp ? sp + '% OFF' : '';

      video.muted = true;
      playBtn.innerHTML = '<i class="fa-solid fa-pause"></i>';
      muteBtn.innerHTML = '<i class="fa-solid fa-volume-xmark"></i>';
      video.play();

      updateDots();
      updateArrows();
    }

    cards.forEach(function (card, i) {
      card.addEventListener('click', function () {
        popup.classList.add('active');
        buildDots();
        openCard(i);
      });
    });

    prevBtn.addEventListener('click', function (e) {
      e.stopPropagation();
      if (currentIndex > 0) openCard(currentIndex - 1);
    });

    nextBtn.addEventListener('click', function (e) {
      e.stopPropagation();
      if (currentIndex < cards.length - 1) openCard(currentIndex + 1);
    });

    var touchStartX = 0;
    popup.addEventListener('touchstart', function (e) { touchStartX = e.changedTouches[0].clientX; }, { passive: true });
    popup.addEventListener('touchend', function (e) {
      var diff = touchStartX - e.changedTouches[0].clientX;
      if (Math.abs(diff) > 50) {
        if (diff > 0 && currentIndex < cards.length - 1) openCard(currentIndex + 1);
        if (diff < 0 && currentIndex > 0) openCard(currentIndex - 1);
      }
    });

    closeBtn.addEventListener('click', closePopup);
    popup.addEventListener('click', function (e) { if (e.target === popup) closePopup(); });

    function closePopup() {
      popup.classList.remove('active');
      video.pause();
      video.currentTime = 0;
      video.removeAttribute('src');
    }

    playBtn.addEventListener('click', function () {
      if (video.paused) { video.play(); playBtn.innerHTML = '<i class="fa-solid fa-pause"></i>'; }
      else { video.pause(); playBtn.innerHTML = '<i class="fa-solid fa-play"></i>'; }
    });

    muteBtn.addEventListener('click', function () {
      video.muted = !video.muted;
      muteBtn.innerHTML = video.muted
        ? '<i class="fa-solid fa-volume-xmark"></i>'
        : '<i class="fa-solid fa-volume-high"></i>';
    });

    cartBtn.addEventListener('click', function () {
      if (cartBtn.classList.contains('is-loading') || cartBtn.classList.contains('is-added')) return;
      cartBtn.classList.add('is-loading');
      cartBtn.disabled = true;

      fetch('/cart/add.js', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ id: variantId, quantity: 1 })
      })
        .then(function (r) { return r.json(); })
        .then(function () {
          cartBtn.classList.remove('is-loading');
          cartBtn.classList.add('is-added');
          setTimeout(function () {
            cartBtn.classList.remove('is-added');
            cartBtn.disabled = false;
          }, 1500);
        })
        .catch(function () {
          cartBtn.classList.remove('is-loading');
          cartBtn.disabled = false;
        });
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
})();
</script>

{% schema %}
{
  "name":"BCOZX Video Slider",
  "settings":[{"type":"text","id":"heading","label":"Heading","default":"Trending Products"}],
  "blocks":[{"type":"item","name":"Video Product","settings":[
    {"type":"video","id":"video","label":"Video"},
    {"type":"product","id":"product","label":"Product"},
    {"type":"text","id":"views","label":"View Count","default":"2.1M Views"}
  ]}],
  "presets":[{"name":"BCOZX Premium Video Slider"}]
}
{% endschema %}