/* ================================================================
   🎮  GAMING STORE — SALLA COMPLETE STYLESHEET
   ================================================================
   المتجر  : sqrstore.com
   المنصة  : سلة (Salla)
   الإصدار : 3.0 — ملف موحد شامل
   الإضافة : تصميم المتجر ← تخصيص الثيم ← CSS
   ================================================================

   📋 فهرس الأقسام
   ──────────────────────────────────────────────────────────────
   §0  استيراد الخط + متغيرات التصميم
   §1  إعدادات عامة للصفحة
   §2  إخفاء عناصر سلة الأصلية
   §2b تجميل هيدر سلة الأصلي — نمط الألعاب الداكن
   §3  الهيدر  — شريط الإعلانات
   §4  الهيدر  — الشريط الرئيسي
   §5  الهيدر  — الشعار
   §6  الهيدر  — قائمة التنقل
   §7  الهيدر  — أدوات (بحث، أيقونات، سلة)
   §8  الفوتر  — الجزء العلوي (أعمدة)
   §9  الفوتر  — وسائل التواصل
   §10 الفوتر  — النشرة البريدية + وسائل الدفع
   §11 الفوتر  — الجزء السفلي
   §12 بطاقات المنتجات — البطاقة الأساسية
   §13 بطاقات المنتجات — الصورة والبادجات
   §14 بطاقات المنتجات — المحتوى والسعر
   §15 بطاقات المنتجات — الأزرار
   §16 صفحة المنتج الفردي
   §17 عناصر عامة (نصوص، أزرار، breadcrumb)
   §18 Scrollbar + Selection
   §19 Responsive (1024px / 768px / 480px)
   §20 بطاقات المنتجات — نمط Swamp Store
   ──────────────────────────────────────────────────────────────
================================================================ */


/* ================================================================
   §0  استيراد الخط + متغيرات التصميم
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

:root {
  /* ── الألوان الرئيسية ── */
  --gs-bg:              #0a0a0f;
  --gs-bg-card:         #12121a;
  --gs-bg-card-hover:   #16161f;
  --gs-primary:         #7c3aed;
  --gs-primary-light:   #9d5cf6;
  --gs-primary-glow:    rgba(124, 58, 237, 0.35);
  --gs-accent:          #00d4ff;
  --gs-accent-glow:     rgba(0, 212, 255, 0.25);
  --gs-gold:            #ffd700;
  --gs-gold-glow:       rgba(255, 215, 0, 0.3);
  --gs-hot:             #ff4d6d;
  --gs-hot-glow:        rgba(255, 77, 109, 0.3);
  --gs-green:           #00e676;
  --gs-green-glow:      rgba(0, 230, 118, 0.3);

  /* ── النصوص والحدود ── */
  --gs-text:            #f0f0ff;
  --gs-muted:           #8888aa;
  --gs-border:          rgba(124, 58, 237, 0.22);
  --gs-border-hover:    rgba(124, 58, 237, 0.6);

  /* ── الشكل العام ── */
  --gs-radius:          10px;
  --gs-radius-card:     16px;
  --gs-font:            'Tajawal', sans-serif;
  --gs-transition:      0.22s ease;
}


/* ================================================================
   §1  إعدادات عامة للصفحة
================================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background-color: var(--gs-bg)   !important;
  color:            var(--gs-text) !important;
  font-family:      var(--gs-font) !important;
  margin:           0              !important;
}

/* شبكة هندسية خفيفة في الخلفية */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* المحتوى الرئيسي فوق الشبكة */
main,
.main-content,
#main-content,
[class*="page-content"],
[class*="main-content"] {
  background: var(--gs-bg) !important;
  position: relative;
  z-index: 1;
}


/* ================================================================
   §2  إخفاء عناصر سلة الأصلية
================================================================ */

/* هيدر سلة الأصلي */
header.store-header {
  display: none !important;
}

/* فوتر سلة الأصلي */
footer.store-footer,
.store-footer {
  display: none !important;
}



/* ================================================================
   §2b  تجميل هيدر سلة الأصلي — نمط الألعاب الداكن
        (مطابق للصورة: شريط داكن + شعار في المنتصف + قائمة + أيقونات)
================================================================ */

/* ── الهيدر الكامل ── */
header.store-header {
  display:    block   !important;
  background: #0d0d0d !important;
  position:   sticky  !important;
  top:        0       !important;
  z-index:    9999    !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.8) !important;
  border-bottom: 1px solid rgba(124,58,237,0.2) !important;
  direction:  rtl     !important;
}

/* ── الشريط العلوي (بحث + أيقونات) ── */
header.store-header .top-navbar {
  background:    #0d0d0d !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  padding:       6px 0   !important;
}

header.store-header .top-navbar .container {
  max-width:       1280px !important;
  margin:          0 auto !important;
  padding:         0 24px !important;
  display:         flex   !important;
  align-items:     center !important;
  justify-content: space-between !important;
}

/* ── حقل البحث في الشريط العلوي ── */
header.store-header .header-search {
  flex: 1 !important;
  max-width: 420px !important;
}

header.store-header .s-search-input {
  background:    rgba(255,255,255,0.06) !important;
  border:        1px solid rgba(124,58,237,0.3) !important;
  color:         #f0f0ff !important;
  font-family:   var(--gs-font) !important;
  font-size:     13.5px !important;
  padding:       7px 16px !important;
  border-radius: 20px !important;
  width:         100% !important;
  outline:       none !important;
  transition:    border-color 0.2s ease, box-shadow 0.2s ease !important;
}

header.store-header .s-search-input:focus {
  border-color: #7c3aed !important;
  box-shadow:   0 0 0 3px rgba(124,58,237,0.2) !important;
}

header.store-header .s-search-input::placeholder {
  color: rgba(255,255,255,0.35) !important;
}

header.store-header .s-search-icon {
  fill:  rgba(255,255,255,0.4) !important;
  color: rgba(255,255,255,0.4) !important;
}

/* ── أزرار الهيدر العلوي (حساب، مفضلة، إلخ) ── */
header.store-header .header-buttons {
  display:     flex !important;
  align-items: center !important;
  gap:         4px !important;
}

header.store-header .header-btn__icon,
header.store-header .header-buttons a,
header.store-header .header-buttons button {
  color:      rgba(255,255,255,0.6) !important;
  background: transparent !important;
  transition: color 0.2s ease !important;
}

header.store-header .header-btn__icon:hover,
header.store-header .header-buttons a:hover {
  color: #fff !important;
}

