/* Add custom CSS styles below */ 

/* --- Animations & Transitions --- */
.s-block--special-products-slider .lg\:w-1\/3 div {
    transition: 2s;
    transform: translateX(0) !important;
    opacity: 0;
}
.s-block--special-products-slider.show-animate .lg\:w-1\/3 div {
    transform: translateX(0) !important;
    opacity: 1;
}


/* --- Features Products Section --- */

.s-block--features-products.two-cols>.inner>div:nth-of-type(1) {
    transition: 2s;
    transform: translateX(120%) !important;
}

.s-block--features-products.two-cols.show-animate>.inner>div:nth-of-type(1) {
    transform: translateX(0) !important;
}



.s-block--features-products.two-cols>.inner>div:nth-of-type(2) {

    transition: 2s;

    transform: translateX(-120%) !important;

}



.s-block--features-products.two-cols.show-animate>.inner>div:nth-of-type(2) {

    transform: translateX(0) !important;

}



/* --- Square Links --- */

.s-block--square-links .home-block-title {

    transition: 2s;

    transform: translateY(100%) !important;

}



.s-block--square-links.show-animate .home-block-title {

    transform: translateY(0) !important;

}



.s-block--square-links .swiper-slide {

    transition: 2s;

    transform: translateX(-500%) !important;

}



.s-block--square-links.show-animate .swiper-slide {

    transform: translateX(0) !important;

}



/* --- Slider with BG --- */

.s-block--slider-with-bg .s-block--slider-with-bg-title {

    transition: 2s;

    transform: translateX(100%) !important;

}



.s-block--slider-with-bg.show-animate .s-block--slider-with-bg-title {

    transform: translateX(0) !important;

}



/* --- Dynamic Banner --- */

.s-block--dynamic-banner {

    transition: 2s;

    transform: translateX(0) !important;

    opacity: 0.5;

    padding: 3rem;

}



.s-block--dynamic-banner.show-animate {

    transform: translateX(0) !important;

    opacity: 1;

}



/* --- Advanced Sliders --- */

.advanced-slider--2 .advanced-slider__caption__inner,

.advanced-slider--8 .advanced-slider__caption__inner {

    transition: 2s;

    transform: translateX(120%) !important;

}



.advanced-slider--2.show-animate .advanced-slider__caption__inner,

.advanced-slider--8.show-animate .advanced-slider__caption__inner {

    transform: translateX(0) !important;

}



/* --- About Section --- */

.s-block--about video {

    transition: 1s;

    transform: translateX(-120%) !important;

}



.s-block--about.show-animate video {

    transform: translateX(0) !important;

}



.s-block--about h2,

.s-block--about h3,

.s-block--about p {

    transition: 1s;

    transform: translateX(100%) !important;

}



.s-block--about.show-animate h2,

.s-block--about.show-animate h3,

.s-block--about.show-animate p {

    transform: translateX(0) !important;

}



.s-block--about p {

    font-size: 1.2rem;

}



.s-block--about .container {

    max-width: 100%;

    padding: 0;

}



.s-block--about .md\:w-5\/12 {

    width: 70%;

}



.s-block--about .md\:w-7\/12 {

    width: 30%;

}



.s-block--about {

    padding-right: 2rem;

    padding-left: 2rem;

}



/* --- Header & Logo --- */

.store-header .logo-normal {

    height: 45px !important;

}



.main-nav-container {

    background-color: #2e304f;

}



.main-nav-container.fixed-pinned.animated.fixed-header {

    background-color: #2e304f !important;

}



/* --- Product Cards & Styling --- */

.s-block--special-products-slider .lg\:w-1\/3 h2,

.s-block--special-products-slider .lg\:w-1\/3 p {

    text-shadow: 2px 2px 2px #000000;

}



salla-products-slider .s-slider-block__title {

    border-bottom: none;

}



.product-card--horizontal.product-card--rounded .product-card__image:where([dir="rtl"], [dir="rtl"] *) {

    border-radius: 10px;

}



.product-card--rounded .product-card__image {

    border: 1px solid #eddcc0;

    border-radius: 10px;

    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

}



.s-block--features-products.two-cols img {

    background-color: white;

}



.s-block--features-products.two-cols .s-product-card-overlay {

    background-color: rgba(0, 0, 0, 0.5);

}



.s-block--features-products.two-cols .s-product-card-image-full a img {

    border: 1px solid #eddcc0;

    border-radius: 10px;

    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

}



.s-block--features-products.two-cols .product-card__full-image .text-store-text-secondary,

