/* =========================================================
   GREEN MOOD — MASTER JAVASCRIPT V5
   Intro + Product Loader + Bottom Nav + ONE Popup
   ========================================================= */

(function () {
  'use strict';

  /* =========================================================
     SETTINGS
     ========================================================= */

  const INTRO_DURATION = 2700;
  const PRODUCT_LOADER_DURATION = 950;

  const POPUP_DELAY_AFTER_INTRO = 650;
  const POPUP_REOPEN_HOURS = 12;

  const INTRO_KEY = 'gm_intro_session_v5';
  const POPUP_KEY = 'gm_offer_seen_v5';
  const PRODUCT_KEY_PREFIX = 'gm_product_loader_';


  /* =========================================================
     PATH HELPERS
     ========================================================= */

  function gmPath() {
    return window.location.pathname
      .replace(/\/+$/, '')
      .toLowerCase();
  }

  function gmIsHome() {
    const path = gmPath();

    return (
      path === '' ||
      path === '/ar' ||
      path === '/en'
    );
  }

  function gmIsCart() {
    const path = gmPath();

    return (
      path.includes('/cart') ||
      path.includes('/basket')
    );
  }

  function gmIsCheckout() {
    const path = gmPath();

    return (
      path.includes('/checkout') ||
      path.includes('/payment')
    );
  }

  function gmIsProduct() {
    const path = gmPath();

    return (
      path.includes('/product/') ||
      path.includes('/products/') ||
      !!document.querySelector('salla-add-product-button')
    );
  }


  /* =========================================================
     CLEAN OLD GREEN MOOD ELEMENTS
     ========================================================= */

  function gmCleanOldElements() {

    const selectors = [
      '#gm-home-loader',
      '#gm-intro',
      '#gm-cup-loader',
      '#gm-new-loader',
      '#gm-jeddah-intro',
      '#gm-product-loader',

      '#gm-offer-popup-overlay',
      '#gm-offer-popup',
      '#gm-offer-overlay'
    ];

    selectors.forEach(function (selector) {

      document
        .querySelectorAll(selector)
        .forEach(function (el) {
          el.remove();
        });

    });

    document.documentElement.style.overflow = '';
  }


  /* =========================================================
     BOTTOM NAV
     ========================================================= */

  function gmCreateBottomNav() {

    if (document.getElementById('gm-bottom-nav')) {
      gmUpdateBottomNav();
      return;
    }

    const nav = document.createElement('nav');

    nav.id = 'gm-bottom-nav';

    nav.innerHTML = `
      <a href="/" aria-label="الرئيسية">
        <span class="gm-nav-icon">⌂</span>
        <small>الرئيسية</small>
      </a>

      <a href="/categories" aria-label="الأقسام">
        <span class="gm-nav-icon">▦</span>
        <small>الأقسام</small>
      </a>

      <a href="/cart" aria-label="السلة">
        <span class="gm-nav-icon">🛒</span>
        <small>السلة</small>
      </a>

      <button
        type="button"
        id="gm-search-btn"
        aria-label="بحث"
      >
        <span class="gm-nav-icon">⌕</span>
        <small>بحث</small>
      </button>

      <a href="/login" aria-label="دخول">
        <span class="gm-nav-icon">○</span>
        <small>دخول</small>
      </a>
    `;

    document.body.appendChild(nav);


    const searchBtn =
      document.getElementById('gm-search-btn');

    if (searchBtn) {

      searchBtn.addEventListener(
        'click',
        function () {

          const selectors = [
            'header input[type="search"]',
            '.search-input',
            '.s-search-input',
            'input[placeholder*="بحث"]',
            '[class*="search"] input'
          ];

          let input = null;

          for (const selector of selectors) {

            input =
              document.querySelector(selector);

            if (input) break;
          }

          if (input) {

            input.scrollIntoView({
              behavior:'smooth',
              block:'center'
            });

            setTimeout(function () {
              input.focus();
            }, 300);

          }

        }
      );
    }

    gmUpdateBottomNav();
  }


  /* =========================================================
     HIDE BOTTOM NAV
     المنتج + السلة + الدفع
     ========================================================= */

  function gmUpdateBottomNav() {

    const nav =
      document.getElementById('gm-bottom-nav');

    if (!nav) return;

    const hide =
      gmIsProduct() ||
      gmIsCart() ||
      gmIsCheckout() ||
      !!document.querySelector('salla-cart-summary');

    if (hide) {

      nav.style.setProperty(
        'display',
        'none',
        'important'
      );

    } else {

      nav.style.removeProperty('display');

    }
  }


  /* =========================================================
     HOME INTRO
     براند سعودي → صنع في جدة → GREEN MOOD
     ========================================================= */

  function gmShowHomeIntro(done) {

    if (!gmIsHome()) {
      done();
      return;
    }

    if (
      sessionStorage.getItem(INTRO_KEY) === '1'
    ) {
      done();
      return;
    }

    sessionStorage.setItem(
      INTRO_KEY,
      '1'
    );


    const intro =
      document.createElement('div');

    intro.id = 'gm-jeddah-intro';

    intro.innerHTML = `
      <div class="gm-jeddah-wrap">

        <div class="gm-jeddah-ring"></div>

        <span class="gm-jeddah-dot d1"></span>
        <span class="gm-jeddah-dot d2"></span>
        <span class="gm-jeddah-dot d3"></span>

        <div class="gm-jeddah-text t1">
          براند سعودي
        </div>

        <div class="gm-jeddah-text t2">
          صنع في جدة
        </div>

        <div class="gm-jeddah-brand">
          GREEN MOOD
        </div>

      </div>
    `;

    document.body.appendChild(intro);

    document.documentElement.style.overflow =
      'hidden';


    setTimeout(function () {

      intro.classList.add(
        'gm-jeddah-hide'
      );

      document.documentElement.style.overflow =
        '';


      setTimeout(function () {

        if (intro.parentNode) {
          intro.remove();
        }

        done();

      }, 450);

    }, INTRO_DURATION);
  }


  /* =========================================================
     PRODUCT PAGE MICRO LOADER
     ريلود بسيط عند دخول المنتج
     ========================================================= */

  function gmShowProductLoader() {

    if (!gmIsProduct()) return;

    /*
      مرة واحدة لكل منتج داخل الجلسة
    */

    const productKey =
      PRODUCT_KEY_PREFIX +
      gmPath();

    if (
      sessionStorage.getItem(productKey) === '1'
    ) {
      return;
    }

    sessionStorage.setItem(
      productKey,
      '1'
    );


    const loader =
      document.createElement('div');

    loader.id = 'gm-product-loader';

    loader.innerHTML = `
      <div class="gm-product-loader-inner">

        <div class="gm-product-loader-ring">

          <span></span>
          <span></span>
          <span></span>

        </div>

        <div class="gm-product-loader-text">
          لحظة...
        </div>

        <div class="gm-product-loader-sub">
          نجهّز لك المود 🍵
        </div>

      </div>
    `;


    /* CSS داخلي حتى ما تحتاج تضيف شيء */
    const style =
      document.createElement('style');

    style.id =
      'gm-product-loader-style';

    style.textContent = `

      #gm-product-loader{
        position:fixed;
        inset:0;

        z-index:2147483646;

        display:flex;
        align-items:center;
        justify-content:center;

        background:
          radial-gradient(
            circle at center,
            #FFF9F0 0%,
            #F4EADB 58%,
            #E9DECC 100%
          );

        opacity:1;
        visibility:visible;

        transition:
          opacity .35s ease,
          visibility .35s ease;
      }

      #gm-product-loader.gm-hide{
        opacity:0;
        visibility:hidden;
        pointer-events:none;
      }

      .gm-product-loader-inner{
        text-align:center;
      }

      .gm-product-loader-ring{
        position:relative;

        width:62px;
        height:62px;

        margin:
          0 auto 18px;
      }

      .gm-product-loader-ring::before{
        content:"";

        position:absolute;
        inset:0;

        border-radius:50%;

        border:
          2px solid rgba(86,107,74,.12);
      }

      .gm-product-loader-ring::after{
        content:"";

        position:absolute;

        inset:7px;

        border-radius:50%;

        border:
          3px solid transparent;

        border-top-color:#566B4A;
        border-right-color:#806746;

        animation:
          gmProductSpin .8s linear infinite;
      }

      .gm-product-loader-ring span{
        position:absolute;

        width:6px;
        height:6px;

        border-radius:50%;

        background:#71835F;
      }

      .gm-product-loader-ring span:nth-child(1){
        top:2px;
        left:29px;
      }

      .gm-product-loader-ring span:nth-child(2){
        right:5px;
        bottom:13px;
      }

      .gm-product-loader-ring span:nth-child(3){
        left:6px;
        bottom:12px;
      }

      .gm-product-loader-text{
        color:#3E5238;

        font-size:18px;
        font-weight:900;
      }

      .gm-product-loader-sub{
        margin-top:5px;

        color:#70776C;

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

      @keyframes gmProductSpin{

        from{
          transform:rotate(0deg);
        }

        to{
          transform:rotate(360deg);
        }

      }

    `;

    document.head.appendChild(style);

    document.body.appendChild(loader);

    document.documentElement.style.overflow =
      'hidden';


    setTimeout(function () {

      loader.classList.add(
        'gm-hide'
      );

      document.documentElement.style.overflow =
        '';


      setTimeout(function () {

        if (loader.parentNode) {
          loader.remove();
        }

        if (style.parentNode) {
          style.remove();
        }

      }, 400);

    }, PRODUCT_LOADER_DURATION);
  }


  /* =========================================================
     POPUP STORAGE
     ========================================================= */

  function gmCanShowPopup() {

    try {

      const last =
        Number(
          localStorage.getItem(
            POPUP_KEY
          )
        );

      if (!last) {
        return true;
      }

      const limit =
        POPUP_REOPEN_HOURS *
        60 *
        60 *
        1000;

      return (
        Date.now() - last >= limit
      );

    } catch (e) {

      return true;
    }
  }


  function gmSavePopupSeen() {

    try {

      localStorage.setItem(
        POPUP_KEY,
        String(Date.now())
      );

    } catch (e) {}

  }


  /* =========================================================
     ONE OFFER POPUP
     ========================================================= */

  function gmCreatePopup() {

    if (!gmIsHome()) return;

    if (!gmCanShowPopup()) return;

    if (
      document.getElementById(
        'gm-offer-overlay'
      )
    ) {
      return;
    }


    /*
      نشيل أي إعلان قديم لو بقي
    */

    document
      .querySelectorAll(
        '#gm-offer-popup-overlay,' +
        '#gm-offer-popup'
      )
      .forEach(function (el) {
        el.remove();
      });


    const overlay =
      document.createElement('div');

    overlay.id =
      'gm-offer-overlay';


    overlay.innerHTML = `
      <div
        id="gm-offer-card"
        dir="rtl"
        role="dialog"
        aria-modal="true"
      >

        <button
          class="gm-offer-close"
          type="button"
          aria-label="إغلاق"
        >
          ×
        </button>


        <div class="gm-offer-top">

          <div class="gm-offer-badge">
            هدية Green Mood لك
          </div>

          <div class="gm-offer-gift">
            🎁
          </div>

          <h3 class="gm-offer-title">
            أتمم طلبك الآن
          </h3>

        </div>


        <div class="gm-offer-body">

          <p class="gm-offer-text">

            واحصل على

            <strong>
              ماسك الماتشا مجانًا
            </strong>

            <br>

            مع أي طلب من المتجر

          </p>


          <div class="gm-offer-note">
            بدون حد أدنى للطلب
          </div>


          <button
            class="gm-offer-shop"
            type="button"
          >
            ابدأ التسوق
          </button>


          <div class="gm-social-title">
            تابع Green Mood
          </div>


          <div class="gm-socials">

            <a
              class="gm-social-link"
              href="https://wa.me/966552053676"
              target="_blank"
              rel="noopener"
              aria-label="واتساب"
            >
              <svg viewBox="0 0 32 32">
                <path d="M19.11 17.21c-.27-.14-1.58-.78-1.83-.87-.24-.09-.42-.14-.6.14-.18.27-.68.87-.84 1.05-.15.18-.31.2-.58.07-.27-.14-1.13-.41-2.16-1.31-.8-.71-1.34-1.59-1.5-1.86-.16-.27-.02-.42.12-.56.12-.12.27-.31.41-.47.14-.16.18-.27.27-.45.09-.18.05-.34-.02-.47-.07-.14-.6-1.45-.82-1.99-.22-.52-.44-.45-.6-.46h-.51c-.18 0-.47.07-.72.34-.25.27-.95.93-.95 2.27 0 1.34.98 2.63 1.11 2.81.14.18 1.92 2.93 4.65 4.11.65.28 1.16.45 1.56.57.66.21 1.25.18 1.72.11.53-.08 1.58-.64 1.8-1.25.22-.61.22-1.13.16-1.25-.07-.11-.25-.18-.52-.32zM16.02 3C8.85 3 3.04 8.81 3.04 15.98c0 2.29.6 4.53 1.75 6.5L3 29l6.71-1.76a12.94 12.94 0 0 0 6.31 1.61h.01c7.17 0 12.98-5.81 12.98-12.98C29 8.81 23.19 3 16.02 3z"/>
              </svg>
            </a>


            <a
              class="gm-social-link"
              href="https://www.instagram.com/greenmood.sa/"
              target="_blank"
              rel="noopener"
              aria-label="انستقرام"
            >
              <svg viewBox="0 0 24 24">
                <path d="M7.75 2h8.5A5.75 5.75 0 0 1 22 7.75v8.5A5.75 5.75 0 0 1 16.25 22h-8.5A5.75 5.75 0 0 1 2 16.25v-8.5A5.75 5.75 0 0 1 7.75 2zm0 1.8A3.95 3.95 0 0 0 3.8 7.75v8.5a3.95 3.95 0 0 0 3.95 3.95h8.5a3.95 3.95 0 0 0 3.95-3.95v-8.5a3.95 3.95 0 0 0-3.95-3.95h-8.5z"/>
              </svg>
            </a>


            <a
              class="gm-social-link"
              href="https://www.tiktok.com/@greenmood.sa"
              target="_blank"
              rel="noopener"
              aria-label="تيك توك"
            >
              <svg viewBox="0 0 24 24">
                <path d="M16.99 3c.36 1.96 1.53 3.56 3.41 4.33v2.73a7.33 7.33 0 0 1-3.36-.8v5.05c0 3.9-3.13 6.69-6.74 6.69-3.81 0-6.3-2.99-6.3-6.19 0-3.64 2.9-6.38 6.62-6.38.28 0 .55.02.82.07v3.03a3.4 3.4 0 0 0-.82-.1c-1.82 0-3.32 1.21-3.32 3.19 0 1.71 1.22 3.1 3.13 3.1 1.8 0 3.28-1.3 3.28-3.46V3h3.28z"/>
              </svg>
            </a>

          </div>


          <div class="gm-social-user">
            @greenmood.sa
          </div>

        </div>

      </div>
    `;


    document.body.appendChild(
      overlay
    );


    requestAnimationFrame(function () {

      requestAnimationFrame(function () {

        overlay.classList.add(
          'gm-show'
        );

      });

    });


    let closed = false;


    function closePopup() {

      if (closed) return;

      closed = true;

      gmSavePopupSeen();

      overlay.classList.remove(
        'gm-show'
      );


      setTimeout(function () {

        if (overlay.parentNode) {
          overlay.remove();
        }

      }, 350);
    }


    overlay
      .querySelector('.gm-offer-close')
      .addEventListener(
        'click',
        closePopup
      );


    overlay.addEventListener(
      'click',
      function (event) {

        if (
          event.target === overlay
        ) {
          closePopup();
        }

      }
    );


    overlay
      .querySelector('.gm-offer-shop')
      .addEventListener(
        'click',
        function () {

          closePopup();

          setTimeout(function () {

            const target =
              document.querySelector(
                '.s-block--products'
              ) ||
              document.querySelector(
                '.products-slider'
              ) ||
              document.querySelector(
                '.products-grid'
              );

            if (target) {

              target.scrollIntoView({
                behavior:'smooth',
                block:'start'
              });

            }

          }, 180);

        }
      );
  }


  /* =========================================================
     HOME EXPERIENCE
     Intro → ثم الإعلان
     ========================================================= */

  function gmRunHomeExperience() {

    gmShowHomeIntro(
      function () {

        setTimeout(
          gmCreatePopup,
          POPUP_DELAY_AFTER_INTRO
        );

      }
    );
  }


  /* =========================================================
     INIT
     ========================================================= */

  function gmInit() {

    /*
      تنظيف أي عناصر قديمة موجودة في الصفحة
    */

    gmCleanOldElements();


    /*
      الشريط السفلي
    */

    gmCreateBottomNav();


    /*
      لو منتج:
      يظهر اللودر البسيط
    */

    gmShowProductLoader();


    /*
      لو الرئيسية:
      Intro ثم الإعلان
    */

    gmRunHomeExperience();


    /*
      تحديث إخفاء الناف
    */

    setTimeout(
      gmUpdateBottomNav,
      100
    );

    setTimeout(
      gmUpdateBottomNav,
      500
    );

    setTimeout(
      gmUpdateBottomNav,
      1200
    );

    setTimeout(
      gmUpdateBottomNav,
      2500
    );
  }


  /* =========================================================
     START
     ========================================================= */

  if (
    document.readyState ===
    'loading'
  ) {

    document.addEventListener(
      'DOMContentLoaded',
      gmInit
    );

  } else {

    gmInit();
  }

})();
/* =========================================================
   GREEN MOOD — FINAL WARM BROWN MASTER
   خلفية بني فاتح موحدة + منتجات أفتح بوضوح
   ========================================================= */

