:root{
  --bg:#020416;
  --panel:#05081d;
  --panel2:#070b24;
  --cyan:#10c7e8;
  --cyan2:#00e5ff;
  --text:#fff;
  --muted:rgba(255,255,255,.72);
  --line:rgba(16,199,232,.18);
}

html,body,#app,.app,main,.page-wrapper,.main-content{
  background:var(--bg)!important;
  color:var(--text)!important;
}

section,.s-block,.container,.s-block__container{
  background:transparent!important;
}

header,.store-header,.main-nav-container,.navbar,.top-navbar,.mobile-header,
footer,.store-footer,.footer{
  background:#030516!important;
  background-image:none!important;
  color:#fff!important;
  border-color:var(--line)!important;
}

header *,footer *,.store-footer *{
  color:#fff!important;
}
h1,h2,h3,h4,h5,h6,
.s-block__title h2,
.s-slider-block__title,
.product-title,
.s-product-card-content-title,
.s-product-card-content-title a{
  color:#fff!important;
  font-weight:900!important;
}

a{
  color:var(--cyan)!important;
}

.product-entry,
.s-product-card-entry,
.s-product-card-vertical{
  position:relative!important;
  background:var(--panel)!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  overflow:hidden!important;
  transition:.35s ease!important;
}

.product-entry:hover,
.s-product-card-entry:hover{
  transform:translateY(-6px)!important;
  border-color:var(--cyan)!important;
  box-shadow:0 0 28px rgba(16,199,232,.18)!important;
}

.product-entry img,
.s-product-card-entry img{
  transition:.5s ease!important;
}

.product-entry:hover img,
.s-product-card-entry:hover img{
  transform:scale(1.06)!important;
  filter:brightness(1.12) contrast(1.08)!important;
}

.product-entry::before,
.s-product-card-entry::before{
  content:"";
  position:absolute;
  top:-130%;
  left:-90%;
  width:65%;
  height:330%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.06),rgba(230,230,230,.65),rgba(255,255,255,.06),transparent);
  transform:rotate(25deg);
  opacity:0;
  z-index:5;
  pointer-events:none;
}

.product-entry:hover::before,
.s-product-card-entry:hover::before{
  animation:silverShine 1s ease forwards;
}

@keyframes silverShine{
  0%{left:-95%;opacity:0}
  20%{opacity:1}
  100%{left:135%;opacity:0}
}

[id^="product-"],
.product,
.product-single,
.product-page,
.s-product,
.product-form,
.s-product-form,
.product-options,
.s-product-options,
.s-product-form-content,
.s-product-options-wrapper{
  background:var(--panel)!important;
  color:#fff!important;
  border-color:var(--line)!important;
}

.s-product-options,
.product-options,
.s-product-form-content{
  background:var(--panel)!important;
  border:1px solid var(--line)!important;
  border-radius:10px!important;
  padding:18px!important;
}

.s-product-options-grid-mode-span{
  background:#030516!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:1px solid rgba(16,199,232,.14)!important;
  border-radius:6px!important;
  font-weight:800!important;
  box-shadow:none!important;
  transition:.25s ease!important;
}

.s-product-options-grid-mode-span:hover{
  background:#07102b!important;
  border-color:var(--cyan)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  transform:translateY(-2px)!important;
}

.s-product-options-grid-mode-span.active,
.s-product-options-grid-mode-span.selected,
input:checked + .s-product-options-grid-mode-span,
[aria-checked="true"] .s-product-options-grid-mode-span,
[aria-selected="true"] .s-product-options-grid-mode-span{
  background:var(--cyan)!important;
  color:#001018!important;
  -webkit-text-fill-color:#001018!important;
  border-color:var(--cyan)!important;
}

input:not([type="radio"]):not([type="checkbox"]),
textarea,
select,
.s-search-input{
  background:#030516!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:6px!important;
  font-weight:700!important;
  box-shadow:none!important;
}

input:focus,
textarea:focus,
select:focus{
  background:#07102b!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:var(--cyan)!important;
  outline:none!important;
  box-shadow:0 0 0 1px rgba(16,199,232,.35)!important;
}

input::placeholder,
textarea::placeholder{
  color:rgba(255,255,255,.45)!important;
  -webkit-text-fill-color:rgba(255,255,255,.45)!important;
}

