/* ============================================================
   ALDOHA COFFEE — محمصة الدوحة
   كود CSS مخصص لتصميم متجر سلة (ثيم سولي)
   الصق هذا الكود في: تصميم المتجر → (...) على بطاقة الثيم →
   تخصيص النسخة → تخصيص الثيم → تخصيص عن طريق الـ CSS → حفظ

   ملاحظة مهمة: بعض أسماء العناصر (class) تختلف قليلاً حسب
   نسخة الثيم المُفعّلة لديك. الطريقة الأدق لتأكيد أي اسم عنصر:
   افتح متجرك → كليك يمين على العنصر → Inspect → تبويب Style،
   وانسخ الاسم الظاهر هناك (اشرحها سلة نفسها بهذه الطريقة).
   الكود أدناه يعتمد على أشهر العناصر المتكررة في متاجر سلة.
   ============================================================ */

/* ---------- 1) متغيرات هوية العلامة (لسهولة التعديل لاحقاً) ---------- */
:root {
  --aldoha-brown-dark: #2B1A12;   /* بني بن محمّص غامق */
  --aldoha-brown-mid:  #3E2A1D;   /* بني متوسط للتدرجات */
  --aldoha-gold:        #C6A664;  /* ذهبي مطفي — طابقه مع ذهب العلبة الفعلي */
  --aldoha-gold-light:  #D9BC85;  /* ذهبي فاتح للنصوص على خلفية غامقة */
  --aldoha-cream:        #F4EFE8; /* كريمي فاتح للخلفيات الثانوية */
}

/* ---------- 2) خلفية الموقع العامة ---------- */
body {
  background-color: var(--aldoha-cream);
  color: var(--aldoha-brown-dark);
}

/* ---------- 3) الهيدر (أعلى المتجر) — خلفية متحركة بحبات بن منسابة ---------- */
header,
.s-header-container,
.header {
  position: relative !important;
  background-color: var(--aldoha-brown-dark) !important;
  overflow: hidden !important;
}

/* طبقة الحركة: نمط حبات بن ذهبية (SVG مضمّن، بدون أي ملف خارجي) ينساب أفقياً ببطء */
header::before,
.s-header-container::before,
.header::before {
  content: "";
  position: absolute;
  inset: -20px;
  pointer-events: none;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='%23C6A664'%3E%3Cellipse cx='20' cy='20' rx='7' ry='10' transform='rotate(-20 20 20)'/%3E%3Cellipse cx='70' cy='40' rx='6' ry='9' transform='rotate(15 70 40)'/%3E%3Cellipse cx='100' cy='12' rx='5' ry='8' transform='rotate(-10 100 12)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 120px 60px;
  animation: aldoha-beans-drift 18s linear infinite;
  z-index: 0;
}

/* التأكد إن محتوى الهيدر (الشعار، القوائم، أيقونات) يبقى فوق طبقة الحركة */
header > *,
.s-header-container > *,
.header > * {
  position: relative;
  z-index: 1;
}

@keyframes aldoha-beans-drift {
  from { background-position: 0 0; }
  to   { background-position: -240px 40px; }
}

/* حجم/تموضع الشعار داخل الهيدر */
header img,
.s-header-container img {
  max-height: 60px;
  width: auto;
}

/* روابط القائمة الرئيسية */
header a,
.s-header-container a,
nav a {
  color: var(--aldoha-cream) !important;
}
header a:hover,
.s-header-container a:hover,
nav a:hover {
  color: var(--aldoha-gold) !important;
}

/* أيقونة سلة الشراء */
.sicon-cart:before {
  color: var(--aldoha-gold) !important;
}

/* ---------- 4) الأزرار (أضف إلى السلة / CTA) ---------- */
.btn,
.btn-add-cart,
button[type="submit"],
.add-cart-button {
  background-color: var(--aldoha-gold) !important;
  border-color: var(--aldoha-gold) !important;
  color: var(--aldoha-brown-dark) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
}
.btn:hover,
.btn-add-cart:hover,
button[type="submit"]:hover {
  background-color: var(--aldoha-gold-light) !important;
  border-color: var(--aldoha-gold-light) !important;
}

/* ---------- 5) سعر المنتج ---------- */
.product-price {
  color: var(--aldoha-brown-dark) !important;
  font-weight: 700 !important;
}

/* ---------- 6) بطاقات المنتجات ---------- */
.product-card,
.s-product-card-wrap {
  border-color: var(--aldoha-gold) !important;
  border-radius: 8px !important;
}

/* صور المنتجات: نفس نطاق القص يبقى ثابت (overflow hidden) عشان الحركة ما تكسر التصميم */
.product-card,
.s-product-card-wrap,
.aldoha-product-card {
  overflow: hidden !important;
}

