/* =====================================================================
   SAMA MAISON DU OUD — اليوم الوطني السعودي (نسخة مدمجة ونهائية)
   الألوان مبنية على هوية حملة "عزّنا بطبعنا" الرسمية المستخرجة من ملفاتكم
   (الأخضر الداكن #002628 + ست ألوان القيم) — مع خلفية فاتحة/كريمية للمتجر
   نفسه حتى لا يتعارض مع تصميمكم الحالي، والألوان تظهر كلمسات بارزة فقط.

   التركيب: سلة ← تصميم المتجر ← تخصيص ← الإعدادات المتقدمة ← أكواد CSS
   ===================================================================== */

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

/* خط الحملة الخاص — ارفعيه عبر "إدارة الملفات" في سلة واستبدلي الرابط أدناه */
@font-face {
  font-family: 'Saudi National Day';
  src: url('REPLACE-WITH-YOUR-UPLOADED-Saudi-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Saudi National Day';
  src: url('REPLACE-WITH-YOUR-UPLOADED-Saudi-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* =====================================================
   1) لوحة الألوان الرسمية لحملة "عزّنا بطبعنا"
   ===================================================== */
:root{
  --nd-bg-deep:   #002628; /* الأخضر الداكن الأساسي للحملة */
  --nd-bg-deep-2: #013b3d;
  --nd-gold:      #7c5d21; /* الرؤية */
  --nd-olive:     #607c4f; /* الشجاعة */
  --nd-magenta:   #971a4d; /* العزيمة */
  --nd-green:     #5aba1c; /* الأصالة */
  --nd-blue:      #0050af; /* الكرم */
  --nd-purple:    #6565e0; /* العطاء الاستثنائي */
  --nd-cream:     #F8F5ED;
  --nd-text:      #252525;
  --nd-font-display: 'Saudi National Day', 'IBM Plex Sans Arabic', Tahoma, sans-serif;
  --nd-font-body:    'IBM Plex Sans Arabic', Tahoma, sans-serif;
}

/* =====================================================
   2) الخلفية العامة والخط — خفيف ولا يصادم تصميمكم الحالي
   ===================================================== */
body{
  background: linear-gradient(180deg, rgba(0,38,40,.035) 0%, var(--nd-cream) 18%);
  color: var(--nd-text);
  font-family: var(--nd-font-body);
}
button, input, textarea, select{ font-family: inherit; }
h1, h2, h3, h4,
.s-block-header-title, .product-title, .s-product-card-title,
.section-title{
  font-family: var(--nd-font-display);
  color: #171717;
}

/* =====================================================
   3) شريط علوي بشعار الحملة — لا يحتاج عنصر إضافي من سلة
   ===================================================== */
body::before{
  content: "🇸🇦  فخامة الطيب لأغلى وطن.. خصم 10% بمناسبة اليوم الوطني 96  🇸🇦";
  display: block;
  width: 100%;
  padding: 10px 15px;
  background: linear-gradient(90deg, var(--nd-bg-deep), var(--nd-bg-deep-2), var(--nd-bg-deep));
  color: var(--nd-cream);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3px;
  font-family: var(--nd-font-display);
  border-bottom: 2px solid var(--nd-gold);
  position: relative;
  z-index: 9999;
}

/* =====================================================
   4) الهيدر
   ===================================================== */
header{
  border-bottom: 1px solid rgba(0,38,40,.12);
  box-shadow: 0 3px 20px rgba(0,0,0,.035);
  position: relative;
}
/* خط زخرفي متدرج أسفل الهيدر بألوان الحملة */
header::after{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--nd-green), var(--nd-gold), var(--nd-green), transparent);
}
.s-header-main .s-nav-link, .main-menu a{
  position: relative;
  transition: color .25s ease;
}
.s-header-main .s-nav-link:hover, .main-menu a:hover{ color: var(--nd-gold) !important; }
.s-header-main .s-nav-link::after, .main-menu a::after{
  content: ""; position: absolute; right: 0; bottom: -4px;
  width: 0; height: 2px; background: var(--nd-gold);
  transition: width .25s ease;
}
.s-header-main .s-nav-link:hover::after, .main-menu a:hover::after{ width: 100%; }

