/* =========================================================
   DAR SUFYAN — CLEAN PREMIUM THEME
   بدون تعديل بطاقات المنتجات
   بدون شريط علوي إضافي
   ========================================================= */

:root {
  --ds-gold: #C79A45;
  --ds-gold-light: #DDBB72;
  --ds-gold-dark: #A9782D;

  --ds-brown: #3A2418;
  --ds-brown-2: #513426;
  --ds-dark: #1E1A17;

  --ds-beige: #F6EFE5;
  --ds-beige-2: #EEE2D2;
  --ds-white: #FCFAF6;

  --ds-gray: #746B64;
  --ds-border: rgba(58, 36, 24, 0.10);

  --ds-radius: 16px;
  --ds-radius-lg: 24px;

  --ds-shadow: 0 8px 30px rgba(58, 36, 24, 0.08);
  --ds-shadow-hover: 0 18px 45px rgba(58, 36, 24, 0.15);

  --ds-transition: all .30s cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   GENERAL
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ds-white) !important;
  color: var(--ds-dark);
  font-family:
    "Tajawal",
    "DIN Next Arabic",
    "Segoe UI",
    Arial,
    sans-serif !important;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

::selection {
  background: var(--ds-gold);
  color: #fff;
}

a {
  transition: var(--ds-transition);
}

img {
  max-width: 100%;
  image-rendering: auto;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: #F4EFE8;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--ds-gold),
    var(--ds-gold-dark)
  );

  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ds-brown);
}




/* =========================================================
   TITLES
   ========================================================= */

h1,
h2,
h3,
h4,
.section-title,
.section-header h2 {
  color: var(--ds-brown);
}

h1 {
  font-weight: 800;
  letter-spacing: -0.4px;
}

h2,
.section-title {
  font-weight: 800;
}


/* زخرفة خفيفة للعناوين التي تدعمها */

.ds-title-line::after {
  content: "";

  display: block;

  width: 46px;
  height: 3px;

  margin: 10px auto 0;

  border-radius: 20px;

  background: linear-gradient(
    90deg,
    var(--ds-gold-dark),
    var(--ds-gold-light)
  );
}


/* =========================================================
   HERO / BANNERS
   ========================================================= */

.hero,
.hero-banner,
.banner,
.main-slider,
.s-slider-block {
  overflow: hidden;
}

.hero img,
.hero-banner img,
.banner img {
  transition: transform 1s ease;
}

.hero:hover img,
.hero-banner:hover img,
.banner:hover img {
  transform: scale(1.015);
}

.hero h1,
.hero h2,
.banner h1,
.banner h2 {
  font-weight: 800;
  line-height: 1.45;
}

.hero p,
.banner p {
  line-height: 1.9;
}


/* =========================================================
   CATEGORY CARDS
   لا يشمل بطاقات المنتجات
   ========================================================= */

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

  border-radius: 22px !important;

  position: relative;

  box-shadow: var(--ds-shadow);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.category-card:hover,
.category-entry:hover,
.s-category-card:hover {
  transform: translateY(-4px);

  box-shadow: var(--ds-shadow-hover);
}

.category-card img,
.category-entry img,
.s-category-card img {
  transition: transform .6s ease;
}

.category-card:hover img,
.category-entry:hover img,
.s-category-card:hover img {
  transform: scale(1.035);
}


/* =========================================================
   SECTIONS
   ========================================================= */

section {
  position: relative;
}

.ds-soft-section {
  background: linear-gradient(
    180deg,
    var(--ds-beige) 0%,
    #FAF6F0 100%
  );
}


/* =========================================================
   REVIEWS
   ========================================================= */

