/* Add custom Js styles below */ 

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

  /* ===============================
     STYLE
     =============================== */
  const style = document.createElement("style");
  style.innerHTML = `
    .branches-section {
      padding: 80px 20px;
      background: #ffffff;
      direction: rtl;
      text-align: center;
    }

    .branches-title {
      font-size: 28px;
      font-weight: 800;
      margin-bottom: 45px;
      color: #000;
    }

    .branches-grid {
      max-width: 1200px;
      margin: auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
    }

    .branch-card {
      display: block;
      background: #000;
      border-radius: 18px;
      padding: 28px 22px;
      text-decoration: none;
      box-shadow: 0 15px 35px rgba(0,0,0,0.25);
      transition: all 0.35s ease;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    .branch-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 2px solid #E6BC71;
      border-radius: 18px;
      opacity: 0.6;
      pointer-events: none;
    }

    .branch-card:hover {
      transform: translateY(-10px) scale(1.05);
      box-shadow: 0 25px 55px rgba(0,0,0,0.45);
    }

    .branch-city {
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 14px;
      color: #E6BC71;
    }

    .branch-list {
      font-size: 15px;
      font-weight: 600;
      color: #ffffff;
      line-height: 1.8;
    }

    .branch-list span {
      display: block;
    }

    @media (max-width: 992px) {
      .branches-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 480px) {
      .branches-grid {
        grid-template-columns: 1fr;
      }
    }
  `;
  document.head.appendChild(style);

  /* ===============================
     HTML
     =============================== */
  const branchesSection = document.createElement("section");
  branchesSection.className = "branches-section";
  branchesSection.innerHTML = `
    <h2 class="branches-title">فروعنا</h2>

    <div class="branches-grid">

      <a href="#" class="branch-card">
        <div class="branch-city">الطائف</div>
        <div class="branch-list">
          <span>الواحة بلازا</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">الباحة</div>
        <div class="branch-list">
          <span>الباحة مول</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">خميس مشيط</div>
        <div class="branch-list">
          <span>موجان</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">أبها</div>
        <div class="branch-list">
          <span>أبها بلازا</span>
          <span>الراشد مول</span>
          <span>لافندا بارك</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">جيزان</div>
        <div class="branch-list">
          <span>الراشد مول</span>
          <span>الكادي مول</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">الرياض</div>
        <div class="branch-list">
          <span>حياة مول</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">مكة</div>
        <div class="branch-list">
          <span>مكة مول</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">سراة عبيدة</div>
        <div class="branch-list">
         <span style="color: #fff;">الواحة مول</span>

       
        </div>
      </a>

    </div>
  `;

  /* ===============================
     INSERT BEFORE FEATURES
     =============================== */
  const observer = new MutationObserver(function () {
    const featuresSection = document.querySelector(".features-section");
    if (featuresSection && !document.querySelector(".branches-section")) {
      featuresSection.parentNode.insertBefore(branchesSection, featuresSection);
      observer.disconnect();
    }
  });

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

});



function fixFirstBannerOffset() {
  const header = document.querySelector(".store-header");
  const firstBanner = document.querySelector(
    ".s-block.s-block--fixed-banner.wide-placeholder"
  );

  if (!header || !firstBanner) return;

  const headerHeight = header.getBoundingClientRect().height;
  const isMobile = window.innerWidth <= 768;

  let offset;

  if (isMobile) {
    offset = headerHeight + 10; // موبايل: كامل الهيدر + أمان
  } else {
    offset = headerHeight + 15; // ديسكتوب
  }

  firstBanner.style.marginTop = offset + "px";
}

/* أول تحميل */
document.addEventListener("DOMContentLoaded", function () {
  fixFirstBannerOffset();

  /* إعادة الحساب بعد استقرار الصفحة */
  setTimeout(fixFirstBannerOffset, 300);
  setTimeout(fixFirstBannerOffset, 800);
});

/* عند تغيير المقاس أو تدوير الجوال */
window.addEventListener("resize", fixFirstBannerOffset);