/* ── salla-contacts (اللغة، العملة) ── */
salla-contacts .s-contacts-item,
salla-contacts span,
salla-contacts a {
  color:       rgba(255,255,255,0.55) !important;
  font-family: var(--gs-font) !important;
  font-size:   12.5px !important;
}

/* ── الشريط الرئيسي (شعار + قائمة) ── */
header.store-header .main-nav-container,
header.store-header #mainnav {
  background:    #0d0d0d !important;
  border-bottom: none !important;
  box-shadow:    none !important;
  padding:       0 !important;
  min-height:    64px !important;
}

header.store-header .main-nav-container .inner {
  background: transparent !important;
}

header.store-header .main-nav-container .container {
  max-width:   1280px !important;
  margin:      0 auto !important;
  padding:     0 24px !important;
}

/* ── الشعار ── */
header.store-header .navbar-brand {
  display:     flex !important;
  align-items: center !important;
  gap:         8px !important;
  text-decoration: none !important;
}

header.store-header .navbar-brand img {
  height:     44px !important;
  width:      auto !important;
  max-width:  160px !important;
  object-fit: contain !important;
  filter:     drop-shadow(0 0 8px rgba(124,58,237,0.4)) !important;
  transition: filter 0.2s ease !important;
}

header.store-header .navbar-brand:hover img {
  filter: drop-shadow(0 0 16px rgba(124,58,237,0.7)) !important;
}

/* ── القائمة الرئيسية ── */
header.store-header .main-menu,
header.store-header ul.main-menu {
  display:     flex !important;
  align-items: center !important;
  gap:         2px !important;
  list-style:  none !important;
  margin:      0 !important;
  padding:     0 !important;
  background:  transparent !important;
}

header.store-header .main-menu > li > a,
header.store-header .main-menu > li > span {
  color:           rgba(255,255,255,0.75) !important;
  font-family:     var(--gs-font) !important;
  font-weight:     600 !important;
  font-size:       14.5px !important;
  padding:         8px 14px !important;
  border-radius:   8px !important;
  text-decoration: none !important;
  display:         flex !important;
  align-items:     center !important;
  transition:      color 0.2s ease, background 0.2s ease !important;
  white-space:     nowrap !important;
}

header.store-header .main-menu > li > a:hover,
header.store-header .main-menu > li.active > a {
  color:      #fff !important;
  background: rgba(124,58,237,0.15) !important;
}

/* الرابط النشط */
header.store-header .main-menu > li.active > a {
  color:      #fff !important;
  background: rgba(124,58,237,0.18) !important;
  position:   relative !important;
}

header.store-header .main-menu > li.active > a::after {
  content:       '' !important;
  position:      absolute !important;
  bottom:        2px !important;
  left:          50% !important;
  transform:     translateX(-50%) !important;
  width:         20px !important;
  height:        2px !important;
  background:    #9d5cf6 !important;
  border-radius: 2px !important;
}

/* ── زر القائمة المتنقلة (موبايل) ── */
header.store-header .mburger {
  color: rgba(255,255,255,0.8) !important;
}

header.store-header .sicon-menu {
  color: rgba(255,255,255,0.8) !important;
}

/* ── زر المستخدم (حسابي) ── */
header.store-header .s-user-menu-login-btn,
header.store-header salla-user-menu button {
  background:    transparent !important;
  border:        none !important;
  color:         rgba(255,255,255,0.7) !important;
  cursor:        pointer !important;
  padding:       6px !important;
  border-radius: 8px !important;
  transition:    color 0.2s ease, background 0.2s ease !important;
}

header.store-header .s-user-menu-login-btn:hover,
header.store-header salla-user-menu button:hover {
  color:      #fff !important;
  background: rgba(124,58,237,0.15) !important;
}

header.store-header .s-user-menu-login-btn svg,
header.store-header salla-user-menu svg {
  fill: currentColor !important;
  width:  26px !important;
  height: 26px !important;
}

/* ── زر السلة ── */
header.store-header .s-cart-summary-wrapper,
header.store-header salla-cart-summary {
  display:     flex !important;
  align-items: center !important;
  gap:         6px !important;
  cursor:      pointer !important;
}

header.store-header .s-cart-summary-icon {
  color:      rgba(255,255,255,0.7) !important;
  transition: color 0.2s ease !important;
}

header.store-header .s-cart-summary-wrapper:hover .s-cart-summary-icon {
  color: #fff !important;
}

header.store-header .s-cart-summary-count {
  background:      #7c3aed !important;
  color:           #fff !important;
  font-family:     var(--gs-font) !important;
  font-size:       11px !important;
  font-weight:     900 !important;
  min-width:       20px !important;
  height:          20px !important;
  border-radius:   50% !important;
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  padding:         0 4px !important;
}

header.store-header .s-cart-summary-total {
  color:       rgba(255,255,255,0.6) !important;
  font-family: var(--gs-font) !important;
  font-size:   13px !important;
  font-weight: 600 !important;
}

/* ── القائمة المتنقلة (موبايل) ── */
header.store-header .mobile-menu {
  background:  #0d0d0d !important;
  border-left: 1px solid rgba(124,58,237,0.2) !important;
}