.price,
.total-price,
.product-price,
.s-product-card-price,
.product-entry__price{
  color:#fff!important;
  font-weight:900!important;
}

.add-to-cart-btn,
.s-button-primary,
button[type="submit"],
.s-product-form .s-button-primary{
  background:var(--cyan)!important;
  color:#001018!important;
  border:0!important;
  border-radius:6px!important;
  font-weight:900!important;
  transition:.25s ease!important;
}

.add-to-cart-btn *,
.s-button-primary *,
button[type="submit"] *{
  color:#001018!important;
  -webkit-text-fill-color:#001018!important;
}

.buy-now-btn,
.btn-buy-now,
button[name="buy_now"]{
  background:transparent!important;
  color:var(--cyan)!important;
  border:1px solid var(--cyan)!important;
  border-radius:6px!important;
}

.product-tabs button,
.s-product-tabs button,
.tabs button,
.nav-tabs .nav-link,
.product-tabs .tab-link{
  background:var(--cyan)!important;
  color:#001018!important;
  border:0!important;
  border-radius:6px 6px 0 0!important;
  font-weight:900!important;
}

.product-description,
.s-product-description,
.tab-content,
.description-content,
.entry-content{
  background:var(--panel)!important;
  color:#fff!important;
}

.product-description *,
.s-product-description *,
.tab-content *,
.description-content *,
.entry-content *{
  background:transparent!important;
  background-color:transparent!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:none!important;
}

.product-description a,
.s-product-description a,
.tab-content a{
  color:var(--cyan)!important;
  -webkit-text-fill-color:var(--cyan)!important;
}

.customer-review,
.customer-reviews,
.review-item,
.review-card,
.testimonial-card,
.s-product-review,
.s-product-reviews,
.s-reviews,
.s-reviews-card{
  background:var(--panel)!important;
  color:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:8px!important;
}

.customer-review *,
.review-card *,
.testimonial-card *,
.s-product-review *,
.s-reviews-card *{
  color:#fff!important;
}

.rating svg,
.stars-rating svg,
.s-rating-stars svg{
  fill:var(--cyan)!important;
  color:var(--cyan)!important;
}

.product-features,
.product-feature,
.s-product-features,
.s-product-feature,
.payment-methods,
.s-payment-methods{
  background:var(--panel)!important;
  color:#fff!important;
  border:1px solid rgba(16,199,232,.10)!important;
  border-radius:8px!important;
}

.product-features *,
.product-feature *,
.s-product-features *,
.s-product-feature *,
.payment-methods *,
.s-payment-methods *{
  color:#fff!important;
}

.sticky-product,
.sticky-product-bar,
.s-sticky-product-bar,
.product-fixed-bar,
.fixed-product-bar{
  background:var(--panel)!important;
  color:#fff!important;
  border-top:1px solid var(--line)!important;
}

.sticky-product *,
.sticky-product-bar *,
.s-sticky-product-bar *,
.product-fixed-bar *{
  color:#fff!important;
}

.dropdown-menu,
.nav-dropdown,
.sub-menu,
.mega-menu,
.header-dropdown,
.user-menu,
.s-menu-nav-dropdown,
.s-user-menu-dropdown,
.search-dropdown,
.search-results{
  background:#030516!important;
  color:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:8px!important;
}

.dropdown-menu *,
.nav-dropdown *,
.sub-menu *,
.mega-menu *,
.header-dropdown *,
.user-menu *,
.s-menu-nav-dropdown *,
.search-dropdown *,
.search-results *{
  color:#fff!important;
}

.bg-white,
.bg-light,
.modal-content,
.popup-content,
.offcanvas,
.drawer-content,
.s-cart-summary,
.s-cart-notification,
.cart-popup,
.mini-cart,
.toast,
.alert{
  background:var(--panel)!important;
  color:#fff!important;
}

.bg-white *,
.bg-light *,
.modal-content *,
.popup-content *,
.offcanvas *,
.drawer-content *,
.s-cart-summary *,
.s-cart-notification *,
cart-popup *,
.mini-cart *,
.toast *,
.alert *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

.s-cart-summary-count,
.cart-count,
.badge-count,
.s-user-menu-trigger-badge{
  background:var(--cyan)!important;
  color:#001018!important;
  font-weight:900!important;
}

i,svg,
.sicon-shopping-bag,
.sicon-user,
.sicon-heart,
.sicon-search{
  transition:.3s ease!important;
}

