/* 
 * ملف التصميم (CSS) الجديد لمتجر قطفة الموسم
 * من أرض الشام إلى مائدتك 🌿
 */

:root {
    /* ألوان الهوية البصرية - قطفة الموسم */
    --color-harvest: #8E5751; /* لون الحصاد */
    --color-branches: #888067; /* لون الأغصان */
    --color-purity: #F3F1E5; /* لون النقاء */
    --color-olive: #597A4B; /* لون الزيتون */
    --color-sky: #6E8EB4; /* لون السماء */
}

/* =========================================
   1. تنسيقات الهيدر وشريط البحث
   ========================================= */

/* إخفاء المساحة الفارغة اللي سابها البحث في الشريط العلوي */
.top-navbar .header-search {
    display: none !important;
}

/* تحسين شكل الهيدر للكمبيوتر */
@media (min-width: 992px) {
    #mainnav .container > .flex {
        align-items: center !important;
        gap: 30px !important;
    }
    
    /* شريط البحث بعد نقله للمنتصف */
    #mainnav .header-search {
        display: block !important;
        flex: 1 !important;
        max-width: 600px !important;
        margin: 0 auto !important;
    }

    /* تجميل حقل البحث باستخدام ألوان الهوية */
    #mainnav salla-search .s-search-input-wrapper {
        border: 2px solid var(--color-purity) !important;
        border-radius: 30px !important;
        background-color: var(--color-purity) !important;
        transition: all 0.3s ease !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
        padding: 4px 6px !important;
    }
    
    /* تأثير عند الضغط على حقل البحث */
    #mainnav salla-search .s-search-input-wrapper:focus-within {
        border-color: var(--color-olive) !important;
        background-color: #ffffff !important;
        box-shadow: 0 4px 20px rgba(89, 122, 75, 0.15) !important;
    }

    #mainnav salla-search .s-search-input {
        background: transparent !important;
        font-size: 14px !important;
        color: #333 !important;
    }

    /* تحسين placeholder */
    #mainnav salla-search .s-search-input::placeholder {
        color: var(--color-branches) !important;
        font-size: 13px !important;
        opacity: 0.7 !important;
    }

    /* أيقونة البحث */
    #mainnav salla-search .s-search-icon,
    #mainnav salla-search button[type="submit"],
    #mainnav salla-search .s-search-input-wrapper svg {
        color: var(--color-olive) !important;
        fill: var(--color-olive) !important;
        opacity: 0.7 !important;
        transition: all 0.3s ease !important;
    }

    #mainnav salla-search .s-search-input-wrapper:focus-within svg,
    #mainnav salla-search .s-search-input-wrapper:focus-within .s-search-icon {
        color: var(--color-olive) !important;
        fill: var(--color-olive) !important;
        opacity: 1 !important;
    }
}

/* تحسين شكل الهيدر للموبايل */
@media (max-width: 991px) {
    .top-navbar {
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }

    #mainnav {
        height: auto !important;
        min-height: unset !important;
    }
    
    #mainnav .inner {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    
    #mainnav .container > .flex {
        flex-wrap: wrap !important;
        align-items: center !important;
    }
    
    /* تصغير اللوجو في الموبايل لتوفير مساحة */
    #mainnav .navbar-brand img {
        max-height: 40px !important;
        width: auto !important;
    }
    
    /* شريط البحث يظهر في سطر جديد تحت اللوجو والسلة بشكل أنيق */
    #mainnav .header-search {
        display: none !important;
        width: 100% !important;
        order: 3 !important;
        margin-top: 10px !important;
    }
    
    #mainnav salla-search .s-search-input-wrapper {
        border: 1px solid rgba(136, 128, 103, 0.15) !important;
        border-radius: 8px !important; /* شكل مستطيل بحواف ناعمة بدل الدائري بالكامل */
        background-color: #fcfcfc !important;
        box-shadow: none !important;
        padding: 0 10px !important;
        height: 42px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    #mainnav salla-search .s-search-input-wrapper:focus-within {
        border-color: var(--color-olive) !important;
        background-color: #ffffff !important;
        box-shadow: 0 2px 8px rgba(89, 122, 75, 0.08) !important;
    }

    #mainnav salla-search .s-search-input {
        background: transparent !important;
        font-size: 14px !important;
        color: #333 !important;
        height: 100% !important;
    }

    #mainnav salla-search .s-search-input::placeholder {
        color: #999 !important;
        font-size: 13px !important;
        opacity: 0.8 !important;
    }

    #mainnav salla-search .s-search-icon,
    #mainnav salla-search button[type="submit"] {
        color: #666 !important;
    }
}

