@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

/* ============================================================
   KAIF VAPE — Elevated Ambiance  |  الإصدار 2 (مُصحَّح)
   قالب: رائد  |  نسخة الثيم: KAIF VAPE (376683829)
   ------------------------------------------------------------
   الفرق عن الإصدار 1:
   حُذفت كل القواعد التي تتحكم بالتخطيط، لأنها هي التي كسرت
   قسم «الأكثر مبيعا» (صور خارج البطاقة، نصوص مقصوصة، تمرير أفقي):
     × grid-template-columns المفروضة على شبكات المنتجات
     × aspect-ratio + width:100% على صور البطاقات
     × overflow:hidden + min-height على البطاقة والعناوين
     × كتلة all:revert-layer
   المبدأ الآن: رائد يتكفّل بالتخطيط والأبعاد، وهذا الملف
   يتكفّل باللون والخط والزاوية والظل فقط.
   ============================================================ */

/* ---------- 1. متغيرات النظام ---------- */
:root {
  --kv-bg:            #15121B;
  --kv-bg-2:          #1D1A24;
  --kv-bg-3:          #221E28;
  --kv-purple:        #7C3AED;
  --kv-purple-soft:   #D2BBFF;
  --kv-white:         #FFFFFF;

  --kv-text-on-dark:  #E8DFEE;
  --kv-text-muted:    #CCC3D8;
  --kv-text-dark:     #241B2D;
  --kv-text-dark-2:   #6F6478;

  --kv-radius-card:   20px;
  --kv-radius-img:    12px;
  --kv-radius-btn:    14px;

  --kv-shadow:        0 4px 20px rgba(33, 23, 43, .06);
  --kv-shadow-hover:  0 12px 32px rgba(33, 23, 43, .16);
  --kv-border:        1px solid rgba(124, 58, 237, .16);

  --kv-font: 'IBM Plex Sans Arabic', 'PingARLT', Tahoma, sans-serif;
}

/* ---------- 2. الأساس ---------- */
body { font-family: var(--kv-font); }
body * { font-family: var(--kv-font); }

body {
  background: linear-gradient(180deg, var(--kv-bg) 0%, var(--kv-bg-2) 45%, var(--kv-bg) 100%);
  background-attachment: fixed;
  color: var(--kv-text-on-dark);
}

/* حارس ضد التمرير الأفقي — يقيّد الصور دون فرض أبعاد عليها */
img { max-width: 100%; }

/* ---------- 3. الهيدر والقائمة الرئيسية ---------- */
.store-header,
#mainnav,
.main-nav {
  background: var(--kv-bg) !important;
  border-bottom: var(--kv-border);
}

.store-header a,
#mainnav a,
.main-menu a { color: var(--kv-text-on-dark) !important; }

.store-header a:hover,
#mainnav a:hover,
.main-menu a:hover { color: var(--kv-purple-soft) !important; }

/* شريط البحث */
.store-header input[type="text"],
.store-header input[type="search"],
.s-search-input {
  background: var(--kv-bg-3) !important;
  border: var(--kv-border) !important;
  color: var(--kv-text-on-dark) !important;
  border-radius: 12px !important;
}

.store-header input::placeholder,
.s-search-input::placeholder { color: #958DA1 !important; }

.store-header input:focus,
.s-search-input:focus {
  border-color: var(--kv-purple) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .25) !important;
}

/* أيقونات السلة والحساب */
.store-header svg,
.store-header i { color: var(--kv-purple-soft) !important; }

/* ---------- 4. عناوين الأقسام ---------- */
.s-block__title,
.s-block__title h2,
.s-block h2 {
  color: var(--kv-white) !important;
  font-weight: 700;
}

.s-block__title a { color: var(--kv-purple-soft) !important; }

/* ---------- 5. روابط التصنيفات السريعة ---------- */
.s-block--main-links a,
.main-links a {
  background: var(--kv-bg-3) !important;
  border: var(--kv-border);
  border-radius: 16px !important;
  color: var(--kv-text-on-dark) !important;
  transition: transform .25s ease, border-color .25s ease;
}

.s-block--main-links a:hover,
.main-links a:hover {
  transform: translateY(-4px);
  border-color: rgba(210, 187, 255, .55) !important;
}

.s-block--main-links svg,
.s-block--main-links i { color: var(--kv-purple-soft) !important; }

