(function(){
  const style = document.createElement('style');
  style.innerHTML = `
    /* الزرار الأساسي */
    .s-product-card-entry .btn, 
    .s-product-card-entry button {
      position: relative;
      overflow: hidden; /* عشان اللمعة متطلعش بره */
      transition: all 0.4s ease;
      background: #1E646A; 
      color: #fff;
      border: none;
      border-radius: 8px;
    }

    /* هوفر الجريدينت */
    .s-product-card-entry .btn:hover,
    .s-product-card-entry button:hover {
      background: linear-gradient(135deg, #1E646A, #2a7f86, #3d9da3);
      box-shadow: 0 8px 20px rgba(30, 100, 106, 0.4);
      cursor: pointer;
    }

    /* لمعة متحركة */
    .s-product-card-entry .btn::after,
    .s-product-card-entry button::after {
      content: "";
      position: absolute;
      top: -50%;
      left: -30%;
      width: 60%;
      height: 200%;
      background: rgba(255, 255, 255, 0.4);
      transform: rotate(25deg);
      transition: transform 0.6s ease;
    }

    .s-product-card-entry .btn:hover::after,
    .s-product-card-entry button:hover::after {
      transform: translateX(200%) rotate(25deg);
    }
  `;
  document.head.appendChild(style);
})();



document.addEventListener("DOMContentLoaded", () => {
  // إنشاء CSS خاص بالانيميشن وإضافته في <style>
  const style = document.createElement("style");
  style.textContent = `
    .grid .banner-entry {
      opacity: 0;
      transform: scale(0.9);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .grid .banner-entry.show {
      opacity: 1;
      transform: scale(1);
    }
  `;
  document.head.appendChild(style);

  // نجيب العناصر
  const items = document.querySelectorAll(".grid .banner-entry");

  // نستخدم IntersectionObserver لمراقبة العناصر
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("show");
      } else {
        entry.target.classList.remove("show"); // يتشال لما يختفي من الشاشة
      }
    });
  }, { threshold: 0.2 }); // يبدأ الأنيميشن لما 20% من العنصر يظهر

  // نراقب كل عنصر
  items.forEach(item => observer.observe(item));
});

document.addEventListener("DOMContentLoaded", function () {
  const el = document.querySelector(".d-flex.justify-content-center.mt-3 .list.list--brands li.text-center");
  if (el) {
    el.style.display = "none";
  }
});