/* Add custom JS code below */ 
/* BEGIN LD INTERACTIVE LIGHTING
   Paste into the draft theme's JavaScript editor without <script> tags.
   Version 4: Arabic tone labels and a less blue white-light preview.
   Does not add/reorder top-level sections or continuously observe the editor.
*/
(() => {
  'use strict';
  const key = '__ldLightingGuideV4';
  if (window[key]) {
    window[key]();
    return;
  }
  const css = `
    .ld-lighting-guide {
      box-sizing: border-box; direction: rtl; background: #f7f3ee;
      color: #292725; padding: 64px 24px; margin-block: 48px;
      width: 100%; font-family: inherit; text-align: right;
    }
    .ld-lighting-guide *, .ld-lighting-guide *::before,
    .ld-lighting-guide *::after { box-sizing: border-box; }
    .ld-lighting-guide .ld-lg-grid {
      width: 100%; max-width: 1240px; margin-inline: auto; display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
      gap: 64px; align-items: center;
    }
    .ld-lighting-guide .ld-lg-copy { min-width: 0; }
    .ld-lighting-guide .ld-lg-eyebrow {
      color: #d48d31; font-size: 12px; font-weight: 600; margin: 0 0 15px;
    }
    .ld-lighting-guide .ld-lg-title {
      color: #292725; background: none; font-size: 39px; font-weight: 700;
      line-height: 1.5; margin: 0 0 15px;
    }
    .ld-lighting-guide .ld-lg-description {
      color: #554b44; font-size: 15px; line-height: 1.8; margin: 0 0 15px;
    }
    .ld-lighting-guide .ld-lg-controls {
      display: flex; width: 100%; border: 1px solid #dfd4c9;
      border-radius: 4px; padding: 4px; margin: 5px 0 10px; gap: 4px;
    }
    .ld-lighting-guide .ld-lg-controls button {
      appearance: none; flex: 1; min-width: 0; min-height: 48px;
      font: inherit; font-size: 15px; line-height: 1.5; cursor: pointer;
      background: transparent; color: #292725; border: 0; border-radius: 2px;
      padding: 9px 12px; box-shadow: none; margin: 0;
    }
    .ld-lighting-guide .ld-lg-controls button[aria-pressed="true"] {
      background: #b33436; color: #fff;
    }
    .ld-lighting-guide .ld-lg-note {
      color: #756a62; font-size: 11px; line-height: 1.8; margin: 0 0 15px;
    }
    .ld-lighting-guide .ld-lg-link {
      display: inline-flex; align-items: center; min-height: 44px;
      color: #b33436; font-size: 13px; font-weight: 600; text-decoration: none;
    }
    .ld-lighting-guide .ld-lg-link:hover { text-decoration: underline; }
    .ld-lighting-guide button:focus-visible, .ld-lighting-guide a:focus-visible {
      outline: 3px solid #d48d31; outline-offset: 3px;
    }
    .ld-lighting-guide .ld-lg-scene {
      position: relative; isolation: isolate; overflow: hidden;
      background: #47372b; margin: 0; min-width: 0; height: 360px;
    }
    .ld-lighting-guide .ld-lg-scene img {
      display: block; width: 100%; height: 100%; max-width: 100%;
      object-fit: cover; border-radius: 0; transition: filter .4s;
    }
    .ld-lighting-guide .ld-lg-scene[data-tone="neutral"] img {
      filter: saturate(.82) brightness(1.06);
    }
    .ld-lighting-guide .ld-lg-scene[data-tone="cool"] img {
      filter: saturate(.34) brightness(1.14) contrast(1.02);
    }
    .ld-lighting-guide .ld-lg-scene::after {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: transparent; transition: background .4s;
    }
    .ld-lighting-guide .ld-lg-tone {
      position: absolute; right: 20px; bottom: 20px; z-index: 1;
      background: #fff; color: #292725; padding: 7px 15px;
      font-size: 12px; line-height: 1.6;
    }
    @media (max-width: 767px) {
      .ld-lighting-guide { padding: 45px 16px; margin-block: 32px; }
      .ld-lighting-guide .ld-lg-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
      .ld-lighting-guide .ld-lg-title { font-size: 31px; }
      .ld-lighting-guide .ld-lg-description { font-size: 14px; }
      .ld-lighting-guide .ld-lg-scene { height: 230px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ld-lighting-guide .ld-lg-scene img,
      .ld-lighting-guide .ld-lg-scene::after { transition: none; }
    }
  `;
  const markup = `
    <div class="ld-lg-grid">
      <div class="ld-lg-copy">
        <p class="ld-lg-eyebrow">شوف الفرق</p>
        <h2 class="ld-lg-title">نفس المكان.<br>إحساس مختلف.</h2>
        <p class="ld-lg-description">درجة لون الإضاءة تغيّر إحساسك بالمكان.<br>جرّب التصوّر، وشوف الجو الأقرب لذوقك.</p>
        <div class="ld-lg-controls" role="group" aria-label="اختر لون الإضاءة">
          <button type="button" data-ld-tone="warm" aria-pressed="true">أصفر</button>
          <button type="button" data-ld-tone="neutral" aria-pressed="false">شمسي</button>
          <button type="button" data-ld-tone="cool" aria-pressed="false">أبيض</button>
        </div>
        <p class="ld-lg-note">محاكاة توضيحية فقط؛ اللون الفعلي يختلف حسب المنتج والشاشة.</p>
        <a class="ld-lg-link" href="https://lightdimensions-sa.com/ar/جميع-المنتجات/c963060892">جميع المنتجات ←</a>
      </div>
      <figure class="ld-lg-scene" data-tone="warm">
        <img src="https://cdn.files.salla.network/homepage/592262498/6bd0efaf-9498-4bfd-861e-04304ed91aed_584x320.webp"
          alt="غرفة معيشة لتوضيح اختلاف أجواء الإضاءة" width="584" height="320" loading="lazy" decoding="async">
        <figcaption class="ld-lg-tone" aria-live="polite" aria-atomic="true">أجواء صفراء</figcaption>
      </figure>
    </div>
  `;
  const labels = { warm: 'أجواء صفراء', neutral: 'أجواء شمسية', cool: 'أجواء بيضاء' };
  function mount() {
    const anchor = [...document.querySelectorAll('section.s-block--about')]
      .find(el => el.closest('.ld-about') && el.querySelector('.about__row')
        && !el.querySelector('header, footer'));
    const existing = document.getElementById('ld-interactive-lighting');
    if (!anchor) {
      return false;
    }
    /* Hide only the original About row. Keep its native component as the editor host. */
    const nativeAboutRow = anchor.querySelector('.about__row');
    if (nativeAboutRow) nativeAboutRow.style.setProperty('display', 'none', 'important');
    if (!document.getElementById('ld-lighting-guide-style')) {
      const style = document.createElement('style');
      style.id = 'ld-lighting-guide-style';
      style.textContent = css;
      document.head.append(style);
    }
    if (existing) {
      return true;
    }
    const section = document.createElement('div');
    section.id = 'ld-interactive-lighting';
    section.className = 'ld-lighting-guide';
    section.setAttribute('role', 'region');
    section.setAttribute('aria-label', 'جرّب أجواء الإضاءة');
    section.innerHTML = markup;
    section.addEventListener('click', event => {
      const button = event.target.closest('button[data-ld-tone]');
      if (!button || !section.contains(button)) return;
      const tone = button.dataset.ldTone;
      if (!Object.prototype.hasOwnProperty.call(labels, tone)) return;
      section.querySelectorAll('[data-ld-tone]').forEach(other => {
        other.setAttribute('aria-pressed', String(other === button));
      });
      section.querySelector('.ld-lg-scene').dataset.tone = tone;
      section.querySelector('.ld-lg-tone').textContent = labels[tone];
    });
    anchor.prepend(section);
    return true;
  }
  window[key] = mount;
  function start() {
    // Wait briefly for initial rendering, then stop. Reload preview after edits.
    let attempts = 0;
    function attempt() {
      if (mount() || ++attempts >= 60) return;
      setTimeout(attempt, 250);
    }
    attempt();
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', start, { once: true });
  } else {
    start();
  }
})();
/* END LD INTERACTIVE LIGHTING */
(() => {
  'use strict';

  const collections = [
    { label: 'قزاز وسمارت', categoryId: '424733574' },
    { label: 'مخشب وبيانو', categoryId: '284722867' },
    { label: 'مطفي وبيانو', categoryId: '1467517431' }
  ];

  function install() {
    if (document.querySelector('.ld-switch-showcase')) return true;

    const candidates = [...document.querySelectorAll('section.s-block--custom-products')];
    const panels = collections.map(({ categoryId }) => candidates.find(section => {
      const source = section.querySelector('salla-products-slider[source-value]')?.getAttribute('source-value') || '';
      return source.includes(categoryId);
    }));
    if (panels.some(panel => !panel)) return false;

    const first = panels[0];
    const showcase = document.createElement('section');
    showcase.className = 'ld-switch-showcase container s-block';
    first.before(showcase);
    const heading = document.createElement('header');
    heading.className = 'ld-switch-heading';
    heading.innerHTML = '<h2>مفاتيح وأفياش بتصاميم تناسب مساحتك</h2><p>تشكيلات متنوعة من القزاز الذكي، والمخشب، والمطفي.</p>';
    first.prepend(heading);

    const tablist = document.createElement('div');
    tablist.className = 'ld-switch-tabs';
    tablist.setAttribute('role', 'tablist');
    tablist.setAttribute('aria-label', 'تشكيلات المفاتيح والأفياش');

    panels.forEach((panel, index) => {
      panel.querySelector('.home-block-title')?.remove();
      panel.classList.add('ld-switch-panel');
      panel.dataset.ldCollection = collections[index].label;
      panel.id = `ld-switch-panel-${index + 1}`;
      panel.setAttribute('role', 'tabpanel');
      panel.setAttribute('aria-labelledby', `ld-switch-tab-${index + 1}`);
      showcase.append(panel);

      const tab = document.createElement('button');
      tab.type = 'button';
      tab.id = `ld-switch-tab-${index + 1}`;
      tab.setAttribute('role', 'tab');
      tab.setAttribute('aria-controls', panel.id);
      tab.setAttribute('aria-selected', index === 0 ? 'true' : 'false');
      tab.setAttribute('tabindex', index === 0 ? '0' : '-1');
      tab.textContent = collections[index].label;
      tab.addEventListener('click', () => activate(index, tablist, panels));
      tab.addEventListener('keydown', event => {
        if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
        event.preventDefault();
        const current = Number(tab.id.split('-').at(-1)) - 1;
        const next = event.key === 'Home' ? 0 : event.key === 'End' ? panels.length - 1
          : (current + (event.key === 'ArrowLeft' ? 1 : -1) + panels.length) % panels.length;
        const nextTab = tablist.querySelectorAll('[role="tab"]')[next];
        activate(next, tablist, panels);
        nextTab.focus();
      });
      tablist.append(tab);
      panel.hidden = index !== 0;
    });

    showcase.append(heading, tablist, ...panels);

    return true;
  }

  function activate(index, tablist, panels) {
    tablist.querySelectorAll('[role="tab"]').forEach((tab, i) => {
      tab.setAttribute('aria-selected', i === index ? 'true' : 'false');
      tab.setAttribute('tabindex', i === index ? '0' : '-1');
    });
    panels.forEach((panel, i) => { panel.hidden = i !== index; });
    window.dispatchEvent(new Event('resize'));
  }

  function start() {
    if (install()) return;
    let attempts = 0;
    const timer = window.setInterval(() => {
      attempts += 1;
      if (install() || attempts >= 20) window.clearInterval(timer);
    }, 500);
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start, { once: true });
  else start();
})();
(() => {
  'use strict';

  const showcases = [
    {
      categoryId: '458418433',
      className: 'ld-home-interior',
      title: 'حلول إنارة داخلية لمساحتك',
      subtitle: 'اختيارات من السبوتات والإطارات والبانلات وملحقاتها.'
    },
    {
      categoryId: '1485732928',
      className: 'ld-home-magnetic',
      title: 'حلول المسار المغناطيسي',
      subtitle: 'مسارات وإضاءات ومحوّلات وملحقات للنظام.'
    }
  ];

  function addHeadings() {
    for (const item of showcases) {
      const section = [...document.querySelectorAll('section.s-block--special-products-slider')]
        .find(block => block.querySelector(`salla-products-slider[source-value*="${item.categoryId}"]`));
      if (!section) continue;

      section.classList.add('ld-home-showcase', item.className);

      // Keep the product row still until the shopper chooses to move it.
      // Salla exposes autoplay on both the wrapper and its slider element.
      if (!section.dataset.ldAutoplayStopped) {
        section.querySelectorAll('salla-products-slider[autoplay]').forEach(slider => {
          slider.removeAttribute('autoplay');
        });
        section.querySelectorAll('salla-slider').forEach(slider => {
          slider.removeAttribute('auto-play');
          slider.autoPlay = false;
          if (typeof slider.slideReset === 'function') {
            try { slider.slideReset(); } catch (_) { /* Keep the theme's current position. */ }
          }
        });
        section.dataset.ldAutoplayStopped = 'true';
      }

      if (section.querySelector('.ld-home-showcase__heading')) continue;

      const heading = document.createElement('header');
      heading.className = 'ld-home-showcase__heading';
      const title = document.createElement('h2');
      title.textContent = item.title;
      const subtitle = document.createElement('p');
      subtitle.textContent = item.subtitle;
      heading.append(title, subtitle);

      const inner = section.querySelector('.special-products-slider__inner');
      if (inner) section.insertBefore(heading, inner);
    }
  }

  function start() {
    addHeadings();
    let attempts = 0;
    const timer = window.setInterval(() => {
      addHeadings();
      attempts += 1;
      if (document.querySelectorAll('.ld-home-showcase__heading').length === showcases.length || attempts >= 20) {
        window.clearInterval(timer);
      }
    }, 500);
  }

  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start, { once: true });
  else start();
})();