:root{
  /* الهوية */
  --gm-bg:#D8C5AA;
  --gm-bg-deep:#C8B08F;
  --gm-surface:#F5EEE4;
  --gm-surface-2:#FBF7F1;

  --gm-green:#566B4A;
  --gm-green-dark:#3E5238;

  --gm-brown:#806746;
  --gm-text:#302B26;
  --gm-muted:#746B61;

  --gm-line:rgba(73,58,43,.12);

  --gm-shadow:
    0 12px 32px rgba(62,45,30,.10);

  --gm-shadow-hover:
    0 18px 44px rgba(62,45,30,.15);
}


/* =========================================================
   GLOBAL
   ========================================================= */

html,
body,
#app,
main{
  background:var(--gm-bg) !important;
  color:var(--gm-text) !important;
}

body{
  overflow-x:hidden !important;
}

*{
  box-sizing:border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

header,
.main-header,
.site-header,
.header-wrapper,
.main-nav-container{
  background:
    rgba(216,197,170,.96) !important;

  border-bottom:
    1px solid rgba(73,58,43,.09) !important;

  box-shadow:
    0 6px 20px rgba(61,43,28,.06) !important;

  backdrop-filter:
    blur(15px);

  -webkit-backdrop-filter:
    blur(15px);

  color:var(--gm-text) !important;
}

header a,
header button,
.main-header a,
.main-header button{
  color:var(--gm-text) !important;
}

header svg,
.main-header svg{
  color:var(--gm-text) !important;
  stroke:currentColor !important;
}


/* =========================================================
   HERO
   ========================================================= */

.s-block--banners,
.banner,
.hero,
.carousel-slider{
  background:transparent !important;

  padding:
    10px 12px 6px !important;
}

.s-block--banners img,
.banner img,
.hero img,
.carousel-slider img{
  width:100% !important;

  display:block !important;

  border-radius:
    22px !important;

  box-shadow:
    0 14px 34px rgba(61,43,28,.11) !important;
}


/* =========================================================
   SECTIONS
   ========================================================= */

section,
.s-block{
  background:transparent !important;

  padding-top:
    24px !important;

  padding-bottom:
    24px !important;
}


/* =========================================================
   TITLES
   ========================================================= */

.s-block__title,
.section-title,
.s-block h2,
.products-slider h2{
  color:var(--text, #302B26) !important;

  font-size:
    24px !important;

  font-weight:
    900 !important;

  line-height:
    1.4 !important;

  margin-bottom:
    20px !important;
}

.s-block__title::after,
.section-title::after,
.s-block h2::after,
.products-slider h2::after{
  content:"" !important;

  display:block !important;

  width:38px !important;
  height:3px !important;

  margin:
    10px auto 0 !important;

  background:
    var(--gm-green) !important;

  border-radius:
    999px !important;
}


/* =========================================================
   STORIES
   ========================================================= */

.s-block--stories{
  margin:
    8px 12px !important;

  padding:
    20px 10px !important;

  border-radius:
    24px !important;

  background:
    rgba(245,238,228,.45) !important;

  border:
    1px solid rgba(255,255,255,.22) !important;
}

.s-block--stories .swiper-slide{
  text-align:center !important;
}

.s-block--stories .swiper-slide img,
.s-block--stories [class*="story"] img{
  width:82px !important;
  height:82px !important;

  object-fit:cover !important;

  border-radius:
    50% !important;

  padding:3px !important;

  background:
    var(--gm-surface) !important;

  border:
    2px solid var(--gm-green) !important;

  box-shadow:
    0 6px 17px rgba(61,43,28,.10) !important;
}

.s-block--stories span,
.s-block--stories p,
.s-block--stories a{
  color:
    var(--gm-text) !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;
}


/* =========================================================
   PRODUCTS AREA
   ========================================================= */

.s-block--products,
.products-slider,
.products-grid,
.products-list{
  background:
    transparent !important;
}

.products-grid,
.products-list{
  gap:
    14px !important;
}


/* =========================================================
   PRODUCT CARDS
   الفرق الواضح بين الخلفية والمنتج
   ========================================================= */

salla-product-card,
.s-product-card-entry,
.product-card,
.product-entry{
  background:
    var(--gm-surface) !important;

  border:
    1px solid rgba(255,255,255,.40) !important;

  border-radius:
    22px !important;

  overflow:
    hidden !important;

  box-shadow:
    var(--gm-shadow) !important;

  transition:
    transform .28s ease,
    box-shadow .28s ease !important;
}

salla-product-card:hover,
.s-product-card-entry:hover,
.product-card:hover,
.product-entry:hover{
  transform:
    translateY(-5px) !important;

  box-shadow:
    var(--gm-shadow-hover) !important;
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.s-product-card-image,
.product-card-image,
.product-entry .image,
salla-product-card .s-product-card-image{
  position:
    relative !important;

  height:
    230px !important;

  min-height:
    230px !important;

  overflow:
    hidden !important;

  background:
    var(--gm-surface-2) !important;

  border-bottom:
    1px solid rgba(128,103,70,.09) !important;
}

.s-product-card-image img,
.product-card-image img,
.product-entry .image img,
salla-product-card .s-product-card-image img{
  width:
    100% !important;

  height:
    100% !important;

  display:
    block !important;

  object-fit:
    cover !important;

  transition:
    transform .45s cubic-bezier(.2,.7,.2,1),
    filter .45s ease !important;
}

salla-product-card:hover .s-product-card-image img,
.s-product-card-entry:hover .s-product-card-image img,
.product-card:hover img,
.product-entry:hover img{
  transform:
    scale(1.035) !important;
}


/* =========================================================
   PRODUCT CONTENT
   ========================================================= */

.s-product-card-content,
.s-product-card-content-main,
.s-product-card-content-sub,
.product-card .content,
.product-entry .content{
  background:
    var(--gm-surface) !important;

  color:
    var(--gm-text) !important;

  padding:
    14px 13px 15px !important;
}

.s-product-card-title,
.s-product-card-entry h3,
.s-product-card-entry h4,
.product-card h3,
.product-entry h3{
  color:
    var(--gm-text) !important;

  font-size:
    14px !important;

  font-weight:
    850 !important;

  line-height:
    1.5 !important;
}

.s-product-card-price,
.product-price,
.price{
  color:
    var(--gm-green-dark) !important;

  font-size:
    17px !important;

  font-weight:
    900 !important;
}


/* =========================================================
   ADD TO CART
   ========================================================= */

salla-add-product-button .s-button-element,
.add-to-cart,
[class*="add-to-cart"]{
  min-height:
    46px !important;

  background:
    var(--gm-green) !important;

  color:
    #fff !important;

  border:
    0 !important;

  border-radius:
    13px !important;

  font-weight:
    850 !important;

  box-shadow:
    0 6px 15px rgba(86,107,74,.15) !important;

  transition:
    transform .2s ease,
    background .2s ease !important;
}

salla-add-product-button .s-button-element:hover,
.add-to-cart:hover{
  background:
    var(--gm-green-dark) !important;

  transform:
    translateY(-1px) !important;
}

salla-add-product-button .s-button-element *,
.add-to-cart *,
[class*="add-to-cart"] *{
  color:#fff !important;
  fill:#fff !important;
  stroke:#fff !important;
  -webkit-text-fill-color:#fff !important;
}


/* =========================================================
   BUY NOW
   ========================================================= */

[class*="buy-now"],
[class*="buy_now"],
[class*="quick-buy"],
[class*="quick_buy"]{
  min-height:
    46px !important;

  background:
    var(--gm-surface-2) !important;

  color:
    var(--gm-green-dark) !important;

  border:
    1.5px solid var(--gm-green) !important;

  border-radius:
    13px !important;

  font-weight:
    850 !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer,
.footer,
.site-footer,
.store-footer{
  background:
    var(--gm-bg-deep) !important;

  color:
    var(--gm-text) !important;

  border-top:
    1px solid rgba(73,58,43,.10) !important;
}

footer *,
.footer *,
.site-footer *,
.store-footer *{
  color:
    var(--gm-text) !important;
}


/* =========================================================
   HOME RELOAD / INTRO
   براند سعودي → صنع في جدة → GREEN MOOD
   ========================================================= */

#gm-jeddah-intro{
  position:
    fixed;

  inset:
    0;

  z-index:
    2147483646;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at 50% 46%,
      #E9DAC6 0%,
      var(--gm-bg) 47%,
      #CBB495 100%
    );

  opacity:
    1;

  visibility:
    visible;

  transition:
    opacity .42s ease,
    visibility .42s ease;
}

#gm-jeddah-intro.gm-jeddah-hide{
  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;
}

.gm-jeddah-wrap{
  position:
    relative;

  width:
    270px;

  height:
    270px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


/* الدائرة */
.gm-jeddah-ring{
  position:
    absolute;

  width:
    170px;

  height:
    170px;

  border-radius:
    50%;

  border:
    1px solid rgba(86,107,74,.27);

  box-shadow:
    0 0 0 11px rgba(255,255,255,.055);

  animation:
    gmRingPulse 1.55s ease-in-out infinite;
}


/* النقاط */
.gm-jeddah-dot{
  position:
    absolute;

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--gm-green);

  opacity:
    .70;

  animation:
    gmDotFloat 1.6s ease-in-out infinite;
}

.gm-jeddah-dot.d1{
  top:49px;
  left:72px;
}

.gm-jeddah-dot.d2{
  top:81px;
  right:55px;

  animation-delay:
    .25s;
}

.gm-jeddah-dot.d3{
  bottom:60px;
  left:59px;

  animation-delay:
    .45s;
}


/* النصوص */
.gm-jeddah-text,
.gm-jeddah-brand{
  position:
    absolute;

  opacity:
    0;

  color:
    var(--gm-green-dark);
}

.gm-jeddah-text{
  font-size:
    20px;

  font-weight:
    900;
}

.gm-jeddah-brand{
  font-size:
    26px;

  font-weight:
    950;

  letter-spacing:
    2px;
}


/* توقيت الكلمات */
.gm-jeddah-text.t1{
  animation:
    gmIntroFirst 2.7s ease forwards;
}

.gm-jeddah-text.t2{
  animation:
    gmIntroSecond 2.7s ease forwards;
}

.gm-jeddah-brand{
  animation:
    gmIntroBrand 2.7s ease forwards;
}


/* الحلقة */
@keyframes gmRingPulse{
  0%,100%{
    transform:
      scale(.97);

    opacity:
      .65;
  }

  50%{
    transform:
      scale(1.045);

    opacity:
      1;
  }
}


/* النقاط */
@keyframes gmDotFloat{
  0%,100%{
    transform:
      translateY(0)
      scale(.9);
  }

  50%{
    transform:
      translateY(-5px)
      scale(1.1);
  }
}


/* براند سعودي */
@keyframes gmIntroFirst{
  0%,7%{
    opacity:0;
    transform:translateY(10px);
  }

  13%,29%{
    opacity:1;
    transform:none;
  }

  37%,100%{
    opacity:0;
    transform:translateY(-6px);
  }
}


/* صنع في جدة */
@keyframes gmIntroSecond{
  0%,34%{
    opacity:0;
    transform:translateY(10px);
  }

  42%,59%{
    opacity:1;
    transform:none;
  }

  67%,100%{
    opacity:0;
    transform:translateY(-6px);
  }
}


/* GREEN MOOD */
@keyframes gmIntroBrand{
  0%,62%{
    opacity:0;
    transform:scale(.92);
  }

  70%,94%{
    opacity:1;
    transform:scale(1);
  }

  100%{
    opacity:0;
    transform:scale(1.03);
  }
}


/* =========================================================
   POPUP
   ========================================================= */

#gm-offer-overlay{
  position:
    fixed;

  inset:
    0;

  z-index:
    2147483645;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    22px;

  background:
    rgba(58,43,31,.34);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  opacity:
    0;

  visibility:
    hidden;

  transition:
    .3s ease;
}