a:hover i,
button:hover i,
a:hover svg,
button:hover svg{
  transform:translateY(-2px) scale(1.12)!important;
  color:var(--cyan)!important;
  fill:var(--cyan)!important;
}

.payment-methods img,
.s-payment-methods img,
img[src*="visa"],
img[src*="mada"],
img[src*="master"],
img[src*="apple"],
img[src*="paypal"],
img[src*="stc"]{
  background:#fff!important;
  border-radius:4px!important;
  padding:2px!important;
}

@media(max-width:768px){
  .product-entry,
  .s-product-card-entry{
    border-radius:8px!important;
  }
}
أضف هذا الكود **في آخر الـ CSS** ليصبح زر **اشترِ الآن** مطابقًا لزر **أضف للسلة**:

```css
/* زر اشترِ الآن */
.buy-now-btn,
.btn-buy-now,
button[name="buy_now"],
button[data-buy-now],
.s-product-form .buy-now-btn{
    background:#10c7e8 !important;
    border:1px solid #10c7e8 !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    font-weight:800 !important;
}

/* النص والأيقونة داخل زر اشترِ الآن */
.buy-now-btn *,
.btn-buy-now *,
button[name="buy_now"] *,
button[data-buy-now] *,
.s-product-form .buy-now-btn *{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    fill:#ffffff !important;
}

/* أيقونة اشترِ الآن */
.buy-now-btn svg,
.buy-now-btn i,
.btn-buy-now svg,
.btn-buy-now i,
button[name="buy_now"] svg,
button[name="buy_now"] i{
    color:#ffffff !important;
    fill:#ffffff !important;
}

/* تأثير احترافي عند المرور */
.buy-now-btn:hover,
.btn-buy-now:hover,
button[name="buy_now"]:hover,
button[data-buy-now]:hover{
    background:#00e5ff !important;
    border-color:#00e5ff !important;
    box-shadow:0 0 20px rgba(0,229,255,.35) !important;
    transform:translateY(-2px) !important;
}

/* زر أضف للسلة */
.add-to-cart-btn,
.s-button-primary,
button[name="add_to_cart"]{
    background:#10c7e8 !important;
    border:1px solid #10c7e8 !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}

/* النص والأيقونة داخل أضف للسلة */
.add-to-cart-btn *,
.s-button-primary *,
button[name="add_to_cart"] *{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    fill:#ffffff !important;
}
```

النتيجة:

* **أضف للسلة**: خلفية تركوازية + نص أبيض + أيقونة بيضاء.
* **اشترِ الآن**: خلفية تركوازية + نص أبيض + أيقونة بيضاء.
* تأثير Glow تركوازي عند المرور بالماوس.
* متناسق مع تصميم Media Fiber الذي تحاول الوصول إليه.
أضف هذا الكود **في آخر الـ CSS** فقط، وسيجعل:

* إطار بطاقات المنتجات بنفس اللون التركوازي الظاهر بالصورة.
* النصوص داخل منطقة الخيارات (المحددة بالأحمر) باللون الأبيض.
* العناوين والوصف الإرشادي داخل الحقول باللون الأبيض.
* الحدود بنفس هوية الموقع.

```css
/* ========================= */
/* إطار بطاقات المنتجات */
/* ========================= */

.product-entry,
.s-product-card-entry,
.s-product-card-vertical,
.s-product-card{
    border:1px solid #10c7e8 !important;
    box-shadow:0 0 15px rgba(16,199,232,.15) !important;
}

.product-entry:hover,
.s-product-card-entry:hover,
.s-product-card-vertical:hover{
    border-color:#10e5ff !important;
    box-shadow:0 0 25px rgba(16,199,232,.35) !important;
}

/* ========================= */
/* نصوص الخيارات داخل صفحة المنتج */
/* ========================= */

.s-product-form label,
.s-product-options label,
.product-form label,
.product-options label,
.s-product-form p,
.s-product-options p,
.product-form p,
.product-options p,
.s-product-form span,
.s-product-options span,
.product-form span,
.product-options span{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}

/* النصوص الجانبية مثل:
ضع الرابط
اختر الكمية
الخ */
.s-product-form-content *,
.s-product-options-wrapper *,
.s-product-options *,
.product-options *{
    color:#ffffff !important;
}

/* النجمة الحمراء تبقى حمراء */
.required,
.text-danger,
.text-red{
    color:#ff4f6d !important;
}

/* الحقول */
.s-product-form input,
.product-form input,
.s-product-form textarea,
.product-form textarea{
    border:1px solid rgba(16,199,232,.35) !important;
}

/* عند التركيز */
.s-product-form input:focus,
.product-form input:focus,
.s-product-form textarea:focus,
.product-form textarea:focus{
    border-color:#10c7e8 !important;
    box-shadow:0 0 12px rgba(16,199,232,.25) !important;
}

/* عنوان السعر */
.price,
.product-price,
.total-price{
    color:#ffffff !important;
    font-weight:800 !important;
}
```

