:root {
  /* الخلفية اللي طلبتيها */
  --color-header-main: #f8f7f3;

  /* لون النص/الأيقونات داخل الهيدر — غامق عشان يكون واضح */
  --color-header-text: #111111;

  /* لو تحبي تستخدمي ظلال خفيفة أو حدود */
  --color-header-border: rgba(0,0,0,0.04);
}

/* تضمن التطبيق حتى لو في خصائص مكتوبة مباشرة أو من إطار */
.prestige-header {
  background-color: var(--color-header-main) !important;
  color: var(--color-header-text);
  border-bottom: 1px solid var(--color-header-border);
  transition: background-color 250ms ease, color 250ms ease;
}

/* تأكد إن الأيقونات اللي لونها داخل style: تستخدم المتغيّر */
.prestige-header [style*="color: var(--color-header-text)"],
.prestige-header i,
.prestige-header svg {
  color: var(--color-header-text) !important;
  fill: var(--color-header-text) !important; /* لبعض أيقونات SVG */
}

/* لو في عناصر داخل الهيدر لها خلفية خاصة وتبيها شفافه */
.prestige-header .container,
.prestige-header .prestige-logo {
  background: transparent;
}

/* بديل سريع: لو تبغين تتجاوز استخدام المتغيّر وتضبط مباشرة */
.prestige-header.bg-[#f8f7f3] {
  background-color: #f8f7f3 !important;
}
:root {
  --color-header-main: #f8f7f3 !important;
}
body, html {
    background-color: #f8f7f3 !important;
}

:root {
    --color-header-main: #f8f7f3 !important;
    --color-header-secondary: #f8f7f3 !important;
    --color-background: #f8f7f3 !important;
}
.tabs,
.tabs-wrapper,
.s-products-slider-wrapper,
.s-slider-container,
.s-products-slider-card,
.s-slider-swiper-wrapper,
.s-slider-block__title,
.s-slider-wrapper {
    background-color: #f8f7f3 !important;
}

/* إزالة أي خلفيات ظل أو حدود */
.tabs,
.tabs button,
.s-products-slider-card {
    box-shadow: none !important;
    border: none !important;
    background: #f8f7f3 !important;
}
s-block--full-bg bg-gray-100
/* يشيل bg-gray-100 من السكشن */
.s-block--full-bg,
.bg-gray-100,
.s-block-tabs {
    background-color: #f8f7f3 !important;
}
 
salla-button.tab-trigger.is-active button {
    background-color: #4c2f23 !important;
    color: #f8f7f3 !important;
    border-color: #4c2f23 !important;
}

/* بقية الأزرار تبقى الافتراضية */
salla-button.tab-trigger button {
    transition: 0.2s ease;
}
/* الزر النشط (التبويب المحدد) */
salla-button.tab-trigger.is-active button {
    background-color: #4c2f23 !important; /* غامق */
    color: #f8f7f3 !important;            /* نص فاتح */
    border-color: #4c2f23 !important;     /* نفس اللون */
}

/* الأزرار غير النشطة (اللي ما عليها is-active) */
salla-button.tab-trigger:not(.is-active) button {
    background-color: transparent !important; /* بدون خلفية */
    color: #4c2f23 !important;                   /* نص غامق */
    border: 2px solid #4c2f23 !important;        /* فقط الأطراف */
}

/* تحسين بسيط للحركة */
salla-button.tab-trigger button {
    transition: 0.2s ease;
}
.img {
  border: 2px solid #4c2f23; /* لون التحديد */
  border-radius: 0.5rem;      /* يجعل الحواف دائرية مثل الصورة */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

/* إضافة ظل بسيط عند المرور على الكرت */
.img:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}