/* ==========================================================
   وطن | Watan — Salla CSS v2 (الملف الأساسي)
   الصق هذا الملف وحده في: تصميم المتجر > CSS
   يغيّر الشكل فقط: شريط متحرك، ألوان، بطاقات، عناوين، أزرار.
   لا يلمس الأسعار ولا ألوان التخفيض إطلاقًا.
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap");

:root {
  --w-base: #171d1a;        /* خلفية الصفحة: أسود زيتوني */
  --w-surface: #1f2824;     /* البطاقات */
  --w-bar: #26332d;         /* الشريط العلوي */
  --w-gold: #d0a200;
  --w-gold-soft: #e6c24a;
  --w-cream: #f6f0e0;
  --w-muted: #b9b19a;
  --w-line: rgba(208, 162, 0, 0.28);
  --w-radius: 6px;
}

/* ---------- شريط الإعلانات المتحرك (أعلى الصفحة) ----------
   لتغيير الكلام: عدّل النص بين علامتي التنصيص فقط */
body::before {
  content: "شحن مجاني عند الشراء بـ 500 ريال     ✦     اشترِ عطرين واحصل على الثالث مجانًا     ✦     شحن مجاني عند الشراء بـ 500 ريال     ✦     اشترِ عطرين واحصل على الثالث مجانًا     ✦     شحن مجاني عند الشراء بـ 500 ريال     ✦     اشترِ عطرين واحصل على الثالث مجانًا     ✦     شحن مجاني عند الشراء بـ 500 ريال     ✦     اشترِ عطرين واحصل على الثالث مجانًا     ✦     شحن مجاني عند الشراء بـ 500 ريال     ✦     اشترِ عطرين واحصل على الثالث مجانًا     ✦     شحن مجاني عند الشراء بـ 500 ريال     ✦     اشترِ عطرين واحصل على الثالث مجانًا     ✦     ";
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  line-height: 42px;
  overflow: hidden;
  white-space: nowrap;
  direction: rtl;
  background: var(--w-bar);
  color: var(--w-cream);
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid var(--w-gold);
  animation: w-marquee 14s linear infinite;
}
/* الكلام ممتلئ من أول لحظة، ثم يتحرك (لا يبدأ من خارج الشاشة) */
@keyframes w-marquee {
  from { text-indent: -1400px; }
  to   { text-indent: 0; }
}

/* ---------- الصفحة ---------- */
html,
body {
  background: var(--w-base) !important;
}

/* ---------- العناوين: خط تراثي + خط ذهبي تحتها ---------- */
h1,
h2,
.s-block__title h2,
.section-title {
  font-family: "Amiri", serif !important;
  letter-spacing: 0 !important;
}
.s-block__title h2,
.section-title,
section h2 {
  display: inline-block;
  font-size: 1.9rem !important;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--w-gold);
}

/* ---------- بطاقة المنتج ---------- */
.s-product-card-entry,
.s-product-card-vertical {
  background: var(--w-surface) !important;
  border: 1px solid var(--w-line) !important;
  border-radius: var(--w-radius) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.s-product-card-entry:hover,
.s-product-card-vertical:hover {
  transform: translateY(-4px);
  border-color: var(--w-gold) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4) !important;
}

.s-product-card-image img {
  object-fit: cover !important;
}

/* محتوى البطاقة في المنتصف: الاسم ثم السطر الفرعي */
.s-product-card-content {
  text-align: center !important;
  padding: 18px 16px 20px !important;
}
.s-product-card-content-title,
.s-product-card-content-title a {
  font-family: "Amiri", serif !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
/* السطر الفرعي (الرائحة): يظهر إذا أضفته في حقل العنوان الفرعي للمنتج */
.s-product-card-content-subtitle,
[class*="content-subtitle"] {
  color: var(--w-muted) !important;
  font-size: 0.95rem !important;
  margin-top: 4px !important;
  text-align: center !important;
}

/* ---------- زر أضف إلى السلة ---------- */
.s-button-primary,
.s-button-outline,
salla-add-product-button button,
[class*="add-product-button"] button {
  background: var(--w-gold) !important;
  color: #1b1d1c !important;
  border: 1px solid var(--w-gold) !important;
  border-radius: var(--w-radius) !important;
  font-weight: 700 !important;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.s-button-primary:hover,
.s-button-outline:hover,
salla-add-product-button button:hover,
[class*="add-product-button"] button:hover {
  background: var(--w-gold-soft) !important;
  border-color: var(--w-gold-soft) !important;
}
.s-button-primary i,
.s-button-outline i,
[class*="add-product-button"] button i {
  color: #1b1d1c !important;
}

/* ---------- البحث ---------- */
.s-search-input,
salla-search input {
  border-radius: var(--w-radius) !important;
  border-color: var(--w-line) !important;
}
.s-search-input:focus,
salla-search input:focus {
  border-color: var(--w-gold) !important;
  box-shadow: none !important;
  outline: none;
}

/* ---------- الفوتر ---------- */
footer,
.store-footer {
  background: #10150f !important;
  border-top: 1px solid var(--w-gold) !important;
}

/* ---------- الجوال ---------- */
@media (max-width: 640px) {
  body::before {
    height: 36px;
    line-height: 36px;
    font-size: 12.5px;
  }
  .s-product-card-content-title,
  .s-product-card-content-title a {
    font-size: 1.15rem !important;
  }
  .s-block__title h2,
  .section-title,
  section h2 {
    font-size: 1.5rem !important;
  }
}

/* لمن يفضّل تقليل الحركة: الشريط يتوقف */
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
    text-indent: 0;
    text-align: center;
  }
  * {
    transition: none !important;
  }
}