:root {
	--wd-text-font: "Rajdhani", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 600;
	--wd-text-color: rgb(244,242,242);
	--wd-text-font-size: 16px;
	--wd-title-font: "Rajdhani", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: rgb(244,242,242);
	--wd-entities-title-font: "Rajdhani", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 700;
	--wd-entities-title-color: rgb(244,242,242);
	--wd-entities-title-color-hover: rgb(122, 125, 125);
	--wd-alternative-font: "Rajdhani", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Rajdhani", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 700;
	--wd-widget-title-transform: capitalize;
	--wd-widget-title-color: rgb(244,242,242);
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Rajdhani", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 14px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(109,78,236);
	--wd-alternative-color: rgb(235,230,255);
	--btn-default-font-family: "Rajdhani", Arial, Helvetica, sans-serif;
	--btn-default-font-weight: 600;
	--btn-default-bgcolor: rgb(109,78,236);
	--btn-default-bgcolor-hover: rgb(214,209,232);
	--btn-accented-font-family: "Rajdhani", Arial, Helvetica, sans-serif;
	--btn-accented-font-weight: 600;
	--btn-accented-bgcolor: rgb(109,78,236);
	--btn-accented-bgcolor-hover: rgb(99,71,214);
	--btn-accented-color: rgb(255,255,255);
	--btn-accented-color-hover: rgb(255,255,255);
	--btn-font-family: "Rajdhani", Arial, Helvetica, sans-serif;
	--btn-font-weight: 600;
	--btn-transform: capitalize;
	--btn-bgcolor: rgb(109,78,236);
	--btn-bgcolor-hover: rgb(109,78,236);
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-link-color: rgba(255,255,255,0.9);
	--wd-link-color-hover: rgb(109,78,236);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(16,30,79);
	background-image: none;
}
 {
	font-family: "Rajdhani", Arial, Helvetica, sans-serif;
	font-weight: 600;
}
html .wd-nav-mobile > li > a {
	font-family: "Rajdhani", Arial, Helvetica, sans-serif;
	font-weight: 600;
	text-transform: capitalize;
}
html .wd-dropdown-menu.wd-design-sized .sub-sub-menu li a, html .wd-dropdown-menu.wd-design-full-width .sub-sub-menu li a, body .wd-dropdown-menu.wd-design-aside .wd-wp-menu > .sub-sub-menu .sub-sub-menu li a, body .wd-dropdown-menu.wd-design-aside .wd-sub-menu .wd-sub-menu .sub-sub-menu li a {
	font-family: "Rajdhani", Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: rgb(255,255,255);
}
html .wd-dropdown-menu.wd-design-sized .sub-sub-menu li a:hover, html .wd-dropdown-menu.wd-design-full-width .sub-sub-menu li a:hover, body .wd-dropdown-menu.wd-design-aside .wd-wp-menu > .sub-sub-menu .sub-sub-menu  li a:hover, body .wd-dropdown-menu.wd-design-aside .wd-sub-menu .wd-sub-menu .sub-sub-menu li a:hover {
	color: rgb(122,125,125);
}
html table th {
	font-family: "Rajdhani", Arial, Helvetica, sans-serif;
	font-weight: 600;
	text-transform: none;
}
html .wd-checkout-steps {
	font-family: "Rajdhani", Arial, Helvetica, sans-serif;
	font-weight: 600;
	text-transform: capitalize;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(3,15,50);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: rgb(3,15,50);
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: rgb(3,15,50);
	background-image: none;
}
.woodmart-archive-blog :is(.wd-page-content, .whb-header) {
	background-color: rgb(3,15,50);
	background-image: none;
}
.single-post :is(.wd-page-content, .whb-header) {
	background-color: rgb(3,15,50);
	background-image: none;
}
.woodmart-archive-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(3,15,50);
	background-image: none;
}
.single-portfolio :is(.wd-page-content, .whb-header) {
	background-color: rgb(3,15,50);
	background-image: none;
}
html .btn.wd-buy-now-btn {
	font-family: "Rajdhani", Arial, Helvetica, sans-serif;
	font-weight: 600;
	color: rgb(244,242,242);
	background: rgb(109, 78, 236);
}
html .btn.wd-buy-now-btn:hover {
	color: rgb(244,242,242);
	background: rgb(214,209,232);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-bg: rgb(3,15,50);
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-color: rgb(255,252,252);
	--wd-arrow-color-hover: rgb(255,252,252);
}
.wd .product-label.onsale {
	background-color: rgb(230,57,70);
	color: rgb(255,255,255);
}
.wd .product-label.new {
	background-color: rgb(157,78,221);
	color: rgb(255,255,255);
}
.wd .product-label.featured {
	background-color: rgb(199,125,255);
	color: rgb(255,255,255);
}
.wd .product-label.out-of-stock {
	background-color: rgb(38,90,217);
}
.wd .product-label.attribute-label:not(.label-with-img) {
	background-color: rgb(150,156,165);
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}
:root{
--wd-container-w: 1520px;
--wd-form-brd-radius: 35px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-default-brd-radius: 35px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 35px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
--wd-brd-radius: 12px;
}

