/* Add custom CSS styles below */ 
/* ====== متغيرات الألوان والشعار ====== */ 
:root { 
  --color-primary: #8c6709;          /* ذهبي خافت */
  --color-primary-dark: #8c6709;     /* ذهبي غامق */
  --color-primary-light: #8c6709;    /* ذهبي فاتح */
  --color-primary-reverse: #8c6709;  /* تدرج بديل */
  --logo: url(https://ibb.co/Xk3NgmSn); 
}

/* ====== القوائم ====== */ 
.main-menu { margin-right: 10rem !important; } 
.main-menu li.root-level > a { font-weight: 700; font-size: 18px; color: var(--color-primary); } 
.main-menu span { font-size: 17px; } 
ul.hidden.lg:flex.items-center.rtl:pl-4.ltr:pr-4.whitespace-nowrap, 
.hidden.lg:flex.items-center { display: flex !important; }

/* ====== الخلفيات ====== */ 
.bg-gray-50, .s-product-card-image { background-color: #fff !important; } 
body { max-width: 2000px; margin: auto; background: #fdfbfbfff1f1; background-size: cover; background-repeat: repeat; background-image: url(''); }

div#mainnav.bg-white { background: transparent; }

/* ====== وصف المنتج ====== */ 
.product__description.p-2.sm:p-1.leading-7.mb-3 { color: #000000 !important; margin-bottom: 1.25rem; background-color: #f0f0f0; border-radius: 25px; padding: 40px; } 
.product__description ul, .product__description li, .product__description p { color: #000000; }

/* ====== الأزرار ====== */ 
.s-button-wide { width: 100%; border-radius: 15px; } 
.s-button-primary-outline { fill: var(--color-primary); color: #fff; background: linear-gradient(to right, var(--color-primary-dark), var(--color-primary)) !important; } 
button.undefined.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center { background: var(--color-primary); color: var(--infinte-color); box-shadow: 0 0 12px 0 var(--main-text-color); }

/* ====== الفوتر ====== */ 
/* توسيط كل محتوى الفوتر */
footer,
footer * {
  text-align: center !important;
}

/* توسيط العناصر المرنة (Flex) داخل الفوتر */
footer .flex,
footer [class*="flex"] {
  justify-content: center !important;
  align-items: center !important;
}

/* توسيط القوائم */
footer ul {
  justify-content: center !important;
  align-items: center !important;
}

/* توسيط أيقونات السوشيال */
footer .social,
footer .social a {
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ====== عناوين الأقسام ====== */ 
.s-slider-block__title h2, .s-block__title h2, h2.mb-4.text-lg.font-bold.leading- { background: linear-gradient(to right, var(--color-primary-dark), var(--color-primary)) !important; border-radius: 2rem 0rem 0rem 1rem; font-size: 20px !important; font-weight: 700; color: #fff; padding: 10px 10px 10px 20px; margin-right: 15px; text-align: center; }

/* ====== شريط التمرير ====== */ 
::-webkit-scrollbar { width: 10px; height: 10px; } 
::-webkit-scrollbar-track-piece { background-color: rgba(0, 0, 0, 0.2); } 
::-webkit-scrollbar-thumb:vertical { height: 200px; background-color: var(--color-primary-reverse); } 
::-webkit-scrollbar-thumb:vertical:hover { background-color: var(--color-primary-dark); } 
::-webkit-scrollbar-thumb:horizontal { width: 200px; background-color: rgba(125, 125, 125, 0.7); }

/* ====== المنتجات ====== */ 
/* ====== أقسام المتجر مع تأثير الضوء ====== */ 
.quick-links-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 0px; margin-top: 0cm !important; margin-bottom: 15px; margin-left: auto; margin-right: auto; background-color: #E5E5E5; border-radius: 25px; max-width: 95%; box-sizing: border-box; position: relative; }

@keyframes shimmer { 0% { left: -75%; } 100% { left: 125%; } }

/* خانة البحث نفسها */
input[type="search"], 
.search-bar, 
.search-container {
    background-color: #f9f6f1 !important;
    border: 1px solid #ddd !important;
    color: #000 !important;
    border-radius: 8px !important;
    padding: 10px !important;
}
/* زر أضف للسلة بطول بطاقة المنتج */
.s-product-card-vertical {
  position: relative !important;
  padding-bottom: 0px !important;
}

.s-product-card-content {
  padding-bottom: 30px !important;
}

.s-product-card-vertical .s-button-wide {
  position: absolute;
  bottom: 0;
  left: 0;

  width: 100% !important;
  height: 30px;

  margin: 0 !important;
  padding: 0 !important;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  font-weight: 600;
  color: #fff;

  background: linear-gradient(
    to right,
    var(--color-primary-dark),
    var(--color-primary)
  );

  border: none;
  border-radius: 0 !important;
  box-shadow: none;
  cursor: pointer;
  z-index: 10;
}

/* ====== زر واتساب ====== */
#whatsapp-button {
  position: fixed;
  bottom: 70px;
  right: 20px;
  background-color: #25d366;
  border-radius: 50px;
  padding: 0 10px;
  height: 44px;
  display: flex;             /* لجعل الأيقونة والنص في نفس السطر */
  align-items: center;       /* محاذاة عمودية للنص والأيقونة */
  gap: 8px;                  /* مسافة بين الأيقونة والنص */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  color: white;
  font-size: 15px;
  font-family: Arial, sans-serif;
  text-decoration: none;
  white-space: nowrap;       /* منع التفاف النص */
}

#whatsapp-button img {
  width: 40px;
  height: 40px;
}

/* ====== فقاعة الترحيب ====== */
.whatsapp-bubble {
  position: fixed;
  bottom: 120px;             /* فوق زر الواتساب */
  right: 20px;
  background: white;
  color: black;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 9998;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}

.whatsapp-bubble.hide {
  opacity: 0;
}

/* شريط الروابط السريعة – صف واحد فقط */
.quick-links-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap !important;   /* 🚫 منع الصفوف */
  overflow-x: auto;
  overflow-y: hidden;
  gap: 0px;
  padding: 10px;
  white-space: nowrap;
}

/* عنصر الرابط */
.quick-link {
  flex: 0 0 auto;                 /* 🚫 لا يتمدد ولا يلتف */
  width: 120px;
  min-width: 120px;
  text-align: center;
}

/* الصور */
.quick-link img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

/* موبايل */
@media (max-width: 600px) {
  .quick-link {
    width: 90px;
    min-width: 90px;
  }
  .quick-link img {
    width: 90px;
    height: 90px;
  }
}
/* في صفحة التصنيفات فقط: اجعل البطاقة تتمدد لتحتوي الزر */
.collection-page .s-product-card-vertical {
  height: auto !important;
  overflow: visible !important;
}

/* في الصفحة الرئيسية: حافظ على ارتفاع موحد للبطاقات */
.home-page .s-product-card-vertical {
  height: 100% !important;
}

body {
  padding-bottom: 60px; /* يضيف 60 نقطة في أسفل الصفحة */
}
/* ===== حواف بطاقة المنتج ===== */
.s-product-card-vertical {
  border: 2px solid #8c6709 !important;   /* الإطار */
  border-radius: 20px;                    /* تدوير الحواف */
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* ===== تأثير عند المرور ===== */
.s-product-card-vertical:hover {
  box-shadow: 0 0 12px 2px rgba(43, 137, 202, 0.6);
  transform: translateY(-4px);
}

/* ===============================
   1) العنوان الرئيسي: سطرين فقط
================================ */
.s-product-card-content-title a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.6 !important;
  max-height: 3.2em !important;
}

/* ===============================
   2) إخفاء العنوان الفرعي
   (الرئيسية + التصنيفات فقط)
   حل يعتمد على مكان العرض
================================ */
section .s-product-card-content-subtitle,
.s-products-list .s-product-card-content-subtitle,
.s-slider .s-product-card-content-subtitle,
.s-block .s-product-card-content-subtitle {
  display: none !important;
}

/* الخصم */
.discount-badge {
  position: absolute;
  right: -2px;
  bottom: 13px;                 /* نهاية صورة المنتج */
  transform: translateY(50%);  /* نزول لنصف البطاقة */
  background: #d32f2f;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 3px;
 /* border-radius: 999px;*/
  z-index: 30;
 /* box-shadow: 0 0px 0px rgba(0,0,0,0.25);*/
  white-space: nowrap;
  direction: ltr;
}

.save-box {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 10px;
  margin-top: 6px;
  background: linear-gradient(135deg, #ff9800, #ff5722);
  color: #fff;
  padding: 3px 6px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  white-space: nowrap;
}

.save-box .fire {
  font-size: 16px;
}

.save-box strong {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* نجعل الشعار في المنتصف تماماً */
.navbar-brand {
    position: absolute;
    left: 55%;
    transform: translateX(-50%);
    margin: 0 auto !important;
}
.s-cart-summary-wrapper,
.s-user-menu-trigger {
    transform: scale(0.75);
    transform-origin: center;
}


/* عناوين الفوتر باللون الذهبي */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
  color: #C9A24D !important; /* ذهبي أنيق */
}
/* 🔥 تحويل الحاوية إلى Flex وإلغاء grid نهائياً */
.grid.grid-cols-\[repeat\(2\,minmax\(0\,1fr\)\)\] {
  display: flex !important;
  flex-wrap: nowrap !important;   /* منع النزول لسطر ثاني */
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: 12px !important;
}

/* 🔒 إجبار كل عنصر على ثلث العرض */
.s-block--features__item {
  flex: 0 0 32% !important;
  max-width: 32% !important;
  box-sizing: border-box;
  text-align: center;
}

/* 🧹 إزالة أي هوامش أو تمدد زائد */
.s-block--features__item * {
  max-width: 100%;
}

/* دائرة الأيقونة */
.s-block--features__item .feature-icon {
  width: 64px;
  height: 64px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

/* الأيقونة ذهبية */
.s-block--features__item .feature-icon i {
  color: #c8a24d;
  font-size: 30px;
}

/* العنوان ذهبي */
.s-block--features__item h2 {
  color: #c8a24d;
  font-weight: 800;
  font-size: 16px;
  margin: 4px 0;
  line-height: 1.2;
}

/* النص السفلي */
.s-block--features__item p {
  color: #555;
  font-size: 10px;
  margin: 0;
}

/* إظهار نص جميع الأزرار بدون تغيير الخلفية */
button.s-button-btn,
button.s-button-btn span,
.s-button-text {
    color: #ffffff !important;   /* لون النص (أسود واضح) */
    opacity: 1 !important;
    visibility: visible !important;
}

/* إزالة أي فلتر أو تأثير يخفي النص */
button.s-button-btn,
button.s-button-btn * {
    filter: none !important;
}

/* العنوان + النص */
.rating-header h2,
.rating-header p {
    color: #000000 !important;
}

/* نص الزر فقط */
.rating-header .s-button-text {
    color: #000000 !important;
}

.store-footer__inner a.flex.items-center h3 {
  /* إخفاء النص */
  text-indent: -9999px;
  overflow: hidden;

  /* وضع الصورة بدل النص */
  background-image: url('https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/NKXNOK/B6tqdjVsqGspZnetoPmP5YXO1vksmSkdj4SSxw12.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;

  /* أبعاد الشعار */
  width: 190px;
  height: 100px;

  display: block;
  margin: 0 auto;              /* توسيط داخل الفوتر */
}