/* أيقونات المتجر (السلة، البحث، المفضلة، الحساب...) بنفس لون خلفية شريط "فخامة الطيب" */
svg,
i[class*="icon"],
i[class*="sicon"],
.s-icon,
.s-header-icon,
.s-header-icon svg,
.s-navigation-bar-icon,
.s-navigation-bar-icon svg,
header svg,
header i[class*="icon"],
.s-search-icon,
.s-wishlist-icon,
.s-cart-icon,
.icon-cart,
.icon-search,
.icon-user,
.icon-wishlist{
  color: var(--nd-bg-deep) !important;
  fill: var(--nd-bg-deep) !important;
  stroke: var(--nd-bg-deep) !important;
  transition: color .25s ease, fill .25s ease;
}
/* تأثير خفيف عند المرور بلون ذهبي الحملة */
.s-header-icon:hover svg,
.s-navigation-bar-icon:hover svg,
header a:hover svg,
header button:hover svg{
  color: var(--nd-gold) !important;
  fill: var(--nd-gold) !important;
  stroke: var(--nd-gold) !important;
}

/* أيقونة "أضف للسلة" تحديدًا — بنفس لون خلفية شريط "فخامة الطيب"
   ملاحظة: أيقونات سلة الأساسية هي خط أيقونات (Salla Icons) وليست SVG،
   لذا لونها يتغيّر عبر خاصية color على وسم <i> صاحب الكلاس sicon-... */
i.sicon-add-to-cart,
i.sicon-cart,
i.sicon-cart-2,
i.sicon-shopping-bag,
.s-button-add-to-cart-icon-button,
.s-button-add-to-cart-icon-button i,
.s-button-add-to-cart-icon-button svg,
.s-product-card-add-cart-icon,
.s-product-card-add-cart-icon i,
.s-product-card-add-cart-icon svg,
.add-to-cart-icon,
.add-to-cart-icon i,
.add-to-cart-icon svg,
.add-to-cart i,
.add-to-cart svg,
button.add-to-cart i,
button.add-to-cart svg,
[class*="add-cart"] i,
[class*="add-cart"] svg,
[class*="add-to-cart"] i,
[class*="add-to-cart"] svg{
  color: var(--nd-bg-deep) !important;
  fill: var(--nd-bg-deep) !important;
  stroke: var(--nd-bg-deep) !important;
  transition: color .25s ease, fill .25s ease;
}
i.sicon-add-to-cart:hover,
i.sicon-cart:hover,
.s-button-add-to-cart-icon-button:hover,
.s-button-add-to-cart-icon-button:hover i,
.s-button-add-to-cart-icon-button:hover svg,
.s-product-card-add-cart-icon:hover i,
.s-product-card-add-cart-icon:hover svg,
.add-to-cart-icon:hover i,
.add-to-cart-icon:hover svg,
[class*="add-cart"]:hover i,
[class*="add-cart"]:hover svg,
[class*="add-to-cart"]:hover i,
[class*="add-to-cart"]:hover svg{
  color: var(--nd-gold) !important;
  fill: var(--nd-gold) !important;
  stroke: var(--nd-gold) !important;
}

/* =====================================================
   5) الأزرار
   ===================================================== */
