/* ============================================
   RH TRUCK — Salla Product Page Custom CSS
   ============================================ */

:root {
  --brand: #FA5B17;
  --brand-dark: #D94A0D;
  --brand-light: #FFF0E8;
  --brand-muted: #FDE8D8;
}



/* ───────────────── Hidden ───────────────── */
li:has(.sidemenu-link[aria-label="JEEP"]),
li:has(.sidemenu-link[aria-label="GMC"]),
li:has(.sidemenu-link[aria-label="Chevrolet"]),
li:has(.sidemenu-link[aria-label="KIA"]),
li:has(.sidemenu-link[aria-label="Dodge"]),
li:has(.sidemenu-link[aria-label="Nissan"]),
li:has(.sidemenu-link[aria-label="Ford"]),
li:has(.sidemenu-link[aria-label="Toyota"]),
li:has(.sidemenu-link[aria-label="Infiniti"]),
li:has(.sidemenu-link[aria-label="Cadillac"]),
li:has(.sidemenu-link[aria-label="Hyundai"]) {
  display: none;
}



/* ───────────────── vister ───────────────── */



section.is-sold.details .details__container {
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 8px;
}



/* ───────────────── btn offer ───────────────── */



.spc-offers-btn {
      display: inline-block;
      margin-top: 12px;
      padding: 10px 28px;
      background: #FA5B17;
      color: #fff;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      transition: all .25s ease;
      box-shadow: 0 4px 15px rgba(250,91,23,.3);
      position: relative;
      overflow: hidden;
    }
    .spc-offers-btn:hover {
      background: #e04e10;
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(250,91,23,.45);
      color: #fff;
    }
    .spc-offers-btn:active {
      transform: translateY(0px);
      box-shadow: 0 4px 15px rgba(250,91,23,.3);
    }




/* ───────────────── vedio size ───────────────── */

salla-slider#main-slider-3 {
  width: 90% !important;
  margin: 10px auto 20px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: block !important;
}

salla-slider#main-slider-3 .swiper,
salla-slider#main-slider-3 .swiper-slide {
  width: 100% !important;
  max-height: 550px !important;
}

salla-slider#main-slider-3 video {
  width: 100% !important;
  height: 550px !important;
  object-fit: cover !important;
}


/* ───────────────── WhatsApp Color ───────────────── */

.sc-q8c6tt-0.hrNwue {
  background-color: #25D366 !important;
}



/* ───────────────── discount_ends  ───────────────── */


.sc-countdown-wrap {
  direction: rtl;
  margin: 12px 0;
}
.sc-countdown-label {
  display: block;
  color: #FA5B17;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.sc-countdown-boxes {
  display: flex;
  gap: 8px;
}
.sc-cd-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 8px 16px;
  min-width: 60px;
}
.sc-cd-box span {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  line-height: 1;
}
.sc-cd-box small {
  font-size: 11px;
  color: #888;
  margin-top: 4px;
}





/* ───────────────── Tabs ───────────────── */

.s-product-tabs .tabs.tabs__product {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e5e7eb;
  padding: 0;
  margin-bottom: 0;
}

.s-product-tabs .tab-trigger {
  position: relative;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 400;
  color: #6b7280;
  border: none;
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition: color .2s;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
}

.s-product-tabs .tab-trigger:hover {
  color: #1f2937;
}

.s-product-tabs .tab-trigger.is-active {
  color: var(--brand) !important;
  border-bottom: 2.5px solid var(--brand) !important;
  font-weight: 600 !important;
}

.s-product-tabs .tab-trigger i {
  color: inherit;
}

/* ───────────────── Wrapper ───────────────── */

.tabs-wrapper.tabs-wrapper__product {
  border: .5px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 12px 12px;
  background: #fff;
  padding: 0;
}

/* ───────────────── Tabs Content ───────────────── */

.tabs__item {
  display: none !important;
}

.tabs__item.is-active {
  display: block !important;
  animation: fadeTab .25s ease both;
}

.tabs__item.p-5 {
  padding: 20px !important;
}

@keyframes fadeTab {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ───────────────── Reviews Summary ───────────────── */

.s-reviews-summary-wrapper {
  margin-bottom: 24px;
}

.s-reviews-summary-header {
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--brand-light);
  border: 1px solid #fdd5b8;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.s-reviews-summary-average {
  font-size: 52px !important;
  font-weight: 700 !important;
  color: var(--brand) !important;
  line-height: 1;
  margin: 0;
}

.s-reviews-summary-count {
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}

.s-reviews-summary-recommendation-percentage {
  font-size: 36px !important;
  font-weight: 700 !important;
  color: #16a34a !important;
  margin: 0;
}

/* ───────────────── Rating Stars ───────────────── */

.s-rating-stars-btn-star svg path,
.s-reviews-summary-row-rate svg path {
  fill: var(--brand);
}