.testimonial,
.review-card,
.s-testimonial-item {
  background: #fff !important;

  border: 1px solid var(--ds-border);

  border-radius: 20px !important;

  box-shadow: var(--ds-shadow);

  padding: 24px !important;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.testimonial:hover,
.review-card:hover,
.s-testimonial-item:hover {
  transform: translateY(-4px);

  box-shadow: var(--ds-shadow-hover);
}


/* النجوم */

.rating,
.stars,
.s-rating-stars {
  color: var(--ds-gold) !important;
}


/* =========================================================
   FORMS
   ========================================================= */

input,
textarea,
select,
.s-form-control {
  border: 1px solid rgba(58, 36, 24, .15) !important;

  border-radius: 12px !important;

  background: #fff !important;

  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

input:focus,
textarea:focus,
select:focus,
.s-form-control:focus {
  outline: none !important;

  border-color: var(--ds-gold) !important;

  box-shadow:
    0 0 0 3px rgba(199, 154, 69, .10) !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer,
.store-footer {
  position: relative;

  background: var(--ds-brown) !important;

  color: #F5EEE6 !important;
}

footer::before,
.store-footer::before {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 100%;
  height: 3px;

  background: linear-gradient(
    90deg,
    transparent,
    var(--ds-gold),
    transparent
  );
}

footer h2,
footer h3,
footer h4,
.store-footer h2,
.store-footer h3,
.store-footer h4 {
  color: var(--ds-gold-light) !important;
}

footer a,
.store-footer a {
  color: #EFE5DA !important;

  transition:
    color .25s ease,
    opacity .25s ease;
}

footer a:hover,
.store-footer a:hover {
  color: var(--ds-gold-light) !important;
}


/* =========================================================
   SOCIAL ICONS
   ========================================================= */

footer .social-link,
.social-icons a {
  width: 40px;
  height: 40px;

  border: 1px solid rgba(255,255,255,.15);

  border-radius: 50%;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease;
}

footer .social-link:hover,
.social-icons a:hover {
  background: var(--ds-gold);

  color: var(--ds-brown) !important;

  transform: translateY(-3px);
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp,
.whatsapp-button,
a[href*="wa.me"] {
  transition:
    transform .25s ease,
    filter .25s ease !important;
}

.whatsapp:hover,
.whatsapp-button:hover,
a[href*="wa.me"]:hover {
  transform: translateY(-3px) scale(1.035);
}


/* =========================================================
   REVEAL ANIMATION
   للأقسام فقط — ليس المنتجات
   ========================================================= */

.ds-reveal {
  opacity: 0;

  transform: translateY(24px);

  transition:
    opacity .65s ease,
    transform .65s ease;
}

.ds-reveal.ds-visible {
  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   SCROLL TOP
   ========================================================= */

#ds-scroll-top {
  position: fixed;

  left: 22px;
  bottom: 24px;

  width: 46px;
  height: 46px;

  padding: 0;

  border: 1px solid rgba(199, 154, 69, .35);

  border-radius: 50%;

  background: var(--ds-brown);

  color: #fff;

  cursor: pointer;

  z-index: 9999;

  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 20px;

  opacity: 0;
  visibility: hidden;

  transform: translateY(15px);

  box-shadow:
    0 7px 22px rgba(58,36,24,.25);

  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .25s ease,
    background .25s ease;
}

#ds-scroll-top.show {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);
}

#ds-scroll-top:hover {
  background: var(--ds-gold);

  transform: translateY(-3px);
}


/* =========================================================
   GOLD TEXT UTILITY
   ========================================================= */

.ds-gold-text {
  background: linear-gradient(
    90deg,
    #9F712C,
    #D8B567,
    #A7782F
  );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

  body {
    font-size: 14px;
  }

  h1 {
    font-size: 26px !important;

    line-height: 1.45 !important;
  }

  h2,
  .section-title {
    font-size: 21px !important;
  }

  .category-card,
  .category-entry,
  .s-category-card {
    border-radius: 16px !important;
  }

  #ds-scroll-top {
    width: 42px;
    height: 42px;

    left: 14px;
    bottom: 18px;

    font-size: 18px;
  }

  .testimonial,
  .review-card,
  .s-testimonial-item {
    padding: 18px !important;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;

    scroll-behavior: auto !important;
  }
}

/* =========================================================
   DAR SUFYAN — PREMIUM SALLA THEME 2026
   نسخة محسنة وآمنة
   -----------------------------------------
   ✓ تحسين الهيدر والقوائم
   ✓ البنرات
   ✓ التصنيفات
   ✓ المميزات
   ✓ صفحة المنتج
   ✓ قائمة الجوال
   ✓ الفوتر
   ✓ الجوال
   ✕ لا تعديل على بطاقات المنتجات
   ✕ لا تعديل على زر أضف للسلة
   ✕ لا شريط إضافي أعلى الموقع
   ========================================================= */

:root {

  /* الهوية */
  --ds-brown-950: #24150E;
  --ds-brown-900: #302017;
  --ds-brown-800: #3A2418;
  --ds-brown-700: #513426;
  --ds-brown-600: #6B4936;

  --ds-gold-700: #9F712C;
  --ds-gold-600: #B9893E;
  --ds-gold-500: #C79A45;
  --ds-gold-400: #DDBB72;
  --ds-gold-300: #ECD39A;

  --ds-ivory: #FCFAF6;
  --ds-cream: #F6EFE5;
  --ds-beige: #EEE2D2;
  --ds-white: #FFFFFF;

  --ds-text: #2C211A;
  --ds-muted: #75675D;

  --ds-border: rgba(58,36,24,.12);
  --ds-gold-border: rgba(199,154,69,.30);

  --ds-shadow-sm:
    0 5px 18px rgba(58,36,24,.06);

  --ds-shadow:
    0 12px 32px rgba(58,36,24,.09);

  --ds-shadow-lg:
    0 20px 50px rgba(58,36,24,.14);

  --ds-radius-sm: 10px;
  --ds-radius-md: 16px;
  --ds-radius-lg: 22px;
  --ds-radius-xl: 28px;

  --ds-transition:
    220ms cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   1. GENERAL
   ========================================================= */

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

body {
  overflow-x: hidden;

  color: var(--ds-text);

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(199,154,69,.055),
      transparent 32rem
    ),
    linear-gradient(
      180deg,
      #FCFAF6 0%,
      #FFFFFF 35%,
      #FAF6F0 100%
    ) !important;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* لا نغير خط القالب */

body,
button,
input,
select,
textarea {
  font-family: inherit !important;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


::selection {
  color: #fff;
  background: var(--ds-gold-500);
}


img {
  max-width: 100%;
}


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


/* =========================================================
   2. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #F4EFE8;
}

::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      180deg,
      var(--ds-gold-400),
      var(--ds-gold-600)
    );

  border-radius: 30px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ds-brown-800);
}

  

/* =========================================================
   LOGO
   ========================================================= */

.navbar-brand img {
  width: auto !important;

  max-width: 135px !important;
  max-height: 82px !important;

  object-fit: contain !important;

  filter:
    drop-shadow(
      0 3px 7px rgba(58,36,24,.08)
    );

  transition:
    transform .25s ease,
    filter .25s ease;
}

.navbar-brand img:hover {
  transform: scale(1.025);

  filter:
    drop-shadow(
      0 5px 11px rgba(58,36,24,.13)
    );
}


/* =========================================================
   HEADER ICONS
   ========================================================= */

.store-header .s-cart-summary-wrapper,
.store-header .s-search-icon,
.store-header .s-user-menu-trigger,
.header-rounded-btn,
.s-user-menu-login-btn {

  color:
    var(--ds-brown-900) !important;

  background:
    rgba(255,255,255,.88) !important;

  border:
    1px solid var(--ds-border) !important;

  border-radius:
    999px !important;

  box-shadow:
    0 4px 14px rgba(58,36,24,.055);

  transition:
    transform .22s ease,
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}


.store-header .s-cart-summary-wrapper:hover,
.store-header .s-search-icon:hover,
.store-header .s-user-menu-trigger:hover,
.header-rounded-btn:hover,
.s-user-menu-login-btn:hover {

  color:
    var(--ds-brown-950) !important;

  background:
    #FFF9EF !important;

  border-color:
    rgba(199,154,69,.50) !important;

  box-shadow:
    0 7px 18px rgba(58,36,24,.10);

  transform:
    translateY(-2px);
}


/* SVG */

.store-header svg,
.main-nav svg {
  opacity: 1;
}


/* عداد السلة */

.s-cart-summary-count,
.s-cart-count,
.cart-count {

  background:
    var(--ds-gold-600) !important;

  color:
    #fff !important;

  border:
    2px solid var(--ds-ivory) !important;

  font-weight:
    900 !important;
}


/* =========================================================
   4. MAIN MENU
   ========================================================= */

.main-menu > li > a,
.main-nav-container nav a {

  position:
    relative;

  color:
    var(--ds-brown-900) !important;

  font-weight:
    700 !important;

  transition:
    color .2s ease;
}


.main-menu > li > a:hover,
.main-nav-container nav a:hover {

  color:
    var(--ds-gold-700) !important;
}


/* خط ذهبي عند المرور */

.main-menu > li > a::after {

  position:
    absolute;

  right:
    14px;

  bottom:
    2px;

  left:
    14px;

  height:
    2px;

  content:
    "";

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ds-gold-500),
      transparent
    );

  opacity:
    0;

  transform:
    scaleX(.35);

  transition:
    opacity .2s ease,
    transform .2s ease;
}


.main-menu > li > a:hover::after,
.main-menu > li.active > a::after {

  opacity:
    1;

  transform:
    scaleX(1);
}


/* =========================================================
   5. DROPDOWN MENU
   ========================================================= */

.main-menu .sub-menu,
.main-menu ul,
.dropdown-menu {

  overflow:
    hidden;

  padding:
    8px !important;

  background:
    rgba(255,250,243,.99) !important;

  border:
    1px solid var(--ds-border) !important;

  border-radius:
    var(--ds-radius-md) !important;

  box-shadow:
    var(--ds-shadow) !important;
}


.main-menu .sub-menu a,
.dropdown-menu a {

  color:
    var(--ds-brown-900) !important;

  border-radius:
    9px;

  transition:
    color .18s ease,
    background .18s ease;
}


.main-menu .sub-menu a:hover,
.dropdown-menu a:hover {

  color:
    var(--ds-gold-700) !important;

  background:
    var(--ds-cream) !important;
}


/* =========================================================
   6. SEARCH
   ========================================================= */

.s-search-container,
.search-form,
.store-header input[type="search"],
.store-header input[type="text"] {

  background:
    var(--ds-white) !important;

  border:
    1px solid var(--ds-border) !important;

  border-radius:
    999px !important;

  box-shadow:
    0 4px 15px rgba(58,36,24,.04);
}


.store-header input[type="search"]:focus,
.store-header input[type="text"]:focus {

  border-color:
    var(--ds-gold-500) !important;

  outline:
    none !important;

  box-shadow:
    0 0 0 4px rgba(199,154,69,.10) !important;
}


/* =========================================================
   7. MAIN BANNER
   ========================================================= */

.s-block--main-slider,
.main-slider,
.home-slider {

  position:
    relative;

  overflow:
    hidden;

  margin-bottom:
    24px !important;
}


/* فقط داخل السلايدر */

.s-block--main-slider .swiper,
.main-slider .swiper,
.home-slider .swiper {

  overflow:
    hidden;

  border-radius:
    0 0 26px 26px;

  box-shadow:
    0 10px 35px rgba(58,36,24,.08);
}


.s-block--main-slider img,
.main-slider img,
.home-slider img {

  display:
    block;

  width:
    100% !important;

  height:
    auto !important;

  object-fit:
    cover;
}


/* =========================================================
   8. SLIDER DOTS
   ========================================================= */

.swiper-pagination-bullet {

  width:
    8px;

  height:
    8px;

  opacity:
    1;

  background:
    rgba(58,36,24,.28);
}


.swiper-pagination-bullet-active {

  width:
    25px;

  border-radius:
    999px;

  background:
    var(--ds-gold-500) !important;
}


/* =========================================================
   9. SLIDER ARROWS
   ========================================================= */

.swiper-button-next,
.swiper-button-prev,
.s-slider-next,
.s-slider-prev {

  color:
    var(--ds-brown-800) !important;

  background:
    rgba(255,250,243,.94) !important;

  border:
    1px solid var(--ds-border) !important;

  border-radius:
    50% !important;

  box-shadow:
    var(--ds-shadow-sm);
}


.swiper-button-next:hover,
.swiper-button-prev:hover,
.s-slider-next:hover,
.s-slider-prev:hover {

  color:
    #fff !important;

  background:
    var(--ds-brown-800) !important;
}


/* =========================================================
   10. FIXED BANNERS
   ========================================================= */

.s-block--banners,
.s-block--fixed-banner,
.fixed-banner {

  width:
    100% !important;

  padding-inline:
    16px !important;

  margin:
    18px auto 28px !important;
}


.s-block--banners a,
.s-block--fixed-banner a,
.fixed-banner a,
.banner-entry {

  display:
    block !important;

  overflow:
    hidden !important;

  width:
    100% !important;

  max-width:
    1500px !important;

  margin:
    0 auto !important;

  background:
    var(--ds-ivory);

  border:
    1px solid rgba(199,154,69,.20) !important;

  border-radius:
    var(--ds-radius-xl) !important;

  box-shadow:
    var(--ds-shadow-sm);
}


.s-block--banners img,
.s-block--fixed-banner img,
.fixed-banner img,
.banner-entry img {

  display:
    block !important;

  width:
    100% !important;

  height:
    auto !important;

  border:
    0 !important;
}


/* =========================================================
   11. SECTION SPACING
   ========================================================= */

.s-block {

  padding-top:
    30px;

  padding-bottom:
    30px;
}


/* =========================================================
   12. SECTION TITLES
   ========================================================= */

.s-block__title,
.s-slider-block__title,
.section-title {

  margin-bottom:
    22px !important;
}


.s-block__title h2,
.s-block__title h3,
.s-slider-block__title h2,
.s-slider-block__title h3 {

  position:
    relative;

  display:
    inline-block;

  color:
    var(--ds-brown-950) !important;

  font-weight:
    900 !important;

  letter-spacing:
    -.015em;
}


/* الخط الذهبي */

.s-block__title h2::after,
.s-block__title h3::after,
.s-slider-block__title h2::after,
.s-slider-block__title h3::after {

  display:
    block;

  width:
    58px;

  height:
    2px;

  margin-top:
    9px;

  content:
    "";

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      var(--ds-gold-500),
      rgba(199,154,69,.30),
      transparent
    );
}