.s-block--features-products.two-cols .product-card__full-image .product-card__title a {

    color: #2e304f !important;

}



.s-block--features-products.two-cols .product-card__full-image-actions button {

    color: #2e304f !important;

    border-color: rgb(46 48 79) !important;

}



/* --- Layout Adjustments --- */

.s-block--slider-with-bg .slider-bg,

.s-block--special-products-slider img,

.advanced-slider--4 img {

    border-radius: 10px;

}



.s-block--slider-with-bg h3 {

    text-shadow: 2px 2px 2px #000000;

    font-size: 3.7rem;

    line-height: 4.7rem;

}



.s-block--slider-with-bg .slider-bg p {

    text-shadow: 2px 2px 2px #000000;

    font-size: 1.5rem;

    line-height: 2rem;

    max-width: 100% !important;

}



.s-block--slider-with-bg .slider-bg:before {

    --tw-bg-opacity: 0;

    background-color: rgba(0, 0, 0, var(--tw-bg-opacity));

    opacity: 0;

}



.s-block--slider-with-bg .s-slider-block__title {

    display: none;

}



.s-block--slider-with-bg .container.-mt-62.relative.overflow-hidden {

    margin-top: -120px;

}



.advanced-slider--2,

.s-block--slider-with-bg,

.s-block--special-products-slider {

    padding-right: 0;

    padding-left: 0;

}



/* --- Typography --- */

.advanced-slider__caption__inner__content__text {

    text-shadow: 2px 2px 2px #000000;

    font-size: 1.2rem;

}



.advanced-slider__caption__inner__content__heading {

    text-shadow: 2px 2px 2px #000000;

    font-size: 1.55rem;

}



/* --- Footer Styling --- */

.store-footer__inner .container .grid {

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

}



.store-footer__inner * {

    text-align: center !important;

    justify-content: center !important;

}



.store-footer__inner .grid>div {

    padding-left: 0;

    grid-column: span 1 / span 2;

}



a.footer-logo img {

    margin: auto;

}



footer .user-contacts {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    width: 245px;

    row-gap: 10px;

}



footer .user-contacts h3.footer-title {

    grid-column: span 3 / span 3;

}



footer .user-contacts>a[href="mailto:Wahat.aloud.sa@gmail.com"] {

    grid-column: span 3 / span 3;

}



footer .user-contacts>a:not(a[href="mailto:Wahat.aloud.sa@gmail.com"]) span {

    display: none;

}



/* --- Miscellaneous --- */

.loading-overlay .spinner img {

    -webkit-animation: bounce 5s infinite ease-in-out;

    height: 60px;

}



.swiper-wrapper.s-slider-swiper-wrapper {

    padding-bottom: 10px;

}



.s-block--enhanced-features__item p {

    display: none;

}



.fixed-pinned.animated.fixed-header ul.main-menu >li a span,

.fixed-pinned.animated.fixed-header .main-menu .has-children.root-level>a:after,

.fixed-pinned.animated.fixed-header .header-btn__icon,

.fixed-pinned.animated.fixed-header i.sicon-menu,

footer.store-footer a {

    color: #fff !important;

}



.product-index salla-filters#filters-menu,

.s-block--testimonials.enhanced:before {

    display: none;

}



.out-of-stock .product-card__image img {

    filter: unset;

}



.main-menu li.root-level>a {

    padding: 0rem 0.6rem 2rem;

    font-size: 13px;

}



.main-nav-container .container >.flex {

    justify-content: space-between;

}



/* --- Media Queries --- */



@media (min-width: 1280px) {

    .advanced-slider__caption__inner__content__heading {

        font-size: 2.5rem;

    }

    .advanced-slider__caption__inner__content__text {

        font-size: 2rem;

    }

}



@media (min-width: 600px) {

    .product-index .s-products-list-filters-results {

        grid-template-columns: repeat(4, minmax(0, 1fr));

    }

}



@media (max-width: 992px) {

    .store-footer__inner .container .grid {

        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;

    }

    .store-footer__inner p {

        max-width: 48rem;

    }

    .store-footer__inner .container .grid {

        display: flex;

        flex-direction: column;

        align-items: center;

    }

}



