/* Add custom CSS styles below */ 
html, body {
    background-color: #fbf7eb;
    margin: 0;
    padding: 0;
}



/* ===== لون الهيدر ===== */
#mainnav{
background:#e8e2d3 !important; /* أغمق قليلاً من الخلفية */
border-bottom:2px solid #d8d1c1 !important;
box-shadow:0 10px 30px rgba(0,0,0,0.08) !important;
}

/* ===== اللوجو ===== */
#mainnav .navbar-brand img{
height:60px !important;
width:auto !important;
transition:transform .4s ease;
}

/* حركة اللوجو */
#mainnav .navbar-brand:hover img{
transform:scale(1.08) rotate(-2deg);
}

/* ===== القائمة ===== */
#mainnav .main-menu{
display:flex !important;
gap:22px;
margin-right:25px;
}

/* روابط الأقسام */
#mainnav .main-menu .root-level a{
font-size:16px !important;
font-weight:700 !important;
color:#333 !important;
padding:10px 12px;
position:relative;
transition:all .3s ease;
}

/* خط تحت الرابط */
#mainnav .main-menu .root-level a::after{
content:"";
position:absolute;
bottom:-6px;
right:0;
width:0;
height:3px;
background:#2f2f8f;
transition:.3s;
border-radius:3px;
}

/* Hover احترافي */
#mainnav .main-menu .root-level a:hover{
color:#2f2f8f !important;
transform:translateY(-2px);
}

#mainnav .main-menu .root-level a:hover::after{
width:100%;
}

/* ===== الأيقونات ===== */
#mainnav .header-btn__icon{
font-size:24px !important;
color:#333 !important;
transition:.3s;
}

/* Hover للأيقونات */
#mainnav .header-btn:hover .header-btn__icon{
color:#2f2f8f !important;
transform:scale(1.15);
}

/* أيقونة السلة */
#mainnav .s-cart-summary-wrapper{
transition:.3s;
}

#mainnav .s-cart-summary-wrapper:hover{
transform:translateY(-3px) scale(1.05);
}

/* ===== الموبايل ===== */
@media (max-width:768px){

#mainnav{
background:#e8e2d3 !important;
}

#mainnav .navbar-brand img{
height:45px !important;
}

}







/* سكشن المنتجات */
.s-block {
  padding: 50px 20px;
  background-color: #fcf7eb; /* لون قريب من الهوية */
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* عنوان السكشن */
.s-block__title h2 {
  font-size: 32px;
  font-weight: 900;
  color: #2b2b7a; /* لون مستوحى من الهوية */
  margin-bottom: 15px;
  position: relative;
}

.s-block__title h2::after {
  content: '';
  width: 60px;
  height: 4px;
  background-color: #f8b500; /* خط أصفر أسفل العنوان */
  display: block;
  margin-top: 5px;
  border-radius: 2px;
}

/* رابط عرض الكل */
.s-block__display-all {
  font-weight: 600;
  color: #2b2b7a;
  text-decoration: none;
  transition: color 0.3s;
}

.s-block__display-all:hover {
  color: #f8b500;
}

/* كاردات المنتجات */
.s-product-card-entry {
  background-color: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.s-product-card-entry:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 25px rgba(0,0,0,0.15);
}

/* صورة المنتج */
.s-product-card-image-cover {
  border-bottom: 1px solid #f0f0f0;
  transition: transform 0.3s;
}

.s-product-card-entry:hover .s-product-card-image-cover {
  transform: scale(1.05);
}

/* اسم المنتج */
.s-product-card-content-title a {
  font-weight: 700;
  font-size: 18px;
  color: #2b2b7a;
  text-decoration: none;
}

.s-product-card-content-subtitle {
  font-size: 14px;
  color: #555;
}

/* السعر */
.s-product-card-price {
  font-weight: 700;
  color: #f8b500;
  font-size: 18px;
}

/* زر إضافة للسلة */
.s-button-element.s-button-primary-outline {
  background-color: #2b2b7a;
  color: #fff;
  border-radius: 50px;
  padding: 10px 20px;
  font-weight: 700;
  transition: all 0.3s;
}

.s-button-element.s-button-primary-outline:hover {
  background-color: #f8b500;
  color: #2b2b7a;
  transform: scale(1.05);
}

/* زر المفضلة */
.s-product-card-wishlist-btn {
  color: #f8b500;
  transition: transform 0.3s;
}

.s-product-card-wishlist-btn:hover {
  transform: scale(1.2);
}



/* سكشن البانرات */
.s-block--banners {
  padding: 40px 20px;
  background-color: #fcf7eb; /* لون قريب من الهوية */
}

/* شبكة البانرات */
.s-block--banners .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  justify-items: center;
}

/* الكارد الدائري/البيضاوي */
.banner-entry {
  width: 150px; /* حجم الدائرة */
  height: 150px;
  border-radius: 50%; /* دائري بالكامل */
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  position: relative;
}

/* تأثير hover للكارد */
.banner-entry:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 15px 25px rgba(0,0,0,0.2);
}

/* الصورة داخل الكارد */
.banner-entry .lazy__bg {
  width: 100%;
  height: 100%;
  border-radius: 50%; /* دائري */
  background-size: cover !important;
  background-position: center !important;
  transition: transform 0.3s;
}

.banner-entry:hover .lazy__bg {
  transform: scale(1.1);
}

/* للجوال */
@media (max-width: 768px) {
  .banner-entry {
    width: 120px;
    height: 120px;
  }
}




/* Preloader كامل الشاشة */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff; /* خلفية بيضاء */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.8s ease;
}

/* تحريك اللوجو */
#preloader img {
  width: 150px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}