#gm-offer-overlay.gm-show{
  opacity:
    1;

  visibility:
    visible;
}

#gm-offer-card{
  position:
    relative;

  width:
    min(100%,390px);

  overflow:
    hidden;

  background:
    var(--gm-surface);

  border-radius:
    26px;

  border:
    1px solid rgba(255,255,255,.42);

  box-shadow:
    0 25px 70px rgba(60,42,27,.20);
}

.gm-offer-top{
  padding:
    27px 22px 19px;

  text-align:
    center;

  background:
    var(--gm-bg-deep);

  color:
    var(--gm-text);
}

.gm-offer-title{
  color:
    var(--gm-text) !important;
}

.gm-offer-body{
  padding:
    22px;

  text-align:
    center;
}

.gm-offer-shop{
  width:
    100%;

  min-height:
    48px;

  margin-top:
    18px;

  border:
    0;

  border-radius:
    13px;

  background:
    var(--gm-green);

  color:
    #fff;

  font-weight:
    900;
}


/* =========================================================
   BOTTOM NAV
   ========================================================= */

#gm-bottom-nav{
  display:
    none;
}

@media(max-width:768px){

  #gm-bottom-nav{
    position:
      fixed;

    left:
      10px;

    right:
      10px;

    bottom:
      10px;

    z-index:
      2147483000;

    height:
      67px;

    display:
      flex;

    align-items:
      center;

    justify-content:
      space-around;

    background:
      rgba(245,238,228,.97);

    border:
      1px solid rgba(73,58,43,.10);

    border-radius:
      21px;

    box-shadow:
      0 11px 30px rgba(62,45,30,.15);

    backdrop-filter:
      blur(14px);

    -webkit-backdrop-filter:
      blur(14px);
  }

  #gm-bottom-nav a,
  #gm-bottom-nav button{
    width:
      20%;

    height:
      100%;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      3px;

    border:
      0;

    padding:
      0;

    background:
      transparent;

    color:
      var(--gm-text);
  }

  #gm-bottom-nav small{
    color:
      var(--gm-text);

    font-size:
      10px;

    font-weight:
      750;
  }

  #gm-bottom-nav .gm-nav-icon{
    font-size:
      20px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:768px){

  .s-block--banners,
  .banner,
  .hero,
  .carousel-slider{
    padding:
      8px 10px 4px !important;
  }

  .s-block--banners img,
  .banner img,
  .hero img,
  .carousel-slider img{
    border-radius:
      18px !important;
  }

  section,
  .s-block{
    padding-top:
      19px !important;

    padding-bottom:
      19px !important;
  }

  .products-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:
      11px 8px !important;
  }

  salla-product-card,
  .s-product-card-entry,
  .product-card,
  .product-entry{
    border-radius:
      18px !important;
  }

  .s-product-card-image,
  .product-card-image,
  .product-entry .image,
  salla-product-card .s-product-card-image{
    height:
      215px !important;

    min-height:
      215px !important;
  }

}