@media (min-width: 1520px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: rgba(151,151,151,0.11);
}

/* 1. تعريف التدرج البنفسجي وتحريك النجوم */
.star-rating, 
.star-rating span:before,
.star-rating.wd-style-simple:after {
    background: linear-gradient(135deg, #A78BFA 0%, #6D4EEC 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block;
    animation: starPulse 2.5s infinite ease-in-out;
}

/* 2. التحكم في حركة النبض والتوّهج البسيط جداً */
@keyframes starPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(109, 78, 236, 0)); /* بدون توهج في البداية */
    }
    50% {
        transform: scale(1.03); /* تكبير ناعم جداً وضئيل */
        filter: drop-shadow(0 0 2px rgba(109, 78, 236, 0.35)); /* توهج بسيط جداً وناعم */
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(109, 78, 236, 0));
    }
}

/* 3. تعديل لمتغيرات القالب الأساسية لضمان عدم التداخل */
:root {
    --wd-star-color: #6D4EEC;
}
------------------------------------------------------------------------
------------------------------------------------------------------------
/* 1. تهيئة الرابط الحاضر لصورة المنتج */
body:not(.single-product) .product-image-link {
    position: relative !important;
    display: block !important;
    overflow: hidden !important; /* لمنع خروج الوميض الزجاجي عن إطار الصورة */
}

/* 2. تصميم اللوح الزجاجي المائل المدمج بلونك #6D4EEC */
body:not(.single-product) .product-image-link::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important; /* البداية من خارج الصورة تماماً */
    width: 80% !important; /* عرض اللوح الزجاجي */
    height: 100% !important;
    
    /* تدرج زجاجي يدمج لمعان الأبيض مع درجتك البنفسجية المفضلة */
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.4) 30%, 
        rgba(109, 78, 236, 0.25) 50%, 
        rgba(255, 255, 255, 0.4) 70%, 
        rgba(255, 255, 255, 0) 100%
    ) !important;
    
    transform: skewX(-25deg) !important; /* إمالة اللوح الزجاجي */
    opacity: 0 !important; /* مخفي في الحالة العادية */
    transition: opacity 0.2s ease !important;
    pointer-events: none !important;
    z-index: 3 !important; /* لضمان ظهوره فوق طبقة الصورة مباشرة */
}

