/* =========================================================
   DAR NORSEN — دار نورسين للعود
   المرحلة الأولى: البنية الأساسية والواجهة العلوية
   Theme: Saji
   ========================================================= */

/* ---------------------------------------------------------
   1. متغيرات الهوية البصرية
   يتم التحكم في هوية المتجر كاملة من هنا
--------------------------------------------------------- */

:root {
  /* ألوان دار نورسين */
  --dn-emerald: #123a32;
  --dn-emerald-dark: #08251f;
  --dn-emerald-soft: #1d4c41;

  --dn-black: #080a09;
  --dn-charcoal: #131816;
  --dn-wood: #654832;

  --dn-gold: #b69a62;
  --dn-gold-soft: #d2bd8d;

  --dn-ivory: #f5f0e7;
  --dn-cream: #ebe3d4;
  --dn-white: #ffffff;

  /* النصوص */
  --dn-text-dark: #15201c;
  --dn-text-light: #f7f3eb;
  --dn-text-muted: #756f65;

  /* الحدود والظلال */
  --dn-border: rgba(182, 154, 98, 0.22);
  --dn-border-light: rgba(255, 255, 255, 0.16);

  --dn-shadow-soft:
    0 16px 40px rgba(8, 22, 18, 0.08);

  --dn-shadow-luxury:
    0 24px 70px rgba(3, 12, 9, 0.22);

  /* الأحجام */
  --dn-radius-small: 8px;
  --dn-radius-medium: 14px;
  --dn-radius-large: 24px;

  /* الحركة */
  --dn-transition-fast: 180ms ease;
  --dn-transition: 350ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ارتفاع رأس الصفحة */
  --dn-header-height: 88px;
}


/* ---------------------------------------------------------
   2. إعادة ضبط آمنة للثيم
--------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
  background-color: var(--dn-ivory);
  color: var(--dn-text-dark);
  font-family:
    "DIN Next Arabic",
    "IBM Plex Sans Arabic",
    "Noto Sans Arabic",
    "Tahoma",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
  font-family:
    "DIN Next Arabic",
    "IBM Plex Sans Arabic",
    "Noto Sans Arabic",
    "Tahoma",
    sans-serif !important;
}

* {
  box-sizing: border-box;
}

img,
video,
iframe {
  max-width: 100%;
}

a,
button {
  transition:
    color var(--dn-transition-fast),
    background-color var(--dn-transition-fast),
    border-color var(--dn-transition-fast),
    opacity var(--dn-transition-fast),
    transform var(--dn-transition-fast);
}

/* منع التباعد الإنجليزي غير المناسب للعربية */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button,
span {
  letter-spacing: normal;
  text-transform: none;
}


/* ---------------------------------------------------------
   3. الخطوط والنصوص
--------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
  font-weight: 700;
  line-height: 1.35;
}

h1 {
  font-size: clamp(34px, 5vw, 64px);
}

h2 {
  font-size: clamp(28px, 4vw, 46px);
}

h3 {
  font-size: clamp(21px, 2.5vw, 30px);
}

p {
  line-height: 1.9;
}

.section-title,
.s-block__title,
.s-block__title h2,
.s-block__title h3 {
  color: var(--dn-emerald-dark);
  font-weight: 700;
  letter-spacing: normal !important;
}


/* ---------------------------------------------------------
   4. إزالة الفراغ العلوي للسماح للفيديو بالوصول للأعلى
--------------------------------------------------------- */

body.home,
body.index {
  padding-top: 0 !important;
}

body.home main,
body.index main,
body.home #app,
body.index #app {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.home main > section:first-child,
body.index main > section:first-child,
body.home .home-slider,
body.index .home-slider,
body.home .s-slider-block,
body.index .s-slider-block,
body.home .video-banner,
body.index .video-banner {
  margin-top: 0 !important;
}


/* ---------------------------------------------------------
   5. رأس الصفحة الشفاف
   يدعم أكثر من تسمية محتملة داخل ثيم ساجي
--------------------------------------------------------- */

body.home header,
body.index header,
body.home .store-header,
body.index .store-header,
body.home .main-header,
body.index .main-header,
body.home .site-header,
body.index .site-header {
  position: absolute !important;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;

  width: 100%;

  background:
    linear-gradient(
      180deg,
      rgba(3, 15, 11, 0.68) 0%,
      rgba(3, 15, 11, 0.26) 55%,
      rgba(3, 15, 11, 0) 100%
    ) !important;

  border-bottom: 1px solid transparent;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transition:
    background var(--dn-transition),
    border-color var(--dn-transition),
    box-shadow var(--dn-transition),
    backdrop-filter var(--dn-transition),
    transform var(--dn-transition);
}


/* الحاويات الداخلية للرأس */