.s-reviews-summary-row-rate svg {
  width: 12px;
  height: 12px;
}

.s-rating-stars-mini .s-rating-stars-btn-star svg {
  width: 14px;
  height: 14px;
}

/* ───────────────── Progress Bars ───────────────── */

.s-reviews-summary-rows {
  padding: 0 4px;
}

.s-reviews-summary-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.s-reviews-summary-row-rate {
  min-width: 28px;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  color: #4b5563;
}

.s-reviews-summary-progress {
  flex: 1;
}

.s-progress-bar-wrapper {
  background: #f3f4f6 !important;
  border-radius: 999px !important;
  overflow: hidden;
  height: 10px !important;
}

.s-progress-bar-progress {
  background-color: var(--brand) !important;
  border-radius: 999px !important;
  height: 100% !important;
  transition: width .6s ease;
}

.s-reviews-summary-percentage {
  min-width: 34px;
  text-align: left;
  font-size: 12px;
  color: #6b7280;
}

/* ───────────────── Comments ───────────────── */

.s-comments-title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  padding: 20px 20px 0;
}

.s-comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: 8px;
}

.s-comments-count-label {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.s-comments-count-label span {
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  margin-left: 6px;
}

.s-comments-filter-label {
  font-size: 13px;
  color: #6b7280;
  margin-left: 6px;
}

.s-form-control.s-comments-sort-input {
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

.s-form-control.s-comments-sort-input:focus {
  border-color: var(--brand) !important;
  outline: none;
}

/* ───────────────── Comment Form ───────────────── */

.s-comment-form-wrapper {
  padding: 16px 20px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 8px;
}

.s-comment-form-input {
  width: 100%;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  background: #fff;
  font-size: 14px;
}

.s-comment-form-input:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(250,91,23,.12) !important;
}

.s-comment-form-action {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

/* ───────────────── Buttons ───────────────── */

.s-button-primary,
.s-button-solid.s-button-primary,
.s-infinite-scroll-btn.s-button-primary {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 9px 22px !important;
}

.s-button-primary:hover,
.s-button-solid.s-button-primary:hover,
.s-infinite-scroll-btn.s-button-primary:hover {
  background: var(--brand-dark) !important;
  border-color: var(--brand-dark) !important;
}
/* أزرار التعليقات فقط */

.s-comments-item .s-button-primary-outline,
.s-comments-item .s-button-outline.s-button-primary-outline {
    border-color: #d1d5db !important;
    color: #6b7280 !important;
    background: #fff !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
}

.s-comments-item .s-button-primary-outline:hover,
.s-comments-item .s-button-outline.s-button-primary-outline:hover {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
}

/* ───────────────── Comment Items ───────────────── */

.s-comments-item {
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  transition: background .15s;
}

.s-comments-item:hover {
  background: #fafafa;
}

.s-comments-item:last-child {
  border-bottom: none;
}

.s-comments-item-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.s-comments-flex-1 {
  flex: 1;
}

.s-comments-item-avatar-img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 2px solid #e5e7eb;
  object-fit: cover;
}

.s-comments-item-user-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.s-comments-item-user-info-name-with-margin {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

.s-comments-item-timestamp {
  font-size: 12px !important;
  color: #9ca3af !important;
}

.s-comments-item-content-container p {
  font-size: 14px;
  color: #374151;
  line-height: 1.65;
  margin: 0;
}

/* ───────────────── Verified Badge ───────────────── */

.s-comments-item-has-order-check-icon svg path {
  fill: #16a34a;
}

.s-comments-item-has-order-check-text,
.s-comments-item-rated-widget {
  color: #16a34a !important;
  font-size: 12px !important;
}

/* ───────────────── Admin Reply ───────────────── */

.s-comments-item-admin-wrapper {
  display: flex;
  gap: 10px;
  background: var(--brand-light);
  border-right: 3px solid var(--brand);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin-top: 10px;
  margin-right: 50px;
}

.s-comments-item-admin-wrapper .s-comments-item-avatar-img {
  width: 32px !important;
  height: 32px !important;
}

.s-comments-item-admin-wrapper .s-comments-item-content-container p {
  color: #7c2d12;
  font-size: 13px;
}

/* ───────────────── Load More ───────────────── */

.s-infinite-scroll-wrapper {
  padding: 20px;
  text-align: center;
}

.s-infinite-scroll-btn {
  min-width: 160px;
}

/* ───────────────── Product Description ───────────────── */

.desc-fade-wrap {
  position: relative;
  overflow: hidden;
  max-height: 160px;
  transition: max-height .4s ease;
}

.desc-fade-wrap.is-open {
  max-height: 3000px;
}

.desc-fade-wrap::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 70px;
  background: linear-gradient(transparent,#fff);
  pointer-events: none;
}

.desc-fade-wrap.is-open::after {
  opacity: 0;
}

.desc-read-more {
  display: block;
  margin: 0 20px 20px;
  padding: 10px;
  border: .5px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-light);
  cursor: pointer;
}

.desc-read-more:hover {
  background: var(--brand-muted);
}

/* ───────────────── Container ───────────────── */

.md\:container #product-tabs {
  margin-top: 40px;
}