button, .s-button, .btn, button[type="submit"], a[class*="button"]{
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
button:hover, .s-button:hover, .btn:hover, button[type="submit"]:hover{
  transform: translateY(-2px);
}
.bg-primary, .bg-primary:hover, button.bg-primary,
.s-button-primary, .add-to-cart{
  background: var(--nd-bg-deep) !important;
  border-color: var(--nd-gold) !important;
  color: var(--nd-cream) !important;
  box-shadow: 0 7px 20px rgba(0,38,40,.28);
}
/* الأيقونة داخل الزر تبقى كريمية فاتحة لأن خلفية الزر الآن غامقة بنفس لون الشارة */
.bg-primary i, .bg-primary svg,
.s-button-primary i, .s-button-primary svg,
.add-to-cart i, .add-to-cart svg,
button.bg-primary i, button.bg-primary svg{
  color: var(--nd-cream) !important;
  fill: var(--nd-cream) !important;
  stroke: var(--nd-cream) !important;
}

/* زر إتمام الشراء (Checkout) — بألوان الحملة، بتدرج مختلف قليلاً ليتميز عن زر الإضافة للسلة */
.s-checkout-button,
.s-cart-summary-checkout-button,
.checkout-btn,
button[class*="checkout"],
a[class*="checkout"],
a[href*="checkout"],
.s-button-checkout,
[class*="checkout-button"]{
  background: linear-gradient(135deg, var(--nd-bg-deep), var(--nd-bg-deep-2)) !important;
  border: 1px solid var(--nd-gold) !important;
  color: var(--nd-cream) !important;
  box-shadow: 0 7px 20px rgba(0,38,40,.28);
}
.s-checkout-button:hover,
.s-cart-summary-checkout-button:hover,
.checkout-btn:hover,
button[class*="checkout"]:hover,
a[class*="checkout"]:hover,
a[href*="checkout"]:hover,
.s-button-checkout:hover,
[class*="checkout-button"]:hover{
  background: linear-gradient(135deg, var(--nd-bg-deep-2), var(--nd-bg-deep)) !important;
  border-color: var(--nd-gold) !important;
  box-shadow: 0 9px 24px rgba(0,38,40,.4);
}

/* =====================================================
   6) بطاقات المنتجات
   ===================================================== */
.product-card, .s-product-card, .product-item{
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(124,93,33,.14);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative;
}
.product-card:hover, .s-product-card:hover, .product-item:hover{
  transform: translateY(-5px);
  border-color: rgba(124,93,33,.45);
  box-shadow: 0 15px 35px rgba(0,0,0,.08), 0 2px 10px rgba(0,38,40,.06);
}
.product-card img, .s-product-card img, .product-item img{
  transition: transform .5s ease;
}
.product-card:hover img, .s-product-card:hover img, .product-item:hover img{
  transform: scale(1.035);
}
.price, .product-price, .s-product-card-price{
  color: var(--nd-olive) !important;
  font-weight: 700;
}
.price-before, .line-through{ opacity: .55; }

/* شارة "خصم اليوم الوطني" ثابتة تلقائيًا على كل بطاقة منتج (بدون الحاجة لإضافة كلاس يدويًا) */
.product-card::after,
.s-product-card::after,
.product-item::after{
  content: "خصم اليوم الوطني";
  position: absolute;
  top: 14px;
  right: -32px;
  transform: rotate(45deg);
  background: var(--nd-bg-deep);
  border: 1px solid var(--nd-gold);
  color: var(--nd-cream);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 38px;
  z-index: 6;
  font-family: var(--nd-font-body);
  box-shadow: 0 3px 8px rgba(0,38,40,.4);
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 768px){
  .product-card::after, .s-product-card::after, .product-item::after{
    font-size: 8px;
    padding: 3px 30px;
    top: 10px;
    right: -28px;
  }
}

/* شارة اختيارية "٩٦ عام" على زاوية منتج — أضيفي كلاس nd-badge للمنتج من سلة */
.nd-badge::before{
  content: "٩٦ عام";
  position: absolute; top: 14px; right: -34px;
  transform: rotate(45deg);
  background: var(--nd-magenta);
  color: var(--nd-cream);
  font-size: 11px; font-weight: 600;
  padding: 4px 40px; z-index: 5;
  font-family: var(--nd-font-body);
}
.badge, .product-badge{
  background: var(--nd-olive) !important;
  color: #fff !important;
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
}
.product-card .badge:first-child, .s-product-card .badge:first-child{
  box-shadow: 0 4px 12px rgba(96,124,79,.20);
}

/* =====================================================
   7) العناوين — خط سفلي متدرج بألوان الحملة
   ===================================================== */
h2::after, .section-title::after{
  content: "";
  display: block;
  width: 45px; height: 2px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--nd-green), var(--nd-gold));
  border-radius: 20px;
}

/* =====================================================
   8) الفئات والبنرات
   ===================================================== */