@media (max-width: 600px) {

    .s-block--features-products.two-cols .product-card--rounded {

        border-bottom-left-radius: 0px !important;

    }

    .s-block--features-products.two-cols .product-card__full-image img {

        padding-bottom: 7rem;

    }

    .s-block--features-products.two-cols button,

    .s-block--features-products.two-cols .s-button-text {

        color: white !important;

        background-color: #2e304f !important;

    }

    .store-header .logo-normal {

        height: 35px !important;

    }

    .s-block--slider-with-bg h3 {

        font-size: 2rem;

    }

    .s-block--slider-with-bg .slider-bg p {

        font-size: 1rem;

        line-height: 2rem;

    }

    .s-block--special-products-slider p {

        font-size: 1rem !important;

    }

    .s-block--dynamic-banner {

        padding: 0.5rem;

    }

    .s-block--about {

        text-align: center;

    }

    .s-block--about .md\:w-5\/12,

    .s-block--about .md\:w-7\/12 {

        width: 100%;

    }

    .s-block--enhanced-features__item:first-child {

        grid-column: span 1 / span 2;

    }

    section.s-block.s-block--enhanced-features.container .grid {

        grid-template-columns: repeat(1, minmax(0, 1fr));

    }

}













/*-------------------------------------*/

بناءً على الصورة، أنت تستخدم قسم "منتجات متحركة مع خلفية" في سلة. لتجعل النصوص (العنوان والوصف) تتحرك من الجانب إلى المنتصف وتستقر هناك مع الكلاس الجديد dahenAloud الذي وضعته للقسم، استخدم الكود التالي:



/* الحالة الافتراضية: النص فوق ومخفي */

.dahenAloud h3, 

.dahenAloud p { 

    transform: translateY(-60px);

    opacity: 0;

    transition: all 0.7s ease-out;

}



/* عند تفعيل الأنيميشن: ينزل لمكانه */

.dahenAloud.show-animate h3, 

.dahenAloud.show-animate p { 

    transform: translateY(0);

    opacity: 1;

}



/* تثبيت النص بالمنتصف */

.dahenAloud h3, 

.dahenAloud p {

    text-align: center;

    margin-left: auto;

    margin-right: auto;

    display: block;

    width: 100%;

    max-width: 100%;

}













/*-------------------------------------*/

/* تنسيق الزر الاحترافي لمتجر واحة العود */

.advanced-slider__caption__inner__content__button.outlined {

    position: relative;

    display: inline-block;

    

    /* إزاحة الزر ليكون أسفل رقم 50% */

    margin-top: 100px !important; /* زيادة المسافة العلوية */

    

    /* الألوان الثابتة (منع الهوفر) */

    background-color: #6F4E37 !important; /* اللون البني الفخم */

    color: #ffffff !important;           /* نص أبيض */

    border: none !important;             /* إلغاء الإطار */

    

    /* أبعاد وشكل الزر */

    padding: 12px 35px !important;

    border-radius: 10px !important;     /* زوايا منحنية متناسقة مع اللوجو */

    font-size: 16px !important;

    font-weight: bold !important;

    text-decoration: none !important;

    

    /* إلغاء أي تأثيرات حركية أو تغيير ألوان */

    transition: none !important;

    pointer-events: auto; /* السماح بالضغط فقط */

}



/* إلغاء تأثير الهوفر تماماً (Hover State) */

.advanced-slider__caption__inner__content__button.outlined:hover {

    background-color: #6F4E37 !important; /* الحفاظ على نفس اللون */

    color: #ffffff !important;

    box-shadow: none !important;         /* إلغاء الظل عند الهوفر */

    transform: none !important;          /* منع أي حركة */

}



/* تنسيق خاص للموبايل لضمان عدم خروج الزر عن الشاشة */

@media (max-width: 768px) {

    .advanced-slider__caption__inner__content__button.outlined {

        margin-top: 60px !important; /* مسافة أقل قليلاً لتناسب شاشات الجوال */

        padding: 10px 25px !important;

        font-size: 14px !important;

    }

}













.castomer_op p.leading-6.text-sm.mb-2.mt-2\.5.md\:mt-4.text-store-text-primary {

    font-size: 16px;

    line-height: 1.8;

    color: #2e304f;

    font-weight: 500; /* سماكة بسيطة */

    margin: 10px 0;

}



/* شاشات أكبر */

@media (min-width: 768px) {

    .castomer_op p.leading-6.text-sm.mb-2.mt-2\.5.md\:mt-4.text-store-text-primary {

        font-size: 17px;

        line-height: 1.9;

    }

}