/* ---------- 6. بطاقات المنتجات (لون وزاوية وظل فقط) ---------- */
.s-product-card-entry {
  background: var(--kv-white) !important;
  border-radius: var(--kv-radius-card) !important;
  border: none !important;
  box-shadow: var(--kv-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

.s-product-card-entry:hover {
  transform: translateY(-4px);
  box-shadow: var(--kv-shadow-hover);
}

.s-product-card-image img { border-radius: var(--kv-radius-img) !important; }

/* نص داكن وواضح على السطح الأبيض */
.s-product-card-content-title,
.s-product-card-content-title a {
  color: var(--kv-text-dark) !important;
  font-weight: 700 !important;
}

.s-product-card-content-subtitle { color: var(--kv-text-dark-2) !important; }

/* السعر */
.s-product-card-price h4,
.s-product-card-price {
  color: var(--kv-purple) !important;
  font-weight: 700 !important;
}

.s-product-card-sale-price,
.s-product-card-entry del { color: #9B93A5 !important; font-weight: 400 !important; }

/* الشارات */
.s-product-card-promotion-title {
  background: #EDE0FF !important;
  color: #5A00C6 !important;
  border-radius: 8px !important;
  font-weight: 600;
}

/* ---------- 7. زر الإضافة للسلة ----------
   مقيّد بالبطاقات وأقسام الصفحة فقط، حتى لا يمس الدفع أو السلة. */
.s-block .s-button-primary,
.s-product-card-entry .s-button-element,
salla-add-product-button .s-button-element {
  background: var(--kv-purple) !important;
  border-color: var(--kv-purple) !important;
  color: var(--kv-white) !important;
  border-radius: var(--kv-radius-btn) !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .28);
  transition: background .2s ease;
}

.s-block .s-button-primary:hover,
.s-product-card-entry .s-button-element:hover,
salla-add-product-button .s-button-element:hover {
  background: #6D28D9 !important;
}

/* ---------- 8. مميزات المتجر ---------- */
.s-block--store-features h3 { color: var(--kv-text-dark) !important; }
.s-block--store-features p  { color: var(--kv-text-dark-2) !important; }

/* ---------- 9. الفوتر ---------- */
.store-footer {
  background: linear-gradient(180deg, var(--kv-bg-2) 0%, var(--kv-bg) 100%) !important;
  border-top: var(--kv-border);
  color: var(--kv-text-muted) !important;
}

.store-footer h3,
.store-footer .title { color: var(--kv-white) !important; }
.store-footer a { color: var(--kv-text-muted) !important; }
.store-footer a:hover { color: var(--kv-purple-soft) !important; }

/* ---------- 10. صفحات التصنيف والبحث والمنتج ---------- */
.s-breadcrumbs,
.s-breadcrumbs a { color: var(--kv-text-muted) !important; }

/* الفلاتر الجانبية */
.s-filters, .filters-sidebar {
  background: var(--kv-bg-3) !important;
  border: var(--kv-border);
  border-radius: 18px !important;
  color: var(--kv-text-on-dark) !important;
}

/* صفحة المنتج — سطح أبيض ليبرز عن الخلفية.
   لا نلمس خيارات المنتج ولا الكمية ولا زر الشراء. */
.s-product-details-wrapper {
  background: var(--kv-white) !important;
  border-radius: var(--kv-radius-card) !important;
  box-shadow: var(--kv-shadow);
}

.s-product-details-wrapper h1 { color: var(--kv-text-dark) !important; }
.s-product-details-wrapper p  { color: var(--kv-text-dark-2) !important; }

/* ---------- 11. تباعد مريح ---------- */
.s-block { margin-bottom: 56px; }

@media (max-width: 639px) {
  .s-block { margin-bottom: 36px; }
}

/* ---------- 12. لمسة أخيرة ---------- */
::selection { background: rgba(124, 58, 237, .35); color: #fff; }

/* ============================================================
   KAIF VAPE - Page Background (Lavender)
   خلفية الصفحة بنفسجي فاتح + تصحيح تباين النصوص
   ============================================================ */

:root { --kv-page-bg: #E3C5FF; }

/* .app-inner هو الغلاف الفعلي في ثيم رائد (.main-content غير موجود) */
body,
body .app-inner { background-color: var(--kv-page-bg) !important; }

/* عناوين الأقسام كانت بيضاء لأنها مصمّمة لخلفية داكنة */
body .s-block h2,
body .s-block__title h2,
body .s-slider-block__title h2 { color: var(--kv-text-dark) !important; }

body .s-block__title a,
body .s-block__display-all,
body .s-block__display-all i,
body .s-slider-block__display-all { color: #5B21B6 !important; }

/* مميزات المتجر ومسار التنقل */
body .s-block--store-features h3 { color: var(--kv-text-dark) !important; }
body .s-block--store-features p  { color: var(--kv-text-dark-2) !important; }

body .s-breadcrumbs,
body .s-breadcrumbs a,
body .s-breadcrumbs span { color: var(--kv-text-dark) !important; }