/***************** BRAND COLORS *****************/
:root{
  --brand-gold: #C4A757;  /* ذهبي الشعار */
  --brand-blue: #0083CA;  /* أزرق الشعار */

  --on-dark: #ffffff;     /* نص على خلفية غامقة */
  --white: #ffffff;
}

/*****************HEADER***************/
/*top-navbar*/


/*menu*/

@media (min-width: 1024px){
  .main-menu{
    margin-inline-start: 310px !important; /* غيّر الرقم */
    margin-inline-end: 0 !important;
  }
}



/*****************HERO SECTION****************/ 


/***********BANNER_1**************/
.s-block { margin-top: 3rem; }

/* خلفية سلايدر المنتجات */
.s-block:has(.s-products-slider-wrapper){
  background: var(--brand-blue) !important; /* كان #4D1572 */
  padding-top: 35px !important;
  padding-bottom: 35px !important;
  border-radius: 22px !important;
}

.s-block:has(.s-products-slider-wrapper) .text-store-text-primary{
  color: var(--white) !important;
}

/* زر "عرض الكل" */
.s-block:has(.s-products-slider-wrapper) .btn.btn--outline-primary{
  color: var(--white) !important;
  border-color: var(--white) !important;
  border-radius: 15px !important;
}

.s-block:has(.s-products-slider-wrapper) .btn.btn--outline-primary:hover{
  color: var(--brand-blue) !important;      /* بدل البرتقالي */
  background: var(--white) !important;
  border-color: var(--white) !important;
  border-radius: 15px !important;
}

/* لون سهم سلايدر المنتجات */
.s-block--best-offers .s-slider-block__title-left .s-slider-block__title-nav .s-slider-nav-arrow,
salla-products-slider .s-slider-block__title-left .s-slider-block__title-nav .s-slider-nav-arrow{
  background: var(--brand-gold) !important; /* كان #ff741f */
  color: var(--white) !important;
  border: 0 !important;
  border-radius: 999px !important;
  width: 40px !important;
  height: 40px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.15) !important;
}

.s-block--best-offers .s-slider-nav-arrow svg,
salla-products-slider .s-slider-nav-arrow svg{
  fill: var(--white) !important;
  stroke: var(--white) !important;
}

/* هوفر الأسهم */
.s-block--best-offers .s-slider-block__title-left .s-slider-block__title-nav .s-slider-nav-arrow:hover,
salla-products-slider .s-slider-block__title-left .s-slider-block__title-nav .s-slider-nav-arrow:hover{
  background: var(--white) !important;
  color: var(--brand-gold) !important;
}

.s-block--best-offers .s-slider-nav-arrow:hover svg,
salla-products-slider .s-slider-nav-arrow:hover svg{
  fill: var(--brand-gold) !important;
  stroke: var(--brand-gold) !important;
}


/*CARD-HEIGHT*/ 
@media (min-width: 1024px){
  .fit-slider-products .swiper-slide custom-salla-product-card{
    height: 420px !important;
    min-height: 420px !important;
    display: flex !important;
  }

  body:not(.free-images-height) .fit-slider-products .swiper-slide .product-card:not(.product-card--fit-height):not(.product-card__full-image):not(.product-card--minimal):not(.product-card--horizontal){
    height: 100% !important;
    min-height: 100% !important;
  }

  .fit-slider-products .swiper-slide .product-card{
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden;
  }

  .fit-slider-products .product-card .product-card__image,
  .fit-slider-products .product-card .product-card__image a{
    height: 250px !important;
    display: block !important;
  }

  .fit-slider-products .product-card .product-card__image img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  .fit-slider-products .product-card .product-card__title,
  .fit-slider-products .product-card .product-card__name{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 44px;
  }

  .fit-slider-products .product-card .product-card__actions,
  .fit-slider-products .product-card .product-card__footer{
    margin-top: auto !important;
  }
}

/*view-all*/
/* ✅ زر "عرض الكل" داخل سلايدر المنتجات فقط - طبيعي + هوفر */
.s-block:has(.s-products-slider-wrapper) .btn.btn--outline-primary{
  background-color: #fff !important;
  color: #C4A757 !important;
  border: 1px solid #C4A757 !important;
  border-radius: 15px !important;
}

/* ✅ هوفر + فوكس */
.s-block:has(.s-products-slider-wrapper) .btn.btn--outline-primary:hover,
.s-block:has(.s-products-slider-wrapper) .btn.btn--outline-primary:focus,
.s-block:has(.s-products-slider-wrapper) .btn.btn--outline-primary:focus-visible{
  background-color: #C4A757 !important; /* لازم تتغير عشان النص الأبيض يبان */
  color: #fff !important;
  border-color: #C4A757 !important;
}

/*اخفاء overlow عند الهوفر على زر عرض الكل */
//* إزالة أي هالة/لون أزرق يظهر عند hover فقط */
.s-block:has(.s-products-slider-wrapper) .btn.btn--outline-primary:hover{
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

/* لو الثيم يعمل طبقة hover باستخدام before/after */
.s-block:has(.s-products-slider-wrapper) .btn.btn--outline-primary:hover::before,
.s-block:has(.s-products-slider-wrapper) .btn.btn--outline-primary:hover::after{
  opacity: 0 !important;
  display: none !important;
  content: none !important;
}

/* لو الهالة جاية من ring (Tailwind) عند hover */
.s-block:has(.s-products-slider-wrapper) .btn.btn--outline-primary:hover{
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
  --tw-ring-offset-color: transparent !important;
}


.bg-gray-200{
  background-color: #C4A757 !important;
}


/**************** salla-photo-slider****************/
salla-slider.photos-slider{
  --photo-max: 1460px;
  --photo-gutter: 16px;
  --photo-radius: 22px;
}

salla-slider.photos-slider{
  display: block;
  width: min(calc(100% - (var(--photo-gutter) * 2)), var(--photo-max));
  margin-inline: auto;
  border-radius: var(--photo-radius);
  overflow: hidden;
}

salla-slider.photos-slider .swiper{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: hidden !important;
}

salla-slider.photos-slider .swiper-slide{
  width: 100% !important;
  margin: 0 !important;
}

salla-slider.photos-slider .swiper,
salla-slider.photos-slider .swiper-wrapper,
salla-slider.photos-slider .swiper-slide{
  border-radius: inherit;
}

@media (max-width: 640px){
  salla-slider.photos-slider{
    --photo-gutter: 12px;
    --photo-radius: 14px;
  }
}


/*arrow slider*/ 
:root{
  --slider-arrow: var(--brand-gold); /* كان #ff741f */
}

.s-slider-v-centered .s-slider-block__title-nav button.s-slider-nav-arrow,
.s-slider-v-centered .s-slider-block__title-nav button.s-slider-nav-arrow:hover{
  box-shadow: none !important;
}

.s-slider-v-centered .s-slider-block__title-nav button.s-slider-nav-arrow{
  background: var(--slider-arrow) !important;
  border: 1px solid var(--slider-arrow) !important;
  color: #fff !important;
}

.s-slider-v-centered .s-slider-block__title-nav button.s-slider-nav-arrow svg{
  fill: #fff !important;
  stroke: #fff !important;
}

.s-slider-v-centered .s-slider-block__title-nav button.s-slider-nav-arrow:hover{
  background: #fff !important;
  border: 1px solid var(--slider-arrow) !important;
  color: var(--slider-arrow) !important;
}

.s-slider-v-centered .s-slider-block__title-nav button.s-slider-nav-arrow:hover svg{
  fill: var(--slider-arrow) !important;
  stroke: var(--slider-arrow) !important;
}


/*****************wide-banner*************/