/* =========================================
   2. سلايدر الصفحة الرئيسية (قطفة الموسم)
   ========================================= */
.qaf-hero-slider-section {
    direction: rtl !important;
    width: 100% !important;
    margin: 0 auto 30px auto !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.qaf-hero-slider {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--color-purity) !important;
}

.qaf-slide {
    display: none !important;
    width: 100% !important;
    animation: qafFadeIn 0.5s ease-in-out !important;
}

.qaf-slide.active {
    display: block !important;
}

.qaf-slide img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
}

@keyframes qafFadeIn {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* النقاط السفلية */
.qaf-slider-dots {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    gap: 10px !important;
    z-index: 10 !important;
}

.qaf-dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
}

.qaf-dot.active {
    background-color: var(--color-olive) !important;
    width: 30px !important;
    border-radius: 10px !important;
}

/* الأسهم */
.qaf-slider-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: var(--color-olive) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
}

.qaf-slider-arrow:hover {
    background-color: var(--color-olive) !important;
    color: white !important;
}

.qaf-prev { right: 20px !important; }
.qaf-next { left: 20px !important; }

/* إخفاء الأسهم في الموبايل والاعتماد على السحب أو النقاط */
@media (max-width: 768px) {
    .qaf-slider-arrow {
        display: none !important;
    }
    .qaf-hero-slider-section {
        margin-bottom: 15px !important;
    }
}

/* =========================================
   3. تصميم بطاقة المنتج (Product Card)
   ========================================= */
.s-product-card-entry {
    background-color: #ffffff !important;
    border: 1px solid var(--color-purity) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02) !important;
}

.s-product-card-entry:hover {
    box-shadow: 0 8px 25px rgba(89, 122, 75, 0.1) !important;
    transform: translateY(-3px) !important;
    border-color: var(--color-branches) !important;
}

/* زر المفضلة */
.s-product-card-wishlist-btn {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--color-branches) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
}

.s-product-card-wishlist-btn:hover {
    color: var(--color-harvest) !important;
    background: #fff !important;
    transform: scale(1.1) !important;
}

/* محتوى البطاقة */
.s-product-card-content {
    padding: 16px !important;
}

.s-product-card-content-title {
    margin: 0 0 8px 0 !important;
}

.s-product-card-content-title a {
    color: #333333 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    transition: color 0.2s ease !important;
}

.s-product-card-content-title a:hover {
    color: var(--color-olive) !important;
}

/* السعر */
.s-product-card-price {
    color: var(--color-harvest) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 8px 0 16px 0 !important;
}

@keyframes pulseAddToCart {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(89, 122, 75, 0.5); /* var(--color-olive) مع شفافية */
    }
    70% {
        transform: scale(1.02);
        box-shadow: 0 0 0 8px rgba(89, 122, 75, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(89, 122, 75, 0);
    }
}

/* زر إضافة للسلة */
.s-product-card-entry salla-add-product-button .s-button-element {
    background-color: var(--color-olive) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 0 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    animation: pulseAddToCart 2.5s infinite !important; /* تشغيل الأنميشن بشكل مستمر */
}

.s-product-card-entry salla-add-product-button .s-button-element:hover {
    background-color: var(--color-branches) !important;
    box-shadow: 0 4px 10px rgba(89, 122, 75, 0.3) !important;
    animation: none !important; /* إيقاف النبض عند وقوف الماوس للتركيز */
    transform: scale(1.02) !important;
}

