/* Add custom CSS styles below */ 
/* ============================================================
   رسمة المركبة — VELOCITY Custom CSS  (لثيم رائد على سلة)
   الصق هذا في: تصميم المتجر ← تخصيص ← CSS مخصص
   اللون الأساسي: أحمر #ff2630 / أسود #0e0e10
   ============================================================ */

:root{
  --rm-red:#ff2630;
  --rm-black:#0e0e10;
  --rm-radius:10px;
}

/* ============ 1) تأثير ارتفاع البطاقات عند مرور الماوس ============ */
/* بطاقات المنتجات */
.s-product-card-entry,
.product-entry,
salla-product-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  will-change: transform;
}
.s-product-card-entry:hover,
.product-entry:hover,
salla-product-card:hover{
  transform: none !important;
  box-shadow: 0 10px 22px rgba(14,14,16,.10) !important;
  border-color: var(--rm-red) !important;
}

/* بطاقات التصنيفات (شبكة "وش ناوي تعدّل؟") */
.s-block-categories a,
.categories-template a,
.category-item,
.s-categories-item,
a[href*="/c"][class*="categ"]{
  transition: transform .18s ease, box-shadow .18s ease !important;
  border-radius: var(--rm-radius) !important;
  overflow: hidden;
}
.s-block-categories a:hover,
.categories-template a:hover,
.category-item:hover,
.s-categories-item:hover{
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 40px rgba(180,185,192,.22) !important;
}

/* ملاحظة: أزلنا تكبير/رفع صورة بطاقة المنتج عند المرور — كان يقصّ جزء من الصورة
   ويبان غير رصين. الآن الحدود تتلون أحمر فقط بدون أي حركة/تكبير. */

/* ============ 2) زر السلة في الناف بار (VELOCITY) ============ */
/* ملاحظة: أزلنا الخلفية السوداء/الحشو عن هذا الزر لأن نفس الـ class يُستخدم أحياناً
   على حاوية تجمع أكثر من أيقونة (سلة + مفضلة + مقارنة) في الجوال، فكانت الخلفية
   السوداء تلف حولها كلها وتصير "بقعة" واحدة. الحل: نلوّن الأيقونة/النص فقط بدون
   خلفية أو حشو، فما في خطر نلف حول عناصر زيادة. */
.s-header-cart-handler,
.cart-handler,
a.header-cart,
header a[href*="cart"]{
  color:#0e0e10 !important;
  transition: color .18s ease !important;
}
/* النص والأيقونة يتبعون نفس اللون (يعالج الأيقونة الخضراء) */
.s-header-cart-handler i,
.s-header-cart-handler svg,
.s-header-cart-handler span,
.cart-handler i,
.cart-handler svg,
.cart-handler span,
a.header-cart i,
a.header-cart svg,
a.header-cart span,
header a[href*="cart"] i,
header a[href*="cart"] svg,
header a[href*="cart"] span{
  color:#0e0e10 !important;
  fill:#0e0e10 !important;
}
.s-header-cart-handler:hover,
.s-header-cart-handler:hover i,
.s-header-cart-handler:hover svg,
.cart-handler:hover,
.cart-handler:hover i,
.cart-handler:hover svg,
a.header-cart:hover,
a.header-cart:hover i,
a.header-cart:hover svg,
header a[href*="cart"]:hover,
header a[href*="cart"]:hover i,
header a[href*="cart"]:hover svg{
  color: var(--rm-red) !important;
  fill: var(--rm-red) !important;
}
/* عدّاد السلة (الرقم) — يبقى أحمر مع رقم أبيض */
.s-header-cart-handler .s-count,
.cart-handler .count,
.header-cart .count,
[class*="cart"] [class*="count"]{
  background: var(--rm-red) !important;
  color:#fff !important;
  border: 2px solid #fff !important;
  font-weight: 700 !important;
}

/* ============ 2.1) شريط البحث (VELOCITY) ============ */
.s-search-bar,
.search-bar,
form[role="search"],
header form[action*="search"],
.header-search{
  background:#f4f4f5 !important;
  border:1px solid #ececee !important;
  border-radius: 8px !important;
  box-shadow:none !important;
}
.s-search-bar input,
.search-bar input,
form[role="search"] input,
header form[action*="search"] input,
.header-search input{
  background:transparent !important;
  border:none !important;
  font-family:inherit !important;
  font-size:14px !important;
  color:var(--rm-black) !important;
}
.s-search-bar input::placeholder,
.search-bar input::placeholder,
header form[action*="search"] input::placeholder{
  color:#9a9aa0 !important;
}
/* زر/أيقونة البحث */
.s-search-bar button,
.search-bar button,
header form[action*="search"] button,
.header-search button{
  background:var(--rm-black) !important;
  color:#fff !important;
  border-radius:6px !important;
}
.s-search-bar button i,
.search-bar button i,
header form[action*="search"] button i,
header form[action*="search"] button svg{
  color:#fff !important;
  fill:#fff !important;
}