/* ───────────────── Mobile ───────────────── */

@media (max-width:640px) {

  .s-product-tabs .tab-trigger {
    padding: 12px 16px;
    font-size: 14px;
  }

  .s-reviews-summary-header {
    gap: 16px;
    padding: 16px;
  }

  .s-reviews-summary-average {
    font-size: 40px !important;
  }

  .s-comments-item-admin-wrapper {
    margin-right: 0;
  }

}
/* ───────────────── تحسين التقييمات ───────────────── */

/* مسافة يمين وشمال */
#product-tabs-faqs {
    padding-inline: 40px !important;
}

/* توسيط التابات وتصغيرها */
.tabs.tabs__product {
    justify-content: center !important;
    gap: 12px !important;
}

.tabs.tabs__product .tab-trigger {
    padding: 10px 18px !important;
    font-size: 14px !important;
    min-width: auto !important;
}

/* توسيط زر الإرسال */
.s-comment-form-action {
    display: flex !important;
    justify-content: center !important;
}

.s-comment-form-action .s-button-element {
    min-width: 160px !important;
}


/* صندوق التقييم */
.s-reviews-summary-header {
    padding: 25px !important;
    gap: 25px !important;
}

/* النجوم */
.s-rating-stars-large svg {
    width: 18px !important;
    height: 18px !important;
}

/* رقم التقييم */
.s-reviews-summary-average {
    font-size: 34px !important;
    line-height: 1 !important;
}

/* نسبة التوصية */
.s-reviews-summary-recommendation-percentage {
    font-size: 26px !important;
    line-height: 1 !important;
}

/* النصوص */
.s-reviews-summary-count {
    font-size: 12px !important;
}

/* توسيط زر الإرسال */
.s-comment-form-action {
    display: flex !important;
    justify-content: center !important;
}

.s-comment-form-action .s-button-element {
    min-width: 160px !important;
}

/* التابات */
.tabs.tabs__product {
    justify-content: center !important;
    gap: 12px !important;
}

.tabs.tabs__product .tab-trigger {
    padding: 10px 18px !important;
    font-size: 14px !important;
}

/* مسافة للمحتوى كله */
.tabs-wrapper.tabs-wrapper__product {
    padding-inline: 40px !important;
}

/* صندوق الأسئلة والتقييمات */
#product-tabs-faqs {
    max-width: 1400px;
    margin: 0 auto;
}

/* الوصف */
#product-tabs-desc {
    max-width: 1400px;
    margin: 0 auto;
}
/* ================= MOBILE COMMENTS FIX ================= */

@media (max-width: 768px) {

  /* مساحة داخلية */
  #product-tabs-faqs,
  #product-tabs-questions,
  #product-tabs-reviews {
    padding: 12px !important;
  }

  /* فورم السؤال */
  .s-comment-form-wrapper {
    padding: 0 !important;
  }

  .s-comment-form-input {
    min-height: 90px !important;
  }

  .s-comment-form-action {
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px !important;
  }

  .s-comment-form-action .s-button-element {
    width: 100% !important;
    max-width: 220px !important;
  }

  /* كروت التعليقات */
  .s-comments-item,
  .s-comment-item,
  .comment-item {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* محتوى التعليق */
  .s-comments-item-content,
  .s-comment-content {
    width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* رد المتجر */
  .s-comments-item--reply,
  .s-comment-reply {
    width: 100% !important;
    margin: 10px 0 0 !important;
  }

  /* اسم المستخدم */
  .s-comments-item-author,
  .s-comment-author {
    max-width: 100% !important;
  }

  /* زر مفيد */
  .s-comments-item .s-button-element {
    min-width: 90px !important;
  }
}



.preloader .preloader-skip,
.preloader-skip {
    display: none !important;
}








/* ===== لون الخلفية الرئيسي للعناصر التي تحمل الكلاس hrNwue ===== */
.hrNwue {
background-color: rgb(251 99 35)!important;
}

/* ===== لون النص للعناوين من نوع h2 التي تحمل كلاس da-cp ===== */
h2.da-cp {
    color: #fa6222;
}

/* ===== إزالة الـ padding العلوي والسفلي من الـ sections ===== */
    .s-block {
        padding-top: 0rem;
        padding-bottom: 0rem;
    }
    
/* ===== مسافة سفلية لحاوية منتجات Angel ===== */
    .container.angel-products-container {
    margin-bottom: 2rem;
}

/* ===== مسافة علوية لقسم Angel Anime ===== */
section.s-block.container.angel_anime.animate__.animate__fadeIn {
    margin-top: 2rem;
}

/* ===== لون خلفية ونص شريط العرض/الخصم على كروت المنتجات ===== */
.s-product-card-promotion-title {
    background-color: #fb5b17 !important;
    color: #000000;
}

/* ===== مسافة علوية للبانر الثابت في قسم Angel Anime ===== */
section.s-block.s-block--fixed-banner.wide-placeholder.angel_anime.animate__.animate__fadeIn {
    margin-top: 2rem;
}

/* ===== تنسيق نص شريط العرض/الخصم: حجم الخط، الوزن، المساحة الداخلية، وإخفاء الفائض ===== */
.s-product-card-promotion-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 5px 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}


