/* ========================================================
   1. حجب فوري 0ms للشاشة حتى اكتمال المتجر تماماً
   ======================================================== */
html:not(.page-ready)::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #412d49 !important;
    z-index: 2147483646 !important;
}

html:not(.page-ready) body {
    overflow: hidden !important;
}

#softcaer-preloader {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: radial-gradient(circle at center, #5a3d66 0%, #412d49 100%) !important;
    z-index: 2147483647 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 22px !important;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s ease !important;
}

#softcaer-preloader.loaded {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.sh-preloader-logo {
    width: 140px !important;
    max-width: 50vw !important;
    height: auto !important;
    filter: brightness(0) invert(1) drop-shadow(0 4px 15px rgba(0, 0, 0, 0.3)) !important;
    animation: shLogoPulse 1.6s ease-in-out infinite !important;
}

.sh-dots-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.sh-dot {
    width: 9px !important;
    height: 9px !important;
    background: #ffffff !important;
    border-radius: 50%;
    opacity: 0.4;
    animation: shDotBounce 1.4s infinite ease-in-out both !important;
}

.sh-dot:nth-child(1) {
    animation-delay: -0.32s !important;
}

.sh-dot:nth-child(2) {
    animation-delay: -0.16s !important;
}

.sh-dot:nth-child(3) {
    animation-delay: 0s !important;
}

@keyframes shLogoPulse {

    0%,
    100% {
        transform: scale(0.93);
        opacity: 0.85;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
        filter: brightness(0) invert(1) drop-shadow(0 6px 22px rgba(255, 255, 255, 0.3));
    }
}

@keyframes shDotBounce {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.35;
    }

    40% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
    }
}


/* ========================================================
   1. تخصيص أيقونة السلة ودائرة الرقم (الهيدر)
   ======================================================== */
.header-btn__icon.icon.sicon-cart {
    display: inline-block !important;
    width: 31px !important;
    height: 30px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8h15l-1.5 13H6L4.5 8z'/%3E%3Cpath d='M7.5 8l1.5-4h6l1.5 4'/%3E%3Cpath d='M9.5 12a2.5 2.5 0 0 0 5 0'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

.header-btn__icon.icon.sicon-cart::before {
    display: none !important;
}

/* خلفية رقم السلة أسود والرقم أبيض */
.header-cart .badge,
.header-cart salla-badge,
.header-cart span,
salla-cart-summary .badge,
salla-cart-summary [data-cart-badge],
.header-cart [class*="badge"] {
    background-color: #000000 !important;
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
}

/* ========================================================
   2. تخصيص زر تسجيل الدخول (الهيدر)
   ======================================================== */
.s-user-menu-login-btn,
.header-section--right salla-user-menu button,
.s-user-menu-trigger {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.s-user-menu-login-btn svg {
    display: none !important;
}

.s-user-menu-login-btn::before {
    content: "" !important;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* ========================================================
   3. كروت المنتجات: حجم الصورة بنسبة 1:1 مربعة تماماً
   ======================================================== */
.s-product-card-entry.s-product-card-vertical,
salla-product-card,
.s-product-card-entry,
[data-product-card] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 12px rgba(65, 45, 73, 0.06) !important;
    border: 1px solid #f0eaf2 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 0 !important;
    position: relative !important;
}


/* مساحة الصورة بنسبة 1:1 مربعة */
.s-product-card-image,
.s-product-card-image-wrapper,
[class*="product-card-image"] {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 8px 8px 0 0 !important;
    overflow: hidden !important;
    display: block !important;
}

.s-product-card-image img,
[class*="product-card-image"] img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* محتوى النصوص والمسافات أسفل الصورة */
.s-product-card-content,
.s-product-card-main {
    padding: 6px 12px 10px !important;
    gap: 4px !important;
    justify-content: flex-start !important;
}

.s-product-card-content-main,
.s-product-card-content-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.25 !important;
}

/* ========================================================
   4. توسيط سطر السعر والخصم في المنتصف
   ======================================================== */
.s-product-card-content .s-product-card-price,
.s-product-card-content [class*="product-card-price"],
.s-product-card-content [class*="price-wrapper"],
.s-product-card-content .price_is_on_sale,
.s-product-card-content-sub {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 3px auto !important;
    width: 100% !important;
    gap: 6px !important;
}

.s-product-card-sale-price,
.s-product-card-regular-price,
.product-price,
.s-product-card-sale-discount,
.s-product-card-badge,
salla-product-card del,
salla-product-card .line-through {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

/* ========================================================
   5. زر الكارد: أيقونة هيدر المتجر + اسم (إضافة إلى السلة)
   ======================================================== */
.s-product-card-content-footer,
.s-product-card-content-footer .s-button-wrap,
.s-product-card-content-footer .s-button-element,
.s-product-card-content-footer button,
salla-add-product-button .s-button-element {
    border-radius: 8px !important;
    background-color: #412d49 !important;
    background: #412d49 !important;
}

.s-product-card-content-footer .s-button-text>span {
    font-size: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
}

.s-product-card-content-footer .s-button-text>span::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8h15l-1.5 13H6L4.5 8z'/%3E%3Cpath d='M7.5 8l1.5-4h6l1.5 4'/%3E%3Cpath d='M9.5 12a2.5 2.5 0 0 0 5 0'/%3E%3C/svg%3E") no-repeat center / contain !important;
    flex-shrink: 0 !important;
}

.s-product-card-content-footer .s-button-text>span::after {
    content: "إضافة إلى السلة" !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
}

/* ========================================================
   6. الهيدر: زيادة الارتفاع (78px) + سلاسة عند السكرول
   ======================================================== */
header.store-header #mainnav,
header.store-header #mainnav .container-narrow {
    height: 78px !important;
    min-height: 78px !important;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s ease !important;
}