header.store-header .mobile-menu li a {
  color:       rgba(255,255,255,0.75) !important;
  font-family: var(--gs-font) !important;
  font-size:   15px !important;
  padding:     12px 20px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

header.store-header .mobile-menu li a:hover {
  color:      #fff !important;
  background: rgba(124,58,237,0.12) !important;
}


/* ================================================================
   §3  الهيدر — شريط الإعلانات
================================================================ */

.gs-header {
  position:    sticky;
  top:         0;
  z-index:     9999;
  font-family: var(--gs-font);
  direction:   rtl;
}

.gs-topbar {
  background:      linear-gradient(90deg, var(--gs-primary), #5b21b6, var(--gs-primary));
  background-size: 200% 100%;
  animation:       gs-slide-bg 6s linear infinite;
  text-align:      center;
  padding:         7px 16px;
  overflow:        hidden;
}

.gs-topbar__text {
  color:          #fff;
  font-family:    var(--gs-font);
  font-size:      13px;
  font-weight:    500;
  white-space:    nowrap;
  display:        inline-block;
  animation:      gs-marquee 22s linear infinite;
}

@keyframes gs-slide-bg {
  0%   { background-position: 0%   50%; }
  100% { background-position: 200% 50%; }
}

@keyframes gs-marquee {
  0%   { transform: translateX(30%);   }
  100% { transform: translateX(-100%); }
}


/* ================================================================
   §4  الهيدر — الشريط الرئيسي
================================================================ */

.gs-header__main {
  display:             flex;
  align-items:         center;
  justify-content:     space-between;
  gap:                 20px;
  padding:             0 32px;
  height:              68px;
  background:          rgba(10, 10, 15, 0.97);
  backdrop-filter:     blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom:       1px solid var(--gs-border);
  box-shadow:          0 2px 30px rgba(124, 58, 237, 0.1);
}


/* ================================================================
   §5  الهيدر — الشعار
================================================================ */

.gs-logo {
  display:         flex;
  align-items:     center;
  gap:             8px;
  text-decoration: none;
  flex-shrink:     0;
}

.gs-logo__icon {
  font-size:  26px;
  filter:     drop-shadow(0 0 8px var(--gs-primary-glow));
  transition: filter var(--gs-transition);
}

.gs-logo:hover .gs-logo__icon {
  filter: drop-shadow(0 0 16px var(--gs-primary-light));
}

.gs-logo__text {
  font-family:   var(--gs-font);
  font-weight:   900;
  font-size:     20px;
  color:         var(--gs-text);
  letter-spacing: 1px;
}

.gs-logo__accent {
  color: var(--gs-primary-light);
}


/* ================================================================
   §6  الهيدر — قائمة التنقل
================================================================ */

.gs-nav__list {
  display:     flex;
  align-items: center;
  gap:         4px;
  list-style:  none;
  margin:      0;
  padding:     0;
}

.gs-nav__link {
  display:        flex;
  align-items:    center;
  gap:            5px;
  color:          var(--gs-muted);
  text-decoration: none;
  font-family:    var(--gs-font);
  font-weight:    600;
  font-size:      14.5px;
  padding:        7px 14px;
  border-radius:  var(--gs-radius);
  transition:     color var(--gs-transition), background var(--gs-transition);
  position:       relative;
  white-space:    nowrap;
}

.gs-nav__link:hover,
.gs-nav__link--active {
  color:      var(--gs-text) !important;
  background: rgba(124, 58, 237, 0.12);
}

.gs-nav__link--active::after {
  content:          '';
  position:         absolute;
  bottom:           2px;
  left:             50%;
  transform:        translateX(-50%);
  width:            20px;
  height:           2px;
  background:       var(--gs-primary-light);
  border-radius:    2px;
}

.gs-nav__link--hot {
  color: var(--gs-hot) !important;
}

.gs-nav__link--hot:hover {
  background: rgba(255, 77, 109, 0.1) !important;
}

/* شارة "جديد" في القائمة */
.gs-nav__badge {
  background:    var(--gs-accent);
  color:         #000;
  font-size:     10px;
  font-weight:   700;
  padding:       2px 6px;
  border-radius: 20px;
  line-height:   1;
}


/* ================================================================
   §7  الهيدر — أدوات (بحث، أيقونات، سلة)
================================================================ */

.gs-header__tools {
  display:     flex;
  align-items: center;
  gap:         6px;
  flex-shrink: 0;
}

/* ── حقل البحث ── */
.gs-search {
  display:     flex;
  align-items: center;
  background:  rgba(255, 255, 255, 0.05);
  border:      1px solid var(--gs-border);
  border-radius: var(--gs-radius);
  overflow:    hidden;
  transition:  border-color var(--gs-transition), box-shadow var(--gs-transition);
}

.gs-search:focus-within {
  border-color: var(--gs-primary);
  box-shadow:   0 0 0 3px var(--gs-primary-glow);
}

.gs-search__input {
  background:  transparent;
  border:      none;
  outline:     none;
  color:       var(--gs-text);
  font-family: var(--gs-font);
  font-size:   13.5px;
  padding:     8px 14px;
  width:       180px;
  direction:   rtl;
}

.gs-search__input::placeholder { color: var(--gs-muted); }

.gs-search__btn {
  background:  transparent;
  border:      none;
  color:       var(--gs-muted);
  padding:     8px 12px;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  transition:  color var(--gs-transition);
}

.gs-search__btn:hover { color: var(--gs-accent); }

/* ── أزرار الأيقونات ── */
.gs-icon-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  border-radius:   var(--gs-radius);
  color:           var(--gs-muted);
  text-decoration: none;
  transition:      color var(--gs-transition), background var(--gs-transition);
}

.gs-icon-btn:hover {
  color:      var(--gs-text);
  background: rgba(124, 58, 237, 0.12);
}

/* ── زر السلة ── */
.gs-cart-btn {
  display:         flex;
  align-items:     center;
  gap:             6px;
  background:      linear-gradient(135deg, var(--gs-primary), var(--gs-primary-light));
  color:           #fff;
  text-decoration: none;
  border:          none;
  border-radius:   var(--gs-radius);
  padding:         8px 16px;
  font-family:     var(--gs-font);
  font-weight:     700;
  font-size:       13.5px;
  cursor:          pointer;
  box-shadow:      0 3px 14px var(--gs-primary-glow);
  transition:      transform var(--gs-transition), box-shadow var(--gs-transition);
}

.gs-cart-btn:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 22px var(--gs-primary-glow);
}

.gs-cart-btn__count {
  background:      var(--gs-accent);
  color:           #000;
  font-size:       11px;
  font-weight:     900;
  min-width:       20px;
  height:          20px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         0 4px;
}

/* ── زر القائمة (موبايل) ── */
.gs-menu-toggle {
  display:         none;
  flex-direction:  column;
  gap:             5px;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  padding:         6px;
}

.gs-menu-toggle span {
  display:       block;
  width:         22px;
  height:        2px;
  background:    var(--gs-text);
  border-radius: 2px;
  transition:    all var(--gs-transition);
}


/* ================================================================
   §8  الفوتر — الجزء العلوي (أعمدة)
================================================================ */

.gs-footer {
  background:  #0c0c14;
  border-top:  1px solid var(--gs-border);
  font-family: var(--gs-font);
  direction:   rtl;
  margin-top:  60px;
}

.gs-footer__top {
  display:               grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap:                   40px;
  padding:               52px 48px 40px;
  max-width:             1280px;
  margin:                0 auto;
}

/* ── شعار الفوتر ── */
.gs-footer__logo {
  display:         flex;
  align-items:     center;
  gap:             8px;
  text-decoration: none;
  margin-bottom:   14px;
}

.gs-footer__logo-icon {
  font-size: 28px;
  filter:    drop-shadow(0 0 8px var(--gs-primary-glow));
}