body.home header > *,
body.index header > *,
body.home .store-header > *,
body.index .store-header > *,
body.home .main-header > *,
body.index .main-header > * {
  background-color: transparent !important;
}


/* ---------------------------------------------------------
   6. حالة الرأس عند النزول
--------------------------------------------------------- */

body.dn-scrolled header,
body.dn-scrolled .store-header,
body.dn-scrolled .main-header,
body.dn-scrolled .site-header {
  position: fixed !important;

  background:
    linear-gradient(
      135deg,
      rgba(8, 37, 31, 0.97),
      rgba(8, 10, 9, 0.97)
    ) !important;

  border-bottom-color: rgba(182, 154, 98, 0.28);

  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.18) !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


/* ---------------------------------------------------------
   7. روابط القائمة فوق الفيديو
--------------------------------------------------------- */

body.home header a,
body.index header a,
body.home .store-header a,
body.index .store-header a,
body.home .main-header a,
body.index .main-header a,
body.home header button,
body.index header button {
  color: var(--dn-white) !important;
}

body.home header svg,
body.index header svg,
body.home .store-header svg,
body.index .store-header svg,
body.home .main-header svg,
body.index .main-header svg {
  color: var(--dn-white) !important;
  fill: currentColor;
}

body.home header a:hover,
body.index header a:hover,
body.home .store-header a:hover,
body.index .store-header a:hover {
  color: var(--dn-gold-soft) !important;
}


/* مؤشر القائمة النشطة */

body.home header .active > a,
body.index header .active > a,
body.home header a.active,
body.index header a.active,
body.home .store-header .active > a,
body.index .store-header .active > a {
  color: var(--dn-gold-soft) !important;
}


/* ---------------------------------------------------------
   8. خط ذهبي صغير عند المرور على روابط القائمة
--------------------------------------------------------- */

body.home header nav a,
body.index header nav a,
body.home .store-header nav a,
body.index .store-header nav a {
  position: relative;
}

body.home header nav a::after,
body.index header nav a::after,
body.home .store-header nav a::after,
body.index .store-header nav a::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: -8px;

  width: 0;
  height: 1px;

  background-color: var(--dn-gold-soft);

  transform: translateX(50%);
  transition: width var(--dn-transition);
}

body.home header nav a:hover::after,
body.index header nav a:hover::after,
body.home header nav a.active::after,
body.index header nav a.active::after,
body.home .store-header nav a:hover::after,
body.index .store-header nav a:hover::after {
  width: 26px;
}


/* ---------------------------------------------------------
   9. تكبير الشعار وإظهاره بشكل فاخر
--------------------------------------------------------- */

header .navbar-brand img,
.store-header .navbar-brand img,
.main-header .navbar-brand img,
.site-header .navbar-brand img,
header .logo img,
.store-header .logo img {
  width: auto !important;
  max-width: 150px !important;
  max-height: 68px !important;
  object-fit: contain;
  filter:
    drop-shadow(0 5px 14px rgba(0, 0, 0, 0.24));
  transition:
    max-height var(--dn-transition),
    transform var(--dn-transition);
}

body.dn-scrolled header .navbar-brand img,
body.dn-scrolled .store-header .navbar-brand img,
body.dn-scrolled .main-header .navbar-brand img {
  max-height: 58px !important;
}


/* ---------------------------------------------------------
   10. البحث والسلة وأيقونات الرأس
--------------------------------------------------------- */

header button,
.store-header button,
.main-header button {
  border-radius: 50%;
}

body.home header button:hover,
body.index header button:hover,
body.home .store-header button:hover,
body.index .store-header button:hover {
  color: var(--dn-gold-soft) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
}

header .s-cart-summary-count,
.store-header .s-cart-summary-count,
.main-header .s-cart-summary-count,
header .cart-count {
  background-color: var(--dn-gold) !important;
  color: var(--dn-black) !important;
  border: 2px solid var(--dn-emerald-dark);
  font-weight: 700;
}


/* ---------------------------------------------------------
   11. إخفاء أو دمج الشريط العلوي الأبيض في الرئيسية
--------------------------------------------------------- */

body.home .top-navbar,
body.index .top-navbar,
body.home .top-header,
body.index .top-header,
body.home .header-top,
body.index .header-top {
  background-color: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--dn-white) !important;
}

body.home .top-navbar a,
body.index .top-navbar a,
body.home .top-header a,
body.index .top-header a {
  color: rgba(255, 255, 255, 0.86) !important;
}


/* ---------------------------------------------------------
   12. أزرار دار نورسين الأساسية
--------------------------------------------------------- */

.btn,
.s-button-element,
button[type="submit"],
a[href*="/cart"],
a[href*="/products"] {
  border-radius: var(--dn-radius-small);
  font-weight: 600;
}