.s-block__title p,
.s-slider-block__title p {

  color:
    var(--ds-muted) !important;

  line-height:
    1.9;
}


/* =========================================================
   13. VIEW ALL BUTTON
   ========================================================= */

.s-block__display-all,
.s-slider-block__display-all {

  padding:
    8px 17px !important;

  color:
    var(--ds-brown-900) !important;

  background:
    var(--ds-ivory) !important;

  border:
    1px solid var(--ds-gold-border) !important;

  border-radius:
    999px !important;

  font-weight:
    800 !important;
}


.s-block__display-all:hover,
.s-slider-block__display-all:hover {

  color:
    #fff !important;

  background:
    var(--ds-brown-900) !important;

  border-color:
    var(--ds-brown-900) !important;
}


/* =========================================================
   14. CATEGORIES
   لا يشمل المنتجات
   ========================================================= */

.s-block--square-photos,
.s-block--photos-slider,
.s-block--categories,
.s-block--featured-categories,
.square-photos,
.categories-slider,
.quick-links {

  overflow:
    hidden;

  padding:
    26px 18px !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(199,154,69,.08),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #FFFBF5,
      #F8F1E8
    ) !important;

  border:
    1px solid rgba(199,154,69,.15);

  border-radius:
    var(--ds-radius-xl);

  box-shadow:
    var(--ds-shadow-sm);
}


