/* ============ بوخلي بلس — هيدر + فوتر + قائمة جانبية بألوان المتجر (أسود / أبيض) (CSS فقط) ============ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

:root {
    --bu5-accent: #ffffff;
    --bu5-accent2: #e6e6e6;
    --bu5-bg: #050505;
    --bu5-panel: #0d0d0d;
}

/* لا نلمس أي position/transform/width/height/overflow لعناصر التحكم بالفتح والإغلاق (القائمة الجانبية، السلايدر) */

/* شبكة أمان: أي فجوة/زاوية تكشف خلفية الصفحة الأصلية تصير بنفس لون EVO الداكن بدل ما تبين بلون مختلف */
html, body {
    background: var(--bu5-bg) !important;
    background-color: var(--bu5-bg) !important;
}

/* ============ الهيدر ============ */
html body .store-header,
html body .main-nav-container,
html body #mainnav,
html body #mainnav.fixed-header,
html body .header-inner.inner {
    background: radial-gradient(circle at 50% -40%, #1a0d0d 0%, #050505 55%, #000000 100%) !important;
    background-color: var(--bu5-bg) !important;
    font-family: 'Cairo', sans-serif;
}
.main-nav-container {
    position: relative;
    border-bottom: none !important;
}
.main-nav-container::after {
    content: "";
    position: absolute; right: 0; bottom: 0; left: 0; height: 2px; z-index: 5;
    background: linear-gradient(90deg, transparent, var(--bu5-accent), var(--bu5-accent2), var(--bu5-accent), transparent);
    background-size: 200% 100%;
    animation: bu5Line 4s linear infinite;
    pointer-events: none;
}
@keyframes bu5Line { to { background-position: -200% 0; } }

.mburger,
.search-btn,
.header-btn {
    border-radius: 10px;
    transition: background .25s ease, transform .2s ease;
}
.mburger:hover,
.search-btn:hover,
.header-btn:hover {
    background: rgba(255,255,255,0.12) !important;
    transform: translateY(-2px);
}
.mburger i,
.search-btn i,
.header-btn i {
    color: var(--bu5-accent2) !important;
}
.mburger p { color: #ffffff !important; font-weight: 800 !important; }

salla-cart-summary .s-cart-summary-icon,
salla-cart-summary svg { fill: var(--bu5-accent2) !important; }
.s-cart-summary-count {
    background: linear-gradient(135deg, #ffffff, #cccccc) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    box-shadow: 0 0 0 2px var(--bu5-bg), 0 0 10px 2px rgba(255,255,255,0.6);
    animation: bu5BadgePulse 2s ease-in-out infinite;
}
@keyframes bu5BadgePulse { 0%,100% { box-shadow: 0 0 0 2px var(--bu5-bg), 0 0 10px 2px rgba(255,255,255,0.6); } 50% { box-shadow: 0 0 0 2px var(--bu5-bg), 0 0 16px 5px rgba(255,255,255,0.9); } }
.s-cart-summary-total { color: #ffffff !important; font-weight: 800 !important; }
.s-cart-summary-total i { color: var(--bu5-accent2) !important; }

.navbar-brand img {
    filter: drop-shadow(0 0 14px rgba(255,255,255,0.55));
    transition: filter .3s ease, transform .3s ease;
}
.navbar-brand:hover img { filter: drop-shadow(0 0 22px rgba(255,255,255,0.85)); transform: scale(1.04); }

salla-localization-modal { color: #e6e6e6 !important; font-weight: 700; }

.nav-header,
.nav-header.inner {
    background: var(--bu5-bg) !important;
    border-top: 1px solid rgba(255,255,255,0.14) !important;
}

/* ============ القائمة الجانبية (الموبايل) — صفوف بارزة بإطار وسهم ============ */
/* السبب الحقيقي للرقعة الملوّنة: مكتبة mmenu (اللي سلة تستخدمها) تحط صنفها
   الحقيقي .mm-spn (مو .mm-menu/.mm-panel/.mm-navbar متل ما كنا خمّنا) + معه
   الصنف الافتراضي .mm-spn--light اللي يفرض خلفية فاتحة، وهاد الصنف ما كنا
   مستهدفينه أبداً — هون منلاقي فعلياً شكل الباتش. اكتشفنا هيك من كود متجر
   حقيقي شغال بنفس ثيم Angel (اكواد mmenu ثابتة بكل متاجر الثيم). */
/* مهم جداً: ما منلمس .mm-ocd نفسها (طبقة الخلفية المعتمة) بأي top/right/bottom/left
   أو background ثابت بدون شرط --open، لأنها بتضل موجودة بالـ DOM دايماً (حتى
   والقائمة مقفولة) وبتخفي الموقع كامل خلفها لو صارت full-screen وopaque دايماً.
   كل تثبيت للأبعاد وكل خلفية هون معلّقة بصنف mm-ocd--open فقط. */
html body .mm-ocd--open,
html body .mm-ocd--open .mm-ocd__content,
html body .mm-ocd--open .mm-ocd__content > *,
html body .mm-ocd--open .mm-spn,
html body .mm-ocd--open .mm-spn.mm-spn--light,
html body .mm-ocd--open .mm-spn--light,
html body .mm-ocd--open .mm-spn ul,
html body .mm-ocd--open .mm-spn ul ul,
html body .mm-ocd--open .mobile-menu,
html body .mm-ocd--open nav.mobile-menu,
html body .mm-ocd--open #mobile-menu {
    background:
        radial-gradient(circle at 15% 0%, rgba(255,255,255,0.08), transparent 45%),
        var(--bu5-bg) !important;
    background-color: var(--bu5-bg) !important;
    color: #ffffff !important;
}
.mm-ocd--open .mobile-menu,
.mm-ocd--open nav.mobile-menu {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* تثبيت القائمة تغطي الشاشة بالكامل من فوق لتحت بدون أي فراغ أو استدارة
   حوالين الصندوق — بس وهي مفتوحة فقط (mm-ocd--open)، حتى ما تأثر على
   حالة الإغلاق الطبيعية اللي المكتبة بتتحكم فيها بنفسها */
html body .mm-ocd--open .mm-ocd__content,
html body .mm-ocd--open .mm-spn.mm-spn--main,
html body .mm-ocd--open #mobile-menu {
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-height: 100vh !important;
    height: 100% !important;
}
/* أي عنصر تاني جوا شجرة القائمة ممكن يكون ورث استدارة زائدة — بس وهي مفتوحة */
html body .mm-ocd--open #mobile-menu,
html body .mm-ocd--open #mobile-menu * {
    border-radius: 0;
}
html body .main-menu > li {
    border-radius: 14px !important;
}
html body .btn--close-sm.close-mobile-menu {
    border-radius: 50% !important;
}

/* إخفاء صندوق السلايدر الفاضي اللي سلة تحطه تلقائياً أعلى القائمة الجانبية
   (لو ما فيه صور مضافة له من لوحة التحكم بيضل فاضي بدون محتوى) */
html body .mobile-menu-slider,
html body #mobile-menu-slider {
    display: none !important;
}

/* نقل سهم الفتح "<" من يسار كل صف للطرف اليمين (بداية السطر بالعربي) —
   هو مولّد بـ ::before أصلي من الثيم (حدود مقلوبة 45deg) مش عنصر HTML منفصل */
html body .main-menu > li::before {
    left: auto !important;
    right: 14px !important;
}
html body .main-menu > li .sidemenu-link,
html body .main-menu > li .menu_title {
    padding-right: 30px !important;
    padding-left: 12px !important;
}

/* إزالة أي padding افتراضي غير متماثل من الثيم على القائمة نفسها — هو
   يلي كان يسبب مسافة فاضية أكبر بجهة عن التانية حوالين الأزرار */
html body .main-menu {
    padding: 0 !important;
    margin: 0 !important;
}
.main-menu { box-sizing: border-box !important; max-width: 100% !important; }
.main-menu > li {
    position: relative;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 8px 12px !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-radius: 14px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.07), rgba(255,255,255,0.01)) !important;
    transition: border-color .25s ease, background .25s ease;
}
.main-menu > li:hover {
    border-color: rgba(255,255,255,0.6) !important;
    background: rgba(255,255,255,0.12) !important;
}
.main-menu > li,
.main-menu > li * {
    box-sizing: border-box !important;
    max-width: 100%;
}

