:root {
    --bg-dark-main: #3a4146;     /* الخلفية الداكنة العميقة للموقع */
    --bg-card-dark: #3a4146;     /* خلفية البطاقات والعناصر */
    --primary-gold: #fcc22d;     /* اللون الذهبي/الأصفر للأزرار والنجوم */
    --primary-gold-hover: #e0aa22; /* درجة الذهبي عند التمرير */
    --text-white: #ffffff;
    --text-muted: #8a96a3;
    --color-primary: #000000;
    --color-primary-reverse: #ffffff;
    --text-color: #ffffff;
    --text-gray-600: rgb(255 255 255);
    --text-gray-500: rgb(255 255 255);
    --color-primary: rgb(255 255 255);
    --text-color: #000000;
    --text-color: #ffffff;
    --color-primary: rgb(34 40 47);
    --color-primary-light: rgba(0, 0, 0, 0);
    --color-primary: rgba(0, 0, 0, 0);
}


/* General Reset */
.s-quick-order-container {
    background-color: var(--bg-dark-main) !important;
}
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-dark-main);
    color: #c7ccd5;
    overflow-x: hidden;
}

/* Navigation Bar */
.main-nav-container {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.main-nav-container a {
    text-decoration: none;
    color: var(--text-white);
    padding: 10px 15px;
    display: inline-block;
    transition: color 0.3s ease;
}

.main-nav-container a:hover {
    color: var(--primary-gold);
}

/* Product Card Styling */
.s-product-card-entry {
    position: relative;
    padding: 20px;
    margin: 10px;
    background-color: var(--bg-card-dark);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.s-product-card-entry:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.s-product-card-entry img {
    max-width: 100%;
    border-radius: 8px;
}

.s-product-card-entry .price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-gold);
}