/* ============================================================
   شكل كروت الباندر المربعة (Brand Logos / Square Banners)
   ============================================================ */

/* ===== تنسيق حاوية الصورة داخل الكرت: زوايا، بوردر، خلفية، أبعاد، وتمركز المحتوى ===== */
.banner-square .box-img {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  padding: 10px 16px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  aspect-ratio: unset !important;
  width: 120px !important;
  height: 70px !important;
  margin-bottom: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===== تحويل الزوايا الدائرية للعنصر المستدير إلى 12px بدلاً من دائرة كاملة ===== */
.banner-square .box-img.rounded-full {
  border-radius: 12px !important;
}

/* ===== تنسيق الصورة داخل الكرت: طريقة الملاءمة والأبعاد القصوى ===== */
.banner-square .box-img img {
  border-radius: 0 !important;
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 50px !important;
  padding: 0 !important;
}

/* ===== تضييق عرض السلايدر الأول وتمركزه مع تأثير Fade على الحواف ===== */
salla-slider#squares-1 {
  max-width: 80% !important;
  margin: 0 auto !important;
}

/* ===== تأثير الـ fade (التلاشي) على يمين ويسار السلايدر الأول باستخدام mask ===== */
salla-slider#squares-1 .s-slider-container {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  ) !important;
}

/* ===== تضييق عرض السلايدر الثاني وتمركزه مع تأثير Fade على الحواف ===== */
salla-slider#squares-2 {
  max-width: 80% !important;
  margin: 0 auto !important;
}

/* ===== تأثير الـ fade (التلاشي) على يمين ويسار السلايدر الثاني باستخدام mask ===== */
salla-slider#squares-2 .s-slider-container {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  ) !important;
}

/* ===== تنسيق كروت السلايدر الثاني: أبعاد، بوردر، خلفية، وتمركز المحتوى ===== */
salla-slider#squares-2 .box-img {
  border-radius: 12px !important;
  border: 1px solid #e5e7eb !important;
  background: #fff !important;
  padding: 10px 16px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  width: 120px !important;
  height: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}

/* ===== تنسيق الصورة داخل كروت السلايدر الثاني ===== */
salla-slider#squares-2 .box-img img {
  object-fit: contain !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 50px !important;
}

/* ===== Responsive: تصغير الكروت والسلايدرات على الشاشات الصغيرة (أقل من 640px) ===== */
@media (max-width: 640px) {
  .banner-square .box-img {
    width: 80px !important;
    height: 50px !important;
    padding: 6px 8px !important;
  }

  .banner-square .box-img img {
    max-height: 35px !important;
  }

  salla-slider#squares-1,
  salla-slider#squares-2 {
    max-width: 95% !important;
  }
}


/* ============================================================
   تنسيق العناوين h2.da-cp (العنوان الرئيسي للأقسام)
   ============================================================ */