.dn-primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 50px;
  padding: 12px 30px;

  color: var(--dn-white) !important;
  background:
    linear-gradient(
      135deg,
      var(--dn-emerald-soft),
      var(--dn-emerald-dark)
    );

  border: 1px solid rgba(210, 189, 141, 0.5);
  border-radius: var(--dn-radius-small);

  box-shadow:
    0 12px 30px rgba(8, 37, 31, 0.2);
}

.dn-primary-button:hover {
  color: var(--dn-emerald-dark) !important;
  background: var(--dn-gold-soft);
  border-color: var(--dn-gold-soft);
  transform: translateY(-2px);
}

.dn-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 50px;
  padding: 12px 30px;

  color: var(--dn-white) !important;
  background-color: rgba(8, 10, 9, 0.24);

  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--dn-radius-small);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dn-secondary-button:hover {
  color: var(--dn-emerald-dark) !important;
  background-color: var(--dn-ivory);
  border-color: var(--dn-ivory);
}


/* ---------------------------------------------------------
   13. تحسين الأقسام العامة
--------------------------------------------------------- */

section {
  position: relative;
}

.s-block {
  margin-top: clamp(48px, 7vw, 100px);
}

.container {
  width: min(100% - 32px, 1380px);
  margin-inline: auto;
}


/* ---------------------------------------------------------
   14. تحسين بطاقات المنتجات بصورة أولية
   التطوير الكامل سيكون في المرحلة الرابعة
--------------------------------------------------------- */

.product-entry,
.product-card,
.s-product-card-entry {
  overflow: hidden;

  background-color: rgba(255, 255, 255, 0.82) !important;

  border: 1px solid rgba(182, 154, 98, 0.16) !important;
  border-radius: var(--dn-radius-medium) !important;

  box-shadow: var(--dn-shadow-soft);

  transition:
    transform var(--dn-transition),
    box-shadow var(--dn-transition),
    border-color var(--dn-transition);
}

.product-entry:hover,
.product-card:hover,
.s-product-card-entry:hover {
  border-color: rgba(182, 154, 98, 0.45) !important;

  box-shadow:
    0 22px 60px rgba(8, 37, 31, 0.14);

  transform: translateY(-5px);
}


/* ---------------------------------------------------------
   15. تحسين التركيز وسهولة الاستخدام
--------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--dn-gold);
  outline-offset: 3px;
}


/* ---------------------------------------------------------
   16. واجهة الجوال
--------------------------------------------------------- */

@media screen and (max-width: 768px) {
  :root {
    --dn-header-height: 72px;
  }

  body.home header,
  body.index header,
  body.home .store-header,
  body.index .store-header,
  body.home .main-header,
  body.index .main-header {
    min-height: var(--dn-header-height);

    background:
      linear-gradient(
        180deg,
        rgba(3, 15, 11, 0.78) 0%,
        rgba(3, 15, 11, 0.35) 62%,
        rgba(3, 15, 11, 0) 100%
      ) !important;
  }

  body.dn-scrolled header,
  body.dn-scrolled .store-header,
  body.dn-scrolled .main-header {
    background:
      rgba(8, 37, 31, 0.97) !important;
  }

  header .navbar-brand img,
  .store-header .navbar-brand img,
  .main-header .navbar-brand img,
  .site-header .navbar-brand img,
  header .logo img,
  .store-header .logo img {
    max-width: 120px !important;
    max-height: 56px !important;
  }

  h1 {
    font-size: clamp(32px, 10vw, 44px);
    line-height: 1.3;
  }

  h2 {
    font-size: clamp(26px, 8vw, 34px);
  }

  p {
    font-size: 15px;
    line-height: 1.85;
  }

  .container {
    width: min(100% - 28px, 1380px);
  }

  .s-block {
    margin-top: 54px;
  }
}


/* ---------------------------------------------------------
   17. احترام إعداد تقليل الحركة
--------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}/* ===== بطاقات المنتجات ===== */

.product,
.product-card,
.s-product-card-entry,
.s-product-card-content,
.s-product-card {
    background: linear-gradient(
        180deg,
        #14382f 0%,
        #0d201b 100%
    ) !important;

    border: 1px solid rgba(182,154,98,.25) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

/* الجزء السفلي الأبيض */
.product-card .content,
.product-card__content,
.s-product-card-content,
.s-product-card-info,
.product-content {
    background: transparent !important;
}

/* اسم المنتج */
.product-name,
.product-title,
.s-product-name,
.s-product-card-name {
    color: #F5F0E7 !important;
    font-weight: 600;
}

/* السعر الحالي */
.price,
.s-product-card-price,
.sale-price {
    color: #D4B06A !important;
    font-weight: 700;
}

/* السعر القديم */
.price-before,
.price-old,
del {
    color: rgba(255,255,255,.45) !important;
}

/* نسبة الخصم */
.badge-discount,
.sale-badge {
    background: #B69A62 !important;
    color: #08110E !important;
}

/* تأثير المرور */
.product-card:hover,
.s-product-card-entry:hover {
    transform: translateY(-6px);
    border-color: #B69A62 !important;
    box-shadow: 0 25px 60px rgba(0,0,0,.28);
}div[class*="product"]{
    background:#0f2e28 !important;
}

div[class*="card"]{
    background:#0f2e28 !important;
}

article{
    background:#0f2e28 !important;
}

[class*="content"]{
    background:transparent !important;
}/* إطار بطاقات المنتجات */

.product-card,
.s-product-card,
.s-product-card-entry,
.product {

    border: 1.5px solid rgba(182,154,98,.35) !important;
    border-radius: 18px !important;
    overflow: hidden !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18),
        inset 0 0 0 1px rgba(255,255,255,.03);
}