/* Buttons */
.s-button-element {
    padding: 10px 20px;
    font-size: 1rem;
    color: var(--text-white);
    background: linear-gradient(90deg, #232930, #1e2328);
    border: 1px solid var(--primary-gold);
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
}

.s-button-element:hover {
    transform: scale(1.05);
    background: linear-gradient(90deg, var(--primary-gold), var(--primary-gold-hover));
    color: #000000;
}

/* Tooltip */
.product-tooltip {
    position: absolute;
    background-color: rgba(20, 24, 27, 0.9);
    color: var(--text-white);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    display: none;
}

.s-product-card-entry:hover .product-tooltip {
    display: block;
}

/* Wishlist Button */
.wishlist-button {
    padding: 5px 10px;
    font-size: 0.9rem;
    background-color: #232930;
    color: var(--text-white);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.wishlist-button.wishlist-added {
    background-color: var(--primary-gold);
    color: #000000;
}

.wishlist-button:hover {
    background-color: var(--primary-gold);
    color: #000000;
}

/* Countdown Timer */
.countdown-timer {
    font-size: 1rem;
    color: #c7cdd5;
    background-color: #14181b;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin-top: 10px;
}

/* Horizontal Scroll Section */
.product-section {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 10px 0;
}

.product-section::-webkit-scrollbar {
    height: 8px;
}

.product-section::-webkit-scrollbar-thumb {
    background: var(--bg-card-dark);
    border-radius: 4px;
}

.product-section::-webkit-scrollbar-track {
    background: var(--bg-dark-main);
}

/* Dynamic Background Animation */
.product-background {
    background: linear-gradient(-45deg, #14181b, #1e2328, #232930);
    background-size: 400% 400%;
    animation: backgroundShift 15s ease infinite;
}

@keyframes backgroundShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .s-product-card-entry {
        margin: 15px auto;
    }

    .s-button-element {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}

@media (max-width: 576px) {
    .s-product-card-entry .price {
        font-size: 1.2rem;
    }
}
.home-slider__content a {
    background: var(--primary-gold);
    color: #000000;
    padding: 12px 40px;
    border-radius: 16px;
    font-size: 20px;
    text-decoration: none;
    display: inline-block;
    margin-top: 50px;
    transition: all 0.3s ease;
}

element.style {
}
.s-product-card-entry .s-product-card-price, .s-product-card-entry .s-product-card-sale-price h4, .s-product-card-entry .s-product-card-starting-price h4 {
    font-size: 17px;
    margin: 0;
    font-weight: 600;
}
.s-product-card-entry .s-product-card-price, .s-product-card-entry .s-product-card-sale-price h4, .s-product-card-entry .s-product-card-starting-price h4 {
    color: var(--primary-gold) !important;
    color: var(--primary-gold) !important;
}

element.style {
}
.s-product-card-entry .s-product-card-content-title a {
    font-size: 17px;
    line-height: 140%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
}
.s-product-card-content-title a {
    display: block;
    font-size: 0.875rem
14px
;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgba(31, 41, 55, 1);
    color: rgba(251, 251,251, 1);
}
element.style {
}
.main-nav-container a {
    text-decoration: none;
    color: #ffffff;
    padding: 10px 15px;
    display: inline-block;
    transition: color 0.3s ease;
}
a, button, input, select, textarea {
    outline: 0;
}
element.style {
}
.mm-ocd .mm-spn.mm-spn--light {
    background: #34373c;
    background: #ffffff;
}
.mm-spn.mm-spn--navbar.mm-spn--main {
    cursor: default;
}
.mm-spn.mm-spn--light {
    color: #ffffff;
    background: #34373c;
}
.mm-ocd .mm-spn.mm-spn--navbar:after {
    text-align: right;
    opacity: 1;
    font-size: 20px;
    background: #34373c;
    background: #34373c;
    color: #ffffff;
    color: var(--color-primary-reverse);
    font-weight: 500;
}
.mm-spn.mm-spn--navbar ul:before {
    content: "";
    display: block;
    position: fixed;
    top: inherit;
    z-index: 2;
    width: 100%;
    border-top: 1px solid #34373c;
    opacity: .15;
}
/* تغيير خلفية الصفحة الرئيسية في سلة */
body.main-homepage, 
.main-content, 
#app {
    background-color: var(--bg-dark-main) !important;
}

/* في حال كنت تريد تغيير خلفية العناصر المحيطة بالكروت أيضاً */
.store-products-section, 
.products-grid {
    background-color: var(--bg-dark-main) !important;
}
/* تغيير لون العناوين والنصوص الرئيسية إلى الأبيض */
h1, h2, h3, h4, h5, h6,
.section-title, 
.title,
.main-title {
    color: var(--text-white) !important;
}
/* تحويل كافة نصوص وروابط الفوتر إلى اللون الأبيض */
footer, 
.main-footer, 
.store-footer, 
.footer-links,
footer p, 
footer a, 
footer span, 
footer div {
    color: var(--text-white) !important;
}

/* التأكد من بقاء الروابط بيضاء حتى عند وضع الماوس عليها */
footer a:hover {
    color: var(--primary-gold) !important;
    opacity: 0.8; /* يعطي تأثير خافت بسيط عند التمرير بالماوس */
}
/* تغيير خلفية بطاقة المنتج إلى لون شفاف أو لون متناسق مع الخلفية الداكنة */
.card-product {
    background-color: var(--bg-card-dark) !important;
    border: none !important;
    box-shadow: none !important;
}
.custom-main-normal {
    background: var(--bg-card-dark);
    position: relative;
    margin-top: 10px;
    padding: 7px 0;
    min-height: 44px;
}

.custom-main-normal {display: none !important;
}
@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) {
    .ebdaa-line.center-content .content-box::after, .ebdaa-line.center-content .content-box::before {
        background: 
color-mix(in srgb, #ffffff 15%, transparent);
    }
}

element.style {
}
@media (max-width: 1200px) {
    .features--div .features-list li {
        min-width: 150px;
    }
}
@media (max-width: 1400px) {
    .features--div .features-list li {
        border-radius: 12px;
        padding: 16px;
        min-width: 190px;
    }
}
.features--div .features-list li {
    border-radius: 16px;
    background: #fff;
    background: #22233e;
    padding: 20px;
    min-width: 200px;
    text-align: center;
}
element.style {
}
.s-slider-block__title-left .s-slider-block__display-all {
    font-weight: 600;
}
.s-slider-block__display-all {
    display: inline-block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: #414042;
    color: #ffffff;
}
element.style {
}
.s-block__title .s-block__display-all {
    white-space: nowrap;
    justify-content: flex-end;
    color: #414042;
    color: #ffffff;
    font-size: 18px;
    opacity: 1;
    font-weight: 600;
}
/* تغيير لون العنوان داخل القائمة المنسدلة فقط دون بقية الموقع */
.accordion-box .item-box .header-accordion h3 {
    color: #1a1a1a !important;
}

/* إذا كان هناك نص شرح (فقرة) داخل القائمة المنسدلة وتريد ظهوره بالأسود */
.accordion-box .item-box .content-accordion,
.accordion-box .item-box .content-accordion p,
.accordion-box .item-box .body-accordion {
    color: #2b2b2b !important;
}
element.style {
}
.back-to-top {
       background: #33333322;
   }
.ps-footer__middle {
    /* حذف الخط العلوي بالكامل */
    border-top: none !important; 
}

/* التأكد من إزالة أي كود إضافي تم إنشاؤه سابقاً */
.ps-footer__middle::before {
    display: none !important;
    content: none !important;
}
/* إخفاء شريط القائمة العلوية بالكامل */
.custom-main-normal {
    display: none !important;
}
/* تحويل خلفية إطارات صور المنتجات إلى شفافة لتندمج مع الموقع */
.s-product-card-image,
.product-box .img-box,
.product-card .product-thumb,
.s-product-card__image-wrapper {
    background-color: transparent !important;
    background: transparent !important;
}

/* في حال وجود حدود بيضاء حول الصورة يتم إخفاؤها */
.s-product-card-image img,
.product-box .img-box img {
    background-color: transparent !important;
}
/* موازنة الصورة لتملأ الفريم بالكامل */
.catg-banner img {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    object-fit: cover !important; /* يمنع تمطط الصورة ويحافظ على أبعادها */
    object-position: center !important; /* يضمن بقاء وسط الصورة في المنتصف */
}

/* التأكد من تطابق انحناء حواف الصورة مع الفريم */
.catg-banner {
    overflow: hidden !important;
}
/* تصميم جديد لزر القلب وتفعيل حركة النبض */
.s-product-card-entry salla-button .s-product-card-wishlist-btn {
    border: 1px solid rgba(251, 201, 0, 0.4) !important; /* حدود ذهبية خفيفة شبه شفافة */
    background: rgba(255, 255, 255, 0.07) !important; /* خلفية زجاجية شفافة تندمج مع موقعك */
    backdrop-filter: blur(5px); /* تأثير الضباب للزجاج خلف الزر */
    opacity: 1 !important;
    transition: all 0.3s ease-in-out;
}

/* تفعيل الأنيميشن على أيقونة القلب بالداخل */
.s-product-card-entry salla-button .s-product-card-wishlist-btn i,
.s-product-card-entry salla-button .s-product-card-wishlist-btn svg,
.s-product-card-entry salla-button .s-product-card-wishlist-btn salla-icon {
    display: inline-block;
    color: #ffe893 !important; /* لون القلب ذهبي متناسق مع متجرك */
    animation: heartBeat 1.8s infinite ease-in-out; /* حركة النبض المستمرة */
}

/* حركات تفاعلية عند تمرير الماوس فوق الزر (Hover) */
.s-product-card-entry salla-button .s-product-card-wishlist-btn:hover {
    border-color: #fbc900 !important; /* توهج الحدود بالكامل */
    background: rgba(251, 201, 0, 0.15) !important; /* إضاءة خفيفة للخلفية */
    transform: scale(1.1); /* تكبير بسيط جداً للزر عند التأشير */
}

/* كود حركة نبضات القلب */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.2); /* النبضة الأولى */
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.2); /* النبضة الثانية سريعة */
    }
    70% {
        transform: scale(1); /* فترة راحة */
    }
}
@media (max-width: 1200px) {
    
.search-btn-mobile {
}
.search-btn-mobile {
    display: none;
    font-size: 23px;
    color: #272a32;
    color: #ffffff;
}
  /* استهداف أيقونات الهيدر العلوية بشكل مباشر وصريح */
.header-right a, 
.header-left a, 
.site-header a, 
[class*="header"] i, 
[class*="header"] svg,
[class*="cart"] i,
[class*="cart"] svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important; /* لبعض الأيقونات التي تعتمد على الخطوط الخارجية */
    opacity: 1 !important;
}
 element.style {
}
.sub-catg-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px;
    border: 1px solid rgb(4 17 35);
    background: rgb(34 35 62);
    height: 100%;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}
