(function () {
  "use strict";

  const CONFIG = {
    fontUrl:
      "https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap",
    styleId: "zaya-professional-theme",
    fontId: "zaya-cairo-font",
    bodyClass: "zaya-polished",
  };

  const CSS = String.raw`
    :root {
      --zaya-peach: #f4b59f;
      --zaya-peach-deep: #e98563;
      --zaya-blush: #fbd8cb;
      --zaya-cream: #fff8f3;
      --zaya-cream-2: #fffdfb;
      --zaya-brown: #5a2f24;
      --zaya-brown-soft: #785047;
      --zaya-line: rgba(90, 47, 36, 0.10);
      --zaya-shadow: 0 16px 42px rgba(100, 55, 39, 0.10);
      --zaya-shadow-hover: 0 22px 55px rgba(100, 55, 39, 0.17);
      --zaya-radius-lg: 28px;
      --zaya-radius-md: 20px;
    }

    html {
      scroll-behavior: smooth;
    }

    body.zaya-polished,
    body.zaya-polished button,
    body.zaya-polished input,
    body.zaya-polished select,
    body.zaya-polished textarea {
      font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", sans-serif !important;
    }

    body.zaya-polished {
      color: var(--zaya-brown);
      background:
        radial-gradient(
          circle at 100% 14%,
          rgba(244, 181, 159, 0.11),
          transparent 24rem
        ),
        var(--zaya-cream-2);
    }

    body.zaya-polished :where(h1, h2, h3, h4, h5, h6) {
      color: var(--zaya-brown);
      letter-spacing: -0.025em;
    }

    body.zaya-polished :where(a, button) {
      -webkit-tap-highlight-color: transparent;
    }

    /* الشريط العلوي */

    .zaya-brand-strip {
      position: relative;
      z-index: 60;
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 7px 16px;
      color: #fffaf6;
      background: linear-gradient(
        110deg,
        #5a2f24,
        #714033 58%,
        #5a2f24
      );
      font-size: 12px;
      font-weight: 600;
      text-align: center;
    }

    /* الهيدر */

    body.zaya-polished .store-header {
      position: sticky;
      top: 0;
      z-index: 55;
      background: rgba(255, 253, 251, 0.91);
      border-bottom: 1px solid var(--zaya-line);
      box-shadow: 0 8px 28px rgba(90, 47, 36, 0.055);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
    }

    body.zaya-polished .store-header img[alt*="logo" i] {
      border-radius: 13px;
      box-shadow: 0 8px 22px rgba(90, 47, 36, 0.11);
    }

    body.zaya-polished .main-menu > li > a {
      position: relative;
      color: var(--zaya-brown) !important;
      font-weight: 700;
      transition: color 180ms ease;
    }

    body.zaya-polished .main-menu > li > a::after {
      content: "";
      position: absolute;
      right: 50%;
      bottom: -7px;
      width: 0;
      height: 2px;
      border-radius: 99px;
      background: var(--zaya-peach-deep);
      transform: translateX(50%);
      transition: width 180ms ease;
    }

    body.zaya-polished .main-menu > li > a:hover,
    body.zaya-polished .main-menu > li > a:focus-visible {
      color: var(--zaya-peach-deep) !important;
    }

    body.zaya-polished .main-menu > li > a:hover::after,
    body.zaya-polished .main-menu > li > a:focus-visible::after {
      width: 72%;
    }

    body.zaya-polished
      :where(
        .s-user-menu-login-btn,
        .s-cart-summary-wrapper,
        .header-btn
      ) {
      border: 1px solid var(--zaya-line);
      border-radius: 999px;
      background: #ffffff;
      transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
    }

    body.zaya-polished
      :where(
        .s-user-menu-login-btn,
        .s-cart-summary-wrapper,
        .header-btn
      ):hover {
      transform: translateY(-2px);
      border-color: rgba(233, 133, 99, 0.5);
      box-shadow: 0 10px 22px rgba(90, 47, 36, 0.09);
    }

    body.zaya-polished .s-cart-summary-count {
      color: #ffffff !important;
      background: var(--zaya-peach-deep) !important;
    }

    /* مربع البحث */

    body.zaya-polished
      :where(.header-search, .s-search-container, salla-search)
      :where(input, .s-search-input) {
      color: var(--zaya-brown) !important;
      background: rgba(255, 248, 243, 0.92) !important;
      border: 1px solid transparent !important;
      border-radius: 999px !important;
      transition:
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
    }

    body.zaya-polished
      :where(.header-search, .s-search-container, salla-search)
      :where(input, .s-search-input):focus {
      background: #ffffff !important;
      border-color: rgba(233, 133, 99, 0.5) !important;
      box-shadow: 0 0 0 4px rgba(244, 181, 159, 0.16) !important;
      outline: none !important;
    }

    /* المسافات بين الأقسام */

    body.zaya-polished main > .s-block {
      margin-top: clamp(32px, 4vw, 54px) !important;
    }

    body.zaya-polished main > .s-block:first-child {
      margin-top: clamp(24px, 3vw, 42px) !important;
    }

    body.zaya-polished .s-block__title,
    body.zaya-polished
      .s-products-slider-wrapper
      > .s-slider-block__title {
      margin-bottom: 24px;
    }

    body.zaya-polished .s-block__title h2,
    body.zaya-polished .s-slider-block__title h2,
    body.zaya-polished .s-products-slider-wrapper h2 {
      position: relative;
      width: fit-content;
      color: var(--zaya-brown) !important;
      font-weight: 800 !important;
    }

    body.zaya-polished .s-block__title h2::after,
    body.zaya-polished .s-slider-block__title h2::after,
    body.zaya-polished .s-products-slider-wrapper h2::after {
      content: "";
      display: block;
      width: 42px;
      height: 4px;
      margin-top: 8px;
      border-radius: 99px;
      background: linear-gradient(
        90deg,
        var(--zaya-peach-deep),
        var(--zaya-blush)
      );
    }

    body.zaya-polished
      :where(
        .s-block__title-nav,
        .s-slider-block__title-right,
        a[href*="show-all"]
      ) {
      color: var(--zaya-peach-deep) !important;
      font-weight: 700;
    }

    /* البنر الافتتاحي */

    body.zaya-polished .s-block--photos-slider {
      position: relative;
      isolation: isolate;
      padding-block: 20px;
      background:
        radial-gradient(
          circle at 17% 25%,
          rgba(244, 181, 159, 0.22),
          transparent 27rem
        ),
        linear-gradient(
          180deg,
          rgba(255, 248, 243, 0.82),
          rgba(255, 253, 251, 0)
        );
    }

    body.zaya-polished .s-block--photos-slider::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 5% 7% auto auto;
      width: 150px;
      height: 150px;
      border: 1px solid rgba(233, 133, 99, 0.15);
      border-radius: 50% 10% 50% 15%;
      transform: rotate(28deg);
    }

    body.zaya-polished
      .photos-slider
      :where(.swiper-slide, .swiper-slide a) {
      overflow: hidden;
      border-radius: var(--zaya-radius-lg);
    }

    body.zaya-polished .photos-slider img {
      display: block;
      width: 100%;
      border-radius: var(--zaya-radius-lg) !important;
      box-shadow: var(--zaya-shadow);
    }

    body.zaya-polished
      :where(
        .s-slider-prev,
        .s-slider-next,
        .swiper-button-prev,
        .swiper-button-next
      ) {
      color: var(--zaya-brown) !important;
      background: rgba(255, 255, 255, 0.92) !important;
      border: 1px solid var(--zaya-line) !important;
      box-shadow: 0 10px 25px rgba(90, 47, 36, 0.12) !important;
      transition:
        transform 180ms ease,
        background 180ms ease !important;
    }

    body.zaya-polished
      :where(
        .s-slider-prev,
        .s-slider-next,
        .swiper-button-prev,
        .swiper-button-next
      ):hover {
      color: #ffffff !important;
      background: var(--zaya-peach-deep) !important;
      transform: scale(1.05);
    }

    body.zaya-polished
      :where(
        .swiper-pagination-bullet,
        .s-slider-pagination-dot
      ) {
      background: rgba(90, 47, 36, 0.22) !important;
      opacity: 1 !important;
    }

    body.zaya-polished
      :where(
        .swiper-pagination-bullet-active,
        .s-slider-pagination-dot-active
      ) {
      width: 24px !important;
      border-radius: 99px !important;
      background: var(--zaya-peach-deep) !important;
    }

    /* أقسام المنتجات */

    body.zaya-polished .s-block--bundle-quick-links {
      padding-block: 6px 16px;
    }

    body.zaya-polished
      .s-block--bundle-quick-links
      [class*="quick-links"]
      a,
    body.zaya-polished .s-block--bundle-quick-links a {
      color: var(--zaya-brown) !important;
      font-weight: 700;
      transition:
        color 180ms ease,
        transform 180ms ease;
    }

    body.zaya-polished .s-block--bundle-quick-links a:hover {
      color: var(--zaya-peach-deep) !important;
      transform: translateY(-4px);
    }

    body.zaya-polished .s-block--bundle-quick-links img {
      border: 1px solid rgba(90, 47, 36, 0.08);
      border-radius: 26px !important;
      box-shadow: 0 12px 28px rgba(90, 47, 36, 0.1);
      transition:
        transform 220ms ease,
        box-shadow 220ms ease;
    }

    body.zaya-polished
      .s-block--bundle-quick-links
      a:hover
      img {
      transform: scale(1.025);
      box-shadow: 0 18px 38px rgba(90, 47, 36, 0.16);
    }

    /* النص التعريفي */

    body.zaya-polished .s-block--bundle-text-content {
      position: relative;
      overflow: hidden;
      padding-block: 18px;
    }

    body.zaya-polished .s-block--bundle-text-content > * {
      position: relative;
      z-index: 1;
    }

    body.zaya-polished .s-block--bundle-text-content h2 {
      color: var(--zaya-brown) !important;
      font-size: clamp(25px, 3vw, 42px) !important;
      font-weight: 800 !important;
    }

    body.zaya-polished .s-block--bundle-text-content p {
      color: var(--zaya-brown-soft) !important;
      font-size: clamp(15px, 1.5vw, 19px) !important;
      line-height: 1.9;
    }

    /* البنرات الداخلية */

    body.zaya-polished .s-block--fixed-banner .container {
      position: relative;
    }

    body.zaya-polished .s-block--fixed-banner a {
      display: block;
      overflow: hidden;
      border-radius: var(--zaya-radius-lg);
      box-shadow: var(--zaya-shadow);
    }

    body.zaya-polished .s-block--fixed-banner img {
      display: block;
      width: 100%;
      border-radius: var(--zaya-radius-lg);
      transition: transform 650ms cubic-bezier(0.2, 0.75, 0.25, 1);
    }

    body.zaya-polished .s-block--fixed-banner a:hover img {
      transform: scale(1.012);
    }

    /* بطاقات المنتجات */

    body.zaya-polished
      :where(
        custom-salla-product-card,
        .s-product-card-entry
      ) {
      overflow: hidden;
      height: 100%;
      color: var(--zaya-brown);
      background: #ffffff;
      border: 1px solid var(--zaya-line) !important;
      border-radius: var(--zaya-radius-md) !important;
      box-shadow: 0 10px 30px rgba(90, 47, 36, 0.075);
      transition:
        transform 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
    }

    body.zaya-polished
      :where(
        custom-salla-product-card,
        .s-product-card-entry
      ):hover {
      transform: translateY(-7px);
      border-color: rgba(233, 133, 99, 0.3) !important;
      box-shadow: var(--zaya-shadow-hover);
    }

    body.zaya-polished .s-product-card-image {
      overflow: hidden;
      background:
        radial-gradient(
          circle at 50% 42%,
          #fffdfb 0 30%,
          rgba(251, 216, 203, 0.25) 100%
        ),
        var(--zaya-cream);
    }

    body.zaya-polished .s-product-card-image img {
      transition: transform 500ms cubic-bezier(0.2, 0.75, 0.25, 1);
    }

    body.zaya-polished
      :where(
        custom-salla-product-card,
        .s-product-card-entry
      ):hover
      .s-product-card-image
      img {
      transform: scale(1.035);
    }

    body.zaya-polished .s-product-card-content {
      padding: 17px 18px 18px !important;
      background: #ffffff;
    }

    body.zaya-polished
      :where(
        .s-product-card-content-title,
        .s-product-card-content-title a
      ) {
      color: var(--zaya-brown) !important;
      font-size: 15px !important;
      font-weight: 700 !important;
      line-height: 1.7;
    }

    body.zaya-polished
      :where(
        .s-product-card-price,
        .s-product-card-sale-price
      ) {
      color: var(--zaya-peach-deep) !important;
      font-weight: 800 !important;
    }

    body.zaya-polished .s-product-card-wishlist-btn {
      color: var(--zaya-brown-soft) !important;
      background: rgba(255, 253, 251, 0.92) !important;
      border: 1px solid var(--zaya-line) !important;
      box-shadow: 0 6px 18px rgba(90, 47, 36, 0.08);
    }

    body.zaya-polished .s-product-card-wishlist-btn:hover {
      color: var(--zaya-peach-deep) !important;
      border-color: rgba(233, 133, 99, 0.35) !important;
    }

    body.zaya-polished
      .s-product-card-content-footer
      .s-button-element {
      min-height: 44px;
      color: #ffffff !important;
      background: linear-gradient(
        135deg,
        var(--zaya-peach-deep),
        #ef9c7f
      ) !important;
      border: 0 !important;
      border-radius: 12px !important;
      box-shadow: 0 10px 22px rgba(233, 133, 99, 0.22);
      font-weight: 700 !important;
      transition:
        transform 180ms ease,
        box-shadow 180ms ease !important;
    }

    body.zaya-polished
      .s-product-card-content-footer
      .s-button-element:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 28px rgba(233, 133, 99, 0.3);
    }

    /* مميزات المتجر */

    body.zaya-polished .s-block--features > div > div {
      position: relative;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.88) !important;
      border: 1px solid var(--zaya-line);
      border-radius: var(--zaya-radius-md);
      box-shadow: 0 10px 28px rgba(90, 47, 36, 0.065);
      transition:
        transform 200ms ease,
        box-shadow 200ms ease;
    }

    body.zaya-polished .s-block--features > div > div:hover {
      transform: translateY(-5px);
      box-shadow: var(--zaya-shadow);
    }

    body.zaya-polished
      .s-block--features
      :where(i, .feature-icon) {
      color: var(--zaya-brown) !important;
      background: linear-gradient(
        145deg,
        var(--zaya-blush),
        var(--zaya-peach)
      ) !important;
    }

    /* الأزرار */

    body.zaya-polished
      :where(.s-button-primary, .btn--primary) {
      color: #ffffff !important;
      background: var(--zaya-peach-deep) !important;
      border-color: var(--zaya-peach-deep) !important;
      border-radius: 12px !important;
      font-weight: 700 !important;
    }

    /* الفوتر */

    body.zaya-polished .store-footer {
      margin-top: clamp(48px, 6vw, 86px);
      color: rgba(255, 248, 243, 0.82) !important;
      background:
        radial-gradient(
          circle at 10% 0%,
          rgba(244, 181, 159, 0.18),
          transparent 28rem
        ),
        linear-gradient(135deg, #4d281f, #633529) !important;
    }

    body.zaya-polished .store-footer__inner {
      background: transparent !important;
      border-color: rgba(255, 255, 255, 0.08) !important;
    }

    body.zaya-polished
      .store-footer
      :where(h3, h4, a, p, span, b) {
      color: inherit !important;
    }

    body.zaya-polished .store-footer h3 {
      color: #fffaf6 !important;
      font-weight: 800 !important;
    }

    body.zaya-polished .store-footer a:hover {
      color: var(--zaya-peach) !important;
    }

    body.zaya-polished .store-footer .s-social-link a {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      color: var(--zaya-brown) !important;
      background: var(--zaya-cream) !important;
      border-radius: 50%;
      transition:
        transform 180ms ease,
        background 180ms ease;
    }

    body.zaya-polished .store-footer .s-social-link a:hover {
      color: #ffffff !important;
      background: var(--zaya-peach-deep) !important;
      transform: translateY(-3px);
    }

    body.zaya-polished
      .store-footer
      .s-trust-badges-wrapper {
      padding: 10px 12px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 14px;
    }

    /* زر الرجوع للأعلى */

    .zaya-to-top {
      position: fixed;
      z-index: 45;
      left: 18px;
      bottom: 20px;
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      color: #ffffff;
      background: var(--zaya-brown);
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 50%;
      box-shadow: 0 12px 30px rgba(90, 47, 36, 0.24);
      cursor: pointer;
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease,
        background 180ms ease;
    }

    .zaya-to-top.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .zaya-to-top:hover {
      background: var(--zaya-peach-deep);
    }

    .zaya-to-top svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ظهور الأقسام عند التمرير */

    .zaya-reveal {
      opacity: 0;
      transform: translateY(22px);
      transition:
        opacity 650ms ease,
        transform 650ms cubic-bezier(0.2, 0.75, 0.25, 1);
    }

    .zaya-reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    :focus-visible {
      outline: 3px solid rgba(233, 133, 99, 0.42) !important;
      outline-offset: 3px;
    }

    /* الموبايل */

    @media (max-width: 767px) {
      :root {
        --zaya-radius-lg: 18px;
        --zaya-radius-md: 16px;
      }

      .zaya-brand-strip {
        min-height: 30px;
        padding-block: 6px;
        font-size: 10px;
      }

      body.zaya-polished main > .s-block,
      body.zaya-polished main > .s-block:first-child {
        margin-top: 30px !important;
      }

      body.zaya-polished .s-block--photos-slider {
        padding-block: 10px;
      }

      body.zaya-polished .photos-slider img {
        border-radius: var(--zaya-radius-lg) !important;
      }

      body.zaya-polished
        .s-block--bundle-quick-links
        img {
        border-radius: 18px !important;
      }

      body.zaya-polished
        .s-block--bundle-text-content {
        padding-block: 6px;
      }

      body.zaya-polished .s-block--fixed-banner a,
      body.zaya-polished .s-block--fixed-banner img {
        border-radius: var(--zaya-radius-lg);
      }

      body.zaya-polished .s-product-card-content {
        padding: 13px !important;
      }

      body.zaya-polished
        .s-product-card-content-footer
        .s-button-element {
        min-height: 40px;
        font-size: 12px !important;
      }

      body.zaya-polished .s-block--features > div {
        gap: 10px !important;
      }

      body.zaya-polished
        .s-block--features
        > div
        > div {
        padding: 14px 10px !important;
      }

      .zaya-to-top {
        left: 12px;
        bottom: 14px;
        width: 42px;
        height: 42px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .zaya-reveal {
        opacity: 1;
        transform: none;
      }
    }
  `;

  function loadFont() {
    if (document.getElementById(CONFIG.fontId)) return;

    const link = document.createElement("link");
    link.id = CONFIG.fontId;
    link.rel = "stylesheet";
    link.href = CONFIG.fontUrl;
    link.crossOrigin = "anonymous";

    document.head.appendChild(link);
  }

  function injectStyles() {
    if (document.getElementById(CONFIG.styleId)) return;

    const style = document.createElement("style");
    style.id = CONFIG.styleId;
    style.textContent = CSS;

    document.head.appendChild(style);
  }

  function addBrandStrip() {
    if (document.querySelector(".zaya-brand-strip")) return;

    const header = document.querySelector(".store-header");
    if (!header) return;

    const strip = document.createElement("div");

    strip.className = "zaya-brand-strip";
    strip.setAttribute("role", "note");
    strip.textContent =
      "ZAYA — عناية عشبية تبدأ من الجذور • منتجات مختارة لشعر أكثر حيوية";

    header.before(strip);
  }

  function addBackToTop() {
    if (document.querySelector(".zaya-to-top")) return;

    const button = document.createElement("button");

    button.className = "zaya-to-top";
    button.type = "button";
    button.setAttribute(
      "aria-label",
      "العودة إلى أعلى الصفحة"
    );

    button.innerHTML = `
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="m6 15 6-6 6 6"></path>
      </svg>
    `;

    button.addEventListener("click", function () {
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });
    });

    let ticking = false;

    window.addEventListener(
      "scroll",
      function () {
        if (ticking) return;

        ticking = true;

        window.requestAnimationFrame(function () {
          button.classList.toggle(
            "is-visible",
            window.scrollY > 520
          );

          ticking = false;
        });
      },
      { passive: true }
    );

    document.body.appendChild(button);
  }

  function improveDynamicElements(root) {
    const scope =
      root && root.querySelectorAll ? root : document;

    scope
      .querySelectorAll(
        "custom-salla-product-card, .s-product-card-entry"
      )
      .forEach(function (card) {
        if (card.dataset.zayaReady === "true") return;

        card.dataset.zayaReady = "true";

        card.querySelectorAll("img").forEach(function (image) {
          image.loading = "lazy";
          image.decoding = "async";
        });
      });
  }

  function initReveal() {
    const reduceMotion = window.matchMedia(
      "(prefers-reduced-motion: reduce)"
    ).matches;

    const elements = document.querySelectorAll(
      "main > .s-block:not(.s-block--photos-slider), " +
        ".s-block--features > div > div"
    );

    if (
      reduceMotion ||
      !("IntersectionObserver" in window)
    ) {
      elements.forEach(function (element) {
        element.classList.add("is-visible");
      });

      return;
    }

    const observer = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (!entry.isIntersecting) return;

          entry.target.classList.add("is-visible");
          observer.unobserve(entry.target);
        });
      },
      {
        threshold: 0.08,
        rootMargin: "0px 0px -35px 0px",
      }
    );

    elements.forEach(function (element) {
      if (element.dataset.zayaReveal === "true") return;

      element.dataset.zayaReveal = "true";
      element.classList.add("zaya-reveal");

      observer.observe(element);
    });
  }

  function watchSallaUpdates() {
    let queued = false;

    const observer = new MutationObserver(function (mutations) {
      if (queued) return;

      const hasAddedNodes = mutations.some(
        function (mutation) {
          return (
            mutation.addedNodes &&
            mutation.addedNodes.length > 0
          );
        }
      );

      if (!hasAddedNodes) return;

      queued = true;

      window.requestAnimationFrame(function () {
        improveDynamicElements(document);
        queued = false;
      });
    });

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

  function initZayaTheme() {
    if (
      !document.body ||
      document.body.classList.contains(CONFIG.bodyClass)
    ) {
      return;
    }

    loadFont();
    injectStyles();

    document.body.classList.add(CONFIG.bodyClass);

    addBrandStrip();
    addBackToTop();
    improveDynamicElements(document);
    initReveal();
    watchSallaUpdates();
  }

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

(function () {
  "use strict";

  const FAQS = [
    {
      question: "هل المنتجات مناسبة لجميع أنواع الشعر؟",
      answer:
        "نعم، مناسبة لمختلف أنواع الشعر، مع عناية خاصة بالشعر الجاف، الكيرلي والكِنكي.",
    },
    {
      question: "كيف أعرف المنتج المناسب لشعري؟",
      answer:
        "اختاري حسب احتياج شعرك: الكريم للترطيب والنعومة، الزيت للمحافظة على الترطيب، والسدر ضمن روتين العناية بالشعر.",
    },
    {
      question: "هل كريم الترطيب يُغسل؟",
      answer:
        "لا، يُستخدم على الشعر الرطب ويُترك دون شطف للحصول على ترطيب ونعومة أفضل.",
    },
    {
      question: "هل أستخدم زيت الشعر على شعر جاف أم رطب؟",
      answer:
        "يفضل استخدامه بعد ترطيب الشعر أو على شعر رطب قليلًا للمساعدة في المحافظة على الرطوبة والنعومة.",
    },
    {
      question: "هل يمكن استخدام الزيت كحمام زيت؟",
      answer:
        "نعم، يمكن استخدامه كحمام زيت للشعر ثم غسله واستكمال روتين الترطيب.",
    },
    {
      question: "هل السدر بودرة؟",
      answer:
        "لا، السدر لدينا بقوام كريمي جاهز للاستخدام لروتين أسهل وأكثر عملية.",
    },
    {
      question:
        "هل المنتجات مناسبة للشعر المصبوغ أو المعالج كيميائيًا؟",
      answer:
        "تختلف احتياجات الشعر المعالج، لذلك نوصي بتجربة كمية صغيرة أولًا والتأكد من ملاءمتها لشعرك.",
    },
  ];

  const SECTION_ID = "zaya-faq-section";
  const STYLE_ID = "zaya-faq-styles";

  function addStyles() {
    if (document.getElementById(STYLE_ID)) return;

    const style = document.createElement("style");

    style.id = STYLE_ID;

    style.textContent = `
      #${SECTION_ID} {
        --faq-peach: var(--zaya-peach, #f4b59f);
        --faq-coral: var(--zaya-peach-deep, #e98563);
        --faq-cream: var(--zaya-cream, #fff8f3);
        --faq-brown: var(--zaya-brown, #5a2f24);
        --faq-text: var(--zaya-brown-soft, #785047);
        --faq-line: rgba(90, 47, 36, 0.11);

        direction: rtl;
        padding: clamp(46px, 7vw, 88px) 16px;
        color: var(--faq-brown);
        font-family: "Cairo", system-ui, sans-serif;

        background:
          radial-gradient(
            circle at 100% 0%,
            rgba(244, 181, 159, 0.22),
            transparent 28rem
          ),
          linear-gradient(
            180deg,
            #fffdfb,
            var(--faq-cream)
          );

        opacity: 0;
        transform: translateY(22px);

        transition:
          opacity 0.65s ease,
          transform 0.65s cubic-bezier(0.2, 0.75, 0.25, 1);
      }

      #${SECTION_ID}.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      #${SECTION_ID} .zaya-faq__container {
        width: min(900px, 100%);
        margin-inline: auto;
      }

      #${SECTION_ID} .zaya-faq__header {
        margin-bottom: 30px;
        text-align: center;
      }

      #${SECTION_ID} .zaya-faq__eyebrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        min-height: 30px;
        margin: 0 0 10px;
        padding: 5px 14px;

        color: var(--faq-brown);
        background: rgba(244, 181, 159, 0.28);
        border: 1px solid rgba(233, 133, 99, 0.22);
        border-radius: 999px;

        font-size: 12px;
        font-weight: 700;
      }

      #${SECTION_ID} .zaya-faq__title {
        margin: 0;
        color: var(--faq-brown);
        font-size: clamp(27px, 4vw, 42px);
        font-weight: 800;
        letter-spacing: -0.03em;
      }

      #${SECTION_ID} .zaya-faq__intro {
        margin: 10px auto 0;
        color: var(--faq-text);
        font-size: 15px;
        line-height: 1.9;
      }

      #${SECTION_ID} .zaya-faq__list {
        display: grid;
        gap: 12px;
      }

      #${SECTION_ID} .zaya-faq__item {
        overflow: hidden;

        background: rgba(255, 255, 255, 0.9);
        border: 1px solid var(--faq-line);
        border-radius: 18px;

        box-shadow:
          0 9px 26px rgba(90, 47, 36, 0.055);

        transition:
          border-color 0.22s ease,
          box-shadow 0.22s ease,
          transform 0.22s ease;
      }

      #${SECTION_ID} .zaya-faq__item:hover {
        transform: translateY(-2px);
        border-color: rgba(233, 133, 99, 0.34);
        box-shadow:
          0 15px 35px rgba(90, 47, 36, 0.09);
      }

      #${SECTION_ID} .zaya-faq__item.is-open {
        border-color: rgba(233, 133, 99, 0.45);
        box-shadow:
          0 16px 38px rgba(90, 47, 36, 0.11);
      }

      #${SECTION_ID} .zaya-faq__question {
        width: 100%;
        min-height: 68px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;

        padding: 18px 21px;

        color: var(--faq-brown);
        background: transparent;
        border: 0;

        font: inherit;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.7;
        text-align: right;

        cursor: pointer;
      }

      #${SECTION_ID} .zaya-faq__icon {
        position: relative;

        flex: 0 0 34px;
        width: 34px;
        height: 34px;

        border-radius: 50%;
        background: rgba(244, 181, 159, 0.24);

        transition:
          background 0.22s ease,
          transform 0.32s ease;
      }

      #${SECTION_ID} .zaya-faq__icon::before,
      #${SECTION_ID} .zaya-faq__icon::after {
        content: "";

        position: absolute;
        top: 50%;
        left: 50%;

        width: 13px;
        height: 2px;

        border-radius: 99px;
        background: var(--faq-brown);

        transform: translate(-50%, -50%);

        transition:
          transform 0.28s ease,
          opacity 0.2s ease;
      }

      #${SECTION_ID} .zaya-faq__icon::after {
        transform:
          translate(-50%, -50%)
          rotate(90deg);
      }

      #${SECTION_ID}
        .zaya-faq__item.is-open
        .zaya-faq__icon {
        background: var(--faq-coral);
        transform: rotate(180deg);
      }

      #${SECTION_ID}
        .zaya-faq__item.is-open
        .zaya-faq__icon::before,
      #${SECTION_ID}
        .zaya-faq__item.is-open
        .zaya-faq__icon::after {
        background: #ffffff;
      }

      #${SECTION_ID}
        .zaya-faq__item.is-open
        .zaya-faq__icon::after {
        opacity: 0;
        transform:
          translate(-50%, -50%)
          rotate(0);
      }

      #${SECTION_ID} .zaya-faq__answer-wrap {
        display: grid;
        grid-template-rows: 0fr;

        transition:
          grid-template-rows 0.34s
          cubic-bezier(0.2, 0.75, 0.25, 1);
      }

      #${SECTION_ID}
        .zaya-faq__item.is-open
        .zaya-faq__answer-wrap {
        grid-template-rows: 1fr;
      }

      #${SECTION_ID} .zaya-faq__answer-inner {
        overflow: hidden;
      }

      #${SECTION_ID} .zaya-faq__answer {
        margin: 0;
        padding: 0 21px 20px;

        color: var(--faq-text);
        font-size: 14px;
        line-height: 2;
      }

      #${SECTION_ID}
        .zaya-faq__question:focus-visible {
        outline:
          3px solid rgba(233, 133, 99, 0.35);
        outline-offset: -4px;
        border-radius: 16px;
      }

      @media (max-width: 640px) {
        #${SECTION_ID} {
          padding: 42px 12px;
        }

        #${SECTION_ID} .zaya-faq__header {
          margin-bottom: 23px;
        }

        #${SECTION_ID} .zaya-faq__item {
          border-radius: 15px;
        }

        #${SECTION_ID} .zaya-faq__question {
          min-height: 62px;
          padding: 15px 16px;
          font-size: 13px;
        }

        #${SECTION_ID} .zaya-faq__answer {
          padding: 0 16px 17px;
          font-size: 13px;
        }

        #${SECTION_ID} .zaya-faq__icon {
          flex-basis: 30px;
          width: 30px;
          height: 30px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        #${SECTION_ID},
        #${SECTION_ID} * {
          animation: none !important;
          transition: none !important;
        }
      }
    `;

    document.head.appendChild(style);
  }

  function createFaqSection() {
    if (document.getElementById(SECTION_ID)) {
      return true;
    }

    const main = document.querySelector("main");

    if (!main) return false;

    addStyles();

    const section = document.createElement("section");

    section.id = SECTION_ID;
    section.className = "zaya-faq";

    section.setAttribute(
      "aria-labelledby",
      "zaya-faq-title"
    );

    const container = document.createElement("div");
    container.className = "zaya-faq__container";

    const header = document.createElement("header");
    header.className = "zaya-faq__header";

    const eyebrow = document.createElement("p");
    eyebrow.className = "zaya-faq__eyebrow";
    eyebrow.textContent = "كل ما تحتاجين معرفته";

    const title = document.createElement("h2");
    title.id = "zaya-faq-title";
    title.className = "zaya-faq__title";
    title.textContent = "الأسئلة الشائعة";

    const intro = document.createElement("p");
    intro.className = "zaya-faq__intro";

    intro.textContent =
      "إجابات سريعة تساعدك على اختيار روتين ZAYA المناسب لشعرك.";

    header.append(eyebrow, title, intro);

    const list = document.createElement("div");
    list.className = "zaya-faq__list";

    FAQS.forEach(function (faq, index) {
      const item = document.createElement("article");
      item.className = "zaya-faq__item";

      const button = document.createElement("button");
      const panelId = `zaya-faq-answer-${index + 1}`;

      button.className = "zaya-faq__question";
      button.type = "button";

      button.setAttribute(
        "aria-expanded",
        "false"
      );

      button.setAttribute(
        "aria-controls",
        panelId
      );

      const questionText =
        document.createElement("span");

      questionText.textContent = faq.question;

      const icon = document.createElement("span");
      icon.className = "zaya-faq__icon";
      icon.setAttribute("aria-hidden", "true");

      button.append(questionText, icon);

      const answerWrap =
        document.createElement("div");

      answerWrap.id = panelId;
      answerWrap.className =
        "zaya-faq__answer-wrap";

      answerWrap.setAttribute("role", "region");
      answerWrap.setAttribute(
        "aria-hidden",
        "true"
      );

      const answerInner =
        document.createElement("div");

      answerInner.className =
        "zaya-faq__answer-inner";

      const answer = document.createElement("p");
      answer.className = "zaya-faq__answer";
      answer.textContent = faq.answer;

      answerInner.appendChild(answer);
      answerWrap.appendChild(answerInner);

      item.append(button, answerWrap);

      button.addEventListener(
        "click",
        function () {
          const willOpen =
            !item.classList.contains("is-open");

          list
            .querySelectorAll(
              ".zaya-faq__item.is-open"
            )
            .forEach(function (openItem) {
              openItem.classList.remove("is-open");

              openItem
                .querySelector(
                  ".zaya-faq__question"
                )
                .setAttribute(
                  "aria-expanded",
                  "false"
                );

              openItem
                .querySelector(
                  ".zaya-faq__answer-wrap"
                )
                .setAttribute(
                  "aria-hidden",
                  "true"
                );
            });

          if (willOpen) {
            item.classList.add("is-open");

            button.setAttribute(
              "aria-expanded",
              "true"
            );

            answerWrap.setAttribute(
              "aria-hidden",
              "false"
            );
          }
        }
      );

      list.appendChild(item);
    });

    container.append(header, list);
    section.appendChild(container);

    const features = main.querySelector(
      ".s-block--features"
    );

    if (features) {
      features.before(section);
    } else {
      main.appendChild(section);
    }

    if ("IntersectionObserver" in window) {
      const observer = new IntersectionObserver(
        function (entries) {
          if (!entries[0].isIntersecting) return;

          section.classList.add("is-visible");
          observer.disconnect();
        },
        {
          threshold: 0.08,
        }
      );

      observer.observe(section);
    } else {
      section.classList.add("is-visible");
    }

    return true;
  }

  function initialize() {
    if (createFaqSection()) return;

    const observer = new MutationObserver(
      function () {
        if (!createFaqSection()) return;

        observer.disconnect();
      }
    );

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

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