/* ===== تمركز العنوان، لونه، حجمه، والمسافة العلوية ===== */
h2.da-cp {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  color: #1a1a2e !important;
  font-size: 22px !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

/* ===== زخرفة سفلية للعنوان: خط + نقطة وسطى + خط (ديكور) باستخدام pseudo-element ::after ===== */
h2.da-cp::after {
  content: '' !important;
  width: 160px !important;
  height: 16px !important;
  display: block !important;
  background-image:
    linear-gradient(#1a1a2e, #1a1a2e),
    radial-gradient(circle, transparent 4px, #1a1a2e 4px, #1a1a2e 6px, transparent 6px),
    linear-gradient(#1a1a2e, #1a1a2e) !important;
  background-size: 60px 1.5px, 14px 14px, 60px 1.5px !important;
  background-position: left center, center center, right center !important;
  background-repeat: no-repeat !important;
}

/* ===== توسيع عنصر right-side ليأخذ العرض الكامل مع تمركز المحتوى ===== */
.right-side {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}


/* ============================================================
   تنسيق عنوان وعنوان فرعي قسم السلايدر (s-slider-block__title-right)
   ============================================================ */

/* ===== توسيع حاوية العنوان وتمركزها مع padding من اليمين ===== */
.s-slider-block__title-right {
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding-right: 200px !important;
}

/* ===== تنسيق h2 داخل عنوان السلايدر ===== */
.s-slider-block__title-right h2 {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  color: #1a1a2e !important;
  font-size: 22px !important;
  gap: 10px !important;
  margin-top: 24px !important;
}

/* ===== نفس زخرفة h2.da-cp لكن لـ h2 داخل .s-slider-block__title-right ===== */
.s-slider-block__title-right h2::after {
  content: '' !important;
  width: 160px !important;
  height: 16px !important;
  display: block !important;
  background-image:
    linear-gradient(#1a1a2e, #1a1a2e),
    radial-gradient(circle, transparent 4px, #1a1a2e 4px, #1a1a2e 6px, transparent 6px),
    linear-gradient(#1a1a2e, #1a1a2e) !important;
  background-size: 60px 1.5px, 14px 14px, 60px 1.5px !important;
  background-position: left center, center center, right center !important;
  background-repeat: no-repeat !important;
}

/* ===== تنسيق النص الفرعي (p) تحت العنوان في السلايدر ===== */
.s-slider-block__title-right p {
  text-align: center !important;
  color: rgba(26, 26, 46, 0.6) !important;
  font-size: 14px !important;
  margin-top: 4px !important;
}


/* ============================================================
   تنسيق صورة البانر الثابت على الشاشات الكبيرة (أكبر من 1024px)
   ============================================================ */

/* ===== تضييق الصورة وتمركزها مع تحديد الارتفاع الأقصى ===== */
@media (min-width: 1024px) {
  .banner.banner--fixed img {
    width: 80% !important;
    max-height: 570px !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
  }
}


/* ============================================================
   تنسيق كروت المنتجات (Product Cards)
   ============================================================ */

/* ===== تنسيق الكرت الافتراضي: بوردر شفاف، تحجيم 83%، وانتقالات عند الـ hover ===== */
custom-salla-product-card,
.s-product-card-entry {
  border: 1px solid transparent !important;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s !important;
  transform: scale(0.83) !important;
}

/* ===== تأثير hover على كروت المنتجات: بوردر برتقالي، ظل، وتكبير طفيف ===== */
custom-salla-product-card:hover,
.s-product-card-entry:hover {
  border-color: #FF6B00 !important;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.15) !important;
  transform: scale(0.85) !important;
}

/* ===== تضييق حاوية السلايدر التي تحتوي على كروت منتجات وتمركزها ===== */
.s-slider-wrapper:has(custom-salla-product-card) {
  max-width: 90% !important;
  margin: 0 auto !important;
}

/* ===== تضييق حاوية قائمة المنتجات الأفقية وتمركزها ===== */
.s-products-list-wrapper {
  max-width: 90% !important;
  margin: 0 auto !important;
}

/* ===== إزالة البوردر الافتراضي من الكروت الأفقية مع إضافة انتقال ===== */
.s-product-card-horizontal {
  border-color: transparent !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

/* ===== تأثير hover على الكروت الأفقية: بوردر برتقالي وظل ===== */
.s-product-card-horizontal:hover {
  border-color: #FF6B00 !important;
  box-shadow: 0 4px 16px rgba(255, 107, 0, 0.15) !important;
}


/* ============================================================
   قسم المنتج الخاص (Special Product Section)
   ============================================================ */

/* تصغير القسم وعمل مسافات يمين وشمال */
.s-block--special-product .da-bgg {
    max-width: 75% !important;
    margin: 0 auto !important;
}


/* ============================================================
   إخفاء الفيديو والمحتوى المرتبط به على الشاشات الصغيرة (أقل من 1024px)
   ============================================================ */

/* ===== إخفاء الفيديو ومحتواه، وتحويل الفلتر من Overlay إلى وضع عادي على الموبايل ===== */
@media (max-width: 1024px) {
  .s-slider-wrapper:not(salla-slider#main-slider-3):has(video) video {
    display: none !important;
  }
  
  .s-slider-wrapper:has(video) .home-slider__content {
    display: none !important;
  }

  /* ===== على الموبايل: الفلتر يأخذ العرض الكامل بخلفية gradient بدلاً من Overlay شفاف ===== */
  .video-swiper .sc-filter-wrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   الفلتر فوق الفيديو (Overlay) على الشاشات الكبيرة
   ============================================================ */

/* ===== إخفاء محتوى السلايدر الافتراضي لإظهار الفلتر بديلاً عنه ===== */
.home-slider__content {
  display: none !important;
}

/* ===== جعل حاوية الفيديو relative لتمكين وضع الـ overlay للفلتر ===== */
.video-swiper {
  position: relative !important;
}

/* ===== وضع الفلتر في منتصف الفيديو (overlay) مع خلفية شبه شفافة وblur ===== */
.video-swiper .sc-filter-wrap {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
  background: rgba(15, 25, 60, 0.85) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  margin: 0 !important;
}

/* ============================================================
   فلتر البحث عن السيارات (Speed Car Filter)
   ============================================================ */

/* ===== إعداد box-sizing لجميع عناصر الفلتر ===== */
.sc-filter-wrap,
.sc-filter-wrap * {
  box-sizing: border-box !important;
}

/* ===== الحاوية الرئيسية للفلتر: أبعاد، padding، اتجاه RTL، لون النص، وزوايا مدورة ===== */
.sc-filter-wrap {
  padding: 48px 60px !important;
  direction: rtl;
  font-family: inherit;
  display: block !important;
  width: 860px !important;
  max-width: calc(100vw - 32px) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: #fff !important;
  border-radius: 16px !important;
}

/* ===== تمركز عنوان الفلتر مع مسافة سفلية ===== */
.sc-filter-title {
  text-align: center;
  margin-bottom: 8px;
}

/* ===== تنسيق h2 في عنوان الفلتر: حجم، وزن، لون أبيض ===== */
.sc-filter-title h2 {
  font-size: 28px;
  font-weight: 700;
  color: #fff !important;
  margin: 0;
  line-height: 1.35;
}

/* ===== اللون البرتقالي للكلمة المميزة داخل العنوان ===== */
.sc-filter-title h2 span {
  color: #FF6B00 !important;
}

/* ===== النص الفرعي تحت عنوان الفلتر بلون أبيض شفاف ===== */
.sc-filter-title p {
  font-size: 14px;
  color: rgba(255,255,255,.7) !important;
  margin: 6px 0 0;
}

/* ===== صندوق الحقول الداخلي: خلفية شفافة، بوردر خفيف، وزوايا مدورة ===== */
.sc-filter-box {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 12px;
  padding: 24px;
  margin-top: 24px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* ===== الصف الأول من الفلتر: 3 أعمدة متساوية بمسافات بينها ===== */
.sc-filter-row-1 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px;
  width: 100% !important;
}

/* ===== الصف الثاني من الفلتر (زر البحث) بمسافة علوية ===== */
.sc-filter-row-2 {
  margin-top: 16px;
  width: 100% !important;
}

/* ===== الحقل الفردي: عرض كامل بدون overflow ===== */
.sc-field {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

/* ===== تنسيق الـ label فوق كل حقل ===== */
.sc-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.75) !important;
}

/* ===== الغلاف النسبي للـ select لإضافة السهم المخصص ===== */
.sc-select-shell {
  position: relative;
  width: 100% !important;
  height: 52px;
  overflow: hidden !important;
  border-radius: 8px;
}

/* ===== السهم المخصص للـ select باستخدام pseudo-element ::after ===== */
.sc-select-shell::after {
  content: "⌄";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 18px;
  pointer-events: none;
}

/* ===== تنسيق عنصر select: خلفية، بوردر، لون، اتجاه RTL، وإخفاء السهم الافتراضي ===== */
.sc-field select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 52px !important;
  box-sizing: border-box !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-size: 15px !important;
  font-family: inherit !important;
  text-align: right;
  direction: rtl;
  padding: 0 14px 0 42px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color-scheme: dark;
}

/* ===== تغيير لون بوردر الـ select عند مرور المؤشر ===== */
.sc-field select:hover {
  border-color: rgba(255,107,0,.6) !important;
}

/* ===== تأثير focus على الـ select: بوردر برتقالي وخلفية خفيفة ===== */
.sc-field select:focus {
  outline: none !important;
  border-color: #FF6B00 !important;
  background: rgba(255,107,0,.08) !important;
}

/* ===== تنسيق الخيارات داخل الـ select بخلفية داكنة ===== */
.sc-field select option {
  background: #1a1a2e !important;
  color: #fff !important;
}

/* ===== الخيار المحدد يأخذ خلفية برتقالية ===== */
.sc-field select option:checked {
  background: #FF6B00 !important;
  color: #fff !important;
}

/* ===== الـ select المعطل: شفافية وcursor غير قابل للنقر ===== */
.sc-field select:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ===== صف البحث: عرض كامل ===== */
.sc-search-row {
  width: 100% !important;
}

/* ===== زر البحث: عرض كامل، ارتفاع ثابت، لون برتقالي ===== */
.sc-btn {
  display: block !important;
  width: 100% !important;
  height: 56px !important;
  background: #FF6B00 !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer;
}

/* ===== تغميق الزر عند hover/focus ===== */
.sc-btn:hover,
.sc-btn:focus {
  background: #e55a00 !important;
  color: #fff !important;
}

/* ===== حاوية الـ badges (شارات الثقة) أسفل الفلتر: flex ومتمركزة ===== */
.sc-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin-top: 24px;
}

/* ===== تنسيق كل badge: حجم خط صغير، لون أبيض شفاف ===== */
.sc-badge {
  font-size: 13px;
  color: rgba(255,255,255,.78) !important;
  white-space: nowrap;
}

/* ===== Responsive: تحويل الفلتر من Overlay إلى وضع عادي على الشاشات الصغيرة (أقل من 1024px) ===== */
@media (max-width: 1024px) {
  .video-swiper .sc-filter-wrap {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===== Responsive: تعديلات الفلتر على الشاشات المتوسطة (أقل من 768px) ===== */
@media (max-width: 768px) {
  /* ===== تصغير عرض الفلتر وضبط الـ padding ===== */
  .sc-filter-wrap {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    padding: 32px 14px !important;
  }

  .sc-filter-title h2 {
    font-size: 22px;
  }

  .sc-filter-title p {
    font-size: 13px;
  }

  .sc-filter-box {
    padding: 16px !important;
  }

  /* ===== الحقول تصبح عمود واحد على الشاشات المتوسطة ===== */
  .sc-filter-row-1 {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .sc-btn {
    height: 54px !important;
    font-size: 16px !important;
  }

  .sc-badges {
    gap: 10px 14px;
  }

  .sc-badge {
    font-size: 12px;
  }
}

/* ===== Responsive: تعديلات إضافية على الشاشات الصغيرة جداً (أقل من 480px) ===== */
@media (max-width: 480px) {
  .sc-filter-wrap {
    padding: 24px 12px !important;
    border-radius: 0 !important;
  }

  .sc-filter-title h2 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  .sc-filter-title p {
    font-size: 12px !important;
  }

  .sc-filter-box {
    padding: 12px !important;
    border-radius: 8px !important;
  }

  .sc-filter-row-1 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .sc-field select {
    height: 46px !important;
    font-size: 14px !important;
  }

  .sc-btn {
    height: 48px !important;
    font-size: 15px !important;
  }

  .sc-badges {
    gap: 8px 12px !important;
  }

  .sc-badge {
    font-size: 11px !important;
  }
}

/* ===== Responsive: تعديلات على أصغر الشاشات (أقل من 420px) ===== */
@media (max-width: 420px) {
  .sc-filter-wrap {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    padding: 28px 10px !important;
  }

  .sc-filter-box {
    padding: 12px !important;
  }
}/* Desktop */
@media (min-width: 1200px) {
    .grid.grid-cols-3 {
        padding-inline: 150px !important;
        column-gap: 180px !important;
        padding-bottom: 60px !important;
    }
}

/* Laptop */
@media (max-width: 1199px) and (min-width: 992px) {
    .grid.grid-cols-3 {
        padding-inline: 100px !important;
        column-gap: 100px !important;
        padding-bottom: 50px !important;
    }
}

/* Tablet */
@media (max-width: 991px) and (min-width: 768px) {
    .grid.grid-cols-3 {
        padding-inline: 40px !important;
        column-gap: 50px !important;
        padding-bottom: 40px !important;
    }

    .angel-feature h4 {
        font-size: 1.1rem !important;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .grid.grid-cols-3 {
        padding-inline: 15px !important;
        column-gap: 15px !important;
        row-gap: 25px !important;
        padding-bottom: 30px !important;
    }

    .angel-feature h4 {
        font-size: 15px !important;
    }

    .angel-feature p {
        font-size: 12px !important;
    }

    .angel-feature i {
        font-size: 32px !important;
    }
}

/* تقليل الفراغ العلوي */
.section--features,
.features-section,
.s-block {
    padding-top: 20px !important;
}


/* ===== تكبير البانرات على الشاشات الكبيرة ===== */

@media (min-width: 1600px) {

  .banner-square .box-img,
  salla-slider#squares-2 .box-img {
    width: 150px !important;
    height: 90px !important;
  }

  .banner-square .box-img img,
  salla-slider#squares-2 .box-img img {
    max-height: 65px !important;
  }
}

/* ===== تكبير بسيط على اللابتوب والديسكتوب ===== */

@media (min-width: 1024px) and (max-width: 1599px) {

  .banner-square .box-img,
  salla-slider#squares-2 .box-img {
    width: 135px !important;
    height: 80px !important;
  }

  .banner-square .box-img img,
  salla-slider#squares-2 .box-img img {
    max-height: 58px !important;
  }
}

/* تكبير الصور فقط */

.banner-square .box-img img,
salla-slider#squares-2 .box-img img {
    transform: scale(1.45);
    transition: transform .3s ease;
}

/* ================= Hover موحد للسلايدرين ================= */

.banner-square {
    transition: transform .3s ease !important;
}

.banner-square .box-img {
    border: 1px solid #e5e7eb !important;
    transition: all .3s ease !important;
}

.banner-square img {
    transition: transform .3s ease !important;
}
/* ======================
   squares-1
====================== */

#squares-1 .banner-square,
#squares-1 .banner-square .box-img,
#squares-1 .banner-square img {
    transition: all .3s ease !important;
}

#squares-1 .banner-square:hover {
    transform: translateY(-4px);
}

#squares-1 .banner-square:hover .box-img {
    border-color: var(--brand) !important;
    background: rgba(250,91,23,.03) !important;
    box-shadow: 0 8px 20px rgba(250,91,23,.15) !important;
}

#squares-1 .banner-square:hover img {
    transform: scale(1.12);
}


/* ======================
   squares-2 + squares-4
====================== */

#squares-2 .swiper-slide,
#squares-2 .swiper-slide .box-img,
#squares-2 .swiper-slide img,
#squares-4 .swiper-slide,
#squares-4 .swiper-slide .box-img,
#squares-4 .swiper-slide img {
    transition: all .3s ease !important;
}

