/* Add custom CSS styles below */ 
/* ============================================================
   ثيم الماتشا - CSS مخصص لمتجر سلة
   الهوية اللونية: أخضر ماتشا هادئ مع لمسة كريمي
   الصقها في: لوحة تحكم سلة > تصميم المتجر > تخصيص > CSS مخصص
   ============================================================ */

/* ---------- 1) الالوان الاساسية للمتجر ---------- */
/* اغلب ثيمات سلة الحديثة تقرا هذي المتغيرات وتغير لون المتجر كامل */
:root {
  --color-primary: #92a86d;        /* اخضر الماتشا الاساسي */
  --color-primary-d: #6f8350;      /* درجة اغمق للهفر */
  --color-primary-rgb: 146, 168, 109;
  --salla-primary: #92a86d;
  --salla-primary-dark: #6f8350;

  /* الوان مساعدة */
  --matcha: #92a86d;
  --matcha-dark: #5c6e42;
  --cream: #f6f4ec;                /* خلفية كريمي فاتح */
  --cream-soft: #eef0e6;
  --ink: #2c2c2c;                  /* لون النص الداكن */
}

/* ---------- 2) الخط العام ونعومة الحركة ---------- */
body {
  background-color: var(--cream);
  color: var(--ink);
}

a, button, .btn {
  transition: all .25s ease;
}

/* ---------- 3) الازرار ---------- */
/* الزر الاساسي (اضف للسلة، اشتر الان، تأكيد) */
.btn--primary,
.s-button-primary,
button[type="submit"].btn,
.btn.btn-primary {
  background-color: var(--matcha) !important;
  border-color: var(--matcha) !important;
  color: #fff !important;
  border-radius: 14px !important;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(146, 168, 109, .25);
}

.btn--primary:hover,
.s-button-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--matcha-dark) !important;
  border-color: var(--matcha-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(146, 168, 109, .35);
}

/* زر ثانوي (محدد بالاطار فقط) */
.btn--outline,
.s-button-outline {
  border: 1.5px solid var(--matcha) !important;
  color: var(--matcha-dark) !important;
  border-radius: 14px !important;
  background: transparent !important;
}
.btn--outline:hover {
  background: var(--matcha) !important;
  color: #fff !important;
}

/* ---------- 4) الهيدر (الشريط العلوي) ---------- */
.s-header,
header.store-header,
.header {
  background-color: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .04);
}

/* ايقونة السلة والبحث */
.s-header a:hover i,
.header-icon:hover {
  color: var(--matcha) !important;
}

/* ---------- 5) كروت الاقسام والمنتجات ---------- */
.product-entry,
.s-product-card-entry,
.category-item,
.product-card {
  border-radius: 18px !important;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--cream-soft);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
}

.product-entry:hover,
.s-product-card-entry:hover,
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(146, 168, 109, .18);
  border-color: var(--matcha);
}

/* صورة المنتج تكبر بهدوء عند المرور */
.product-entry img,
.s-product-card-image img {
  transition: transform .4s ease;
}
.product-entry:hover img,
.s-product-card-image:hover img {
  transform: scale(1.05);
}

/* السعر بلون الماتشا */
.product-price,
.s-product-card-sale-price,
.price {
  color: var(--matcha-dark) !important;
  font-weight: 700;
}

/* ---------- 6) عناوين الاقسام ---------- */
.section-title,
h2.title,
.s-block-title {
  position: relative;
  font-weight: 800;
  color: var(--ink);
}

/* خط صغير تحت العنوان بلون الماتشا */
.section-title::after,
.s-block-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  background: var(--matcha);
  border-radius: 4px;
  margin-top: 8px;
}

/* ---------- 7) الشارات (خصم / جديد) ---------- */
.product-badge,
.s-product-card-promotion-title,
.badge {
  background: var(--matcha) !important;
  color: #fff !important;
  border-radius: 10px !important;
}

/* ---------- 8) حقول الادخال والبحث ---------- */
input, textarea, select, .s-search-input {
  border-radius: 12px !important;
}
input:focus, textarea:focus, .s-search-input:focus {
  border-color: var(--matcha) !important;
  box-shadow: 0 0 0 3px rgba(146, 168, 109, .15) !important;
  outline: none;
}

/* ---------- 9) الفوتر ---------- */
footer,
.s-footer {
  background-color: var(--matcha-dark) !important;
  color: #f3f5ee;
}
footer a:hover,
.s-footer a:hover {
  color: var(--cream) !important;
}

/* ---------- 10) سلايدر العروض (نقاط التنقل) ---------- */
.swiper-pagination-bullet-active {
  background: var(--matcha) !important;
}

/* ---------- 11) لمسات اخيرة ---------- */
::selection { background: rgba(146, 168, 109, .25); }

/* شريط التمرير (للمتصفحات اللي تدعمه) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--matcha);
  border-radius: 8px;
}