.features {

    /* مسافة خارجية كبيرة للفصل عن السكشن العلوي */

    margin-top: 50px; 

    

    /* مسافة خارجية من الأسفل (اختياري) */

    margin-bottom: 20px; 

    

    /* مساحة داخلية 20 بكسل من الأعلى والأسفل، و 0 من الجوانب */

    padding: 20px 10px; 

    

    /* لضمان ظهور البادينج والمارجين بشكل صحيح */

    display: block; 

}





/* تنسيق نص الإجابة فقط - واحة العود */

/* تم تعديل الكلاس py-3 text-sm text-store-text-secondary */

.faq-content p.py-3.text-sm.text-store-text-secondary {

    /* الخط والألوان - تغيير اللون للكحلي الغامق وتغميقه */

    color: #001f3f !important; /* لون كحلي غامق (Dark Navy) */

    font-size: 0.95rem !important;

    line-height: 2 !important;

    font-weight: 600 !important; /* جعل الخط أكثر وضوحاً وأثقل قليلاً */

    text-align: right !important;

    

    /* المسافات - تم تقليل الحشو العلوي والسفلي للتقريب */

    padding: 0.5rem 1.5rem 0.8rem 1.5rem !important; /* تقليل المسافة العلوية (0.5rem) والسفلية */

    margin: 5px 0 !important; /* هامش خارجي نحيف جداً */

    display: block !important;

    width: 100% !important;

    

    /* جعل النص يحترم الأسطر الجديدة (Enter) */

    white-space: pre-line !important; 

    

    /* لمسات جمالية بسيطة */

    background-color: #f9fafb !important;

    border-radius: 8px !important;

    border-right: 2px solid #d4af37 !important; /* خط جانبي ذهبي نحيف للفخامة */

}



/* توافق الشاشات (Responsive) */

@media (max-width: 768px) {

    .faq-content p.py-3.text-sm.text-store-text-secondary {

        font-size: 0.88rem !important;

        padding: 0.4rem 1rem 0.6rem 1rem !important; /* تقليل المسافات أكثر على الجوال */

        line-height: 1.8 !important;

    }

}








/* الحاوية الرئيسية */
ul.s-count-down-list.s-count-down-boxed {
    display: flex !important;
    justify-content: center !important;
    gap: 20px !important; 
    padding: 20px 0 !important;
    list-style: none !important;
    direction: rtl !important;
}

/* المربعات (li) */
.s-count-down-item {
    width: 150px !important; 
    height: 150px !important; 
    flex: 0 0 150px !important; 
    background-color: #fff !important; 
    border-radius: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
    overflow: hidden !important;
}

/* تنسيق الرقم (Value) */
.s-count-down-item-value {
    color: #2E304F !important; /* لون أبيض ناصع */
    font-size: clamp(1.8rem, 5vw, 3.2rem) !important; /* حجم كبير وواضح */
    font-weight: 900 !important; /* خط سميك جداً */
    line-height: 1 !important;
    margin-bottom: 5px !important;
    font-family: inherit !important;
}

/* تنسيق التصنيف (Label) - ثانية، دقيقة... */
.s-count-down-item-label {
    color: #A5A8C5 !important; /* لون رمادي مزرق فاتح ليتناسب مع الخلفية الكحلية */
    font-size: clamp(0.8rem, 2vw, 1.1rem) !important; 
    font-weight: 500 !important;
    font-family: inherit !important;
}

/* التجاوب مع شاشات الجوال (Responsive) */
@media (max-width: 768px) {
    ul.s-count-down-list.s-count-down-boxed {
        gap: 8px !important; /* تقليل المسافة بين المربعات */
    }

    .s-count-down-item {
        /* تصغير المربعات لتناسب عرض الجوال */
        width: 75px !important;
        height: 90px !important; /* جعلها طولية قليلاً في الجوال لتوفير مساحة */
        flex: 0 0 75px !important;
        border-radius: 8px !important;
    }

    .s-count-down-item-value {
        font-size: 1.6rem !important; /* تصغير الرقم ليناسب المربع الصغير */
    }

    .s-count-down-item-label {
        font-size: 0.65rem !important; /* تصغير النص التوضيحي */
        margin-top: 2px !important;
    }
}

.offer h2{
  color: #2E304F !important;
}
.offer p{
  color: #2E304F !important;
}
.hidden text-xl md:block ms-1 menu-label{
    color: #fff !important;
}










/* --- الكارد الأساسي (مستطيل عادي للحفاظ على الثبات) --- */

.product-card {

    background: #ffffff;

    width: 280px;

    padding: 15px;

    border-radius: 12px; /* حواف دائرية خفيفة جداً للكارد */

    border: 1px solid #f0f0f0;

    transition: all 0.4s ease;

    position: relative;

    overflow: visible; /* مهم جداً لظهور الـ drop-shadow */

}



