/* ============================================================
   ازهلها — CSS مخصص لمتجر سلة
   النسخة: 1.2 | مع إصلاح تعارضات التيم (inspector fixes)
   ============================================================ */

/* ===== متغيرات العلامة التجارية ===== */
:root {
  --color-primary:        #004e5b;
  --color-primary-light:  #267481;
  --color-primary-cyan:   #00c9bf;
  --color-primary-hover:  #003d48;
  --card-radius:          14px;
  --card-shadow:          0 2px 12px rgba(0, 78, 91, 0.10);
  --card-shadow-hover:    0 8px 32px rgba(0, 78, 91, 0.22);
  --transition:           0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
section,
div,
header,
footer {
    background-color: #ffffff !important;
}
body,
.site-wrapper,
.main-content,
.s-block,
.container {
    background: #ffffff !important;
}
/* =============================================================
   1. صور المنتج — إلغاء تعارضات التيم (3 مشاكل مكتشفة)
   ============================================================= */

/*
   المشكلة #1 — التيم يضع على هذا الكلاس:
   height: 11rem  و  max-height: 15rem  و  flex: none
   وهذا يجبر حاوية الصورة على ارتفاع ثابت يمدد الصورة
*/
.s-product-card-fit-height .s-product-card-image {
  height: auto !important;
  max-height: none !important;
  min-height: unset !important;
  flex: none !important;
}

/*
   المشكلة #2 — التيم يضع على صور داخل الكارد:
   height: 100%  و  width: 100%
   هذا يجبر الصورة تملأ الحاوية المُثبَّتة ويمددها
*/
.s-product-card-image img {
  height: auto !important;
  width: 100% !important;
}

/*
   المشكلة #3 — التيم يضع على حاوية الصورة العمودية:
   height: 100%  و  flex: 1 1 0%
   هذا يجعل الحاوية تتمدد بدل الصورة
*/
.s-product-card-vertical .s-product-card-image {
  height: auto !important;
  min-height: unset !important;
  flex: none !important;
}

/* ✅ حاوية الصورة النهائية — بطاقة عمودية */
.s-product-card-vertical .s-product-card-image,
custom-salla-product-card:not([horizontal]) .s-product-card-image {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
  background: #eef5f6 !important;
  display: block !important;
  flex-shrink: 0 !important;
}

/* ✅ الصورة — بطاقة عمودية — تأخذ أبعادها الطبيعية */
.s-product-card-fit-height .s-product-card-image-cover,
.s-product-card-vertical .s-product-card-image-cover,
.s-product-card-image .s-product-card-image-cover,
custom-salla-product-card:not([horizontal]) .s-product-card-image-cover {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: fill !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

/* ✅ حاوية الصورة — بطاقة أفقية */
.s-product-card-horizontal .s-product-card-image,
custom-salla-product-card[horizontal] .s-product-card-image {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  height: auto !important;
  min-height: unset !important;
  overflow: hidden !important;
  background: #eef5f6 !important;
  flex-shrink: 0 !important;
}

/* ✅ الصورة — بطاقة أفقية */
.s-product-card-horizontal .s-product-card-image-cover,
custom-salla-product-card[horizontal] .s-product-card-image-cover {
  width: 100% !important;
  height: auto !important;
  min-height: 100px !important;
  object-fit: fill !important;
  display: block !important;
  transition: transform 0.4s ease !important;
}

/* تكبير الصورة عند التحويم */
.s-product-card-entry:hover .s-product-card-image-cover {
  transform: scale(1.04) !important;
}


/* =============================================================
   2. تصميم البطاقات — عصري ونظيف
   ============================================================= */

.s-product-card-vertical.s-product-card-entry {
  background: #ffffff;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  border: 1px solid rgba(0, 78, 91, 0.07) !important;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition) !important;
  display: flex;
  flex-direction: column;
}

.s-product-card-vertical.s-product-card-entry:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

.s-product-card-horizontal.s-product-card-entry {
  background: #ffffff;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  border: 1px solid rgba(0, 78, 91, 0.07) !important;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition) !important;
  margin-bottom: 12px;
}

.s-product-card-horizontal.s-product-card-entry:hover {
  transform: translateX(-4px) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

.s-product-card-minimal.s-product-card-entry {
  background: #ffffff;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--card-shadow) !important;
  border: 1px solid rgba(0, 78, 91, 0.07) !important;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition) !important;
}

.s-product-card-minimal.s-product-card-entry:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--card-shadow-hover) !important;
}

/* محتوى البطاقة */
.s-product-card-content {
  padding: 13px 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  gap: 6px !important;
}

/* عنوان المنتج */
.s-product-card-content-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1a2e33 !important;
  line-height: 1.45 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 38px !important;
}

.s-product-card-content-title a {
  color: inherit !important;
  text-decoration: none !important;
}