/* ============ 3) بطاقة المنتج — لمسات VELOCITY ============ */
.s-product-card-entry,
.product-entry{
  border: 1px solid #ececee !important;
  border-radius: var(--rm-radius) !important;
  background:#fff !important;
}
/* السعر بالأحمر */
.s-product-card-price .price,
.s-product-card-sale-price,
.product-price .price,
.price.is-original{
  color: var(--rm-black) !important;
  font-weight: 800 !important;
}
.s-product-card-sale-price,
.product-price .sale-price,
.offer-price{
  color: var(--rm-red) !important;
}
/* السعر القديم مشطوب باهت */
.s-product-card-price del,
.product-price del,
.price del{
  color:#bcbcc2 !important;
}
/* زر الإضافة للسلة داخل البطاقة */
.s-product-card-entry .s-button-element,
.s-product-card-content button,
.product-entry .btn,
salla-add-product-button button{
  background: var(--rm-black) !important;
  color:#fff !important;
  border:none !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  transition: background .18s ease !important;
}
.s-product-card-entry .s-button-element:hover,
.s-product-card-content button:hover,
.product-entry .btn:hover,
salla-add-product-button button:hover,
salla-add-product-button::part(button):hover,
button[class*="add-product"]:hover,
button[class*="add-to-cart"]:hover,
.s-add-product-button:hover,
.s-block-product-card button:hover{
  background: var(--rm-red) !important;
  background-color: var(--rm-red) !important;
  filter: none !important;
  opacity: 1 !important;
}
/* شارة الخصم / الوسم — داخل بطاقات المنتجات فقط */
.s-product-card-promotion-title,
.product-badge,
.s-product-card-badge,
.s-product-card-entry [class*="badge"],
.product-entry [class*="badge"]{
  background: var(--rm-red) !important;
  color:#fff !important;
  font-weight: 800 !important;
}

/* ============ 4) لمسات عامة على الهوية ============ */
/* خط أحمر أسفل عناوين الأقسام */
.s-block-title,
.section-title,
.home-section-title h2{
  position: relative;
}
/* أزرار الموقع الأساسية */
.btn-primary,
.s-button-primary,
button.is-primary{
  background: var(--rm-red) !important;
  border-color: var(--rm-red) !important;
}
.btn-primary:hover,
.s-button-primary:hover,
button.is-primary:hover{
  filter: brightness(.92) !important;
}

/* ============ 8) آراء العملاء — VELOCITY ============ */
.s-block-testimonial,
[class*="testimonial"]{
  background:#0e0e10 !important;
}
.s-block-testimonial .s-block-title,
[class*="testimonial"] h2,
[class*="testimonial"] .title{
  color:#fff !important;
}
.s-testimonial-card,
[class*="testimonial"] [class*="card"],
[class*="testimonial-item"]{
  background:#17171a !important;
  border:1px solid rgba(255,38,48,.18) !important;
  border-radius:14px !important;
  color:#e6e6ea !important;
}
[class*="testimonial"] [class*="card"] p,
.s-testimonial-card p{
  color:#c7c7cd !important;
}
[class*="testimonial"] [class*="star"],
[class*="testimonial"] [class*="rating"]{
  color:#ff2630 !important;
}

/* ============ 9) موقع المحل (خرائط قوقل) — VELOCITY ============ */
[class*="trust-map"],
[class*="map-section"]{
  background:#0e0e10 !important;
  padding:40px 0 !important;
}
[class*="trust-map"] h2,
[class*="trust-map"] .title,
[class*="map-section"] h2{
  color:#fff !important;
  font-weight:800 !important;
}
[class*="trust-map"] iframe,
[class*="map-section"] iframe{
  border-radius:14px !important;
  border:2px solid var(--rm-red) !important;
  filter:grayscale(.15) contrast(1.05) !important;
}

/* ============ 10) مزايا المتجر — أيقونات VELOCITY ============ */
.s-block-features [class*="icon"],
.store-features [class*="icon"],
[class*="feature"] i,
[class*="feature-item"] i{
  color: var(--rm-red) !important;
}
.s-block-features [class*="card"],
.store-features [class*="card"],
[class*="feature-item"]{
  background:#fff !important;
  border:1px solid #ececee !important;
  border-radius:12px !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.s-block-features [class*="card"]:hover,
.store-features [class*="card"]:hover,
[class*="feature-item"]:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 14px 28px rgba(255,38,48,.14) !important;
}

/* ============ 11) الأسئلة الشائعة — VELOCITY ============ */
[class*="faq"] .title,
[class*="faq"] h2{
  color:#0e0e10 !important;
  font-weight:800 !important;
}
[class*="faq"] [class*="question"],
[class*="faq"] [class*="accordion"] > *{
  background:#fff !important;
  border:1px solid #ececee !important;
  border-radius:12px !important;
  margin-bottom:10px !important;
  overflow:hidden !important;
}
[class*="faq"] [class*="question"]:hover{
  border-color: var(--rm-red) !important;
}
[class*="faq"] [class*="question"].active,
[class*="faq"] [class*="question"][aria-expanded="true"]{
  border-color: var(--rm-red) !important;
}
[class*="faq"] [class*="icon"]{
  color: var(--rm-red) !important;
}

