/* Add custom CSS styles below */ 
.slider-arrow {
  background: transparent !important;
  border: none;
  box-shadow: none;
}


/* الخلفية العامة */
body {
  background-color: #F9F7F4 !important;
  color: #2C2C2C !important;
}

/* العناوين */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

/* النصوص الثانوية */
p, span, li {
}

/* الأزرار */
.btn, .button {
  background-color: #DCC3B5 !important;
  color: #F9F7F4 !important;
  border-radius: 0px;
  border: none;
}

/* الأزرار عند التمرير */
.btn:hover, .button:hover {
  background-color: #DAD2C8 !important;
  color: #2C2C2C !important;
}

/* البطاقات والخلفيات الثانوية */
.card, .product-card, .section {
  background-color: #F3EBE1 !important;
  border: 0.5px solid #EAEAEA !important;
}

/* الفواصل والخطوط الخفيفة */
hr, .divider {
  border-color: #EAEAEA !important;
}

/* روابط التنقل */
.nav-link, .menu-link {
  color: #2C2C2C !important;
}

/* الروابط عند المرور */
.nav-link:hover, .menu-link:hover {
  color: #DCC3B5 !important;
}

/* تحسين المسافات بين المنتجات */
.product-grid {
  gap: 4px !important;
}

/* أسهم السلايدر بدون خلفية */
.slider-arrow {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #B8B8B8 !important;
}

.component.custom-banner,
.component-banner,
.component-section {
  background-color: #F9F7F4 !important;
}

.lav-section.bg-white,
.lav-section.bg-light,
.lav-section,
.component-banner,
.component-banner-image {
  background-color: #F9F7F4 !important;
}

form.product-form section {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

input.s-quantity-input-input {
  background-color: transparent !important;
  border: none !important;
}

---
/* إزالة كل شيء من زر المشاركة */
.s-social-share-btn,
.s-social-share-btn:hover,
.s-social-share-btn:focus,
.s-social-share-btn:active {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* تعديل لون الأيقونة داخل زر المشاركة */
.s-social-share-btn svg,
.s-social-share-btn svg path,
.s-social-share-btn svg use {
  fill: transparent !important;
  stroke: #ADADC8 !important;
}

}
----

/* إزالة الخلفية البيضا تحت المنتج */
.product-single,
.product-single .container,
.product-single .product {
  background: transparent !important;
}


.group.relative.bg-white {
  background-color: transparent !important;
}


.s-slider-block__title-right h2 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    color: inherit !important;
}

/* إزالة خلفية زر السهم */
button.s-slider-next,
button.s-slider-prev {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* تغيير لون السهم نفسه إلى أبيض */
button.s-slider-next svg,
button.s-slider-prev svg {
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

footer.bg-black {
    background-color: #DAD2CB !important;
}

footer p.text-gray-400 {
    color: #ffffff !important;
}

a.logo img {
    max-width: 180px !important; /* تحكم في الحجم من هنا */
    height: auto !important;
}
h1.text-white {
    font-size: 2rem !important;       /* يعادل تقريباً 32px */
}

@media (min-width: 768px) {
    h1.text-white {
        font-size: 2.5rem !important;  /* يعادل تقريباً 40px */
    }
}

footer .flex.flex-col.md\:flex-row.items-center {
    justify-content: flex-end;
}

der-radius: 0px !important;
}

.banners-slider-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
}

.banners-slider-single {
    flex: 0 0 auto;
    width: auto !important;
    max-width: 100%;
}