.sidemenu-link,
.main-menu .menu_title {
    color: #ffffff !important;
    font-weight: 800 !important;
}
.main-menu .links > span,
.main-menu .social > span {
    display: flex !important;
    align-items: center;
    color: #ffffff !important;
    font-weight: 800 !important;
}
.main-menu .links > span i,
.main-menu .social > span i {
    color: var(--bu5-accent) !important;
    font-size: 1.1rem;
}
.main-menu .links-menu,
.main-menu .social-menu {
    background: rgba(6,23,26,0.35) !important;
    border-top: 1px dashed rgba(255,255,255,0.25) !important;
}
.main-menu .links-menu .footer-title {
    color: var(--bu5-accent2) !important;
    font-weight: 900 !important;
}
.main-menu .links-menu .footer-list a {
    color: #9a9a9a !important;
    transition: color .2s ease;
}
.main-menu .links-menu .footer-list a:hover { color: #fff !important; }
.main-menu .social-menu .s-contacts-item {
    color: #e6e6e6 !important;
    font-weight: 700;
    transition: color .2s ease;
}
.main-menu .social-menu .s-contacts-item:hover { color: var(--bu5-accent2) !important; }
.main-menu .social-menu .s-contacts-icon svg { fill: var(--bu5-accent) !important; }

.btn--close-sm.close-mobile-menu {
    color: var(--bu5-accent2) !important;
    background: rgba(255,255,255,0.14) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 50% !important;
}

/* ============ الفوتر — تصميم قوي بحدود مضيئة وشعار كبير ============ */
.store-footer,
.store-footer__inner {
    position: relative;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 50%),
        var(--bu5-bg) !important;
    font-family: 'Cairo', sans-serif;
}
.store-footer::before {
    content: "";
    position: absolute; top: 0; right: 0; left: 0; height: 2px; z-index: 2;
    background: linear-gradient(90deg, transparent, var(--bu5-accent), var(--bu5-accent2), var(--bu5-accent), transparent);
    background-size: 200% 100%;
    animation: bu5Line 4s linear infinite;
}

.to-top a {
    color: #9a9a9a !important;
    font-weight: 700;
    transition: color .2s ease, transform .2s ease;
}
.to-top a:hover { color: var(--bu5-accent2) !important; transform: translateY(-3px); }

.footer-top.footer-container,
.footer-middle.footer-container {
    border-color: rgba(255,255,255,0.18) !important;
}