.gs-footer__logo-text {
  font-family:    var(--gs-font);
  font-weight:    900;
  font-size:      20px;
  color:          var(--gs-text);
  letter-spacing: 1px;
}

.gs-footer__logo-text span { color: var(--gs-primary-light); }

.gs-footer__desc {
  color:         var(--gs-muted);
  font-size:     14px;
  line-height:   1.8;
  margin-bottom: 20px;
}

/* ── عناوين الأعمدة ── */
.gs-footer__title {
  color:         var(--gs-text);
  font-family:   var(--gs-font);
  font-weight:   800;
  font-size:     15px;
  margin-bottom: 18px;
  position:      relative;
  padding-bottom: 10px;
}

.gs-footer__title::after {
  content:       '';
  position:      absolute;
  bottom:        0;
  right:         0;
  width:         32px;
  height:        2px;
  background:    linear-gradient(90deg, var(--gs-primary), var(--gs-accent));
  border-radius: 2px;
}

/* ── روابط الفوتر ── */
.gs-footer__links {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.gs-footer__links a {
  color:           var(--gs-muted);
  text-decoration: none;
  font-size:       14px;
  font-family:     var(--gs-font);
  transition:      color var(--gs-transition), padding-right var(--gs-transition);
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
}

.gs-footer__links a::before {
  content:     '›';
  color:       var(--gs-primary-light);
  font-size:   16px;
  opacity:     0;
  transition:  opacity var(--gs-transition);
}

.gs-footer__links a:hover              { color: var(--gs-text); padding-right: 4px; }
.gs-footer__links a:hover::before      { opacity: 1; }


/* ================================================================
   §9  الفوتر — وسائل التواصل الاجتماعي
================================================================ */

.gs-social {
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
}

.gs-social__link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           38px;
  height:          38px;
  background:      rgba(255, 255, 255, 0.05);
  border:          1px solid var(--gs-border);
  border-radius:   var(--gs-radius);
  color:           var(--gs-muted);
  text-decoration: none;
  transition:      all var(--gs-transition);
}

.gs-social__link:hover {
  background:  var(--gs-primary);
  border-color: var(--gs-primary);
  color:       #fff;
  box-shadow:  0 0 14px var(--gs-primary-glow);
  transform:   translateY(-2px);
}


/* ================================================================
   §10  الفوتر — النشرة البريدية + وسائل الدفع
================================================================ */

.gs-footer__newsletter-desc {
  color:         var(--gs-muted);
  font-size:     13.5px;
  line-height:   1.7;
  margin-bottom: 14px;
}

.gs-newsletter {
  display:       flex;
  border-radius: var(--gs-radius);
  overflow:      hidden;
  border:        1px solid var(--gs-border);
  transition:    border-color var(--gs-transition), box-shadow var(--gs-transition);
  margin-bottom: 22px;
}

.gs-newsletter:focus-within {
  border-color: var(--gs-primary);
  box-shadow:   0 0 0 3px var(--gs-primary-glow);
}

.gs-newsletter__input {
  flex:        1;
  background:  rgba(255, 255, 255, 0.04);
  border:      none;
  outline:     none;
  color:       var(--gs-text);
  font-family: var(--gs-font);
  font-size:   13.5px;
  padding:     11px 14px;
  direction:   rtl;
}

.gs-newsletter__input::placeholder { color: var(--gs-muted); }

.gs-newsletter__btn {
  background:  linear-gradient(135deg, var(--gs-primary), var(--gs-primary-light));
  color:       #fff;
  border:      none;
  padding:     11px 18px;
  font-family: var(--gs-font);
  font-weight: 700;
  font-size:   13.5px;
  cursor:      pointer;
  white-space: nowrap;
  transition:  background var(--gs-transition);
}

.gs-newsletter__btn:hover {
  background: linear-gradient(135deg, var(--gs-primary-light), #b07aff);
}

/* ── وسائل الدفع ── */
.gs-payment__label {
  color:         var(--gs-muted);
  font-size:     13px;
  font-family:   var(--gs-font);
  display:       block;
  margin-bottom: 10px;
}

.gs-payment__icons {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}

.gs-payment__icon {
  background:    rgba(255, 255, 255, 0.06);
  border:        1px solid var(--gs-border);
  border-radius: 6px;
  color:         var(--gs-muted);
  font-family:   var(--gs-font);
  font-size:     11px;
  font-weight:   700;
  padding:       5px 10px;
}


/* ================================================================
   §11  الفوتر — الجزء السفلي
================================================================ */

.gs-footer__divider {
  height:     1px;
  background: linear-gradient(90deg,
    transparent,
    var(--gs-border),
    var(--gs-primary-glow),
    var(--gs-border),
    transparent
  );
  max-width: 1280px;
  margin:    0 auto;
}

.gs-footer__bottom {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         18px 48px;
  max-width:       1280px;
  margin:          0 auto;
  flex-wrap:       wrap;
  gap:             12px;
}

.gs-footer__copy {
  color:       var(--gs-muted);
  font-family: var(--gs-font);
  font-size:   13.5px;
  margin:      0;
}

.gs-footer__bottom-links {
  display: flex;
  gap:     20px;
}

.gs-footer__bottom-links a {
  color:           var(--gs-muted);
  text-decoration: none;
  font-family:     var(--gs-font);
  font-size:       13px;
  transition:      color var(--gs-transition);
}

.gs-footer__bottom-links a:hover { color: var(--gs-accent); }


/* ================================================================
   §12  بطاقات المنتجات — البطاقة الأساسية
================================================================ */

custom-salla-product-card,
salla-product-card,
.s-product-card-entry {
  background:    var(--gs-bg-card)    !important;
  border:        1px solid var(--gs-border) !important;
  border-radius: var(--gs-radius-card) !important;
  overflow:      hidden               !important;
  position:      relative             !important;
  transition:
    transform      var(--gs-transition),
    border-color   var(--gs-transition),
    box-shadow     var(--gs-transition) !important;
  font-family:   var(--gs-font)       !important;
}

custom-salla-product-card:hover,
salla-product-card:hover,
.s-product-card-entry:hover {
  transform:    translateY(-6px)               !important;
  border-color: var(--gs-primary)              !important;
  box-shadow:
    0 0 0 1px var(--gs-primary),
    0 8px 32px var(--gs-primary-glow),
    0 0 60px rgba(124, 58, 237, 0.12)          !important;
}

/* خط نيون علوي عند التحويم */
custom-salla-product-card::before,
salla-product-card::before,
.s-product-card-entry::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gs-primary),
    var(--gs-accent),
    var(--gs-primary),
    transparent
  );
  opacity:    0;
  transition: opacity var(--gs-transition);
  z-index:    10;
}