/* عند المرور */

.product-card:hover,
.s-product-card:hover,
.s-product-card-entry:hover{

    border-color:#CFA85F !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,.28),
        0 0 18px rgba(182,154,98,.18);
}/* اسم المنتج */

.product-name,
.s-product-name,
.product-title,
.s-product-card-name{
    color:#F5F0E7 !important;   /* عاجي فاخر */
    font-weight:700 !important;
    line-height:1.7;
}

/* السعر الحالي */

.price,
.s-product-price,
.sale-price{
    color:#D4AF6A !important;
    font-weight:800 !important;
}

/* السعر القديم */

.price-before,
.old-price,
del{
    color:#D56A6A !important;
    opacity:.85;
}

/* عدد مرات الشراء */

.purchase-count,
.s-product-card-sales,
[class*="sales"]{
    color:#D8C7A1 !important;
}/* ==================================================
   دار نورسين — إجبار وضوح نصوص بطاقات المنتجات
   يوضع في نهاية ملف CSS
================================================== */

/* اسم المنتج */
body .s-product-card-entry .s-product-card-content-title,
body .s-product-card-entry .s-product-card-content-title *,
body .s-product-card-entry .s-product-card-title,
body .s-product-card-entry .s-product-card-title *,
body .s-product-card-entry .s-product-card-name,
body .s-product-card-entry .s-product-card-name *,
body .s-product-card-entry h3,
body .s-product-card-entry h3 a,
body .s-product-card-entry h4,
body .s-product-card-entry h4 a,
body .product-card h3,
body .product-card h3 a,
body .product-card h4,
body .product-card h4 a,
body [class*="product-card"] [class*="title"],
body [class*="product-card"] [class*="title"] a,
body [class*="product-card"] [class*="name"],
body [class*="product-card"] [class*="name"] a {
    color: #F5F0E7 !important;
    -webkit-text-fill-color: #F5F0E7 !important;
    opacity: 1 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
}

/* عدد مرات الشراء */
body .s-product-card-entry [class*="sale-count"],
body .s-product-card-entry [class*="purchase"],
body .s-product-card-entry [class*="sold"],
body .s-product-card-entry [class*="orders"],
body [class*="product-card"] [class*="purchase"],
body [class*="product-card"] [class*="sold"] {
    color: #D8C8A5 !important;
    -webkit-text-fill-color: #D8C8A5 !important;
    opacity: 1 !important;
}

/* السعر الحالي */
body .s-product-card-entry .s-product-card-price,
body .s-product-card-entry [class*="sale-price"],
body .s-product-card-entry [class*="current-price"],
body [class*="product-card"] [class*="price"]:not(del) {
    color: #D9B86C !important;
    -webkit-text-fill-color: #D9B86C !important;
    font-weight: 800 !important;
}

/* السعر السابق */
body .s-product-card-entry del,
body .s-product-card-entry [class*="old-price"],
body .s-product-card-entry [class*="before-price"] {
    color: #D97979 !important;
    -webkit-text-fill-color: #D97979 !important;
    opacity: 0.9 !important;
}

/* حل أخير مباشر لأي نص أسود داخل منطقة معلومات المنتج */
body .s-product-card-entry .s-product-card-content {
    color: #F5F0E7 !important;
}

body .s-product-card-entry .s-product-card-content a:not([class*="price"]),
body .s-product-card-entry .s-product-card-content p,
body .s-product-card-entry .s-product-card-content span:not([class*="price"]) {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}/* السعر الحالي */
.s-product-card-price,
.s-product-price,
.price,
.price-wrapper .price,
.price-wrapper .amount,
.money {
    color: #D4AF6A !important;
    -webkit-text-fill-color: #D4AF6A !important;
    font-weight: 800 !important;
}

/* السعر القديم */
del,
.price-before,
.old-price,
.compare-price {
    color: #B86A6A !important;
    -webkit-text-fill-color: #B86A6A !important;
}