.banners-slider-single img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.quantity-selector,
.quantity-selector *,
.s-quantity-input-container,
.s-quantity-input-container * {
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.s-quantity-input-container {
  border: 1px solid #DAD2CB !important; /* حدود المربع */
  border-radius: 0px !important;
  padding: 4px;
}


.s-comments.s-comments-product {
  display: none !important;
}

.s-products-slider .swiper-wrapper {
  gap: 0 !important;
}

.s-products-slider .swiper-slide {
  margin-right: 0 !important;
  width: auto !important;
}

/* استبدال الخلفيات الرمادية */
.bg-gray-50,
.bg-gray-100 {
  background-color: #F9F7F4 !important; /* لون الخلفية الأساسي لريكز */
}

h1.text-3xl.md\:text-4xl.font-light.text-gray-900.tracking-wider.uppercase.text-center {
    font-size: 24px !important; /* حجم الخط */
    line-height: 1.4 !important; /* تباعد الأسطر */
}

/* إلغاء الحواف الدائرية في كل صور المنتجات */
.product-card img,
.s-products-slider .product-card img,
.products-grid .product-card img,
.product-card .s-product-image,
.product-card .s-product-image img {
    border-radius: 0 !important;
    width: 100% !important;
    height: 400px !important; /* غيّري الرقم حسب الارتفاع اللي يناسبك */
    object-fit: cover !important;
}

footer .flex.flex-col.md\:flex-row.items-center {
    justify-content: center;
}



/* تغيير لون نص القائمة الرئيسية لونه أبيض */
desktop-nav .nav-link span {
  color: #FFFFFF !important;
}


------


/* === Header transparent at top === */
header, .header, .main-header, .navbar, .navigation-bar {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
  transition: background-color .3s ease, box-shadow .3s ease;
}
/* لا تغيّر اللون عند :hover أو :focus */
header:hover, .header:hover, .main-header:hover,
.navbar:hover, .navigation-bar:hover {
  background: transparent !important;
  box-shadow: none !important;
}

/* أحيانًا الحاوية نفسها تعطي خلفية */
header .container, .header .container, .main-header .container {
  background: transparent !important;
}

/* عند النزول يضيف القالب كلاس (جرّبت أشهرها)؛ حطّي الخلفية هنا فقط */
header.is-sticky, .header.is-sticky, .main-header.is-sticky,
header.scrolled, .header.scrolled, .main-header.scrolled,
.navbar.is-sticky, .navigation-bar.is-sticky {
  background: rgba(249, 247, 244, 0.96) !important; /* F9F7F4 */
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* لون روابط المنيو أعلى الصفحة (شفاف) */
desktop-nav .nav-link span { color:#FFFFFF !important; transition:color .3s ease; }
desktop-nav .nav-link:hover span { color:#DCC3B5 !important; }

/* لما يصير Sticky/Scrolled خليه غامق شوي ليبان على الخلفية الفاتحة */
.is-sticky desktop-nav .nav-link span,
.scrolled   desktop-nav .nav-link span { color:#2C2C2C !important; }
.is-sticky desktop-nav .nav-link:hover span,
.scrolled   desktop-nav .nav-link:hover span { color:#7D5F54 !important; }


--


/* إلغاء أي خط سفلي مصنوع بالـ ::after في المنيو */
.menu-nav a span::after,
.menu-nav a span:hover::after,
.menu-nav .link-hover::after,
.group:hover .link-hover::after {
  content: none !important;
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* تأكيد عدم وجود underline من أي نوع */
.menu-nav a,
.menu-nav a span {
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* نحتفظ بتغيّر اللون فقط */
.menu-nav a span { color:#FFFFFF !important; transition: color .3s ease; }
.menu-nav a:hover span { color:#DCC3B5 !important; }  /* لون الهوفر من ركيز */


---

/* 1) أيقونة البحث – الـ<path> يستخدم stroke="currentColor" */
button.icon-btn svg path { stroke:#fff !important; }

/* 2) أيقونة اللغة/العملة – الـ<path> يستخدم fill="currentColor" */
a.lang-currency-switcher svg { color:#fff !important; }
a.lang-currency-switcher svg path { fill:#fff !important; }
a.lang-currency-switcher svg.opacity-80 { opacity:1 !important; } /* يشيل التغميق */

/* 3) أيقونة السلة – الـ<g>/<path> يستخدمان stroke="currentColor" */
svg.navbar-cart-icon path,
svg.navbar-cart-icon g { stroke:#fff !important; }

/* 4) أيقونة عملة SAR (أيقونة فونت) */
i.sicon-sar { color:#fff !important; }

/* 5) ثبت نفس اللون عند الهوفر */
button.icon-btn:hover svg path,
a.lang-currency-switcher:hover svg path,
svg.navbar-cart-icon:hover path { stroke:#fff !important; }
a.lang-currency-switcher:hover svg path { fill:#fff !important; }


---

/* أيقونة البحث داخل navbar--solid */
.navbar--solid button.icon-btn svg path {
  stroke: #fff !important;
}
.navbar--solid button.icon-btn svg {
  color: #fff !important; /* لو الـpath يرث currentColor */
}

/* مبلغ السلة داخل navbar--solid */
.navbar--solid .s-cart-summary-total,
.navbar--solid .s-cart-summary-total i {
  color: #fff !important;
}

/* (اختياري) ثبّت الأبيض وقت الهوفر برضه */
.navbar--solid button.icon-btn:hover svg,
.navbar--solid button.icon-btn:hover svg path {
  color:#fff !important; stroke:#fff !important;
}


---


/* الهوم أو أي صفحة ليست قائمة منتجات — أبيض */
.navbar .menu-nav .nav-link,
.navbar .menu-nav .nav-link span,
.navbar .icon-btn svg,
.navbar .icon-btn svg path,
.navbar .navbar-cart-icon,
.navbar .navbar-cart-icon g,
.navbar .navbar-cart-icon path,
.navbar .s-cart-summary-total,
.navbar .s-cart-summary-total i {
  color: #fff !important;
  stroke: #fff !important;
}

/* صفحات المتجر (قائمة المنتجات) — غامق */
body.product-index .menu-nav .nav-link,
body.product-index .menu-nav .nav-link span,
body.product-index .icon-btn svg,
body.product-index .icon-btn svg path,
body.product-index .navbar-cart-icon,
body.product-index .navbar-cart-icon g,
body.product-index .navbar-cart-icon path,
body.product-index .s-cart-summary-total,
body.product-index .s-cart-summary-total i {
  color: #1f2937 !important;
  stroke: #1f2937 !important;
}


--

/* صفحات القائمة/التصنيف: خلّي أيقونة اللغة غامقة */
body.product-index .navbar--solid .lang-currency-switcher,
body.product-index .navbar--solid .lang-currency-switcher svg {
  color: #1f2937 !important;   /* يحدد currentColor */
  opacity: 1 !important;       /* يلغي opacity-80 */
}

body.product-index .navbar--solid .lang-currency-switcher svg path {
  fill: currentColor !important;
}


---

/* 0) ثبّتي ظهور الشعار وألغِ أي إخفاء */
#navbar .logo .main-logo-image{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  height:40px !important;
  width:auto !important;
  max-width:none !important;
  mix-blend-mode:normal !important;
}

/* 1) الافتراضي (الهوم والصفحات العامة): لا تعكس الألوان */
#navbar .logo .main-logo-image{
  filter:none !important;
}

/* 2) صفحات التسوق فقط — خلّي الشعار غامق على و الشفاف، نخفيها */
#navbar .logo .transparent-logo-image{ display:none !important; }

---

/* === الهيدر في صفحات التسوّق فقط (منتج + قائمة منتجات) === */
body.product-single #navbar,
body.product-index #navbar { }

/* نصوص الروابط في المنيو */
body.product-single #navbar .menu-nav .nav-link span,
body.product-index  #navbar .menu-nav .nav-link span {
  color: #1f2937 !important;
}

/* أزرار وأيقونات الهيدر (بحث، اللغة/العملة، السلة) */
body.product-single #navbar .icon-btn,
body.product-single #navbar .icon-btn svg,
body.product-single #navbar .icon-btn path,
body.product-single #navbar .lang-currency-switcher,
body.product-single #navbar .lang-currency-switcher svg,
body.product-single #navbar .navbar-cart-icon,
body.product-single #navbar .navbar-cart-icon g,
body.product-single #navbar .navbar-cart-icon path,
body.product-index  #navbar .icon-btn,
body.product-index  #navbar .icon-btn svg,
body.product-index  #navbar .icon-btn path,
body.product-index  #navbar .lang-currency-switcher,
body.product-index  #navbar .lang-currency-switcher svg,
body.product-index  #navbar .navbar-cart-icon,
body.product-index  #navbar .navbar-cart-icon g,
body.product-index  #navbar .navbar-cart-icon path {
  color: #1f2937 !important;
  stroke: #1f2937 !important;
}

/* رقم وإجمالي السلة + أيقونة SAR داخل السلة في الهيدر */
body.product-single #navbar .s-cart-summary-total,
body.product-single #navbar .s-cart-summary-total i,
body.product-single #navbar .s-cart-summary-total i::before,
body.product-index  #navbar .s-cart-summary-total,
body.product-index  #navbar .s-cart-summary-total i,
body.product-index  #navbar .s-cart-summary-total i::before {
  color: #1f2937 !important;
}

/* الشعار في صفحات التسوّق (بدون عكس ألوان) */
body.product-single #navbar .logo .main-logo-image,
body.product-index  #navbar .logo .main-logo-image {
  filter: none !important;
  opacity: 1 !important;
}


---