/* ====================================
   خلفية متجر Yalla Codz — النسخة الكاملة
   ==================================== */

/* 1. خلفية الصفحة الرئيسية */
body {
  background:
    radial-gradient(
      ellipse 90% 55% at 50% -5%,
      rgba(138, 43, 226, 0.30) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 40% at 90% 75%,
      rgba(160, 0, 255, 0.18) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 45% 35% at 10% 85%,
      rgba(70, 0, 170, 0.22) 0%,
      transparent 50%
    ),
    linear-gradient(
      155deg,
      #1c0638 0%,
      #110524 45%,
      #080118 100%
    ) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* 2. بطاقات الأقسام — .banner-square */
.banner-square .box-img {
  box-shadow:
    0 0 0 1px rgba(180, 120, 255, 0.18),
    0 6px 28px rgba(90, 20, 160, 0.55);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  background: rgba(255,255,255,0.03);
}

.banner-square:hover .box-img {
  transform: translateY(-5px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(200, 140, 255, 0.30),
    0 14px 40px rgba(110, 30, 200, 0.70);
}

/* 3. اسم القسم تحت الصورة */
.banner-square .text-wrapper h3 {
  color: #e0c8ff;
  text-shadow: 0 2px 12px rgba(120, 60, 220, 0.5);
}

/* 4. بطاقات المنتجات */
custom-salla-product-card,
.s-product-card-entry {
  box-shadow:
    0 0 0 1px rgba(180, 120, 255, 0.12),
    0 8px 30px rgba(80, 20, 150, 0.50) !important;
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(160, 100, 255, 0.15) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

custom-salla-product-card:hover,
.s-product-card-entry:hover {
  transform: translateY(-5px);
  box-shadow:
    0 0 0 1px rgba(200, 140, 255, 0.25),
    0 18px 48px rgba(100, 25, 190, 0.68) !important;
}