/* Add custom CSS styles below */ 
/* ═══════════════════════════════════════════════════════
   ✦ CHRISTINE — كود سلة المضمون والصحيح
   يستخدم المتغيرات الرسمية لسلة التي تخترق Shadow DOM
   + تحسينات على العناصر الخارجية المرئية
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

/* ══════════════════════════════════════
   ① المتغيرات الرسمية لسلة
   هذه هي الطريقة الوحيدة التي تؤثر على
   Web Components من الداخل
══════════════════════════════════════ */
:root {
  /* اللون الرئيسي — يؤثر على كل أزرار سلة، الروابط، التحديدات */
  --color-primary:         #C8507A;
  --color-primary-dark:    #8E3055;
  --color-primary-light:   #F0A0BB;
  --color-primary-reverse: #FFFFFF;

  /* الخط الرئيسي — يؤثر على كل النصوص في سلة */
  --font-main: 'Tajawal', sans-serif;

  /* متغيراتنا الخاصة للعناصر الخارجية */
  --ch-ivory:   #FDFAF8;
  --ch-petal:   #FAE8F0;
  --ch-petal2:  #FDF3F8;
  --ch-berry:   #8E3055;
  --ch-rose:    #C8507A;
  --ch-blush:   #F0A0BB;
  --ch-gold:    #C9985A;
  --ch-ink:     #1C1018;
  --ch-muted:   #7A5C6A;
  --ch-border:  rgba(200, 80, 122, 0.18);
}

/* ══════════════════════════════════════
   ② القاعدة — body والخلفية العامة
══════════════════════════════════════ */
body {
  font-family: 'Tajawal', sans-serif !important;
  background-color: var(--ch-ivory) !important;
  color: var(--ch-ink) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ══════════════════════════════════════
   ③ الهيدر — العنصر الخارجي المرئي
══════════════════════════════════════ */
header,
#header,
.header {
  background: rgba(253, 250, 248, 0.97) !important;
  border-bottom: 1px solid var(--ch-border) !important;
  box-shadow: 0 2px 20px rgba(142, 48, 85, 0.09) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* الشريط المتحرك تحت الهيدر */
header::after,
#header::after {
  content: '' !important;
  display: block !important;
  height: 2px !important;
  background: linear-gradient(
    90deg,
    var(--ch-petal) 0%,
    var(--ch-rose) 30%,
    var(--ch-gold) 50%,
    var(--ch-rose) 70%,
    var(--ch-petal) 100%
  ) !important;
  background-size: 200% !important;
  animation: ch-shimmer 3s ease infinite !important;
}
@keyframes ch-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* اللوجو */
header .logo img,
header img.logo,
#header .logo img {
  transition: transform 0.3s ease, filter 0.3s ease !important;
}
header .logo:hover img,
#header .logo:hover img {
  transform: scale(1.05) !important;
  filter: drop-shadow(0 3px 10px rgba(200,80,122,0.4)) !important;
}

/* روابط الهيدر */
header nav a,
header .nav a,
#header nav a {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--ch-ink) !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;
}
header nav a:hover,
#header nav a:hover {
  color: var(--ch-rose) !important;
  background: var(--ch-petal) !important;
}

/* ══════════════════════════════════════
   ④ شريط الإعلانات
══════════════════════════════════════ */
.announcement-bar,
[class*="announcement"] {
  background: var(--ch-berry) !important;
  color: #fff !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
}
.announcement-bar a,
[class*="announcement"] a {
  color: #F0DFC0 !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════
   ⑤ salla-product-card — يستجيب لـ CSS Variables
   الألوان الداخلية تتغير تلقائياً عبر --color-primary
══════════════════════════════════════ */

/* الغلاف الخارجي للبطاقة (خارج Shadow DOM) */
salla-product-card {
  display: block !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: transform 0.35s ease, box-shadow 0.35s ease !important;
  box-shadow: 0 2px 10px rgba(142,48,85,0.06) !important;
}
salla-product-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 12px 36px rgba(142,48,85,0.18) !important;
}

/* ══════════════════════════════════════
   ⑥ salla-button — يستجيب لـ --color-primary
══════════════════════════════════════ */
salla-button {
  --salla-fast-checkout-button-border-radius: 10px;
}

/* ══════════════════════════════════════
   ⑦ salla-mini-checkout-widget
══════════════════════════════════════ */
salla-mini-checkout-widget {
  --salla-fast-checkout-button-height: 3rem;
  --salla-fast-checkout-button-width: 100%;
  --salla-fast-checkout-button-border-radius: 12px;
}

/* ══════════════════════════════════════
   ⑧ عناوين الأقسام والصفحات
══════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Tajawal', sans-serif !important;
}

.section-title,
.category-title,
[class*="section-title"],
[class*="category-title"] {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
  color: var(--ch-ink) !important;
  letter-spacing: -0.01em !important;
}

/* ══════════════════════════════════════
   ⑨ رأس صفحة القسم / الكاتالوج
══════════════════════════════════════ */
.category-page-header,
.collection-header,
[class*="category-header"] {
  background: linear-gradient(
    135deg,
    var(--ch-petal) 0%,
    #F5E6D3 60%,
    var(--ch-petal2) 100%
  ) !important;
  border-radius: 0 0 32px 32px !important;
  padding: 36px 24px !important;
  text-align: center !important;
}

/* ══════════════════════════════════════
   ⑩ الفوتر
══════════════════════════════════════ */
footer,
.footer,
#footer {
  font-family: 'Tajawal', sans-serif !important;
  background: #1C1018 !important;
  color: #C4A8B8 !important;
  border-top: 3px solid var(--ch-rose) !important;
}

footer a,
.footer a {
  color: #9E8090 !important;
  font-size: 14px !important;
  transition: color 0.25s !important;
}
footer a:hover,
.footer a:hover {
  color: var(--ch-blush) !important;
}

footer h3, footer h4,
.footer h3, .footer h4 {
  color: #fff !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 700 !important;
}

.footer-bottom,
[class*="footer-copy"],
[class*="copyright"] {
  color: #5A4A52 !important;
  font-size: 13px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  padding: 14px 0 !important;
  text-align: center !important;
}

/* ══════════════════════════════════════
   ⑪ Scrollbar وتحديد النص
══════════════════════════════════════ */
::-webkit-scrollbar { width: 6px !important; }
::-webkit-scrollbar-track { background: var(--ch-petal2) !important; }
::-webkit-scrollbar-thumb { background: var(--ch-blush) !important; border-radius: 6px !important; }
::-webkit-scrollbar-thumb:hover { background: var(--ch-rose) !important; }
::selection { background: var(--ch-petal) !important; color: var(--ch-berry) !important; }

/* ══════════════════════════════════════
   ⑫ الجوال
══════════════════════════════════════ */
@media (max-width: 768px) {
  footer { text-align: center !important; }
  salla-product-card:hover { transform: translateY(-4px) !important; }
}

/* ═══════════════════════════════════════════════════════
   ملاحظة مهمة:
   إذا أردت تغيير لون أزرار "أضف للسلة" في سلة، اذهبي إلى:
   لوحة التحكم ← التصميم ← الألوان
   وغيري اللون الرئيسي إلى: #C8507A
   هذا سيؤثر فورياً على كل المكونات من الداخل.
═══════════════════════════════════════════════════════ */