.footer-newsletter .title-mail strong {
    color: #ffffff !important;
    font-size: 1.3rem !important;
    font-weight: 900 !important;
}
.footer-newsletter .title-mail p { color: #9a9a9a !important; }
.mail-input {
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    color: #ffffff !important;
    font-weight: 600;
}
.mail-input::placeholder { color: #7a7a7a !important; }
#mail .s-button-element {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff, #cccccc) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    border: none !important;
    box-shadow: 0 10px 24px rgba(255,255,255,0.35);
    transition: filter .25s ease, transform .2s ease;
}
#mail .s-button-element:hover { filter: brightness(1.12); transform: translateY(-2px); }

.footer-social .s-social-list a {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50% !important;
    color: var(--bu5-accent2) !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.footer-social .s-social-list a:hover {
    background: linear-gradient(135deg, #ffffff, #cccccc) !important;
    color: #000000 !important;
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 10px 22px rgba(255,255,255,0.4);
}

.footer-profile .logo-footer img {
    filter: drop-shadow(0 0 18px rgba(255,255,255,0.5));
}

.menu-list .footer-title {
    position: relative;
    color: var(--bu5-accent2) !important;
    font-weight: 900 !important;
    padding-bottom: 10px;
}
.menu-list .footer-title::after {
    content: "";
    position: absolute; right: 0; bottom: 0;
    width: 36px; height: 2px;
    background: linear-gradient(90deg, var(--bu5-accent), transparent);
}
.menu-list .footer-list a {
    color: #9a9a9a !important;
    transition: color .2s ease, padding-right .2s ease;
}
.menu-list .footer-list a:hover { color: #fff !important; padding-right: 4px; }

.s-contacts-title {
    color: #ffffff !important;
    font-weight: 900 !important;
}
.s-contacts-item {
    color: #e6e6e6 !important;
    font-weight: 700;
    transition: color .2s ease, transform .2s ease;
}
.s-contacts-item:hover { color: var(--bu5-accent2) !important; transform: translateX(-3px); }
.s-contacts-icon svg { fill: var(--bu5-accent) !important; }
.s-contacts-icon {
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    padding: 6px;
}

.footer-vat { display: none !important; }
salla-trust-badges { display: none !important; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.18) !important; }
.footer-bottom .copyrights,
.footer-bottom .copyrights p { color: #7a7a7a !important; }
.footer-bottom .copyrights a { color: var(--bu5-accent2) !important; font-weight: 700; }

.s-block--payment li,
.footer-bottom li[class^="pay-"] {
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: transform .2s ease;
}
.s-block--payment li:hover,
.footer-bottom li[class^="pay-"]:hover { transform: translateY(-3px); }

/* ============ موبايل ============ */
@media (max-width: 767px) {
    .footer-middle.footer-container { text-align: center; }
}



























/* ============ بوخلي بلس — هيدر + فوتر + قائمة جانبية بألوان المتجر (أسود / أبيض) (CSS فقط) ============ */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&display=swap');

:root {
    --bu5-accent: #ffffff;
    --bu5-accent2: #e6e6e6;
    --bu5-bg: #050505;
    --bu5-panel: #0d0d0d;
}

/* لا نلمس أي position/transform/width/height/overflow لعناصر التحكم بالفتح والإغلاق (القائمة الجانبية، السلايدر) */

/* شبكة أمان: أي فجوة/زاوية تكشف خلفية الصفحة الأصلية تصير بنفس لون EVO الداكن بدل ما تبين بلون مختلف */
html, body {
    background: var(--bu5-bg) !important;
    background-color: var(--bu5-bg) !important;
}

/* ============ الهيدر ============ */
html body .store-header,
html body .main-nav-container,
html body #mainnav,
html body #mainnav.fixed-header,
html body .header-inner.inner {
    background: radial-gradient(circle at 50% -40%, #1a0d0d 0%, #050505 55%, #000000 100%) !important;
    background-color: var(--bu5-bg) !important;
    font-family: 'Cairo', sans-serif;
}
.main-nav-container {
    position: relative;
    border-bottom: none !important;
}
.main-nav-container::after {
    content: "";
    position: absolute; right: 0; bottom: 0; left: 0; height: 2px; z-index: 5;
    background: linear-gradient(90deg, transparent, var(--bu5-accent), var(--bu5-accent2), var(--bu5-accent), transparent);
    background-size: 200% 100%;
    animation: bu5Line 4s linear infinite;
    pointer-events: none;
}
@keyframes bu5Line { to { background-position: -200% 0; } }

.mburger,
.search-btn,
.header-btn {
    border-radius: 10px;
    transition: background .25s ease, transform .2s ease;
}
.mburger:hover,
.search-btn:hover,
.header-btn:hover {
    background: rgba(255,255,255,0.12) !important;
    transform: translateY(-2px);
}
.mburger i,
.search-btn i,
.header-btn i {
    color: var(--bu5-accent2) !important;
}
.mburger p { color: #ffffff !important; font-weight: 800 !important; }

salla-cart-summary .s-cart-summary-icon,
salla-cart-summary svg { fill: var(--bu5-accent2) !important; }
.s-cart-summary-count {
    background: linear-gradient(135deg, #ffffff, #cccccc) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    box-shadow: 0 0 0 2px var(--bu5-bg), 0 0 10px 2px rgba(255,255,255,0.6);
    animation: bu5BadgePulse 2s ease-in-out infinite;
}
@keyframes bu5BadgePulse { 0%,100% { box-shadow: 0 0 0 2px var(--bu5-bg), 0 0 10px 2px rgba(255,255,255,0.6); } 50% { box-shadow: 0 0 0 2px var(--bu5-bg), 0 0 16px 5px rgba(255,255,255,0.9); } }
.s-cart-summary-total { color: #ffffff !important; font-weight: 800 !important; }
.s-cart-summary-total i { color: var(--bu5-accent2) !important; }

.navbar-brand img {
    filter: drop-shadow(0 0 14px rgba(255,255,255,0.55));
    transition: filter .3s ease, transform .3s ease;
}
.navbar-brand:hover img { filter: drop-shadow(0 0 22px rgba(255,255,255,0.85)); transform: scale(1.04); }

salla-localization-modal { color: #e6e6e6 !important; font-weight: 700; }

.nav-header,
.nav-header.inner {
    background: var(--bu5-bg) !important;
    border-top: 1px solid rgba(255,255,255,0.14) !important;
}

/* ============ القائمة الجانبية (الموبايل) — صفوف بارزة بإطار وسهم ============ */
/* السبب الحقيقي للرقعة الملوّنة: مكتبة mmenu (اللي سلة تستخدمها) تحط صنفها
   الحقيقي .mm-spn (مو .mm-menu/.mm-panel/.mm-navbar متل ما كنا خمّنا) + معه
   الصنف الافتراضي .mm-spn--light اللي يفرض خلفية فاتحة، وهاد الصنف ما كنا
   مستهدفينه أبداً — هون منلاقي فعلياً شكل الباتش. اكتشفنا هيك من كود متجر
   حقيقي شغال بنفس ثيم Angel (اكواد mmenu ثابتة بكل متاجر الثيم). */
/* مهم جداً: ما منلمس .mm-ocd نفسها (طبقة الخلفية المعتمة) بأي top/right/bottom/left
   أو background ثابت بدون شرط --open، لأنها بتضل موجودة بالـ DOM دايماً (حتى
   والقائمة مقفولة) وبتخفي الموقع كامل خلفها لو صارت full-screen وopaque دايماً.
   كل تثبيت للأبعاد وكل خلفية هون معلّقة بصنف mm-ocd--open فقط. */
html body .mm-ocd--open,
html body .mm-ocd--open .mm-ocd__content,
html body .mm-ocd--open .mm-ocd__content > *,
html body .mm-ocd--open .mm-spn,
html body .mm-ocd--open .mm-spn.mm-spn--light,
html body .mm-ocd--open .mm-spn--light,
html body .mm-ocd--open .mm-spn ul,
html body .mm-ocd--open .mm-spn ul ul,
html body .mm-ocd--open .mobile-menu,
html body .mm-ocd--open nav.mobile-menu,
html body .mm-ocd--open #mobile-menu {
    background:
        radial-gradient(circle at 15% 0%, rgba(255,255,255,0.08), transparent 45%),
        var(--bu5-bg) !important;
    background-color: var(--bu5-bg) !important;
    color: #ffffff !important;
}
.mm-ocd--open .mobile-menu,
.mm-ocd--open nav.mobile-menu {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* تثبيت القائمة تغطي الشاشة بالكامل من فوق لتحت بدون أي فراغ أو استدارة
   حوالين الصندوق — بس وهي مفتوحة فقط (mm-ocd--open)، حتى ما تأثر على
   حالة الإغلاق الطبيعية اللي المكتبة بتتحكم فيها بنفسها */
html body .mm-ocd--open .mm-ocd__content,
html body .mm-ocd--open .mm-spn.mm-spn--main,
html body .mm-ocd--open #mobile-menu {
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    min-height: 100vh !important;
    height: 100% !important;
}
/* أي عنصر تاني جوا شجرة القائمة ممكن يكون ورث استدارة زائدة — بس وهي مفتوحة */
html body .mm-ocd--open #mobile-menu,
html body .mm-ocd--open #mobile-menu * {
    border-radius: 0;
}
html body .main-menu > li {
    border-radius: 14px !important;
}
html body .btn--close-sm.close-mobile-menu {
    border-radius: 50% !important;
}

/* إخفاء صندوق السلايدر الفاضي اللي سلة تحطه تلقائياً أعلى القائمة الجانبية
   (لو ما فيه صور مضافة له من لوحة التحكم بيضل فاضي بدون محتوى) */
html body .mobile-menu-slider,
html body #mobile-menu-slider {
    display: none !important;
}

/* نقل سهم الفتح "<" من يسار كل صف للطرف اليمين (بداية السطر بالعربي) —
   هو مولّد بـ ::before أصلي من الثيم (حدود مقلوبة 45deg) مش عنصر HTML منفصل */
html body .main-menu > li::before {
    left: auto !important;
    right: 14px !important;
}
html body .main-menu > li .sidemenu-link,
html body .main-menu > li .menu_title {
    padding-right: 30px !important;
    padding-left: 12px !important;
}

/* إزالة أي padding افتراضي غير متماثل من الثيم على القائمة نفسها — هو
   يلي كان يسبب مسافة فاضية أكبر بجهة عن التانية حوالين الأزرار */
html body .main-menu {
    padding: 0 !important;
    margin: 0 !important;
}
.main-menu { box-sizing: border-box !important; max-width: 100% !important; }
.main-menu > li {
    position: relative;
    box-sizing: border-box !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 8px 12px !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-radius: 14px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.07), rgba(255,255,255,0.01)) !important;
    transition: border-color .25s ease, background .25s ease;
}
.main-menu > li:hover {
    border-color: rgba(255,255,255,0.6) !important;
    background: rgba(255,255,255,0.12) !important;
}
.main-menu > li,
.main-menu > li * {
    box-sizing: border-box !important;
    max-width: 100%;
}

.sidemenu-link,
.main-menu .menu_title {
    color: #ffffff !important;
    font-weight: 800 !important;
}
.main-menu .links > span,
.main-menu .social > span {
    display: flex !important;
    align-items: center;
    color: #ffffff !important;
    font-weight: 800 !important;
}
.main-menu .links > span i,
.main-menu .social > span i {
    color: var(--bu5-accent) !important;
    font-size: 1.1rem;
}
.main-menu .links-menu,
.main-menu .social-menu {
    background: rgba(6,23,26,0.35) !important;
    border-top: 1px dashed rgba(255,255,255,0.25) !important;
}
.main-menu .links-menu .footer-title {
    color: var(--bu5-accent2) !important;
    font-weight: 900 !important;
}
.main-menu .links-menu .footer-list a {
    color: #9a9a9a !important;
    transition: color .2s ease;
}
.main-menu .links-menu .footer-list a:hover { color: #fff !important; }
.main-menu .social-menu .s-contacts-item {
    color: #e6e6e6 !important;
    font-weight: 700;
    transition: color .2s ease;
}
.main-menu .social-menu .s-contacts-item:hover { color: var(--bu5-accent2) !important; }
.main-menu .social-menu .s-contacts-icon svg { fill: var(--bu5-accent) !important; }

.btn--close-sm.close-mobile-menu {
    color: var(--bu5-accent2) !important;
    background: rgba(255,255,255,0.14) !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    border-radius: 50% !important;
}

/* ============ الفوتر — تصميم قوي بحدود مضيئة وشعار كبير ============ */
.store-footer,
.store-footer__inner {
    position: relative;
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 50%),
        var(--bu5-bg) !important;
    font-family: 'Cairo', sans-serif;
}
.store-footer::before {
    content: "";
    position: absolute; top: 0; right: 0; left: 0; height: 2px; z-index: 2;
    background: linear-gradient(90deg, transparent, var(--bu5-accent), var(--bu5-accent2), var(--bu5-accent), transparent);
    background-size: 200% 100%;
    animation: bu5Line 4s linear infinite;
}

.to-top a {
    color: #9a9a9a !important;
    font-weight: 700;
    transition: color .2s ease, transform .2s ease;
}
.to-top a:hover { color: var(--bu5-accent2) !important; transform: translateY(-3px); }

.footer-top.footer-container,
.footer-middle.footer-container {
    border-color: rgba(255,255,255,0.18) !important;
}

.footer-newsletter .title-mail strong {
    color: #ffffff !important;
    font-size: 1.3rem !important;
    font-weight: 900 !important;
}
.footer-newsletter .title-mail p { color: #9a9a9a !important; }
.mail-input {
    background: rgba(255,255,255,0.06) !important;
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    color: #ffffff !important;
    font-weight: 600;
}
.mail-input::placeholder { color: #7a7a7a !important; }
#mail .s-button-element {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff, #cccccc) !important;
    color: #000000 !important;
    font-weight: 900 !important;
    border: none !important;
    box-shadow: 0 10px 24px rgba(255,255,255,0.35);
    transition: filter .25s ease, transform .2s ease;
}
#mail .s-button-element:hover { filter: brightness(1.12); transform: translateY(-2px); }

.footer-social .s-social-list a {
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50% !important;
    color: var(--bu5-accent2) !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.footer-social .s-social-list a:hover {
    background: linear-gradient(135deg, #ffffff, #cccccc) !important;
    color: #000000 !important;
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 10px 22px rgba(255,255,255,0.4);
}

.footer-profile .logo-footer img {
    filter: drop-shadow(0 0 18px rgba(255,255,255,0.5));
}

.menu-list .footer-title {
    position: relative;
    color: var(--bu5-accent2) !important;
    font-weight: 900 !important;
    padding-bottom: 10px;
}
.menu-list .footer-title::after {
    content: "";
    position: absolute; right: 0; bottom: 0;
    width: 36px; height: 2px;
    background: linear-gradient(90deg, var(--bu5-accent), transparent);
}
.menu-list .footer-list a {
    color: #9a9a9a !important;
    transition: color .2s ease, padding-right .2s ease;
}
.menu-list .footer-list a:hover { color: #fff !important; padding-right: 4px; }

.s-contacts-title {
    color: #ffffff !important;
    font-weight: 900 !important;
}
.s-contacts-item {
    color: #e6e6e6 !important;
    font-weight: 700;
    transition: color .2s ease, transform .2s ease;
}
.s-contacts-item:hover { color: var(--bu5-accent2) !important; transform: translateX(-3px); }
.s-contacts-icon svg { fill: var(--bu5-accent) !important; }
.s-contacts-icon {
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    padding: 6px;
}

.footer-vat { display: none !important; }
salla-trust-badges { display: none !important; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.18) !important; }
.footer-bottom .copyrights,
.footer-bottom .copyrights p { color: #7a7a7a !important; }
.footer-bottom .copyrights a { color: var(--bu5-accent2) !important; font-weight: 700; }

.s-block--payment li,
.footer-bottom li[class^="pay-"] {
    background: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: transform .2s ease;
}
.s-block--payment li:hover,
.footer-bottom li[class^="pay-"]:hover { transform: translateY(-3px); }

/* ============ موبايل ============ */
@media (max-width: 767px) {
    .footer-middle.footer-container { text-align: center; }
}

/* ============================================================ */
/* ============ بطاقة المنتج ============ */
/* ============================================================ */
/* ============ بوخلي بلس — تصميم بطاقة المنتج (ثيم Aali الحقيقي، أسود / أبيض) ============ */
/* تم فحص كود المتجر مباشرة: بطاقة المنتج هون صنفها enhanced-product-card
   (مو s-product-card-entry متل ثيم Angel) — لهيك الكود القديم ما كان يشتغل إطلاقاً. */


custom-salla-product-card,
custom-salla-product-card * {
    font-family: 'Cairo', sans-serif;
}

@keyframes bu5CardRise { from { opacity: 0; transform: translateY(28px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes bu5CardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes bu5CardGlowPulse {
    0%,100% { box-shadow: 0 10px 26px rgba(0,0,0,0.5), 0 0 0 0 rgba(255,255,255,0.08); }
    50% { box-shadow: 0 10px 26px rgba(0,0,0,0.5), 0 0 20px 3px rgba(255,255,255,0.16); }
}

html body custom-salla-product-card.enhanced-product-card {
    position: relative !important;
    isolation: isolate;
    display: block !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    background: radial-gradient(circle at 25% 0%, #141414 0%, #0a0a0a 55%, #000000 100%) !important;
    overflow: hidden !important;
    animation: bu5CardRise .6s cubic-bezier(.2,.8,.3,1) both,
               bu5CardFloat 5s ease-in-out .6s infinite,
               bu5CardGlowPulse 3.4s ease-in-out .6s infinite;
    transition: transform .35s cubic-bezier(.2,.8,.3,1), border-color .35s ease, box-shadow .35s ease !important;
}
html body .s-products-list-wrapper custom-salla-product-card.enhanced-product-card:nth-child(1),
html body .s-products-slider-wrapper custom-salla-product-card.enhanced-product-card:nth-child(1) { animation-delay: 0s, .1s, .1s; }
html body .s-products-list-wrapper custom-salla-product-card.enhanced-product-card:nth-child(2),
html body .s-products-slider-wrapper custom-salla-product-card.enhanced-product-card:nth-child(2) { animation-delay: .08s, .18s, .18s; }
html body .s-products-list-wrapper custom-salla-product-card.enhanced-product-card:nth-child(3),
html body .s-products-slider-wrapper custom-salla-product-card.enhanced-product-card:nth-child(3) { animation-delay: .16s, .26s, .26s; }
html body .s-products-list-wrapper custom-salla-product-card.enhanced-product-card:nth-child(4),
html body .s-products-slider-wrapper custom-salla-product-card.enhanced-product-card:nth-child(4) { animation-delay: .24s, .34s, .34s; }
html body custom-salla-product-card.enhanced-product-card:hover {
    animation-play-state: paused, paused, paused;
    transform: translateY(-10px) scale(1.02) !important;
    border-color: rgba(255,255,255,0.65) !important;
    box-shadow: 0 26px 46px rgba(255,255,255,0.16), 0 14px 28px rgba(0,0,0,0.55) !important;
}

/* إطار مضيء دوّار — شغال بهدوء طول الوقت، وبيسرع لما تحط الماوس */
html body custom-salla-product-card.enhanced-product-card::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    padding: 1.4px; border-radius: 16px;
    background: conic-gradient(from var(--bu5-angle, 0deg),
        transparent 0deg, transparent 260deg,
        rgba(255,255,255,0.85) 300deg, #ffffff 325deg,
        rgba(255,255,255,0.85) 350deg, transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: .55; transition: opacity .3s ease;
    animation: bu5CardSpin 7s linear infinite;
    pointer-events: none;
}
html body custom-salla-product-card.enhanced-product-card:hover::before {
    opacity: 1;
    animation-duration: 2.4s;
}
@property --bu5-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes bu5CardSpin { to { --bu5-angle: 360deg; } }

/* صورة المنتج */
html body custom-salla-product-card .thumb-wrapper {
    border-radius: 14px 14px 0 0 !important;
    overflow: hidden !important;
}
html body custom-salla-product-card img.my-lazy {
    transition: transform .5s cubic-bezier(.2,.8,.3,1) !important;
}
html body custom-salla-product-card.enhanced-product-card:hover img.my-lazy {
    transform: scale(1.1) rotate(-1deg) !important;
}

/* التصنيف */
html body .product-category-name {
    color: var(--bu5-accent2) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
}

/* العنوان */
html body .product-title,
html body .product-title a {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    transition: color .25s ease;
}
html body custom-salla-product-card.enhanced-product-card:hover .product-title a {
    color: var(--bu5-accent2) !important;
}

/* السعر ونسبة الخصم */
html body .price-wrapper .text-primary,
html body .price-wrapper .color-danger,
html body .price-wrapper .t-red {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 900 !important;
}
html body .price-wrapper .before-price {
    color: #7a7a7a !important;
    text-decoration: line-through !important;
}
html body .sale-ratio-wrapper .sale-ratio {
    background: #ffffff !important;
    color: #000000 !important;
    font-weight: 800 !important;
    border-radius: 20px !important;
}

/* زر الإضافة للسلة داخل البطاقة — الغريديانت الأصلي (btns-gradient من إعدادات
   الثيم) ما بينكسر بأي override عادي على background حتى مع !important (جربنا
   مباشرة حي عالمتجر وما نفع)، فالحل يلي ضبط فعلياً هو نغطيه بطبقة ::before
   بيضاء فوقه بدل ما نحاول نلغي الخلفية الأصلية نفسها */
html body custom-salla-product-card .s-button-element.s-button-solid.s-button-primary {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    color: #000000 !important;
    font-weight: 900 !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 18px rgba(255,255,255,0.18) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}
html body custom-salla-product-card .s-button-element.s-button-solid.s-button-primary::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: #ffffff !important;
    border-radius: inherit !important;
    transition: background .25s ease !important;
}
html body custom-salla-product-card .s-button-element.s-button-solid.s-button-primary:hover::before {
    background: #e6e6e6 !important;
}
html body custom-salla-product-card .s-button-element.s-button-solid.s-button-primary .s-button-text,
html body custom-salla-product-card .s-button-element.s-button-solid.s-button-primary .s-button-text i,
html body custom-salla-product-card .s-button-element.s-button-solid.s-button-primary svg {
    position: relative !important;
    z-index: 1 !important;
    color: #000000 !important;
    fill: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}
html body custom-salla-product-card .s-button-element.s-button-solid.s-button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(255,255,255,0.32) !important;
}
html body custom-salla-product-card .s-button-element.s-button-solid.s-button-primary:active {
    transform: translateY(0) scale(.97);
}

/* ============ موبايل ============ */
@media (max-width: 767px) {
    html body .s-products-slider-wrapper custom-salla-product-card.enhanced-product-card {
        width: 76% !important;
        max-width: 300px !important;
    }
    html body .product-title,
    html body .product-title a { font-size: 0.85rem !important; }
    html body .price-wrapper .text-primary { font-size: 1rem !important; }
}

/* ============================================================ */
/* ============ صفحة المنتج ============ */
/* ============================================================ */
/* ============ بوخلي بلس — تصميم صفحة المنتج (ثيم Aali الحقيقي، أسود / أبيض) ============ */
/* تم فحص صفحة منتج حقيقية على bu5lii.com مباشرة، هاي الكلاسات الفعلية:
   product-page-main / product-main-title / total-price / before-price /
   details-slider / s-quantity-input-container / sticky-product-bar /
   tabs-wrapper.product-tabs-wrapper / tab-trigger / btn--wishlist /
   button[product-status].s-button-element.s-button-solid.s-button-primary */


.product-page-main, .product-page-main * {
    font-family: 'Cairo', sans-serif;
}

@keyframes bu5ppFadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* الفتات */
html body .breadcrumbs a { color: var(--bu5-accent2) !important; }
html body .breadcrumbs a:hover { color: #fff !important; }
html body .breadcrumbs svg { fill: #555 !important; }

/* المعرض */
html body .details-slider {
    border-radius: 16px;
    animation: bu5ppFadeUp .6s ease both;
}
html body .details-slider .swiper-slide {
    border-radius: 16px !important;
    overflow: hidden !important;
    background: radial-gradient(circle at 30% 10%, #141414 0%, #0a0a0a 60%, #000 100%) !important;
}
html body .details-slider .s-slider-nav-arrow {
    background: rgba(0,0,0,0.6) !important;
    color: #fff !important;
    border-radius: 50% !important;
}

/* أزرار المفضلة والمشاركة */
html body .btn--wishlist {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: 50% !important;
    transition: background .25s ease, transform .25s ease;
}
html body .btn--wishlist:hover { background: #ffffff !important; transform: translateY(-2px); }
html body .btn--wishlist i,
html body .btn--wishlist svg { color: var(--bu5-accent2) !important; fill: var(--bu5-accent2) !important; }
html body .btn--wishlist:hover i,
html body .btn--wishlist:hover svg { color: #000 !important; fill: #000 !important; }

/* العنوان */
html body h1.product-main-title {
    color: #ffffff !important;
    font-weight: 900 !important;
    animation: bu5ppFadeUp .6s ease .05s both;
}

/* السعر */
html body h2.total-price,
html body h4.p-price {
    color: #ffffff !important;
    font-weight: 900 !important;
    animation: bu5ppFadeUp .6s ease .1s both;
}
html body .before-price {
    color: #7a7a7a !important;
    text-decoration: line-through !important;
}

/* حالة التوفر */
html body .p-available-badge { animation: bu5ppFadeUp .6s ease .15s both; }
html body .p-available-badge strong { color: #6ff5b0 !important; }

/* عداد الكمية */
html body .s-quantity-input-container {
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.05) !important;
}
html body .s-quantity-input-input { color: #fff !important; background: transparent !important; }
html body .s-quantity-input-button { color: var(--bu5-accent2) !important; transition: color .2s ease, transform .2s ease; }
html body .s-quantity-input-button:hover { color: #fff !important; transform: scale(1.15); }
html body .s-quantity-input-button svg { fill: currentColor !important; }

/* زر أضف للسلة (الرئيسي والشريط اللاصق) — نفس أسلوب طبقة ::before البيضاء
   فوق الخلفية الأصلية، لأن الغريديانت الأصلي ما بينلغى بـ background عادي */
html body button[product-status].s-button-element.s-button-solid.s-button-primary,
html body .s-button-element.s-button-solid.s-button-primary {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    color: #000000 !important;
    font-weight: 900 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 26px rgba(255,255,255,0.18) !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}
html body button[product-status].s-button-element.s-button-solid.s-button-primary::before,
html body .s-button-element.s-button-solid.s-button-primary::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: #ffffff !important;
    border-radius: inherit !important;
    transition: background .25s ease !important;
}
html body button[product-status].s-button-element.s-button-solid.s-button-primary:hover::before,
html body .s-button-element.s-button-solid.s-button-primary:hover::before {
    background: #e6e6e6 !important;
}
html body .s-button-element.s-button-solid.s-button-primary .s-button-text,
html body .s-button-element.s-button-solid.s-button-primary .s-button-text i {
    position: relative !important;
    z-index: 1 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}
html body .s-button-element.s-button-solid.s-button-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(255,255,255,0.3) !important;
}

/* الشريط اللاصق أسفل المنتج */
html body .sticky-product-bar {
    background: var(--bu5-panel) !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}
html body .sticky-product-bar span { color: #fff !important; }
html body .sticky-product-bar .total-price { color: var(--bu5-accent2) !important; }
html body .sticky-product-bar .before-price { color: #7a7a7a !important; }

/* تبويبات الوصف/التقييمات */
html body .tab-trigger {
    color: #9a9a9a !important;
    font-weight: 700 !important;
    transition: color .2s ease;
}
html body .tab-trigger.is-active {
    color: #ffffff !important;
    border-color: #ffffff !important;
}
html body .tabs-wrapper.product-tabs-wrapper {
    background: var(--bu5-panel) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 0 0 14px 14px !important;
}

/* ============ استجابة الجوال ============ */
@media (max-width: 767px) {
    html body .sticky-product-bar { border-radius: 14px !important; }
}
/* ================================================================
   Bu5lii — Full Store Theme Restyle (Black & White)
   Paste in Salla Dashboard → Design → Custom CSS
   Applies to header/footer (site-wide) + full product page
   ================================================================ */

:root{
  --bu5-bg:#000000;
  --bu5-bg-soft:#0a0a0a;
  --bu5-card:#0d0d0d;
  --bu5-line:rgba(255,255,255,.14);
  --bu5-line-strong:rgba(255,255,255,.3);
  --bu5-ink:#ffffff;
  --bu5-dim:rgba(255,255,255,.6);
  --bu5-faint:rgba(255,255,255,.4);
}

/* ---------- base ---------- */
body,
.app-inner{
  background:var(--bu5-bg) !important;
  color:var(--bu5-ink) !important;
}

/* ---------- header ---------- */
#mainnav,
#mainnav .inner,
.top-navbar{
  background:var(--bu5-bg) !important;
  color:var(--bu5-ink) !important;
  border-color:var(--bu5-line) !important;
}
#mainnav .header-btn,
#mainnav .header-menu-icon,
#mainnav .search-btn i,
.top-navbar .topnav-link-item{
  color:var(--bu5-ink) !important;
}
.s-search-input-wrapper{
  background:var(--bu5-card) !important;
  border-color:var(--bu5-line) !important;
}
.s-search-input{
  background:transparent !important;
  color:var(--bu5-ink) !important;
}
.s-cart-summary-wrapper,
.s-cart-summary-count{
  color:var(--bu5-ink) !important;
}

/* ---------- breadcrumbs ---------- */
.breadcrumbs,
.s-breadcrumb-wrapper,
.s-breadcrumb-item,
.s-breadcrumb-item a{
  color:var(--bu5-dim) !important;
}
.s-breadcrumb-arrow svg{fill:var(--bu5-faint) !important;}

/* ---------- product main ---------- */
.p-single-container{
  background:var(--bu5-bg) !important;
}
.product-main-title{
  color:var(--bu5-ink) !important;
  font-family:'Cairo',sans-serif;
  font-weight:800;
}
.product-category-name p,
.product-category-name a,
.product-entry__sub-title{
  color:var(--bu5-dim) !important;
}
.product-category-name a{
  text-decoration:underline;
  text-decoration-color:var(--bu5-line-strong);
}

/* slider / gallery */
.details-slider,
.s-slider-container{
  background:var(--bu5-bg-soft) !important;
  border-radius:14px;
}
.promotion-title{
  background:#fff !important;
  color:#000 !important;
  font-weight:700;
}

/* rating stars */
.s-rating-stars-btn-star svg path{fill:#fff !important;}
.s-rating-stars-reviews{color:var(--bu5-faint) !important;}

/* price block */
.p-price-outer,
.price-wrapper{
  color:var(--bu5-ink) !important;
}
.p-price,
.total-price,
h4.p-price,
h2.total-price{
  color:#fff !important;
}
.before-price,
.price-wrapper .text-gray-500{
  color:var(--bu5-faint) !important;
}
.p-available-badge__text{
  color:#fff !important;
}
.p-available-badge__dot,
.p-available-badge__ring{
  background:#fff !important;
  border-color:#fff !important;
}

/* description block (see previous message) */
.product__description{
  background:var(--bu5-card) !important;
  color:var(--bu5-ink) !important;
  border:1px solid var(--bu5-line);
  border-radius:16px;
  padding:24px 20px;
  line-height:1.9;
}
.product__description p{
  color:var(--bu5-dim) !important;
  font-size:13.5px;
  margin:0 0 10px;
}
.product__description p span[style]{color:rgba(255,255,255,.9) !important;}
.product__description strong{
  color:#fff !important;
  font-family:'Cairo',sans-serif;
  font-weight:800;
  font-size:15px;
  display:inline-block;
  margin:6px 0;
}
.product__description ul{
  list-style:none;
  margin:10px 0 18px;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.product__description ul li{
  position:relative;
  border:1px solid var(--bu5-line);
  background:rgba(255,255,255,.04);
  border-radius:10px;
  padding:10px 14px;
  padding-inline-start:28px;
  font-size:12.5px;
  color:var(--bu5-dim) !important;
  line-height:1.7;
}
.product__description ul li::before{
  content:'';
  position:absolute; right:12px; top:14px;
  width:6px; height:6px; border-radius:50%;
  background:#fff;
}
.product__description ul li span[style]{color:rgba(255,255,255,.78) !important;}

/* share / wishlist icons */
.s-social-share-btn,
.btn--wishlist{
  background:var(--bu5-card) !important;
  border-color:var(--bu5-line) !important;
  color:#fff !important;
}

/* sold counter bar */
.sold-q-or-remained_wrapper{
  background:var(--bu5-card) !important;
  color:#fff !important;
}
.sold-q-or-remained_wrapper .text-red-400{color:#fff !important;}

/* quantity + add to cart */
section.flex.bg-white,
.sticky-product-bar{
  background:var(--bu5-card) !important;
  border-color:var(--bu5-line) !important;
}
.form-label{color:var(--bu5-ink) !important;}
.s-quantity-input-container{
  background:var(--bu5-bg-soft) !important;
  border-color:var(--bu5-line) !important;
}
.s-quantity-input-input{
  background:transparent !important;
  color:#fff !important;
}
.s-quantity-input-button svg path{fill:#fff !important;}

.s-button-solid.s-button-primary,
.s-add-product-button-main .s-button-element{
  background:#fff !important;
  color:#000 !important;
  border-color:#fff !important;
  font-weight:800 !important;
}
.s-button-solid.s-button-primary:hover{
  background:#e5e5e5 !important;
}

/* payments row */
.payments-wrapper .s-payments-list-item img{
  filter:grayscale(1) contrast(1.05) brightness(1.15);
}

/* comments / reviews */
.s-comments-title,
.s-comments-count-label,
.s-reviews-summary-recommendation-percentage{
  color:#fff !important;
}
.s-reviews-summary-count,
.s-comments-item-timestamp,
.s-comments-filter-label{
  color:var(--bu5-dim) !important;
}
.s-comments-item-user-info-name-with-margin{
  color:#fff !important;
}
.s-comments-item-content-container p{
  color:var(--bu5-dim) !important;
}
.s-comments-item-avatar-img{
  filter:grayscale(1);
  border:1px solid var(--bu5-line);
  border-radius:50%;
}
.s-comments-form-input,
#comments-filter{
  background:var(--bu5-card) !important;
  color:#fff !important;
  border-color:var(--bu5-line) !important;
}

/* related / also-bought product cards */
.product-block,
custom-salla-product-card{
  background:var(--bu5-card) !important;
  border:1px solid var(--bu5-line) !important;
  border-radius:14px !important;
}
.product-block .title,
.customers-also-bought__title,
.s-slider-block__title-right h2{
  color:#fff !important;
}
.product-block .price-wrapper span,
.product-block .before-price{
  color:#fff !important;
}
.sale-ratio{
  background:#fff !important;
  color:#000 !important;
}
.product-block .btn--add-to-cart .s-button-solid{
  background:#fff !important;
  color:#000 !important;
}

/* footer */
.store-footer{
  background:var(--bu5-bg) !important;
  color:var(--bu5-dim) !important;
  border-color:var(--bu5-line) !important;
}
.store-footer a,
.store-footer h3,
.footer-list__item a{
  color:#fff !important;
}
.footer-social-outer .s-social-icon svg path{
  fill:#fff !important;
}
.store-footer .line{
  border-color:var(--bu5-line) !important;
}

/* whatsapp floating button stays green by nature — override to monochrome */
.wa-s-n{
  background:#fff !important;
  color:#000 !important;
}

@media (max-width:640px){
  .product__description{padding:18px 14px; border-radius:12px;}
  .product__description ul{grid-template-columns:1fr;}
}