/* Add custom CSS styles below */ 
/* ===================================
   1. LOGO - AUTO COLOR BASED ON BG
   =================================== */

/* الشعار الأساسي */
.header__heading-logo img,
.site-header__logo img,
header .logo img {
  transition: filter 0.3s ease;
}

/* لما الهيدر يكون فوق صورة داكنة → الشعار يصير أبيض */
.header--dark .header__heading-logo img,
.hero-section .header__heading-logo img,
.product-media--active[data-bg="dark"] ~ header .logo img {
  filter: invert(1) brightness(2);
}

/* لما الخلفية فاتحة → الشعار يبقى أسود */
.header--light .header__heading-logo img {
  filter: invert(0);
}

/* ===================================
   2. AUTO-DETECT USING mix-blend-mode
   أذكى طريقة - تلقائي 100%
   =================================== */

.header__heading-logo img,
.site-header__logo img {
  mix-blend-mode: difference;
  filter: invert(1);
  transition: all 0.3s ease;
}

/* ===================================
   3. WATERMARK على صورة المنتج
   =================================== */

/* الـ container تاع الصورة */
.product__media,
.product-single__media,
.product-media-container {
  position: relative;
}

/* الـ watermark نفسه */
.product__media::after,
.product-single__media::after,
.product-media-container::after {
  content: '';
  position: absolute;
  
  /* غير هذا الـ path لمسار شعارك */
  background-image: url('//cdn.shopify.com/s/files/1/YOUR-STORE/files/logo-watermark.png');
  background-repeat: no-repeat;
  background-size: 35% auto;
  background-position: center center;
  
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  opacity: 0.08; /* شفافية خفيفة */
  pointer-events: none; /* ما يعيق الكليك */
  z-index: 2;
}

/* ===================================
   4. إذا الشعار SVG - أسهل تحكم
   =================================== */

/* للشعار SVG مباشرة */
.header__heading-logo svg,
header .logo svg {
  mix-blend-mode: difference;
  fill: white;
}

/* ===================================
   5. RESPONSIVE - موبايل
   =================================== */

@media (max-width: 768px) {
  .product__media::after {
    background-size: 45% auto;
    opacity: 0.06;
  }
}