/* زيادة المسافة والتركيز لعنوان القائمة الجانبية العلوي */
[class*="menu"] .title, 
[class*="navigation"] h2,
.s-menu-header-title,
.s-nav-drawer-title {
    font-size: 15px !important; /* حجم ممتاز وواضح */
    font-weight: bold !important;
    padding-top: 20px !important; /* زيادة المسافة من الأعلى */
    padding-bottom: 25px !important; /* زيادة المسافة من الأسفل لإعطاء مساحة أكبر */
    margin-bottom: 20px !important; /* مسافة إضافية بين العنوان وأول عنصر تحتها */
    display: block !important;
}
/* 3. إخفاء علامات الاقتباس الكبيرة المزعجة بالخلفية */
.s-reviews-card__quotation,
[class*="quotation"],
[class*="quote"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 4. جعل النجوم الصفراء تنبض */
.s-rating i, 
.s-rating svg, 
.s-rating-stars i,
[class*="rating"] i,
[class*="star"] {
    color: #fbc900 !important;
    fill: #fbc900 !important;
    display: inline-block !important;
    animation: starPulse 1.5s infinite ease-in-out !important;
}

/* --- حركات الأنيميشن --- */
@keyframes textGradientMove {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

@keyframes starPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
/* ---لون داخل اراء العملاء --- */
/* استهداف صندوق الآراء بالكامل للتأكد من توسيط وتلوين أي نص داخله */
.testimonials-box, 
.testimonials-box p, 
.testimonials-box .comment-text,
.testimonials-box * {
    text-align: center !important;
    color: #272a32 !important; /* يمكنك استبدال هذا الكود بأي لون تريده، مثلاً الأسود #000000 */
}

/* في حال كان القالب يعتمد على نظام كلاسات منصة سلة الافتراضي */
.s-testimonials-slider p,
.s-testimonials-slider {
    text-align: center !important;
    color: #272a32 !important;
}

/* في الحالة الطبيعية (والسلة صفر) الدائرة ثابتة تماماً */
.s-cart-summary-count {
    animation: none !important;
    box-shadow: none !important;
}

/* الحركة تبدأ فقط وحصرياً عندما يضيف الجافاسكريبت كلاس النبض (أكبر من صفر) */
.s-cart-summary-count.pulse-active {
    animation: badgePulse 1.5s infinite ease-in-out !important;
}

/* كود حركة النبض والتوهج */
@keyframes badgePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 75, 75, 0.7);
    }
    50% {
        transform: scale(1.25); /* تكبير مريح للعين */
        box-shadow: 0 0 12px 4px rgba(255, 75, 75, 0.4); /* توهج تنبيهي ناعم */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 75, 75, 0);
    }
}
element.style {
}
.dts-page .main-dts .c-name {
    display: block;
    width: -moz-max-content;
    width: max-content;
    color: #ffffff;
}
element.style {
}
@media (max-width: 768px) {
    
.testimonials-box p {
}
.testimonials-box p {
p {
    font-size: 16px;
    line-height: 1.6em;
    color: #272a32;
    color: #000000;
}
.dts-page .p-price .n-price {
    margin: 0;
    font-size: 26px;
    display: flex;
    gap: 8px;
    align-items: center;
    line-height: 28px;
    font-weight: 500;
    flex-wrap: wrap;
}
p {
    font-size: 16px;
    line-height: 1.6em;
    color: #272a32;
    color: #ffffff;
}
.s-product-options-option-label {
    margin-bottom: 0.625rem;
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgba(55, 65, 81, 1);
    color: rgb(255 255 255);
}
element.style {
}
.s-product-options-option-label small {
    --tw-text-opacity: 1;
    color: rgba(107, 114, 128, 1);
    color: rgb(255 255 255);
}
html body {
    direction: rtl;
    font-size: 16px;
    color: #272a32;
    color: #fbfbfb;
    background-color: #fff;
    background-color: var(--white);
}





























































                                                                                                      































  








































  

/* ==========================================================================
   1. General Reset & Base Styles
   ========================================================================== */
:root {
    --bg-dark-main: #14181b;     /* الخلفية الداكنة العميقة للموقع */
    --bg-card-dark: #1e2328;     /* خلفية البطاقات والعناصر */
    --primary-gold: #fcc22d;     /* اللون الذهبي/الأصفر للأزرار والنجوم */
    --primary-gold-hover: #e0aa22; /* درجة الذهبي عند التمرير */
    --text-white: #ffffff;
    --text-muted: #8a96a3;
}

.-s-quick-order-container {
    background-color: var(--bg-dark-main) !important;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--bg-dark-main);
    color: #c7cdd5;
    overflow-x: hidden;
}

/* ==========================================================================
   2. Navigation Bar
   ========================================================================== */
.main-nav-container {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.main-nav-container a {
    text-decoration: none;
    color: var(--text-white);
    padding: 10px 15px;
    display: inline-block;
    transition: color 0.3s ease;
}

.main-nav-container a:hover {
    color: var(--primary-gold);
}

/* ==========================================================================
   3. Product Card Styling
   ========================================================================== */
.-s-product-card-entry {
    position: relative;
    padding: 20px;
    margin: 10px;
    background-color: var(--bg-card-dark);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.-s-product-card-entry:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.-s-product-card-entry img {
    max-width: 100%;
    border-radius: 8px;
}

.-s-product-card-entry .price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--primary-gold);
}

/* ==========================================================================
   4. Buttons & Interactive Elements
   ========================================================================== */
.-s-button-element {
    padding: 10px 20px;
    font-size: 1rem;
    color: var(--text-white);
    background: linear-gradient(90deg, #232930, #1e2328);
    border: 1px solid var(--primary-gold);
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease;
}

.-s-button-element:hover {
    transform: scale(1.05);
    background: linear-gradient(90deg, var(--primary-gold), var(--primary-gold-hover));
    color: #000000;
}

/* التنبيهات المنبثقة (Tooltip) */
.product-tooltip {
    position: absolute;
    background-color: rgba(20, 24, 27, 0.9);
    color: var(--text-white);
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.8rem;
    display: none;
}

.-s-product-card-entry:hover .product-tooltip {
    display: block;
}

/* ==========================================================================
   5. Wishlist & Cart Styling
   ========================================================================== */
.wishlist-button {
    padding: 5px 10px;
    font-size: 0.9rem;
    background-color: #232930;
    color: var(--text-white);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.wishlist-button.wishlist-added {
    background-color: var(--primary-gold);
    color: #000000;
}

.wishlist-button:hover {
    background-color: var(--primary-gold);
    color: #000000;
}

/* عداد التنازلي */
.countdown-timer {
    font-size: 1rem;
    color: #c7cdd5;
    background-color: #14181b;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    margin-top: 10px;
}

/* ==========================================================================
   6. Horizontal Scroll Section & Grid Layouts
   ========================================================================== */
.product-section {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 10px;
    padding: 10px 0;
}

.product-section::-webkit-scrollbar {
    height: 8px;
}

.product-section::-webkit-scrollbar-thumb {
    background: var(--bg-card-dark);
    border-radius: 4px;
}

.product-section::-webkit-scrollbar-track {
    background: var(--bg-dark-main);
}

/* ==========================================================================
   7. Dynamic Background Animation
   ========================================================================== */
.product-background {
    background: linear-gradient(-45deg, #14181b, #1e2328, #232930);
    background-size: 400% 400%;
    animation: backgroundShift 15s ease infinite;
}

@keyframes backgroundShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==========================================================================
   8. Responsive Design
   ========================================================================== */
@media (max-width: 768px) {
    .-s-product-card-entry {
        margin: 15px auto;
    }
    .-s-button-element {
        font-size: 0.9rem;
        padding: 8px 16px;
    }
}

@media (max-width: 576px) {
    .-s-product-card-entry .price {
        font-size: 1.2rem;
    }
}

/* ==========================================================================
   9. Custom Overrides & Additional Store Elements
   ========================================================================== */
.home-slider-content a {
    background: var(--primary-gold);
    color: #000000;
    padding: 12px 40px;
    border-radius: 16px;
    font-size: 20px;
    text-decoration: none;
    display: inline-block;
    margin-top: 50px;
    transition: all 0.3s ease;
}

element.style {
    font-size: 17px;
    margin: 0;
    font-weight: 600;
}

.-s-product-card-entry .-s-product-card-price,
.-s-product-card-price {
    font-size: 17px;
    color: var(--primary-gold) !important;
    font-weight: 600;
}

.-s-product-card-entry .-s-product-card-content,
.-s-product-card-content {
    font-size: 17px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
}

.-s-product-card-content-title a {
    display: block;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: var(--text-white);
}

.main-nav-container a {
    text-decoration: none;
    color: var(--text-white);
    padding: 10px 15px;
    display: inline-block;
    transition: color 0.3s ease;
}

body.main-homepage,
.main-content,
#app {
    background-color: var(--bg-dark-main) !important;
}

.store-products-section,
.products-grid {
    background-color: var(--bg-dark-main) !important;
}

h1, h2, h3, h4, h5, h6,
.section-title,
.title,
.main-title {
    color: var(--text-white) !important;
}

footer,
.main-footer,
.store-footer,
.footer-links,
footer p,
footer a,
footer span,
footer div {
    color: var(--text-muted) !important;
}

footer a:hover {
    color: var(--primary-gold) !important;
}

.card-product {
    background-color: var(--bg-card-dark) !important;
    border: none !important;
    box-shadow: none !important;
}

.custom-main-normal {
    background: var(--bg-card-dark);
    position: relative;
    margin-top: 10px;
    padding: 7px 0;
    min-height: 44px;
}

.custom-main-normal {
    display: none !important;
}

/* ==========================================================================
   10. Specialized Product Badges & Effects
   ========================================================================== */
.-s-product-card-image,
.product-box .img-box,
.product-card .product-thumb,
.product-card .image-wrapper {
    background-color: transparent !important;
    background: transparent !important;
}

.cat-banner img {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
}

.cat-banner {
    overflow: hidden !important;
}

/* تصميم جديد لزر السلة التفاعلي */
.-s-product-card-entry .s-button-element {
    border: 1px solid rgba(252, 194, 45, 0.4) !important;
    background: rgba(30, 35, 40, 0.7) !important;
    backdrop-filter: blur(5px);
    opacity: 1 !important;
    transition: all 0.3s ease-in-out;
}

/* تفاعل الأنميشن بالكامل عند التمرير فوق أزرار الشراء */
.-s-product-card-entry:hover .s-button-element {
    background: var(--primary-gold) !important;
    color: #000000 !important;
    animation: heartBeat 1.8s infinite ease-in-out;
}

@keyframes heartBeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.05); }
    28% { transform: scale(1); }
    42% { transform: scale(1.05); }
    70% { transform: scale(1); }
}

/* ==========================================================================
   11. Reviews & Testimonials Section
   ========================================================================== */
.reviews-card-content,
.reviews-card-content p,
.reviews-card-customer-name,
.reviews-card-title {
    color: var(--text-white) !important;
}

.review [class="star"] {
    color: var(--primary-gold) !important;
    fill: var(--primary-gold) !important;
}

/* تعديل ألوان التقييمات العامة بالنجوم */
.s-rating i,
.s-rating svg,
.s-rating-stars i,
.s-rating-stars svg,
.star {
    color: var(--primary-gold) !important;
    fill: var(--primary-gold) !important;
    display: inline-block !important;
}

.testimonials-box p {
    font-size: 16px;
    line-height: 1.6em;
    color: var(--text-white);
}

/* سلة المشتريات والأسعار الفرعية */
.dts-page .-p-price .n-price {
    margin: 0;
    font-size: 26px;
    display: flex;
    gap: 8px;
    align-items: center;
    line-height: 28px;
    font-weight: 500;
    color: var(--primary-gold);
}