.s-product-card-content-title a:hover {
  color: var(--color-primary) !important;
}

/* منطقة السعر */
.s-product-card-content-sub {
  margin-top: auto !important;
  padding-top: 4px !important;
}

.s-product-card-price {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
}

.s-product-card-sale-price h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
}

.s-product-card-sale-price span {
  font-size: 12px !important;
  color: #aaaaaa !important;
  text-decoration: line-through !important;
}

.s-product-card-price .sicon-sar,
.s-product-card-sale-price .sicon-sar {
  font-size: 11px !important;
  opacity: 0.85;
}

.s-product-card-content-footer {
  margin-top: 10px !important;
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}


/* =============================================================
   3. زر إضافة للسلة
   ============================================================= */

.s-product-card-entry .s-button-btn.s-button-primary-outline,
.s-product-card-entry .s-button-element.s-button-primary-outline {
  border: 1.5px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: transparent !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 9px 12px !important;
  transition: background var(--transition), color var(--transition), transform 0.15s !important;
  width: 100% !important;
}

.s-product-card-entry .s-button-btn.s-button-primary-outline:hover,
.s-product-card-entry .s-button-element.s-button-primary-outline:hover {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  transform: scale(1.02) !important;
}

.s-product-card-entry .s-button-btn.s-button-primary-outline:active {
  transform: scale(0.98) !important;
}

.s-product-card-entry .sicon-shopping-bag {
  font-size: 15px !important;
  margin-left: 4px;
}


/* =============================================================
   4. زر المفضلة
   ============================================================= */

.s-product-card-entry .s-product-card-wishlist-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 78, 91, 0.12) !important;
  transition: all var(--transition) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.s-product-card-entry .s-product-card-wishlist-btn:hover {
  background: #fff !important;
  transform: scale(1.12) !important;
  border-color: #e74c3c !important;
}

.s-product-card-entry .s-product-card-wishlist-btn .sicon-heart {
  color: #ccc;
  font-size: 15px !important;
}

.s-product-card-entry .s-product-card-wishlist-btn:hover .sicon-heart {
  color: #e74c3c;
}


/* =============================================================
   5. شبكة المنتجات — متجاوبة
   ============================================================= */

.s-products-list-wrapper:not(.s-products-list-horizontal-cards) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 18px !important;
}

.s-products-list-horizontal-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}


/* =============================================================
   6. عناوين الأقسام
   ============================================================= */

.s-block__title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
  padding-right: 14px !important;
  border-right: 4px solid var(--color-primary-cyan) !important;
  border-radius: 0 !important;
}

.s-block__title h2 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
}

.s-block__display-all {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-primary-light) !important;
  text-decoration: none !important;
  white-space: nowrap;
}

.s-block__display-all:hover {
  color: var(--color-primary) !important;
}

.s-slider-block__title-right h2 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  padding-right: 14px !important;
  border-right: 4px solid var(--color-primary-cyan) !important;
}


/* =============================================================
   7. أسهم السلايدر
   ============================================================= */

.s-slider-nav-arrow {
  background: #ffffff !important;
  border: 1.5px solid rgba(0, 78, 91, 0.18) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--transition) !important;
  box-shadow: 0 2px 8px rgba(0,78,91,0.10) !important;
  color: var(--color-primary) !important;
}

.s-slider-nav-arrow:hover:not(:disabled) {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  border-color: var(--color-primary) !important;
  transform: scale(1.08) !important;
}

.s-slider-nav-arrow svg path {
  fill: currentColor !important;
}


/* =============================================================
   8. الشريط الإعلاني
   ============================================================= */

.s-advertisement {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
}


/* =============================================================
   9. متجاوب — موبايل وديسك توب
   ============================================================= */