custom-salla-product-card:hover::before,
salla-product-card:hover::before,
.s-product-card-entry:hover::before {
  opacity: 1;
}


/* ================================================================
   §13  بطاقات المنتجات — الصورة والبادجات
================================================================ */

.s-product-card-image {
  position: relative !important;
  overflow: hidden  !important;
  background: #0d0d16 !important;
}

.s-product-card-image img,
.s-product-card-image-contain {
  transition: transform 0.4s ease !important;
  width:      100%                !important;
  display:    block               !important;
}

custom-salla-product-card:hover .s-product-card-image img,
custom-salla-product-card:hover .s-product-card-image-contain,
salla-product-card:hover .s-product-card-image img {
  transform: scale(1.06) !important;
}

/* تدرج أسفل الصورة */
.s-product-card-image::after {
  content:         '';
  position:        absolute;
  bottom:          0;
  left:            0;
  right:           0;
  height:          60px;
  background:      linear-gradient(to top, var(--gs-bg-card), transparent);
  pointer-events:  none;
  z-index:         2;
}

/* ── بادج العرض الترويجي ── */
.s-product-card-promotion-title {
  position:      absolute          !important;
  top:           12px              !important;
  right:         12px              !important;
  left:          auto              !important;
  z-index:       20               !important;
  background:    linear-gradient(135deg, var(--gs-hot), #c9184a) !important;
  color:         #fff              !important;
  font-family:   var(--gs-font)   !important;
  font-size:     11.5px           !important;
  font-weight:   800              !important;
  padding:       5px 12px         !important;
  border-radius: 20px             !important;
  letter-spacing: 0.3px           !important;
  white-space:   nowrap           !important;
  box-shadow:
    0 0 12px var(--gs-hot-glow),
    0 2px 8px rgba(0, 0, 0, 0.4)  !important;
  animation:     gs-badge-pulse 2.5s ease-in-out infinite !important;
}

@keyframes gs-badge-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--gs-hot-glow), 0 2px 8px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 0 22px var(--gs-hot-glow), 0 2px 8px rgba(0,0,0,0.4); }
}

/* ── بادج "نفد المخزون" (تلقائي عبر CSS) ── */
.s-product-card-out-of-stock .s-product-card-image::before {
  content:        'نفد المخزون';
  position:       absolute;
  top:            12px;
  left:           12px;
  z-index:        20;
  background:     rgba(10, 10, 15, 0.85);
  border:         1px solid rgba(255, 255, 255, 0.15);
  color:          var(--gs-muted);
  font-family:    var(--gs-font);
  font-size:      11px;
  font-weight:    700;
  padding:        4px 10px;
  border-radius:  20px;
  backdrop-filter: blur(6px);
}

/* تعتيم صورة المنتج النافد */
.s-product-card-out-of-stock .s-product-card-image img,
.s-product-card-out-of-stock .s-product-card-image-contain {
  opacity: 0.55          !important;
  filter:  grayscale(30%) !important;
}

/* ── زر المفضلة ── */
.s-product-card-wishlist-btn {
  position:        absolute          !important;
  top:             12px              !important;
  left:            12px              !important;
  z-index:         20               !important;
  width:           34px             !important;
  height:          34px             !important;
  border-radius:   50%              !important;
  background:      rgba(10, 10, 15, 0.75) !important;
  border:          1px solid var(--gs-border) !important;
  backdrop-filter: blur(8px)        !important;
  display:         flex             !important;
  align-items:     center           !important;
  justify-content: center           !important;
  transition:      all var(--gs-transition) !important;
  opacity:         0                !important;
}

custom-salla-product-card:hover .s-product-card-wishlist-btn,
salla-product-card:hover .s-product-card-wishlist-btn {
  opacity: 1 !important;
}

.s-product-card-wishlist-btn:hover,
.s-product-card-wishlist-btn.is-favorited {
  background:  rgba(255, 77, 109, 0.2) !important;
  border-color: var(--gs-hot)          !important;
  box-shadow:  0 0 12px var(--gs-hot-glow) !important;
}

.s-product-card-wishlist-btn .sicon-heart,
.s-product-card-wishlist-btn i {
  color:      var(--gs-muted) !important;
  font-size:  15px            !important;
  transition: color var(--gs-transition) !important;
}

.s-product-card-wishlist-btn:hover .sicon-heart,
.s-product-card-wishlist-btn.is-favorited .sicon-heart {
  color: var(--gs-hot) !important;
}


/* ================================================================
   §14  بطاقات المنتجات — المحتوى والسعر
================================================================ */

.s-product-card-content {
  padding:    14px 14px 12px !important;
  background: var(--gs-bg-card) !important;
}

.s-product-card-content-main {
  margin-bottom: 10px !important;
}

/* اسم المنتج */
.s-product-card-content-title {
  font-family:           var(--gs-font) !important;
  font-weight:           700            !important;
  font-size:             14px           !important;
  color:                 var(--gs-text) !important;
  line-height:           1.5            !important;
  margin:                0 0 4px        !important;
  display:               -webkit-box   !important;
  -webkit-line-clamp:    2             !important;
  -webkit-box-orient:    vertical      !important;
  overflow:              hidden         !important;
  transition:            color var(--gs-transition) !important;
}

custom-salla-product-card:hover .s-product-card-content-title {
  color: #fff !important;
}

/* الوصف المختصر */
.s-product-card-content-subtitle {
  font-family:        var(--gs-font) !important;
  font-size:          12.5px         !important;
  color:              var(--gs-muted) !important;
  line-height:        1.5            !important;
  display:            -webkit-box   !important;
  -webkit-line-clamp: 1             !important;
  -webkit-box-orient: vertical      !important;
  overflow:           hidden         !important;
}

/* ── السعر ── */
.s-product-card-price,
.s-product-card-content-sub h4,
.price-wrapper,
.starting-or-normal-price {
  font-family:  var(--gs-font) !important;
  font-weight:  900            !important;
  font-size:    18px           !important;
  color:        var(--gs-gold) !important;
  text-shadow:  0 0 12px var(--gs-gold-glow) !important;
  direction:    ltr            !important;
  display:      flex           !important;
  align-items:  center         !important;
  gap:          3px            !important;
}

.s-product-card-price .sicon-sar,
.price-wrapper .sicon-sar {
  font-size: 13px           !important;
  color:     var(--gs-gold) !important;
  opacity:   0.8            !important;
}

