document.addEventListener("DOMContentLoaded", function () {

  if (!window.location.href.includes("c31820096")) return;

  const targetDiv = document.querySelector(
    '.mb-4.sm\\:mb-6.flex.justify-between.items-center'
  );

  if (!targetDiv) return;

  const brandsHTML = `
  <div id="brands-box" style="padding:25px 0;">

    <!-- ياباني -->
    <h2 class="brands-title">🇯🇵 سيارات يابانية</h2>
    <div class="brands-grid">
        <a href="https://anjumtradingest.com/toyota/c1755756441"><img src="https://i.postimg.cc/fyDtBPYR/toyota.png"></a>

        <a href="https://anjumtradingest.com/nissan/c455102919"><img src="https://i.postimg.cc/FzNdD60F/NISSAN.png"></a>

        <a href="https://anjumtradingest.com/mazda/c672124507"><img src="https://i.postimg.cc/d18ZRFZv/mazda.png"></a>

<a href="https://anjumtradingest.com/hyundai/c558451613">
    <img src="https://i.postimg.cc/Gtd8qfGZ/hyundai.png">
</a>


        <a href="https://anjumtradingest.com/mirsubishi/c1471220645?filters[category_id]=1471220645"><img src="https://i.postimg.cc/FzNdD60v/mitsubishi.png"></a>

        <a href="https://anjumtradingest.com/subaru/c764540100"><img src="https://i.postimg.cc/rsM0QH5X/Subaru.png"></a>

        <a href="https://anjumtradingest.com/suzuki/c2138969029"><img src="https://i.postimg.cc/qq4hjF23/suzuki.png"></a>
    </div>

    <!-- كوري -->
    <h2 class="brands-title">🇰🇷 سيارات كورية</h2>
    <div class="brands-grid">
        <a href="https://anjumtradingest.com/kia/c1151018132"><img src="https://i.postimg.cc/sxsQwL5G/kia.png"></a>

        <a href="https://anjumtradingest.com/hyundai/c558451613"><img src="https://i.postimg.cc/Gtd8qfGZ/hyundai.png"></a>
    </div>

    <!-- ألماني -->
    <h2 class="brands-title">🇩🇪 سيارات ألمانية</h2>
    <div class="brands-grid">
        <a href="https://anjumtradingest.com/mercedes/c97840292"><img src="https://i.postimg.cc/C5SBm2bZ/mersedes.png"></a>

        <a href="https://anjumtradingest.com/bmw/c981718682"><img src="https://i.postimg.cc/gjmXN73r/BMW.png"></a>
    </div>

    <!-- أمريكي -->
    <h2 class="brands-title">🇺🇸 سيارات أمريكية</h2>
    <div class="brands-grid">
        <a href="https://anjumtradingest.com/chevrolet/c342422939"><img src="https://i.postimg.cc/Xq4GQP9q/chevrolet.png"></a>
    </div>

    <!-- فرنسي -->
    <h2 class="brands-title">🇫🇷 سيارات فرنسية</h2>
    <div class="brands-grid">
        <a href="https://anjumtradingest.com/renault/c1404360187"><img src="https://i.postimg.cc/7hwGmR0d/renault.png"></a>
    </div>

    <!-- يابانية تجارية -->
    <h2 class="brands-title">🇯🇵/🇹🇭 سيارات يابانية تجارية</h2>
    <div class="brands-grid">
        <a href="https://anjumtradingest.com/isuzu/c1324664713"><img src="https://i.postimg.cc/Y0MGbPQF/isuzu.png"></a>
    </div>

    <!-- فاخرة -->
    <h2 class="brands-title">🇯🇵/🇺🇸 سيارات فاخرة</h2>
    <div class="brands-grid">
        <a href="https://anjumtradingest.com/infiniti/c1930848926"><img src="https://i.postimg.cc/yxsgvG07/infinti.png"></a>

        <a href="https://anjumtradingest.com/lexus/c733671058"><img src="https://i.postimg.cc/KjxkJWtv/lexus.png"></a>
    </div>

</div>


  <style>
    #brands-box {
        width: 100%;
    }

    .brands-title {
        text-align: center;
        color: var(--color-primary);
        font-size: 22px;
        font-weight: bold;
        margin: 35px 0 15px;
    }

    .brands-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 أيقونات في الصف */
        gap: 25px;
        justify-items: center;
        padding: 10px 0 25px;
    }

    .brands-grid img {
        width: 400px; /* أكبر – أو نزود حسب ما تحبي */
        max-width: 100%;
        transition: 0.3s;
    }

    .brands-grid img:hover {
        transform: scale(1.12);
    }

    @media (max-width: 600px) {
        .brands-grid {
            grid-template-columns: repeat(2, 1fr); /* موبايل صفين فقط */
        }
        .brands-grid img {
            width: 300px;
        }
    }
  </style>
  `;

  targetDiv.insertAdjacentHTML("afterend", brandsHTML);

});
document.addEventListener("DOMContentLoaded", function () {

    function hidePlaceholders() {
        const items = document.querySelectorAll(".s-products-list-placeholder");
        if (items.length > 0) {
            items.forEach(el => el.style.display = "none");
        }
    }

    // نخفيه فورًا لو موجود
    hidePlaceholders();

    // ونراقب أي عناصر تتضاف بعدين
    const observer = new MutationObserver(() => hidePlaceholders());

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

});