@media (max-width: 767px) {
  .s-products-list-wrapper:not(.s-products-list-horizontal-cards) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .s-product-card-horizontal .s-product-card-image,
  custom-salla-product-card[horizontal] .s-product-card-image {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
  }

  .s-product-card-content {
    padding: 10px 11px 12px !important;
  }

  .s-product-card-content-title {
    font-size: 12.5px !important;
    min-height: 34px !important;
  }

  .s-block__title h2,
  .s-slider-block__title-right h2 {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .s-products-list-wrapper:not(.s-products-list-horizontal-cards) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (min-width: 1024px) {
  .s-products-list-wrapper:not(.s-products-list-horizontal-cards) {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 20px !important;
  }

  .s-product-card-horizontal .s-product-card-image,
  custom-salla-product-card[horizontal] .s-product-card-image {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
  }
}


/* =============================================================
   10. تفاصيل إضافية
   ============================================================= */

.s-block {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.s-block + .s-block {
  border-top: 1px solid rgba(0, 78, 91, 0.07);
}

.s-products-slider-card {
  height: auto !important;
}

.s-products-slider-card .s-product-card-entry {
  height: 100% !important;
}

.s-product-card-vertical .s-product-card-wishlist-btn {
    display: none !important;
}
/* ===============================
   Blog Only - Professional Fix
   Ezhalha Blog CSS
   =============================== */

body.blog-index,
body.blog-single {
  --blog-primary: #004e5b;
  --blog-primary-dark: #002835;
  --blog-primary-light: #267481;
  --blog-text: #102a33;
  --blog-muted: #667085;
  --blog-border: #e8eef0;
  --blog-bg: #f7fafb;
  --blog-card: #ffffff;
  font-family: "Tajawal", sans-serif !important;
  background: var(--blog-bg) !important;
  color: var(--blog-text) !important;
}

/* توحيد لون النصوص داخل المدونة فقط */
body.blog-index #main-content,
body.blog-single #main-content {
  color: var(--blog-text) !important;
}

/* حاوية المدونة */
body.blog-index #main-content > .container,
body.blog-single #main-content > .container {
  padding-top: 28px !important;
  padding-bottom: 50px !important;
}

/* Breadcrumb */
body.blog-index salla-breadcrumb,
body.blog-single salla-breadcrumb {
  color: var(--blog-muted) !important;
  font-size: 14px !important;
}

body.blog-index salla-breadcrumb a,
body.blog-single salla-breadcrumb a {
  color: var(--blog-primary) !important;
}

/* ===============================
   Blog Index Cards
   =============================== */

body.blog-index .post-entry {
  background: var(--blog-card) !important;
  border: 1px solid var(--blog-border) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 78, 91, 0.07) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

body.blog-index .post-entry:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(0, 78, 91, 0.22) !important;
  box-shadow: 0 18px 45px rgba(0, 78, 91, 0.13) !important;
}

body.blog-index .post-entry__image {
  height: 230px !important;
  background: linear-gradient(135deg, #eef7f8, #ffffff) !important;
  border-bottom: 1px solid var(--blog-border) !important;
}

body.blog-index .post-entry__image img {
  transition: transform .35s ease, opacity .35s ease !important;
}

body.blog-index .post-entry:hover .post-entry__image img {
  transform: scale(1.05) !important;
  opacity: .85 !important;
}

body.blog-index .post-entry .text-gray-500,
body.blog-index .post-entry .text-gray-800 {
  color: var(--blog-muted) !important;
}

body.blog-index .post-entry__title,
body.blog-index .post-entry__title a {
  color: var(--blog-primary-dark) !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
}

body.blog-index .post-entry__title a:hover {
  color: var(--blog-primary) !important;
}

body.blog-index .post-entry p {
  color: var(--blog-muted) !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
}

/* التاريخ والكاتب */
body.blog-index .post-entry .inline-flex,
body.blog-single .inline-flex {
  color: var(--blog-muted) !important;
  gap: 14px !important;
}

body.blog-index .post-entry i,
body.blog-single i {
  color: var(--blog-primary) !important;
}

/* ===============================
   Blog Slider
   =============================== */

body.blog-index .blog-slider {
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 50px rgba(0, 78, 91, 0.16) !important;
  border: 1px solid rgba(0, 78, 91, 0.12) !important;
}

body.blog-index .blog-slider__slide {
  background: linear-gradient(135deg, #003944, #006474) !important;
}

body.blog-index .blog-slider__slide::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    90deg,
    rgba(0, 40, 53, .88),
    rgba(0, 78, 91, .55),
    rgba(0, 0, 0, .18)
  ) !important;
  z-index: 1 !important;
}

body.blog-index .blog-slider__content {
  position: relative !important;
  z-index: 3 !important;
}

body.blog-index .blog-slider h3,
body.blog-index .blog-slider h3 a {
  color: #ffffff !important;
  font-size: clamp(22px, 3vw, 36px) !important;
  line-height: 1.45 !important;
  font-weight: 900 !important;
}

body.blog-index .blog-slider .description {
  color: rgba(255, 255, 255, .88) !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  max-width: 620px !important;
}

body.blog-index .swiper-pagination-bullet {
  background: rgba(255, 255, 255, .55) !important;
  opacity: 1 !important;
}

body.blog-index .swiper-pagination-bullet-active {
  background: #ffffff !important;
  width: 22px !important;
  border-radius: 999px !important;
}

/* ===============================
   Category Sidebar / Filter
   =============================== */

body.blog-index .grid > div:first-child,
body.blog-index .dropdown__menu {
  background: var(--blog-card) !important;
  border: 1px solid var(--blog-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0, 78, 91, 0.06) !important;
}

