/* ================================
   إعدادات اللون الأساسي
================================ */
:root {
    --main-purple: #7b1fa2;
    --main-purple-dark: #5e1680;
    --main-purple-light: #f6e8ff;
    --main-gold: #d4af37;
    --text-dark: #111111;
}

/* ================================
   خلفية المتجر العامة
================================ */
body,
#app,
.app-inner,
main,
.s-block,
[class*="s-block"],
.s-products-slider-wrapper,
.s-block-sections {
    background: #ffffff !important;
}

/* ================================
   لون الهوية البنفسجي
================================ */
a,
.s-button-primary,
.s-button-primary-outline,
.s-cart-summary-total,
.s-product-card-sale-price,
.s-product-card-price,
.s-product-card-content-price,
.s-product-card-content-title a {
    color: var(--main-purple) !important;
}

/* ================================
   أزرار المتجر
================================ */
button,
.s-button-element,
.s-button-btn,
.s-button-primary,
.s-button-primary-outline,
.s-add-product-button-main {
    border-color: var(--main-purple) !important;
    color: var(--main-purple) !important;
    background: #ffffff !important;
    border-radius: 14px !important;
}

button:hover,
.s-button-element:hover,
.s-button-btn:hover,
.s-button-primary:hover,
.s-button-primary-outline:hover,
.s-add-product-button-main:hover {
    background: var(--main-purple) !important;
    color: #ffffff !important;
    border-color: var(--main-purple) !important;
}

/* ================================
   الهيدر بالموف
================================ */
header,
.site-header,
.store-header,
.main-header,
.s-header {
    background: #ffffff !important;
    border-bottom: 2px solid var(--main-purple-light) !important;
    box-shadow: 0 4px 18px rgba(123, 31, 162, 0.08) !important;
    position: relative !important;
}

/* أيقونات الهيدر */
header svg,
.site-header svg,
.store-header svg,
.main-header svg {
    color: var(--main-purple) !important;
    stroke: var(--main-purple) !important;
}

/* عداد السلة */
.s-cart-summary-count,
.s-cart-count,
.cart-count,
[class*="cart"] [class*="count"] {
    background: var(--main-purple) !important;
    color: #ffffff !important;
}

/* ================================
   الشعار في المنتصف + كلمة الحيوان المدلل
================================ */
header,
.site-header,
.store-header,
.main-header,
.s-header {
    min-height: 125px !important;
}

.custom-centered-logo {
    position: absolute !important;
    left: 50% !important;
    top: 10px !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
}

.custom-centered-logo img {
    width: 78px !important;
    height: 78px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

.custom-logo-title {
    display: block !important;
    margin-top: 4px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--main-purple) !important;
    line-height: 1.2 !important;
    font-family: "Tajawal", "Cairo", "Arial", sans-serif !important;
    white-space: nowrap !important;
}

/* ================================
   كروت المنتجات بدون مربعات مزعجة
================================ */
.s-product-card-entry,
.s-product-card-vertical,
.s-product-card-horizontal,
.s-product-card-content,
.s-product-card-image,
.s-product-card-image a,
salla-product-card {
    background: #ffffff !important;
    border: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.s-product-card-entry,
.s-product-card-vertical,
.s-product-card-horizontal {
    padding: 8px !important;
    border-radius: 0 !important;
}

/* منع أي حدود داخلية */
.s-product-card-entry *,
.s-product-card-vertical *,
.s-product-card-horizontal *,
salla-product-card * {
    outline: none !important;
}

/* صورة المنتج */
.s-product-card-image img,
.s-product-card-image a img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    object-fit: contain !important;
}

/* عنوان المنتج */
.s-product-card-content-title a {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    color: var(--text-dark) !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

/* السعر */
.s-product-card-price,
.s-product-card-sale-price,
.s-product-card-content-price {
    color: #ff4d5a !important;
    font-weight: 700 !important;
}

/* زر إضافة للسلة */
.s-product-card-entry button,
.s-product-card-entry .s-button-element,
.s-product-card-entry .s-button-btn,
.s-add-product-button-main {
    border: 2px solid var(--main-purple) !important;
    color: var(--main-purple) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

.s-product-card-entry button:hover,
.s-product-card-entry .s-button-element:hover,
.s-product-card-entry .s-button-btn:hover,
.s-add-product-button-main:hover {
    background: var(--main-purple) !important;
    color: #ffffff !important;
}

/* ================================
   إخفاء الصور المعطوبة فقط
================================ */
img[src="null"],
img[src="undefined"],
img[src*="placeholder.png"],
img:not([src]) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ================================
   ترتيب الأقسام لو ظهرت
================================ */
.categories-list-div,
.cats-list-wrap-inner {
    display: none !important;
}

.custom-categories-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
    max-width: 1200px !important;
    margin: 20px auto !important;
    padding: 20px !important;
    background: #ffffff !important;
    direction: rtl !important;
}

.custom-category-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--main-purple-light) !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: var(--main-purple) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(123, 31, 162, 0.06) !important;
}