/* كروت التصنيفات */

.s-block--square-photos a,
.s-block--photos-slider .swiper-slide > a,
.s-block--categories .swiper-slide > a,
.s-block--featured-categories a,
.square-photos a,
.categories-slider a,
.quick-links a,
.s-category-card,
.category-card {

  overflow:
    hidden !important;

  background:
    rgba(255,255,255,.94) !important;

  border:
    1px solid rgba(199,154,69,.25) !important;

  border-radius:
    var(--ds-radius-lg) !important;

  box-shadow:
    var(--ds-shadow-sm);

  transition:
    transform .27s ease,
    border-color .27s ease,
    box-shadow .27s ease;
}


.s-block--square-photos a:hover,
.s-block--photos-slider .swiper-slide > a:hover,
.s-block--categories .swiper-slide > a:hover,
.s-block--featured-categories a:hover,
.square-photos a:hover,
.categories-slider a:hover,
.quick-links a:hover,
.s-category-card:hover,
.category-card:hover {

  border-color:
    rgba(199,154,69,.57) !important;

  box-shadow:
    var(--ds-shadow);

  transform:
    translateY(-3px);
}


/* الصور */

.s-block--square-photos img,
.s-block--photos-slider img,
.s-block--categories img,
.s-block--featured-categories img,
.square-photos img,
.categories-slider img,
.quick-links img {

  display:
    block;

  width:
    100%;

  border:
    0 !important;

  transition:
    transform .35s ease;
}


