/* Add custom CSS styles below */ 
.salla-advertisement .sicon-bell { display: none; }

/* طبارك فصولا زاربإ */
.salla-advertisement .text-xs a {
  font-weight: 700;
}
salla-quantity-input{
  background: #f0d78a7a;
}
/* =========================================================
   حصيل البادية · تصميم صفحات المتجر
   يوضع في: تخصيص باستخدام CSS
   يسري على كل الصفحات التعريفية دفعة واحدة
   الألوان من دليل الهوية: عنابي 6C1E10# · ذهبي FBBD11#
   ========================================================= */


/* ---------- 1) شريط عنوان الصفحة ---------- */

.nav-header {
  background: linear-gradient(180deg, #faf7f1 0%, #f3ede2 100%) !important;
  border-bottom: 3px solid #FBBD11;
  padding-top: 42px !important;
  padding-bottom: 36px !important;
}

.nav-header h1 {
  font-size: 30px !important;
  color: #6C1E10 !important;
  font-weight: 800;
  margin-bottom: 10px !important;
}

.nav-header .s-breadcrumb-wrapper { font-size: 13.5px; }
.nav-header .s-breadcrumb-item a { color: #9a7a4a; }
.nav-header .s-breadcrumb-item:last-child { color: #6C1E10; font-weight: 700; }


/* ---------- 2) حاوية المحتوى: عرض كامل بلا بطاقة بيضاء ---------- */

.content--single-page {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 36px !important;
  width: 100% !important;
  max-width: 100% !important;
}


/* ---------- 3) جسم المحتوى ---------- */

.content-entry {
  line-height: 2.05;
  color: #4a3d33;
  text-align: right;
  font-size: 16.5px;
  width: 100%;
  max-width: none;
}


/* ---------- 4) الفقرة الافتتاحية كبطاقة ---------- */

.content-entry > p:first-child {
  background: #ffffff;
  border: 1px solid #efe7da;
  border-right: 5px solid #6C1E10;
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 36px;
  font-size: 18px;
  line-height: 1.95;
  color: #3a2c22;
  box-shadow: 0 2px 12px rgba(108, 30, 16, .05);
}


/* ---------- 5) العناوين الرئيسية ---------- */

.content-entry h2 {
  position: relative;
  font-size: 23px;
  color: #6C1E10;
  font-weight: 800;
  margin: 42px 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee3d2;
}

.content-entry h2::after {
  content: "";
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 58px;
  height: 3px;
  background: #FBBD11;
}


/* ---------- 6) العناوين الفرعية والأسئلة ---------- */

.content-entry h3 {
  position: relative;
  font-size: 17.5px;
  color: #6C1E10;
  font-weight: 700;
  margin: 28px 0 8px;
  padding-right: 22px;
}

.content-entry h3::before {
  content: "";
  position: absolute;
  right: 0;
  top: 11px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #FBBD11;
}


/* ---------- 7) الفقرات ---------- */

.content-entry p { margin: 0 0 16px; }


/* ---------- 8) القوائم كبطاقات ---------- */

.content-entry ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px;
}

.content-entry ul li {
  position: relative;
  list-style: none !important;
  background: #fdfbf7;
  border: 1px solid #f0e8db;
  border-radius: 10px;
  padding: 13px 42px 13px 16px;
  margin-bottom: 9px;
  line-height: 1.8;
}

.content-entry ul li::marker { content: "" !important; }

.content-entry ul li::before {
  content: "";
  position: absolute;
  right: 17px;
  top: 22px;
  width: 13px;
  height: 2px;
  background: #FBBD11;
}

.content-entry ul li strong,
.content-entry ul li b { color: #6C1E10; }


/* ---------- 9) النص العريض والروابط ---------- */

.content-entry strong,
.content-entry b { color: #6C1E10; }

.content-entry a {
  color: #6C1E10;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid #FBBD11;
  padding-bottom: 1px;
  transition: background .2s;
}

.content-entry a:hover { background: #FBBD11; }


/* ---------- 10) الصور داخل الصفحات ---------- */

.content-entry img {
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 14px;
  margin: 22px 0 10px;
  display: block;
  box-shadow: 0 4px 18px rgba(108, 30, 16, .10);
}

.content-entry img + p {
  font-size: 14.5px;
  color: #7a6a5a;
  margin-top: 0;
  margin-bottom: 26px;
}


/* ---------- 11) الجوال ---------- */

@media (max-width: 640px) {
  .nav-header {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
  }
  .nav-header h1 { font-size: 24px !important; }

  .content-entry { font-size: 16px; line-height: 1.95; }

  .content-entry > p:first-child {
    font-size: 16.5px;
    padding: 16px 18px;
    margin-bottom: 28px;
  }

  .content-entry h2 { font-size: 20px; margin-top: 34px; }
  .content-entry h3 { font-size: 16.5px; }

  .content-entry ul li { padding: 12px 36px 12px 14px; }
  .content-entry ul li::before { right: 14px; top: 21px; }
}

/* ===== شبكة التصنيفات - تحتاج الكلاس hb-cats على العنصر ===== */

/* أخفِ أسهم السلايدر وشريط عنوانه */
.hb-cats .s-slider-nav-arrow,
.hb-cats .s-slider-block__title { display: none !important; }

.hb-cats .swiper { overflow: visible !important; }

/* حوّل شريط السلايدر إلى شبكة ثابتة وأوقف انزلاقه */
.hb-cats .s-slider-swiper-wrapper {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 16px !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  transition: none !important;
}

/* حرّر البلاطة من عرض السلايدر المفروض */
.hb-cats .banner-square {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* مدّد الغلاف الداخلي والرابط، وإلا بقيت الصورة صغيرة في زاوية الخانة */
.hb-cats .banner-square > div,
.hb-cats .banner-square a {
  width: 100% !important;
  display: block !important;
}

/* شكل البلاطة: مربع بحواف مدوّرة وإطار ذهبي */
.hb-cats .banner-square .box-img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 2px solid #FBBD11 !important;
  background: #fff !important;
}
.hb-cats .banner-square .box-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* الجوال: ثلاثة في الصف بدل ستة */
@media (max-width: 640px) {
  .hb-cats .s-slider-swiper-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
}

/* ===== البانر العريض - يحتاج الكلاس hb-banner ===== */
.hb-banner img {
  max-width: 86% !important;
  margin: 0 auto !important;
  display: block !important;
  border-radius: 18px !important;
}
@media (min-width: 768px) {
  .hb-banner img { max-width: 78% !important; }
}


/* ---------------------------------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */
/* ---------- المنتجات -------------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */
:root {
  --hb-gold: #FBBD11;
  --hb-dark: #2B1310;
  --hb-card-radius: 16px;
  --hb-fab: 46px;
}

/* ١) هيكل البطاقة: سطح داكن واحد، بلا حشوة ولا إطار */
.s-product-card-entry.s-product-card-vertical {
  position: relative;
  background: var(--hb-dark) !important;
  border: 0 !important;
  border-radius: var(--hb-card-radius) !important;
  overflow: hidden;
  padding: 0 !important;
}

/* ١-ب) سطران حاسمان: بدونهما يهبط الزر والبادج إلى أسفل البطاقة */
.s-product-card-entry.s-product-card-vertical .s-product-card-content,
.s-product-card-entry.s-product-card-vertical .s-product-card-content-main {
  position: static !important;
}

/* ٢) الصورة من حافة إلى حافة */
.s-product-card-entry.s-product-card-vertical .s-product-card-image {
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-image > a {
  border-radius: 0 !important;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-image-cover {
  width: 100% !important;
  border-radius: 0 !important;
}

/* ٢-ب) تدرّج يذوّب أسفل الصورة في شريط الاسم،
   ويخفي رقم الواتساب وحساب إنستقرام المطبوعين أسفل البوستر */
.s-product-card-entry.s-product-card-vertical .s-product-card-image::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 26%;
  background: linear-gradient(to top, var(--hb-dark) 6%, rgba(43,19,16,.55) 45%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ٣) شريط الاسم والسعر - مضبوط ليأخذ أقل ارتفاع ممكن */
.s-product-card-entry.s-product-card-vertical .s-product-card-content {
  background: transparent !important;
  padding: 8px 10px 10px !important;
  gap: 2px;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-content-title,
.s-product-card-entry.s-product-card-vertical .s-product-card-content-title a {
  color: #fff !important;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}
/* النص الفرعي في سطر واحد. كان يحجز سطرين دائماً حتى لو نصه سطر واحد،
   وهو أكبر سبب منفرد لسماكة الشريط الداكن */
.s-product-card-entry.s-product-card-vertical .s-product-card-content-subtitle {
  color: #fff !important;
  opacity: .72;
  font-size: 11px;
  line-height: 1.3;
  margin: 2px 0 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-price {
  color: var(--hb-gold) !important;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-sale-price {
  color: rgba(255,255,255,.5) !important;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-content-sub {
  margin: 0 !important;
}

/* ٣-ب) محاذاة السعر على خط واحد في كل الصف.
   بدون هذه الكتلة يهبط سعر المنتج الذي له نص فرعي درجةً عن جيرانه فيبدو الصف مدرّجاً. */
.s-product-card-entry.s-product-card-vertical {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-image { flex: 0 0 auto !important; }
.s-product-card-entry.s-product-card-vertical .s-product-card-content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-content-main { flex: 0 0 auto !important; }
.s-product-card-entry.s-product-card-vertical .s-product-card-content-sub { margin-top: auto !important; }

/* ٤) بادج التصنيف يطفو على زاوية الصورة العليا جهة اليمين */
.s-product-card-entry.s-product-card-vertical .s-product-card-props {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  margin: 0 !important;
  z-index: 3;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-category {
  background: rgba(24,10,8,.55);
  color: #fff !important;
  border: 1px solid rgba(251,189,17,.55);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ٥) زر أضف للسلة: دائرة زجاجية داكنة بإطار ذهبي في الزاوية العليا جهة اليسار */
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: var(--hb-fab);
  height: var(--hb-fab);
  margin: 0 !important;
  padding: 0 !important;
  z-index: 4;
  border-radius: 999px !important;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer > *,
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer .w-full {
  width: var(--hb-fab) !important;
  height: var(--hb-fab) !important;
  min-width: 0 !important;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer button {
  position: relative;
  width: var(--hb-fab) !important;
  height: var(--hb-fab) !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(24,10,8,.5) !important;
  border: 1.5px solid var(--hb-gold) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background .2s ease, transform .18s cubic-bezier(.16,1,.3,1);
}

/* علامة + مرسومة بخطين لا بحرف: مركزها مضبوط بالبكسل في كل الخطوط */
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer button::before,
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer button::after {
  content: "" !important;
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  background: var(--hb-gold);
  border-radius: 2px;
  padding: 0 !important;
  transition: background .2s ease;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer button::before { width: 18px; height: 2px; }
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer button::after  { width: 2px;  height: 18px; }

.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer button:hover {
  background: var(--hb-gold) !important;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer button:hover::before,
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer button:hover::after {
  background: #2B1310;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer button:active {
  transform: scale(.94);
}

/* أخفِ نص الزر وأيقونته بصرياً، والنص يبقى موجوداً لقارئ الشاشة */
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer button .s-button-text {
  font-size: 0 !important;
  line-height: 0;
  gap: 0;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer button .s-button-text i {
  display: none !important;
}

/* تلميح يظهر عند مرور المؤشر على الزر: «أضف للسلة» */
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer::after {
  content: "أضف للسلة";
  position: absolute;
  top: calc(var(--hb-fab) + 8px);
  inset-inline-end: 0;
  background: rgba(24,10,8,.94);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border: 1px solid rgba(251,189,17,.45);
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 6;
}
.s-product-card-entry.s-product-card-vertical .s-product-card-content-footer:hover::after {
  opacity: 1;
  transform: translateY(0);
}

/* ٦) احتياط: أخفِ القلب والعين إن بقيا مفعّلين في الإعدادات */
.s-product-card-entry.s-product-card-vertical .s-product-card-actions {
  display: none !important;
}

/* =========================================================
   ٧) توسيط صفوف المنتجات في وسط الصفحة
   المشكلة: السلايدر في الاتجاه من اليمين لليسار يصفّ البطاقات من اليمين
   ويترك ما تبقّى فارغاً على اليسار. مع خمس بطاقات في مساحة تتّسع لست
   يبقى فراغ ٢٤٥ بكسل من جهة واحدة فيبدو الصف مائلاً.
   القاعدة تعمل فقط عندما تكون البطاقات ست أو أقل، أي لا تتجاوز عرض السطر،
   فلا تكسر التمرير في الأقسام الطويلة.
   ========================================================= */
@media (min-width: 1024px) {
  .s-slider-swiper-wrapper:has(custom-salla-product-card):not(:has(> .swiper-slide:nth-child(7))) {
    justify-content: center !important;
  }
}

/* =========================================================
   ٨) البانر بعرض القسم نفسه
   يجعل البانر بعرض الحاوية كاملاً (١٤٦٠ بكسل) فتتطابق حافتاه مع
   شبكة التصنيفات وأقسام المنتجات، ويضيف حواف مدوّرة تناسب البطاقات.
   ========================================================= */
.s-block--fixed-banner img {
  width: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
  margin-inline: auto !important;
  display: block !important;
  border-radius: 14px !important;
}

/* ٨-ب) وارتفاعه؟ الصورة نفسها نسبتها ٢:١ (٢٥٠٠×١٢٤١)، فبعرض ١٤٦٠
   يصير ارتفاعه ٧٢٥ بكسل. لا يمكن تقصيره وهو بعرض كامل إلا بالقصّ،
   والقصّ يقطع الشعار والجملة المطبوعين داخل الصورة.
   الحل الصحيح صورة أعرض من المصمّم، مثلاً ٢٥٠٠×٧٠٠، وحينها ينزل
   الارتفاع إلى ٤٠٩ بكسل تلقائياً بلا أي تعديل على هذا الكود.

   وإن أردت تقصيره الآن رغم القصّ، احذف علامتي التعليق عن السطور التالية
   وجرّب الرقم. راجع النتيجة بعينك: أول ما يُقصّ طرف من الشعار، أعِد الرقم.
   .s-block--fixed-banner img {
     height: 520px !important;
     object-fit: cover !important;
     object-position: center !important;
   }
*/

/* =========================================================
   ٩) فاصل الأقسام: عنوان نظيف بشريط ذهبي
   كان: خطّان رماديان يمتدّان على عرض الصفحة كاملاً حول العنوان،
   وتحته العبارة التسويقية بشكل رابط بخط تحته. شكل قديم ومزدحم.
   صار: العنوان وحده بخط عريض داكن، تحته شريط ذهبي قصير، ثم العبارة
   بلون رمادي هادئ بلا خط. نفس ذهبي البطاقات فيتماسك الشكل.
   ========================================================= */
.s-angel--divider .vertical-lines { display: none !important; }

.s-angel--divider .divider-item .divider-title h2 {
  font-size: 27px !important;
  font-weight: 800 !important;
  color: #2B1310 !important;
  line-height: 1.25 !important;
  letter-spacing: -.2px;
  margin: 0 !important;
}

.s-angel--divider .divider-wrapper { position: relative; padding-bottom: 14px; }
.s-angel--divider .divider-wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 3px;
  border-radius: 3px;
  background: var(--hb-gold);
}

.s-angel--divider .divider-url {
  color: #8b7a70 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  margin-top: 2px !important;
}
.s-angel--divider .divider-url::before,
.s-angel--divider .divider-url::after { display: none !important; }
.s-angel--divider .divider-url:hover { color: #2B1310 !important; }

@media (max-width: 640px) {
  .s-angel--divider .divider-item .divider-title h2 { font-size: 21px !important; }
  .s-angel--divider .divider-url { font-size: 13px !important; }
  .s-angel--divider .divider-wrapper::after { width: 44px; }
}

/* =========================================================
   ٩-ب) عناوين أقسام السلايدر بنفس شكل الفواصل
   أقسام مثل «الأكثر مبيعاً» تستعمل رأساً مختلفاً: العنوان على اليمين
   ورابط «عرض الكل» على اليسار بخط أحمر تحته، فيبدو غريباً بجانب
   الفواصل الموسّطة. هذه الكتلة توحّدهما: عنوان في الوسط، شريط ذهبي
   تحته، ثم «عرض الكل» سطراً رمادياً هادئاً.
   ========================================================= */
.s-slider-block__title {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0 !important;
  border: 0 !important;
  margin-bottom: 18px !important;
}
.s-slider-block__title-right {
  width: auto !important;
  margin: 0 !important;
  position: relative;
  padding-bottom: 14px !important;
}
.s-slider-block__title-right h2 {
  font-size: 27px !important;
  font-weight: 800 !important;
  color: #2B1310 !important;
  line-height: 1.25 !important;
  letter-spacing: -.2px;
  margin: 0 !important;
  text-align: center !important;
}
.s-slider-block__title-right::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 3px;
  border-radius: 3px;
  background: var(--hb-gold);
}
.s-slider-block__title-left { width: auto !important; margin: 0 !important; }

/* أسهم السلايدر المقفلة (حين تتّسع البطاقات كلها) لا داعي لها */
.s-slider-block__title .s-slider-nav-arrow.swiper-button-lock { display: none !important; }

/* رابط «عرض الكل»: مخفي.
   سبب الإخفاء أنه يجلس مكان العبارة التسويقية في بقية الأقسام، فيبدو
   الرأس ناقصاً بجانبها. والزبون يصل لكل المنتجات من القائمة ومن
   شبكة التصنيفات، فلا يخسر شيئاً.
   بدك ترجّعه؟ احذف السطرين التاليين وفعّل الكتلة المعلّقة تحتهما.
   ملاحظة: السطر الثاني هو الفعّال. الرابط في ملاك ليس دائماً بكلاس
   s-block__display-all، فاستهدفنا أي رابط داخل الجانب الأيسر من الرأس.
   الأسهم أزرار button لا روابط، فلا تتأثر. */
.s-slider-block__title .s-block__display-all { display: none !important; }
.s-slider-block__title .s-slider-block__title-left a { display: none !important; }

/*
.s-slider-block__title .s-block__display-all {
  display: inline-block !important;
  color: #8b7a70 !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border: 0 !important;
  background: none !important;
  padding: 0 !important;
  margin-top: 2px !important;
}
.s-slider-block__title .s-block__display-all::before,
.s-slider-block__title .s-block__display-all::after { display: none !important; }
.s-slider-block__title .s-block__display-all:hover { color: #2B1310 !important; }
*/

@media (max-width: 640px) {
  .s-slider-block__title-right h2 { font-size: 21px !important; }
  .s-slider-block__title-right::after { width: 44px; }
  .s-slider-block__title .s-block__display-all { font-size: 13px !important; }
}
/* ============================================================
   حصيل البادية · شبكة التصنيفات في الصفحة الرئيسية
   الهدف: كروت بتدرج داكن + اسم ذهبي حقيقي + حركة رفع وتقريب ولمعة
   المكان: لوحة سلة ‹ المتجر ‹ تصميم المتجر ‹ تخصيص CSS
   يعمل على: section.s-block--banners (بلوك البانرات العلوي فقط)
   ============================================================ */

/* عنوان القسم — مطابق تماماً لعنوان «ذبيحتك بلدي.. وطازجة»
   القيم مأخوذة من الموقع نفسه: خط PingARLT، 27px، وزن 800، اللون 2B1310،
   وتباعد حروف -0.2px، والسطر الفرعي 16px بلون 555555 */


/* الشبكة: عمودان على الجوال، ثلاثة على التابلت، أربعة على الديسكتوب */
.s-block--banners:not(.p-left) .square-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
}

@media (min-width: 768px) {
  .s-block--banners:not(.p-left) .square-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (min-width: 1024px) {
  .s-block--banners:not(.p-left) .square-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

/* الكرت */
.s-block--banners:not(.p-left) .banner-square {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  overflow: hidden;
  background: #1b120c;
  box-shadow: 0 6px 18px rgba(60, 38, 12, .14);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1),
              box-shadow .45s cubic-bezier(.16, 1, .3, 1);
}

.s-block--banners:not(.p-left) .banner-square:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(60, 38, 12, .28);
}

.s-block--banners:not(.p-left) .banner-square > a {
  display: block;
  position: relative;
  z-index: 2;
  border-radius: inherit;
}

.s-block--banners:not(.p-left) .banner-square .box-img {
  position: relative;
  display: block;
  border-radius: inherit;
  overflow: hidden;
}

/* الصورة: قصّ ٣٠٪ من الأعلى لإخفاء الاسم المطبوع داخل الصورة */
.s-block--banners:not(.p-left) .banner-square .box-img img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 10 / 7;
  object-fit: cover !important;
  object-position: center bottom !important;
  filter: none !important;
  transform: scale(1);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.s-block--banners:not(.p-left) .banner-square:hover .box-img img {
  transform: scale(1.07) !important;
}

/* التدرج الداكن فوق الصورة ليقرأ النص */
.s-block--banners:not(.p-left) .banner-square .box-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .94;
  background: linear-gradient(to top,
              rgba(26, 15, 8, .84) 0%,
              rgba(26, 15, 8, .46) 34%,
              rgba(26, 15, 8, .08) 66%,
              rgba(26, 15, 8, 0) 100%);
  transition: opacity .45s ease;
}

.s-block--banners:not(.p-left) .banner-square:hover .box-img::before {
  opacity: 1;
}

/* اسم التصنيف — نص ذهبي متدرج */
.s-block--banners:not(.p-left) .banner-square > a::after,
.s-block--banners:not(.p-left) .banner-square.hb-cats .box-img::after {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: clamp(10px, 4%, 22px);
  padding-inline: 10px;
  text-align: center;
  font-family: inherit;
  font-size: clamp(15px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.4;
  background: linear-gradient(180deg, #fbe9b0 0%, #e6c256 42%, #c9992a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
  transform: translateY(0) scale(1);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.s-block--banners:not(.p-left) .banner-square:hover > a::after,
.s-block--banners:not(.p-left) .banner-square.hb-cats:hover .box-img::after {
  transform: translateY(-2px) scale(1.05);
}

/* أسماء التصنيفات — مرتبطة برقم التصنيف داخل رابط كل كرت */
.s-block--banners:not(.p-left) .banner-square > a[href*="c1108967731"]::after { content: "الأضاحي"; }
.s-block--banners:not(.p-left) .banner-square > a[href*="c426431591"]::after  { content: "اللحوم بالكيلو"; }
.s-block--banners:not(.p-left) .banner-square > a[href*="c1159467617"]::after { content: "طلبات الطبخ"; }
.s-block--banners:not(.p-left) .banner-square > a[href*="c54339174"]::after   { content: "الحاشي"; }
.s-block--banners:not(.p-left) .banner-square > a[href*="c212216729"]::after  { content: "حاشي لباني"; }
.s-block--banners:not(.p-left) .banner-square > a[href*="c1410570213"]::after { content: "حاشي حوار"; }
.s-block--banners:not(.p-left) .banner-square > a[href*="c1674824301"]::after { content: "نعيمي بلدي"; }
.s-block--banners:not(.p-left) .banner-square > a[href*="c453604871"]::after  { content: "سواكن تربية"; }
.s-block--banners:not(.p-left) .banner-square > a[href*="c1186771969"]::after { content: "نجدي"; }
.s-block--banners:not(.p-left) .banner-square > a[href*="c129539336"]::after  { content: "رفيدي"; }
.s-block--banners:not(.p-left) .banner-square > a[href*="c1375561755"]::after { content: "أنواع الأغنام"; }
.s-block--banners:not(.p-left) .banner-square > a[href*="c385429858"]::after  { content: "مفروم صافي"; }
.s-block--banners:not(.p-left) .banner-square > a[href*="c1582742894"]::after { content: "منتجات اللحوم"; }

/* الكرت المربوط بمنتج «هرفي رفيدي» بدل تصنيف «رفيدي».
   يُفضّل تغيير رابطه في اللوحة إلى c129539336 وحذف هذا السطر. */
.s-block--banners:not(.p-left) .banner-square > a[href*="p1286249781"]::after { content: "رفيدي"; }

/* الكرت الذي لا يحمل رابطاً حالياً (نعيمي بلدي).
   يجب ربطه بـ c1674824301 من اللوحة، وعندها يُحذف هذا السطر. */
.s-block--banners:not(.p-left) .banner-square.hb-cats .box-img::after { content: "نعيمي بلدي"; }

/* بعد إنشاء تصنيفَي «أرباع وأثمان» و«البوكسات» أضف سطرين هنا بنفس الشكل:
   .s-block--banners:not(.p-left) .banner-square > a[href*="cXXXXXXXX"]::after { content: "أرباع وأثمان"; }
   .s-block--banners:not(.p-left) .banner-square > a[href*="cYYYYYYYY"]::after { content: "البوكسات"; } */

/* لمعة تمرّ فوق الكرت عند المرور بالمؤشر */
.s-block--banners:not(.p-left) .banner-square::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 45%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(90deg,
              rgba(255, 255, 255, 0) 0%,
              rgba(255, 255, 255, .26) 50%,
              rgba(255, 255, 255, 0) 100%);
  transform: translateX(0);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}

.s-block--banners:not(.p-left) .banner-square:hover::after {
  transform: translateX(340%);
}

/* إطار ذهبي رفيع عند المرور */
.s-block--banners:not(.p-left) .banner-square::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border: 2px solid transparent;
  border-radius: inherit;
  transition: border-color .4s ease;
}

.s-block--banners:not(.p-left) .banner-square:hover::before {
  border-color: rgba(208, 164, 46, .6);
}

/* التنقل بلوحة المفاتيح */
.s-block--banners:not(.p-left) .banner-square > a:focus-visible {
  outline: 3px solid #d0a42e;
  outline-offset: 3px;
}

/* الوضع الليلي لعنوان القسم */
@media (prefers-color-scheme: dark) {
  .s-block--banners:not(.p-left)::before { color: #f3e8da; }
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .s-block--banners:not(.p-left) .banner-square,
  .s-block--banners:not(.p-left) .banner-square .box-img img,
  .s-block--banners:not(.p-left) .banner-square > a::after,
  .s-block--banners:not(.p-left) .banner-square.hb-cats .box-img::after,
  .s-block--banners:not(.p-left) .banner-square::after {
    transition: none !important;
  }
  .s-block--banners:not(.p-left) .banner-square:hover {
    transform: none;
  }
  .s-block--banners:not(.p-left) .banner-square:hover .box-img img {
    transform: none !important;
  }
  .s-block--banners:not(.p-left) .banner-square:hover::after {
    transform: translateX(0);
  }
}


.s-block--banners:not(.p-left) .banner-square > a[href*="c2031886900"]::after {
    content: "تميمة مولود";
}