.custom-category-item:hover {
    background: var(--main-purple-light) !important;
    color: var(--main-purple-dark) !important;
}

/* ================================
   تصحيح النصوص القديمة
================================ */
.brand-link-class {
    font-size: 0 !important;
    visibility: hidden !important;
}

.brand-link-class::after {
    content: "اضغط هنا للمزيد من ماركة" !important;
    font-size: 14px !important;
    color: var(--main-purple) !important;
    visibility: visible !important;
    display: inline-block !important;
}

div.two_dives > div.center_content > div.flex_brand_div > div > p > span {
    font-size: 0 !important;
    visibility: hidden !important;
}

div.two_dives > div.center_content > div.flex_brand_div > div > p > span::after {
    content: "اضغط هنا للمزيد من ماركة" !important;
    font-size: 14px !important;
    color: var(--main-purple) !important;
    visibility: visible !important;
    display: inline-block !important;
}

div.two_dives > div.center_content > div:nth-child(3) > div.read_more_section > a {
    font-size: 0 !important;
    visibility: hidden !important;
}

div.two_dives > div.center_content > div:nth-child(3) > div.read_more_section > a::after {
    content: "قراءة المزيد" !important;
    font-size: 14px !important;
    color: var(--main-purple) !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* ================================
   صفحة المنتج ومعرض الصور
================================ */
salla-slider.details-slider,
salla-slider.details-slider .swiper-container,
salla-slider.details-slider .swiper-wrapper,
.s-block--product-details,
.s-block--product-details .s-box,
.product-details-wrapper {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

a.swiper-slide.magnify-wrapper.homeslider__slide,
salla-slider.details-slider .swiper-slide {
    background: #ffffff !important;
}

/* ================================
   الجوال والتابلت
================================ */
@media (max-width: 992px) {
    .flex_section {
        display: grid !important;
        grid-template-columns: 100% !important;
    }

    .left_part {
        width: 100% !important;
    }

    .flex_section .right_part {
        height: auto !important;
        width: 100% !important;
        min-width: 250px !important;
    }

    .s-products-slider-wrapper .s-slider-wrapper .swiper-wrapper > .swiper-slide {
        padding-left: 3px !important;
        padding-right: 3px !important;
        width: 33.333% !important;
    }
}

@media (max-width: 768px) {
    header,
    .site-header,
    .store-header,
    .main-header,
    .s-header {
        min-height: 112px !important;
    }

    .custom-centered-logo {
        top: 8px !important;
    }

    .custom-centered-logo img {
        width: 68px !important;
        height: 68px !important;
    }

    .custom-logo-title {
        font-size: 14px !important;
    }

    .custom-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 12px !important;
        margin: 12px auto !important;
    }

    .custom-category-item {
        font-size: 14px !important;
        min-height: 44px !important;
        padding: 8px !important;
    }
}

@media (max-width: 576px) {
    .s-block--tabs-produtcs .tabs {
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding: 5px !important;
        text-align: center !important;
        margin: 0 !important;
        background: #ffffff !important;
    }

    .s-block--tabs-produtcs .tab-trigger.is-active button,
    .s-button-primary-outline {
        padding: 5px !important;
        font-size: 15px !important;
    }

    .s-product-card-entry .s-product-card-image a {
        height: 145px !important;
        background: #ffffff !important;
    }

    .s-products-slider-wrapper .s-slider-wrapper .swiper-wrapper > .swiper-slide {
        width: 50% !important;
    }


  header,
.site-header,
.store-header,
.main-header,
.s-header {
    position: relative !important;
    min-height: 125px !important;
}

.custom-centered-logo {
    position: absolute !important;
    left: 50% !important;
    top: 10px !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
}

.custom-centered-logo img {
    width: 78px !important;
    height: 78px !important;
    object-fit: contain !important;
    display: block !important;
}

.custom-logo-title {
    display: block !important;
    margin-top: 4px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #7b1fa2 !important;
    line-height: 1.2 !important;
    font-family: "Tajawal", "Cairo", "Arial", sans-serif !important;
    white-space: nowrap !important;
}

  /* ✅ جعل خلفية الشعار والهيدر بيضاء */
header,
.site-header,
.store-header,
.main-header,
.s-header,
header > *,
.site-header > *,
.store-header > *,
.main-header > *,
.s-header > * {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* ✅ خلفية بيضاء خلف الشعار نفسه */
.custom-centered-logo {
    background: #ffffff !important;
    background-color: #ffffff !important;
    padding: 8px 18px 14px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ✅ إزالة أي ظل أو لون رمادي خلف الشعار */
.custom-centered-logo,
.custom-centered-logo::before,
.custom-centered-logo::after {
    box-shadow: none !important;
    filter: none !important;
}

/* ✅ إزالة المساحة الرمادية بين الهيدر والبنر */
main,
.app-inner,
#app,
body {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

  /* ✅ إزالة خلفية رمادية من حاوية الشعار */
.custom-centered-logo,
.custom-centered-logo img,
.custom-logo-title {
    background: #ffffff !important;
}

  .custom-centered-logo {
    padding: 0 !important;
}

  /* ✅ تصغير الشعار وتقليل الازدحام */
.custom-centered-logo {
    top: 6px !important;
    padding: 0 !important;
}

.custom-centered-logo img {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    object-fit: contain !important;
}

.custom-logo-title {
    font-size: 13px !important;
    margin-top: 2px !important;
    line-height: 1.1 !important;
}

/* ✅ تقليل ارتفاع الهيدر */
header,
.site-header,
.store-header,
.main-header,
.s-header {
    min-height: 88px !important;
}

/* ✅ للجوال */
@media (max-width: 768px) {
    .custom-centered-logo {
        top: 5px !important;
    }

    .custom-centered-logo img {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }

    .custom-logo-title {
        font-size: 12px !important;
    }

    header,
    .site-header,
    .store-header,
    .main-header,
    .s-header {
        min-height: 78px !important;
    }

  /* ✅ ترتيب الهيدر وتقليل الازدحام */
header,
.site-header,
.store-header,
.main-header,
.s-header {
    min-height: 88px !important;
    background: #ffffff !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

/* ✅ ضبط مكان الشعار في المنتصف */
.custom-centered-logo {
    position: absolute !important;
    left: 50% !important;
    top: 8px !important;
    transform: translateX(-50%) !important;
    z-index: 20 !important;
    padding: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* ✅ قص الشعار دائريًا لإخفاء الزوايا البيضاء */
.custom-centered-logo img {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    overflow: hidden !important;
    display: block !important;
    background: transparent !important;
    clip-path: circle(50% at 50% 50%) !important;
}

/* ✅ كلمة الحيوان المدلل */
.custom-logo-title {
    margin-top: 2px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #7b1fa2 !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    background: transparent !important;
}

/* ✅ تنزيل وترتيب أيقونات الهيدر */
header .header-btn,
header .s-cart-summary-wrapper,
header .s-user-menu-wrapper,
header .s-search-icon,
header .sicon-search,
header .sicon-user-circle,
header .sicon-shopping-bag,
header .sicon-menu,
header .sicon-world,
header button,
.site-header button,
.store-header button {
    transform: translateY(8px) !important;
}

/* ✅ ضبط حجم الأيقونات */
header svg,
.site-header svg,
.store-header svg,
header i,
.site-header i,
.store-header i {
    width: 28px !important;
    height: 28px !important;
    font-size: 28px !important;
    color: #7b1fa2 !important;
    stroke: #7b1fa2 !important;
}

/* ✅ ترتيب عداد السلة */
.s-cart-summary-count,
.s-cart-count,
.cart-count,
[class*="cart"] [class*="count"] {
    background: #7b1fa2 !important;
    color: #ffffff !important;
    top: -6px !important;
}

/* ✅ للجوال */
@media (max-width: 768px) {
    header,
    .site-header,
    .store-header,
    .main-header,
    .s-header {
        min-height: 82px !important;
    }

    .custom-centered-logo {
        top: 7px !important;
    }

    .custom-centered-logo img {
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
    }

    .custom-logo-title {
        font-size: 11px !important;
    }

    header .header-btn,
    header .s-cart-summary-wrapper,
    header .s-user-menu-wrapper,
    header .s-search-icon,
    header .sicon-search,
    header .sicon-user-circle,
    header .sicon-shopping-bag,
    header .sicon-menu,
    header .sicon-world,
    header button {
        transform: translateY(7px) !important;
    }

    header svg,
    header i {
        width: 25px !important;
        height: 25px !important;
        font-size: 25px !important;
    }
}