/* =====================================================
   ملف التخصيص الرئيسي للمتجر
   ===================================================== */


/* =====================================================
   متغيرات الألوان والإعدادات العامة
   ===================================================== */

:root {
  /* الألوان الأساسية */
  --primary-color: #6B4C1D;
  --secondary-color: #F5EFF5;

  /* الهيدر */
  --header-bg: #6B4C1D;
  --index-header-bg: #6B4C1D;
  --sub-menu-bg: #6B4C1D;
  --header-icons: #fff;

  /* الخطوط */
  --font-family: "DIN Next LT Arabic", sans-serif;

  /* الروابط */
  --hover-links-color: var(--primary-color);
  --title-color: #987640;

  /* الكروت */
  --main-btn-bg: var(--primary-color);
  --main-btn-color: #fff;
  --main-btn-border-color: var(--primary-color);
  --card-title: var(--primary-color);
  --card-title-align: center;

  /* الأسعار */
  --price-color: var(--primary-color);
  --price-label-color: var(--primary-color);
  --price-justify-content: center;

  /* الفوتر */
  --footer-logo: url(https://i.ibb.co/RG2Z5s4t/logo-Footer.png);
  --footer-bg: url(https://i.ibb.co/0pP9m0mz/footer.png);
}

body {
  background-color: #fff !important;
}


/* =====================================================
   الهيدر العلوي (Top Navbar) - مخفي بالكامل
   ===================================================== */

.top-navbar {
  display: none;
}


/* =====================================================
   الهيدر الرئيسي (Main Nav)
   ===================================================== */

div#mainnav {
  background: var(--header-bg);
  box-shadow: none;
  position: relative;
  z-index: 2;
  border-radius: 3rem !important;
  margin: 1rem .5rem;
}

/* لون الهيدر في الصفحة الرئيسية على الشاشات الكبيرة */
@media (min-width: 992px) {
  body.index div#mainnav {
    background-color: var(--index-header-bg);
  }
}

div#mainnav .bg-inherit {
  background-color: transparent;

}
  .s-user-menu-login-btn svg {
    fill: #fff;
  }


/* =====================================================
   شريط البحث داخل الهيدر (Desktop فقط)
   ===================================================== */

@media (min-width: 798px) {
  .top-navbar {
    display: none;
  }

  div#mainnav .s-search-input-wrapper {
    margin-left: 1rem;
    margin-right: 1rem;
  }

  div#mainnav .s-search-input {
    background-color: transparent;
    border-color: var(--header-icons);
    border-radius: 14px !important;
    color: var(--header-icons);
  }

  div#mainnav span.s-search-icon-wrap svg {
    fill: var(--header-icons);
  }

  div#mainnav .s-search-input::placeholder {
    color: var(--header-icons);
  }
}



  

  /* توسيط القائمة في الهيدر */
.header-wrapper .flex.items-stretch.justify-between {
    position: relative;
}

custom-main-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}


  

/* =====================================================
   الأيقونات في الهيدر
   ===================================================== */

.header-btn__icon.sicon-user-circle,
.header-btn__icon.icon.sicon-shopping-bag,
.s-cart-summary-total,
.mburger .sicon-menu.text-primary {
  color: var(--header-icons);
}

.header-btn__icon {
  border: none;
}

.header-search-icon i {
  cursor: pointer;
  color: var(--header-icons);
}

.s-user-menu-trigger {
  background-color: transparent;
}

/* إخفاء مبلغ السلة */
b.s-cart-summary-total {
  display: none;
}


  /* توسيط الايقونة*/
.rtl\:mr-4:where([dir=rtl],[dir=rtl] *) {
    margin-right: 0 !important

}
  .header-btn__icon.icon:where([dir=rtl],[dir=rtl] *){
    margin-left: 0;
  }

/* =====================================================
   روابط القائمة الرئيسية
   ===================================================== */

custom-main-menu nav ul li a span {
  color: var(--header-icons);
}

@media only screen and (min-width: 1024px) {
  .main-menu li.root-level > a {
    color: var(--header-icons);
  }

  .main-menu > .has-children:hover > a {
    color: var(--hover-links-color);
  }
}

/* القائمة الفرعية */
.main-menu .sub-menu {
  background-color: var(--sub-menu-bg);
}