/* حركة "تنفّس" بطيئة جداً ومستمرة على صورة المنتج، تكبّر أكثر عند المرور بالماوس */
.product-card img,
.s-product-card-wrap img,
.aldoha-product-img {
  transition: transform 0.6s ease !important;
  animation: aldoha-image-breathe 7s ease-in-out infinite;
}
.product-card:hover img,
.s-product-card-wrap:hover img,
.aldoha-product-card:hover .aldoha-product-img {
  transform: scale(1.08) !important;
  animation-play-state: paused; /* توقف الحركة التلقائية أثناء تفاعل المستخدم عشان التكبير يكون واضح ومتحكم فيه */
}

@keyframes aldoha-image-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* عناوين الأقسام (مثل "منتجاتنا") */
.s-block-title,
.section-title {
  color: var(--aldoha-brown-dark) !important;
  border-bottom: 2px solid var(--aldoha-gold);
}

/* ---------- 7) شارة/تقييم النجوم ---------- */
.rating-star,
.s-rating-stars i {
  color: var(--aldoha-gold) !important;
}

/* ---------- 8) الفوتر (أسفل المتجر) ---------- */
/* تم إلغاء تنسيق الفوتر مؤقتاً — كان يسبب نص فاتح على خلفية فاتحة
   (خلفية الفوتر الفعلية بيضاء وليست بنية، فصار النص غير مقروء).
   أرسل اسم/صورة العنصر الصحيح من Inspect لإعادة تفعيله بأمان. */

/* ---------- 9) قسم الترحيب (اسم المتجر + البيت الشعري) ---------- */
/* هذه الكلاسات (aldoha-hero-block / aldoha-hero-title / aldoha-hero-poem)
   يضيفها كود الـ JS تلقائياً بالبحث عن النص نفسه — لازم تلصق كود الـ JS
   المحدّث أيضاً حتى يشتغل هذا الجزء. */

.aldoha-hero-block {
  position: relative !important;
  background: linear-gradient(160deg, var(--aldoha-brown-dark) 0%, var(--aldoha-brown-mid) 100%) !important;
  overflow: hidden;
  padding: 40px 24px !important;
  margin: 0 !important;
  border-top: none !important;
  border-bottom: 3px solid var(--aldoha-gold);
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: aldoha-hero-fade-in 1s ease both;
}

/* إزالة أي فاصل/ظل بين الهيدر وهذا القسم حتى يبدوا كقطعة واحدة متصلة */
header,
.s-header-container,
.header {
  border-bottom: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
}

/* نمط حبات بن ذهبية خفيفة تنساب ببطء — استمرار بصري لحركة الهيدر بالضبط */
.aldoha-hero-block::before {
  content: "";
  position: absolute;
  inset: -20px;
  opacity: 0.10;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cg fill='%23C6A664'%3E%3Cellipse cx='20' cy='20' rx='7' ry='10' transform='rotate(-20 20 20)'/%3E%3Cellipse cx='70' cy='40' rx='6' ry='9' transform='rotate(15 70 40)'/%3E%3Cellipse cx='100' cy='12' rx='5' ry='8' transform='rotate(-10 100 12)'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 120px 60px;
  animation: aldoha-beans-drift 26s linear infinite;
}

.aldoha-hero-block > * {
  position: relative;
  z-index: 1;
}

.aldoha-hero-title {
  color: var(--aldoha-cream) !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  margin-bottom: 12px !important;
}

.aldoha-hero-poem {
  position: relative;
  font-size: 1.05em !important;
  line-height: 1.9 !important;
  color: var(--aldoha-gold-light) !important; /* لون احتياطي لو المتصفح ما يدعم التدرج على النص */
  background: linear-gradient(90deg, var(--aldoha-gold) 0%, #FFF3D9 50%, var(--aldoha-gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aldoha-shimmer 4s ease-in-out infinite;
}

/* مسافة وخط زخرفي فوق السطر الأول فقط من البيت الشعري */
.aldoha-hero-poem:first-of-type {
  padding-top: 14px !important;
  margin-top: 8px !important;
}

/* خط ذهبي زخرفي فوق البيت الشعري، مع لمعة خفيفة تمر عليه ببطء */
.aldoha-hero-poem:first-of-type::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--aldoha-gold) 0%, var(--aldoha-gold-light) 50%, var(--aldoha-gold) 100%);
  background-size: 200% 100%;
  animation: aldoha-shimmer 4s ease-in-out infinite;
}

/* خلفية كريمية دائرية خلف الشعار حتى يبقى واضحاً فوق الخلفية الغامقة */
.aldoha-hero-block img {
  max-width: 78px;
  padding: 10px;
  border-radius: 50%;
  background: var(--aldoha-cream);
  box-shadow: 0 0 0 1px rgba(198,166,100,0.4);
  animation: aldoha-logo-breathe 4s ease-in-out infinite;
}

@keyframes aldoha-hero-fade-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aldoha-shimmer {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 0%; }
}

@keyframes aldoha-logo-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}