body.blog-index .grid > div:first-child h2 {
  color: var(--blog-primary-dark) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

body.blog-index .grid > div:first-child a,
body.blog-index .dropdown__menu a {
  color: var(--blog-text) !important;
  border-radius: 12px !important;
  transition: all .2s ease !important;
}

body.blog-index .grid > div:first-child a:hover,
body.blog-index .dropdown__menu a:hover {
  background: rgba(0, 78, 91, .08) !important;
  color: var(--blog-primary) !important;
}

/* ===============================
   Single Blog Article
   =============================== */

body.blog-single .main-content.blog-category {
  background: var(--blog-card) !important;
  border: 1px solid var(--blog-border) !important;
  border-radius: 22px !important;
  padding: 34px !important;
  box-shadow: 0 14px 40px rgba(0, 78, 91, 0.08) !important;
}

body.blog-single .main-content.blog-category > h1 {
  color: var(--blog-primary-dark) !important;
  font-size: clamp(26px, 4vw, 42px) !important;
  line-height: 1.55 !important;
  font-weight: 900 !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 18px !important;
}

body.blog-single article {
  color: var(--blog-text) !important;
  font-size: 18px !important;
  line-height: 2.15 !important;
  font-weight: 400 !important;
}

body.blog-single article p {
  color: var(--blog-text) !important;
  margin-bottom: 18px !important;
}

body.blog-single article strong,
body.blog-single article b {
  color: var(--blog-primary-dark) !important;
  font-weight: 900 !important;
}

body.blog-single article a {
  color: var(--blog-primary) !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 4px !important;
}

body.blog-single article h2,
body.blog-single article h3 {
  color: var(--blog-primary-dark) !important;
  font-weight: 900 !important;
  line-height: 1.6 !important;
  margin-top: 32px !important;
  margin-bottom: 14px !important;
}

body.blog-single article h2 {
  font-size: 28px !important;
}

body.blog-single article h3 {
  font-size: 23px !important;
}

body.blog-single article ul,
body.blog-single article ol {
  padding-right: 24px !important;
  margin: 18px 0 !important;
}

body.blog-single article li {
  margin-bottom: 10px !important;
  line-height: 2 !important;
}

/* صور المقال */
body.blog-single article img {
  border-radius: 18px !important;
  box-shadow: 0 12px 35px rgba(0, 78, 91, .12) !important;
  margin: 24px auto !important;
}

/* ===============================
   Related Posts
   =============================== */

body.blog-single h2.font-bold.mb-3 {
  color: var(--blog-primary-dark) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  margin-top: 36px !important;
}

body.blog-single .mt-5.flex.items-center.bg-white {
  background: var(--blog-card) !important;
  border: 1px solid var(--blog-border) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 25px rgba(0, 78, 91, .06) !important;
  transition: all .25s ease !important;
}

body.blog-single .mt-5.flex.items-center.bg-white:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 35px rgba(0, 78, 91, .12) !important;
}

body.blog-single .mt-5.flex.items-center.bg-white h3,
body.blog-single .mt-5.flex.items-center.bg-white h3 a {
  color: var(--blog-primary-dark) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  font-weight: 800 !important;
}

body.blog-single .mt-5.flex.items-center.bg-white h3 a:hover {
  color: var(--blog-primary) !important;
}

/* ===============================
   Fix Different Text Colors
   =============================== */

body.blog-index .text-gray-500,
body.blog-single .text-gray-500 {
  color: var(--blog-muted) !important;
}

body.blog-index .text-gray-800,
body.blog-single .text-gray-800 {
  color: var(--blog-primary-dark) !important;
}

body.blog-index .text-primary,
body.blog-single .text-primary {
  color: var(--blog-primary) !important;
}

/* ===============================
   Buttons / Links
   =============================== */

body.blog-index a,
body.blog-single a {
  transition: color .2s ease, background .2s ease, transform .2s ease !important;
}

body.blog-index a:hover,
body.blog-single a:hover {
  color: var(--blog-primary) !important;
}

/* ===============================
   Mobile Responsive
   =============================== */

@media (max-width: 768px) {
  body.blog-index #main-content > .container,
  body.blog-single #main-content > .container {
    padding-top: 18px !important;
  }

  body.blog-index .blog-slider {
    border-radius: 16px !important;
  }

  body.blog-index .blog-slider__slide {
    height: 330px !important;
  }

  body.blog-index .blog-slider h3,
  body.blog-index .blog-slider h3 a {
    font-size: 22px !important;
  }

  body.blog-index .blog-slider .description {
    font-size: 14px !important;
  }

  body.blog-index .post-entry__image {
    height: 200px !important;
  }

  body.blog-single .main-content.blog-category {
    padding: 22px !important;
    border-radius: 18px !important;
  }

  body.blog-single .main-content.blog-category > h1 {
    font-size: 26px !important;
  }

  body.blog-single article {
    font-size: 16.5px !important;
    line-height: 2.05 !important;
  }
}
/* =====================================================
*/
.s-block {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.s-block

 {
    margin-top: 0rem;
}