/* خط المتجر كله */
* {
  font-weight: 600 !important;
}

/* ───────── 1) توسيط عناوين السيكشن (كل المنتجات + الأكثر مبيعًا) ───────── */
salla-products-list[source-value="[2038365654]"] h2,
salla-products-list[source-value="[2038365654]"] .section-title,
salla-products-list[source-value="[2038365654]"] .s-products-list-title,
salla-products-list[source="selected"] h2,
salla-products-list[source="selected"] .section-title,
salla-products-list[source="selected"] .s-products-list-title {
  text-align: center !important;
  margin-bottom: 1.5rem;
}

/* ───────── 2) الكروت بدون إطار ولا ظل (شفافة) ───────── */
salla-products-list[source-value="[2038365654]"] .athena-card,
salla-products-list[source-value="[2038365654]"] .athena-card-wrapper,
salla-products-list[source="selected"] .athena-card,
salla-products-list[source="selected"] .athena-card-wrapper,
salla-products-list[source="selected"] custom-salla-product-card {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ───────── 3) تصغير حجم الكروت شوية مع توزيع منظم ───────── */
salla-products-list[source-value="[2038365654]"] .athena-card,
salla-products-list[source="selected"] .athena-card,
salla-products-list[source="selected"] custom-salla-product-card {
  transform: scale(0.88);
  transform-origin: top center;
  margin: 0 auto 0.5rem;
}

/* على الهوفر: مايزودش الزوم ولا يضيف ظل */
salla-products-list[source-value="[2038365654]"] .athena-card:hover,
salla-products-list[source="selected"] .athena-card:hover,
salla-products-list[source="selected"] custom-salla-product-card:hover {
  transform: scale(0.88);
  box-shadow: none !important;
}

/* ───────── 4) توسيط محتوى الكارت (العنوان + السعر) ───────── */
salla-products-list[source-value="[2038365654]"] .athena-card-content,
salla-products-list[source="selected"] .athena-card-content {
  text-align: center !important;
}

/* ───────── 5) توسيط الأزرار العلوية لو موجودة ───────── */
salla-products-list[source-value="[2038365654]"] .athena-action-buttons,
salla-products-list[source="selected"] .athena-action-buttons {
  left: 50%;
  transform: translateX(-50%);
}

/* ───────── 6) إظهار 12 منتج فقط في كل سيكشن ───────── */
/* أي كارت بعد رقم 12 يتخفي */
salla-products-list[source-value="[2038365654]"] .s-products-list-wrapper > *:nth-child(n+13),
salla-products-list[source="selected"] .s-products-list-wrapper > *:nth-child(n+13) {
  display: none !important;
}

/* ───────── 7) توزيع احترافي للكروت جوه السيكشن ───────── */
salla-products-list[source-value="[2038365654]"] .s-products-list-wrapper,
salla-products-list[source="selected"] .s-products-list-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  gap: 1.25rem;
}


/* ───────────── 1) عنوان المنتج ───────────── */
.athena-card-content .athena-product-title,
.athena-card-content .athena-product-title a {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #000 !important;
  text-align: center !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ───────────── 2) السعر الجديد (بعد الخصم) = أحمر ───────────── */
.athena-card-content .price-current,
.athena-card-content h4 {
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #d40000 !important;      /* أحمر */
  margin: 4px 0 !important;
}

/* SAR icon */
.athena-card-content h4 i {
  font-size: 14px !important;
  margin-right: 2px !important;
  color: #d40000 !important;       /* نفس لون السعر */
}

/* ───────────── 3) السعر القديم = أسود ───────────── */
.athena-card-content .price-old {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #000 !important;          /* أسود */
  text-decoration: line-through !important;
  opacity: 0.8;
}

/* نسبة الخصم */
.athena-card-content .discount {
  font-size: 12px !important;
  color: #ff3a3a !important;
  font-weight: 700 !important;
  display: block !important;
  margin-top: 2px !important;
}

/* ───────────── 4) النجوم (Rating Stars) ───────────── */
.athena-card-content .rating-stars,
.athena-card-content .salla-rating,
.athena-card-content .product-rating {
  display: flex !important;
  justify-content: center !important;
  gap: 2px !important;
  margin-bottom: 4px !important;
}

.athena-card-content .rating-stars i,
.athena-card-content .salla-rating i {
  color: #ffc107 !important;
  font-size: 14px !important;
}

/* عدد الريفيوهات */
.athena-card-content .salla-rating-count {
  font-size: 12px !important;
  color: #666 !important;
}

/* ───────────── 5) زر إضافة للسلة ───────────── */
.athena-card-content .athena-card-actions button,
.athena-card-content .add-to-cart-btn,
.athena-card-content .s-product-add-btn {
  width: 100% !important;
  background: #000 !important;
  color: #fff !important;
  padding: 10px 0 !important;
  border-radius: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none !important;
  transition: 0.25s ease-in-out !important;
}

.athena-card-content .athena-card-actions button:hover,
.athena-card-content .add-to-cart-btn:hover,
.athena-card-content .s-product-add-btn:hover {
  background: #333 !important;
}

/* ───────────── 6) تحسين المسافات ───────────── */
.athena-card-content {
  padding: 8px 4px !important;
}
/* تنسيق عنوان السكيشن الذي يستخدم s-block__title */

/* ───────────── توسيط عنوان السكشن + تنسيق كامل ───────────── */
.s-block__title {
  display: flex;
  justify-content: center !important;
  align-items: center;
  text-align: center !important;
  position: relative;
  margin-bottom: 35px !important;   /* ← زيادة المسافة */
  flex-direction: column;           /* ← يخلي الخط تحت العنوان مباشرة */
}

