easyorders 0.1.0

package/cli/template/theme/script.js

@@ -0,0 +1,412 @@
+!(function () {
+  function e() {
+    var e = document.querySelector(".ab-header");
+    if (e && !e.dataset.scrollInit) {
+      e.dataset.scrollInit = "1";
+      var t = window.scrollY;
+      window.addEventListener(
+        "scroll",
+        function () {
+          var a = window.scrollY;
+          Math.abs(a - t) < 5 ||
+            (a > t && a > 100
+              ? e.classList.add("ab-hidden")
+              : e.classList.remove("ab-hidden"),
+            (t = a));
+        },
+        { passive: !0 }
+      );
+    }
+  }
+  function t() {
+    var e = document.getElementById("eo-menu-btn"),
+      t = document.getElementById("eo-mobile-menu"),
+      a = document.getElementById("eo-mobile-overlay"),
+      n = document.getElementById("eo-mobile-close");
+    function r() {
+      t.classList.remove("ab-open"),
+        a && a.classList.remove("ab-open"),
+        (document.body.style.overflow = "");
+    }
+    e &&
+      t &&
+      !e.dataset.menuInit &&
+      ((e.dataset.menuInit = "1"),
+      e.addEventListener("click", function () {
+        t.classList.add("ab-open"),
+          a && a.classList.add("ab-open"),
+          (document.body.style.overflow = "hidden");
+      }),
+      n && n.addEventListener("click", r),
+      a && a.addEventListener("click", r),
+      t.querySelectorAll(".ab-mobile-nav > a").forEach(function (e) {
+        e.addEventListener("click", r);
+      }),
+      t.querySelectorAll(".ab-mobile-accordion-panel a").forEach(function (e) {
+        e.addEventListener("click", r);
+      }),
+      t.querySelectorAll(".ab-mobile-accordion-trigger").forEach(function (e) {
+        e.dataset.accordionInit ||
+          ((e.dataset.accordionInit = "1"),
+          e.addEventListener("click", function () {
+            var a = e.closest(".ab-mobile-accordion");
+            if (a) {
+              var n = a.classList.contains("ab-open");
+              t.querySelectorAll(".ab-mobile-accordion.ab-open").forEach(function (e) {
+                e !== a && e.classList.remove("ab-open");
+              }),
+                a.classList.toggle("ab-open", !n);
+            }
+          }));
+      }));
+  }
+  function a() {
+    document.querySelectorAll(".ab-plist").forEach(function (e) {
+      if (!e.dataset.scrollArrowInit) {
+        e.dataset.scrollArrowInit = "1";
+        var t = e.querySelector(".ab-plist-track"),
+          a = e.querySelector(".ab-plist-prev"),
+          n = e.querySelector(".ab-plist-next");
+        t &&
+          (a &&
+            a.addEventListener("click", function () {
+              t.scrollBy({ left: -r(), behavior: "smooth" });
+            }),
+          n &&
+            n.addEventListener("click", function () {
+              t.scrollBy({ left: r(), behavior: "smooth" });
+            }));
+      }
+      function r() {
+        var e = t.querySelector(".ab-plist-card");
+        if (!e) return 0.8 * t.clientWidth;
+        var a = getComputedStyle(t),
+          n = parseFloat(a.gap) || 16;
+        return e.offsetWidth + n;
+      }
+    });
+  }
+  function n() {
+    document.querySelectorAll(".ab-slider").forEach(function (e) {
+      if (!e.dataset.sliderInit) {
+        e.dataset.sliderInit = "1";
+        var t = e.querySelectorAll(".ab-slider-slide");
+        if (!(t.length < 2)) {
+          var a = e.querySelector(".ab-slider-progress-bar"),
+            n = e.querySelector(".ab-slider-pause"),
+            r = parseInt(e.dataset.autoplay) || 5e3,
+            o = 0,
+            i = !1,
+            c = 0,
+            l = null;
+          n &&
+            n.addEventListener("click", function () {
+              i
+                ? d()
+                : ((i = !0), e.classList.add("ab-paused"), l && cancelAnimationFrame(l));
+            }),
+            d();
+        }
+      }
+      function s(e) {
+        if (!i) {
+          var n,
+            d = e - c,
+            u = Math.min((d / r) * 100, 100);
+          a && (a.style.width = u + "%"),
+            d >= r &&
+              ((n = o + 1),
+              t[o].classList.remove("ab-active"),
+              (o = n % t.length),
+              t[o].classList.add("ab-active"),
+              (c = performance.now())),
+            (l = requestAnimationFrame(s));
+        }
+      }
+      function d() {
+        (i = !1),
+          e.classList.remove("ab-paused"),
+          (c = performance.now()),
+          (l = requestAnimationFrame(s));
+      }
+    });
+  }
+  function r() {
+    var e = document.querySelectorAll(".ab-reveal:not(.ab-observed)");
+    if (e.length) {
+      var t = new IntersectionObserver(
+        function (e) {
+          e.forEach(function (e) {
+            e.isIntersecting &&
+              (e.target.classList.add("ab-visible"), t.unobserve(e.target));
+          });
+        },
+        { threshold: 0.1 }
+      );
+      e.forEach(function (e) {
+        e.classList.add("ab-observed"), t.observe(e);
+      });
+    }
+  }
+  function o() {
+    document.querySelectorAll(".ab-gallery").forEach(function (e) {
+      if (!e.dataset.galleryInit) {
+        e.dataset.galleryInit = "1";
+        var t = e.querySelector(".ab-gallery-main-media"),
+          a = e.querySelectorAll(".ab-gallery-thumb"),
+          n = [];
+        a.forEach(function (e) {
+          e.dataset.src && n.push(e.dataset.src);
+        }),
+          0 === n.length && t && n.push(t.src),
+          document.querySelectorAll("body > .ab-lightbox").forEach(function (e) {
+            e.remove();
+          });
+        var r = e.querySelector("[data-lightbox]");
+        r && document.body.appendChild(r);
+        var o = r && r.querySelector("[data-lightbox-img]"),
+          i = r && r.querySelector("[data-lightbox-counter]"),
+          c = 0;
+        a.forEach(function (n) {
+          n.addEventListener("click", function () {
+            var r = n.dataset.src;
+            r &&
+              t &&
+              ((t.src = r),
+              a.forEach(function (e) {
+                e.classList.remove("ab-active");
+              }),
+              n.classList.add("ab-active"));
+          });
+        }),
+          e.querySelectorAll("[data-gallery-open]").forEach(function (e) {
+            e.addEventListener("click", function (e) {
+              if (!e.target.closest("[data-src]") && r) {
+                var a = t ? n.indexOf(t.src) : 0;
+                l(-1 === a ? 0 : a),
+                  r.classList.add("ab-open"),
+                  (document.body.style.overflow = "hidden");
+              }
+            });
+          }),
+          r &&
+            r.addEventListener("click", function (e) {
+              var t = e.target;
+              if (t.closest("[data-lightbox-close]"))
+                return (
+                  r.classList.remove("ab-open"), void (document.body.style.overflow = "")
+                );
+              t.closest("[data-lightbox-prev]")
+                ? l(c - 1)
+                : t.closest("[data-lightbox-next]") && l(c + 1);
+            });
+      }
+      function l(e) {
+        (c = ((e % n.length) + n.length) % n.length),
+          o && (o.src = n[c]),
+          i && (i.textContent = c + 1 + " / " + n.length);
+      }
+    });
+  }
+  function i() {
+    document.querySelectorAll(".ab-reviews").forEach(function (e) {
+      e.getAttribute("data-reviews-init") ||
+        (e.setAttribute("data-reviews-init", "1"),
+        e.querySelectorAll("[data-review-comment]").forEach(function (e) {
+          var t = document.createElement("button");
+          (t.className = "ab-review-read-more"),
+            (t.type = "button"),
+            (t.textContent = "...Read more"),
+            e.parentNode.insertBefore(t, e.nextSibling),
+            requestAnimationFrame(function () {
+              e.scrollHeight > e.clientHeight + 2 && t.classList.add("ab-visible");
+            }),
+            t.addEventListener("click", function () {
+              e.classList.contains("ab-review-expanded")
+                ? (e.classList.remove("ab-review-expanded"),
+                  (t.textContent = "...Read more"))
+                : (e.classList.add("ab-review-expanded"), (t.textContent = "Show less"));
+            });
+        }));
+    });
+  }
+  function c() {
+    for (
+      var e = document.querySelectorAll(".ab-fake-counter"), t = 0;
+      t < e.length;
+      t++
+    ) {
+      var a = e[t];
+      a.dataset.counterInit ||
+        ((a.dataset.counterInit = "1"),
+        (function (e) {
+          var t = e.dataset.productId || "",
+            a = 36e5 * (parseFloat(e.dataset.hours) || 1);
+          try {
+            var n = localStorage.getItem("counter-" + t);
+            n && Number(n) > 36e4 && (a = Number(n));
+          } catch (e) {}
+          var r = Date.now() + a,
+            o = e.querySelector('[data-unit="days"]'),
+            i = e.querySelector('[data-unit="hours"]'),
+            c = e.querySelector('[data-unit="minutes"]'),
+            l = e.querySelector('[data-unit="seconds"]');
+          function s(e) {
+            return e < 10 ? "0" + e : String(e);
+          }
+          !(function e() {
+            var a = Math.max(0, r - Date.now()),
+              n = Math.floor(a / 1e3),
+              d = Math.floor(n / 86400);
+            n -= 86400 * d;
+            var u = Math.floor(n / 3600);
+            n -= 3600 * u;
+            var v = Math.floor(n / 60);
+            (n -= 60 * v),
+              o && (o.textContent = s(d)),
+              i && (i.textContent = s(u)),
+              c && (c.textContent = s(v)),
+              l && (l.textContent = s(n));
+            try {
+              localStorage.setItem("counter-" + t, String(a));
+            } catch (e) {}
+            a > 0 &&
+              requestAnimationFrame(function () {
+                setTimeout(e, 1e3);
+              });
+          })();
+        })(a));
+    }
+  }
+  function l() {
+    for (
+      var e = document.querySelectorAll(".ab-fake-visitor"), t = 0;
+      t < e.length;
+      t++
+    ) {
+      var a = e[t];
+      a.dataset.visitorInit ||
+        ((a.dataset.visitorInit = "1"),
+        (function (e) {
+          var t = parseInt(e.dataset.min, 10) || 10,
+            a = parseInt(e.dataset.max, 10) || 50,
+            n = e.querySelector(".ab-fv-count");
+          function r() {
+            return Math.floor(Math.random() * (a - t + 1)) + t;
+          }
+          n &&
+            ((n.textContent = String(r())),
+            setInterval(function () {
+              n.textContent = String(r());
+            }, 3e3));
+        })(a));
+    }
+  }
+  function s() {
+    for (
+      var e = document.querySelectorAll(".lq-desc-accordion"), t = 0;
+      t < e.length;
+      t++
+    ) {
+      var a = e[t];
+      a.dataset.descInit ||
+        ((a.dataset.descInit = "1"),
+        a.addEventListener("click", function (e) {
+          var t = e.target.closest(".lq-desc-toggle");
+          if (t) {
+            var a = t.parentElement,
+              n = a.querySelector(".lq-desc-panel");
+            if (n)
+              "true" === a.getAttribute("data-open")
+                ? (a.removeAttribute("data-open"),
+                  t.setAttribute("aria-expanded", "false"),
+                  (n.style.display = "none"))
+                : (a.setAttribute("data-open", "true"),
+                  t.setAttribute("aria-expanded", "true"),
+                  (n.style.display = "block"));
+          }
+        }));
+    }
+  }
+  function u() {
+    document
+      .querySelectorAll('.ab-announce[data-ann-type="slider"]')
+      .forEach(function (e) {
+        if (!e.dataset.annSliderInit) {
+          e.dataset.annSliderInit = "1";
+          var t = e.querySelectorAll(".ab-ann-slide");
+          if (t.length < 2) return;
+          var a = 0;
+          setInterval(function () {
+            var n = t[a],
+              next = (a + 1) % t.length;
+            n.classList.remove("ab-active");
+            n.classList.add("ab-exit-left");
+            t[next].classList.add("ab-active");
+            setTimeout(function () {
+              n.classList.remove("ab-exit-left");
+            }, 500);
+            a = next;
+          }, 3e3);
+        }
+      });
+  }
+  function v() {
+    document.querySelectorAll(".ab-ann-marquee").forEach(function (e) {
+      if (!e.dataset.marqueeInit) {
+        e.dataset.marqueeInit = "1";
+        var t = e.querySelector(".ab-ann-marquee-track");
+        if (!t) return;
+        var a = t.innerHTML,
+          n = t.scrollWidth,
+          r = e.offsetWidth;
+        if (n < 1) return;
+        var o = Math.ceil((2 * r) / n);
+        if (o < 2) o = 2;
+        t.innerHTML = "";
+        for (var i = 0; i < o; i++) t.insertAdjacentHTML("beforeend", a);
+        var c = t.scrollWidth / o,
+          l = Math.max(c / 40, 5);
+        t.style.setProperty("--marquee-dur", l + "s"),
+          t.style.setProperty("--marquee-offset", "-" + c + "px"),
+          t.classList.add("ab-running");
+      }
+    });
+  }
+  e(),
+    t(),
+    a(),
+    n(),
+    r(),
+    o(),
+    u(),
+    v(),
+    window.__abGalleryKeyInit ||
+      ((window.__abGalleryKeyInit = !0),
+      document.addEventListener("keydown", function (e) {
+        var t = document.querySelector("body > .ab-lightbox.ab-open");
+        if (t) {
+          if ("Escape" === e.key)
+            return (
+              t.classList.remove("ab-open"), void (document.body.style.overflow = "")
+            );
+          if ("ArrowLeft" !== e.key)
+            if ("ArrowRight" !== e.key);
+            else {
+              var a = t.querySelector("[data-lightbox-next]");
+              a && a.click();
+            }
+          else {
+            var n = t.querySelector("[data-lightbox-prev]");
+            n && n.click();
+          }
+        }
+      })),
+    i(),
+    c(),
+    l(),
+    s(),
+    new MutationObserver(function () {
+      e(), t(), a(), n(), r(), o(), u(), v(), i(), c(), l(), s();
+    }).observe(document.body, { childList: !0, subtree: !0 });
+})();