إذا بقي النص في المربع الأحمر داكنًا بعد هذا الكود، افتح DevTools واضغط على عبارة **"ضع الرابط الخاص بك"** ثم أرسل لي السطر الذي يحتوي على `class=""` لهذا العنصر، وسأعطيك استهدافًا دقيقًا 100% للكلاس الفعلي المستخدم في ثيم ملاك.

/* الفوتر بالكامل أسود */
footer,
.footer,
.store-footer,
.store-footer__inner,
.store-footer__wrapper,
.store-footer__top,
.store-footer__bottom,
.store-footer .container,
footer .container,
.store-footer .s-block{
    background:#020416 !important;
    background-color:#020416 !important;
    background-image:none !important;
}

/* جميع النصوص داخل الفوتر */
footer *,
.footer *,
.store-footer *,
.store-footer__inner *,
.store-footer__wrapper *{
    color:#ffffff !important;
}

/* عناوين الفوتر */
.store-footer h1,
.store-footer h2,
.store-footer h3,
.store-footer h4,
.store-footer .title{
    color:#10c7e8 !important;
}

/* روابط الفوتر */
.store-footer a,
footer a{
    color:#ffffff !important;
}

.store-footer a:hover,
footer a:hover{
    color:#10c7e8 !important;
}

/* خط علوي مثل موقع Media Fiber */
.store-footer,
footer{
    border-top:1px solid rgba(16,199,232,.12) !important;
}

/* أيقونات التواصل */
.store-footer .social a,
.footer-social a,
.s-social-list a{
    background:#05081d !important;
    color:#ffffff !important;
    border:1px solid rgba(16,199,232,.15) !important;
}

.store-footer .social a:hover,
.footer-social a:hover,
.s-social-list a:hover{
    background:#10c7e8 !important;
    color:#ffffff !important;
}

/* منطقة الحقوق أسفل الفوتر */
.store-footer__bottom,
.copyright,
.footer-copyright{
    background:#020416 !important;
    color:#ffffff !important;
    border-top:1px solid rgba(255,255,255,.05) !important;
}

/* شعارات الدفع */
.store-footer img,
.payment-methods img,
.s-payment-methods img{
    background:#fff !important;
    border-radius:4px !important;
    padding:2px !important;
}footer,
footer *,
.store-footer,
.store-footer *,
[class*="footer"],
[class*="footer"] *,
[id*="footer"],
[id*="footer"] *{
    background:#020416 !important;
    background-color:#020416 !important;
    background-image:none !important;
}
أضف هذا الكود **آخر شيء في Custom CSS**:

```css
/* خطوط وأيقونات وحقول ذيل الصفحة باللون الأبيض */
footer,
footer *,
.store-footer,
.store-footer *,
.footer,
.footer *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  fill:#ffffff !important;
}

/* روابط الفوتر */
footer a,
.store-footer a,
.footer a{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

footer a:hover,
.store-footer a:hover,
.footer a:hover{
  color:#10c7e8 !important;
  -webkit-text-fill-color:#10c7e8 !important;
}

/* أيقونات الفوتر */
footer i,
footer svg,
.store-footer i,
.store-footer svg,
.footer i,
.footer svg{
  color:#ffffff !important;
  fill:#ffffff !important;
  stroke:#ffffff !important;
}

/* الحقول داخل الفوتر */
footer input,
footer textarea,
footer select,
.store-footer input,
.store-footer textarea,
.store-footer select,
.footer input,
.footer textarea,
.footer select{
  background:#05081d !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border:1px solid rgba(16,199,232,.35) !important;
}

/* النص التوضيحي داخل الحقول */
footer input::placeholder,
footer textarea::placeholder,
.store-footer input::placeholder,
.store-footer textarea::placeholder,
.footer input::placeholder,
.footer textarea::placeholder{
  color:rgba(255,255,255,.65) !important;
  -webkit-text-fill-color:rgba(255,255,255,.65) !important;
}
```
أضف هذا الكود آخر شيء:

```css
/* زر الاشتراك في الفوتر */
footer button,
.store-footer button,
footer input[type="submit"],
.store-footer input[type="submit"]{
  background:#10c7e8 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border:1px solid #10c7e8 !important;
  font-weight:800 !important;
}

/* نص زر اشترك */
footer button *,
.store-footer button *,
footer input[type="submit"] *,
.store-footer input[type="submit"] *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* حقل البريد */
footer input[type="email"],
.store-footer input[type="email"]{
  background:#05081d !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border:1px solid rgba(255,255,255,.25) !important;
}

footer input[type="email"]::placeholder,
.store-footer input[type="email"]::placeholder{
  color:rgba(255,255,255,.65) !important;
}
```
/* تحويل الشريط الأبيض إلى أسود */
.breadcrumb,
.breadcrumbs,
.s-breadcrumb,
.s-breadcrumb-wrapper,
.s-breadcrumb-container,
.page-header,
.page-header-content,
.bg-light,
.bg-white{
    background:#020416 !important;
    background-color:#020416 !important;
    background-image:none !important;
    border:none !important;
}

/* النصوص داخل الشريط */
.breadcrumb *,
.breadcrumbs *,
.s-breadcrumb *,
.s-breadcrumb-wrapper *,
.s-breadcrumb-container *,
.page-header *,
.page-header-content *{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}

/* الروابط داخل الشريط */
.breadcrumb a,
.breadcrumbs a,
.s-breadcrumb a{
    color:#10c7e8 !important;
}

.breadcrumb a:hover,
.breadcrumbs a:hover,
.s-breadcrumb a:hover{
    color:#00e5ff !important;
}

/* الفواصل > أو / */
.breadcrumb li::before,
.breadcrumb-item::before,
.s-breadcrumb li::before{
    color:#ffffff !important;
}
/* إزالة أي خلفية بيضاء من شريط المسار العلوي */
.breadcrumb,
.breadcrumbs,
.s-breadcrumb,
.s-breadcrumb-wrapper,
.s-breadcrumb-container,
nav[aria-label="breadcrumb"],
[class*="breadcrumb"],
[class*="crumb"],
[class*="path"]{
    background:#020416 !important;
    background-color:#020416 !important;
    background-image:none !important;
}

/* جميع العناصر الداخلية */
.breadcrumb *,
.breadcrumbs *,
.s-breadcrumb *,
.s-breadcrumb-wrapper *,
.s-breadcrumb-container *,
nav[aria-label="breadcrumb"] *,
[class*="breadcrumb"] *,
[class*="crumb"] *,
[class*="path"] *{
    background:transparent !important;
    background-color:transparent !important;
}

/* إجبار أي بلوك أبيض في أعلى الصفحة أن يصبح أسود */
.bg-white,
.bg-light,
.bg-gray-100,
.bg-gray-50{
    background:#020416 !important;
    background-color:#020416 !important;
}
/* إصلاح تفاصيل ووصف الخدمة */
.product-description,
.s-product-description,
.tab-content,
.tab-pane,
.description-content,
.entry-content,
.prose,
.s-block--description{
  background:#020416 !important;
  color:#fff !important;
}