#squares-2 .swiper-slide:hover,
#squares-4 .swiper-slide:hover {
    transform: translateY(-4px);
}

#squares-2 .swiper-slide:hover .box-img,
#squares-4 .swiper-slide:hover .box-img {
    border: 1px solid var(--brand) !important;
    background: rgba(250,91,23,.03) !important;
    box-shadow: 0 8px 20px rgba(250,91,23,.15) !important;
}

#squares-2 .swiper-slide:hover img,
#squares-4 .swiper-slide:hover img {
    transform: scale(1.12);
}

/* تصغير المنتج المميز */

.s-block--special-product .da-bgg {
    max-width: 65% !important;
    margin: 0 auto !important;
}

/* الصورة */
.s-block--special-product .p_image img {
    transform: scale(.88);
}

/* تقليل الـ padding */
.s-block--special-product .md\:p-8 {
    padding: 1.25rem !important;
}

/* العنوان */
.s-block--special-product h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
}

/* الوصف */
.s-block--special-product p {
    font-size: 14px !important;
    line-height: 1.6 !important;
}

/* الأسعار */
.s-block--special-product .special-price {
    font-size: 16px !important;
}

/* العد التنازلي */
.s-block--special-product .s-count-down-list {
    transform: scale(.9);
    transform-origin: right center;
}