/* =====================================================
   توحيد شكل أيقونات الهيدر (border موحد لكل الأيقونات)
   ===================================================== */
 
/* زر البحث */
button.header-btn.header-search-icon,
/* زر المستخدم */
button.s-user-menu-login-btn,
/* زر السلة */
a.s-cart-summary-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.7) !important;
  background-color: transparent !important;
  transition: background-color 0.25s, border-color 0.25s;
}
 
button.header-btn.header-search-icon:hover,
button.s-user-menu-login-btn:hover,
a.s-cart-summary-wrapper:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-color: #fff !important;
}
 
/* إخفاء عداد السلة والمبلغ عشان الشكل يبقى دايري */
.s-cart-summary-content,
b.s-cart-summary-total {
  display: none !important;
}
 
/* عداد السلة يظهر فوق الأيقونة */
span.s-cart-summary-count {
  position: absolute;
  top: -6px;
  left: -6px;
  background-color: #fff;
  color: var(--primary-color);
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
 
/* الـ wrapper بتاع السلة يكون relative عشان العداد يتحط صح */
a.s-cart-summary-wrapper {
  position: relative;
}
 
/* إخفاء السهم الـ SVG القديم وإظهار الأيقونة الجديدة بس */
#s-cart-icon slot-fb[name="icon"] {
  display: none;
}
 
/* لون أيقونة المستخدم */
button.s-user-menu-login-btn svg {
  fill: #fff;
  width: 20px;
  height: 20px;
}
 
/* لون أيقونة البحث */
button.header-btn.header-search-icon i {
  color: #fff;
  font-size: 18px;
}
 
/* لون أيقونة السلة */
a.s-cart-summary-wrapper i.header-btn__icon.icon.sicon-shopping-bag {
  color: #fff;
  font-size: 18px;
}
 
/* مسافة بين الأيقونات */
div.flex.items-center.justify-end.my-2\.5 {
  gap: 0.6rem;
}
 


/* =====================================================
   البانرات الرئيسية
   ===================================================== */

/* إزالة padding الجانبية من البانر الممتد */
:nth-child(1 of section.s-block.s-block--fixed-banner.wide-placeholder) .container,
.s-block.s-block--fixed-banner.wide-placeholder .container {
  padding-right: 0;
  padding-left: 0;
  max-width: 100%;
}

.banner--fixed img {
  border-radius: 0;
  background-color: transparent;
}

/* هامش البانر الأول على الشاشات الكبيرة */
@media (min-width: 992px) {
  :nth-child(1 of section.s-block.s-block--fixed-banner.wide-placeholder) {
    margin-top: 0rem;
  }
}

@media (max-width: 992px) {
  :nth-child(1 of section.s-block.s-block--fixed-banner.wide-placeholder) {
    margin-top: 0;
  }
}


/* =====================================================
   سلايدر الصور (Photos Slider)
   ===================================================== */

section.s-block.s-block--photos-slider.before-animate.animate-section {
  margin-top: 0;
}

/* إخفاء عنوان السلايدر */
section.s-block.s-block--photos-slider .s-slider-block__title {
  display: none;
}

/* إزالة padding من حاوية السلايدر */
section.s-block.s-block--photos-slider
  .swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-rtl.swiper-backface-hidden {
  padding-left: 0;
  padding-right: 0;
}

section.s-block.s-block--photos-slider .swiper-wrapper.s-slider-swiper-wrapper {
  padding-top: 0;
  padding-bottom: 0;
}