package/cli/template/theme/sections/breadcrumbs.liquid

@@ -0,0 +1,17 @@
+<nav class="ab-breadcrumbs" aria-label="Breadcrumb">
+  <ol class="ab-breadcrumbs-list">
+    <li class="ab-breadcrumbs-item">
+      <a href="/">{{ home_text }}</a>
+      <span class="ab-breadcrumbs-sep">/</span>
+    </li>
+    {% for crumb in categories %}
+      <li class="ab-breadcrumbs-item">
+        <a href="/collections/{{ crumb.slug }}">{{ crumb.name }}</a>
+        <span class="ab-breadcrumbs-sep">/</span>
+      </li>
+    {% endfor %}
+    <li class="ab-breadcrumbs-item ab-breadcrumbs-current" aria-current="page">
+      {{ product_name }}
+    </li>
+  </ol>
+</nav>

package/cli/template/theme/sections/categories.liquid

@@ -0,0 +1,10 @@
+<div class="ab-categories">
+  <div class="ab-categories-track">
+    {% for category in categories %}
+      <a href="/collections/{{ category.slug }}" class="ab-cat-card ab-reveal" style="animation-delay: {{ forloop.index | times: 0.04 }}s">
+        <img src="{{ category.thumb }}" alt="{{ category.name }}" />
+        <span class="ab-cat-label">{{ category.name }}</span>
+      </a>
+    {% endfor %}
+  </div>
+</div>