/* التابات */
.s-block--special-product .tabs__special {
    transform: scale(.9);
    transform-origin: right center;
}
/* أيقونة التاب النشط في المنتج المميز */

.tabs__special .tab-trigger.is-active {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
}

.tabs__special .tab-trigger.is-active i {
    color: #fff !important;
    opacity: 1 !important;
}



/* الفئة */

.s-product-card-category {
    display: inline-block;
    background: #fff3eb;
    color: var(--brand);
    font-size: 12px !important;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 8px;
    border: 1px solid rgba(250,91,23,.15);
}

/* عنوان المنتج */

.s-product-card-content-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.6 !important;
    color: #1f2937 !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
}

/* هوفر العنوان */

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

/* السعر */

.s-product-card-price {
    font-size: 24px !important;
    font-weight: 800 !important;
}

/* الكارت كله */

.s-product-card-entry {
    transition: all .3s ease;
}

.s-product-card-entry:hover {
    transform: translateY(-5px);
}
/* البراند */
.s-product-card-brand {
    display: inline-block;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff !important;
    background: #111827;
    padding: 5px 10px;
    border-radius: 999px;
    margin-bottom: 6px;
}
/* الوصف المختصر */

.s-product-card-content-subtitle {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    line-height: 1.4;
}
.s-product-card-content-subtitle {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    width: fit-content;

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

    color: #16a34a !important;

    background: #f0fdf4;
    border: 1px solid #bbf7d0;

    padding: 4px 10px;
    border-radius: 999px;

    margin-top: 4px !important;
    margin-bottom: 8px !important;
}

.s-product-card-category {
    background: var(--brand);
    color: #fff !important;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
}

.s-product-card-rating {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;

    background: linear-gradient(135deg,#f59e0b,#f97316);
    color: #fff !important;

    padding: 7px 13px;
    border-radius: 999px;

    box-shadow: 0 6px 18px rgba(249,115,22,.25);

    font-size: 14px !important;
    font-weight: 800 !important;
}

.s-product-card-rating i,
.s-product-card-rating span {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}







.product-saving-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:12px;
    padding:10px 14px;

    background:#fff7ed;
    border:1px solid #fdba74;
    border-radius:12px;

    color:#c2410c;
    font-size:14px;
    font-weight:700;
}

.product-saving-badge i{
    color:#f97316;
    font-size:15px;
}