.s-block--square-photos a:hover img,
.s-block--photos-slider .swiper-slide > a:hover img,
.s-block--categories .swiper-slide > a:hover img,
.s-block--featured-categories a:hover img,
.square-photos a:hover img,
.categories-slider a:hover img,
.quick-links a:hover img {

  transform:
    scale(1.022);
}


/* اسم التصنيف */

.s-block--square-photos h3,
.s-block--photos-slider h3,
.s-block--categories h3,
.s-block--featured-categories h3,
.square-photos h3,
.categories-slider h3,
.quick-links h3,
.s-category-card h3,
.category-card h3 {

  color:
    var(--ds-brown-900) !important;

  font-weight:
    900 !important;

  line-height:
    1.6;
}


/* =========================================================
   15. FEATURES
   ========================================================= */

.s-block--features,
.store-features,
.feature-section {

  padding:
    28px 18px !important;

  margin-block:
    25px !important;

  background:
    linear-gradient(
      135deg,
      #FFF9F1,
      #FFFFFF
    ) !important;

  border:
    1px solid rgba(199,154,69,.17);

  border-radius:
    var(--ds-radius-xl);

  box-shadow:
    var(--ds-shadow-sm);
}


.s-block--features .feature-item,
.s-block--features .s-feature,
.store-features .feature-item,
.s-features-list .s-features-list-item {

  padding:
    20px 16px !important;

  background:
    rgba(255,255,255,.93) !important;

  border:
    1px solid rgba(199,154,69,.20) !important;

  border-radius:
    var(--ds-radius-lg) !important;

  box-shadow:
    0 5px 16px rgba(58,36,24,.04);

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}


.s-block--features .feature-item:hover,
.s-block--features .s-feature:hover,
.store-features .feature-item:hover,
.s-features-list .s-features-list-item:hover {

  border-color:
    rgba(199,154,69,.48) !important;

  box-shadow:
    var(--ds-shadow-sm);

  transform:
    translateY(-3px);
}


.s-block--features i,
.store-features i,
.s-features-list i {

  color:
    var(--ds-gold-600) !important;
}


.s-block--features h3,
.store-features h3,
.s-features-list h3 {

  color:
    var(--ds-brown-950) !important;

  font-weight:
    900 !important;
}


.s-block--features p,
.store-features p,
.s-features-list p {

  color:
    var(--ds-muted) !important;

  line-height:
    1.9;
}


/* =========================================================
   IMPORTANT:
   لا يوجد هنا أي selector لبطاقة المنتج
   ========================================================= */


/* =========================================================
   16. PRODUCT PAGE
   ليس بطاقة المنتج
   ========================================================= */

.product-single__title,
.s-product-title,
.product-title,
.product-details h1,
.product-entry--page h1 {

  color:
    var(--ds-brown-950) !important;

  opacity:
    1 !important;

  font-weight:
    900 !important;

  line-height:
    1.55;
}


/* سعر صفحة المنتج فقط */

.product-single__price,
.s-product-price {

  color:
    var(--ds-gold-700) !important;

  font-weight:
    900 !important;
}


/* معرض صفحة المنتج */

.details-slider,
.product-gallery,
.product-single__media,
.s-product-single-gallery {

  overflow:
    hidden;

  background:
    #FAF6F0 !important;

  border:
    1px solid rgba(199,154,69,.20) !important;

  border-radius:
    var(--ds-radius-xl) !important;

  box-shadow:
    var(--ds-shadow-sm);
}


.details-slider img,
.product-gallery img,
.product-single__media img,
.s-product-single-gallery img {

  background:
    transparent !important;

  object-fit:
    contain !important;

  object-position:
    center center !important;
}


/* الصور المصغرة */

.product-single__thumbnails img,
.s-slider-thumbnails img {

  padding:
    4px !important;

  background:
    #fff !important;

  border:
    1px solid var(--ds-border) !important;

  border-radius:
    11px !important;
}


/* =========================================================
   17. PRODUCT DESCRIPTION
   ========================================================= */

#product-details,
.product__description,
.product-description,
.s-product-description-content,
.product-tabs .tab-content {

  padding:
    27px 31px !important;

  color:
    var(--ds-text) !important;

  background:
    linear-gradient(
      180deg,
      #FFFCF8,
      #FFFFFF
    ) !important;

  border:
    1px solid rgba(199,154,69,.24) !important;

  border-radius:
    22px !important;

  box-shadow:
    0 9px 25px rgba(58,36,24,.045);

  line-height:
    2.1 !important;
}


#product-details h2,
#product-details h3,
.product__description h2,
.product__description h3,
.product-description h2,
.product-description h3,
.s-product-description-content h2,
.s-product-description-content h3 {

  color:
    var(--ds-brown-900) !important;

  font-weight:
    900 !important;

  margin-bottom:
    16px !important;
}


#product-details p,
.product__description p,
.product-description p,
.s-product-description-content p {

  color:
    #59483C !important;

  line-height:
    2.15 !important;
}


.product__description ul,
.product__description ol,
.product-description ul,
.product-description ol,
.s-product-description-content ul,
.s-product-description-content ol {

  padding:
    15px 22px !important;

  background:
    rgba(246,239,229,.55);

  border:
    1px solid rgba(199,154,69,.15);

  border-radius:
    14px;

  line-height:
    2;
}


/* =========================================================
   18. FORMS
   ========================================================= */