/* 3. تشغيل تأثير الـ Fade والأنيميشن الزجاجي عند تمرير الماوس */
body:not(.single-product) .product-grid-item:hover .product-image-link::after,
body:not(.single-product) .wd-product:hover .product-image-link::after,
body:not(.single-product) .product-list-item:hover .product-image-link::after,
body:not(.single-product) .product-image-link:hover::after {
    opacity: 1 !important;
    animation: glassFlashMove 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

/* 4. حركية مسار اللوح الزجاجي من زاوية إلى زاوية */
@keyframes glassFlashMove {
    0% {
        left: -150%;
    }
    100% {
        left: 150%;
    }
}

------------------------------------------------------
------------------------------------------------------

الازرار

/* 1. تجهيز جميع أزرار الموقع لاستقبال التأثير الداخلي (باستثناء أزرار البحث) */
button:not([class*="search"]):not([id*="search"]):not(.search-submit):not(.wp-block-search__button):not(.elementor-search-form__submit), 
input[type="button"]:not([class*="search"]):not([id*="search"]), 
input[type="submit"]:not([class*="search"]):not([id*="search"]):not(.search-submit), 
.button:not([class*="search"]):not(.search-submit), 
.btn:not([class*="search"]), 
.elementor-button:not([class*="search"]), 
.woocommerce a.button:not([class*="search"]), 
.woocommerce button.button:not([class*="search"]) {
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
    transition: color 0.3s ease !important; /* انتقال ناعم للون النص */
}

/* 2. إنشاء الطبقة المخفية المائلة (Skew) داخل الأزرار (باستثناء أزرار البحث) */
button:not([class*="search"]):not([id*="search"]):not(.search-submit):not(.wp-block-search__button):not(.elementor-search-form__submit)::after, 
input[type="button"]:not([class*="search"]):not([id*="search"])::after, 
input[type="submit"]:not([class*="search"]):not([id*="search"]):not(.search-submit)::after, 
.button:not([class*="search"]):not(.search-submit)::after, 
.btn:not([class*="search"])::after, 
.elementor-button:not([class*="search"])::after, 
.woocommerce a.button:not([class*="search"])::after, 
.woocommerce button.button:not([class*="search"])::after {
    content: "" !important;
    background: #FFFFFF !important; /* اللون الأبيض الذي سينفرش */
    position: absolute !important;
    z-index: -1 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -20% !important;
    right: -20% !important;
    /* انحراف 45 درجة وتصغير الحجم الأفقي إلى 0 (مخفي) */
    transform: skewX(-45deg) scaleX(0) !important;
    transform-origin: center !important; /* النمو يبدأ من المنتصف */
    transition: transform 0.4s ease !important;
}

/* 3. تأثير تمرير الماوس (Hover) - تغيير لون النص (باستثناء أزرار البحث) */
button:not([class*="search"]):not([id*="search"]):not(.search-submit):not(.wp-block-search__button):not(.elementor-search-form__submit):hover, 
input[type="button"]:not([class*="search"]):not([id*="search"]):hover, 
input[type="submit"]:not([class*="search"]):not([id*="search"]):not(.search-submit):hover, 
.button:not([class*="search"]):not(.search-submit):hover, 
.btn:not([class*="search"]):hover, 
.elementor-button:not([class*="search"]):hover, 
.woocommerce a.button:not([class*="search"]):hover, 
.woocommerce button.button:not([class*="search"]):hover {
    color: #030F32 !important; /* يتحول النص للون الكحلي الداكن ليظهر بوضوح فوق الأبيض */
}

/* 4. فرش الخلفية البيضاء عند الهوفر (باستثناء أزرار البحث) */
button:not([class*="search"]):not([id*="search"]):not(.search-submit):not(.wp-block-search__button):not(.elementor-search-form__submit):hover::after, 
input[type="button"]:not([class*="search"]):not([id*="search"]):hover::after, 
input[type="submit"]:not([class*="search"]):not([id*="search"]):not(.search-submit):hover::after, 
.button:not([class*="search"]):not(.search-submit):hover::after, 
.btn:not([class*="search"]):hover::after, 
.elementor-button:not([class*="search"]):hover::after, 
.woocommerce a.button:not([class*="search"]):hover::after, 
.woocommerce button.button:not([class*="search"]):hover::after {
    /* تمديد الحجم ليملأ الزر بالكامل عند الهوفر */
    transform: skewX(-45deg) scaleX(1) !important;
}

---------------------------------------------------------------------------
---------------------------------------------------------------------------

تحريك HOT,OUT STOCK

/* ==========================================================================
   1. كود النجوم الخاص بك (مع تحسينات بسيطة للتوافق الكامل)
   ========================================================================== */
.star-rating, 
.star-rating span:before,
.star-rating.wd-style-simple:after {
    background: linear-gradient(135deg, #A78BFA 0%, #6D4EEC 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block;
    animation: starPulse 2.5s infinite ease-in-out;
}

@keyframes starPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(109, 78, 236, 0));
    }
    50% {
        transform: scale(1.03);
        filter: drop-shadow(0 0 3px rgba(109, 78, 236, 0.5));
    }
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(109, 78, 236, 0));
    }
}

:root {
    --wd-star-color: #6D4EEC;
}

/* ==========================================================================
   2. تأثير النبض والتوهج لملصق المنتجات المميزة (Hot Label)
   ========================================================================== */
.product-label.featured,
.product-label.hot {
    animation: labelPulse 2s infinite ease-in-out;
    box-shadow: 0 0 0px rgba(199, 125, 255, 0);
    transition: all 0.3s ease;
}

@keyframes labelPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0px rgba(199, 125, 255, 0);
    }
    50% {
        transform: scale(1.05); /* تكبير بسيط جداً يلفت الانتباه */
        box-shadow: 0 0 8px rgba(199, 125, 255, 0.6); /* توهج بنفسجي رائع */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0px rgba(199, 125, 255, 0);
    }
}

