/* ==============================
   خط فاخر من Google
============================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;700&family=Tajawal:wght@300;400;700&display=swap');

/* ==============================
   العنوان الرئيسي الفاخر
============================== */
.home-slider__content h2 {
  font-family: 'Noto Naskh Arabic', serif !important;
  font-size: clamp(36px, 6vw, 80px) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #F5E6D3 !important;
  letter-spacing: 2px !important;
  text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.5),
    0 0 60px rgba(212, 169, 106, 0.3) !important;

  /* مهم — نخفيه في البداية عشان الانيميشن يشتغل */
  opacity: 0;
}

/* ==============================
   وصف البانر
============================== */
.home-slider__content .description {
  font-family: 'Tajawal', sans-serif !important;
  font-size: clamp(14px, 2vw, 18px) !important;
  font-weight: 300 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 1.9 !important;
  letter-spacing: 0.5px !important;
  opacity: 0;
}

/* ==============================
   الخط الذهبي الفاصل
============================== */
.hero-luxury-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px auto;
  width: 220px;
  opacity: 0;
}

.hero-luxury-divider .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    #D4A96A,
    transparent
  );
}

.hero-luxury-divider .diamond {
  color: #D4A96A;
  font-size: 10px;
}

/* ==============================
   النص الصغير فوق العنوان
============================== */
.hero-sub-tag {
  display: block;
  font-family: 'Tajawal', sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 6px;
  color: #D4A96A;
  margin-bottom: 16px;
  opacity: 0;
}

/* ==============================
   الطبقة الداكنة الاحترافية
============================== */
.s-block--hero-slider .overlay-bg {
  background: linear-gradient(
    135deg,
    rgba(20, 15, 10, 0.75) 0%,
    rgba(44, 30, 15, 0.55) 50%,
    rgba(20, 15, 10, 0.65) 100%
  ) !important;
}

/* ==============================
   ارتفاع البانر
============================== */
.s-block--hero-slider .swiper-slide {
  min-height: 900px !important;
}

/* ==============================
   طبقة Blur على البانر
   بدون تأثير على النص
============================== */

/* الطبقة الضبابية */
.s-block--hero-slider .swiper-slide > div:first-child {
  filter: blur(2px) !important;  /* غيّر الرقم حسب ذوقك */
  transform: scale(1.05);        /* نكبّر الصورة قليلاً عشان الـ Blur ما يظهر الحواف */
}

/* نتأكد إن النص مش متأثر */
.home-slider__content {
  filter: none !important;
  position: relative;
  z-index: 5;
}
/* ==============================
   Wave Reveal على كروت المنتجات
============================== */

/* الكارت الأساسي */
custom-salla-product-card {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease,
    box-shadow 0.4s ease !important;
  will-change: transform, opacity;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

/* الكارت عند الـ Hover */
custom-salla-product-card:hover {
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.15),
    0 8px 20px rgba(212, 169, 106, 0.2) !important;
  transform: translateY(-8px) !important;
}

/* ==============================
   الصورة
============================== */
custom-salla-product-card .s-product-card-image {
  overflow: hidden;
  position: relative;
}

custom-salla-product-card .s-product-card-image-cover {
  transition: transform 0.6s ease !important;
  width: 100%;
}

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

/* ==============================
   الموجة الذهبية فوق الصورة
============================== */
custom-salla-product-card .s-product-card-image::after {
  content: '';
  position: absolute;
  bottom: -100%;
  left: -10%;
  width: 120%;
  height: 120%;
  background: radial-gradient(
    ellipse at bottom,
    rgba(212, 169, 106, 0.3) 0%,
    transparent 70%
  );
  transition: bottom 0.5s ease;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
}

custom-salla-product-card:hover .s-product-card-image::after {
  bottom: -30% !important;
}

/* ==============================
   العنوان
============================== */
custom-salla-product-card .s-product-card-content-title a {
  transition: color 0.3s ease !important;
}

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

/* ==============================
   زر السلة
============================== */
custom-salla-product-card .s-product-card-content-footer {
  transition: transform 0.4s ease, opacity 0.4s ease !important;
  transform: translateY(4px);
  opacity: 0.85;
}

custom-salla-product-card:hover .s-product-card-content-footer {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* ==============================
   انيميشنات
============================== */
@keyframes waveFloat {
  0%   { transform: translateY(0px)  rotate(0deg);  }
  33%  { transform: translateY(-8px) rotate(1deg);  }
  66%  { transform: translateY(4px)  rotate(-1deg); }
  100% { transform: translateY(0px)  rotate(0deg);  }
}

@keyframes rippleEffect {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* الـ Float بعد الظهور */
custom-salla-product-card.wave-float {
  animation: waveFloat 4s ease-in-out infinite !important;
}

custom-salla-product-card.wave-float:hover {
  animation: none !important;
}
/* ==============================
   تصغير الهيدر — ثيم رائد
============================== */

/* تصغير الهيدر بأقوى selector ممكن */
header.store-header #mainnav.main-nav-container {
  height: 45px !important;
  min-height: 45px !important;
  max-height: 45px !important;
}

/* تصغير الشعار */
header.store-header .navbar-brand img {
  height: 38px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* تصغير روابط القائمة */
header.store-header .main-menu .root-level > a {
  font-size: 10px !important;
  padding: 4px 10px !important;
}

/* تصغير أيقونة المستخدم */
header.store-header .header-btn {
  padding: 10px !important;
}
header.store-header .header-btn__icon {
  font-size: 18px !important;
}

/* تصغير أيقونة السلة */
header.store-header .s-cart-summary-icon svg {
  width: 20px !important;
  height: 20px !important;
}

/* تصغير القائمة المنسدلة */
header.store-header .sub-menu a {
  font-size: 13px !important;
  padding: 6px 12px !important;
}
.custom-lang-btn {
  display: flex;
  align-items: center;
  margin-inline-start: 12px;
}

.custom-lang-btn button {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  background: #f5f5f5 !important;
  border: 1px solid #e0e0e0 !important;
  cursor: pointer !important;
  font-size: 13px !important;
  color: #333 !important;
  transition: all 0.3s ease !important;
}

.custom-lang-btn button:hover {
  background: #D4A96A !important;
  color: #fff !important;
  border-color: #D4A96A !important;
}

/* إخفاء الشريط العلوي بالكامل */
.top-navbar {
  display: none !important;
}
/* إزالة حدود الـ container من البانر */
.s-block--fixed-banner .container {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* البانر نفسه */
.s-block--fixed-banner .container a.banner.banner--fixed {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* الـ picture */
.s-block--fixed-banner .container a.banner.banner--fixed picture {
  display: block !important;
  width: 100% !important;
}

/* الصورة */
.s-block--fixed-banner .container a.banner.banner--fixed picture img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}