/* ========================================================================
   RAWAJ CARE — Product Cards • Premium Gold Edition
   لون أساسي جديد: #A99960 (ذهبي فاخر هادي)
   يخص كروت المنتجات فقط (الكارت العادي + كارت العروض/السلايدر)
   ولا يلمس الهيدر أو الفوتر أو أي قسم تاني في المتجر.

   وين تلصقه: Salla Dashboard → Store Design → Theme Customization →
   Advanced → Custom CSS
   ======================================================================== */

:root {
  /* -- اللون الأساسي الجديد وتدرجاته -- */
  --rw-primary: #A99960;
  --rw-primary-dark: #8C7C48;
  --rw-primary-light: #C7B784;
  --rw-primary-soft: #E9E1CC;

  /* -- خلفيات ونصوص مساعدة -- */
  --rw-off-white: #FBF9F4;
  --rw-off-white-2: #F4EFE2;
  --rw-beige: #E7DEC4;
  --rw-beige-dark: #D8C79E;
  --rw-text: #6F6142;
  --rw-text-soft: #93855F;
  --rw-white: #FFFFFF;

  /* -- ألوان ثانوية (حالة التوفر) -- */
  --rw-sage: #8FAE8F;
  --rw-sage-bg: #EAF2E9;

  /* متغيرات سلة الخاصة بالريبون — تفعيلها هنا يأثر على الريبون بس */
  --pc-promotion-title-bg-c: var(--rw-primary);
  --pc-promotion-title-c: var(--rw-white);
}

/* ==========================================================================
   1) كارت المنتج (الأفقي والعمودي)
   خلفية متدرجة أبيض → ذهبي ناعم + حركة عند الـ hover/touch
   ========================================================================== */
custom-salla-product-card,
custom-salla-product-card[horizontal],
.s-product-card-entry {
  background: linear-gradient(145deg, var(--rw-white) 0%, var(--rw-white) 58%, var(--rw-primary-soft) 100%) !important;
  background-size: 220% 220% !important;
  background-position: 0% 0% !important;
  border: 1px solid var(--rw-beige) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(169, 153, 96, 0.10);
  transition: background-position .55s ease, box-shadow .35s ease, transform .3s ease, border-color .3s ease;
}
custom-salla-product-card:hover,
custom-salla-product-card[horizontal]:hover,
custom-salla-product-card:active,
custom-salla-product-card[horizontal]:active,
custom-salla-product-card:focus-within,
custom-salla-product-card[horizontal]:focus-within {
  background-position: 100% 100% !important;
  border-color: var(--rw-primary-light) !important;
  box-shadow: 0 14px 30px rgba(169, 153, 96, 0.28);
  transform: translateY(-3px);
}

/* الصورة والمحتوى شفافين علشان يبان تدرج الكارت من تحتهم */
.s-product-card-image,
.s-product-card-content {
  background-color: transparent !important;
}

/* ==========================================================================
   2) الريبون "عرض خاص / خصم خاص"
   ========================================================================== */
.s-product-card-promotion-title,
.lima-promotion-title {
  background: linear-gradient(120deg, var(--rw-primary) 0%, var(--rw-primary-dark) 100%) !important;
  color: var(--rw-white) !important;
  font-weight: 600;
  letter-spacing: .2px;
  border-radius: 0 0 12px 0;
  box-shadow: 0 4px 10px rgba(140, 124, 72, 0.35);
}

/* ==========================================================================
   3) تاجات التصنيف / البراند
   ========================================================================== */
.lima-small-text {
  background-color: var(--rw-off-white-2) !important;
  color: var(--rw-text-soft) !important;
  border: 1px solid var(--rw-beige);
  border-radius: 8px;
}
.lima_pc_brand span {
  background-color: transparent !important;
  border: 1px solid var(--rw-beige);
  border-radius: 8px;
}

/* ==========================================================================
   4) العنوان والوصف
   ========================================================================== */
.s-product-card-content-title a {
  color: var(--rw-text) !important;
  font-weight: 700;
  transition: color .2s ease;
}
.s-product-card-content-title a:hover {
  color: var(--rw-primary-dark) !important;
}
.s-product-card-content-subtitle {
  color: var(--rw-text-soft) !important;
}

/* ==========================================================================
   5) السعر
   ========================================================================== */
.s-product-card-sale-price h4 {
  color: var(--rw-primary-dark) !important;
  font-weight: 800;
}
.s-product-card-sale-price span {
  color: var(--rw-beige-dark) !important;
  text-decoration-color: var(--rw-beige-dark) !important;
}

/* ==========================================================================
   6) نسبة الخصم
   ========================================================================== */
.pc_add_discount_precent {
  background-color: var(--rw-primary-soft) !important;
  color: var(--rw-primary-dark) !important;
  font-weight: 700;
  border-radius: 999px !important;
  padding: 2px 10px;
}

/* ==========================================================================
   7) شارة التقييم
   ========================================================================== */
.s-product-card-rating {
  background-color: var(--rw-off-white-2) !important;
  color: var(--rw-text) !important;
  border: 1px solid var(--rw-beige);
  border-radius: 999px;
}
.s-product-card-rating i {
  color: var(--rw-primary) !important;
}

/* ==========================================================================
   8) حالة التوفر (متوفر/غير متوفر) — أخضر فاتح هادي
   ========================================================================== */