/* ==========================================================================
   3. تأثير البريق اللامع لملصقات التخفيضات والجديد (Sale & New Labels)
   ========================================================================== */
.product-label.onsale,
.product-label.new {
    position: relative;
    overflow: hidden; /* لإخفاء البريق الخارجي */
}

/* إضافة طبقة البريق المتحرك */
.product-label.onsale::after,
.product-label.new::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: rgba(255, 255, 255, 0.5); /* خط البريق الأبيض */
    transform: rotate(30deg);
    animation: labelShine 3.5s infinite ease-in-out;
}

@keyframes labelShine {
    0% {
        left: -60%;
    }
    15% {
        left: 130%; /* يمر البريق بسرعة خلال أول 15% من الوقت */
    }
    100% {
        left: 130%; /* ينتظر باقي الوقت (تأثير السكون قبل الحركة التالية) */
    }
}


------------------------------------------------------------------
------------------------------------------------------------------

الأسعار


/* ==========================================================================
   تعديل لون جميع الأسعار في المتجر إلى اللون الأبيض
   ========================================================================== */

/* السعر الأساسي والأسعار داخل شبكة المنتجات والصفحة الرئيسية */
.price, 
.price bdi, 
.price span,
.amount,
.wd-price-unit {
    color: #F4F2F2 !important;
}

/* سعر المنتج داخل صفحة المنتج المفردة (Single Product Page) */
.summary-inner .price,
.summary-inner .price bdi,
.summary-inner .price .amount {
    color: #F4F2F2 !important;
}

/* أسعار المنتجات عند التخفيض (السعر الجديد بعد الخصم) */
ins .amount, 
ins bdi,
.price ins {
    color: #F4F2F2 !important;
}

/* السعر القديم المشطوب قبل التخفيض (اختياري: إذا كنت تريده أبيض باهت قليلاً حتى لا يشتت العميل، أو أبيض ناصع) */
/* إذا كنت تريده أبيض ناصع تماماً، يمكنك ترك الكود كما هو، أو تعديله لـ #FFFFFF */
del .amount, 
del bdi,
.price del {
    color: rgba(255, 255, 255, 0.6) !important; /* أبيض شفاف بنسبة 60% لتمييزه كشطب */
    text-decoration-color: #e63946 !important; /* يجعل خط الشطب باللون الأحمر للتنبيه بالخصم */
}

/* الأسعار داخل المصغرات والودجات الجانبية وسلة المشتريات (Mini Cart) */
.widget_shopping_cart .total .amount,
.wd-header-cart .wd-cart-subtotal .amount,
.product_list_widget .price .amount {
    color: #FFFFFF !important;
}

------------------------------------------------------------------------------
------------------------------------------------------------------------------

لون خط الازرار

/* ==========================================================================
   تغيير لون نصوص جميع الأزرار في المتجر إلى اللون الأبيض
   ========================================================================== */

/* استهداف جميع الأزرار الافتراضية، أزرار ووكومرس، وأزرار القالب */
button, 
input[type="submit"], 
input[type="button"], 
.btn, 
.button,
.wd-button,
.woocommerce .button,
.woocommerce .btn,
.woocommerce input.button {
    color: #FFFFFF !important;
}

/* التأكد من بقاء اللون أبيض حتى عند تمرير الماوس (Hover) فوق الأزرار */
button:hover, 
input[type="submit"]:hover, 
input[type="button"]:hover, 
.btn:hover, 
.button:hover,
.wd-button:hover,
.woocommerce .button:hover,
.woocommerce .btn:hover,
.woocommerce input.button:hover {
    color: #030F32 !important;
}

/* استهداف أزرار إضافة إلى السلة وأزرار الشراء السريع المحددة */
.single_add_to_cart_button,
.wd-add-cart-btn a,
.added_to_cart,
.view-cart-button {
    color: #FFFFFF !important;
}

/* أزرار سلة المشتريات الجانبية وصفحات السلة وإتمام الطلب (Cart & Checkout Buttons) */
.woocommerce-mini-cart__buttons .button,
.checkout-button,
.place-order .button,
.actions .button {
    color: #FFFFFF !important;
}

/* الأزرار المخصصة المصممة عبر باني الصفحات Elementor داخل القالب */
.elementor-button,
.elementor-button .elementor-button-text,
.elementor-button-content-wrapper {
    color: #FFFFFF !important;
}