@media (min-width: 640px) {
  section.s-block.s-block--photos-slider .swiper-wrapper.s-slider-swiper-wrapper > div {
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

/* إزالة border-radius من صور السلايدر */
salla-slider.photos-slider .swiper-slide,
salla-slider.photos-slider .swiper-slide a img {
  border-radius: 0;
}

/* إخفاء نقاط التنقل */
.swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
  display: none;
}


/* =====================================================
   عناوين الأقسام
   ===================================================== */

/* عناوين المنتجات */
.s-products-slider-wrapper .s-slider-block__title {
  margin-bottom: .5rem;
  justify-content: center;
}

.s-products-slider-wrapper .s-slider-block__title-left {
  display: none !important;
}

.s-products-slider-wrapper .s-slider-block__title h2 {
  color: var(--title-color) !important;
}

.s-slider-block__title h2:where([dir=rtl],[dir=rtl] *),
.s-slider-block__title-right:where([dir=rtl],[dir=rtl] *) {
  padding-left: 0;
}

/* عناوين الأقسام (Categories) */
section.s-block.s-block--categories .s-slider-block__title {
  justify-content: center;
}

section.s-block.s-block--categories .s-slider-block__title h2 {
  color: var(--title-color) !important;
}

/* إخفاء أزرار التنقل في العناوين */
.s-slider-controls-outer .s-slider-block__title-nav {
  display: none;
}

/* عناوين الميزات والتقييمات */
.s-block__title {
  justify-content: center;
}

.s-block__title h2 {
  color: var(--title-color) !important;
}

.s-reviews-header-wrapper {
  justify-content: center;
}

.s-reviews-header-wrapper h1 {
  color: var(--title-color) !important;
}

/* حجم خط موحد للعناوين على الشاشات الكبيرة */
@media (min-width: 768px) {
  .s-slider-block__title h2,
  .s-block__title h2,
  .s-reviews-header-wrapper h1 {
    font-size: 22px;
  }
}

.s-slider-block__title h2,
.s-block__title h2,
.s-reviews-header-wrapper h1 {
  color: var(--title-color) !important;
}


/* =====================================================
   أيقونات قبل وبعد العناوين
   ===================================================== */

.s-slider-block__title h2,
.s-reviews-header-wrapper h1,
.s-block__title h2 {
  margin-top: 1rem;
}

.s-slider-block__title h2:before,
.s-reviews-header-wrapper h1:before,
.s-block__title h2:before,
.s-slider-block__title h2:after,
.s-reviews-header-wrapper h1:after,
.s-block__title h2:after {
  content: '';
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 31px;
  height: 34px;
  background: var(--title-img) no-repeat;
  background-size: contain !important;
}

/* الأيقونة على اليسار */
.s-slider-block__title h2:before,
.s-reviews-header-wrapper h1:before,
.s-block__title h2:before {
  left: 105%;
}

/* الأيقونة على اليمين */
.s-slider-block__title h2:after,
.s-reviews-header-wrapper h1:after,
.s-block__title h2:after {
  right: 105%;
}


/* =====================================================
   عنوان فرعي صغير تحت العنوان الرئيسي
   ===================================================== */

section.s-block.s-block--banners.container h2:after {
  display: block;
  font-size: 12px;
  font-weight: normal;
  margin-top: 8px;
  line-height: 1.4;
}

.s-block__title .right-side {
  text-align: center;
}


/* =====================================================
   قسم الأقسام (Categories)
   ===================================================== */

/* إخفاء عنوان الكارت */
.slide--cat-entry h2 {
  display: none;
}

/* إزالة padding من السلايدر في RTL */
.carousel-slider .swiper:where([dir=rtl],[dir=rtl] *) {
  padding-left: 0;
}

/* اتجاه السلايدر */
section.s-block.s-block--categories .swiper-wrapper {
  flex-direction: row-reverse;
}

/* توسيط الكروت على الشاشات الكبيرة */
@media (min-width: 1024px) {
  section.s-block.s-block--categories .swiper-wrapper {
    justify-content: center;
  }
}

/* عرض الكروت على الشاشات الكبيرة */
@media (min-width: 1024px) {
  section.s-block.s-block--categories .s-slider-swiper-wrapper .swiper-slide {
    width: calc(100% / 4);
  }
}

/* عرض الكروت على الشاشات الصغيرة */
@media (max-width: 1024px) {
  section.s-block.s-block--categories .s-slider-swiper-wrapper .swiper-slide {
    width: calc(100% / 2.5);
  }
}

/* تنسيق كارت القسم */
section.s-block.s-block--categories .swiper-wrapper .swiper-slide > a {
  background-color: transparent;
  border-width: 0;
  height: 100%;
  padding: 0;
}

.slide--cat-entry:hover {
  box-shadow: none;
}

/* صورة القسم مع تأثير hover */
section.s-block.s-block--categories .swiper-wrapper .swiper-slide > a > img {
  border-radius: 0;
  width: 100%;
  height: 100%;
  transition: .3s;
}

section.s-block.s-block--categories .swiper-wrapper .swiper-slide > a > img:hover {
  transform: scale(1.05);
}


/* =====================================================
   قسم المنتجات (Products)
   ===================================================== */

.s-slider-block__title-left {
  display: none !important;
}

/* padding السلايدر */
.swiper-wrapper.s-slider-swiper-wrapper {
  padding-top: 1rem;
  padding-bottom: 1.5rem;
}

/* عرض كارت المنتج على الموبايل */
@media (max-width: 768px) {
  .s-products-slider-card.swiper-slide {
    width: 175px;
  }
}

/* الكارت الرئيسي */
.s-product-card-vertical {
  position: relative;
  overflow: hidden;
  box-shadow: 0px 4px 16px 0px rgba(102, 2, 2, 0.25);
  background-color: var(--card-bg);
  transition: all .3s ease;
  height: 31rem;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .s-product-card-vertical {
    height: 21rem;
  }
}

/* تأثير البريق عند hover */
.s-product-card-vertical::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.6s;
  pointer-events: none;
}