/* =========================================
   4. تصميم الفوتر (Dark Premium Footer)
   ========================================= */

/* الخلفية الأساسية */
.store-footer {
    background: linear-gradient(160deg, #1a1a1a 0%, #2a2522 40%, #1e1e1e 100%) !important;
    color: #d4d0c8 !important;
    border-top: 3px solid var(--color-olive) !important;
    position: relative !important;
    overflow: hidden !important;
}

.footer-is-light .store-footer .store-footer__inner {
    background: linear-gradient(160deg, #1a1a1a 0%, #2a2522 40%, #1e1e1e 100%) !important;
    color: #d4d0c8 !important;
}

/* خطوط زخرفية خلفية خفيفة */
.store-footer::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(ellipse at 10% 20%, rgba(89, 122, 75, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 90% 80%, rgba(142, 87, 81, 0.05) 0%, transparent 50%) !important;
    pointer-events: none !important;
}

.store-footer__inner {
    position: relative !important;
    z-index: 1 !important;
    padding-top: 50px !important;
    padding-bottom: 30px !important;
}

/* عناوين الأقسام */
.store-footer h3 {
    color: var(--color-purity) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
    position: relative !important;
    padding-bottom: 12px !important;
}

.store-footer h3::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    width: 40px !important;
    height: 3px !important;
    background: linear-gradient(to left, var(--color-olive), var(--color-branches)) !important;
    border-radius: 2px !important;
}

/* وصف المتجر */
.store-footer .max-w-sm {
    color: #a09b8e !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    border-right: 2px solid var(--color-olive) !important;
    padding-right: 12px !important;
}

/* روابط الفوتر */
.store-footer .s-menu-footer-item {
    color: #a09b8e !important;
    text-decoration: none !important;
    font-size: 14px !important;
    padding: 8px 0 !important;
    display: block !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    padding-right: 15px !important;
}

.store-footer .s-menu-footer-item::before {
    content: '←' !important;
    position: absolute !important;
    right: 0 !important;
    opacity: 0 !important;
    transform: translateX(-5px) !important;
    transition: all 0.3s ease !important;
    color: var(--color-olive) !important;
}

.store-footer .s-menu-footer-item:hover {
    color: var(--color-purity) !important;
    padding-right: 22px !important;
}

.store-footer .s-menu-footer-item:hover::before {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* أيقونات التواصل الاجتماعي */
.store-footer .s-social-list {
    display: flex !important;
    gap: 12px !important;
}

.store-footer .s-social-link a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

.store-footer .s-social-link a:hover {
    background: var(--color-olive) !important;
    border-color: var(--color-olive) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(89, 122, 75, 0.3) !important;
}

.store-footer .s-social-link svg {
    fill: #a09b8e !important;
    width: 18px !important;
    height: 18px !important;
    transition: fill 0.3s ease !important;
}

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

/* معلومات التواصل */
.store-footer .s-contacts-title {
    color: var(--color-purity) !important;
}

.store-footer .s-contacts-item {
    color: #a09b8e !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 0 !important;
}

.store-footer .s-contacts-item:hover {
    color: var(--color-sky) !important;
}

.store-footer .s-contacts-icon svg {
    fill: var(--color-sky) !important;
    width: 20px !important;
    height: 20px !important;
}

/* السجل التجاري (Trust Badges) */
.store-footer .s-trust-badges-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin-top: 15px !important;
    transition: all 0.3s ease !important;
}

.store-footer .s-trust-badges-wrapper:hover {
    border-color: rgba(136, 128, 103, 0.3) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

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

.store-footer .s-trust-badges-number {
    color: var(--color-branches) !important;
    font-size: 14px !important;
    direction: ltr !important;
}

/* شريط الحقوق والمدفوعات */
.store-footer > .md\:flex {
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin-top: 10px !important;
    position: relative !important;
    z-index: 1 !important;
}

.store-footer .copyright-text,
.store-footer .copyright-text p {
    color: #5a5650 !important;
    font-size: 13px !important;
}

.store-footer .copyright-text a {
    color: var(--color-branches) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.store-footer .copyright-text a:hover {
    color: var(--color-purity) !important;
}

/* أيقونات وسائل الدفع */
.store-footer .s-payments-list {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

.store-footer .s-payments-list-item {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    transition: all 0.3s ease !important;
}

.store-footer .s-payments-list-item:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-2px) !important;
}

.store-footer .s-payments-list-item img {
    filter: brightness(0.8) contrast(1.1) !important;
    transition: filter 0.3s ease !important;
}

.store-footer .s-payments-list-item:hover img {
    filter: brightness(1) contrast(1) !important;
}

/* =========================================
   5. سكشن آراء العملاء (Testimonials)
   ========================================= */

/* خلفية السكشن */
.s-block--custom-testimonials {
    background-color: var(--color-purity) !important;
    padding: 60px 0 !important;
    margin: 40px auto !important;
    border-radius: 20px !important;
    position: relative !important;
    overflow: visible !important;
}

/* العنوان الرئيسي */
.s-reviews-header {
    color: #2a2522 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    position: relative !important;
    display: inline-block !important;
}

.s-reviews-header-wrapper {
    text-align: center !important;
    margin-bottom: 40px !important;
    position: relative !important;
}


/* بطاقة التقييم */
.s-reviews-testimonial {
    padding: 10px !important;
}

.s-reviews-testimonial__inner {
    background: #ffffff !important;
    border: 1px solid rgba(136, 128, 103, 0.15) !important;
    border-radius: 16px !important;
    padding: 30px !important;
    position: relative !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.s-reviews-testimonial__inner:hover {
    box-shadow: 0 8px 30px rgba(89, 122, 75, 0.1) !important;
    transform: translateY(-3px) !important;
    border-color: rgba(89, 122, 75, 0.25) !important;
}

/* صورة المستخدم */
.s-reviews-testimonial__avatar {
    margin-bottom: 16px !important;
}

.s-reviews-testimonial__avatar img {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    border: 3px solid var(--color-purity) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    object-fit: cover !important;
}

/* نص التقييم */
.s-reviews-testimonial__text p {
    color: #555555 !important;
    font-size: 15px !important;
    line-height: 1.9 !important;
    margin-bottom: 16px !important;
    font-style: italic !important;
}

/* اسم العميل */
.s-reviews-testimonial__info h2 {
    color: #2a2522 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* النجوم */
.s-reviews-testimonial__rating .s-rating-stars-selected svg path {
    fill: var(--color-branches) !important;
}

.s-reviews-testimonial__rating .s-rating-stars-wrapper {
    gap: 2px !important;
}

/* أيقونة الاقتباس */
.s-reviews-testimonial__icon {
    color: var(--color-olive) !important;
    opacity: 0.12 !important;
    position: absolute !important;
    top: 15px !important;
    left: 20px !important;
}

.s-reviews-testimonial__icon svg {
    width: 40px !important;
    height: 40px !important;
    fill: var(--color-olive) !important;
}

/* أسهم التنقل */
.s-block--custom-testimonials .s-slider-nav-arrow {
    background: #ffffff !important;
    border: 1px solid rgba(136, 128, 103, 0.2) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.s-block--custom-testimonials .s-slider-nav-arrow:hover {
    background: var(--color-olive) !important;
    border-color: var(--color-olive) !important;
    box-shadow: 0 4px 15px rgba(89, 122, 75, 0.25) !important;
}

.s-block--custom-testimonials .s-slider-nav-arrow svg {
    fill: var(--color-branches) !important;
    width: 20px !important;
    height: 20px !important;
    transition: fill 0.3s ease !important;
}

.s-block--custom-testimonials .s-slider-nav-arrow:hover svg {
    fill: #ffffff !important;
}

.s-block--custom-testimonials .s-slider-nav-arrow:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

/* ريسبونسيف */
@media (max-width: 768px) {
    .s-block--custom-testimonials {
        padding: 40px 15px !important;
        margin: 20px 0 !important;
        border-radius: 0 !important;
    }

    .s-reviews-header {
        font-size: 22px !important;
    }

    .s-reviews-testimonial__inner {
        padding: 20px !important;
    }
}

/* =========================================
   6. سكشن الأسئلة الشائعة (FAQ)
   ========================================= */

/* الحاوية الخارجية */
.s-block--bundle-faq {
    padding: 50px 0 !important;
    margin: 40px 0 !important;
}

/* تغيير ألوان الكومبوننت عبر CSS Variables (تخترق Shadow DOM) */
salla-faq-akhx9e,
[component-name="faq"] {
    --faq-border-color: var(--color-branches) !important;
    --faq-question-bg-color: var(--color-purity) !important;
    --faq-question-text-color: #2a2522 !important;
}

/* =========================================
   7. سكشن المميزات (Features)
   ========================================= */

/* الحاوية الخارجية */
.s-block--features {
    padding: 50px 0 !important;
    margin: 30px auto !important;
}

/* بطاقة الميزة */
.s-block--features__item {
    background: #ffffff !important;
    border: 1px solid rgba(136, 128, 103, 0.12) !important;
    border-radius: 16px !important;
    padding: 35px 25px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.s-block--features__item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

/* خط زخرفي علوي (يتغير لونه حسب الكارد) */
.s-block--features__item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 4px !important;
    border-radius: 16px 16px 0 0 !important;
    transition: height 0.3s ease !important;
}

.s-block--features__item:hover::before {
    height: 5px !important;
}

/* أيقونة الميزة */
.s-block--features__item .feature-icon {
    width: 65px !important;
    height: 65px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 18px auto !important;
    font-size: 26px !important;
    transition: all 0.3s ease !important;
}

.s-block--features__item:hover .feature-icon {
    transform: scale(1.1) !important;
}

/* عنوان الميزة */
.s-block--features__item h2 {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #2a2522 !important;
    margin-bottom: 8px !important;
}

/* وصف الميزة */
.s-block--features__item p {
    font-size: 13px !important;
    color: #888888 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ========== ألوان متنوعة لكل بطاقة ========== */

/* الميزة الأولى - لون الزيتون 🌿 */
.s-block--features__item:nth-child(1)::before {
    background: linear-gradient(to left, var(--color-olive), #6d9a5a) !important;
}

.s-block--features__item:nth-child(1) .feature-icon {
    background-color: rgba(89, 122, 75, 0.15) !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--color-olive), #6d9a5a) !important;
}

.s-block--features__item:nth-child(1):hover {
    border-color: rgba(89, 122, 75, 0.25) !important;
}

/* الميزة الثانية - لون السماء 🔵 */
.s-block--features__item:nth-child(2)::before {
    background: linear-gradient(to left, var(--color-sky), #8aa8cc) !important;
}

.s-block--features__item:nth-child(2) .feature-icon {
    background-color: rgba(110, 142, 180, 0.15) !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--color-sky), #8aa8cc) !important;
}

.s-block--features__item:nth-child(2):hover {
    border-color: rgba(110, 142, 180, 0.25) !important;
}

/* الميزة الثالثة - لون الحصاد 🟤 */
.s-block--features__item:nth-child(3)::before {
    background: linear-gradient(to left, var(--color-harvest), #a86e68) !important;
}

.s-block--features__item:nth-child(3) .feature-icon {
    background-color: rgba(142, 87, 81, 0.15) !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--color-harvest), #a86e68) !important;
}

.s-block--features__item:nth-child(3):hover {
    border-color: rgba(142, 87, 81, 0.25) !important;
}

/* ريسبونسيف */
@media (max-width: 768px) {
    .s-block--features {
        padding: 30px 0 !important;
    }

    .s-block--features__item {
        padding: 25px 18px !important;
    }

    .s-block--features__item .feature-icon {
        width: 55px !important;
        height: 55px !important;
        font-size: 22px !important;
    }

    .s-block--features__item h2 {
        font-size: 15px !important;
    }
}

/* =========================================
   8. إزالة المسافة العلوية لمحتوى HTML
   ========================================= */
.s-block--bundle-html-content,
.s-block--bundle-html-content * {
  margin-top: 0 !important;
}

/* =========================================
   9. تمييز عناوين الأقسام بخلفية متدرجة (Section Titles Highlight)
   ========================================= */
.s-block__title h2,
.s-reviews-header,
.s-slider-block__title-right h2,
.s-slider-block__title h2,
.s-comments-title,
.s-bought-together-title {
    position: relative !important;
    display: inline-block !important;
    width: fit-content !important;
    z-index: 1 !important;
    margin-bottom: 5px !important;
    font-size: 35px !important;
    font-weight: 800 !important;
    padding-left: 0 !important;
}

.s-block__title h2::after,
.s-reviews-header::after,
.s-slider-block__title-right h2::after,
.s-slider-block__title h2::after,
.s-comments-title::after,
.s-bought-together-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 0 !important;
    width: 100% !important;
    height: 30% !important; /* خط صغير في نص العنوان من تحت */
    background: #8E5751 !important;
    z-index: -1 !important;
    border-radius: 4px !important;
    opacity: 0.25 !important; /* شفافية بسيطة عشان الكلام يفضل مقروء وشكله حلو */
}

/* =========================================
   10. إضافات صفحة المنتج (واتساب، مميزات، شحن)
   ========================================= */

/* --- واتساب --- */
.custom-whatsapp-cta {
    display: flex !important;
    align-items: center !important;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 18px 22px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important;
    transition: all 0.3s ease !important;
}

.custom-whatsapp-cta:hover {
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45) !important;
    transform: translateY(-2px) !important;
}

.custom-whatsapp-cta .whatsapp-icon {
    color: #ffffff !important;
    margin-left: 15px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.2) !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
}

.custom-whatsapp-cta .whatsapp-content {
    display: flex !important;
    flex-direction: column !important;
}

.custom-whatsapp-cta .whatsapp-title {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #ffffff !important;
    margin-bottom: 4px !important;
}

.custom-whatsapp-cta .whatsapp-text {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.custom-whatsapp-cta .whatsapp-link {
    color: #ffffff !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}

/* --- مميزات المتجر --- */
.qaf-features-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

.qaf-fv-item {
    display: flex !important;
    align-items: center !important;
    background-color: var(--color-purity) !important;
    border: 2px solid rgba(136, 128, 103, 0.2) !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
    transition: all 0.3s ease !important;
}

.qaf-fv-item:hover {
    border-color: var(--color-olive) !important;
    box-shadow: 0 4px 12px rgba(89, 122, 75, 0.15) !important;
}

.qaf-fv-icon {
    color: #ffffff !important;
    margin-left: 15px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--color-olive) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 8px rgba(89, 122, 75, 0.3) !important;
}

.qaf-fv-text {
    display: flex !important;
    flex-direction: column !important;
}

.qaf-fv-text strong {
    font-size: 15px !important;
    color: #2a2522 !important;
    margin-bottom: 3px !important;
}

.qaf-fv-text span {
    font-size: 13px !important;
    color: #555 !important;
}

/* --- صندوق الشحن --- */
.qaf-shipping-box {
    background: linear-gradient(135deg, #FFF8F0 0%, var(--color-purity) 100%) !important;
    border: 2px solid var(--color-harvest) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    margin-bottom: 25px !important;
    position: relative !important;
    overflow: hidden !important;
}

.qaf-shipping-box::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: var(--color-harvest) !important;
    border-radius: 0 14px 14px 0 !important;
}

.qaf-shipping-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    color: var(--color-harvest) !important;
    margin-bottom: 14px !important;
}

.qaf-shipping-title svg {
    color: var(--color-harvest) !important;
}

.qaf-shipping-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.qaf-shipping-item {
    display: flex !important;
    align-items: flex-start !important;
    font-size: 14px !important;
    color: #333 !important;
}

.qaf-shipping-dot {
    width: 8px !important;
    height: 8px !important;
    background-color: var(--color-harvest) !important;
    border-radius: 50% !important;
    margin-left: 10px !important;
    margin-top: 7px !important;
    flex-shrink: 0 !important;
}

/* =========================================
   11. لون السعر في صفحة المنتج
   ========================================= */
.container--product-details .total-price,
.container--product-details [data-testid="store-product-price"] p {
    color: var(--color-harvest) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
}

.container--product-details .before-price {
    color: #999 !important;
}

/* =========================================
   12. شريط المكافآت المتدرجة (Tiered Rewards Bar)
   ========================================= */
.trb-wrap {
    margin: 16px 0 24px !important;
    padding: 16px 4px !important;
    direction: rtl !important;
}

.trb-title {
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    color: var(--color-text, #1b1b1b) !important;
}

.trb-track-wrap {
    position: relative !important;
    padding: 0 18px !important;
    margin: 0 10px !important;
}

.trb-labels-top {
    position: relative !important;
    height: 24px !important;
    margin-bottom: 8px !important;
}

.trb-labels-top span {
    position: absolute !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    transform: translateX(50%) !important;
    white-space: nowrap !important;
}

.trb-track {
    position: relative !important;
    height: 6px !important;
    background: #e9e9e9 !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
}

.trb-fill {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: var(--color-olive) !important;
    border-radius: 4px !important;
    transition: width .4s ease !important;
    /* width يتم تعيينه من الجافاسكريبت مباشرة - بدون !important */
}

.trb-dot {
    position: absolute !important;
    top: 50% !important;
    transform: translate(50%, -50%) !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 2px solid #ddd !important;
    color: #b5b5b5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    z-index: 2 !important;
    transition: all .3s ease !important;
}

.trb-dot.trb-done {
    background: var(--color-olive) !important;
    border-color: var(--color-olive) !important;
    color: #ffffff !important;
}

.trb-labels-bottom {
    position: relative !important;
    height: 20px !important;
    margin-top: 12px !important;
}

.trb-labels-bottom span {
    position: absolute !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    transform: translateX(50%) !important;
    color: #333 !important;
    white-space: nowrap !important;
}

.trb-marker {
    position: absolute !important;
    top: 50% !important;
    right: 0% !important;
    transform: translate(50%, -50%) !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background: var(--color-olive) !important;
    border: 2px solid var(--color-olive) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    z-index: 3 !important;
    transition: right .4s ease, opacity .3s ease !important;
    opacity: 0 !important;
}

.trb-marker.trb-visible {
    opacity: 1 !important;
}

.trb-marker img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
}

/* داخل نافذة المعاينة السريعة */
#preview-modal .trb-wrap {
    margin: 12px 0 16px !important;
    padding: 12px 2px !important;
}

#preview-modal .trb-title {
    font-size: 14px !important;
    margin-bottom: 14px !important;
}

#preview-modal .trb-labels-top span { font-size: 13px !important; }
#preview-modal .trb-labels-bottom span { font-size: 11px !important; }
#preview-modal .trb-dot { width: 24px !important; height: 24px !important; }
#preview-modal .trb-marker { width: 24px !important; height: 24px !important; }

/* موبايل */
@media (max-width: 480px) {
    .trb-wrap { padding: 12px 2px !important; margin: 12px 0 16px !important; }
    .trb-title { font-size: 14px !important; margin-bottom: 14px !important; }
    .trb-labels-top span { font-size: 13px !important; }
    .trb-labels-bottom span { font-size: 11px !important; }
    .trb-dot { width: 24px !important; height: 24px !important; }
    .trb-marker { width: 15px !important; height: 15px !important; }
}
@media (max-width: 480px) {
  .wa-s-n {
    bottom: 100px  !important;
  }
}