.product-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0,0,0,0.05);

}



/* حاوية الصورة (للتوسيط والخلفية فقط) */

.image-container {

    width: 100%;

    aspect-ratio: 1/1;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    margin-bottom: 15px;

    overflow: visible; /* مهم جداً لظهور الـ drop-shadow */

}


.main-nav-container {
    margin-top: 45px;
}


/* --- تنسيق الحاوية الرئيسية للـ Navbar --- */
.main-nav-container {
    background-color: #ffffff !important; /* خلفية بيضاء */
    border-bottom: 1px solid #f0f0f0; /* خط سفلي خفيف ليفصله عن المحتوى */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* ظل ناعم جداً للفخامة */
}

/* --- تنسيق الأيقونات داخل الـ Navbar --- */
/* ملاحظة: غالباً ما تكون الأيقونات في "سلة" عبارة عن عناصر i أو svg */
.main-nav-container i, 
.main-nav-container svg,
.main-nav-container .nav-icon {
    color: #001f3f !important; /* اللون الكحلي */
    fill: #001f3f !important;  /* للأيقونات من نوع SVG */
    transition: all 0.3s ease;
}

/* --- تأثير عند مرور الماوس على الأيقونات (اختياري) --- */
.main-nav-container i:hover, 
.main-nav-container svg:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

/* --- إذا كان هناك نصوص بجانب الأيقونات تريد تحويلها للكحلي أيضاً --- */
.main-nav-container a, 
.main-nav-container span {
    color: #001f3f !important;
}
.main-nav-container .menu-label, 
p.menu-label {
    color: #001f3f !important; /* اللون الكحلي */
}






/* --- الكارد الأساسي --- */
.product-card {
    background: #ffffff;
    border-radius: 16px; /* زوايا ناعمة للجسم */
    border: 1px solid #f0f0f0;
    transition: all 0.4s ease;
    overflow: hidden; /* لضمان بقاء الصورة داخل حدود الكارد */
}

/* --- استهداف الصورة بتنسيق متناسق --- */
.product-card__image {
    width: 100%;
    aspect-ratio: 1/1; /* توحيد أبعاد الصور */
    object-fit: cover;
    
    /* استبدال الـ clip-path الحاد بزوايا دائرية خفيفة */
    border-radius: 12px; 
    
    /* إطار ذهبي رقيق وأنيق */
    border: 2px solid #d4af37;
    
    transition: all 0.5s ease;
}

/* تأثير التفاعل (Hover) - يعمل بشكل ممتاز في الموبايل عند اللمس */
.product-card:hover .product-card__image {
    transform: scale(1.03); /* تكبير أخف ليناسب الموبايل */
    border-color: #b8860b; /* لون ذهبي أغمق قليلاً عند التفاعل */
}

/* تحسين المساحات للموبايل */
@media (max-width: 600px) {
    .product-card {
        padding: 10px;
    }
    .product-card__image {
        border-radius: 8px; /* تقليل التدوير قليلاً في الشاشات الصغيرة */
    }
}


@media (max-width: 600px) {
    /* 1. ضبط عرض الكارد بالكامل ليناسب شاشة الجوال */
    .product-card {
        width: 100% !important; /* يأخذ كامل عرض العمود */
        padding: 10px !important;
        margin-bottom: 15px !important;
    }

    /* 2. التحكم في حاوية الصورة لضمان عدم تداخلها مع النصوص */
    .product-card__image {
        padding: 5px !important; /* تقليل المساحة حول الصورة */
        max-height: 200px !important; /* تحديد ارتفاع أقصى للصورة */
        object-fit: contain !important;
    }

    /* 3. ضبط نصوص العنوان والأسعار لتكون واضحة */
    .product-card__content {
        padding: 5px 0 !important;
    }

    .product-card__title {
        font-size: 14px !important; /* تصغير الخط قليلاً ليناسب العرض */
        line-height: 1.4 !important;
    }

    /* 4. تنسيق زر "إضافة للسلة" ليكون مناسباً للضغط بالإصبع */
    .product-card__add-to-cart {
        padding: 8px !important;
        font-size: 12px !important;
    }

    /* 5. إخفاء أو إعادة تموضع العناصر الجانبية إذا كانت تسبب ازدحاماً */
    .product-card__actions {
        flex-direction: column !important;
        gap: 5px !important;
    }
}