input,
select,
textarea,
.form-input,
.s-form-control {

  color:
    var(--ds-text);

  background:
    #fff !important;

  border-color:
    var(--ds-border) !important;

  border-radius:
    11px !important;
}


input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.s-form-control:focus {

  border-color:
    var(--ds-gold-500) !important;

  outline:
    none !important;

  box-shadow:
    0 0 0 4px rgba(199,154,69,.10) !important;
}


/* =========================================================
   19. BREADCRUMB
   ========================================================= */

.breadcrumb,
.s-breadcrumb-wrapper {

  color:
    var(--ds-muted);

  background:
    var(--ds-cream);

  border:
    1px solid var(--ds-border);

  border-radius:
    var(--ds-radius-md);
}


/* =========================================================
   20. RATINGS
   ========================================================= */

.sicon-star,
.sicon-star2,
.star-rating,
.rating-stars {

  color:
    var(--ds-gold-500) !important;
}


/* =========================================================
   21. MOBILE DRAWER
   ========================================================= */

.mobile-menu,
.side-menu,
.s-drawer,
.s-offcanvas {

  color:
    var(--ds-ivory) !important;

  background:
    linear-gradient(
      180deg,
      var(--ds-brown-950),
      var(--ds-brown-800)
    ) !important;
}


.mobile-menu h2,
.mobile-menu h3,
.side-menu h2,
.side-menu h3,
.s-drawer h2,
.s-drawer h3,
.s-offcanvas h2,
.s-offcanvas h3 {

  color:
    var(--ds-gold-300) !important;

  opacity:
    1 !important;

  font-weight:
    900 !important;
}


.mobile-menu a,
.mobile-menu a span,
.side-menu a,
.side-menu a span,
.s-drawer a,
.s-drawer a span,
.s-offcanvas a,
.s-offcanvas a span {

  color:
    var(--ds-ivory) !important;

  opacity:
    1 !important;

  font-weight:
    700 !important;
}


.mobile-menu a:hover,
.side-menu a:hover,
.s-drawer a:hover,
.s-offcanvas a:hover {

  color:
    var(--ds-gold-300) !important;
}


.mobile-menu li,
.side-menu li,
.s-drawer li,
.s-offcanvas li {

  border-bottom:
    1px solid rgba(236,211,154,.12) !important;
}


/* =========================================================
   22. FOOTER
   ========================================================= */

.store-footer,
footer.store-footer,
footer {

  position:
    relative;

  color:
    rgba(252,250,246,.90) !important;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(199,154,69,.14),
      transparent 29rem
    ),
    linear-gradient(
      135deg,
      var(--ds-brown-950),
      var(--ds-brown-800)
    ) !important;
}


.store-footer::before,
footer::before {

  position:
    absolute;

  top:
    0;

  right:
    0;

  left:
    0;

  height:
    2px;

  content:
    "";

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--ds-gold-500),
      transparent
    );
}


.store-footer h2,
.store-footer h3,
.store-footer h4,
footer h2,
footer h3,
footer h4 {

  color:
    var(--ds-gold-300) !important;
}


.store-footer a,
footer a {

  color:
    rgba(252,250,246,.83) !important;
}


.store-footer a:hover,
footer a:hover {

  color:
    var(--ds-gold-300) !important;
}


.copyright,
.footer-copyright {

  background:
    rgba(18,10,6,.27) !important;

  border-top:
    1px solid rgba(255,255,255,.07);
}


/* =========================================================
   23. WHATSAPP
   ========================================================= */

.fixed-whatsapp,
.whatsapp-button,
a[href*="whatsapp"],
a[href*="wa.me"] {

  transition:
    transform .25s ease,
    filter .25s ease;
}


.fixed-whatsapp:hover,
.whatsapp-button:hover,
a[href*="whatsapp"]:hover,
a[href*="wa.me"]:hover {

  transform:
    translateY(-3px) scale(1.03);
}


/* =========================================================
   24. JS REVEAL
   ========================================================= */

.ds-reveal {

  opacity:
    0;

  transform:
    translateY(20px);

  transition:
    opacity .6s ease,
    transform .6s ease;
}


.ds-reveal.ds-visible {

  opacity:
    1;

  transform:
    none;
}


/* =========================================================
   25. BACK TO TOP
   ========================================================= */

#ds-scroll-top {

  position:
    fixed;

  left:
    22px;

  bottom:
    24px;

  z-index:
    9999;

  display:
    grid;

  width:
    46px;

  height:
    46px;

  place-items:
    center;

  padding:
    0;

  color:
    #fff;

  cursor:
    pointer;

  background:
    linear-gradient(
      135deg,
      var(--ds-brown-900),
      var(--ds-brown-600)
    );

  border:
    1px solid rgba(255,255,255,.15);

  border-radius:
    50%;

  box-shadow:
    0 10px 25px rgba(58,36,24,.22);

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(12px);

  transition:
    opacity .23s ease,
    visibility .23s ease,
    transform .23s ease,
    background .23s ease;
}


#ds-scroll-top.show {

  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0);
}


#ds-scroll-top:hover {

  background:
    var(--ds-gold-600);

  transform:
    translateY(-3px);
}