header.store-header .navbar-brand img {
    max-height: 48px !important;
    width: auto !important;
    transition: max-height 0.3s ease !important;
}

/* لون الهيدر عند السكرول */
header.is-scrolled,
header.is-sticky,
header.is-scrolled #mainnav,
header.is-sticky #mainnav,
header.is-scrolled .inner,
header.is-sticky .inner {
    background-color: #412d49 !important;
    background: #412d49 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

/* شريط التصنيفات: ينسحب بنعومة */
#mainnav+div {
    max-height: 60px;
    opacity: 1;
    overflow: hidden;
    transform: translateY(0);
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.35s ease,
        transform 0.4s ease !important;
}

header.is-scrolled #mainnav+div,
header.is-sticky #mainnav+div {
    max-height: 0 !important;
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* زر الهمبرقر */
header.store-header a.mobile-menu-icon {
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

header.is-scrolled a.mobile-menu-icon,
header.is-sticky a.mobile-menu-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-inline-end: 12px !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

header.is-scrolled a.mobile-menu-icon i,
header.is-sticky a.mobile-menu-icon i {
    color: #ffffff !important;
}

/* ========================================================
   7. الفوتر: الألوان المعكوسة (كارد #b7b7b7 + خلفية #412d49)
   ======================================================== */

/* إخفاء الموجة العلوية */
.store-footer>svg {
    display: none !important;
}

/* الخلفية المحيطة: للنصف فقط (50%) بلون الهيدر #412d49 */
footer.store-footer {
    background: linear-gradient(to bottom, transparent 50%, #412d49 50%) !important;
    padding: 40px 20px 50px !important;
    width: 100% !important;
}

/* جسم الكارد العائم باللون  #b7b7b7 */
.store-footer__inner {
    max-width: 1320px !important;
    margin: 0 auto !important;
    background-color: #f6f3ef !important;
    border-radius: 28px 28px 0 0 !important;
    padding: 45px 45px 30px !important;
    color: #412d49 !important;
    border-top: 2px solid #412d49 !important;
    border-right: 2px solid #412d49 !important;
    border-left: 2px solid #412d49 !important;
    border-bottom: none !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.15) !important;
}

/* توزيع الأعمدة للشاشات الكبيرة */
@media (min-width: 1024px) {
    .store-footer__inner {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        gap: 40px !important;
    }

    .store-footer__inner>.container {
        display: grid !important;
        grid-template-columns: 1.3fr 1fr !important;
        gap: 15px 40px !important;
        flex: 1 1 68% !important;
        max-width: 68% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .store-footer .store-data {
        display: contents !important;
    }

    .store-footer .store-data a {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .store-footer .store-data .max-w-sm {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .store-footer__inner .container>div:first-child {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    /* وثيقة العمل الحر: تحت روابط مهمة */
    .store-footer .store-data .flex.gap-4 {
        grid-column: 2 !important;
        grid-row: 2 !important;
        align-self: flex-start !important;
        margin-top: 10px !important;
    }

    .store-footer__inner>div:last-child {
        flex: 1 1 32% !important;
        max-width: 32% !important;
    }
}

/* الشعار: تم تحويل لونه بدقة إلى لون الهوية #412d49 */
.store-footer .store-data img {
    max-width: 180px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
    filter: brightness(0) saturate(100%) invert(20%) sepia(21%) saturate(1478%) hue-rotate(242deg) brightness(95%) contrast(92%) !important;
}

/* الشعار ونبذة المتجر بلون الهوية الداكن */
.store-footer .store-data a {
    margin: 0 !important;
    align-self: flex-start !important;
}

.store-footer .store-data img {
    max-width: 180px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
}

.store-footer .store-data .max-w-sm {
    margin: 0 !important;
    max-width: 100% !important;
    text-align: right !important;
}

.store-footer .store-data p {
    color: #412d49 !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    text-align: right !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* روابط مهمة */
.store-footer__inner .container>div:first-child {
    text-align: right !important;
    align-items: flex-start !important;
}

.store-footer__inner h3 {
    color: #412d49 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 16px !important;
    text-align: right !important;
}

.store-footer__inner .s-menu-footer-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    text-align: right !important;
}

.store-footer__inner .s-menu-footer-item {
    color: #412d49 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.store-footer__inner .s-menu-footer-item:hover {
    color: #1a0f20 !important;
    transform: translateX(-4px) !important;
}

/* وثيقة العمل الحر */
.store-footer .s-trust-badges-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(65, 45, 73, 0.18) !important;
    border-radius: 12px !important;
    padding: 8px 16px !important;
    width: fit-content !important;
}

.store-footer .s-trust-badges-image {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
}

.store-footer .s-trust-badges-label {
    color: #554455 !important;
    font-size: 12px !important;
    margin-bottom: 2px !important;
}

.store-footer .s-trust-badges-number {
    color: #412d49 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.store-footer salla-apps-icons {
    display: none !important;
}

/* قسم تواصل معنا وشبكات التواصل */
.store-footer__inner>div:last-child {
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    align-items: flex-start !important;
    text-align: right !important;
    gap: 16px !important;
}

.store-footer__inner>div:last-child::before {
    content: "تواصل معنا" !important;
    display: block !important;
    color: #412d49 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.store-footer salla-contacts .s-contacts-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-items: flex-start !important;
}

.store-footer salla-contacts .s-contacts-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #412d49 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    direction: ltr !important;
}

.store-footer salla-contacts .s-contacts-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(65, 45, 73, 0.12) !important;
    border: 1px solid rgba(65, 45, 73, 0.25) !important;
    border-radius: 50% !important;
    padding: 6px !important;
}

.store-footer salla-contacts .s-contacts-icon svg {
    fill: #412d49 !important;
    width: 16px !important;
    height: 16px !important;
}

.store-footer .contact-social {
    margin-top: 6px !important;
}

.store-footer .s-social-list {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.store-footer .s-social-link a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border: 1.5px solid #412d49 !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #412d49 !important;
    transition: all 0.25s ease !important;
}

.store-footer .s-social-link a:hover {
    background: #412d49 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

.store-footer .s-social-link a:hover svg {
    fill: #ffffff !important;
}

.store-footer .s-social-icon svg {
    fill: #412d49 !important;
    width: 17px !important;
    height: 17px !important;
}

/* الشريط السفلي (الحقوق وطرق الدفع) */
footer.store-footer>div:last-of-type {
    max-width: 1316px !important;
    margin: -1px auto 0 auto !important;
    background-color: #f6f3ef !important;
    border-radius: 0 0 28px 28px !important;
    border-top: 1px solid rgba(65, 45, 73, 0.15) !important;
    padding: 18px 45px !important;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.15) !important;
}

footer.store-footer>div:last-of-type .container-narrow {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
}

.store-footer .copyright-text,
.store-footer .copyright-text p {
    color: #412d49 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.store-footer .copyright-text a {
    color: #1a0f20 !important;
    font-weight: 700 !important;
}

.store-footer salla-payments .s-payments-list {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.store-footer salla-payments .s-payments-list-item {
    background: #ffffff !important;
    border-radius: 6px !important;
    padding: 3px 6px !important;
    height: 25px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.store-footer salla-payments .s-payments-list-item img {
    height: 16px !important;
    width: auto !important;
    max-width: 36px !important;
    object-fit: contain !important;
}

/* توافق الجوال */
@media (max-width: 1023px) {
    footer.store-footer {
        padding: 20px 12px 30px !important;
    }

    .store-footer__inner {
        padding: 30px 20px !important;
        border-radius: 20px 20px 0 0 !important;
    }

    footer.store-footer>div:last-of-type {
        border-radius: 0 0 20px 20px !important;
        padding: 16px 20px !important;
    }

    footer.store-footer>div:last-of-type .container-narrow {
        flex-direction: column-reverse !important;
        gap: 14px !important;
    }

    .store-footer .store-data,
    .store-footer__inner .container>div:first-child,
    .store-footer__inner>div:last-child {
        align-items: center !important;
        text-align: center !important;
    }

    .store-footer .store-data p,
    .store-footer__inner h3 {
        text-align: center !important;
    }

    .store-footer salla-contacts .s-contacts-list {
        align-items: center !important;
    }

    .store-footer .s-trust-badges-wrapper {
        margin: 10px auto !important;
    }
}


/**/

/* ========================================================
   7. هيدر صفحة المنتج (ملون) مقابل الرئيسية (شفاف في البداية)
   ======================================================== */

/* 1. ضمان بقاء هيدر الصفحة الرئيسية شفافاً في أعلى الصفحة */
header.header-over-banner:not(.is-scrolled),
header.header-overlay-mode:not(.is-scrolled),
header.header-over-banner:not(.is-scrolled) #mainnav,
header.header-overlay-mode:not(.is-scrolled) #mainnav,
header.header-over-banner:not(.is-scrolled) .inner,
header.header-overlay-mode:not(.is-scrolled) .inner {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 2. تلوين الهيدر بلون الهوية فقط في صفحة المنتج والصفحات الداخلية */
header.store-header:not(.header-over-banner):not(.header-overlay-mode),
header.store-header:not(.header-over-banner):not(.header-overlay-mode) #mainnav,
header.store-header:not(.header-over-banner):not(.header-overlay-mode) .inner {
    background-color: #412d49 !important;
    background: #412d49 !important;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15) !important;
}

/* اللوقو أبيض في صفحة المنتج والصفحات الداخلية */
header.store-header:not(.header-over-banner):not(.header-overlay-mode) .navbar-brand img {
    filter: brightness(0) invert(1) !important;
}

header.store-header:not(.header-over-banner):not(.header-overlay-mode) .header-btn,
header.store-header:not(.header-over-banner):not(.header-overlay-mode) svg,
header.store-header:not(.header-over-banner):not(.header-overlay-mode) i {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

/* ========================================================
   تنسيقات الفوتر للجوال فقط (توسيط + أيقونات التواصل بصف واحد)
   ======================================================== */
@media (max-width: 1023px) {

    /* 1. توسيط اللوقو والنبذة */
    .store-footer .store-data {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .store-footer .store-data a {
        align-self: center !important;
        margin: 0 auto !important;
    }

    .store-footer .store-data img {
        margin: 0 auto !important;
    }

    .store-footer .store-data p {
        text-align: center !important;
    }

    .store-footer .s-trust-badges-wrapper {
        margin: 10px auto !important;
    }

    /* 2. توسيط روابط مهمة ومكافأة */
    .store-footer__inner .container>div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 10px auto !important;
    }

    .store-footer__inner h3 {
        text-align: center !important;
        width: 100% !important;
    }

    .store-footer__inner .s-menu-footer-list {
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    .store-footer__inner .s-menu-footer-item {
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* 3. دمج كل أيقونات التواصل (واتساب، اتصال، تيك توك، انستقرام) بصف واحد أفقي */
    .store-footer__inner>div:last-child {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        gap: 10px !important;
    }

    /* عنوان تواصل معنا في المنتصف */
    .store-footer__inner>div:last-child::before {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 8px !important;
    }

    /* إخفاء أرقام الواتساب والهاتف النصية */
    .store-footer salla-contacts .unicode,
    .store-footer salla-contacts span:not(.s-contacts-icon) {
        display: none !important;
    }

    .store-footer salla-contacts,
    .store-footer .contact-social {
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .store-footer salla-contacts .s-contacts-list {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        align-items: center !important;
    }
}

/* ========================================================
   توحيد شكل أيقونات التواصل (واتساب، جوال، انستقرام، تيك توك)
   ======================================================== */
.store-footer salla-contacts .s-contacts-icon,
.store-footer .s-social-link a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border: 1.5px solid #412d49 !important;
    border-radius: 50% !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.25s ease !important;
}

/* توحيد لون وحجم الرسمة داخل الأيقونات */
.store-footer salla-contacts .s-contacts-icon svg,
.store-footer .s-social-link a svg,
.store-footer salla-contacts .s-contacts-icon i,
.store-footer .s-social-link a i {
    fill: #412d49 !important;
    color: #412d49 !important;
    stroke: #412d49 !important;
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
}

/* تأثير التمرير (Hover) */
.store-footer salla-contacts .s-contacts-icon:hover,
.store-footer .s-social-link a:hover {
    background-color: #412d49 !important;
}

.store-footer salla-contacts .s-contacts-icon:hover svg,
.store-footer .s-social-link a:hover svg,
.store-footer salla-contacts .s-contacts-icon:hover i,
.store-footer .s-social-link a:hover i {
    fill: #ffffff !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ========================================================
   تخصيص البادج: لون زر الشراء (#412d49) + مكانه أقصى يمين الكارد
   ======================================================== */
.s-product-card-entry [class*="promotion"],
salla-product-card [class*="promotion"],
.s-product-card-badge,
[data-promotion-badge],
.s-product-card-image div[class*="text-xs"]:not(:empty) {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    z-index: 10 !important;
    margin: 0 !important;
    background-color: #412d49 !important;
    background: #412d49 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    box-shadow: 0 4px 10px rgba(65, 45, 73, 0.3) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================================
   إخفاء شريط التصنيفات من كل الصفحات ما عدا الصفحة الرئيسية
   ======================================================== */

/* 1. إخفاء الشريط في جميع الصفحات الداخلية (صفحة المنتج، الأقسام، السلة.. إلخ) */
header.store-header:not(.header-over-banner):not(.header-overlay-mode) #mainnav+div,
body.product-single header #mainnav+div,
body.product-index header #mainnav+div,
body.page-single-product header #mainnav+div {
    display: none !important;
    max-height: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* 2. إظهار الشريط حصراً في الصفحة الرئيسية */
header.header-over-banner #mainnav+div,
header.header-overlay-mode #mainnav+div {
    display: block !important;
    max-height: 60px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}


/* ========================================================
   تنسيق وترتيب صفحة تفاصيل المنتج (أزرار تحت بعض + إخفاء الزوائد)
   ======================================================== */

/* 1. إخفاء العداد العلوي المشوه والشريط المكرر */
.custom_count_down,
.discount-box {
    display: none !important;
}

/* 2. زر أضف إلى السلة (سطر كامل عريض) */
salla-add-product-button .s-add-product-button-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

salla-add-product-button .s-button-element {
    width: 100% !important;
    height: 52px !important;
    background: #412d49 !important;
    background-color: #412d49 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(65, 45, 73, 0.25) !important;
}

/* 3. زر الشراء السريع (تحته بسطر كامل) */
salla-mini-checkout-widget,
.s-add-product-button-mini-checkout {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
}

salla-mini-checkout-widget button,
.s-fast-checkout-button,
.s-add-product-button-mini-checkout button {
    width: 100% !important;
    height: 50px !important;
    border: 2px solid #412d49 !important;
    background: transparent !important;
    color: #412d49 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: all 0.25s ease !important;
}

salla-mini-checkout-widget button:hover {
    background: #412d49 !important;
    color: #ffffff !important;
}

/* 4. تنسيق بطاقة تمارا لتكون نظيفة وأنيقة */
salla-installment {
    display: block !important;
    margin: 14px 0 !important;
}

tamara-widget {
    border-radius: 12px !important;
}

/* ========================================================
   تنسيقات صفحة المنتج (السعر أحمر + الكمية يمين + الأزرار بعرض كامل)
   ======================================================== */

/* 1. السعر باللون الأحمر البارز */
.main-content h4.font-bold,
.main-content .total-price,
.main-content [class*="price-wrapper"] h2,
.main-content [class*="price-wrapper"] h4 {
    color: #d11a2a !important;
}

/* 2. حقل الكمية في جهة اليمين */
.sticky-product-bar__quantity,
section.sticky-product-bar>div:first-child {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 16px !important;
    text-align: right !important;
}

.sticky-product-bar__quantity .s-quantity-input {
    justify-content: flex-start !important;
    margin: 0 !important;
}

/* 3. زر أضف إلى السلة (يأخذ المساحة كاملة 100% مثل الشراء) */
salla-add-product-button .s-add-product-button-main {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
}

salla-add-product-button .s-button-wrap,
salla-add-product-button .s-button-element {
    width: 100% !important;
    display: flex !important;
    height: 52px !important;
    background: #412d49 !important;
    background-color: #412d49 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(65, 45, 73, 0.22) !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 4. زر شراء الآن / الدفع السريع */
salla-mini-checkout-widget,
.s-add-product-button-mini-checkout {
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
}

salla-mini-checkout-widget button,
.s-fast-checkout-button,
.s-add-product-button-mini-checkout button {
    width: 100% !important;
    height: 50px !important;
    border: 2px solid #412d49 !important;
    background: transparent !important;
    color: #412d49 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.25s ease !important;
}

/* 5. إخفاء شريط سلة التلقائي والعداد المشوه */
salla-loyalty-banner,
salla-loyalty-points-banner,
salla-cashback-banner,
.custom_count_down,
section.flex.backdrop-contrast-\[105\%\] {
    display: none !important;
}

/* ========================================================
   حل مشكلة زر (أضف إلى السلة) وجعله بعرض كامل 100%
   ======================================================== */
.s-add-product-button-main {
    display: grid !important;
    grid-template-columns: 100% !important;
    width: 100% !important;
    gap: 12px !important;
}

.s-add-product-button-main salla-button,
.s-add-product-button-main .s-button-wrap,
.s-add-product-button-main .s-button-element {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
}

/* ========================================================
   1. إخفاء زر (اشترِ الآن)
   ======================================================== */
/* ========================================================
   إخفاء أزرار الشراء السريع وأبل باي الزائدة
   ======================================================== */
salla-mini-checkout-widget,
.s-add-product-button-mini-checkout,
.s-fast-checkout-button,
salla-quick-order,
.s-quick-order-wrapper,
[class*="quick-order"],
[class*="apple-pay"] {
    display: none !important;
}


/* ========================================================
   2. زر (أضف إلى السلة) عريض وفاخر بعرض 100%
   ======================================================== */
salla-add-product-button {
    width: 100% !important;
    display: block !important;
}

salla-add-product-button .s-add-product-button-main {
    width: 100% !important;
    display: block !important;
}

salla-add-product-button .s-button-wrap,
salla-add-product-button .s-button-element,
salla-add-product-button button.s-button-element {
    width: 100% !important;
    max-width: 100% !important;
    height: 54px !important;
    background: #412d49 !important;
    background-color: #412d49 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 4px 18px rgba(65, 45, 73, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
}

salla-add-product-button .s-button-element:hover {
    transform: translateY(-2px) !important;
}

/* ========================================================
   3. تنسيق بطاقة تمارا أسفل الزر
   ======================================================== */
salla-installment {
    display: block !important;
    margin-top: 14px !important;
    width: 100% !important;
}

tamara-widget {
    border-radius: 12px !important;
}

/* ========================================================
   إخفاء كارد المنتج العائم عند السكرول نهائياً
   ======================================================== */
.sticky_product_card,
div.sticky_product_card,
[class*="sticky_product_card"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* ========================================================
   إبقاء وصف المنتج فقط وإخفاء باقي التبويبات (معلومات إضافية والتقييم)
   ======================================================== */

/* 1. إخفاء أزرار التبويبات الأخرى من الشريط العلوي */
salla-tab-header[name="info"],
salla-tab-header[name="review"],
.s-tabs-header [name="info"],
.s-tabs-header [name="review"] {
    display: none !important;
}

/* 2. إخفاء محتوى معلومات إضافية والتقييم */
salla-tab-content[name="info"],
salla-tab-content[name="review"],
.s-tabs-content-wrapper>[name="info"],
.s-tabs-content-wrapper>[name="review"] {
    display: none !important;
}

/* 3. تنسيق تبويب "وصف المنتج" المتبقي ليكون عنواناً عريضاً وأنيقاً */
salla-tab-header[name="description"] .s-tabs-header-item {
    border: none !important;
    background: transparent !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: #412d49 !important;
    padding: 0 0 8px 0 !important;
    border-bottom: 2.5px solid #412d49 !important;
    cursor: default !important;
}

.s-tabs-header {
    border-bottom: 1px solid #ede7f0 !important;
    margin-bottom: 16px !important;
    justify-content: flex-start !important;
}

/* ========================================================
   إضافة مسافة أمان وهوامش مريحة لقسم وصف المنتج
   ======================================================== */
salla-tabs,
.s-tabs,
.s-tabs-header,
.s-tabs-content-wrapper,
.product__description {
    padding-right: 18px !important;
    padding-left: 18px !important;
    box-sizing: border-box !important;
}

/* مسافة أمان أكبر للشاشات الكبيرة والكمبيوتر */
@media (min-width: 1024px) {

    salla-tabs,
    .s-tabs,
    .s-tabs-header,
    .s-tabs-content-wrapper,
    .product__description {
        padding-right: 32px !important;
        padding-left: 32px !important;
    }
}

/* ترتيب تباعد ومحاذاة نص الوصف لليمين */
.product__description p,
.product__description article,
.product__description {
    text-align: right !important;
    direction: rtl !important;
    line-height: 1.85 !important;
    font-size: 15px !important;
    color: #374151 !important;
    margin-top: 10px !important;
}

/* ========================================================
   توسيط كلمة (وصف المنتج) في منتصف الصفحة
   ======================================================== */
.s-tabs-header,
.s-tabs-header-item,
salla-tab-header[name="description"] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
}

salla-tab-header[name="description"] .s-tabs-header-item {
    display: inline-flex !important;
    justify-content: center !important;
    width: auto !important;
    padding-bottom: 8px !important;
    border-bottom: 2.5px solid #412d49 !important;
    margin: 0 auto !important;
}

/* ========================================================
   تصغير حجم صورة المنتج الرئيسية (سلايدر الصور) بشكل متناسق
   ======================================================== */

/* للجوال: عرض أوسع وأوضح */
salla-slider.details-slider,
.details-slider,
.product-slider,
div:has(> salla-slider.details-slider) {
    max-width: 400px !important;
    width: 96% !important;
    margin: 0 auto !important;
    display: block !important;
}

/* للكمبيوتر واللابتوب: عرض واسع وفخم */
@media (min-width: 768px) {
    salla-slider.details-slider,
    .details-slider,
    .product-slider,
    div:has(> salla-slider.details-slider) {
        max-width: 510px !important;
        width: 100% !important;
    }
}

/* ضبط حجم الصورة داخل السلايدر لمنع تشوهها */
salla-slider.details-slider img,
.details-slider img,
.magnify-wrapper img,
.details-slider .swiper-slide img {
    max-height: 400px !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    border-radius: 20px !important;
    margin: 0 auto !important;
    display: block !important;
}

@media (min-width: 768px) {
    salla-slider.details-slider img,
    .details-slider img,
    .magnify-wrapper img,
    .details-slider .swiper-slide img {
        max-height: 510px !important;
    }
}

/* ========================================================
   تصغير حجم عدسة التكبير التفاعلية
   ======================================================== */
.img-magnifier-glass {
    width: 190px !important;
    /* العرض (يمكنك تقليله إلى 90px إذا أردتها أصغر) */
    height: 190px !important;
    /* الارتفاع */
    border: 1px solid #412d49 !important;
    /* إطار أنيق بلون هوية المتجر */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* ========================================================
   1. عرض منتجين بالصف الواحد على الجوال + تقليل المسافات
   ======================================================== */
@media (max-width: 767px) {

    /* تحويل شبكة المنتجات إلى عمودين متساويين */
    .s-products-list-wrapper,
    .s-products-list-vertical-cards {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        /* مسافة خفيفة وموزونة بين الكروت */
        padding: 8px 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* إلغاء العرض الثابت ليتناسب الكارد مع العمودين */
    custom-salla-product-card,
    .s-product-card-entry,
    .s-product-card-vertical {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* تخفيف المسافات الداخلية (Padding) داخل الكارد بالجوال */
    .s-product-card-content,
    .s-product-card-main {
        padding: 6px 8px 10px !important;
        gap: 3px !important;
    }

    /* موازنة حجم عنوان المنتج والسعر للشاشات الصغيرة */
    .s-product-card-content-title a,
    .s-product-card-content-title {
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .s-product-card-content .s-product-card-sale-price h4,
    .s-product-card-content .s-product-card-price {
        font-size: 14px !important;
    }

    /* زر أضف للسلة بحجم متناسق داخل الكارد في الجوال */
    .s-product-card-content-footer button,
    .s-product-card-content-footer .s-button-element {
        height: 38px !important;
        font-size: 12px !important;
    }
}

/* ========================================================
   2. تنسيق الشاشات الكبيرة والكمبيوتر (توزيع متناسق ومتقارب)
   ======================================================== */
@media (min-width: 768px) {

    .s-products-list-wrapper,
    .s-products-list-vertical-cards {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(210px, 250px)) !important;
        gap: 16px !important;
        /* مسافة أنيقة بين الكروت */
        padding: 16px 0 !important;
        justify-content: flex-start !important;
    }

    custom-salla-product-card,
    .s-product-card-entry {
        width: 100% !important;
        max-width: 250px !important;
    }
}

/* ========================================================
   1. تغيير عبارة (لا يوجد المزيد لعرضه) إلى (سيتم إضافة المزيد قريباً)
   ======================================================== */
.s-infinite-scroll-last,
.infinite-scroll-last {
    font-size: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 20px auto !important;
}

.s-infinite-scroll-last::after,
.infinite-scroll-last::after {
    content: "سيتم إضافة المزيد قريباً" !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #412d49 !important;
    /* لون أنيق بلون المتجر */
    letter-spacing: 0.2px;
}

/* ========================================================
   2. إخفاء شريط السكرول (Scrollbar) من جهة اليسار بالكامل
   ======================================================== */
/* لجميع متصفحات Chrome و Safari و Edge */
::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* لمتصفح Firefox وباقي الحاويات */
html,
body,
salla-products-list,
.s-products-list,
.s-products-list-wrapper {
    scrollbar-width: none !important;
    /* فايرفوكس */
    -ms-overflow-style: none !important;
    /* إيدج */
}

/* ========================================================
   تكبير كروت المنتجات على اللابتوب والكمبيوتر حصراً
   ======================================================== */
@media (min-width: 1024px) {

    /* توزيع الكروت على اللابتوب (3 أو 4 كروت عريضة بالسطر) */
    .s-products-list-wrapper,
    .s-products-list-vertical-cards {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)) !important;
        gap: 24px !important;
        /* مسافة متناسقة ومريحة للعين */
        padding: 20px 0 !important;
        justify-content: center !important;
    }

    /* تكبير عرض الكارد نفسه على اللابتوب */
    .s-product-card-entry.s-product-card-vertical,
    salla-product-card,
    .s-product-card-entry,
    custom-salla-product-card,
    [data-product-card] {
        min-width: 295px !important;
        max-width: 340px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* تكبير حجم الخط ليتناسب مع الكارد الكبير */
    .s-product-card-content-title a,
    .s-product-card-content-title {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    /* تكبير زر الإضافة للسلة */
    .s-product-card-content-footer button,
    .s-product-card-content-footer .s-button-element {
        height: 45px !important;
        font-size: 14.5px !important;
    }
}

/* ========================================================
   1. إلغاء تأخير وتحميل منطقة الشراء فوراً على الجوال
   ======================================================== */
.sticky-product-bar,
section.sticky-product-bar,
[class*="sticky-product-bar"],
form.product-form {
    position: relative !important;
    bottom: auto !important;
    transform: none !important;
    background: transparent !important;
    margin: 12px 0 6px 0 !important;
    width: 100% !important;
    display: block !important;
    visibility: visible !important;
}

/* 2. حقل الكمية صغير على اليمين مع كلمة (الكمية :) */
.sticky-product-bar__quantity,
section.sticky-product-bar>div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    margin: 8px 0 12px 0 !important;
}

.sticky-product-bar__quantity::before {
    content: "الكمية :" !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #412d49 !important;
}

salla-quantity-input,
.s-quantity-input {
    width: 120px !important;
    max-width: 120px !important;
    height: 38px !important;
    border-radius: 10px !important;
    border: 1.5px solid #e5dce8 !important;
    background: #ffffff !important;
    margin: 0 !important;
}

/* 3. زر أضف إلى السلة مع لمعة ذهبية مستمرة وتحميل فوري */
salla-add-product-button {
    width: 100% !important;
    display: block !important;
    margin: 6px 0 12px 0 !important;
}

salla-add-product-button .s-button-element {
    width: 100% !important;
    height: 52px !important;
    background: linear-gradient(135deg, #412d49 0%, #583a63 100%) !important;
    color: #ffffff !important;
    font-size: 16.5px !important;
    font-weight: 800 !important;
    border-radius: 14px !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    box-shadow: 0 6px 20px rgba(65, 45, 73, 0.28) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

salla-add-product-button .s-button-element::after {
    content: "" !important;
    position: absolute !important;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(60deg, rgba(255, 255, 255, 0) 20%, rgba(255, 215, 0, 0.35) 50%, rgba(255, 255, 255, 0) 80%) !important;
    transform: rotate(25deg);
}


/* ========================================================
   وزن زر (أضف إلى السلة) وبطاقة (تمارا) بنفس العرض والمحاذاة تماماً
   ======================================================== */

/* الحاوية المشتركة */
form.product-form,
.sticky-product-bar {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* 1. زر أضف إلى السلة (عرض متطابق 100%) */
salla-add-product-button {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 10px 0 12px 0 !important;
    box-sizing: border-box !important;
}

salla-add-product-button .s-button-wrap,
salla-add-product-button .s-button-element {
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

/* 2. بطاقة تمارا (عرض متطابق 100% وبدون أي إزاحة جانبية) */
salla-installment,
tamara-widget {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 4px 0 16px 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    --font-size-base: 13px !important;
    --inline-outline-space-y: 6px !important;
    --inline-outline-space-x: 10px !important;
}

/* ========================================================
   1. حل مشكلة تكرار كلمة (الكمية) نهائياً
   ======================================================== */
.sticky-product-bar__quantity::before,
section.sticky-product-bar>div:first-child::before {
    display: none !important;
    content: none !important;
}


/* ========================================================
   2. إضافة مسافة فاصلة ومريحة بين زر السلة وبطاقة تمارا
   ======================================================== */
salla-add-product-button {
    display: block !important;
    width: 100% !important;
    margin-bottom: 14px !important;
    /* مسافة أسفل زر السلة */
}

salla-installment,
tamara-widget {
    display: block !important;
    width: 100% !important;
    margin-top: 14px !important;
    /* مسافة أعلى تمارا تمنع الالتصاق */
    margin-bottom: 14px !important;
    clear: both !important;
}


/* إخفاء النقطة الخضراء (المتوفر) نهائياً */
.availability-dot {
    display: none !important;
}

/* تنسيق سطر العنوان ليكون عريضاً ومريحاً */
.main-content>div:has(> h1),
.main-content .flex.items-center.gap-2.my-3 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin: 4px 0 8px 0 !important;
    padding: 0 !important;
}

.main-content h1 {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    color: #412d49 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* زر المشاركة بجانب الاسم في أقصى اليسار بتصميم دائري ناعم */
.main-content salla-social-share,
.main-content .s-social-share-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.main-content salla-social-share .s-social-share-btn.s-button-element {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    border: 1.5px solid #412d49 !important;
    background: transparent !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.main-content salla-social-share svg {
    width: 17px !important;
    height: 17px !important;
    fill: #412d49 !important;
}

/* إخفاء زر المفضلة القديم إذا كان بجانب المشاركة القديمة */
.main-content .btn--wishlist {
    display: none !important;
}


/* 1. جعل نص وصف المنتج يبدأ من اليمين */
.product__description,
.product__description p,
.product__description article,
salla-tab-content[name="description"] {
    text-align: right !important;
    direction: rtl !important;
}

/* 2. إلغاء تكرار كلمة الكمية بصفحة المنتج */
.sticky-product-bar__quantity::before,
.sticky-product-bar__quantity::after {
    display: none !important;
    content: none !important;
}

/* 3. زر أضف للسلة بصفحة المنتج عريض (100%) دون التأثير على الكروت */
.main-content salla-add-product-button .s-button-element,
form.product-form salla-add-product-button .s-button-element {
    width: 100% !important;
    height: 42px !important;
}

/* 4. إخفاء النقطة الخضراء بجانب اسم المنتج */
.availability-dot {
    display: none !important;
}

/* إلغاء اللون من خلفية الحاوية السفلية للكارد */
.s-product-card-content-footer {
    background: transparent !important;
    background-color: transparent !important;
    max-height: 50px;
}

/* ========================================================
   تلوين الأسعار باللون الأحمر
   ======================================================== */
/* في كروت المنتجات */
.s-product-card-price,
.s-product-card-sale-price,
.s-product-card-sale-price h4,
.s-product-card-content [class*="price"],
.product-price {
    color: #d11a2a !important;
    font-weight: 800 !important;
}

/* في صفحة تفاصيل المنتج */
.main-content .total-price,
.main-content h4.font-bold,
.main-content [class*="price-wrapper"] h2,
.main-content [class*="price-wrapper"] h4,
.price_is_on_sale h2 {
    color: #d11a2a !important;
    font-weight: 800 !important;
}

/* ========================================================
   ضبط حجم كروت سلايدر الصفحة الرئيسية على الجوال
   ======================================================== */
@media (max-width: 767px) {

    salla-slider .s-product-card-entry,
    salla-slider custom-salla-product-card,
    .swiper-slide .s-product-card-entry,
    .homeslider .s-product-card-entry {
        width: 195px !important;
        max-width: 195px !important;

    }
}

/* ========================================================
   إخفاء زر الواتساب العائم من صفحة السلة فقط
   ======================================================== */
/* إخفاء زر الواتساب في صفحة السلة عبر فحص محتوى الصفحة */
body:has(salla-cart-summary-card) a.wa-s-n,
body:has(.cart-item) a.wa-s-n,
body:has([class*="cart-summary"]) a.wa-s-n,
body.cart a.wa-s-n,
body.page-cart a.wa-s-n,
a.wa-s-n[href*="whatsapp_cta"] {
    display: none !important;
    visibility: hidden !important;
}


/* ========================================================
   1. إلغاء الفراغ السفلي في صفحة تفاصيل المنتج
   ======================================================== */
body.product-single .main-content,
body.product-single main,
.product-single .main-content,
.sticky-product-bar-placeholder,
div:has(> .sticky-product-bar) {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ========================================================
   2. سحب الهيدر والبنر للأعلى لالتصاق تام بالسطح (0 فراغ)
   ======================================================== */
/* للجوال: سحب 3 بكسل للأعلى */
header.store-header,
.homeslider,
.main-slider,
.hero-slider,
salla-slider.homeslider {
    margin-top: -0.58em !important;
}

/* للكمبيوتر واللابتوب: سحب 4 بكسل للأعلى */
@media (min-width: 768px) {

    header.store-header,
    .homeslider,
    .main-slider,
    .hero-slider,
    salla-slider.homeslider {
        margin-top: -0.9rem !important;
    }
}

/* ========================================================
   تنسيق كارد ملخص الطلب (تصميم فخم وأنيق)
   ======================================================== */
salla-cart-summary-card:not(.s-cart-summary-card--mobile),
.s-cart-summary-card:not(.s-cart-summary-card--mobile) {
    background: #ffffff !important;
    border: 1.5px solid #ede6df !important;
    border-radius: 18px !important;
    padding: 22px 20px !important;
    box-shadow: 0 6px 24px rgba(65, 45, 73, 0.06) !important;
}

/* عنوان ملخص الطلب */
.s-cart-summary-card-sheet-title,
.s-cart-summary-card-sheet-header h3 {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #412d49 !important;
    margin-bottom: 16px !important;
    border-bottom: 1.5px solid #f4eef5 !important;
    padding-bottom: 10px !important;
}

/* أسطر الأسعار والخصم */
.s-cart-summary-card-line {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    color: #555555 !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
}

/* سطر الخصم باللون الأحمر الأنيق */
.s-cart-summary-card-line--discount {
    color: #d11a2a !important;
    font-weight: 700 !important;
}

/* سطر الإجمالي النهائي */
.s-cart-summary-card-bar-label-text,
.s-cart-summary-card-bar-total {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #412d49 !important;
}

/* بادج (وفّرت) بتنسيق ناعم وجذاب */
.s-cart-summary-card-bar-savings-badge {
    background: #eaf8f0 !important;
    border: 1px solid #bfe8ce !important;
    color: #1a7a40 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 8px 0 !important;
}

/* زر إتمام الطلب الفاخر */
#s-cart-summary-card-submit .s-button-element,
.s-cart-summary-card-action button {
    height: 52px !important;
    background: linear-gradient(135deg, #412d49 0%, #583a63 100%) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(65, 45, 73, 0.25) !important;
    transition: all 0.25s ease !important;
}

#s-cart-summary-card-submit .s-button-element:hover,
.s-cart-summary-card-action button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(65, 45, 73, 0.35) !important;
}

/* إخفاء إيموجي الحفلة من بادج وفّرت */
.s-cart-summary-card-bar-savings-badge span[aria-hidden="true"],
.s-cart-summary-card-bar-savings-badge [aria-hidden="true"] {
    display: none !important;
}

.main-content .flex.gap-2.items-center.mb-2 {
    display: none !important;
}
@media (min-width: 768px) {
    .s-product-card-content .s-product-card-sale-price h4,
    .s-product-card-content .s-product-card-price {
        font-size: 1rem !important; /* حجم السعر على الجوال */
    }
}
@media (max-width: 767px) {
    .s-product-card-content .s-product-card-sale-price h4,
    .s-product-card-content .s-product-card-price {
        font-size: 17.5px !important; /* حجم السعر على الجوال */
    }
}

/* ========================================================
   ترتيب سطر السعر (يمين: المشطوب | وسط: البيع | يسار: النسبة)
   ======================================================== */

/* الحاوية الأم */
.s-product-card-content-sub {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
}

/* تفكيك الحاويات الداخلية لتصبح عناصرها أبناء مباشرين */
.s-product-card-sale-price,
.s-product-card-content-sub > div:has(.discount-percentage) {
    display: contents !important;
}

/* السعر القديم (span) → يمين */
.s-product-card-sale-price > span {
    order: -1 !important;
    text-decoration: line-through !important;
    opacity: 0.7 !important;
}

/* سعر البيع (h4) → وسط وكبير */
.s-product-card-sale-price > h4 {
    order: 0 !important;
    font-size: 18.5px !important;
    font-weight: 800 !important;
}

/* نسبة الخصم → يسار */
.discount-percentage {
    order: 1 !important;
}

#product-filter {
    background-color: #ffffff; /* أو transparent */
}