.s-product-card-vertical:hover::after {
  left: 100%;
}

.s-product-card-vertical:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.s-products-list-vertical-cards {
  padding: .1rem;
}

/* محتوى الكارت */
.s-product-card-content {
  border-radius: 0;
}

/* عنوان المنتج */
.s-product-card-content-title {
  text-align: var(--card-title-align);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.s-product-card-content-title a {
  color: var(--card-title);
}

/* قسم السعر */
.s-product-card-content-sub {
  justify-content: var(--price-justify-content);
}

.s-product-card-price,
.s-product-card-sale-price h4 {
  color: var(--price-color) !important;
}

.s-product-card-content-sub h4 i.sicon-sar {
  color: var(--price-label-color) !important;
}

/* زر الإضافة للسلة */
.s-button-wide {
  background-color: var(--main-btn-bg);
  color: var(--main-btn-color);
  border-radius: 14px;
  padding: 8px;
  border-color: var(--main-btn-border-color);
}

.s-button-wide:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* تأثير بريق الزر */
.s-button-wide::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: 0.6s;
  pointer-events: none;
}

.s-button-wide:hover::after {
  left: 100%;
}

/* صورة المنتج */
.s-product-card-vertical .s-product-card-image {
  border-radius: .75rem;
  padding: .5rem;
  background-color: transparent;
}

.s-product-card-vertical img {
  transition: .5s;
  aspect-ratio: 1 / 1;
  border-radius: .75rem;
}


/* =====================================================
   قسم المميزات (Features Banners)
   ===================================================== */

:nth-child(1 of section.s-block.s-block--banners.container) {
  padding-top: 1rem;
}

/* الجريد على الشاشات الكبيرة */
@media (min-width: 768px) {
  :nth-child(1 of section.s-block.s-block--banners.container) .md\:grid-cols-3 {
    grid-template-columns: repeat(4, minmax(0, 1fr));

  }
}

@media (max-width: 768px) {
  :nth-child(1 of section.s-block.s-block--banners.container) .md\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* كارت الميزة */
:nth-child(1 of section.s-block.s-block--banners.container) .md\:grid-cols-3 .banner-entry {
  background-color: transparent;
  grid-row: span 1;
  padding: .6rem;
  transition: .5s;
}

:nth-child(1 of section.s-block.s-block--banners.container) .md\:grid-cols-3 .banner-entry:hover {
  transform: scale(1.01);
}

/* ارتفاع الكارت على الشاشات الكبيرة */
@media (min-width: 992px) {
  :nth-child(1 of section.s-block.s-block--banners.container) .md\:grid-cols-3 .banner-entry {
    height: 135px;
  }
}

/* ارتفاع الكارت على الموبايل */
@media (max-width: 768px) {
  :nth-child(1 of section.s-block.s-block--banners.container) .md\:grid-cols-3 .banner-entry,
  a.banner-entry.square-photos {
    height: 100px;
  }
}

/* إعداد الخلفية لتكون بنسبة صحيحة */
:nth-child(1 of section.s-block.s-block--banners.container) .lazy__bg {
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background: round;
}

/* تأثير البريق عند hover على البانرات */
.s-block--banners .banner-entry {
  position: relative;
  overflow: hidden;
}

.s-block--banners .banner-entry::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -60%;
  width: 40%;
  height: 260%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: rotate(20deg);
}