/* =========================================================
   26. ACCESSIBILITY
   ========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {

  outline:
    2px solid var(--ds-gold-500);

  outline-offset:
    3px;
}


/* =========================================================
   27. TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .navbar-brand img {

    max-width:
      118px !important;

    max-height:
      70px !important;
  }

}


/* =========================================================
   28. MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .navbar-brand img {

    max-width:
      96px !important;

    max-height:
      60px !important;
  }


  .s-block {

    padding-top:
      22px;

    padding-bottom:
      22px;
  }


  .s-block__title h2,
  .s-slider-block__title h2 {

    font-size:
      22px !important;
  }


  .s-block__title p,
  .s-slider-block__title p {

    font-size:
      14px !important;
  }


  .s-block--square-photos,
  .s-block--photos-slider,
  .s-block--categories,
  .s-block--featured-categories,
  .square-photos,
  .categories-slider,
  .quick-links {

    padding:
      16px 10px !important;

    border-radius:
      19px;
  }


  .s-block--features,
  .store-features,
  .feature-section {

    padding:
      18px 10px !important;

    border-radius:
      19px;
  }


  #product-details,
  .product__description,
  .product-description,
  .s-product-description-content,
  .product-tabs .tab-content {

    padding:
      19px 16px !important;

    border-radius:
      17px !important;

    font-size:
      14px !important;
  }


  #ds-scroll-top {

    left:
      14px;

    bottom:
      17px;

    width:
      42px;

    height:
      42px;
  }


  .s-block--main-slider .swiper,
  .main-slider .swiper,
  .home-slider .swiper {

    border-radius:
      0 0 18px 18px;
  }

}


/* =========================================================
   29. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}


/* =========================================================
   DAR SUFYAN — MOBILE MENU FINAL FIX
   القائمة الرئيسية داكنة + القوائم الفرعية فاتحة وواضحة
   ========================================================= */


/* ===== خلفية القائمة الرئيسية ===== */

.mobile-menu,
.side-menu,
.s-drawer,
.s-offcanvas {
  background: #252525 !important;
  color: #fff !important;
}


/* ===== روابط المستوى الرئيسي فقط ===== */

.mobile-menu > ul > li > a,
.side-menu > ul > li > a,
.s-drawer > ul > li > a,
.s-offcanvas > ul > li > a,

.mobile-menu .menu-item > a,
.side-menu .menu-item > a {
  color: #FCFAF6 !important;
  -webkit-text-fill-color: #FCFAF6 !important;
  opacity: 1 !important;
  font-weight: 700 !important;
}


/* =========================================================
   القائمة الفرعية
   ========================================================= */

.mobile-menu .sub-menu,
.mobile-menu ul ul,
.side-menu .sub-menu,
.side-menu ul ul,
.s-drawer .sub-menu,
.s-drawer ul ul,
.s-offcanvas .sub-menu,
.s-offcanvas ul ul,
.dropdown-menu {

  background: #FCF7EF !important;

  border: 1px solid rgba(199,154,69,.24) !important;

  border-radius: 22px !important;

  padding: 10px !important;

  box-shadow:
    0 8px 24px rgba(58,36,24,.08) !important;
}


/* ===== نص القائمة الفرعية ===== */

.mobile-menu .sub-menu a,
.mobile-menu .sub-menu a *,
.mobile-menu ul ul a,
.mobile-menu ul ul a *,

.side-menu .sub-menu a,
.side-menu .sub-menu a *,
.side-menu ul ul a,
.side-menu ul ul a *,

.s-drawer .sub-menu a,
.s-drawer .sub-menu a *,
.s-drawer ul ul a,
.s-drawer ul ul a *,

.s-offcanvas .sub-menu a,
.s-offcanvas .sub-menu a *,
.s-offcanvas ul ul a,
.s-offcanvas ul ul a *,

.dropdown-menu a,
.dropdown-menu a * {

  color: #3A2418 !important;

  -webkit-text-fill-color: #3A2418 !important;

  background-image: none !important;

  opacity: 1 !important;

  text-shadow: none !important;

  font-weight: 700 !important;
}


/* =========================================================
   كل عنصر فرعي
   ========================================================= */

.mobile-menu .sub-menu li,
.mobile-menu ul ul li,
.side-menu .sub-menu li,
.side-menu ul ul li,
.s-drawer .sub-menu li,
.s-drawer ul ul li,
.s-offcanvas .sub-menu li,
.s-offcanvas ul ul li {

  background: transparent !important;

  border-bottom:
    1px solid rgba(58,36,24,.07) !important;
}


/* آخر عنصر بدون خط */

.mobile-menu .sub-menu li:last-child,
.mobile-menu ul ul li:last-child,
.side-menu .sub-menu li:last-child,
.side-menu ul ul li:last-child {
  border-bottom: none !important;
}


/* =========================================================
   Hover للقائمة الفرعية
   ========================================================= */

.mobile-menu .sub-menu a:hover,
.mobile-menu ul ul a:hover,

.side-menu .sub-menu a:hover,
.side-menu ul ul a:hover,

.s-drawer .sub-menu a:hover,
.s-drawer ul ul a:hover,

.s-offcanvas .sub-menu a:hover,
.s-offcanvas ul ul a:hover {

  color: #A9782D !important;

  -webkit-text-fill-color: #A9782D !important;

  background: #F4E8D6 !important;

  border-radius: 14px !important;
}


/* =========================================================
   القسم المحدد
   ========================================================= */

.mobile-menu .sub-menu .active > a,
.mobile-menu ul ul .active > a,