/* السعر قبل الخصم */
.before-price {
  font-size:       13px           !important;
  color:           var(--gs-muted) !important;
  text-decoration: line-through   !important;
  text-shadow:     none           !important;
  font-weight:     500            !important;
}

/* السعر بعد الخصم */
.total-price,
.price_is_on_sale .total-price {
  color:       var(--gs-hot)      !important;
  text-shadow: 0 0 12px var(--gs-hot-glow) !important;
}


/* ================================================================
   §15  بطاقات المنتجات — الأزرار
================================================================ */

.s-product-card-content-footer {
  margin-top:    12px              !important;
  padding-top:   12px              !important;
  border-top:    1px solid var(--gs-border) !important;
}

.s-product-card-content-footer .s-button-element,
.s-product-card-content-footer button {
  font-family:   var(--gs-font) !important;
  font-weight:   700            !important;
  font-size:     13px           !important;
  border-radius: var(--gs-radius) !important;
  padding:       9px 16px       !important;
  width:         100%           !important;
  transition:    all var(--gs-transition) !important;
  cursor:        pointer        !important;
}

/* زر فعّال */
.s-product-card-content-footer .s-button-element:not(.s-button-disabled):not([disabled]) {
  background: linear-gradient(135deg, var(--gs-primary), var(--gs-primary-light)) !important;
  color:      #fff                          !important;
  border:     none                          !important;
  box-shadow: 0 4px 16px var(--gs-primary-glow) !important;
}

.s-product-card-content-footer .s-button-element:not(.s-button-disabled):not([disabled]):hover {
  transform:  translateY(-2px)              !important;
  box-shadow: 0 8px 24px var(--gs-primary-glow) !important;
}

/* زر معطل / نفد المخزون */
.s-button-disabled,
.s-button-element[disabled],
.s-product-card-out-of-stock .s-button-element {
  background: rgba(255, 255, 255, 0.05) !important;
  color:      var(--gs-muted)           !important;
  border:     1px solid var(--gs-border) !important;
  box-shadow: none                       !important;
  cursor:     not-allowed               !important;
  opacity:    0.7                        !important;
}

/* ── شبكة عرض المنتجات ── */
.s-products-grid,
.products-grid,
[class*="products-list"],
[class*="products-grid"] {
  display:               grid                                    !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))  !important;
  gap:                   20px                                    !important;
  padding:               20px 0                                  !important;
}


/* ================================================================
   §16  صفحة المنتج الفردي
================================================================ */

/* صورة المنتج */
.product-page .s-product-card-image img,
.product-gallery img,
[class*="product-image"] img {
  border-radius: var(--gs-radius-card) !important;
  border:        1px solid var(--gs-border) !important;
}

/* اسم المنتج */
.product-page h1,
[class*="product-name"],
[class*="product-title"] {
  font-family: var(--gs-font) !important;
  font-weight: 900            !important;
  color:       var(--gs-text) !important;
}

/* السعر في صفحة المنتج */
.product-page .price-wrapper,
.product-page [class*="price"] {
  font-family: var(--gs-font) !important;
  font-weight: 900            !important;
  font-size:   26px           !important;
  color:       var(--gs-gold) !important;
  text-shadow: 0 0 16px var(--gs-gold-glow) !important;
}

/* زر الشراء */
.product-page .s-button-element,
[class*="add-to-cart"],
[class*="buy-now"] {
  background:    linear-gradient(135deg, var(--gs-primary), var(--gs-primary-light)) !important;
  color:         #fff              !important;
  border:        none              !important;
  border-radius: var(--gs-radius)  !important;
  font-family:   var(--gs-font)   !important;
  font-weight:   800              !important;
  font-size:     15px             !important;
  padding:       14px 28px        !important;
  box-shadow:    0 6px 20px var(--gs-primary-glow) !important;
  transition:    all var(--gs-transition) !important;
}

.product-page .s-button-element:hover {
  transform:  translateY(-3px)              !important;
  box-shadow: 0 12px 32px var(--gs-primary-glow) !important;
}

/* عداد المبيعات */
[class*="sold-count"],
[class*="purchase-count"],
[class*="bought"] {
  display:      inline-flex                      !important;
  align-items:  center                           !important;
  gap:          5px                              !important;
  background:   rgba(0, 230, 118, 0.1)          !important;
  border:       1px solid rgba(0, 230, 118, 0.25) !important;
  color:        var(--gs-green)                  !important;
  font-family:  var(--gs-font)                  !important;
  font-size:    12px                             !important;
  font-weight:  700                              !important;
  padding:      4px 10px                         !important;
  border-radius: 20px                            !important;
}


/* ================================================================
   §17  عناصر عامة
================================================================ */

/* ── العناوين ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--gs-font) !important;
  color:       var(--gs-text) !important;
}

/* ── النصوص ── */
p, span, a, li, td, th {
  font-family: var(--gs-font) !important;
}

/* ── الأزرار العامة ── */
.btn,
button[type="submit"],
[class*="btn-primary"],
[class*="button--primary"],
.s-btn-primary {
  background:    linear-gradient(135deg, var(--gs-primary), var(--gs-primary-light)) !important;
  color:         #fff              !important;
  border:        none              !important;
  border-radius: var(--gs-radius)  !important;
  font-family:   var(--gs-font)   !important;
  font-weight:   700              !important;
  box-shadow:    0 4px 15px var(--gs-primary-glow) !important;
  transition:    transform var(--gs-transition), box-shadow var(--gs-transition) !important;
}

.btn:hover,
button[type="submit"]:hover {
  transform:  translateY(-2px)              !important;
  box-shadow: 0 8px 25px var(--gs-primary-glow) !important;
}

/* ── التقييمات ── */
salla-rating-stars,
[class*="rating"],
[class*="stars"] {
  color: var(--gs-gold) !important;
}

/* ── مسار التنقل (Breadcrumb) ── */
[class*="breadcrumb"] a,
.breadcrumb a {
  color:           var(--gs-muted) !important;
  font-family:     var(--gs-font)  !important;
  font-size:       13px            !important;
  text-decoration: none            !important;
  transition:      color var(--gs-transition) !important;
}

[class*="breadcrumb"] a:hover { color: var(--gs-accent) !important; }


/* ================================================================
   §18  Scrollbar + Selection
================================================================ */

::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: var(--gs-bg); }
::-webkit-scrollbar-thumb   { background: var(--gs-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gs-primary-light); }