.s-block--banners .banner-entry:hover::after {
  animation: shineMove 0.9s ease forwards;
}

@keyframes shineMove {
  to {
    left: 130%;
  }
}


/* =====================================================
   الفوتر
   ===================================================== */

.footer-is-light .store-footer {
  background-image: var(--footer-bg);
  background-size: cover;
  background-position: top;
}

footer > div.store-footer__inner {
  background-color: transparent !important;
  color: #fff;
  border-bottom: none;
}

.s-social-list.hydrated {
  place-content: center;
}

/* إخفاء عنوان القسم الأول في الفوتر */
.store-footer__inner .container.grid > div:nth-of-type(1) h3 {
  display: none;
}

/* عرض اللوجو عبر pseudo element */
footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > a::after {
  content: "";
  display: block;
  width: 100%;
  height: 6rem;
  background-image: var(--footer-logo);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 1rem;
}

/* جريد الفوتر على الشاشات الكبيرة */
@media (min-width: 992px) {
  footer.store-footer .lg\:grid-cols-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-items: center;
  }
}

.store-footer__inner .container.grid > div p {
  margin: 10px auto;
}

/* توسيط كل النصوص في الفوتر */
footer.store-footer * {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .store-footer__inner {
    padding-bottom: 1rem;
  }
}

.store-footer__inner .container.grid > div:nth-of-type(1) {
  padding-left: 0;
  grid-column: span 1 / span 2;
}

footer > div.store-footer__inner > div > div.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 > a {
  justify-content: center;
}

footer > div.store-footer__inner > div > div:nth-child(3) {
  justify-items: center;
}

/* لون نص حقوق النشر */
.copyright-text p {
  color: #fff;
}

.copyright-text a:hover {
  color: #fff;
}


/* =====================================================
   قسم التقييمات (Reviews)
   ===================================================== */

.s-reviews-container {
  margin-top: 3rem;
}

.s-reviews-header-wrapper h1 {
  position: relative;
}

/* كارت التقييم */
.s-reviews-testimonial {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 3px 3px 3px #ddd;
}

.s-reviews-testimonial__avatar {
  border-radius: 0;
}

.s-reviews-testimonial__icon svg {
  fill: var(--primary-color);
}

div#contact-slot {
  margin: 0 auto;
}

.footerImage {
  max-width: 75px;
  text-align: center;
  margin: 0 auto;
}

.s-reviews-testimonial * {
  color: #30373F;
}


/* =====================================================
   أنيميشن ظهور الأقسام عند التمرير
   ===================================================== */

/* الحالة الأولى: مخفي */
section.before-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* الحالة الثانية: ظاهر */
section.animate-section {
  opacity: 1;
  transform: translateY(0);
}

/* أنيميشن البانر الثابت: تكبير */
.s-block--fixed-banner.before-animate {
  opacity: 0;
  transform: scale(0.9);
  transition: transform 1s ease, opacity 1s ease;
}

.s-block--fixed-banner.animate-section {
  opacity: 1;
  transform: scale(1);
}


/* =====================================================
   زر المفضلة (Wishlist)
   ===================================================== */

/* نقل زر المفضلة لداخل footer الكارت */
.s-product-card-content-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 768px) {
  .s-product-card-content-footer {
    gap: 4px;
  }
}

/* تنسيق الزر */
.s-product-card-vertical .s-product-card-wishlist-btn {
  position: static;
  color: var(--primary-color);
}

@media (max-width: 768px) {
  .s-product-card-vertical .s-product-card-wishlist-btn {
    width: 2rem;
    height: 2rem;
  }
}

salla-button.s-product-card-wishlist-btn {
  background: rgba(230, 201, 207, 0.25);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(230, 201, 207, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 50%;
}

salla-button.s-product-card-wishlist-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 8px 20px rgba(230, 201, 207, 0.6);
}

/* أنيميشن نبضة القلب عند الإضافة للمفضلة */
@keyframes heartPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

salla-button.s-product-card-wishlist-btn.favorited {
  animation: heartPulse 0.4s ease;
}

salla-button.s-product-card-wishlist-btn.favorited i {
  color: red;
  fill: red;
}