.side-menu .sub-menu .active > a,
.side-menu ul ul .active > a,

.s-drawer .sub-menu .active > a,
.s-offcanvas .sub-menu .active > a {

  color: #9F712C !important;

  -webkit-text-fill-color: #9F712C !important;

  background: #F2E5D0 !important;

  border-radius: 14px !important;

  font-weight: 800 !important;
}


/* =========================================================
   عنوان القسم الرئيسي
   مثل: أثاث منزلي
   ========================================================= */

.mobile-menu h2,
.mobile-menu h3,
.side-menu h2,
.side-menu h3,
.s-drawer h2,
.s-drawer h3,
.s-offcanvas h2,
.s-offcanvas h3 {

  color: #FFFFFF !important;

  -webkit-text-fill-color: #FFFFFF !important;

  opacity: 1 !important;

  font-weight: 800 !important;
}


/* =========================================================
   الصور الدائرية بجانب الأقسام
   ========================================================= */

.mobile-menu img,
.side-menu img,
.s-drawer img,
.s-offcanvas img {

  border-radius: 50%;

  border: 1px solid rgba(199,154,69,.35);

  background: #F6EFE5;
}


/* =========================================================
   زر الإغلاق
   ========================================================= */

.mobile-menu button,
.side-menu button,
.s-drawer button,
.s-offcanvas button {

  color: #FFFFFF !important;

  -webkit-text-fill-color: #FFFFFF !important;
}


/* =========================================================
   SVG / Icons
   ========================================================= */

.mobile-menu svg,
.side-menu svg,
.s-drawer svg,
.s-offcanvas svg {

  color: #DDBB72 !important;

  stroke: currentColor !important;
}


/* ===== جدول مواصفات المنتج - الجواهر للأثاث ===== */

.jawaher-product-desc {
    direction: rtl;
    text-align: right;
    color: #303030;
    font-size: 15px;
    line-height: 1.9;
}

/* وصف المنتج */
.jawaher-desc-intro {
    margin-bottom: 22px;
    line-height: 2;
}

/* جدول المواصفات */
.jawaher-spec-table {
    width: 100%;
    border: 1px solid #E9E9E9;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

/* كل سطر */
.jawaher-spec-row {
    display: grid;
    grid-template-columns: 35% 65%;
    min-height: 48px;
    border-bottom: 1px solid #E9E9E9;
}

.jawaher-spec-row:last-child {
    border-bottom: none;
}

/* اسم المواصفة */
.jawaher-spec-label {
    display: flex;
    align-items: center;
    padding: 11px 15px;
    font-weight: 700;
    color: #153150;
    background: #F7F5F2;
    border-left: 1px solid #E9E9E9;
}

/* القيمة */
.jawaher-spec-value {
    display: flex;
    align-items: center;
    padding: 11px 15px;
    color: #333;
    background: #fff;
}

/* بند بدون قيمة */
.jawaher-spec-full {
    grid-column: 1 / -1;
    padding: 11px 15px;
    background: #fff;
}

/* للجوال */
@media (max-width: 600px) {

    .jawaher-spec-row {
        grid-template-columns: 40% 60%;
        min-height: 44px;
    }

    .jawaher-spec-label,
    .jawaher-spec-value,
    .jawaher-spec-full {
        padding: 9px 10px;
        font-size: 13px;
    }
}


/* ===== تنسيق تفاصيل المنتج - الجواهر للأثاث ===== */

.product-description-vertical {
    direction: rtl !important;
    text-align: right !important;
    font-size: 15px;
    line-height: 2;
    color: #303030;
}

.product-description-vertical .jawaher-intro {
    margin-bottom: 18px;
    line-height: 2;
}

.product-description-vertical .jawaher-specs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.product-description-vertical .jawaher-spec {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: #F7F5F2;
    border: 1px solid #E9E9E9;
    border-right: 3px solid #153150;
    border-radius: 7px;
    box-sizing: border-box;
}

.product-description-vertical .jawaher-spec::before {
    content: "•";
    color: #E34B20;
    font-size: 20px;
    font-weight: bold;
    margin-left: 8px;
}

/* الجوال */
@media (max-width: 768px) {
    .product-description-vertical {
        font-size: 14px;
        line-height: 1.9;
    }

    .product-description-vertical .jawaher-spec {
        padding: 9px 11px;
    }
}


/* ===== تنسيق تفاصيل المنتج - الجواهر للأثاث ===== */

.product-description-vertical {
    direction: rtl !important;
    text-align: right !important;
    font-size: 15px;
    line-height: 2;
    color: #303030;
}

.product-description-vertical .jawaher-intro {
    margin-bottom: 18px;
    line-height: 2;
}

.product-description-vertical .jawaher-specs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
}

.product-description-vertical .jawaher-spec {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: #F7F5F2;
    border: 1px solid #E9E9E9;
    border-right: 3px solid #153150;
    border-radius: 7px;
    box-sizing: border-box;
}

.product-description-vertical .jawaher-spec::before {
    content: "•";
    color: #E34B20;
    font-size: 20px;
    font-weight: bold;
    margin-left: 8px;
}

/* الجوال */
@media (max-width: 768px) {
    .product-description-vertical {
        font-size: 14px;
        line-height: 1.9;
    }

    .product-description-vertical .jawaher-spec {
        padding: 9px 11px;
    }
}