::selection { background: var(--gs-primary) !important; color: #fff !important; }


/* ================================================================
   §19  Responsive
================================================================ */

/* ── 1024px ── */
@media (max-width: 1024px) {
  .gs-search__input { width: 140px; }

  .gs-footer__top {
    grid-template-columns: 1fr 1fr;
    gap:     32px;
    padding: 40px 28px 32px;
  }
}

/* ── 768px ── */
@media (max-width: 768px) {

  /* هيدر */
  .gs-header__main { padding: 0 16px; height: 60px; }

  .gs-nav {
    position:         fixed;
    top:              60px;
    right:            0;
    width:            260px;
    height:           calc(100vh - 60px);
    background:       rgba(10, 10, 15, 0.98);
    backdrop-filter:  blur(20px);
    border-left:      1px solid var(--gs-border);
    transform:        translateX(100%);
    transition:       transform 0.3s ease;
    z-index:          9998;
    padding:          20px 0;
    overflow-y:       auto;
  }

  .gs-nav--open { transform: translateX(0); }

  .gs-nav__list {
    flex-direction: column;
    align-items:    flex-start;
    gap:            2px;
    padding:        0 12px;
  }

  .gs-nav__link  { width: 100%; padding: 12px 16px; font-size: 15px; }
  .gs-search     { display: none; }
  .gs-menu-toggle { display: flex; }

  /* فوتر */
  .gs-footer__top {
    grid-template-columns: 1fr;
    gap:     28px;
    padding: 32px 20px 24px;
  }

  .gs-footer__bottom {
    padding:        16px 20px;
    flex-direction: column;
    text-align:     center;
  }

  /* شبكة المنتجات */
  .s-products-grid,
  .products-grid,
  [class*="products-list"],
  [class*="products-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .s-product-card-content-title { font-size: 13px !important; }
  .s-product-card-price,
  .price-wrapper                { font-size: 16px !important; }
}

/* ── 480px ── */
@media (max-width: 480px) {
  .gs-logo__text  { font-size: 17px; }
  .gs-cart-btn    { padding: 7px 12px; font-size: 12.5px; }

  .s-products-grid,
  [class*="products-grid"] {
    grid-template-columns: 1fr !important;
  }
}




/* ================================================================
   §20  تصميم بطاقات المنتجات — نمط Swamp Store
        (خلفية داكنة + بادج أحمر + تقييم داخل الصورة + فئة ملونة)
================================================================ */

/* ── إعادة تعيين البطاقة بالكامل بنمط swamp ── */
custom-salla-product-card,
.s-product-card-entry {
  background:    #111111              !important;
  border:        1.5px solid #222222  !important;
  border-radius: 18px                 !important;
  overflow:      hidden               !important;
  position:      relative             !important;
  transition:
    transform      0.25s ease,
    border-color   0.25s ease,
    box-shadow     0.25s ease         !important;
  font-family:   var(--gs-font)       !important;
  box-shadow:    0 4px 20px rgba(0,0,0,0.6) !important;
}

custom-salla-product-card:hover,
.s-product-card-entry:hover {
  transform:    translateY(-5px)                          !important;
  border-color: var(--gs-primary)                         !important;
  box-shadow:
    0 0 0 1.5px var(--gs-primary),
    0 10px 36px rgba(124, 58, 237, 0.25)                  !important;
}

/* ── منطقة الصورة ── */
.s-product-card-image {
  position:   relative   !important;
  overflow:   hidden     !important;
  background: #0a0a0a    !important;
  aspect-ratio: 9/9      !important;
  display:    flex       !important;
  align-items: center    !important;
  justify-content: center !important;
}

.s-product-card-image img,
.s-product-card-image-cover {
  width:       100%      !important;
  height:      100%      !important;
  object-fit:  cover     !important;
  transition:  transform 0.4s ease !important;
  display:     block     !important;
}

custom-salla-product-card:hover .s-product-card-image img,
custom-salla-product-card:hover .s-product-card-image-cover {
  transform: scale(1.05) !important;
}

/* ── بادج الترويج (نسخه Deluxe / اوفلاين / إلخ) ── */
.s-product-card-promotion-title {
  position:      absolute  !important;
  top:           10px      !important;
  right:         10px      !important;
  left:          auto      !important;
  z-index:       30        !important;
  color:         #fff      !important;
  font-family:   var(--gs-font) !important;
  font-size:     11px      !important;
  font-weight:   800       !important;
  padding:       4px 10px  !important;
  border-radius: 6px       !important;
  letter-spacing: 0.2px    !important;
  white-space:   nowrap    !important;
  /* اللون يأتي من inline style في سلة — نحتفظ به */
  /* لكن نضيف fallback أحمر إذا لم يكن محدداً */
  background:    #ad0000   !important;
  box-shadow:    0 2px 10px rgba(173,0,0,0.5) !important;
}

/* ── تقييم النجوم داخل الصورة ── */
.s-product-card-rating {
  position:      absolute    !important;
  bottom:        10px        !important;
  right:         10px        !important;
  left:          auto        !important;
  z-index:       20          !important;
  display:       flex        !important;
  align-items:   center      !important;
  gap:           4px         !important;
  background:    rgba(0,0,0,0.65) !important;
  border-radius: 20px        !important;
  padding:       3px 9px     !important;
  backdrop-filter: blur(4px) !important;
  font-family:   var(--gs-font) !important;
  font-size:     12px        !important;
  font-weight:   700         !important;
  color:         #fff        !important;
}

.s-product-card-rating .sicon-star2,
.s-product-card-rating i {
  color:     #ffd700  !important;
  font-size: 12px     !important;
}

.s-product-card-rating span {
  color:     #fff     !important;
  font-size: 12px     !important;
  font-weight: 700    !important;
}

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

/* ── شارة الفئة (pc / اونلاين / العاب مشتركه) ── */
.s-product-card-category,
.s-product-card-props .s-product-card-category {
  display:       inline-flex  !important;
  align-items:   center       !important;
  background:    #1a3a1a      !important;
  color:         #4ade80      !important;
  border:        1px solid #2d6a2d !important;
  border-radius: 6px          !important;
  font-family:   var(--gs-font) !important;
  font-size:     11px         !important;
  font-weight:   700          !important;
  padding:       3px 10px     !important;
  letter-spacing: 0.3px       !important;
  width:         fit-content  !important;
  margin-bottom: 2px          !important;
}

/* ── اسم المنتج ── */
.s-product-card-content-title,
.s-product-card-content-title a {
  font-family:        var(--gs-font) !important;
  font-weight:        700            !important;
  font-size:          13.5px         !important;
  color:              #e0e0e0        !important;
  line-height:        1.5            !important;
  margin:             0              !important;
  display:            -webkit-box   !important;
  -webkit-line-clamp: 2             !important;
  -webkit-box-orient: vertical      !important;
  overflow:           hidden         !important;
  text-decoration:    none           !important;
  transition:         color 0.2s ease !important;
}

custom-salla-product-card:hover .s-product-card-content-title,
custom-salla-product-card:hover .s-product-card-content-title a {
  color: #ffffff !important;
}

/* ── الوصف المختصر (لعب فوري / ديلوكس / إلخ) ── */
.s-product-card-content-subtitle,
.s-product-card-subtitle {
  font-family:        var(--gs-font) !important;
  font-size:          11.5px         !important;
  color:              #888888        !important;
  line-height:        1.4            !important;
  display:            -webkit-box   !important;
  -webkit-line-clamp: 1             !important;
  -webkit-box-orient: vertical      !important;
  overflow:           hidden         !important;
  margin:             0              !important;
}

/* ── السعر ── */
.s-product-card-price,
.s-product-card-content-sub h4 {
  font-family:  var(--gs-font) !important;
  font-weight:  900            !important;
  font-size:    17px           !important;
  color:        #ffffff        !important;
  text-shadow:  none           !important;
  direction:    ltr            !important;
  display:      flex           !important;
  align-items:  center         !important;
  gap:          3px            !important;
  margin:       0              !important;
}

.s-product-card-price .sicon-sar,
.s-product-card-content-sub h4 .sicon-sar {
  font-size: 12px    !important;
  color:     #aaaaaa !important;
  opacity:   1       !important;
}

/* ── زر أضف للسلة ── */
.s-product-card-content-footer {
  margin-top:  10px  !important;
  padding-top: 0     !important;
  border-top:  none  !important;
}

.s-product-card-content-footer .s-button-element,
.s-product-card-content-footer button {
  font-family:   var(--gs-font) !important;
  font-weight:   700            !important;
  font-size:     13px           !important;
  border-radius: 10px           !important;
  padding:       9px 14px       !important;
  width:         100%           !important;
  transition:    all 0.22s ease !important;
  cursor:        pointer        !important;
}

/* زر فعّال — أخضر داكن مثل swamp */
.s-product-card-content-footer .s-button-element:not(.s-button-disabled):not([disabled]) {
  background:  #1a3a1a                         !important;
  color:       #4ade80                         !important;
  border:      1.5px solid #2d6a2d             !important;
  box-shadow:  0 2px 12px rgba(74,222,128,0.15) !important;
}

.s-product-card-content-footer .s-button-element:not(.s-button-disabled):not([disabled]):hover {
  background:  #1f4a1f                         !important;
  border-color: #4ade80                        !important;
  box-shadow:  0 4px 20px rgba(74,222,128,0.3) !important;
  transform:   translateY(-1px)                !important;
}

/* أيقونة السلة في الزر */
.s-product-card-content-footer .s-button-element .sicon-cart,
.s-product-card-content-footer button .sicon-cart {
  color:     #4ade80 !important;
  font-size: 14px    !important;
}

/* زر معطل / نفد المخزون */
.s-button-disabled,
.s-button-element[disabled] {
  background:  rgba(255,255,255,0.04) !important;
  color:       #555555                !important;
  border:      1px solid #333333      !important;
  box-shadow:  none                   !important;
  cursor:      not-allowed            !important;
  opacity:     0.7                    !important;
}

/* ── زر المفضلة ── */
.s-product-card-wishlist,
.s-product-card-fixed-btn.btn--wishlist {
  position:        absolute                !important;
  top:             10px                    !important;
  left:            10px                    !important;
  z-index:         30                      !important;
  width:           32px                    !important;
  height:          32px                    !important;
  border-radius:   50%                     !important;
  background:      rgba(0,0,0,0.7)         !important;
  border:          1px solid #333333       !important;
  backdrop-filter: blur(6px)               !important;
  display:         flex                    !important;
  align-items:     center                  !important;
  justify-content: center                  !important;
  transition:      all 0.22s ease          !important;
  opacity:         0                       !important;
}

custom-salla-product-card:hover .s-product-card-wishlist,
custom-salla-product-card:hover .btn--wishlist {
  opacity: 1 !important;
}

.s-product-card-wishlist:hover,
.s-product-card-wishlist.is-favorited {
  background:   rgba(255,77,109,0.2) !important;
  border-color: #ff4d6d              !important;
}

.s-product-card-wishlist .sicon-heart,
.btn--wishlist .sicon-heart {
  color:     #888888 !important;
  font-size: 14px    !important;
  transition: color 0.2s ease !important;
}

.s-product-card-wishlist:hover .sicon-heart,
.s-product-card-wishlist.is-favorited .sicon-heart {
  color: #ff4d6d !important;
}

/* ── زر المعاينة السريعة ── */
.angel-quick-view-button,
.s-product-card-quick-view-btn {
  position:        absolute                !important;
  top:             10px                    !important;
  left:            50px                    !important;
  z-index:         30                      !important;
  width:           32px                    !important;
  height:          32px                    !important;
  border-radius:   50%                     !important;
  background:      rgba(0,0,0,0.7)         !important;
  border:          1px solid #333333       !important;
  backdrop-filter: blur(6px)               !important;
  display:         flex                    !important;
  align-items:     center                  !important;
  justify-content: center                  !important;
  transition:      all 0.22s ease          !important;
  opacity:         0                       !important;
}

custom-salla-product-card:hover .angel-quick-view-button,
custom-salla-product-card:hover .s-product-card-quick-view-btn {
  opacity: 1 !important;
}

.angel-quick-view-button:hover {
  background:   rgba(124,58,237,0.3) !important;
  border-color: var(--gs-primary)    !important;
}

.angel-quick-view-button .sicon-eye {
  color:     #aaaaaa !important;
  font-size: 14px    !important;
}

/* ── شبكة عرض المنتجات ── */
.s-products-grid,
.products-grid,
[class*="products-list"],
[class*="products-grid"] {
  display:               grid                                   !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap:                   16px                                   !important;
  padding:               20px 0                                 !important;
}

/* ── Responsive للبطاقات ── */
@media (max-width: 768px) {
  .s-products-grid,
  [class*="products-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .s-products-grid,
  [class*="products-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .s-product-card-content-title { font-size: 12px !important; }
  .s-product-card-price          { font-size: 15px !important; }
}


/* ================================================================
   نهاية الملف — GAMING STORE COMPLETE STYLESHEET v2.0
================================================================ */