package/cli/template/theme/sections/fake-counter.liquid

@@ -0,0 +1,27 @@
+<div class="ab-fake-counter" data-product-id="{{ product_id }}" data-hours="{{ hours }}">
+  <div class="ab-fc-header">
+    <span class="ab-fc-icon" aria-hidden="true"></span>
+    <span class="ab-fc-title">{{ title }}</span>
+  </div>
+  <div class="ab-fc-digits" dir="ltr">
+    <div class="ab-fc-unit">
+      <span class="ab-fc-num" data-unit="days">00</span>
+      <span class="ab-fc-label">{{ label_days }}</span>
+    </div>
+    <span class="ab-fc-sep">:</span>
+    <div class="ab-fc-unit">
+      <span class="ab-fc-num" data-unit="hours">00</span>
+      <span class="ab-fc-label">{{ label_hours }}</span>
+    </div>
+    <span class="ab-fc-sep">:</span>
+    <div class="ab-fc-unit">
+      <span class="ab-fc-num" data-unit="minutes">00</span>
+      <span class="ab-fc-label">{{ label_minutes }}</span>
+    </div>
+    <span class="ab-fc-sep">:</span>
+    <div class="ab-fc-unit">
+      <span class="ab-fc-num" data-unit="seconds">00</span>
+      <span class="ab-fc-label">{{ label_seconds }}</span>
+    </div>
+  </div>
+</div>