.lima-in-stock-status {
  background-color: var(--rw-sage-bg) !important;
  color: var(--rw-sage) !important;
  border-radius: 999px;
}
.lima-in-stock-status i {
  color: var(--rw-sage) !important;
}

/* ==========================================================================
   9) زرار "أضف للسلة"
   ========================================================================== */
.s-product-card-content-footer salla-add-product-button .s-button-element,
.s-product-card-addcart-btn .s-button-element,
custom-salla-product-card .s-button-solid.s-button-primary {
  background: linear-gradient(120deg, var(--rw-primary) 0%, var(--rw-primary-dark) 100%) !important;
  border-color: var(--rw-primary) !important;
  color: var(--rw-white) !important;
  border-radius: 12px !important;
  font-weight: 600;
  transition: filter .2s ease, transform .2s ease;
}
.s-product-card-content-footer salla-add-product-button .s-button-element:hover,
.s-product-card-addcart-btn .s-button-element:hover,
custom-salla-product-card .s-button-solid.s-button-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ==========================================================================
   10) الأيقونات العائمة (مفضلة، عرض سريع، منتجات مشابهة)
   ========================================================================== */
custom-salla-product-card .add-wishlist-btn,
custom-salla-product-card .related-products-pc,
custom-salla-product-card .s-product-card-qv-btn {
  background-color: var(--rw-white) !important;
  color: var(--rw-primary) !important;
  border: 1px solid var(--rw-beige);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
custom-salla-product-card .add-wishlist-btn:hover,
custom-salla-product-card .related-products-pc:hover,
custom-salla-product-card .s-product-card-qv-btn:hover {
  background-color: var(--rw-primary) !important;
  color: var(--rw-white) !important;
  transform: scale(1.06);
}

/* ==========================================================================
   11) كارت العروض الخاصة (سلايدر .lima-p-offer-item)
   ماركب مختلف: صورة + نص جنب بعض — نفس هوية التدرج والحركة
   ========================================================================== */
.lima-p-offer-item {
  background: linear-gradient(145deg, var(--rw-white) 0%, var(--rw-white) 58%, var(--rw-primary-soft) 100%) !important;
  background-size: 220% 220% !important;
  background-position: 0% 0% !important;
  border: 1px solid var(--rw-beige) !important;
  border-radius: 16px;
  box-shadow: 0 3px 12px rgba(169, 153, 96, 0.10) !important;
  transition: background-position .55s ease, box-shadow .35s ease, transform .3s ease, border-color .3s ease;
}
.lima-p-offer-item:hover,
.lima-p-offer-item:active,
.lima-p-offer-item:focus-within {
  background-position: 100% 100% !important;
  border-color: var(--rw-primary-light) !important;
  box-shadow: 0 14px 30px rgba(169, 153, 96, 0.28) !important;
  transform: translateY(-3px);
}

.lima-p-offer-item h3 {
  color: var(--rw-text) !important;
}
.lima-p-offer-item .s-product-card-sale-price h4 {
  color: var(--rw-primary-dark) !important;
  font-weight: 800;
}
.lima-p-offer-item .s-product-card-sale-price span {
  color: var(--rw-beige-dark) !important;
}

/* زرار "إضافة للسلة" — إطار ذهبي يتلون عند الـ hover */
.lima-p-offer-item .special-offer-btns .s-button-outline,
.lima-p-offer-item .special-offer-btns .s-button-element {
  border-color: var(--rw-primary) !important;
  color: var(--rw-primary) !important;
  background-color: transparent !important;
  transition: background-color .2s ease, color .2s ease;
}
.lima-p-offer-item .special-offer-btns .s-button-outline:hover,
.lima-p-offer-item .special-offer-btns .s-button-element:hover {
  background-color: var(--rw-primary) !important;
  border-color: var(--rw-primary) !important;
  color: var(--rw-white) !important;
}

/* أيقونة المفضلة (قلب) */
.lima-p-offer-item .add-wishlist-btn {
  border-color: var(--rw-primary) !important;
  color: var(--rw-primary) !important;
  background-color: transparent !important;
}
.lima-p-offer-item .add-wishlist-btn:hover {
  background-color: var(--rw-primary) !important;
  color: var(--rw-white) !important;
}
.lima-p-offer-item .add-wishlist-btn i {
  color: inherit !important;
}

/* أيقونة العين / العرض السريع */
.lima-p-offer-item a.rounded-\[var\(--b-r-pc\)\] {
  border-color: var(--rw-primary) !important;
}
.lima-p-offer-item a.rounded-\[var\(--b-r-pc\)\]:hover {
  background-color: var(--rw-primary) !important;
}
.lima-p-offer-item a.rounded-\[var\(--b-r-pc\)\] i {
  color: var(--rw-primary) !important;
}
.lima-p-offer-item a.rounded-\[var\(--b-r-pc\)\]:hover i {
  color: var(--rw-white) !important;
}

/* ==========================================================================
   12) عنصر إضافي كان موجود في الكود الأصلي (.text-main-color-lm)
   اتحول لنفس هوية الذهبي الجديد
   ========================================================================== */
.text-main-color-lm {
  padding: 8px 14px;
  color: var(--rw-white);
  background: linear-gradient(120deg, var(--rw-primary) 0%, var(--rw-primary-dark) 100%);
  border-radius: 12px;
  font-weight: 600;
}