<!-- بعد ملف الثيم -->
<style id="hour-sale-badge-css">
  :root{
    --sale-red:#ef4444;     /* أحمر النسبة */
    --sale-dark:#111;       /* خلفية كلمة Sale */
    --sale-text:#fff;
    --sale-radius:12px;
    --sale-shadow:0 10px 18px rgba(0,0,0,.12);
    --sale-font: 800 12px/1 "Cairo", system-ui, sans-serif;
  }

  /* مكان البادج أعلى-يسار على الكروت */
  .home_products_grid_card .hour-sale-badge,
  .products_grid_card .hour-sale-badge,
  .default_product_featured_card .hour-sale-badge{
    position:absolute; inset-inline-start:10px; top:10px; z-index:3;
  }

  /* الشكل العام للبادج (يمشي RTL عشان Sale يمين والنسبة شمال) */
  .hour-sale-badge{
    direction: rtl;
    display:inline-flex; align-items:center; gap:0;
    overflow:hidden; background:transparent !important; color:var(--sale-text);
    border:0; padding:0 !important; border-radius:var(--sale-radius);
    box-shadow:var(--sale-shadow); font: var(--sale-font);
  }
  .hour-sale-badge .hsale{ background:var(--sale-dark); padding:6px 10px 6px 8px; }
  .hour-sale-badge .hperc{ background:var(--sale-red);  padding:6px 8px 6px 10px; }

  /* لو كان الثيم بيعمل البادج القديمة حمرا – لغِ الخلفية عليها */
  .hour-sale-source{ background:transparent !important; color:inherit !important; padding:0 !important; }
</style>

<script id="hour-sale-badge-js">
  (function(){
    // عناصر البادج الأصلية اللي الثيم بيحط فيها النسبة
    var BADGE_SEL = [
      '.home_products_grid_card span[class*="inline-block"][class*="bg-"]',
      '.products_grid_card span[class*="inline-block"][class*="bg-"]',
      '.default_product_featured_card span[class*="inline-block"][class*="bg-"]'
    ].join(',');

    function makeBadge(percentText){
      // استخرج الرقم وحوّله لنسبة صحيحة
      var m = (percentText||'').match(/[\d]+(?:[.,]\d+)?/);
      if(!m) return null;
      var n = Math.round(parseFloat(m[0].replace(',', '.')));
      n = isFinite(n) ? n : null;
      if(n==null) return null;

      var wrapper = document.createElement('span');
      wrapper.className = 'hour-sale-badge';
      wrapper.innerHTML = '<span class="hsale">Sale</span><span class="hperc">'+ n + '%</span>';
      return wrapper;
    }

    function init(){
      var nodes = document.querySelectorAll(BADGE_SEL);
      nodes.forEach(function(el){
        if(el.dataset.hourSaleDone) return;

        var badge = makeBadge(el.textContent.trim());
        if(!badge) return;

        // علّم العنصر عشان ما نكررش
        el.dataset.hourSaleDone = '1';
        el.classList.add('hour-sale-source');

        // استبدل المحتوى ببادجنا – مع الحفاظ على مكانه في الكارت
        // لو داخل إيمج أو كوفر، غالباً العنصر نفسه positioned – فنعمل replaceNode
        try{
          el.replaceWith(badge);
        }catch(_){
          // لو replaceWith مش مدعوم
          el.parentNode && el.parentNode.insertBefore(badge, el);
          el.style.display = 'none';
        }
      });
    }

    if(document.readyState === 'loading'){
      document.addEventListener('DOMContentLoaded', init);
    }else{
      init();
    }

    // لو فيه كروت بتتضاف لاحقاً (سلايدر/تحميل كسول)
    var obs = ('MutationObserver' in window) && new MutationObserver(function(muts){
      for(var i=0;i<muts.length;i++){
        if(muts[i].addedNodes && muts[i].addedNodes.length){ init(); break; }
      }
    });
    obs && obs.observe(document.documentElement, {childList:true, subtree:true});
  })();
</script>
