const css = `
    /* === استيراد الخطوط === */
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Cairo:wght@300;400;600;700&display=swap');

    /* === متغيرات الألوان === */
    :root {
      --roote-green:       #1A3C34;
      --roote-green-light: #2A5446;
      --roote-green-pale:  #EAF0EE;
      --roote-gold:        #FFFFFF;
      --roote-white:       #FFFFFF;
      --roote-off-white:   #F8F6F2;
      --roote-text:        #1A1A1A;
      --roote-muted:       #6B7280;
      --roote-border:      #D1D9D7;
      --roote-radius:      8px;
      --roote-shadow:      0 4px 24px rgba(26,60,52,0.10);
      --roote-shadow-hover:0 8px 32px rgba(26,60,52,0.18);
    }

    /* === الخط العام === */
    body, * {
      font-family: 'Cairo', sans-serif !important;
    }

    /* === الشريط العلوي (Header) === */
    header,
    .header,
    #header,
    .site-header,
    .store-header {
      background-color: var(--roote-green) !important;
      border-bottom: 2px solid var(--roote-white) !important;
      box-shadow: 0 2px 12px rgba(26,60,52,0.25) !important;
    }

    /* نصوص الهيدر */
    header a,
    header span,
    header p,
    header li,
    .header a,
    .header span,
    .site-header a,
    .store-header a {
      color: var(--roote-white) !important;
    }

    /* اسم المتجر / الشعار النصي */
    .store-name,
    .logo-text,
    .brand-name,
    header .title {
      font-family: 'Playfair Display', serif !important;
      color: var(--roote-white) !important;
      letter-spacing: 2px !important;
      font-weight: 700 !important;
    }

    /* أيقونة السلة في الهيدر */
    .cart-icon,
    .header-cart,
    [class*="cart-btn"],
    [class*="cart-icon"] {
      color: var(--roote-white) !important;
    }

    /* === شريط الإعلانات (Announcement Bar) === */
    .announcement-bar,
    .promo-bar,
    [class*="announcement"] {
      background-color: var(--roote-white) !important;
      color: var(--roote-green) !important;
      font-weight: 600 !important;
      font-size: 13px !important;
      letter-spacing: 0.5px !important;
    }

    /* === الخلفية العامة === */
    body,
    main,
    .main-content,
    #main {
      background-color: var(--roote-off-white) !important;
    }

    /* === قسم Hero / البانر الرئيسي === */
    .hero,
    .hero-section,
    .slider,
    .main-slider,
    [class*="hero"],
    [class*="banner-section"] {
      background-color: var(--roote-green) !important;
      border-radius: 0 0 var(--roote-radius) var(--roote-radius) !important;
    }

    .hero h1,
    .hero h2,
    .hero-title,
    .slider-title,
    [class*="hero"] h1,
    [class*="hero"] h2 {
      font-family: 'Playfair Display', serif !important;
      color: var(--roote-white) !important;
      font-size: clamp(28px, 4vw, 52px) !important;
      font-weight: 700 !important;
      line-height: 1.3 !important;
    }

    .hero p,
    .hero-subtitle,
    [class*="hero"] p {
      color: rgba(255,255,255,0.85) !important;
      font-size: 16px !important;
      line-height: 1.7 !important;
    }

    /* === أزرار CTA في البانر === */
    .hero .btn,
    .hero button,
    .hero a.button,
    [class*="hero"] .btn-primary {
      background-color: var(--roote-white) !important;
      color: var(--roote-green) !important;
      border: none !important;
      border-radius: var(--roote-radius) !important;
      font-weight: 700 !important;
      padding: 12px 28px !important;
      font-size: 15px !important;
      letter-spacing: 0.5px !important;
      transition: all 0.3s ease !important;
    }

    .hero .btn:hover,
    .hero button:hover,
    [class*="hero"] .btn-primary:hover {
      background-color: var(--roote-white) !important;
      color: var(--roote-green) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 20px rgba(201,168,76,0.4) !important;
    }

    /* === بطاقات المنتجات === */
    .product-card,
    .product-item,
    [class*="product-card"],
    [class*="product-item"],
    .products-grid .item {
      background-color: var(--roote-white) !important;
      border: 1px solid var(--roote-border) !important;
      border-radius: var(--roote-radius) !important;
      box-shadow: var(--roote-shadow) !important;
      transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
      overflow: hidden !important;
    }

    .product-card:hover,
    .product-item:hover,
    [class*="product-card"]:hover,
    [class*="product-item"]:hover {
      transform: translateY(-6px) !important;
      box-shadow: var(--roote-shadow-hover) !important;
      border-color: var(--roote-green) !important;
    }

    /* اسم المنتج */
    .product-card .product-name,
    .product-card h3,
    .product-card h4,
    .product-item .name,
    [class*="product-card"] .title,
    [class*="product-name"] {
      font-family: 'Cairo', sans-serif !important;
      color: var(--roote-green) !important;
      font-weight: 700 !important;
      font-size: 15px !important;
      line-height: 1.5 !important;
    }

    /* سعر المنتج */
    .product-price,
    .price,
    [class*="product-price"],
    [class*="price-value"] {
      color: var(--roote-green) !important;
      font-weight: 700 !important;
      font-size: 17px !important;
    }

    /* السعر القديم (المشطوب) */
    .old-price,
    .original-price,
    [class*="old-price"],
    del {
      color: var(--roote-muted) !important;
      font-size: 13px !important;
    }

    /* === زر "أضف للسلة" === */
    .add-to-cart,
    .btn-add-cart,
    [class*="add-to-cart"],
    [class*="add-cart"],
    .product-card .btn,
    .product-item .btn {
      background-color: var(--roote-green) !important;
      color: var(--roote-white) !important;
      border: 2px solid var(--roote-green) !important;
      border-radius: var(--roote-radius) !important;
      font-weight: 600 !important;
      font-size: 14px !important;
      padding: 10px 20px !important;
      width: 100% !important;
      transition: all 0.3s ease !important;
      letter-spacing: 0.3px !important;
    }

    .add-to-cart:hover,
    .btn-add-cart:hover,
    [class*="add-to-cart"]:hover,
    [class*="add-cart"]:hover {
      background-color: var(--roote-white) !important;
      color: var(--roote-green) !important;
      border-color: var(--roote-green) !important;
    }

    /* === شارة الخصم / العرض === */
    .badge,
    .discount-badge,
    .sale-badge,
    [class*="badge"],
    [class*="discount"] {
      background-color: var(--roote-white) !important;
      color: var(--roote-green) !important;
      font-weight: 700 !important;
      border-radius: 4px !important;
      font-size: 12px !important;
      padding: 3px 8px !important;
    }

    /* === عناوين الأقسام === */
    .section-title,
    .section h2,
    .section h3,
    [class*="section-title"],
    .products-section h2,
    .categories-section h2 {
      font-family: 'Playfair Display', serif !important;
      color: var(--roote-green) !important;
      font-weight: 700 !important;
      font-size: clamp(22px, 3vw, 36px) !important;
      position: relative !important;
      padding-bottom: 12px !important;
    }

    /* خط تزييني تحت العنوان */
    .section-title::after,
    .section h2::after,
    [class*="section-title"]::after {
      content: '' !important;
      display: block !important;
      width: 60px !important;
      height: 3px !important;
      background: linear-gradient(90deg, var(--roote-white), var(--roote-green-light)) !important;
      margin-top: 10px !important;
      border-radius: 2px !important;
    }

    /* === بطاقات الفئات === */
    .category-card,
    .category-item,
    [class*="category-card"],
    [class*="category-item"] {
      border-radius: var(--roote-radius) !important;
      overflow: hidden !important;
      transition: all 0.35s ease !important;
      border: 1px solid var(--roote-border) !important;
    }

    .category-card:hover,
    .category-item:hover,
    [class*="category-card"]:hover {
      transform: scale(1.03) !important;
      box-shadow: var(--roote-shadow-hover) !important;
    }

    .category-card .name,
    .category-card h3,
    [class*="category-card"] .title {
      background-color: var(--roote-green) !important;
      color: var(--roote-white) !important;
      font-weight: 600 !important;
      padding: 10px 14px !important;
    }

    /* === سلة التسوق (Drawer / Sidebar) === */
    .cart-drawer,
    .cart-sidebar,
    .cart-panel,
    [class*="cart-drawer"],
    [class*="cart-sidebar"] {
      background-color: var(--roote-white) !important;
      border-left: 3px solid var(--roote-green) !important;
    }

    .cart-drawer h2,
    .cart-drawer .title,
    [class*="cart-drawer"] h2,
    [class*="cart-sidebar"] h2 {
      color: var(--roote-green) !important;
      font-family: 'Playfair Display', serif !important;
      font-weight: 700 !important;
      border-bottom: 2px solid var(--roote-white) !important;
      padding-bottom: 12px !important;
    }

    /* زر إتمام الطلب */
    .checkout-btn,
    .btn-checkout,
    [class*="checkout-btn"],
    [class*="checkout-button"] {
      background-color: var(--roote-green) !important;
      color: var(--roote-white) !important;
      border-radius: var(--roote-radius) !important;
      font-weight: 700 !important;
      font-size: 16px !important;
      padding: 14px !important;
      width: 100% !important;
      border: none !important;
      transition: all 0.3s ease !important;
      letter-spacing: 0.5px !important;
    }

    .checkout-btn:hover,
    [class*="checkout-btn"]:hover {
      background-color: var(--roote-green-light) !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 6px 20px rgba(26,60,52,0.3) !important;
    }

    /* إجمالي السلة */
    .cart-total,
    .total-price,
    [class*="cart-total"] {
      color: var(--roote-green) !important;
      font-weight: 700 !important;
      font-size: 18px !important;
    }

    /* === صفحة المنتج === */
    .product-page h1,
    .product-detail h1,
    [class*="product-page"] h1 {
      font-family: 'Playfair Display', serif !important;
      color: var(--roote-green) !important;
      font-weight: 700 !important;
    }

    .product-page .price,
    .product-detail .price {
      color: var(--roote-green) !important;
      font-size: 24px !important;
      font-weight: 700 !important;
    }

    /* === الفوتر === */
    footer,
    .footer,
    #footer,
    .site-footer {
      background-color: var(--roote-green) !important;
      color: var(--roote-white) !important;
      border-top: 3px solid var(--roote-white) !important;
    }

    footer a,
    footer p,
    footer span,
    footer li,
    .footer a,
    .site-footer a {
      color: rgba(255,255,255,0.80) !important;
      transition: color 0.2s ease !important;
    }

    footer a:hover,
    .footer a:hover,
    .site-footer a:hover {
      color: var(--roote-white) !important;
    }

    footer h3,
    footer h4,
    .footer h3,
    .footer h4 {
      color: var(--roote-white) !important;
      font-weight: 700 !important;
      border-bottom: 1px solid rgba(201,168,76,0.4) !important;
      padding-bottom: 8px !important;
      margin-bottom: 14px !important;
    }

    /* === شريط البحث === */
    .search-input,
    input[type="search"],
    [class*="search-input"] {
      border: 2px solid var(--roote-border) !important;
      border-radius: var(--roote-radius) !important;
      padding: 10px 16px !important;
      font-family: 'Cairo', sans-serif !important;
      transition: border-color 0.2s ease !important;
    }

    .search-input:focus,
    input[type="search"]:focus {
      border-color: var(--roote-green) !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(26,60,52,0.12) !important;
    }

    /* === التنقل / القائمة === */
    nav a,
    .nav-link,
    .menu-item a,
    [class*="nav-link"] {
      color: var(--roote-white) !important;
      font-weight: 600 !important;
      font-size: 14px !important;
      letter-spacing: 0.3px !important;
      transition: color 0.2s ease !important;
      position: relative !important;
    }

    nav a:hover,
    .nav-link:hover,
    .menu-item a:hover {
      color: var(--roote-white) !important;
    }

    /* === الأزرار العامة === */
    .btn-primary,
    button[type="submit"],
    .submit-btn {
      background-color: var(--roote-green) !important;
      color: var(--roote-white) !important;
      border: none !important;
      border-radius: var(--roote-radius) !important;
      font-weight: 600 !important;
      padding: 11px 24px !important;
      transition: all 0.3s ease !important;
    }

    .btn-primary:hover,
    button[type="submit"]:hover {
      background-color: var(--roote-green-light) !important;
      transform: translateY(-1px) !important;
    }

    .btn-secondary,
    .btn-outline {
      background-color: transparent !important;
      color: var(--roote-green) !important;
      border: 2px solid var(--roote-green) !important;
      border-radius: var(--roote-radius) !important;
      font-weight: 600 !important;
      padding: 10px 22px !important;
      transition: all 0.3s ease !important;
    }

    .btn-secondary:hover,
    .btn-outline:hover {
      background-color: var(--roote-green) !important;
      color: var(--roote-white) !important;
    }

    /* === Breadcrumb === */
    .breadcrumb,
    [class*="breadcrumb"] {
      color: var(--roote-muted) !important;
      font-size: 13px !important;
    }

    .breadcrumb a,
    [class*="breadcrumb"] a {
      color: var(--roote-green) !important;
      font-weight: 600 !important;
    }

    /* === الإشعارات / Toast === */
    .notification,
    .toast,
    .alert-success,
    [class*="notification"] {
      background-color: var(--roote-green) !important;
      color: var(--roote-white) !important;
      border-radius: var(--roote-radius) !important;
      border-left: 4px solid var(--roote-white) !important;
    }

    /* === تأثيرات الدخول (Fade-in on scroll) === */
    .roote-fade-in {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .roote-fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* === شريط التقدم / Loading === */
    .loading-bar,
    [class*="loading"] {
      background-color: var(--roote-green) !important;
    }

    /* === Scrollbar مخصص === */
    ::-webkit-scrollbar {
      width: 6px;
    }
    ::-webkit-scrollbar-track {
      background: var(--roote-off-white);
    }
    ::-webkit-scrollbar-thumb {
      background: var(--roote-green);
      border-radius: 3px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--roote-green-light);
    }

    /* === تحسينات الموبايل === */
    @media (max-width: 768px) {
      .section-title,
      .section h2 {
        font-size: 22px !important;
      }
      .hero h1,
      .hero-title {
        font-size: 26px !important;
      }
    }
  `;

  /* --------------------------------------------------
     2. حقن الـ CSS في الصفحة
  -------------------------------------------------- */
  const styleEl = document.createElement('style');
  styleEl.id = 'roote-salon-custom-styles';
  styleEl.textContent = css;
  document.head.appendChild(styleEl);


  /* --------------------------------------------------
     3. تأثير Fade-in عند التمرير
  -------------------------------------------------- */
  function initFadeIn() {
    const targets = document.querySelectorAll(
      '.product-card, .product-item, .category-card, .section-title, [class*="product-card"], [class*="category-card"]'
    );

    targets.forEach(function (el) {
      el.classList.add('roote-fade-in');
    });

    const observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12 });

    targets.forEach(function (el) {
      observer.observe(el);
    });
  }


  /* --------------------------------------------------
     4. إضافة تأثير Ripple على أزرار "أضف للسلة"
  -------------------------------------------------- */
  function initRippleEffect() {
    document.addEventListener('click', function (e) {
      const btn = e.target.closest(
        '.add-to-cart, .btn-add-cart, [class*="add-to-cart"], [class*="add-cart"]'
      );
      if (!btn) return;

      const ripple = document.createElement('span');
      const rect   = btn.getBoundingClientRect();
      const size   = Math.max(rect.width, rect.height);
      const x      = e.clientX - rect.left - size / 2;
      const y      = e.clientY - rect.top  - size / 2;

      ripple.style.cssText = [
        'position:absolute',
        'border-radius:50%',
        'background:rgba(255,255,255,0.35)',
        'pointer-events:none',
        'transform:scale(0)',
        'animation:roote-ripple 0.55s linear',
        'width:'  + size + 'px',
        'height:' + size + 'px',
        'left:'   + x    + 'px',
        'top:'    + y    + 'px',
      ].join(';');

      btn.style.position = 'relative';
      btn.style.overflow = 'hidden';
      btn.appendChild(ripple);
      setTimeout(function () { ripple.remove(); }, 600);
    });

    /* keyframe للـ ripple */
    const rippleStyle = document.createElement('style');
    rippleStyle.textContent = '@keyframes roote-ripple{to{transform:scale(4);opacity:0}}';
    document.head.appendChild(rippleStyle);
  }


  /* --------------------------------------------------
     5. شريط إعلان علوي مخصص (اختياري — عدّل النص)
  -------------------------------------------------- */
  function injectAnnouncementBar() {
    if (document.getElementById('roote-announcement')) return;

    const bar = document.createElement('div');
    bar.id = 'roote-announcement';
    bar.style.cssText = [
      'background:#FFFFFF',
      'color:#1A3C34',
      'text-align:center',
      'padding:9px 16px',
      'font-family:Cairo,sans-serif',
      'font-size:13px',
      'font-weight:700',
      'letter-spacing:0.4px',
      'position:relative',
      'z-index:9999',
    ].join(';');

    bar.innerHTML = '🌿 شحن مجاني على الطلبات فوق 150 ريال  |  منتجات العناية الأصيلة من صالون روتيه';

    /* زر الإغلاق */
    const closeBtn = document.createElement('button');
    closeBtn.textContent = '✕';
    closeBtn.style.cssText = [
      'position:absolute',
      'right:14px',
      'top:50%',
      'transform:translateY(-50%)',
      'background:none',
      'border:none',
      'color:#1A3C34',
      'font-size:14px',
      'cursor:pointer',
      'opacity:0.7',
    ].join(';');
    closeBtn.addEventListener('click', function () { bar.remove(); });
    bar.appendChild(closeBtn);

    document.body.insertBefore(bar, document.body.firstChild);
  }


  /* --------------------------------------------------
     6. تشغيل كل الوظائف بعد تحميل الصفحة
  -------------------------------------------------- */
  function init() {
    initFadeIn();
    initRippleEffect();
    injectAnnouncementBar();
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

})();