/* ============ 7) شبكة مميزات المتجر — أفقية بالجوال ============ */
/* ملاحظة: الإصلاح انتقل بالكامل لكود JavaScript (rasmat-velocity-all.js) لأنه
   يتحقق من نص العناصر الفعلي قبل التطبيق. القاعدة العامة القديمة هنا كانت
   بمحددات مثل [class*="feature"][class*="grid"] تطابق أحياناً عناصر أساسية
   بالصفحة (كامل الغلاف) بدل شبكة المميزات فقط، وتسبب انقسام الصفحة لعمودين
   فاضيين بالجوال. لا تُرجعها بدون اختبار دقيق. */

/* ============ 13) بانر "بمناسبة الافتتاح" بعرض الشاشة الكامل بدون هوامش ============ */
/* ملاحظة: أزلنا .s-slider-component من هذه القاعدة لأنه نفس الكلاس العام
   لكاروسيل المنتجات (الأكثر مبيعاً وغيره) في ثيم سلة — تطبيق width:100vw
   عليه كان يكسر تخطيط كروت المنتجات (انزياح لليمين). نستهدف فقط كلاسات
   البانر/السلايدشو الفعلية. */
.s-block-slideshow,
.s-block-header,
[class*="slideshow"],
.s-block-banner,
[class*="banner"][class*="block"],
[class*="promo-banner"]{
  max-width: 100% !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.s-block-slideshow .container,
.s-block-slideshow .container-fluid,
main .s-block-slideshow,
main .container:has(.s-block-slideshow),
.s-block-banner .container,
main .container:has(.s-block-banner){
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
}
/* فاصل رأسي فعلي بين بانرات متتالية (بانر الافتتاح + بانرات الأقسام) وبين
   البانر والقسم اللي قبله/بعده — علشان ما يلتصق بالسيكشن المجاور */
.s-block-banner,
[class*="promo-banner"],
.s-block-slideshow{
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
.s-block-banner + .s-block-banner,
[class*="promo-banner"] + [class*="promo-banner"]{
  margin-top: 20px !important;
}
.s-block-slideshow img,
.s-block-slideshow picture,
.s-block-slideshow video,
.s-block-banner img,
.s-block-banner picture,
[class*="promo-banner"] img{
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
}
@media (max-width: 768px){
  .s-block-slideshow,
  [class*="slideshow"],
  .s-block-banner,
  [class*="promo-banner"]{
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 !important;
  }
}
/* ملاحظة: شكل التصنيفات (مربع + عنوان أبيض) الآن يُطبَّق عبر كود JavaScript المنفصل
   (categories-velocity.js) لأنه أضمن من تخمين أسماء كلاسات الثيم. */

/* ============ 12) إزالة أيقونة المفضلة الشفافة الفارغة فوق صورة المنتج ============ */
.s-product-card-entry [class*="favorite"],
.s-product-card-entry [class*="wishlist"],
.product-entry [class*="favorite"],
.product-entry [class*="wishlist"]{
  display:none !important;
}

/* ============ 6) صورة بطاقة المنتج مربّعة مثل الواجهة ============ */
.s-product-card-image,
.product-entry-image,
.s-product-card-entry picture,
.product-entry picture,
salla-product-card .image{
  aspect-ratio: 1/1 !important;
  overflow: hidden !important;
  border-radius: 8px 8px 0 0 !important;
}
.s-product-card-image img,
.product-entry-image img,
.s-product-card-entry picture img,
.product-entry picture img,
salla-product-card .image img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
/* الصورة تملأ البطاقة مربعة */
.s-block-categories li,
.s-block-categories .s-categories-item,
.categories-template li,
.category-item{
  position: relative !important;
  border-radius: var(--rm-radius) !important;
  overflow: hidden !important;
  background:#0e0e10 !important;
}
.s-block-categories li a,
.s-block-categories .s-categories-item a,
.categories-template li a,
.category-item a{
  position: relative !important;
  display: block !important;
  aspect-ratio: 1/1 !important;
}
.s-block-categories img,
.categories-template img,
.category-item img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius: var(--rm-radius) !important;
}
/* العنوان أبيض فوق الصورة بالأسفل + خط أحمر */
.s-block-categories li h3,
.s-block-categories li h2,
.s-block-categories .s-categories-item-title,
.categories-template .title,
.category-item .title,
.category-item h3{
  position:absolute !important;
  bottom:0 !important; right:0 !important; left:0 !important;
  z-index:2 !important;
  margin:0 !important;
  padding:34px 12px 14px !important;
  text-align:center !important;
  color:#fff !important;
  font-weight:800 !important;
  font-size:15px !important;
  background:linear-gradient(to top, rgba(14,14,16,.92), rgba(14,14,16,0)) !important;
}
/* الخط الأحمر فوق العنوان */
.s-block-categories li h3:before,
.s-block-categories .s-categories-item-title:before,
.categories-template .title:before,
.category-item .title:before,
.category-item h3:before{
  content:"" !important;
  position:absolute !important;
  bottom:44px !important;
  right:50% !important;
  transform:translateX(50%) !important;
  width:46px !important;
  height:4px !important;
  background:var(--rm-red) !important;
  border-radius:2px !important;
}