/* Add custom Js styles below */ 
Salla.onReady(() => {

    if (!window.location.href.includes("/category/eAjYKa")) return;

    const waitForProducts = (callback) => {
        const el = document.querySelector("salla-products-list");
        if (el) return callback(el);

        const observer = new MutationObserver(() => {
            const el = document.querySelector("salla-products-list");
            if (el) {
                observer.disconnect();
                callback(el);
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    };

    waitForProducts((products) => {

        // ====== First Banner======
        if (!document.querySelector(".top-category-banner")) {

            const topBanner = document.createElement("section");
            topBanner.className = "top-category-banner";

            topBanner.style.width = "100vw";
            topBanner.style.position = "relative";
            topBanner.style.left = "50%";
            topBanner.style.right = "50%";
            topBanner.style.marginLeft = "-50vw";
            topBanner.style.marginRight = "-50vw";
            topBanner.style.marginBottom = "30px";

            topBanner.innerHTML = `
                <a href="#">
                    <img style="width:100%;display:block"
                    src="https://cdn.files.salla.network/homepage/550927382/3748ea3c-3c15-4f67-824a-21133d34a883.webp">
                </a>
            `;

            products.before(topBanner);
        }

        // ====== Categor Name ======
        if (!document.querySelector(".custom-category-title")) {

            const title = document.createElement("h2");
            title.className = "custom-category-title";
            title.innerText = "وافي التعليمية";

            title.style.fontSize = "24px";
            title.style.fontWeight = "bold";
            title.style.marginBottom = "20px";
            title.style.padding = "0 10px";

            const banner = document.querySelector(".top-category-banner");
            if (banner) banner.after(title);
        }

        // ====== Second Banner======
        if (!document.querySelector(".bottom-category-banner")) {

            const bottomBanner = document.createElement("section");
            bottomBanner.className = "bottom-category-banner";

            bottomBanner.style.width = "100vw";
            bottomBanner.style.position = "relative";
            bottomBanner.style.left = "50%";
            bottomBanner.style.right = "50%";
            bottomBanner.style.marginLeft = "-50vw";
            bottomBanner.style.marginRight = "-50vw";
            bottomBanner.style.marginTop = "30px";

            bottomBanner.innerHTML = `
        <a href="#">
            <img style="width:100%;display:block"
            src="https://cdn.files.salla.network/homepage/550927382/eeadacd8-c213-4c89-8d66-60e92de07d16.webp">
        </a>
    `;

            products.after(bottomBanner);
        }

    });

});