/* إزالة الخلفيات البيضاء من كل النصوص داخل التفاصيل */
.product-description *,
.s-product-description *,
.tab-content *,
.tab-pane *,
.description-content *,
.entry-content *,
.prose *{
  background:transparent !important;
  background-color:transparent !important;
  box-shadow:none !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* عناوين التفاصيل مثل: مواصفات الخدمة / مميزات الخدمة / تنبيهات */
.product-description h1,
.product-description h2,
.product-description h3,
.product-description h4,
.s-product-description h1,
.s-product-description h2,
.s-product-description h3,
.s-product-description h4,
.tab-content h1,
.tab-content h2,
.tab-content h3,
.tab-content h4,
.description-content h1,
.description-content h2,
.description-content h3,
.description-content h4,
.prose h1,
.prose h2,
.prose h3,
.prose h4{
  color:#10c7e8 !important;
  -webkit-text-fill-color:#10c7e8 !important;
  background:transparent !important;
  font-weight:900 !important;
}

/* الكلمات العريضة داخل الوصف */
.product-description strong,
.product-description b,
.s-product-description strong,
.s-product-description b,
.tab-content strong,
.tab-content b,
.description-content strong,
.description-content b,
.prose strong,
.prose b{
  color:#10c7e8 !important;
  -webkit-text-fill-color:#10c7e8 !important;
  background:transparent !important;
}

/* القوائم والنقاط */
.product-description li,
.s-product-description li,
.tab-content li,
.description-content li,
.prose li{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

.product-description li::marker,
.s-product-description li::marker,
.tab-content li::marker,
.description-content li::marker,
.prose li::marker{
  color:#10c7e8 !important;
}

/* التنبيهات داخل التفاصيل */
.product-description .alert,
.s-product-description .alert,
.tab-content .alert,
.description-content .alert,
.prose .alert{
  background:#05081d !important;
  color:#fff !important;
  border:1px solid rgba(16,199,232,.25) !important;
  border-radius:8px !important;
}

/* إزالة تنسيقات Word أو النسخ من مواقع ثانية */
.product-description span[style],
.s-product-description span[style],
.tab-content span[style],
.description-content span[style],
.prose span[style]{
  background:transparent !important;
  background-color:transparent !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
/* إصلاح نهائي لتفاصيل المنتج */
#description,
#details,
[id*="description"],
[id*="details"],
[class*="description"],
[class*="details"],
[class*="content"],
[class*="tabs"]{
  background:#020416 !important;
  color:#fff !important;
}

/* إزالة أي خلفية بيضاء داخل التفاصيل مهما كان مصدرها */
[id*="description"] *,
[id*="details"] *,
[class*="description"] *,
[class*="details"] *,
[class*="tabs"] *{
  background:#020416 !important;
  background-color:#020416 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  box-shadow:none !important;
}

/* استهداف مباشر لأي span منسوخ من محرر بوصف المنتج */
span[style*="background"],
span[style*="background-color"],
p[style*="background"],
div[style*="background"],
strong[style*="background"],
b[style*="background"]{
  background:#020416 !important;
  background-color:#020416 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* العناوين المهمة بالتركوازي */
[id*="description"] h1,
[id*="description"] h2,
[id*="description"] h3,
[id*="description"] h4,
[class*="description"] h1,
[class*="description"] h2,
[class*="description"] h3,
[class*="description"] h4,
[id*="details"] h1,
[id*="details"] h2,
[id*="details"] h3,
[id*="details"] h4,
[class*="details"] h1,
[class*="details"] h2,
[class*="details"] h3,
[class*="details"] h4{
  color:#10c7e8 !important;
  -webkit-text-fill-color:#10c7e8 !important;
}

/* الكلمات العريضة مثل مواصفات الخدمة */
[id*="description"] strong,
[class*="description"] strong,
[id*="details"] strong,
[class*="details"] strong,
[id*="description"] b,
[class*="description"] b,
[id*="details"] b,
[class*="details"] b{
  color:#10c7e8 !important;
  -webkit-text-fill-color:#10c7e8 !important;
}
ياخبير هذا ما ينفع بـ CSS فقط، لأن **ربط كل بنر بمنتجاته** يحتاج من لوحة سلة:
**تصميم المتجر > الصفحة الرئيسية > بنرات صور > ضع رابط التصنيف أو المنتج لكل بنر**.

لكن هذا كود يجعل الصفحة الرئيسية تظهر كبنرات مرتبة ومربعة، ويخفي المنتجات من الرئيسية:

```css
/* الصفحة الرئيسية بنرات فقط */
body.index .s-products-list,
body.index .s-product-card-entry,
body.index .product-entry,
body.index [class*="products"]{
  display:none !important;
}

/* ترتيب البنرات */
body.index .s-block--banners,
body.index .banner-entry,
body.index .s-banner,
body.index [class*="banner"]{
  display:block !important;
}

/* شبكة بنرات احترافية */
body.index .s-block--banners .grid,
body.index .s-block--banners .s-block__container,
body.index [class*="banners"] .grid{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:18px !important;
}

/* شكل البنر مربع */
body.index .banner-entry,
body.index .banner-entry a,
body.index .banner-entry img,
body.index .s-banner,
body.index .s-banner img{
  aspect-ratio:1/1 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

/* إطار البنرات مثل التصميم الحالي */
body.index .banner-entry,
body.index .s-banner{
  background:#05081d !important;
  border:1px solid #10c7e8 !important;
  box-shadow:0 0 18px rgba(16,199,232,.18) !important;
  transition:.35s ease !important;
}

/* حركة البنر */
body.index .banner-entry:hover,
body.index .s-banner:hover{
  transform:translateY(-6px) scale(1.015) !important;
  box-shadow:0 0 30px rgba(16,199,232,.35) !important;
}

/* صورة البنر */
body.index .banner-entry img,
body.index .s-banner img{
  transition:.45s ease !important;
}

body.index .banner-entry:hover img,
body.index .s-banner:hover img{
  transform:scale(1.06) !important;
  filter:brightness(1.12) contrast(1.08) !important;
}

/* الجوال */
@media(max-width:768px){
  body.index .s-block--banners .grid,
  body.index .s-block--banners .s-block__container,
  body.index [class*="banners"] .grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px !important;
  }
}
```

الربط يتم من سلة هكذا: كل بنر تحط رابطه مثل: تصنيف تيك توك، تصنيف إكس، تصنيف انستقرام، وهكذا.
/* القائمة الجانبية للجوال */
.s-offcanvas,
.s-offcanvas *,
.offcanvas,
.offcanvas *,
.mobile-menu,
.mobile-menu *,
.sidebar-menu,
.sidebar-menu *{
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
}

/* روابط القائمة */
.s-offcanvas a,
.offcanvas a,
.mobile-menu a,
.sidebar-menu a{
    color:#000000 !important;
    font-weight:700 !important;
}

/* العناوين داخل القائمة */
.s-offcanvas h1,
.s-offcanvas h2,
.s-offcanvas h3,
.s-offcanvas h4,
.offcanvas h1,
.offcanvas h2,
.offcanvas h3,
.offcanvas h4{
    color:#000000 !important;
}

/* الأيقونات */
.s-offcanvas svg,
.s-offcanvas i,
.offcanvas svg,
.offcanvas i,
.mobile-menu svg,
.mobile-menu i{
    color:#000000 !important;
    fill:#000000 !important;
    stroke:#000000 !important;
}

/* عناصر القائمة عند المرور */
.s-offcanvas a:hover,
.offcanvas a:hover,
.mobile-menu a:hover{
    color:#10c7e8 !important;
}
/* إجبار جميع روابط القائمة الجانبية أن تكون سوداء */
.s-offcanvas a,
.offcanvas a,
.mobile-menu a,
[class*="menu"] a{
    color:#000000 !important;
}
/* جميع عناصر القائمة الجانبية */
[class*="menu"],
[class*="menu"] *,
[class*="nav"],
[class*="nav"] *,
[class*="drawer"],
[class*="drawer"] *,
[class*="offcanvas"],
[class*="offcanvas"] *,
aside,
aside *,
nav,
nav *{
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
    fill:#000000 !important;
    stroke:#000000 !important;
    text-shadow:none !important;
}

/* جميع الروابط */
[class*="menu"] a,
[class*="nav"] a,
[class*="drawer"] a,
[class*="offcanvas"] a,
aside a,
nav a{
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
}

/* الأيقونات */
[class*="menu"] svg,
[class*="menu"] i,
[class*="nav"] svg,
[class*="nav"] i,
[class*="drawer"] svg,
[class*="drawer"] i,
[class*="offcanvas"] svg,
[class*="offcanvas"] i{
    color:#000000 !important;
    fill:#000000 !important;
    stroke:#000000 !important;
}

/* عند المرور */
[class*="menu"] a:hover,
[class*="nav"] a:hover{
    color:#10c7e8 !important;
}
/* إصلاح الهيدر */
header,
.store-header,
.main-nav-container,
.navbar,
.top-navbar{
    background:#020416 !important;
    background-color:#020416 !important;
}

/* جميع النصوص داخل الهيدر */
header *,
.store-header *,
.main-nav-container *,
.navbar *,
.top-navbar *{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}

/* الروابط */
header a,
.store-header a,
.navbar a{
    color:#ffffff !important;
}

/* الأيقونات */
header svg,
header i,
.store-header svg,
.store-header i,
.navbar svg,
.navbar i{
    color:#ffffff !important;
    fill:#ffffff !important;
    stroke:#ffffff !important;
}

/* عند المرور */
header a:hover,
.navbar a:hover,
.store-header a:hover{
    color:#10c7e8 !important;
}
/* إصلاح ظهور صور المدونة */
.blog img,
.blog-post img,
.article img,
.article-card img,
.s-blog-card img,
.s-article-card img,
[class*="blog"] img,
[class*="article"] img,
[class*="post"] img{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  background:transparent !important;
  object-fit:cover !important;
}

/* إصلاح حاويات صور المدونة */
.blog,
.blog-post,
.article,
.article-card,
.s-blog-card,
.s-article-card,
[class*="blog"],
[class*="article"],
[class*="post"]{
  background:#020416 !important;
  overflow:visible !important;
}

/* منع أي طبقة سوداء تغطي صور المدونة */
.blog::before,
.blog::after,
.article::before,
.article::after,
.s-blog-card::before,
.s-blog-card::after,
[class*="blog"]::before,
[class*="blog"]::after,
[class*="article"]::before,
[class*="article"]::after{
  display:none !important;
  opacity:0 !important;
}
[class*="content"] *,
[class*="post"] *,
[class*="article"] *
/* إصلاح عنوان الصفحة ومسار التنقل */
.page-title,
.page-title *,
.page-header,
.page-header *,
.s-page-title,
.s-page-title *,
.s-breadcrumb,
.s-breadcrumb *,
.s-breadcrumb-wrapper,
.s-breadcrumb-wrapper *,
.breadcrumb,
.breadcrumb *,
.breadcrumbs,
.breadcrumbs *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* روابط مسار التنقل */
.s-breadcrumb a,
.breadcrumb a,
.breadcrumbs a{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  }
/* إصلاح القائمة المنسدلة للجوال بالكامل */

.s-menu,
.s-offcanvas,
.mobile-menu,
.offcanvas,
[class*="offcanvas"],
[class*="drawer"]{
    background:#020416 !important;
}

/* جميع عناصر القائمة */
.s-menu *,
.s-offcanvas *,
.mobile-menu *,
.offcanvas *,
[class*="offcanvas"] *,
[class*="drawer"] *{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}

/* حاوية التصنيفات */
.s-menu .categories,
.s-menu .menu-categories,
.s-offcanvas .categories,
.s-offcanvas .menu-categories,
[class*="menu"] ul,
[class*="menu"] li{
    background:#020416 !important;
    border-color:rgba(16,199,232,.15) !important;
}

/* روابط التصنيفات */
.s-menu a,
.s-offcanvas a,
.mobile-menu a,
.offcanvas a{
    color:#ffffff !important;
    background:transparent !important;
}

/* عند المرور */
.s-menu a:hover,
.s-offcanvas a:hover{
    color:#10c7e8 !important;
}

/* إزالة أي خلفية بيضاء داخل القائمة */
.s-menu div,
.s-menu section,
.s-menu article,
.s-offcanvas div,
.s-offcanvas section,
.s-offcanvas article{
    background:transparent !important;
}

/* عنوان القسم */
.s-menu h1,
.s-menu h2,
.s-menu h3,
.s-menu h4,
.s-offcanvas h1,
.s-offcanvas h2,
.s-offcanvas h3,
.s-offcanvas h4{
    color:#ffffff !important;
}

/* إصلاح عرض القائمة بالجوال */
@media(max-width:768px){

    .s-menu,
    .s-offcanvas,
    .mobile-menu,
    .offcanvas{
        width:100% !important;
        max-width:100% !important;
    }

    .s-menu-content,
    .s-offcanvas-content{
        background:#020416 !important;
    }
}
/* إصلاح المستطيلات البيضاء فوق المنتجات */
.product-entry span,
.s-product-card-entry span,
.s-product-card-vertical span,
.product-entry .badge,
.s-product-card-entry .badge,
.product-entry .tag,
.s-product-card-entry .tag,
.product-entry .label,
.s-product-card-entry .label{
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
}

/* أي عنصر أبيض داخل بطاقة المنتج */
.product-entry [style*="background: white"],
.product-entry [style*="background-color: white"],
.s-product-card-entry [style*="background: white"],
.s-product-card-entry [style*="background-color: white"]{
    color:#000000 !important;
    -webkit-text-fill-color:#000000 !important;
}