.category-card, .s-category-card{
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(124,93,33,.12);
  transition: all .3s ease;
}
.category-card:hover, .s-category-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.banner, .s-banner{ border-radius: 16px; overflow: hidden; }

/* زخرفة شطرنجية على زوايا البانر الرئيسي — مستوحاة من إطار شعار الحملة */
.s-block-slideshow,
.hero-banner,
.s-block-header,
.s-block-main-slider,
.swiper-slide,
.s-slider{
  position: relative;
}
.s-block-slideshow::before,
.hero-banner::before,
.s-block-header::before,
.s-block-main-slider::before,
.s-slider::before{
  content: "";
  position: absolute;
  top: 12px; right: 12px;
  width: 56px; height: 56px;
  background-image:
    linear-gradient(45deg, var(--nd-green) 25%, transparent 25%, transparent 75%, var(--nd-green) 75%),
    linear-gradient(45deg, var(--nd-green) 25%, transparent 25%, transparent 75%, var(--nd-green) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  background-color: var(--nd-bg-deep);
  border: 2px solid var(--nd-gold);
  border-radius: 6px;
  opacity: .9;
  z-index: 3;
  pointer-events: none;
}
.s-block-slideshow::after,
.hero-banner::after,
.s-block-header::after,
.s-block-main-slider::after,
.s-slider::after{
  content: "";
  position: absolute;
  bottom: 12px; left: 12px;
  width: 56px; height: 56px;
  background-image:
    linear-gradient(45deg, var(--nd-green) 25%, transparent 25%, transparent 75%, var(--nd-green) 75%),
    linear-gradient(45deg, var(--nd-green) 25%, transparent 25%, transparent 75%, var(--nd-green) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  background-color: var(--nd-bg-deep);
  border: 2px solid var(--nd-gold);
  border-radius: 6px;
  opacity: .9;
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 768px){
  .s-block-slideshow::before, .s-block-slideshow::after,
  .hero-banner::before, .hero-banner::after,
  .s-block-header::before, .s-block-header::after,
  .s-block-main-slider::before, .s-block-main-slider::after,
  .s-slider::before, .s-slider::after{
    width: 34px; height: 34px;
  }
}

/* لمسة زخرفية دائرية خفيفة في الأقسام الزوجية */
section{ position: relative; }
section:nth-of-type(even)::before{
  content: "";
  position: absolute;
  width: 100px; height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(124,93,33,.10);
  left: -50px; top: 20%;
  pointer-events: none;
}

/* فاصل بنمط الشطرنج المستوحى من إطار الشعار — <div class="nd-divider"> */
.nd-divider{
  height: 14px; width: 100%;
  background-image:
    linear-gradient(45deg, var(--nd-green) 25%, transparent 25%, transparent 75%, var(--nd-green) 75%),
    linear-gradient(45deg, var(--nd-green) 25%, transparent 25%, transparent 75%, var(--nd-green) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  background-color: var(--nd-bg-deep);
  opacity: .9;
}

/* =====================================================
   9) الروابط وحقول البحث
   ===================================================== */
a{ transition: color .2s ease; }
a:hover{ color: var(--nd-olive); }
input[type="search"], .search-input, input{
  border-radius: 10px;
  transition: all .25s ease;
}
input:focus, input[type="search"]:focus{
  border-color: var(--nd-gold) !important;
  box-shadow: 0 0 0 3px rgba(124,93,33,.10) !important;
  outline: none;
}

/* =====================================================
   10) الفوتر
   ===================================================== */
footer, .s-footer{
  background: linear-gradient(135deg, var(--nd-bg-deep), var(--nd-bg-deep-2)) !important;
  color: var(--nd-cream);
  border-top: 3px solid var(--nd-gold);
}
footer a, .s-footer a{ color: rgba(248,245,237,.88); }
footer a:hover, .s-footer a:hover{ color: var(--nd-gold); }

/* أيقونات حسابات التواصل الاجتماعي في التذييل — استثناء من تلوين الأيقونات العام
   حتى لا تختفي فوق خلفية الفوتر الغامقة، تبقى بلون كريمي فاتح */
footer svg,
footer svg path,
footer i[class*="icon"],
footer i[class*="sicon"],
.s-footer svg,
.s-footer svg path,
.s-footer i[class*="icon"],
.s-footer i[class*="sicon"],
.s-footer-social svg,
.s-footer-social i,
.social-media svg,
.social-media i,
footer a[href*="instagram"] svg,
footer a[href*="instagram"] i,
footer a[href*="twitter"] svg,
footer a[href*="twitter"] i,
footer a[href*="x.com"] svg,
footer a[href*="x.com"] i,
footer a[href*="tiktok"] svg,
footer a[href*="tiktok"] i,
footer a[href*="snapchat"] svg,
footer a[href*="snapchat"] i,
footer a[href*="facebook"] svg,
footer a[href*="facebook"] i,
footer a[href*="youtube"] svg,
footer a[href*="youtube"] i{
  color: var(--nd-cream) !important;
  fill: var(--nd-cream) !important;
  stroke: var(--nd-cream) !important;
  opacity: 1 !important;
  transition: color .25s ease, fill .25s ease, transform .25s ease;
}
footer a[href*="instagram"]:hover svg, footer a[href*="instagram"]:hover i,
footer a[href*="twitter"]:hover svg, footer a[href*="twitter"]:hover i,
footer a[href*="x.com"]:hover svg, footer a[href*="x.com"]:hover i,
footer a[href*="tiktok"]:hover svg, footer a[href*="tiktok"]:hover i,
footer a[href*="snapchat"]:hover svg, footer a[href*="snapchat"]:hover i,
footer a[href*="facebook"]:hover svg, footer a[href*="facebook"]:hover i,
footer a[href*="youtube"]:hover svg, footer a[href*="youtube"]:hover i,
.s-footer-social svg:hover, .s-footer-social i:hover{
  color: var(--nd-gold) !important;
  fill: var(--nd-gold) !important;
  stroke: var(--nd-gold) !important;
  transform: translateY(-2px);
}

/* =====================================================
   11) زر الواتساب العائم
   ===================================================== */
.whatsapp, .s-floating-whatsapp{
  filter: drop-shadow(0 7px 15px rgba(0,0,0,.18));
  transition: transform .25s ease;
}
.whatsapp:hover, .s-floating-whatsapp:hover{ transform: scale(1.08); }

/* استثناء أيقونة الواتساب من تلوين الأيقونات العام أعلاه — تبقى بيضاء دائمًا */
.whatsapp,
.whatsapp *,
.whatsapp svg,
.whatsapp svg path,
.whatsapp i,
.s-floating-whatsapp,
.s-floating-whatsapp *,
.s-floating-whatsapp svg,
.s-floating-whatsapp svg path,
.s-floating-whatsapp i,
[class*="whatsapp"] svg,
[class*="whatsapp"] svg path,
[class*="whatsapp"] i,
a[href*="wa.me"] svg,
a[href*="wa.me"] svg path,
a[href*="wa.me"] i{
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* شارة عائمة اختيارية — <div class="nd-floating-badge">عزّنا بطبعنا 🇸🇦</div> */
.nd-floating-badge{
  position: fixed; bottom: 90px; left: 20px; z-index: 999;
  background: var(--nd-bg-deep); color: var(--nd-cream);
  border: 1px solid var(--nd-gold);
  padding: 10px 16px; border-radius: 30px;
  font-family: var(--nd-font-display); font-size: 13px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

/* =====================================================
   12) الجوال
   ===================================================== */
@media (max-width: 768px){
  body::before{ font-size: 11px; padding: 8px 10px; }
  .product-card, .s-product-card, .product-item{ border-radius: 11px; }
  h1{ font-size: 25px; }
  h2{ font-size: 21px; }
  h3{ font-size: 18px; }
  section:nth-of-type(even)::before{ display: none; }
  .nd-floating-badge{ bottom: 70px; left: 10px; font-size: 11px; padding: 8px 12px; }
}

/* =====================================================
   13) تقليل الحركة لذوي الحساسية (إتاحة)
   ===================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}