package/cli/template/theme/sections/fake-stock.liquid

@@ -0,0 +1,6 @@
+<div class="ab-fake-stock">
+  <p class="ab-fs-text">{{ text }}</p>
+  <div class="ab-fs-bar">
+    <div class="ab-fs-fill"></div>
+  </div>
+</div>

package/cli/template/theme/sections/fake-visitor.liquid

@@ -0,0 +1,6 @@
+<div class="ab-fake-visitor" data-min="{{ min }}" data-max="{{ max }}">
+  <span class="ab-fv-eye" aria-hidden="true"></span>
+  <p class="ab-fv-text">
+    <span class="ab-fv-count">{{ min }}</span> {{ watching_text }}
+  </p>
+</div>

package/cli/template/theme/sections/featured-products.liquid

@@ -0,0 +1,110 @@
+<section class="ab-featured-products">
+  {% if section_title %}
+    <h2 class="ab-featured-section-title ab-reveal">{{ section_title }}</h2>
+  {% endif %}
+  <div class="ab-featured-layout">
+    <a
+      href="{% if category and category.slug %}/collections/{{ category.slug }}{% else %}#{% endif %}"
+      class="ab-featured-hero ab-reveal"
+    >
+      <img
+        src="{% if category and category.thumb %}{{ category.thumb }}{% elsif products and products[0] and products[0].thumb %}{{ products[0].thumb }}{% endif %}"
+        alt="{% if category and category.name %}{{ category.name }}{% else %}{{ section_title }}{% endif %}"
+        loading="lazy"
+      />
+      <span class="ab-featured-hero-overlay"></span>
+      <div class="ab-featured-hero-content">
+        {% if category and category.name %}
+          <p class="ab-featured-hero-subtitle">{{ category.name }}</p>
+        {% endif %}
+      </div>
+      {% unless hide_view_all %}<span class="ab-featured-hero-cta">{{shop_now}}</span>{% endunless %}
+    </a>
+
+    <div class="ab-featured-grid">
+      {% for product in products limit: 4 %}
+        {% assign color_variation = product.variations | where: "type", "color" | first %}
+        {% assign image_variation = product.variations | where: "type", "image" | first %}
+        {% assign swatch_total = 0 %}
+        {% if color_variation and color_variation.props %}
+          {% assign swatch_total = color_variation.props.size %}
+        {% elsif image_variation and image_variation.props %}
+          {% assign swatch_total = image_variation.props.size %}
+        {% endif %}
+
+        <a href="/products/{{ product.slug }}" class="ab-featured-card ab-reveal" style="animation-delay: {{ forloop.index | times: 0.04 }}s">
+          {% if product.sale_price and product.sale_price < product.price %}
+            {% assign discount = product.price | minus: product.sale_price | times: 100 | divided_by: product.price | floor %}
+            <span class="ab-featured-badge ab-sale-badge">{{ sale }} -{{ discount }}%</span>
+          {% endif %}
+
+          <div class="ab-featured-media">
+            <img class="ab-featured-img-primary" src="{{ product.thumb }}" alt="{{ product.name }}" loading="lazy" />
+            {% if product.images[0] %}
+              <img class="ab-featured-img-hover" src="{{ product.images[0] }}" alt="{{ product.name }}" loading="lazy" />
+            {% endif %}
+            {% comment %} Wishlist & Compare action buttons — dispatch custom events caught by the storefront JS layer
+            <div class="ab-card-actions">
+              <button
+                class="ab-wishlist-btn"
+                type="button"
+                aria-label="Add to wishlist"
+                onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-wishlist',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+              </button>
+              <button
+                class="ab-compare-btn"
+                type="button"
+                aria-label="Compare"
+                onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('toggle-compare',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
+              >
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 3 21 8 16 13"/><line x1="21" y1="8" x2="9" y2="8"/><polyline points="8 21 3 16 8 11"/><line x1="3" y1="16" x2="15" y2="16"/></svg>
+              </button>
+            </div>
+            {% endcomment %}
+          </div>
+
+          <div class="ab-featured-info">
+            <p class="ab-featured-name">{{ product.name }}</p>
+            <div class="ab-featured-price-row">
+              {% if product.sale_price and product.sale_price < product.price %}
+                <span class="ab-price-old">{{ product.price }} {{ currency }}</span>
+                <span class="ab-featured-price ab-price-sale">{{ product.sale_price }} {{ currency }}</span>
+              {% else %}
+                <span class="ab-featured-price">{{ product.price }} {{ currency }}</span>
+              {% endif %}
+            </div>
+
+
+            <div class="ab-featured-bottom-row">
+              <div class="ab-featured-swatches">
+                {% if color_variation and color_variation.props %}
+                  {% for prop in color_variation.props limit: 4 %}
+                    <span class="ab-featured-swatch" style="background: {{ prop.value }}" title="{{ prop.name }}"></span>
+                  {% endfor %}
+                {% elsif image_variation and image_variation.props %}
+                  {% for prop in image_variation.props limit: 4 %}
+                    <span class="ab-featured-swatch ab-featured-swatch-image" title="{{ prop.name }}">
+                      <img src="{{ prop.value }}" alt="{{ prop.name }}" loading="lazy" />
+                    </span>
+                  {% endfor %}
+                {% endif %}
+
+                {% if swatch_total > 4 %}
+                  <span class="ab-featured-swatch-more">+{{ swatch_total | minus: 4 }}</span>
+                {% endif %}
+              </div>
+
+              <button
+                class="ab-featured-add-btn"
+                type="button"
+                onclick="event.preventDefault();event.stopPropagation();this.dispatchEvent(new CustomEvent('quick-add',{bubbles:true,detail:{productId:'{{ product.id }}'}}));"
+>{{add}}</button>
+            </div>
+          </div>
+        </a>
+      {% endfor %}
+    </div>
+  </div>
+</section>

package/cli/template/theme/sections/fixed-buy-button.liquid

@@ -0,0 +1,46 @@
+<div class="ab-fixed-buy">
+  {% if thumb and thumb != "" %}
+    <div class="ab-fixed-buy-preview">
+      <img class="ab-fixed-buy-thumb" src="{{ thumb }}" alt="{{ product_name }}" />
+      <div class="ab-fixed-buy-info">
+        <span class="ab-fixed-buy-name">{{ product_name }}</span>
+        <div class="ab-fixed-buy-price-row">
+          {% if sale_price and sale_price < price %}
+            <span class="ab-fixed-buy-price-old">{{ price }} {{ currency }}</span>
+            <span class="ab-fixed-buy-price ab-fixed-buy-price-sale">{{ sale_price }} {{ currency }}</span>
+          {% else %}
+            <span class="ab-fixed-buy-price">{{ price }} {{ currency }}</span>
+          {% endif %}
+        </div>
+      </div>
+    </div>
+  {% endif %}
+
+  {% unless hide_quantity %}
+    <div class="ab-fixed-buy-qty">
+      <button
+        class="ab-fixed-buy-qty-btn"
+        type="button"
+        onclick="this.dispatchEvent(new CustomEvent('increment-quantity',{bubbles:true}));"
+        {% if increase_disabled %}disabled{% endif %}
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M7 1v12M1 7h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+      </button>
+      <span class="ab-fixed-buy-qty-value">{{ quantity }}</span>
+      <button
+        class="ab-fixed-buy-qty-btn"
+        type="button"
+        onclick="this.dispatchEvent(new CustomEvent('decrement-quantity',{bubbles:true}));"
+      >
+        <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M1 7h12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+      </button>
+    </div>
+  {% endunless %}
+
+  <button
+    class="ab-fixed-buy-btn"
+    type="button"
+    {% if disabled %}disabled{% endif %}
+    onclick="event.preventDefault();this.dispatchEvent(new CustomEvent('buy-now',{bubbles:true}));"
+  >{{ buy_now_text }}</button>
+</div>