/* عنوان السكشن */
.s-block__title .right-side h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #000 !important;
  margin: 0 auto 12px !important;   /* ← مسافة تحت العنوان */
}

/* ───────────── الخط الأسود تحت العنوان ───────────── */
.s-block__title::after {
  content: "";
  justify-content: center !important;
  width: 200px;                      /* ← عرض الخط */
  height: 2px;                      /* ← سمكه */
  background: #000;                 /* ← أسود */
  border-radius: 3px;
  margin-top: 4px;
}

/* زر "عرض الكل" يفضل في نفس مكانه */
.s-block__title .s-block__display-all {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #000 !important;
}

.s-block__title .s-block__display-all i {
  font-size: 14px !important;
  margin-right: 3px;
}

/* ================================================
   إظهار لوجو واحد فقط في منتصف الفوتر
   ================================================ */

/* 1) إخفاء كل اللوحات القديمة للّوجو داخل الأعمدة */
.store-footer__inner .grid a img {
    display: none !important;
}

/* 2) إضافة لوجو واحد في الوسط – باستخدام Before */
.store-footer__inner .container {
    position: relative;
    padding-top: 40px;
    text-align: center;
}

/* إضافة لوجو في المنتصف */
.store-footer__inner .container:before {
    content: "";
    display: block;
    width: 150px;
    height: 150px;
    margin: 0 auto 20px auto;
    background-image: url("https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/zOdOA/W77v9P1y7DXAiyzFYdzzLnW8ozwtpLABHnJkZhTb.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 3) إلغاء تقسيم الأعمدة — توسيط كل شيء */
.store-footer__inner .grid {
    display: block !important;
    text-align: center !important;
}

/* 4) ضبط النصوص */
.store-footer__inner p {
    color: #000 !important;
    font-size: 15px !important;
    line-height: 1.8;
    font-weight: 600;
    max-width: 550px;
    margin: 0 auto 25px auto;
}

/* 5) العناوين */
.store-footer__inner h3,
.s-contacts-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #000 !important;
    margin-bottom: 12px;
}

/* 6) الروابط */
.s-menu-footer-item,
.s-contacts-item {
    color: #000 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

.s-menu-footer-item:hover,
.s-contacts-item:hover {
    color: #b30000 !important;
}

/* 7) أيقونات السوشيال */
.s-social-icon svg {
    width: 26px !important;
    height: 26px !important;
    fill: #000 !important;
}

.s-social-link:hover svg {
    fill: #b30000 !important;
}

/* 8) منطقة الحقوق */
.copyright-text p {
    color: #555 !important;
    font-size: 14px !important;
}

/* ======================================================
    تصغير حجم مربعات الأقسام — مناسب لموبايل & لاب
   ====================================================== */

/* Grid */
.store_categories_section .store_category_item_wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
  justify-items: center !important;
}

/* ======= موبايل ======= */
.store_categories_section .store_category_item {
  width: 170px !important;
  height: 190px !important;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  text-align: center !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* صندوق الصورة */
.store_categories_section .img-shine-wrapper {
  width: 100% !important;
  height: 150px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

/* الصورة */
.store_categories_section .img-shine-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 18px !important;
  transition: .35s ease-in-out !important;
}

/* زووم */
.store_category_item:hover img {
  transform: scale(1.06);
}

/* العنوان */
.store_category_item_title {
  margin-top: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #000 !important;
}

.store_category_item_subtitle {
  display: none !important;
}

/* ======= تابلت من 600px ======= */
@media (min-width: 600px) {
  .store_categories_section .store_category_item {
    width: 220px !important;
    height: 240px !important;
  }

  .store_categories_section .img-shine-wrapper {
    height: 190px !important;
  }
}

/* ======= لابتوب / ديسكتوب من 992px ======= */
@media (min-width: 992px) {
  .store_categories_section .store_category_item_wrapper {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 26px !important;
  }

  .store_categories_section .store_category_item {
    width: 260px !important;
    height: 300px !important;
  }

  .store_categories_section .img-shine-wrapper {
    height: 240px !important;
  }

  .store_category_item_title {
    font-size: 17px !important;
  }
}
/* ===============================
   زر إضافة للسلة – أيقونة عربة التسوق
   =============================== */

/* شكل الزر الأساسي */
.s-button-element.s-button-btn {
    height: 42px !important;
    padding: 0 16px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* إخفاء أي SVG داخل الزر */
.s-button-element svg,
.s-button-element .cart-svg {
    display: none !important;
}

/* إضافة أيقونة عربية التسوق من سلة */
.s-button-element .s-button-text::after {
    content: "\e90a"; /* shopping cart icon from sallaicons */
    font-family: "sallaicons" !important;
    font-size: 17px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 6px !important;
}

/* النص */
.s-button-element .s-button-text,
.s-button-element .s-button-text span {
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* الزر الممتد */
.s-button-wide {
    width: 100% !important;
}

/* ستايل outline الأسود */
.s-button-primary-outline {
    border: 2px solid #000 !important;
    color: #000 !important;
}

/* هوفر */
.s-button-primary-outline:hover {
    background: #000 !important;
    color: #fff !important;
}

/* تحسين شكل زر عرض الكل على اليسار */
.s-block__display-all {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    border: 2px solid #000 !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    background: #fff !important;
    color: #000 !important;

    transition: 0.25s ease-in-out !important;

    margin-right: auto !important;  /* يبقى على الشمال */
    margin-left: 0 !important;
}

/* تحسين أيقونة السهم */
.s-block__display-all i {
    font-size: 18px !important;
    transition: transform 0.3s ease !important;
}

/* حركة الأيقونة */
.s-block__display-all:hover i {
    transform: translateX(-4px) !important;
}

/* هوفر */
.s-block__display-all:hover {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}