/* Add custom CSS styles below */
.close-button .out {
    display: none !important;
}



/* =========================================
   Wafi Trend — Compact Category Header 2026
   Small / Modern / Responsive
========================================= */

/* الهيدر نفسه: مستطيل صغير مستقل بدل البانر الطويل */
.product-index-page-header {
    position: relative !important;
    height: 148px !important;
    min-height: 148px !important;
    width: calc(100% - 32px) !important;
    max-width: 1280px !important;
    margin: 16px auto 26px !important;
    padding: 0 22px !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    color: #0f2747 !important;
    isolation: isolate;
    box-shadow: 0 12px 34px rgba(15, 39, 71, 0.07) !important;
}

/* الخلفية الهادئة */
.product-index-page-header .head-bg {
    background-color: #f7fbfb !important;
    background-image:
        radial-gradient(circle at 92% 10%, rgba(21, 145, 155, 0.13) 0, rgba(21, 145, 155, 0.05) 26%, transparent 27%),
        radial-gradient(circle at 7% 110%, rgba(150, 203, 82, 0.13) 0, rgba(150, 203, 82, 0.04) 30%, transparent 31%),
        linear-gradient(135deg, #ffffff 0%, #f5fbfc 52%, #f5faf3 100%) !important;
    background-size: cover !important;
    background-position: center !important;
}

/* زخارف صغيرة جداً بدون ازدحام بصري */
.product-index-page-header .head-bg::before,
.product-index-page-header .head-bg::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.product-index-page-header .head-bg::before {
    width: 150px;
    height: 150px;
    top: -82px;
    right: 7%;
    border: 1px solid rgba(21, 145, 155, 0.10);
}

.product-index-page-header .head-bg::after {
    width: 110px;
    height: 110px;
    left: 5%;
    bottom: -62px;
    border: 1px solid rgba(150, 203, 82, 0.14);
}

/* حاوية المحتوى */
.product-index-page-header>.container {
    position: relative !important;
    z-index: 2 !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* البطاقة الداخلية: مدمجة وأنيقة */
.product-index-page-header .container>.relative {
    position: relative !important;
    width: auto !important;
    min-width: 360px !important;
    max-width: min(560px, 100%) !important;
    padding: 14px 18px 13px 21px !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(21, 145, 155, 0.12) !important;
    border-right: 4px solid #15919b !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(15, 39, 71, 0.07) !important;
}

/* العنوان */
.product-index-page-header h2,
.product-index-page-header h2.line-clamp-2 {
    display: block !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    color: #102a43 !important;
    font-size: 28px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    letter-spacing: -0.25px;
    white-space: normal !important;
    text-overflow: unset !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
}

/* Breadcrumb: إلغاء مسافات سلة الكبيرة */
.product-index-page-header salla-breadcrumb.breadcrumbs,
.product-index-page-header .breadcrumbs {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #708194 !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

.product-index-page-header .s-breadcrumb-wrapper {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-index-page-header .s-breadcrumb-item,
.product-index-page-header .s-breadcrumb-item a {
    line-height: 1.4 !important;
}

.product-index-page-header .breadcrumbs a {
    color: #15919b !important;
    font-weight: 750 !important;
    transition: color .2s ease, opacity .2s ease;
}

.product-index-page-header .breadcrumbs a:hover {
    color: #0f737b !important;
}

.product-index-page-header .s-breadcrumb-arrow {
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: .55;
}

.product-index-page-header .s-breadcrumb-arrow svg {
    width: 15px !important;
    height: 15px !important;
}

/* Tablet */
@media (max-width: 1023px) {
    .product-index-page-header {
        height: 132px !important;
        min-height: 132px !important;
        width: calc(100% - 28px) !important;
        margin: 14px auto 22px !important;
        padding: 0 18px !important;
        border-radius: 20px !important;
    }

    .product-index-page-header .container>.relative {
        min-width: 320px !important;
        padding: 13px 16px !important;
        border-radius: 15px !important;
    }

    .product-index-page-header h2,
    .product-index-page-header h2.line-clamp-2 {
        font-size: 25px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .product-index-page-header {
        height: 116px !important;
        min-height: 116px !important;
        width: calc(100% - 20px) !important;
        margin: 10px auto 18px !important;
        padding: 0 10px !important;
        border-radius: 18px !important;
        box-shadow: 0 8px 24px rgba(15, 39, 71, 0.06) !important;
    }

    .product-index-page-header>.container {
        max-width: 100% !important;
    }

    .product-index-page-header .container>.relative {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 11px 13px 10px 14px !important;
        gap: 4px !important;
        border-right-width: 3px !important;
        border-radius: 14px !important;
        box-shadow: 0 5px 16px rgba(15, 39, 71, 0.055) !important;
    }

    .product-index-page-header h2,
    .product-index-page-header h2.line-clamp-2 {
        font-size: 21px !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
    }

    .product-index-page-header salla-breadcrumb.breadcrumbs,
    .product-index-page-header .breadcrumbs {
        font-size: 11.5px !important;
    }

    .product-index-page-header .s-breadcrumb-arrow {
        width: 17px !important;
        height: 17px !important;
    }

    .product-index-page-header .s-breadcrumb-arrow svg {
        width: 13px !important;
        height: 13px !important;
    }
}

/* شاشات صغيرة جداً */
@media (max-width: 390px) {
    .product-index-page-header {
        width: calc(100% - 16px) !important;
        height: 112px !important;
        min-height: 112px !important;
        margin-top: 8px !important;
    }

    .product-index-page-header h2,
    .product-index-page-header h2.line-clamp-2 {
        font-size: 20px !important;
    }
}

/* =========================================
 تعديل عنوان الرسالة الي تظهر في سلة 
========================================= */

.swal2-popup.swal2-toast {

    background: #ffffff !important;

    border-radius: 18px !important;

    box-shadow:
        0 15px 40px rgba(15, 39, 71, 0.15) !important;

    border: 1px solid rgba(14, 165, 233, 0.15);

}


/* عنوان الرسالة */
.swal2-title {

    color: #0f2747 !important;

    font-size: 18px !important;

    font-weight: 700 !important;

}


/* أيقونة الخطأ */
.swal2-icon.swal2-error {

    border-color: #0ea5e9 !important;

}


.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {

    background-color: #0ea5e9 !important;

}


/* زر الإغلاق */
.swal2-close {

    color: #0f2747 !important;

}



/* شريط الوقت أسفل التنبيه */
.swal2-timer-progress-bar {

    background: #84cc16 !important;

}




/* تغيير ايقونة سلة بايقونة اخرى*/


/* إخفاء أيقونة السلة الأصلية */
#s-cart-icon svg {
    display: none !important;
}


/* إنشاء أيقونة سلة جديدة */
#s-cart-icon {

    width: 30px !important;
    height: 30px !important;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2747' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3h2l2.4 12.2a2 2 0 0 0 2 1.6h7.8a2 2 0 0 0 2-1.6L21 7H6'/%3E%3Ccircle cx='10' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: center;

    background-size: contain;

}



/* تأثير عند المرور */
.s-cart-summary-wrapper:hover #s-cart-icon {

    transform: scale(1.08);

    transition: .3s ease;


}


/* لون الأيقونة عند المرور */
.s-cart-summary-wrapper:hover #s-cart-icon {

    filter:
        brightness(0) saturate(100%) invert(47%) sepia(99%) saturate(1000%) hue-rotate(165deg);

}




/*  */

/* =========================================
   تحسين زر "أضف للسلة" - متجر سلة
   Mobile + Desktop
========================================= */


/* شكل الزر الأساسي */
.s-button-element.s-button-primary {
    background-color: #008060 !important;
    border-color: #008060 !important;
    color: #ffffff !important;
}


/* عند تمرير الماوس */
.s-button-element.s-button-primary:hover {
    background-color: #006b50 !important;
    border-color: #006b50 !important;
}


/* لون أيقونة السلة */
.s-button-element .sicon-cart2 {
    color: #ffffff !important;
}


/* النص داخل الزر */
.s-button-element .s-button-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
}


/* إزالة قص كلمة أضف للسلة */
.s-button-element .overflow-hidden {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: nowrap !important;
}


/* =========================================
   تحسين خاص للجوال
========================================= */

@media (max-width: 768px) {

    /* جعل الزر يأخذ كامل العرض */
    .s-button-element.s-button-wide {
        width: 100% !important;
        min-width: 100% !important;
    }


    /* ارتفاع مناسب للجوال */
    .s-button-element {
        min-height: 48px !important;
    }


    /* منع اختفاء النص */
    .s-button-element span {
        max-width: none !important;
    }


    /* حجم الخط */
    .s-button-element .s-button-text {
        font-size: 15px !important;
        font-weight: 600 !important;
    }


    /* مسافة الأيقونة */
    .s-button-element .sicon-cart2 {
        font-size: 18px !important;
    }

}











/* */


/* =====================================
   تحسين قسم صفقة اليوم - Wafi Trend
===================================== */


/* الحاوية الرئيسية */
.block-content {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border-radius: 24px !important;
    padding: 35px !important;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    position: relative;
}


/* العنوان الصغير عروض وخصومات */
.block-content>div:first-child span {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.15) !important;
    color: #059669 !important;
}


/* النقطة المتحركة */
.block-content .bg-primary {
    background-color: #10b981 !important;
}

.block-content .animate-ping {
    background-color: #10b981 !important;
}


/* العنوان الرئيسي */
.block-content h2 {
    color: #111827 !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
}


/* الوصف */
.block-desc {
    color: #6b7280 !important;
    font-size: 17px !important;
}


/* ===========================
   عداد الوقت
=========================== */

.s-count-down-wrapper {
    margin-top: 10px !important;
}


.s-count-down-list {
    gap: 10px !important;
}


.s-count-down-item {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    min-width: 75px !important;
    padding: 12px 8px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}


.s-count-down-item-value {
    color: #059669 !important;
    font-size: 26px !important;
    font-weight: 800 !important;
}


.s-count-down-item-label {
    color: #6b7280 !important;
    font-size: 12px !important;
}


/* ===========================
   زر تسوق العروض
=========================== */

.btn--main .s-button-element {

    border-radius: 12px !important;
    padding: 14px 35px !important;
    font-weight: 700 !important;

    transition: .3s ease;
}





/* السهم */
.arrow-icon {
    transition: .3s;
}





/* كلمة SALE الخلفية */
.bg-big-text {
    color: transparent !important;
    -webkit-text-stroke: 1px rgba(5, 150, 105, .08);
    font-weight: 900 !important;
}


/* ===========================
   الجوال
=========================== */

@media(max-width:768px) {

    .block-content {
        padding: 20px !important;
        border-radius: 18px !important;
    }


    .block-content h2 {
        font-size: 24px !important;
        text-align: center;
    }


    .block-desc {
        text-align: center;
        font-size: 14px !important;
    }


    .s-count-down-list {
        justify-content: center !important;
        flex-wrap: wrap;
    }


    .s-count-down-item {
        min-width: 62px !important;
        padding: 10px 5px !important;
    }


    .s-count-down-item-value {
        font-size: 20px !important;
    }


    .btn--main .s-button-element {
        width: 100% !important;
    }

}

/* زر تسوق العروض - تنسيق احترافي */

.btn--main {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}


.btn--main .s-button-element {
    min-width: 190px !important;
    height: 52px !important;
    padding: 0 32px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #059669 !important;
    border-color: #059669 !important;
    box-shadow: 0 8px 20px rgba(5, 150, 105, .25);
    transition: all .3s ease;
}


.btn--main .s-button-text {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}


.btn--main .arrow-icon {
    font-size: 16px !important;
    transition: transform .3s ease;
}


/* حركة السهم */
.btn--main:hover .arrow-icon {
    transform: translateX(-5px);
}


/* تأثير عند المرور */
.btn--main .s-button-element:hover {
    background: #047857 !important;

}


/* الجوال */
@media(max-width:768px) {

    .btn--main .s-button-element {
        min-width: 170px !important;
        height: 48px !important;
    }

}



/*  النار*/

.s-block--marquee .marquee__content li span span:last-child::after {

    margin-left: 6px;
}

/*  */
.sicon-earth,
.sicon-earth~div.hidden.lg\:flex {
    display: none !important;
}








/*  */


/* =================================
   Wafi Trend Mobile Menu Clean UI
================================= */


/* اللوحة */
#storemenu-panel {
    width: 88%;
    border-radius: 0 20px 20px 0;
    box-shadow: 0 0 35px rgba(0, 0, 0, .12);
}


/* رأس القائمة */
.side-panel__top {

    border-bottom: 1px solid #eeeeee;
}


.side-panel__top img {
    width: 90px !important;
    height: 90px !important;
    margin: auto;
    object-fit: contain;
}


/* زر الاغلاق */
.close-button {
    width: 34px;
    height: 34px;
    top: 18px;
    right: 18px;
    background: #f5f5f5;
    border-radius: 50%;
}


/* المحتوى */
.side-panel__content {
    padding: 15px 20px;
}


/* القسم الرئيسي */
.mobile-menu .root-level>a {

    min-height: 50px;

    display: flex;

    align-items: center;

    padding: 0 5px;

    border-bottom: 1px solid #f0f0f0;

    font-size: 15px;

    font-weight: 600;

    color: #222;

}


/* عند الضغط */
.mobile-menu .root-level>a:active {

    color: #05ad27;

}



/* سهم التصنيفات */
.mobile-menu .has-children>a:after {

    content: "›";

    font-size: 25px;

    color: #05ad27;

    margin-right: auto;

}



/* القائمة الفرعية */

.mobile-collapsible.sub-menu {

    margin: 5px 0 12px;

    padding: 5px 15px;

    background: #fafafa;

    border-radius: 12px;

}



/* العناصر الداخلية */

.mobile-collapsible .main-menu-item a {

    height: 42px;

    display: flex;

    align-items: center;

    font-size: 14px;

    color: #555;

    border-bottom: 1px solid #eee;

}



/* اخر عنصر بدون خط */

.mobile-collapsible .main-menu-item:last-child a {

    border-bottom: 0;

}


/* عرض الكل */

.submenu__display-all a {

    color: #05ad27 !important;

    font-weight: 700;

}


/* الروابط السفلية */

.secondary-menu-wrap {

    margin-top: 20px;

    border-top: 1px solid #eee;

    padding-top: 15px;

}


.footer-list a {

    display: block;

    padding: 12px 5px;

    font-size: 14px;

    color: #666;

}


/* تحسين الهاتف الصغير */

@media(max-width:480px) {

    #storemenu-panel {

        width: 90%;

    }


    .mobile-menu .root-level>a {

        font-size: 14px;

    }

}






/*  */


/* ================================
   Wafi Trend Premium Footer
================================ */

.store-footer {
    background: #ffffff;
    border-top: 1px solid #eeeeee;
    padding-top: 50px !important;
    padding-bottom: 30px !important;
}

/* توزيع الأعمدة */
.store-footer>.grid {
    align-items: start;
}


/* عناوين الفوتر */
.store-footer h3,
.s-contacts-title,
.collapse-trigger {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #111 !important;
    margin-bottom: 20px !important;
    position: relative;
}


/* خط صغير تحت العنوان */
.store-footer h3:after,
.s-contacts-title:after,
.collapse-trigger:after {
    content: "";
    display: block;
    width: 35px;
    height: 3px;
    background: #05ad27;
    border-radius: 20px;
    margin-top: 10px;
}


/* الروابط */
.footer-menu li a {
    color: #555 !important;
    font-size: 14px !important;
    transition: .3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}


.footer-menu li a:before {
    content: "→";
    color: #05ad27;
    font-weight: bold;
    opacity: 0;
    transform: translateX(10px);
    transition: .3s;
}


.footer-menu li a:hover {
    color: #05ad27 !important;
    transform: translateX(-5px);
}


.footer-menu li a:hover:before {
    opacity: 1;
    transform: none;
}


/* الشعار */
.store-footer img {
    transition: .4s ease;
}


.store-footer img:hover {
    transform: scale(1.05);
}


/* وصف المتجر */
.store-footer .text-gray-600 {
    color: #666 !important;
    line-height: 2 !important;
    font-size: 14px !important;
}


/* التواصل */
.s-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.s-contacts-item {

    background: #fafafa;
    border-radius: 14px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: .3s;

}


.s-contacts-item:hover {

    background: #05ad27;
    color: #fff !important;
    transform: translateY(-3px);

}


.s-contacts-icon {

    width: 38px;
    height: 38px;
    background: #eaffee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;

}


.s-contacts-icon svg {

    width: 20px;
    height: 20px;
    fill: #05ad27;

}


/* شهادات الثقة */
.footer-certificates {

    margin-top: 40px !important;
    padding-top: 25px;
    border-top: 1px solid #eee;

}


.s-trust-badges-wrapper,
.footer-certificates>div>div {

    background: #fafafa;
    padding: 12px 18px;
    border-radius: 18px;
    transition: .3s;

}


.s-trust-badges-wrapper:hover {

    box-shadow: 0 8px 25px rgba(0, 0, 0, .08);

}


/* الواتساب العائم */
.floating-contacts__trigger {


    box-shadow: 0 10px 30px rgba(5, 173, 39, .3);

}


.floating-contacts__item {

    border-radius: 50%;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .12);

}


/* الجوال */
@media(max-width:768px) {


    .store-footer {

        padding-top: 30px !important;

    }


    .store-footer .grid {

        gap: 30px !important;

    }


    .store-footer .text-center img {

        max-width: 150px !important;

    }


    .footer-menu {

        grid-template-columns: 1fr !important;

    }


    .store-footer h3 {

        font-size: 16px !important;

    }


    .s-contacts-item {

        padding: 10px;

    }


}



/*  */


/* =====================================
   Wafi Trend Footer Bottom Premium Bar
===================================== */

.store-footer__bottom-bar {

    background: linear-gradient(135deg,
            #ffffff,
            #fafafa) !important;

    border: 1px solid #eeeeee !important;
    border-radius: 30px !important;

    padding: 18px 30px !important;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .05);

    transition: .3s ease;

}


.store-footer__bottom-bar:hover {

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .08);

}



/* نص الحقوق */

.copyright-text p {

    color: #777 !important;
    font-size: 14px !important;
    margin: 0 !important;

}


.copyright-text a {

    color: #05ad27 !important;
    font-weight: 700 !important;
    transition: .3s;

}


.copyright-text a:hover {

    color: #008d1f !important;

}



/* حاوية طرق الدفع */

.s-payments-list {

    display: flex;
    align-items: center;
    gap: 10px !important;

}



/* بطاقات الدفع */

.s-payments-list-item {

    background: #fff;

    width: 55px !important;
    height: 38px !important;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    border: 1px solid #eeeeee;

    padding: 5px;

    transition: .3s ease;

}


.s-payments-list-item img {

    object-fit: contain;

}



.s-payments-list-item:hover {

    transform: translateY(-4px);

    border-color: #05ad27;

    box-shadow:
        0 8px 20px rgba(5, 173, 39, .15);

}



/* للجوال */

@media(max-width:768px) {

    .store-footer__bottom-bar {

        border-radius: 25px !important;
        padding: 20px !important;
        text-align: center;

    }


    .s-payments-list {

        justify-content: center;

    }


    .s-payments-list-item {

        width: 48px !important;
        height: 34px !important;

    }

}




/*   */

/* =================================
   Floating Contact Button Premium
================================= */

.floating-contacts__trigger {

    width: 60px !important;
    height: 60px !important;

    border-radius: 50% !important;

    background: #05ad27 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 10px 30px rgba(5, 173, 39, .35);

    position: relative;

    transition: .35s ease;

    border: none !important;

}


/* أيقونة المحادثة */

.floating-contacts__trigger .opened-icon,
.floating-contacts__trigger .closed-icon {

    font-size: 26px !important;

    color: #fff !important;

}


/* تأثير النبض */

.floating-contacts__trigger:before {

    content: "";

    position: absolute;

    inset: -6px;

    border-radius: 50%;

    background: #05ad27;

    opacity: .25;

    animation: wafiPulse 2s infinite;

    z-index: -1;

}



@keyframes wafiPulse {

    0% {

        transform: scale(1);

        opacity: .35;

    }


    70% {

        transform: scale(1.35);

        opacity: 0;

    }


    100% {

        opacity: 0;

    }

}


/* عند المرور */

.floating-contacts__trigger:hover {

    transform: translateY(-5px) scale(1.08);

    box-shadow:
        0 15px 40px rgba(5, 173, 39, .45);

}



/* القائمة المنبثقة */

.floating-contact-list {

    gap: 12px !important;

}


.floating-contacts__item {

    width: 48px !important;

    height: 48px !important;



    background: #fff !important;



    display: flex;





    transition: .3s ease;

}


.floating-contacts__item:hover {

    transform: translateY(-4px) scale(1.1);

}


/* النص الجانبي */

.tooltip {

    background: #111 !important;

    color: #fff !important;

    border-radius: 8px !important;

    padding: 6px 12px !important;

    font-size: 13px !important;

}



@media(max-width:768px) {

    .floating-contacts__trigger {

        width: 55px !important;
        height: 55px !important;

    }


    .floating-contacts__trigger .opened-icon {

        font-size: 23px !important;

    }

}


/* =====================================
   Floating Contact Items Premium Style
===================================== */


/* ترتيب القائمة */

.floating-contact-list {

    display: flex !important;
    flex-direction: column;
    gap: 14px !important;

}


/* العناصر */

.floating-contacts__item {

    width: 52px !important;
    height: 52px !important;

    background: #ffffff !important;

    border-radius: 50% !important;

    display: flex !important;

    align-items: center;
    justify-content: center;

    position: relative;

    border: 1px solid #eeeeee;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .12);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

}



/* الأيقونات */

.floating-contacts__item i {

    font-size: 24px !important;

    color: #05ad27 !important;

    transition: .3s ease;

}



/* واتساب */

.floating-contact-list li:first-child .floating-contacts__item:hover {

    background: #25D366 !important;

}


.floating-contact-list li:first-child i {

    color: #25D366 !important;

}


.floating-contact-list li:first-child .floating-contacts__item:hover i {

    color: #fff !important;

}



/* الجوال */

.floating-contact-list li:nth-child(2) .floating-contacts__item:hover {

    background: #2196f3 !important;

}


.floating-contact-list li:nth-child(2) i {

    color: #2196f3 !important;

}


.floating-contact-list li:nth-child(2) .floating-contacts__item:hover i {

    color: #fff !important;

}



/* البريد */

.floating-contact-list li:nth-child(3) .floating-contacts__item:hover {

    background: #ff5252 !important;

}


.floating-contact-list li:nth-child(3) i {

    color: #ff5252 !important;

}


.floating-contact-list li:nth-child(3) .floating-contacts__item:hover i {

    color: #fff !important;

}



/* حركة الظهور */

.floating-contacts__item:hover {

    transform:
        translateY(-5px) scale(1.1) !important;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .18);

}



/* التلميح Tooltip */

.floating-contacts__item .tooltip {

    position: absolute;

    right: 65px;

    background: #111 !important;

    color: #fff !important;

    padding: 7px 14px !important;

    border-radius: 10px;

    font-size: 13px !important;

    font-weight: 600;

    white-space: nowrap;

    opacity: 0;

    transform:
        translateX(10px);

    pointer-events: none;

    transition: .3s ease;

}


/* سهم صغير */

.floating-contacts__item .tooltip:after {

    content: "";

    position: absolute;

    left: -5px;

    top: 50%;

    transform: translateY(-50%);

    border-width: 5px;

    border-style: solid;

    border-color: transparent #111 transparent transparent;

}



.floating-contacts__item:hover .tooltip {

    opacity: 1;

    transform: translateX(0);

}



/* الجوال */

@media(max-width:768px) {

    .floating-contacts__item {

        width: 48px !important;
        height: 48px !important;

    }


    .floating-contacts__item i {

        font-size: 21px !important;

    }


    .floating-contacts__item .tooltip {

        display: none;

    }

}


@media(max-width:768px) {

    .floating-contacts {
        gap: 20px !important;
    }

    .floating-contact-list {
        transform: translateY(-15px);
    }

}


/*  */

/* إظهار نص العروض كاملًا في بطاقات المنتجات */
.product-entry__promotion_title {
    box-sizing: border-box !important;
    max-width: 100% !important;
    width: fit-content !important;
    min-width: 0;
    padding: 5px 10px !important;
    border: 1px solid rgba(225, 107, 82, .2);
    border-radius: 999px;
    background: #fff2ed;
    color: #b95540 !important;
    box-shadow: 0 2px 8px rgba(225, 107, 82, .1);
    font-size: clamp(11px, .75rem, 13px);
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
    vertical-align: middle;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    overflow-wrap: anywhere;
    word-break: normal;
}


/* تنسيق أسماء المنتجات بشكل احترافي */
.product-entry__title {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    line-height: 1.7 !important;
    height: auto !important;
    max-height: calc(1.7em * 4) !important;
}



/* إخفاء الوصف الفرعي للمنتج من بطاقات المنتجات */
.product-entry__subtitle {
    display: none !important;
}

/* إخفاء حقل تحديد الكمية */
.center-between:has(salla-quantity-input),
salla-quantity-input,
.s-quantity-input {
    display: none !important;
}

/* استثناء صفحة وسلة المشتريات لضمان إمكانية تعديل الكميات داخل السلة */
.page-cart salla-quantity-input,
salla-cart salla-quantity-input,
.cart-item salla-quantity-input,
.s-cart-summary salla-quantity-input {
    display: inline-flex !important;
}


@media (max-width: 767px) {

    /* تصغير زر أضف للسلة */
    salla-button .s-button-element.s-button-wide {
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
    }

    /* إخفاء أيقونة السلة */
    salla-button .s-button-text>.sicon-cart2 {
        display: none !important;
    }

    /* تصغير خط أضف للسلة */
    salla-button .s-button-text {
        font-size: 12px !important;
        line-height: 1.2 !important;
        gap: 0 !important;
    }

    /* منع النص من الخروج */
    salla-button .s-button-text .overflow-hidden {
        font-size: 12px !important;
        max-width: 100% !important;
        white-space: nowrap !important;
    }
}



@media (max-width: 768px) {

    /* عرض القائمة الجانبية */
    #storemenu-panel.storemenu-panel {
        width: 86vw !important;
        max-width: 340px !important;
    }

    /* الجزء العلوي */
    #storemenu-panel .side-panel__top {
        padding: 8px 14px 6px !important;
        min-height: auto !important;
        text-align: center;
    }

    /* الشعار */
    #storemenu-panel .navbar-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
    }

    #storemenu-panel .navbar-brand img {
        width: auto !important;
        height: 70px !important;
        max-width: 140px !important;
        object-fit: contain;
        margin: 0 auto !important;
    }

    /* القائمة */
    #storemenu-panel .main-menu {
        margin: 0 !important;
        padding: 0 8px !important;
    }

    /* الأقسام الرئيسية */
    #storemenu-panel .main-menu-item>a {
        min-height: 36px !important;
        padding: 7px 9px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    #storemenu-panel .main-menu-item.root-level>a {
        font-size: 13px !important;
        font-weight: 600 !important;
    }

    /* القوائم الفرعية */
    #storemenu-panel .sub-menu {
        margin: 2px 6px 4px !important;
    }

    #storemenu-panel .sub-menu ul {
        padding: 2px 6px !important;
    }

    #storemenu-panel .sub-menu li>a {
        min-height: 30px !important;
        padding: 5px 9px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    /* الروابط السفلية */
    #storemenu-panel .secondary-menu-wrap {
        padding: 7px 12px 10px !important;
    }

    #storemenu-panel .secondary-menu-wrap a {
        margin-bottom: 8px !important;
        font-size: 12px !important;
    }

    /* زر الإغلاق */
    #storemenu-panel .close-button {
        transform: scale(0.8);
        transform-origin: center;
    }
}



@media (max-width: 768px) {

    /* منطقة الروابط السفلية */
    #storemenu-panel .secondary-menu-wrap {


        background: transparent !important;
    }

    /* البطاقة السفلية */


    /* الروابط */
    #storemenu-panel #widget-storemenu>a {








        background: #ffffff !important;
        border: 1px solid #eeeeee !important;








        transition: all 0.2s ease;
    }

    /* عند الضغط */
    #storemenu-panel #widget-storemenu>a:active {
        transform: scale(0.97);
        background: #f2f7f7 !important;
    }

    /* عنوان المدونة بلون الهوية */


    /* بقية السياسات */


}


@media (max-width: 768px) {

    #storemenu-panel .secondary-menu-wrap {
        margin-top: auto !important;
        padding: 12px !important;

        /* نزول أكثر للأسفل */
        transform: translateY(18px) translateX(6px);

        /* تحريك بسيط لليمين */
        position: relative;
        right: -4px;
    }

    #storemenu-panel #widget-storemenu {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 7px !important;

        padding: 10px !important;
        margin: 0 !important;

        background: #f7f9f9 !important;
        border: 1px solid #edf1f1 !important;
        border-radius: 14px !important;

        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
    }

    #storemenu-panel #widget-storemenu>a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        min-height: 38px !important;
        margin: 0 !important;
        padding: 7px 8px !important;

        background: #fff !important;
        border: 1px solid #eee !important;
        border-radius: 9px !important;

        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        text-align: center !important;

        opacity: 1 !important;
    }

    #storemenu-panel #widget-storemenu>a:first-child {
        color: #15919b !important;
        font-weight: 600 !important;
    }

    #storemenu-panel #widget-storemenu>a:not(:first-child) {
        color: #555 !important;
    }
}

@media (max-width: 768px) {
    #storemenu-panel .close-button {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
    }


}
















@media (max-width: 768px) {

    /* القسم كامل */
    .s-offer-wrapper {
        width: 100% !important;
        margin: 16px 0 20px !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }

    .s-offer-wrapper #offers-slider {
        width: 100% !important;
        display: block !important;
    }


    /* =========================================
       عنوان القسم
       ========================================= */

    .s-offer-wrapper .s-slider-block__title {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        margin: 0 0 12px !important;
        padding: 0 !important;

        text-align: center !important;
    }

    .s-offer-wrapper .s-slider-block__title-right {
        width: 100% !important;
        text-align: center !important;
    }

    .s-offer-wrapper .s-slider-block__title-right h2 {
        margin: 0 0 3px !important;

        font-size: 16px !important;
        font-weight: 800 !important;
        line-height: 1.4 !important;

        color: #174d50 !important;

        text-align: center !important;
    }

    .s-offer-wrapper .s-slider-block__title-right p {
        margin: 0 auto !important;

        font-size: 11.5px !important;
        line-height: 1.5 !important;
        font-weight: 400 !important;

        color: #778589 !important;

        text-align: center !important;
    }


    /* إخفاء الأسهم عندما لا يوجد أكثر من عرض */
    .s-offer-wrapper .s-slider-block__title-left,
    .s-offer-wrapper .swiper-button-disabled,
    .s-offer-wrapper .swiper-button-lock {
        display: none !important;
    }


    /* =========================================
       السلايدر
       ========================================= */

    .s-offer-wrapper .s-slider-container {
        width: 100% !important;
        padding: 2px 0 6px !important;
        overflow: hidden !important;
    }

    .s-offer-wrapper .s-slider-swiper-wrapper {
        align-items: stretch !important;
    }

    .s-offer-wrapper .swiper-slide,
    .s-offer-wrapper .s-offer-slide-one-fourth {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        height: auto !important;
    }


    /* =========================================
       بطاقة العرض
       ========================================= */

    .s-offer-wrapper .s-offer-card {
        position: relative !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: calc(100% - 8px) !important;
        max-width: 370px !important;

        min-height: 170px !important;

        margin: 0 auto !important;
        padding: 18px 16px 16px !important;

        text-align: center !important;

        background:
            linear-gradient(145deg,
                rgba(143, 198, 69, 0.11) 0%,
                rgba(43, 181, 218, 0.07) 52%,
                #ffffff 100%) !important;

        border: 1px solid rgba(43, 181, 218, 0.16) !important;
        border-radius: 20px !important;

        box-shadow:
            0 7px 22px rgba(23, 77, 80, 0.07),
            0 2px 5px rgba(0, 0, 0, 0.025) !important;

        overflow: hidden !important;
    }


    /* الخط الملون العلوي */
    .s-offer-wrapper .s-offer-card::before {
        content: "" !important;

        position: absolute !important;
        top: 0 !important;
        left: 50% !important;

        width: 72px !important;
        height: 4px !important;

        transform: translateX(-50%) !important;

        background: linear-gradient(90deg,
                #8fc645 0%,
                #2bb5da 100%) !important;

        border-radius: 0 0 10px 10px !important;
    }


    /* إزالة أي تأثير قديم */
    .s-offer-wrapper .s-offer-card::after {
        display: none !important;
    }


    /* =========================================
       أيقونة الهدية
       ========================================= */

    .s-offer-wrapper .s-offer-card-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 50px !important;
        height: 50px !important;

        margin: 0 auto 10px !important;
        padding: 0 !important;

        flex: none !important;

        background: linear-gradient(135deg,
                #8fc645 0%,
                #2bb5da 100%) !important;

        border-radius: 15px !important;

        box-shadow:
            0 5px 14px rgba(43, 181, 218, 0.20) !important;
    }

    .s-offer-wrapper .s-offer-card-icon i {
        margin: 0 !important;

        font-size: 22px !important;

        color: #ffffff !important;
    }


    /* =========================================
       محتوى البطاقة
       ========================================= */

    .s-offer-wrapper .s-offer-card-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
    }


    /* اسم العرض */
    .s-offer-wrapper .s-offer-card-title {
        display: block !important;

        width: 100% !important;

        margin: 0 0 5px !important;

        font-size: 14.5px !important;
        font-weight: 800 !important;
        line-height: 1.5 !important;

        color: #174d50 !important;

        text-align: center !important;

        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }


    /* الوصف */
    .s-offer-wrapper .s-offer-card-description {
        display: block !important;

        width: 100% !important;
        max-width: 305px !important;

        margin: 0 auto 11px !important;

        font-size: 11.5px !important;
        font-weight: 400 !important;
        line-height: 1.65 !important;

        color: #65777a !important;

        text-align: center !important;

        white-space: normal !important;
        overflow: visible !important;
    }


    /* =========================================
       المنتجات المشمولة
       ========================================= */

    .s-offer-wrapper .s-offer-card-details {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .s-offer-wrapper .s-offer-products-link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-height: 34px !important;

        margin: 0 auto !important;
        padding: 7px 16px !important;

        background:
            linear-gradient(90deg,
                rgba(143, 198, 69, 0.12),
                rgba(43, 181, 218, 0.09)) !important;

        border: 1px solid rgba(143, 198, 69, 0.28) !important;
        border-radius: 10px !important;

        cursor: pointer !important;

        transition:
            transform 0.18s ease,
            background 0.18s ease !important;
    }

    .s-offer-wrapper .s-offer-products-link-text {
        font-size: 11px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        color: #174d50 !important;

        text-align: center !important;
    }

    .s-offer-wrapper .s-offer-products-link:active {
        transform: scale(0.97) !important;

        background:
            linear-gradient(90deg,
                rgba(143, 198, 69, 0.20),
                rgba(43, 181, 218, 0.15)) !important;
    }


    /* =========================================
       جوالات أصغر
       ========================================= */

    @media (max-width: 390px) {

        .s-offer-wrapper {
            padding: 0 10px !important;
        }

        .s-offer-wrapper .s-offer-card {
            min-height: 160px !important;
            padding: 16px 13px 14px !important;
            border-radius: 18px !important;
        }

        .s-offer-wrapper .s-offer-card-icon {
            width: 46px !important;
            height: 46px !important;
        }

        .s-offer-wrapper .s-offer-card-title {
            font-size: 14px !important;
        }

        .s-offer-wrapper .s-offer-card-description {
            font-size: 11px !important;
        }
    }
}

/* ================================
   زر واتساب في صفحة السلة
   ================================ */

/* عند ظهور شريط إجمالي السلة */
body:has(.s-cart-summary-card-bar) .wa-s-n {
    bottom: 185px !important;
    left: 20px !important;
    right: auto !important;
    transition: bottom 0.35s ease !important;
}

/* عند فتح "ملخص الطلب" ارفع زر واتساب أكثر */
body:has(.s-cart-summary-card-chevron[aria-expanded="true"]) .wa-s-n {
    bottom: 330px !important;
}


/* الجوال */
@media (max-width: 768px) {

    body:has(.s-cart-summary-card-bar) .wa-s-n {
        bottom: 185px !important;
        left: 20px !important;
        right: auto !important;
    }

    /* عندما يكون ملخص الطلب مفتوحًا */
    body:has(.s-cart-summary-card-chevron[aria-expanded="true"]) .wa-s-n {
        bottom: 330px !important;
    }
}

.side-panel__top {
    padding: 20px 0 15px;
    border-bottom: none !important;
}


@media (max-width: 768px) {
    .close-button.menu-close {
        background: transparent !important;
        box-shadow: none !important;








        border: none !important;
    }
}






/* شارة نسبة الخصم */



/* شارة نسبة الخصم */
.wafi-discount-percent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    margin-inline-start: 6px;
    border-radius: 999px;
    background: #f55157;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

/* ترتيب السعر مع نسبة الخصم */
.product-entry__price.product-entry--sale {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}






/* ====== تثبيت أبعاد الكروت ومنع تمددها أو تغير حجمها عند التحميل ====== */
salla-products-slider .swiper-wrapper,
custom-salla-products-slider .swiper-wrapper,
.products-slider .swiper-wrapper,
.s-slider-swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

@media (max-width: 767.98px) {
    /* 1) حذف الفراغ الجانبي للصفحة والحاوية حتى تلتصق الكروت بحواف الشاشة */
    main,
    #mainContent,
    .s-container,
    .page-container,
    .products-container,
    .s-products-container,
    salla-products-list,
    salla-products-slider,
    custom-salla-products-slider,
    salla-products-slider .swiper,
    custom-salla-products-slider .swiper {
        padding-inline: 0 !important;
    }

    /* 2) تثبيت شبكة المنتجات (عمودين متساويين وثابتين من أول لحظة لمنع كبر الحجم ثم صغره) */
    .s-products-grid,
    .s-products-container .grid,
    salla-products-list [class*="grid-cols"],
    salla-products-slider [class*="grid-cols"],
    salla-products-list .grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    /* 3) تثبيت عرض شرائح السلايدر فوراً عند التحميل لمنع التكبير المفاجئ والقفز */
    salla-products-slider .swiper-slide,
    custom-salla-products-slider .swiper-slide,
    .products-slider .swiper-slide,
    .s-block--animated-products .s-products-slider-card.swiper-slide {
        width: 148px !important;
        min-width: 148px !important;
        max-width: 148px !important;
        flex: 0 0 148px !important;
        box-sizing: border-box !important;
        margin-inline-end: 6px !important;
    }

    /* 4) الكارد يملأ كامل الخانة المتاحة له بدون أي تمدد خارجي */
    custom-salla-product-card.product-entry,
    .product-entry.product-block {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 768px) {
    /* تثبيت كروت السلايدر في شاشات الكمبيوتر فوراً لمنع التمدد عند فتح الصفحة */
    salla-products-slider .swiper-slide,
    custom-salla-products-slider .swiper-slide,
    .products-slider .swiper-slide,
    .s-block--animated-products .s-products-slider-card.swiper-slide {
        width: 240px !important;
        max-width: 240px !important;
        flex: 0 0 240px !important;
        box-sizing: border-box !important;
    }
}

/* =========================================================
   Wafi Trend Premium UI Layer
   Safe overrides for the live Salla theme
   ========================================================= */

:root {
    --wafi-primary: #006b73;
    --wafi-primary-dark: #004f5d;
    --wafi-accent: #e16b52;
    --wafi-success: #15945a;
    --wafi-ink: #14343d;
    --wafi-muted: #6d7f84;
    --wafi-surface: #ffffff;
    --wafi-soft: #f4f8f7;
    --wafi-line: #e3eceb;
    --wafi-radius-sm: 12px;
    --wafi-radius-md: 20px;
    --wafi-radius-lg: 28px;
    --wafi-shadow-sm: 0 6px 18px rgba(20, 52, 61, .06);
    --wafi-shadow-md: 0 16px 38px rgba(20, 52, 61, .10);
    --wafi-ease: cubic-bezier(.22, .61, .36, 1);
}

html {
    scroll-behavior: smooth;
}

body#app {
    background: #fff;
    color: var(--wafi-ink);
    overflow-x: hidden;
    line-height: 1.7;
}

body#app :focus-visible {
    outline: 3px solid rgba(21, 148, 90, .38);
    outline-offset: 3px;
}

/* Header: sticky without changing any Salla controls */
.store-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1px 0 rgba(20, 52, 61, .08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: box-shadow .25s ease, background-color .25s ease;
}

.store-header #main-nav {
    transition: min-height .25s ease;
}

.store-header .main-nav__content {
    min-height: 88px;
    gap: 24px;
    transition: min-height .25s ease;
}

.store-header .navbar-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.store-header .navbar-brand img {
    width: 76px !important;
    height: 76px !important;
    object-fit: contain;
    transition: transform .25s var(--wafi-ease);
}

.store-header .navbar-brand:hover img {
    transform: scale(1.04);
}

body.wafi-scrolled .store-header {
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 8px 28px rgba(20, 52, 61, .10);
}

body.wafi-scrolled .store-header .main-nav__content {
    min-height: 70px;
}

body.wafi-scrolled .store-header .navbar-brand img {
    width: 60px !important;
    height: 60px !important;
}

.header__search {
    min-width: 240px;
}

.header__search>salla-search {
    display: block;
    width: 100%;
    border: 1px solid var(--wafi-line);
    border-radius: 999px;
    background: var(--wafi-soft);
    box-shadow: inset 0 0 0 1px transparent;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.header__search>salla-search:hover,
.header__search>salla-search:focus-within {
    background: #fff;
    border-color: rgba(0, 107, 115, .42);
    box-shadow: 0 0 0 4px rgba(0, 107, 115, .08);
}

.header-icon-button,
.header-rounded-btn,
#storemenu-panel-trigger {
    min-width: 44px;
    min-height: 44px;
    border-radius: 14px;
    transition: color .2s ease, background-color .2s ease, transform .2s ease;
}

.header-icon-button:hover,
.header-rounded-btn:hover,
#storemenu-panel-trigger:hover {
    color: var(--wafi-primary);
    background: var(--wafi-soft);
}

.header-icon-button:active,
.header-rounded-btn:active,
#storemenu-panel-trigger:active {
    transform: scale(.96);
}

.quicklinks {
    border-top: 1px solid rgba(20, 52, 61, .06);
    border-bottom: 1px solid var(--wafi-line);
    background: #fff !important;
}

.quicklinks:before {
    display: none;
}

.quicklinks__inner {
    min-height: 58px !important;
}

.quicklinks .main-menu {
    gap: 8px;
}

.quicklinks .main-menu-item>a {
    min-height: 42px;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--wafi-ink);
    font-size: 14px;
    transition: background-color .2s ease, color .2s ease;
}

.quicklinks .main-menu-item>a:hover {
    color: var(--wafi-primary);
    background: var(--wafi-soft);
}

.quicklinks .main-menu-item.has-children>a:after {
    border-color: var(--wafi-success);
}

/* Homepage rhythm */
.s-block {
    scroll-margin-top: 118px;
}

.s-block--marquee {
    margin-top: 26px;
}

.s-block--marquee .marquee__content {
    border-radius: var(--wafi-radius-md);
    box-shadow: var(--wafi-shadow-sm);
}

.s-block--fixed-banner {
    margin-block: 28px;
}

.s-block--fixed-banner .banner {
    display: block;
    border-radius: var(--wafi-radius-lg);
    box-shadow: var(--wafi-shadow-sm);
}

.s-block--fixed-banner .banner img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 150px;
    object-fit: cover;
    transition: transform .55s var(--wafi-ease), filter .35s ease;
}

.s-block--fixed-banner .banner:hover img {
    transform: scale(1.018);
    filter: saturate(1.04);
}

.s-block__title {
    margin-bottom: 26px !important;
}

.s-block__title h2 {
    color: var(--wafi-ink);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.35;
}

.s-block__title p {
    max-width: 680px;
    margin-inline: auto;
    color: var(--wafi-muted);
    font-size: 15px;
    line-height: 1.9;
}

.s-block__title .right-side>span {
    color: var(--wafi-primary);
    background: var(--wafi-soft) !important;
    border-color: var(--wafi-line) !important;
}

.s-block__title .bg-primary,
.s-block__title .animate-ping {
    background-color: var(--wafi-success) !important;
}

/* Categories */
.s-block--categories {
    padding-block: clamp(42px, 6vw, 82px) !important;
}

#main-links-2 .slide--cat-entry {
    min-height: 250px;
    padding: 18px !important;
    border: 1px solid var(--wafi-line);
    border-radius: var(--wafi-radius-md);
    background: #fff;
    box-shadow: var(--wafi-shadow-sm);
    transition: transform .3s var(--wafi-ease), box-shadow .3s ease, border-color .3s ease;
}

#main-links-2 .slide--cat-entry:hover {
    border-color: rgba(0, 107, 115, .24);
    box-shadow: var(--wafi-shadow-md);
    transform: translateY(-5px);
}

#main-links-2 .slide--cat-entry .item-img {
    overflow: hidden;
    border-radius: 16px;
    background: var(--wafi-soft);
}

#main-links-2 .slide--cat-entry .item-img>span {
    display: none;
}

#main-links-2 .slide--cat-entry .item-img img {
    aspect-ratio: 4 / 5;
    width: 100%;
    object-fit: cover;
    transition: transform .55s var(--wafi-ease);
}

#main-links-2 .slide--cat-entry:hover .item-img img {
    transform: scale(1.05);
}

#main-links-2 .slide--cat-entry .item-content {
    padding-top: 14px;
    transform: none;
}

#main-links-2 .slide--cat-entry .item-content h2 {
    color: var(--wafi-ink) !important;
    font-size: 17px !important;
    font-weight: 800;
    line-height: 1.5;
}

/* Daily offer / countdown */
.s-block--today-deal {
    margin-block: 12px 32px;
}

.s-block--today-deal>.container {
    min-height: 0;
}

.s-block--today-deal .block-content {
    position: relative;
    border: 1px solid #d9ece7 !important;
    border-radius: var(--wafi-radius-lg) !important;
    background: linear-gradient(135deg, #f5fbf8 0%, #fff 62%, #fff8f3 100%) !important;
    box-shadow: var(--wafi-shadow-sm) !important;
}

.s-block--today-deal .block-content h2 {
    color: var(--wafi-ink) !important;
    font-size: clamp(25px, 3vw, 38px) !important;
}

.s-block--today-deal .block-content .block-desc {
    color: var(--wafi-muted) !important;
}

.s-block--today-deal .s-count-down-item {
    min-width: 70px !important;
    border-color: var(--wafi-line) !important;
    border-radius: 14px !important;
    box-shadow: none;
}

.s-block--today-deal .s-count-down-item-value {
    color: var(--wafi-primary) !important;
}

.btn--main .s-button-element {
    min-height: 48px;
    border: 0 !important;
    border-radius: 13px !important;
    background: var(--wafi-primary) !important;
    box-shadow: 0 8px 18px rgba(0, 107, 115, .18) !important;
    transition: transform .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.btn--main .s-button-element:hover {
    background: var(--wafi-primary-dark) !important;
    box-shadow: 0 12px 26px rgba(0, 107, 115, .22) !important;
    transform: translateY(-2px);
}

/* Testimonials and native store features */
.s-block--bundle-store-features,
.s-block--testimonials {
    margin-block: 28px;
}

.s-block--bundle-store-features {
    padding-block: 22px;
}

.s-block--testimonials {
    padding-block: clamp(42px, 6vw, 78px) !important;
    background: var(--wafi-soft);
}

.s-block--testimonials>.container {
    border-radius: var(--wafi-radius-lg);
}

.s-block--testimonials .swiper-slide>div,
.s-block--testimonials .swiper-slide article {
    border: 1px solid var(--wafi-line);
    border-radius: var(--wafi-radius-md);
    background: #fff;
    box-shadow: var(--wafi-shadow-sm);
}

/* Footer */
.store-footer-wrap {
    margin-top: 52px !important;
    border-top: 1px solid var(--wafi-line);
    background: #fbfdfd;
}

.store-footer {
    padding-top: 58px !important;
}

.store-footer h3,
.store-footer .s-contacts-title,
.store-footer .collapse-trigger {
    color: var(--wafi-ink) !important;
}

.store-footer h3:after,
.store-footer .s-contacts-title:after,
.store-footer .collapse-trigger:after {
    background: var(--wafi-success);
}

.store-footer .footer-menu li a {
    color: var(--wafi-muted) !important;
    transition: color .2s ease, transform .2s ease;
}

.store-footer .footer-menu li a:hover {
    color: var(--wafi-primary) !important;
    transform: translateX(-4px);
}

.store-footer .s-contacts-item {
    border: 1px solid var(--wafi-line);
    background: #fff;
}

.store-footer .s-contacts-item:hover {
    border-color: var(--wafi-success);
    background: #f1faf5;
    color: var(--wafi-ink) !important;
}

/* Floating contact / back to top */
.floating-contacts__trigger {
    width: 58px !important;
    height: 58px !important;
    border: 4px solid #fff !important;
    box-shadow: 0 10px 28px rgba(21, 148, 90, .28) !important;
}

.wafi-back-to-top {
    position: fixed;
    z-index: 45;
    right: 24px;
    bottom: 24px;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wafi-line);
    border-radius: 14px;
    background: #fff;
    color: var(--wafi-primary);
    box-shadow: var(--wafi-shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}

.wafi-back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.wafi-back-to-top:hover {
    background: var(--wafi-soft);
}

.wafi-back-to-top span {
    font-size: 22px;
    line-height: 1;
}

/* Mobile-first bottom navigation, connected to Salla native triggers */
.wafi-mobile-nav {
    display: none;
}

/* Low-cost reveal: only sections, never product internals */
.wafi-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s var(--wafi-ease), transform .65s var(--wafi-ease);
}

.wafi-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .wafi-reveal {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 1023px) {
    .store-header .main-nav__content {
        min-height: 74px;
        gap: 12px;
    }

    .store-header .navbar-brand img {
        width: 64px !important;
        height: 64px !important;
    }

    .s-block--animated-products .product-entry__title {
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    body#app {
        padding-bottom: 76px;
    }

    .store-header {
        position: sticky;
    }

    .store-header .main-nav__content {
        min-height: 64px;
    }

    .store-header .navbar-brand img {
        width: 54px !important;
        height: 54px !important;
    }

    body.wafi-scrolled .store-header .navbar-brand img {
        width: 50px !important;
        height: 50px !important;
    }

    .header__icons {
        gap: 3px !important;
    }

    .header-rounded-btn,
    .header-icon-button,
    #storemenu-panel-trigger {
        min-width: 42px;
        min-height: 42px;
    }

    .s-block--marquee {
        margin-top: 14px;
    }

    .s-block--fixed-banner {
        margin-block: 16px;
    }

    .s-block--fixed-banner .banner {
        border-radius: 18px;
    }

    .s-block__title {
        margin-bottom: 18px !important;
    }

    .s-block__title h2 {
        font-size: 24px;
    }

    .s-block__title p {
        padding-inline: 10px;
        font-size: 13px;
    }

    .s-block--categories {
        padding-block: 38px !important;
    }

    #main-links-2 .slide--cat-entry {
        min-height: 208px;
        padding: 12px !important;
        border-radius: 17px;
    }

    #main-links-2 .slide--cat-entry .item-content h2 {
        font-size: 14px !important;
    }

    .s-block--today-deal .block-content {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    .s-block--today-deal .s-count-down-list {
        gap: 7px !important;
    }

    .s-block--today-deal .s-count-down-item {
        min-width: 58px !important;
        padding: 9px 5px !important;
    }

    .s-block--today-deal .s-count-down-item-value {
        font-size: 20px !important;
    }

    .s-block--animated-products {
        padding-block: 38px !important;
    }

    .s-block--animated-products .product-entry__image {
        margin: 7px;
    }

    .s-block--animated-products .product-entry__content,
    .s-block--animated-products .product-entry__info {
        padding-inline: 10px;
    }

    .s-block--animated-products .product-entry__title {
        min-height: 4.8em;
        font-size: 12px;
        line-height: 1.55;
    }

    .s-block--animated-products .sale-price,
    .s-block--animated-products .price {
        font-size: 15px;
    }

    .s-block--animated-products salla-button {
        margin: 9px 8px 10px;
    }

    .s-block--animated-products .s-button-element {
        min-height: 40px;
    }

    .s-block--animated-products .s-button-text {
        font-size: 12px !important;
    }

    .s-block--testimonials {
        padding-block: 38px !important;
    }

    .store-footer {
        padding-top: 38px !important;
    }

    .floating-contacts__trigger {
        width: 54px !important;
        height: 54px !important;
    }

    .wafi-mobile-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        min-height: 68px;
        padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
        border-top: 1px solid rgba(20, 52, 61, .10);
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 -8px 24px rgba(20, 52, 61, .10);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .wafi-mobile-nav__item {
        position: relative;
        display: inline-flex;
        min-width: 0;
        min-height: 58px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        border: 0;
        border-radius: 12px;
        background: transparent;
        color: #53666b;
        font-family: inherit;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.3;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: color .2s ease, background-color .2s ease, transform .2s ease;
    }

    .wafi-mobile-nav__item svg {
        width: 21px;
        height: 21px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.9;
        transition: transform .2s ease;
    }

    .wafi-mobile-nav__item[data-nav-key="categories"] svg {
        fill: currentColor;
        stroke-width: 0;
    }

    .wafi-mobile-nav__item.is-active {
        color: var(--wafi-primary);
        background: rgba(0, 107, 115, .07);
    }

    .wafi-mobile-nav__item.is-active:before {
        position: absolute;
        top: 0;
        right: 22%;
        left: 22%;
        height: 3px;
        border-radius: 0 0 6px 6px;
        background: var(--wafi-primary);
        content: "";
    }

    .wafi-mobile-nav__item:active {
        transform: scale(.94);
    }

    .wafi-mobile-nav__item:active svg,
    .wafi-mobile-nav__item:focus-visible svg {
        transform: translateY(-1px);
    }

    body:has(.s-cart-summary-card-bar) .wafi-mobile-nav {
        display: none;
    }

    .wafi-back-to-top {
        right: 16px;
        bottom: 18px;
        width: 42px;
        height: 42px;
    }
}

@media (max-width: 390px) {
    .wafi-mobile-nav {
        min-height: 64px;
        padding-top: 4px;
    }

    .wafi-mobile-nav__item {
        min-height: 54px;
        font-size: 10px;
    }

    .wafi-mobile-nav__item svg {
        width: 19px;
        height: 19px;
    }

    .store-header .main-nav__content {
        gap: 6px;
    }

    .store-header .navbar-brand img {
        width: 48px !important;
        height: 48px !important;
    }

    .header-icon-button,
    .header-rounded-btn,
    #storemenu-panel-trigger {
        min-width: 38px;
        min-height: 38px;
    }
}





h2 {
    width: fit-content;
    margin: 0 auto;
}

/* =========================================================
   WAFI TREND — PHASE 1
   Design System Extensions + Product Page (Premium)
   Built on confirmed real markup from Salla "Raed" theme
   source (src/views/pages/product/single.twig) + the
   existing --wafi-* tokens already defined in style.css
   (search for "Wafi Trend Premium UI Layer" in your file).

   HOW TO INSTALL:
   Paste this block at the END of your existing custom CSS
   file in Salla (Online Store → Design → Custom Code → CSS).
   Do NOT replace anything — just append.
========================================================= */

/* ---------------------------------------------------------
   1) Design Tokens — small additions only (kept consistent
      with your existing --wafi-* variables, not a new system)
--------------------------------------------------------- */
:root {
    --wafi-danger: #c23a3a;
    --wafi-price-size: clamp(22px, 2.4vw, 30px);
}

/* ---------------------------------------------------------
   2) Breadcrumbs (container--breadcrumbs / .breadcrumbs /
      <salla-breadcrumb>) — real classes from single.twig
--------------------------------------------------------- */
.container--breadcrumbs .breadcrumbs {
    padding-block: 4px;
    font-size: 13px;
    color: var(--wafi-muted);
}

.container--breadcrumbs salla-breadcrumb a {
    color: var(--wafi-primary);
    font-weight: 600;
    transition: color .2s ease;
}

.container--breadcrumbs salla-breadcrumb a:hover {
    color: var(--wafi-primary-dark);
}

@media (max-width: 767px) {
    .container--breadcrumbs .breadcrumbs {
        font-size: 12px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
    }

    .container--breadcrumbs .breadcrumbs::-webkit-scrollbar {
        display: none;
    }
}

/* ---------------------------------------------------------
   3) Product Gallery (.sidebar > salla-slider.details-slider)
--------------------------------------------------------- */
.container--product-details .sidebar {
    border-radius: var(--wafi-radius-lg);
    overflow: hidden;
    background: var(--wafi-soft);
}

.container--product-details .details-slider {
    border-radius: var(--wafi-radius-lg);
    box-shadow: var(--wafi-shadow-sm);
    background: #fff;
}

/* Thumbnails: consistent radius + hover affordance, safe
   because the theme already applies object-cover on these */
.container--product-details [slot="thumbs"] .slide--one-fourth {
    border-radius: var(--wafi-radius-sm);
    overflow: hidden;
    transition: box-shadow .2s ease;
}

.container--product-details [slot="thumbs"] .slide--one-fourth:hover {
    box-shadow: 0 0 0 2px var(--wafi-primary) inset;
}

/* Wishlist icon button on the gallery */
.container--product-details .btn--wishlist {
    box-shadow: var(--wafi-shadow-sm);
}

/* ---------------------------------------------------------
   4) Product Info column
--------------------------------------------------------- */
.container--product-details .main-content h1 {
    color: var(--wafi-ink);
    font-weight: 800;
}

.container--product-details .product__description {
    line-height: 1.9;
    color: var(--wafi-ink);
    font-size: 15px;
}

.container--product-details .product__description article :is(h1, h2, h3, h4) {
    color: var(--wafi-ink);
    font-weight: 800;
    margin-top: 18px;
    margin-bottom: 8px;
}

.container--product-details .product__description article ul,
.container--product-details .product__description article ol {
    padding-inline-start: 20px;
    margin-block: 10px;
}

.container--product-details .product__description article table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    width: 100%;
}

.container--product-details .product__description article table td,
.container--product-details .product__description article table th {
    border: 1px solid var(--wafi-line);
    padding: 8px 12px;
}

.container--product-details #btn-show-more {
    font-weight: 700;
    color: var(--wafi-primary);
}

/* ---------------------------------------------------------
   5) Price block (.price-wrapper / .total-price / .before-price)
      Made the current price highly prominent per spec.
--------------------------------------------------------- */
.container--product-details section .price-wrapper .total-price,
.container--product-details .main-content [data-testid="store-product-price"] p {
    font-size: var(--wafi-price-size) !important;
    font-weight: 900 !important;
    color: var(--wafi-primary-dark) !important;
}

.container--product-details .price-wrapper .before-price,
.container--product-details .main-content [data-testid="store-product-price"] .line-through {
    color: var(--wafi-muted) !important;
    font-size: 15px;
    text-decoration: line-through;
}

.container--product-details .out-of-stock {
    color: var(--wafi-danger) !important;
}

/* Discount badge injected by JS next to the price
   (see wafi-phase1-product-page.js) — computed from the
   real prices already on the page, nothing invented. */
.wafi-pdp-discount {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    background: var(--wafi-danger);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 10px;
    box-shadow: 0 5px 12px rgba(194, 58, 58, .22);
}

/* ---------------------------------------------------------
   6) Sticky purchase bar (.sticky-product-bar)
--------------------------------------------------------- */
.container--product-details .sticky-product-bar {
    border: 1px solid var(--wafi-line);
    box-shadow: var(--wafi-shadow-sm);
}

.container--product-details .sticky-product-bar__quantity {
    background: var(--wafi-soft);
    border-radius: var(--wafi-radius-sm);
    padding: 10px 14px;
}

/* Add-to-cart button: same pattern your homepage CSS already
   uses to style salla-button internals (.s-button-element) */
.container--product-details .sticky-product-bar__btn .s-button-element {
    border-radius: var(--wafi-radius-sm) !important;
    min-height: 52px !important;
    font-weight: 800 !important;
    background: var(--wafi-primary) !important;
    transition: transform .15s ease, background-color .2s ease;
}

.container--product-details .sticky-product-bar__btn .s-button-element:hover {
    background: var(--wafi-primary-dark) !important;
}

.container--product-details .sticky-product-bar__btn .s-button-element:active {
    transform: scale(.98);
}

/* Add-to-cart success feedback pulse (class toggled by JS) */
.wafi-added-pulse {
    animation: wafiAddedPulse .6s var(--wafi-ease);
}

@keyframes wafiAddedPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 107, 115, .35);
    }

    70% {
        box-shadow: 0 0 0 14px rgba(0, 107, 115, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 107, 115, 0);
    }
}

/* ---------------------------------------------------------
   7) Description / Reviews tabs (desktop) & accordion (mobile)
      Wrapper classes are added by JS ONLY if both target
      sections exist on the page — see .js file.
--------------------------------------------------------- */
.wafi-pdp-tabs__nav {
    display: none;
}

@media (min-width: 1024px) {
    .wafi-pdp-tabs__nav {
        display: flex;
        gap: 8px;
        border-bottom: 1px solid var(--wafi-line);
        margin-bottom: 18px;
    }

    .wafi-pdp-tabs__btn {
        border: 0;
        background: none;
        padding: 10px 18px;
        font-weight: 700;
        color: var(--wafi-muted);
        cursor: pointer;
        border-bottom: 2px solid transparent;
        transition: color .2s ease, border-color .2s ease;
    }

    .wafi-pdp-tabs__btn.is-active {
        color: var(--wafi-primary-dark);
        border-color: var(--wafi-primary);
    }

    .wafi-pdp-tabs__panel {
        display: none;
    }

    .wafi-pdp-tabs__panel.is-active {
        display: block;
    }
}

/* Mobile: accordion look, using native <details> injected by JS */
@media (max-width: 1023px) {
    .wafi-pdp-accordion {
        border: 1px solid var(--wafi-line);
        border-radius: var(--wafi-radius-sm);
        margin-bottom: 10px;
        overflow: hidden;
    }

    .wafi-pdp-accordion>summary {
        list-style: none;
        cursor: pointer;
        padding: 14px 16px;
        font-weight: 700;
        color: var(--wafi-ink);
        background: var(--wafi-soft);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .wafi-pdp-accordion>summary::-webkit-details-marker {
        display: none;
    }

    .wafi-pdp-accordion>summary::after {
        content: "+";
        font-size: 20px;
        color: var(--wafi-primary);
        transition: transform .2s ease;
    }

    .wafi-pdp-accordion[open]>summary::after {
        transform: rotate(45deg);
    }

    .wafi-pdp-accordion__body {
        padding: 14px 16px;
    }
}

/* ---------------------------------------------------------
   8) Related products rhythm (salla-products-slider)
--------------------------------------------------------- */
.container.mb-5.sm\:mb-8 salla-products-slider {
    display: block;
    margin-top: 10px;
}


/* =========================================================
   WAFI TREND — PHASE 2
   Category / Search Results / Filters / Sorting / Grid
   Classes confirmed from real theme-raed source:
   src/views/pages/product/index.twig
   Product-card classes reused from your OWN confirmed
   working homepage CSS (.product-entry family) — this is
   what makes cards visually identical across pages.

   HOW TO INSTALL: append to the END of your existing CSS
   file, after the Phase 1 block.
========================================================= */

/* ---------------------------------------------------------
   1) Page header / breadcrumbs (pages without the custom
      category banner — e.g. Search Results)
--------------------------------------------------------- */
.container--products-list #page-main-title {
    color: var(--wafi-ink);
    font-weight: 800;
}

.container--breadcrumbs:has(+ .s-blocks-wrapper) .breadcrumbs,
.container--breadcrumbs .breadcrumbs {
    color: var(--wafi-muted);
    font-size: 13px;
}

/* ---------------------------------------------------------
   2) Layout rhythm
--------------------------------------------------------- */
.container--products-list {
    gap: 24px;
    padding-block: 8px 32px;
}

.container--products-list .main-content {
    min-width: 0;
}

/* ---------------------------------------------------------
   3) Filters — Desktop sidebar
--------------------------------------------------------- */
salla-filters#filters-menu {
    border: 1px solid var(--wafi-line);
    border-radius: var(--wafi-radius-md);
    background: #fff;
    box-shadow: var(--wafi-shadow-sm);
    padding: 4px;
}

/* ---------------------------------------------------------
   4) Filters — Mobile trigger + drawer feel
      (salla-filters already becomes an off-canvas panel on
      mobile via Salla's own JS; we only restyle the trigger
      button and let Salla's native open/close logic run)
--------------------------------------------------------- */
.filters-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--wafi-radius-sm);
    border: 1px solid var(--wafi-line);
    background: var(--wafi-soft);
    transition: background-color .2s ease, border-color .2s ease;
}

.filters-trigger:hover {
    background: #fff;
    border-color: var(--wafi-primary);
}

.filters-trigger i {
    color: var(--wafi-primary) !important;
}

.btn--close-sm.close-filters {
    border-radius: 999px;
    background: var(--wafi-soft);
}

@media (max-width: 1023px) {

    /* When Salla opens the filters panel as an overlay on mobile,
     give it the same radius/shadow language as the rest of the
     site instead of the default flat panel. */
    salla-filters#filters-menu {
        border-radius: var(--wafi-radius-lg) var(--wafi-radius-lg) 0 0;
    }
}

/* ---------------------------------------------------------
   5) Sorting select
--------------------------------------------------------- */
#product-filter {
    border-radius: var(--wafi-radius-sm);
    border: 1px solid var(--wafi-line);
    background-color: #fff;
    font-weight: 600;
    color: var(--wafi-ink);
    min-height: 42px;
    transition: border-color .2s ease;
}

#product-filter:focus {
    border-color: var(--wafi-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 107, 115, .12);
}

/* ---------------------------------------------------------
   6) Product cards inside the grid — SAME treatment as your
      homepage sliders, just re-scoped to this container so
      the identity is consistent everywhere (Audit item:
      Design Consistency). Values match your existing
      .s-block--animated-products rules exactly.
--------------------------------------------------------- */
.container--products-list .product-entry,
salla-products-list .product-entry {
    border-radius: var(--wafi-radius-md);
    transition: box-shadow .2s ease;
}

.container--products-list .product-entry:hover,
salla-products-list .product-entry:hover {
    transition: box-shadow .2s ease, transform .2s ease;
}

.container--products-list .product-entry__price.product-entry--sale .sale-price,
salla-products-list .product-entry__price.product-entry--sale .sale-price {
    color: #d64343 !important;
    font-size: clamp(18px, 1.6vw, 22px) !important;
    font-weight: 900 !important;
}

.container--products-list .product-entry__price.product-entry--sale .regular-price,
salla-products-list .product-entry__price.product-entry--sale .regular-price {
    color: #000 !important;
    text-decoration-color: #000;
}

.container--products-list .product-entry__price.product-entry--sale .wafi-discount-percent,
salla-products-list .product-entry__price.product-entry--sale .wafi-discount-percent {
    border: 0;
    background: #d64343;
    color: #fff;
    box-shadow: 0 5px 12px rgba(214, 67, 67, .22);
    font-size: 11px;
    font-weight: 800;
}

.container--products-list .product-entry__title,
salla-products-list .product-entry__title {
    min-height: 2.8em;
    line-height: 1.5;
}

/* ---------------------------------------------------------
   7) Empty state (no results) — Salla renders this inside
      <salla-products-list> at runtime. Class name below is
      Salla's documented default; VERIFY on your live search
      results page with no matches before relying on it. If
      the class differs, only this block is inactive —
      nothing else breaks.
--------------------------------------------------------- */
salla-products-list .s-products-list-empty,
salla-products-list .empty-products {
    padding: 60px 20px;
    text-align: center;
    color: var(--wafi-muted);
}

@media (max-width: 767px) {
    .container--products-list {
        gap: 16px;
        padding-block: 4px 24px;
    }
}


/* =========================================================
   WAFI TREND — PHASE 3
   Cart Page
   Classes confirmed from real theme-raed source:
   src/views/pages/cart.twig

   HOW TO INSTALL: append to the END of your existing CSS
   file, after Phase 1 + Phase 2 blocks.
========================================================= */

/* ---------------------------------------------------------
   1) Cart items list
--------------------------------------------------------- */
.cart-item {
    border: 1px solid var(--wafi-line);
    border-radius: var(--wafi-radius-md) !important;
    box-shadow: var(--wafi-shadow-sm);
    transition: box-shadow .2s ease;
}

.cart-item:hover {
    box-shadow: var(--wafi-shadow-md);
}

.cart-item img {
    border-radius: var(--wafi-radius-sm) !important;
}

.cart-item h1 a {
    color: var(--wafi-ink);
    font-weight: 700;
    transition: color .2s ease;
}

.cart-item h1 a:hover {
    color: var(--wafi-primary);
}

/* Price emphasis: current price prominent, old prices muted */
.cart-item .item-price {
    font-weight: 800;
    font-size: 16px;
}

.cart-item .item-price.text-red-800 {
    color: var(--wafi-danger) !important;
}

.cart-item .item-regular-price,
.cart-item .item-original-price {
    color: var(--wafi-muted) !important;
}

.cart-item .item-total {
    color: var(--wafi-primary-dark);
    font-weight: 800;
}

/* Quantity control container */
.cart-item salla-quantity-input {
    border-radius: var(--wafi-radius-sm);
    overflow: hidden;
}

/* Delete button */
.cart-item .btn--delete {
    box-shadow: var(--wafi-shadow-sm);
    transition: transform .15s ease;
}

.cart-item .btn--delete:hover {
    transform: scale(1.06);
}

/* ---------------------------------------------------------
   2) Empty cart state — real class: .no-content-placeholder
--------------------------------------------------------- */
.no-content-placeholder {
    padding: 70px 20px;
    text-align: center;
    color: var(--wafi-muted);
}

.no-content-placeholder .icon {
    font-size: 56px;
    color: var(--wafi-line);
    display: block;
    margin-bottom: 18px;
}

.no-content-placeholder p {
    font-size: 16px;
    font-weight: 700;
    color: var(--wafi-ink);
    margin-bottom: 18px;
}

.no-content-placeholder .btn--outline-primary {
    border-color: var(--wafi-primary);
    color: var(--wafi-primary);
    font-weight: 700;
    transition: background-color .2s ease, color .2s ease;
}

.no-content-placeholder .btn--outline-primary:hover {
    background: var(--wafi-primary);
    color: #fff;
}

/* ---------------------------------------------------------
   3) Free shipping progress bar
--------------------------------------------------------- */
#free-shipping {
    border-radius: var(--wafi-radius-md) !important;
    border: 1px solid var(--wafi-line);
}

#free-shipping-bar {
    height: 10px;
    overflow: hidden;
}

#free-shipping-bar .progress-bg {
    background: linear-gradient(90deg, var(--wafi-primary), var(--wafi-success)) !important;
}

/* ---------------------------------------------------------
   4) Order summary sidebar
--------------------------------------------------------- */
.cart-options,
#cart-gifting,
salla-cart-coupons {
    border-radius: var(--wafi-radius-md) !important;
}

/* Checkout CTA — salla-cart-summary-card renders its own
   primary button; the following targets the same inner
   element class your homepage buttons already use, so it
   inherits the same visual weight as "أضف للسلة". VERIFY
   after install: if the button doesn't pick up the styling,
   the internal class differs and only this rule is inert. */
salla-cart-summary-card .s-button-element {
    border-radius: var(--wafi-radius-sm) !important;
    min-height: 52px !important;
    font-weight: 800 !important;
}

/* ---------------------------------------------------------
   5) Layout: desktop side-by-side, mobile stacked
--------------------------------------------------------- */
@media (max-width: 1023px) {
    .cart-item {
        margin-bottom: 14px !important;
    }
}

/* Mobile sticky checkout bar (real class already referenced
   in your existing CSS: .s-cart-summary-card-bar) */
.s-cart-summary-card-bar {
    box-shadow: 0 -8px 24px rgba(20, 52, 61, .12) !important;
    border-top: 1px solid var(--wafi-line);
}


/* =========================================================
   WAFI TREND — PHASE 4
   Account / Profile form · Orders & Wishlist empty states ·
   Static pages (About/Policies/Contact) typography
   Classes confirmed from real theme-raed source:
   - src/views/pages/customer/profile.twig
   - src/views/pages/customer/orders/index.twig
   - src/views/pages/page-single.twig

   HOW TO INSTALL: append to the END of your existing CSS
   file, after Phase 1 + 2 + 3 blocks.
========================================================= */

/* ---------------------------------------------------------
   1) Profile / Account form
--------------------------------------------------------- */
.form--user-profile .profile-field-item label {
    color: var(--wafi-ink);
    font-weight: 700;
}

.form--user-profile .form-input,
.form--user-profile salla-tel-input,
.form--user-profile salla-datetime-picker {
    border-radius: var(--wafi-radius-sm) !important;
    border-color: var(--wafi-line) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.form--user-profile .form-input:focus {
    border-color: var(--wafi-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 107, 115, .12);
    outline: none;
}

.form--user-profile .profile-filepond-placholder {
    border: 1px dashed var(--wafi-line);
    border-radius: var(--wafi-radius-md);
    background: var(--wafi-soft);
}

.form--user-profile .profile-filepond-placholder-icon {
    color: var(--wafi-primary);
}

.form--user-profile salla-button .s-button-element {
    border-radius: var(--wafi-radius-sm) !important;
    min-height: 48px !important;
    font-weight: 800 !important;
}

salla-verify,
salla-user-settings {
    border-radius: var(--wafi-radius-md);
}

/* ---------------------------------------------------------
   2) Orders / Wishlist — empty states
      .no-content-placeholder confirmed identical in both
      cart.twig and customer/orders/index.twig — same rule
      from Phase 3 applies automatically here too, this just
      adds the packed-box icon used specifically by orders.
--------------------------------------------------------- */
.no-content-placeholder .sicon-packed-box,
.no-content-placeholder .sicon-heart {
    font-size: 56px;
    color: var(--wafi-line);
    display: block;
    margin-bottom: 18px;
}

/* ---------------------------------------------------------
   3) Static pages (About / Policies / Shipping / Contact)
--------------------------------------------------------- */
.content--single-page {
    border-radius: var(--wafi-radius-lg) !important;
    box-shadow: var(--wafi-shadow-sm);
    border: 1px solid var(--wafi-line);
}

.content--single-page h1 {
    color: var(--wafi-ink);
}

.content-entry {
    line-height: 1.9;
    color: var(--wafi-ink);
    font-size: 15px;
}

.content-entry :is(h2, h3, h4) {
    color: var(--wafi-ink);
    font-weight: 800;
    margin-top: 22px;
    margin-bottom: 10px;
}

.content-entry ul,
.content-entry ol {
    padding-inline-start: 22px;
    margin-block: 12px;
}

.content-entry table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    width: 100%;
    margin-block: 16px;
}

.content-entry table td,
.content-entry table th {
    border: 1px solid var(--wafi-line);
    padding: 10px 14px;
}

.content-entry img {
    border-radius: var(--wafi-radius-sm);
    max-width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .content--single-page {
        padding: 20px !important;
    }
}



.product-static-info {
    display: none !important;
}


@media (max-width: 767px) {
    .header__icons .header-icon-button:has(.sicon-earth) {
        display: none !important;
    }
}


.s-block--bundle-customers-also-bought,
.s-block--bundle-similar-products {
    display: none !important;
}

/* =========================================================
   WAFI TREND — MOBILE PRODUCT PURCHASE DOCK V2
   Real Raed/Salla structure:
   body.product-single
   .product-details-col > form.product-form > .addtocart-bar
   Keeps Wafi bottom nav visible and places the native Salla
   purchase control directly above it.
========================================================= */
@media (max-width: 767px) {
    body.product-single {
        --wafi-mobile-nav-height: 68px;
        --wafi-mobile-buy-height: 66px;
        padding-bottom: calc(var(--wafi-mobile-nav-height) + var(--wafi-mobile-buy-height) + 18px) !important;
    }

    /* Keep the custom navigation at the very bottom. */
    body.product-single .wafi-mobile-nav {
        display: grid !important;
        z-index: 90 !important;
    }

    /* The REAL product purchase row from the current Salla theme. */
    body.product-single .product-details-col form.product-form>.addtocart-bar {
        position: fixed !important;
        right: 0 !important;
        left: 0 !important;
        bottom: var(--wafi-mobile-nav-height) !important;
        z-index: 80 !important;

        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: var(--wafi-mobile-buy-height) !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        gap: 8px !important;

        background: rgba(255, 255, 255, .98) !important;
        border-top: 1px solid rgba(20, 52, 61, .10) !important;
        box-shadow: 0 -8px 24px rgba(20, 52, 61, .11) !important;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    /* Keep Salla's native web component inside the original form.
       This preserves quantity/options/quick-buy behaviour. */
    body.product-single .product-details-col form.product-form>.addtocart-bar>salla-add-product-button {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    /* Fallback for the hydrated native button if Salla exposes it
       in the light DOM on a specific browser/version. */
    body.product-single .product-details-col form.product-form>.addtocart-bar>button[support-sticky-bar],
    body.product-single .product-details-col form.product-form>.addtocart-bar .s-button-element {
        width: 100% !important;
        min-height: 50px !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Do not let floating WhatsApp/contact buttons cover purchase CTA. */
    body.product-single .wa-s-n,
    body.product-single .floating-contacts,
    body.product-single .wafi-back-to-top {
        bottom: calc(var(--wafi-mobile-nav-height) + var(--wafi-mobile-buy-height) + 18px) !important;
    }
}

@media (max-width: 390px) {
    body.product-single {
        --wafi-mobile-nav-height: 64px;
    }
}


/* =========================================================
   WAFI TREND — Discount badge inside Salla live search
   Uses the same badge created for normal product cards.
========================================================= */

/* حاوية السعر في نتيجة البحث */
.wafi-search-price-box {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    column-gap: 8px !important;
    row-gap: 5px !important;
    white-space: normal !important;
}

/* نسبة الخصم في البحث — نفس هوية بطاقات المنتجات */
.wafi-discount-percent--search {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin-inline-start: 0 !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #d64343 !important;
    color: #fff !important;
    box-shadow: 0 5px 12px rgba(214, 67, 67, .22) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
}

@media (max-width: 767px) {
    .wafi-discount-percent--search {
        padding: 3px 7px !important;
        font-size: 10px !important;
    }
}


/* =========================================================
   Wafi Trend × Tamara
   Premium Summary Widget
   Desktop + Mobile
========================================================= */

.tamara-summary-widget__container.tamara-summary-widget--inline-outlined {
    --wafi-tamara-primary: #15919b;
    --wafi-tamara-primary-soft: rgba(21, 145, 155, 0.08);
    --wafi-tamara-border: rgba(21, 145, 155, 0.16);

    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 12px 0 !important;
    padding: 0 !important;

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #fbfefe 55%,
            #f5fbfb 100%) !important;

    border: 1px solid var(--wafi-tamara-border) !important;
    border-radius: 16px !important;

    box-shadow:
        0 4px 14px rgba(15, 39, 71, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.025) !important;

    overflow: hidden !important;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease !important;
}


/* شريط هوية خفيف أعلى البطاقة */
.tamara-summary-widget__container.tamara-summary-widget--inline-outlined::before {
    content: "" !important;

    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    height: 3px !important;

    background:
        linear-gradient(90deg,
            #15919b 0%,
            #48bcc3 55%,
            #d8c8ff 100%) !important;

    opacity: 0.9 !important;
}


/* =========================================================
   المحتوى الرئيسي
========================================================= */

.tamara-summary-widget__container .summary-widget-content {

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 12px !important;

    min-height: 60px !important;

    padding: 12px 14px 11px !important;

    background: transparent !important;
}


/* النصوص */
.tamara-summary-widget__container .content-wrapper {

    display: flex !important;
    flex: 1 1 auto !important;

    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 3px !important;

    min-width: 0 !important;

    color: #526366 !important;

    font-size: 12.5px !important;
    font-weight: 500 !important;

    line-height: 1.8 !important;

    text-align: right !important;
}


/* =========================================================
   قيمة القسط
========================================================= */

.tamara-summary-widget__container .tamara-summary-widget__amount {

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 3px !important;

    padding: 5px 9px !important;

    margin: 0 2px !important;

    background:
        linear-gradient(135deg,
            rgba(21, 145, 155, 0.11),
            rgba(21, 145, 155, 0.05)) !important;

    border: 1px solid rgba(21, 145, 155, 0.15) !important;
    border-radius: 9px !important;

    color: #117c84 !important;

    font-size: 13.5px !important;
    font-weight: 800 !important;

    line-height: 1 !important;

    white-space: nowrap !important;
}


/* رمز الريال */
.tamara-summary-widget__container .tamara-summary-widget__amount svg {

    width: 15px !important;
    height: 16px !important;

    margin-inline-start: 2px !important;

    flex: none !important;
}


.tamara-summary-widget__container .tamara-summary-widget__amount svg path {

    fill: currentColor !important;
}


/* =========================================================
   رقم عدد الأقساط
========================================================= */

.tamara-summary-widget__container .tamara-widget__number-of-installments-node {

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-width: 24px !important;
    height: 24px !important;

    padding: 0 6px !important;

    margin: 0 2px !important;

    background: #ffffff !important;

    border: 1px solid rgba(21, 145, 155, 0.18) !important;
    border-radius: 7px !important;

    color: #15919b !important;

    font-size: 12px !important;
    font-weight: 800 !important;

    line-height: 1 !important;

    box-shadow:
        0 2px 5px rgba(21, 145, 155, 0.07) !important;
}


/* =========================================================
   النص العادي
========================================================= */

.tamara-summary-widget__container .tamara-summary-widget__inline__text {

    color: #607174 !important;

    font-size: inherit !important;
    font-weight: 500 !important;

    white-space: normal !important;
}


/* =========================================================
   رابط تعرف على خياراتك
========================================================= */

.tamara-summary-widget__container .tamara-inline-learn-more-link {

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 29px !important;

    margin-inline-start: 4px !important;
    padding: 5px 9px !important;

    background: rgba(21, 145, 155, 0.07) !important;

    border: 1px solid rgba(21, 145, 155, 0.12) !important;
    border-radius: 8px !important;

    color: #137f87 !important;

    font-size: 11.5px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    cursor: pointer !important;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease !important;
}


.tamara-summary-widget__container .tamara-inline-learn-more-link:hover {

    background: #15919b !important;

    border-color: #15919b !important;

    color: #ffffff !important;

    transform: translateY(-1px) !important;
}


/* =========================================================
   شعار Tamara
========================================================= */

.tamara-summary-widget__container .badge-wrapper {

    display: flex !important;
    flex: 0 0 auto !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 5px 7px !important;

    background: #ffffff !important;

    border: 1px solid rgba(143, 124, 191, 0.12) !important;
    border-radius: 10px !important;

    box-shadow:
        0 2px 8px rgba(73, 51, 110, 0.05) !important;
}


.tamara-summary-widget__container .tamara-inline-badge {

    display: block !important;

    width: auto !important;
    max-width: 74px !important;

    height: 25px !important;

    object-fit: contain !important;
}


/* =========================================================
   Desktop Hover
========================================================= */

@media (hover: hover) and (pointer: fine) {

    .tamara-summary-widget__container.tamara-summary-widget--inline-outlined:hover {

        border-color: rgba(21, 145, 155, 0.27) !important;

        box-shadow:
            0 8px 24px rgba(21, 145, 155, 0.08),
            0 2px 5px rgba(0, 0, 0, 0.025) !important;
    }
}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 767px) {

    .tamara-summary-widget__container.tamara-summary-widget--inline-outlined {

        margin: 9px 0 !important;

        border-radius: 14px !important;

        box-shadow:
            0 3px 12px rgba(15, 39, 71, 0.04) !important;
    }


    .tamara-summary-widget__container .summary-widget-content {

        align-items: flex-start !important;

        gap: 8px !important;

        min-height: auto !important;

        padding: 11px 10px 10px !important;
    }


    .tamara-summary-widget__container .content-wrapper {

        gap: 2px !important;

        font-size: 11.5px !important;
        line-height: 1.75 !important;
    }


    .tamara-summary-widget__container .tamara-summary-widget__amount {

        padding: 5px 7px !important;

        font-size: 12.5px !important;

        border-radius: 8px !important;
    }


    .tamara-summary-widget__container .tamara-summary-widget__amount svg {

        width: 14px !important;
        height: 15px !important;
    }


    .tamara-summary-widget__container .tamara-widget__number-of-installments-node {

        min-width: 22px !important;
        height: 22px !important;

        padding: 0 5px !important;

        font-size: 11.5px !important;
    }


    .tamara-summary-widget__container .tamara-inline-learn-more-link {

        min-height: 27px !important;

        margin-top: 2px !important;
        margin-inline-start: 2px !important;

        padding: 4px 7px !important;

        font-size: 10.5px !important;

        border-radius: 7px !important;
    }


    .tamara-summary-widget__container .badge-wrapper {

        padding: 4px 5px !important;

        border-radius: 8px !important;
    }


    .tamara-summary-widget__container .tamara-inline-badge {

        max-width: 57px !important;
        height: 21px !important;
    }
}


/* =========================================================
   Very Small Phones
========================================================= */

@media (max-width: 390px) {

    .tamara-summary-widget__container .summary-widget-content {

        gap: 6px !important;

        padding: 10px 8px 9px !important;
    }


    .tamara-summary-widget__container .content-wrapper {

        font-size: 11px !important;
        line-height: 1.7 !important;
    }


    .tamara-summary-widget__container .tamara-inline-badge {

        max-width: 51px !important;
    }
}

/* =========================================================
   WAFI TREND — Category CTA buttons
   يجعل أسماء أقسام "تسوق حسب احتياجك" بنفس هوية زر "أضف للسلة"
   Scope: #main-links-2 فقط لتجنب التأثير على بقية عناوين المتجر.
========================================================= */
#main-links-2 .slide--cat-entry .item-content {
    padding-top: 14px !important;
}

#main-links-2 .slide--cat-entry .item-content h2 {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background-color: #008060 !important;
    border: 1px solid #008060 !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: none !important;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease !important;
}

#main-links-2 .slide--cat-entry:hover .item-content h2,
#main-links-2 .slide--cat-entry:focus-within .item-content h2 {
    background-color: #006b50 !important;
    border-color: #006b50 !important;
}

#main-links-2 .slide--cat-entry:active .item-content h2 {
    transform: scale(.985);
}

/* إزالة أي تنسيق رابط قديم/أصفر داخل زر القسم */
#main-links-2 .slide--cat-entry .item-content,
#main-links-2 .slide--cat-entry .item-content a,
#main-links-2 .slide--cat-entry .item-content h2,
#main-links-2 .slide--cat-entry .item-content h2 * {
    text-decoration: none !important;
}

@media (max-width: 767px) {
    #main-links-2 .slide--cat-entry .item-content h2 {
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 10px !important;
        border-radius: 10px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }
}


/* =========================================
   WAFI TREND — Category Buttons Color
   نفس لون زر أضف للسلة
========================================= */



/* عند المرور */
.slide--cat-entry:hover .item-content h2 {

    color: #ffffff !important;
}


/* =====================================================
   WAFI TREND — Category CTA Buttons
   نفس تصميم زر "أضف للسلة"
===================================================== */

/* تثبيت محتوى البطاقة ومنع حركة العنوان القديمة */
.slide--cat-entry .item-content {
    width: 100% !important;
    margin-top: 12px !important;
    transform: none !important;
}

/* تحويل اسم التصنيف إلى زر */
.slide--cat-entry .item-content h2 {
    width: 100% !important;
    min-height: 48px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 16px !important;
    margin: 0 !important;

    background-color: #008060 !important;
    border: 1px solid #008060 !important;
    border-radius: 8px !important;

    color: #ffffff !important;

    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    box-sizing: border-box !important;
    cursor: pointer;

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease !important;
}

/* Hover مثل زر أضف للسلة */
.slide--cat-entry:hover .item-content h2 {
    background-color: #006b50 !important;
    border-color: #006b50 !important;
}

/* إحساس الضغط */
.slide--cat-entry:active .item-content h2 {
    transform: scale(.98) !important;
}

/* إزالة أي تأثير لون قديم */
.slide--cat-entry .item-content h2:hover,
.slide--cat-entry .item-content h2:focus {
    color: #ffffff !important;
}

/* =========================
   Mobile
========================= */
@media (max-width: 768px) {

    .slide--cat-entry .item-content {
        margin-top: 8px !important;
    }

    .slide--cat-entry .item-content h2 {
        min-height: 42px !important;
        padding: 0 8px !important;
        border-radius: 7px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
    }
}

/* =========================================
   WAFI TREND — PREMIUM ANNOUNCEMENT BAR
   Final clean version
   - integrated with the page
   - no capsule/card look
   - no outer green area
   - calm brand teal
   - desktop + mobile
========================================= */

/* 1) القسم نفسه: شريط واحد فقط بدون فراغات أو حواف */
section.s-block--marquee,
.s-block--marquee,
.s-block--marquee.container {
    width: 100% !important;
    max-width: none !important;
    min-height: 36px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: linear-gradient(90deg,
            #177b82 0%,
            #16878f 48%,
            #15919b 100%) !important;
    background-color: #16878f !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow:
        inset 0 -1px 0 rgba(0, 0, 0, .05) !important;

    overflow: hidden !important;
}

/* 2) إزالة أي Container داخلي يسبب هوامش أو فراغات */
.s-block--marquee>.container,
.s-block--marquee .container {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 3) عنصر سلة الخاص بالشريط */
.s-block--marquee salla-marquee,
.s-block--marquee .marquee,
.s-block--marquee .marquee__wrapper {
    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-height: 36px !important;
    height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    overflow: hidden !important;
}

/* 4) المسار المتحرك: شفاف حتى لا يظهر كشريط داخل شريط */
.s-block--marquee .marquee__content {
    display: flex !important;
    align-items: center !important;

    min-height: 36px !important;
    height: 36px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    gap: 32px !important;
    animation-duration: 78s !important;
}

/* 5) عناصر النص */
.s-block--marquee .marquee__content li {
    display: flex !important;
    align-items: center !important;

    min-height: 36px !important;
    height: 36px !important;

    margin: 0 !important;
    padding: 0 2px !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    white-space: nowrap !important;
}

.s-block--marquee .marquee__content li>*,
.s-block--marquee .marquee__content span,
.s-block--marquee .marquee__content a {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    color: rgba(255, 255, 255, .96) !important;

    font-size: 12.5px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;

    text-shadow: 0 1px 1px rgba(0, 0, 0, .05) !important;
    white-space: nowrap !important;
}

/* 6) أيقونة النار — صغيرة وغير مزعجة */
.s-block--marquee .marquee__content li span span:last-child::after {
    content: "🔥";
    display: inline-block;
    margin-inline-start: 6px;
    font-size: 11px;
    vertical-align: middle;
}

/* =========================================
   MOBILE
========================================= */
@media (max-width: 768px) {

    section.s-block--marquee,
    .s-block--marquee,
    .s-block--marquee.container {
        min-height: 34px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .s-block--marquee salla-marquee,
    .s-block--marquee .marquee,
    .s-block--marquee .marquee__wrapper,
    .s-block--marquee .marquee__content,
    .s-block--marquee .marquee__content li {
        min-height: 34px !important;
        height: 34px !important;
    }

    .s-block--marquee .marquee__content {
        gap: 24px !important;
        animation-duration: 70s !important;
    }

    .s-block--marquee .marquee__content li>*,
    .s-block--marquee .marquee__content span,
    .s-block--marquee .marquee__content a {
        font-size: 11.5px !important;
        font-weight: 600 !important;
    }

    .s-block--marquee .marquee__content li span span:last-child::after {
        font-size: 10px !important;
        margin-inline-start: 5px !important;
    }
}

/* =========================================================
   WAFI TREND — PRODUCT SHOWCASE V3
   Scope: homepage / animated product carousels only.
   Nahdi-inspired hierarchy with Wafi Trend branding.
   Native Salla cart, wishlist, product links and slider stay intact.
   ========================================================= */
.s-block--animated-products {
    --wafi-product-primary: #15919b;
    --wafi-product-primary-dark: #117b83;
    --wafi-product-ink: #1f2937;
    --wafi-product-muted: #6b7280;
    --wafi-product-line: #e8ecef;
    --wafi-product-soft: #f7f9fa;
    --wafi-product-offer: #ef4d5a;
    --wafi-product-offer-soft: #fff1f2;

    padding-block: 28px !important;
    background-image: none !important;
    overflow: hidden !important;
}

/* Compact title row: title at inline-start, View All at inline-end. */
.s-block--animated-products .container>.s-block__title {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    direction: rtl;
    text-align: initial !important;
}

html[dir="ltr"] .s-block--animated-products .container>.s-block__title,
html[lang^="en"] .s-block--animated-products .container>.s-block__title {
    direction: ltr;
}

.s-block--animated-products .s-block__title .right-side {
    display: flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
    text-align: start !important;
}

/* Product rows should read like the supplied reference: title + lightweight View All. */
.s-block--animated-products .s-block__title .right-side>span,
.s-block--animated-products .s-block__title .right-side>div {
    display: none !important;
}

.s-block--animated-products .s-block__title h2,
.s-block--animated-products .s-block__title h2.text-center {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    color: var(--wafi-product-ink) !important;
    font-size: clamp(16px, 1.8vw, 22px) !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-align: start !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.s-block--animated-products .s-block__title .left-side {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    margin-inline-start: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
}

.s-block--animated-products .s-block__title .left-side salla-button.btn--main {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
}

.s-block--animated-products .s-block__title .left-side .btn--main .s-button-element {
    width: auto !important;
    min-width: 0 !important;
    min-height: 30px !important;
    height: auto !important;
    padding: 3px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--wafi-product-primary) !important;
    box-shadow: none !important;
    transform: none !important;
}

.s-block--animated-products .s-block__title .left-side .btn--main .s-button-element:hover,
.s-block--animated-products .s-block__title .left-side .btn--main .s-button-element:focus-visible {
    background: transparent !important;
    color: var(--wafi-product-primary-dark) !important;
    box-shadow: none !important;
    transform: none !important;
}

.s-block--animated-products .s-block__title .left-side .s-button-text {
    gap: 5px !important;
    color: inherit !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.s-block--animated-products .s-block__title .left-side .arrow-icon {
    font-size: 10px !important;
    transition: transform .18s ease !important;
}

/* Slider: preserve Salla/Swiper behavior; only normalize vertical stretch. */
.s-block--animated-products salla-products-slider,
.s-block--animated-products .s-products-slider-wrapper,
.s-block--animated-products .s-products-slider-slider,
.s-block--animated-products .s-slider-container {
    width: 100% !important;
    min-width: 0 !important;
}

.s-block--animated-products .s-slider-swiper-wrapper {
    align-items: stretch !important;
}

.s-block--animated-products .s-products-slider-card.swiper-slide {
    height: auto !important;
    box-sizing: border-box !important;
}

/* Card shell */
.s-block--animated-products custom-salla-product-card.product-entry,
.s-block--animated-products .product-entry.product-block {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--wafi-product-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(31, 41, 55, .055) !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}

@media (hover: hover) and (pointer: fine) {

    .s-block--animated-products custom-salla-product-card.product-entry:hover,
    .s-block--animated-products .product-entry.product-block:hover {
        border-color: rgba(21, 145, 155, .28) !important;
        box-shadow: 0 8px 20px rgba(31, 41, 55, .09) !important;
        transform: translateY(-2px) !important;
        transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
    }
}

.s-block--animated-products .product-entry__inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
}

/* Image zone: stable, centered, never cropped. */
.s-block--animated-products .product-entry__image-wrap {

    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
}

.s-block--animated-products .product-entry__image {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 8px 0 !important;
    overflow: hidden !important;
    border-radius: 12px 12px 0 0 !important;
    background: #fff !important;
}

.s-block--animated-products .product-entry__image-main,
.s-block--animated-products .product-entry__image .image--aspect-ratio {
    display: flex !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #fff !important;
}

.s-block--animated-products .product-entry__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    padding: 6px !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
}

.s-block--animated-products .product-entry:hover .product-entry__image img {
    transform: none !important;
}

/* Wishlist: keep Salla's native toggle; restyle only. */
.s-block--animated-products .product-entry__image-wrap>.absolute {
    top: 8px !important;
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
    padding: 0 !important;
    pointer-events: none;
}

.s-block--animated-products .product-entry-btn--wishlist {
    margin-inline-start: auto !important;
    pointer-events: auto;
}

.s-block--animated-products .product-entry-btn--wishlist .s-button-element {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border: 1px solid #dce5e7 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .96) !important;
    color: var(--wafi-product-primary) !important;
    box-shadow: 0 2px 7px rgba(31, 41, 55, .08) !important;
}

.s-block--animated-products .product-entry-btn--wishlist .sicon-heart {
    color: var(--wafi-product-primary) !important;
    font-size: 16px !important;
}

/* Content */
.s-block--animated-products .content-wrap {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 10px 10px !important;
}

.s-block--animated-products .product-entry__content,
.s-block--animated-products .product-entry__info {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-width: 0 !important;
    padding: 0 !important;
}

/* Existing product-data badge only; no offers are invented. */
.s-block--animated-products .product-entry__promotion_title {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: 24px !important;
    margin: 0 0 6px !important;
    padding: 4px 8px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--wafi-product-offer) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.s-block--animated-products .product-entry__title {
    display: -webkit-box !important;
    min-height: 3em !important;
    max-height: 3em !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--wafi-product-ink) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-align: start !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
}

/* Pricing hierarchy */
.s-block--animated-products .price-wrapper {
    width: 100% !important;
    margin-top: 7px !important;
}

.s-block--animated-products .product-entry__price {
    display: flex !important;
    min-height: 27px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 3px 6px !important;
}

.s-block--animated-products .sale-price,
.s-block--animated-products .price,
.s-block--animated-products .product-entry__price:not(.product-entry--sale) h4 {
    margin: 0 !important;
    color: var(--wafi-product-ink) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

.s-block--animated-products .sale-price .sicon-sar,
.s-block--animated-products .price .sicon-sar {
    color: currentColor !important;
    font-size: .88em !important;
}

.s-block--animated-products .regular-price,
.s-block--animated-products .regular-or-normal-price {
    color: #252b33 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-decoration-thickness: 1px !important;

    text-decoration: none !important;
    text-decoration-line: none !important;
}

.s-block--animated-products .wafi-discount-percent {
    display: inline-flex !important;
    margin: 0 !important;
    padding: 2px 6px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #fecdd3 !important;
    border-radius: 999px !important;
    background: var(--wafi-product-offer-soft) !important;
    color: #c83b48 !important;
    box-shadow: none !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

/* Native add-to-cart stays native; only its visual footprint becomes compact. */
.s-block--animated-products .add-to-cart-conatiner,
.s-block--animated-products .add-to-cart-container {
    width: auto !important;
    margin: 7px 0 0 !important;
    align-self: flex-start !important;
}

.s-block--animated-products .add-to-cart-conatiner salla-add-product-button,
.s-block--animated-products .add-to-cart-container salla-add-product-button,
.s-block--animated-products .add-to-cart-conatiner salla-add-product-button>div,
.s-block--animated-products .add-to-cart-container salla-add-product-button>div,
.s-block--animated-products .add-to-cart-conatiner salla-button,
.s-block--animated-products .add-to-cart-container salla-button {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
}

.s-block--animated-products .add-to-cart-conatiner .s-button-element,
.s-block--animated-products .add-to-cart-container .s-button-element {
    display: inline-flex !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: var(--wafi-product-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(21, 145, 155, .20) !important;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

.s-block--animated-products .add-to-cart-conatiner .s-button-element:hover,
.s-block--animated-products .add-to-cart-container .s-button-element:hover {
    background: var(--wafi-product-primary-dark) !important;
    box-shadow: 0 6px 14px rgba(21, 145, 155, .26) !important;
    transform: translateY(-1px) !important;
}

.s-block--animated-products .add-to-cart-conatiner .s-button-text,
.s-block--animated-products .add-to-cart-container .s-button-text {
    display: inline-flex !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 0 !important;
}

.s-block--animated-products .add-to-cart-conatiner .s-button-text i,
.s-block--animated-products .add-to-cart-container .s-button-text i {
    display: inline-block !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

/* Keep the native button text in the accessibility tree while making the visual control icon-only. */
.s-block--animated-products .add-to-cart-conatiner .s-button-text .overflow-hidden,
.s-block--animated-products .add-to-cart-container .s-button-text .overflow-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/* Keyboard focus remains visible. */
.s-block--animated-products a:focus-visible,
.s-block--animated-products button:focus-visible {
    outline: 2px solid rgba(21, 145, 155, .55) !important;
    outline-offset: 2px !important;
}

/* Mobile: 2–2.5 cards visible, swipe remains native Swiper/RTL. */
@media (max-width: 767px) {
    .s-block--animated-products {
        padding-block: 20px !important;
    }

    .s-block--animated-products>.container,
    .s-block--animated-products .container {
        padding-inline: 10px !important;
    }

    .s-block--animated-products .container>.s-block__title {
        gap: 10px !important;
        margin-bottom: 10px !important;
    }

    .s-block--animated-products .s-block__title h2,
    .s-block--animated-products .s-block__title h2.text-center {
        max-width: calc(100vw - 118px) !important;
        font-size: 15px !important;
        font-weight: 600 !important;
    }

    .s-block--animated-products .s-block__title .left-side .s-button-text {
        font-size: 11px !important;
    }

    /* Inner slider title only contains native arrows in the supplied DOM; remove it on touch screens. */
    .s-block--animated-products .s-products-slider-slider>.s-slider-block__title {
        display: none !important;
    }

    .s-block--animated-products .s-products-slider-card.swiper-slide {
        width: 148px !important;
        min-width: 148px !important;
        max-width: 148px !important;
        flex: 0 0 148px !important;
        padding-inline: 4px !important;
        box-sizing: border-box !important;
    }

    .s-block--animated-products .product-entry__image {
        padding: 6px 6px 0 !important;
    }

    .s-block--animated-products .product-entry__image img {
        padding: 5px !important;
    }

    .s-block--animated-products .content-wrap {
        padding: 0 8px 9px !important;
    }

    .s-block--animated-products .product-entry__promotion_title {
        min-height: 22px !important;
        margin-bottom: 5px !important;
        padding: 3px 7px !important;
        font-size: 9.5px !important;
    }

    .s-block--animated-products .product-entry__title {
        min-height: 2.9em !important;
        max-height: 2.9em !important;
        font-size: 11.5px !important;
        line-height: 1.45 !important;
    }

    .s-block--animated-products .sale-price,
    .s-block--animated-products .price,
    .s-block--animated-products .product-entry__price:not(.product-entry--sale) h4 {
        font-size: 13px !important;
    }

    .s-block--animated-products .regular-price,
    .s-block--animated-products .regular-or-normal-price {
        font-size: 13px !important;

        text-decoration: none !important;
        text-decoration-line: none !important;
    }

    .s-block--animated-products .wafi-discount-percent {
        padding: 2px 5px !important;
        font-size: 8.5px !important;
    }

    .s-block--animated-products .product-entry-btn--wishlist .s-button-element {
        width: 30px !important;
        min-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
    }

    .s-block--animated-products .add-to-cart-conatiner .s-button-element,
    .s-block--animated-products .add-to-cart-container .s-button-element {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .s-block--animated-products {
        padding-block: 24px !important;
    }

    .s-block--animated-products .s-block__title h2,
    .s-block--animated-products .s-block__title h2.text-center {
        font-size: 18px !important;
    }
}

@media (min-width: 1280px) {
    .s-block--animated-products .content-wrap {
        padding-inline: 11px !important;
        padding-bottom: 11px !important;
    }

    .s-block--animated-products .product-entry__title {
        font-size: 13px !important;
    }
}



/* =========================================================
   WAFI TREND — MOBILE PRODUCT CARD EXACT OVERRIDE
   يجعل الكارد / القلب / زر السلة مثل الصورة المرجعية
   الصق هذا الكود في آخر ملف CSS
   ========================================================= */

@media (max-width: 768px) {

    /* =========================
     عرض السلايدر والقالب
     ========================= */








    /* =========================
     الصورة
     ========================= */
    .s-block--animated-products .product-entry__image-wrap {



        background: #fff !important;
    }

    .s-block--animated-products .product-entry__image {


        background: #fff !important;

    }

    .s-block--animated-products .product-entry__image-main,
    .s-block--animated-products .product-entry__image .image--aspect-ratio {





        background: #fff !important;

    }



    /* =========================
     أيقونة القلب — أعلى اليسار
     ========================= */
    .s-block--animated-products .product-entry__image-wrap>.absolute {

        top: 90px !important;






        z-index: 7 !important;

    }







    /* =========================
     المحتوى
     ========================= */








    /* =========================
     شارة العرض الحمراء
     ========================= */


    /* =========================
     اسم المنتج
     ========================= */


    /* =========================
     السعر
     ========================= */










    /* =========================
     زر السلة / الزر الأزرق الدائري
     يظهر يسار الصورة مثل المرجع
     ========================= */
    .s-block--animated-products .add-to-cart-conatiner,
    .s-block--animated-products .add-to-cart-container {

        left: 8px !important;
        top: 108px !important;




        z-index: 8 !important;
    }



    .s-block--animated-products .add-to-cart-conatiner .s-button-element,
    .s-block--animated-products .add-to-cart-container .s-button-element {











        box-shadow: 0 4px 12px rgba(63, 111, 182, 0.28) !important;



    }





    /* إخفاء النص بصريًا فقط */


    /* =========================
     عنوان القسم
     ========================= */



}


/* شاشات صغيرة جدًا */
@media (max-width: 360px) {


    .s-block--animated-products .add-to-cart-conatiner,
    .s-block--animated-products .add-to-cart-container {
        top: 104px !important;
    }
}



/* =========================================================
   WAFI TREND — MOBILE PRODUCT CARD FINAL
   Card + Wishlist + Cart Button
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
     SLIDER / CARD WIDTH
     ===================================================== */

    .s-block--animated-products>.container,
    .s-block--animated-products .container {
        padding-inline: 8px !important;
    }

    .s-block--animated-products .s-products-slider-card.swiper-slide {
        width: 148px !important;
        min-width: 148px !important;
        max-width: 148px !important;

        padding-inline: 4px !important;

        height: auto !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
     CARD
     ===================================================== */

    .s-block--animated-products custom-salla-product-card.product-entry,

    .s-block--animated-products .product-entry.product-block {

        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        border: 1px solid #e7eaee !important;
        border-radius: 10px !important;

        background: #ffffff !important;

        box-shadow:
            0 2px 8px rgba(15, 23, 42, 0.06) !important;

        overflow: visible !important;
    }


    .s-block--animated-products .product-entry__inner {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        border-radius: 10px !important;

        overflow: visible !important;
    }


    /* =====================================================
     IMAGE
     ===================================================== */

    .s-block--animated-products .product-entry__image-wrap {

        position: relative !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius:
            10px 10px 0 0 !important;

        background: #ffffff !important;

        overflow: visible !important;
    }


    .s-block--animated-products .product-entry__image {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding:
            8px 8px 0 !important;

        border-radius:
            10px 10px 0 0 !important;

        background: #ffffff !important;

        overflow: hidden !important;
    }


    .s-block--animated-products .product-entry__image-main,

    .s-block--animated-products .product-entry__image .image--aspect-ratio {

        display: flex !important;

        width: 100% !important;

        aspect-ratio: 1 / 1 !important;

        height: auto !important;
        min-height: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;

        overflow: hidden !important;
    }


    .s-block--animated-products .product-entry__image img {

        display: block !important;

        width: 100% !important;
        height: 100% !important;

        max-width: 100% !important;
        max-height: 100% !important;

        margin: 0 auto !important;

        padding: 2px !important;

        object-fit: contain !important;
        object-position: center !important;

        transform: none !important;
    }


    .s-block--animated-products .product-entry:hover .product-entry__image img {

        transform: none !important;
    }


    /* =====================================================
     WISHLIST — HEART
     ===================================================== */

    .s-block--animated-products .product-entry__image-wrap>.absolute {

        position: absolute !important;

        top: 8px !important;

        left: 8px !important;
        right: 8px !important;

        width: auto !important;

        padding: 0 !important;

        display: flex !important;

        align-items: flex-start !important;
        justify-content: flex-start !important;

        z-index: 20 !important;

        pointer-events: none !important;
    }


    .s-block--animated-products .product-entry-btn--wishlist {

        margin: 0 !important;

        pointer-events: auto !important;
    }


    .s-block--animated-products .product-entry-btn--wishlist .s-button-element {

        display: inline-flex !important;

        width: 31px !important;
        min-width: 31px !important;
        max-width: 31px !important;

        height: 31px !important;
        min-height: 31px !important;
        max-height: 31px !important;

        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        border:
            1px solid #dce6e8 !important;

        border-radius: 50% !important;

        background: #ffffff !important;

        color: #15919b !important;

        box-shadow:
            0 2px 7px rgba(15, 23, 42, 0.08) !important;
    }


    .s-block--animated-products .product-entry-btn--wishlist .sicon-heart,

    .s-block--animated-products .product-entry-btn--wishlist i {

        margin: 0 !important;

        color: #15919b !important;

        font-size: 15px !important;
        line-height: 1 !important;
    }


    /* =====================================================
     CONTENT
     ===================================================== */

    .s-block--animated-products .content-wrap {



        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        padding:
            12px 10px 10px !important;


    }


    .s-block--animated-products .product-entry__content,

    .s-block--animated-products .product-entry__info {

        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .s-block--animated-products .product-entry__content .mt-auto {

        margin-top: 4px !important;
    }


    .s-block--animated-products .content-wrap.grow,

    .s-block--animated-products .product-entry__content.grow {

        flex-grow: 0 !important;
    }


    /* =====================================================
     PROMOTION
     ===================================================== */

    .s-block--animated-products .product-entry__promotion_title {

        display: inline-flex !important;

        width: auto !important;
        max-width: 100% !important;

        min-height: 24px !important;

        margin:
            0 0 7px !important;

        padding:
            4px 12px !important;

        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;

        border-radius: 999px !important;

        background: #ef5a62 !important;

        color: #ffffff !important;

        box-shadow: none !important;

        font-size: 10.5px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }


    /* =====================================================
     PRODUCT TITLE
     ===================================================== */

    .s-block--animated-products .product-entry__title {

        display: -webkit-box !important;

        width: 100% !important;

        height: 4.2em !important;
        min-height: 4.2em !important;
        max-height: 4.2em !important;

        margin: 0 !important;

        color: #444c56 !important;

        font-size: 11.5px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;

        text-align: right !important;

        white-space: normal !important;

        overflow: hidden !important;
        text-overflow: ellipsis !important;

        -webkit-box-orient:
            vertical !important;

        -webkit-line-clamp:
            3 !important;

        line-clamp:
            3 !important;
    }


    /* =====================================================
     PRICE
     ===================================================== */

    .s-block--animated-products .price-wrapper {

        width: 100% !important;

        margin-top: 6px !important;
    }


    .s-block--animated-products .product-entry__price {

        display: flex !important;

        width: 100% !important;

        min-height: 22px !important;

        align-items: center !important;

        justify-content:
            flex-start !important;

        flex-wrap: wrap !important;

        gap:
            3px 6px !important;

        margin: 0 !important;
    }


    .s-block--animated-products .sale-price,

    .s-block--animated-products .price,

    .s-block--animated-products .product-entry__price>h4 {

        margin: 0 !important;

        color: #e24444 !important;

        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
    }


    .s-block--animated-products .regular-price,

    .s-block--animated-products .regular-or-normal-price {

        color: #252b33 !important;

        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;

        text-decoration: none !important;
        text-decoration-line: none !important;
    }


    /* =====================================================
     DISCOUNT %
     ===================================================== */

    .s-block--animated-products .wafi-discount-percent {

        display: inline-flex !important;

        min-height: 16px !important;

        margin: 0 !important;

        padding:
            2px 5px !important;

        align-items: center !important;
        justify-content: center !important;

        border:
            1px solid #fecdd3 !important;

        border-radius:
            999px !important;

        background:
            #fff1f2 !important;

        color:
            #d34250 !important;

        font-size:
            8px !important;

        font-weight:
            700 !important;

        line-height:
            1.1 !important;

        white-space:
            nowrap !important;
    }


    /* =====================================================
     CART BUTTON
     FINAL POSITION:
     جهة اليسار أكثر + مرفوع للأعلى
     ===================================================== */

    .s-block--animated-products .add-to-cart-conatiner,

    .s-block--animated-products .add-to-cart-container {

        position: absolute !important;

        /*
       أقصى جهة اليسار
       جزء بسيط من الدائرة خارج حدود الكارد
    */
        left: -6px !important;
        right: auto !important;

        /*
       رفع الزر للأعلى أكثر
    */
        top: 92px !important;
        bottom: auto !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;

        z-index: 30 !important;

        transform: none !important;
    }


    .s-block--animated-products .add-to-cart-conatiner salla-add-product-button,

    .s-block--animated-products .add-to-cart-container salla-add-product-button,

    .s-block--animated-products .add-to-cart-conatiner salla-add-product-button>div,

    .s-block--animated-products .add-to-cart-container salla-add-product-button>div,

    .s-block--animated-products .add-to-cart-conatiner salla-button,

    .s-block--animated-products .add-to-cart-container salla-button {

        display: inline-flex !important;

        width: auto !important;

        margin: 0 !important;
    }


    /* CART CIRCLE */

    .s-block--animated-products .add-to-cart-conatiner .s-button-element,

    .s-block--animated-products .add-to-cart-container .s-button-element {

        display: inline-flex !important;

        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;

        border-radius: 50% !important;

        background:
            #3f6fb6 !important;

        color:
            #ffffff !important;

        box-shadow:
            0 4px 12px rgba(63, 111, 182, .28) !important;

        transform: none !important;
    }


    /* CART INNER */

    .s-block--animated-products .add-to-cart-conatiner .s-button-text,

    .s-block--animated-products .add-to-cart-container .s-button-text {

        display: inline-flex !important;

        width: 100% !important;
        height: 100% !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 0 !important;

        color: #ffffff !important;

        font-size: 0 !important;

        line-height: 1 !important;
    }


    /* CART ICON / PLUS */

    .s-block--animated-products .add-to-cart-conatiner .s-button-text i,

    .s-block--animated-products .add-to-cart-container .s-button-text i,

    .s-block--animated-products .add-to-cart-conatiner .sicon-cart2,

    .s-block--animated-products .add-to-cart-container .sicon-cart2,

    .s-block--animated-products .add-to-cart-conatiner .sicon-plus,

    .s-block--animated-products .add-to-cart-container .sicon-plus,

    .s-block--animated-products .add-to-cart-conatiner .sicon-add,

    .s-block--animated-products .add-to-cart-container .sicon-add {

        display: inline-block !important;

        margin: 0 !important;

        color: #ffffff !important;

        font-size: 18px !important;

        line-height: 1 !important;
    }


    /* إخفاء كلمة أضف للسلة بصريًا فقط */

    .s-block--animated-products .add-to-cart-conatiner .s-button-text .overflow-hidden,

    .s-block--animated-products .add-to-cart-container .s-button-text .overflow-hidden {

        position: absolute !important;

        width: 1px !important;
        height: 1px !important;

        margin: -1px !important;

        padding: 0 !important;

        overflow: hidden !important;

        clip:
            rect(0 0 0 0) !important;

        clip-path:
            inset(50%) !important;

        white-space:
            nowrap !important;
    }


    /* =====================================================
     SECTION TITLE
     ===================================================== */

    .s-block--animated-products .s-block__title h2,

    .s-block--animated-products .s-block__title h2.text-center {

        font-size: 18px !important;

        font-weight: 700 !important;
    }


    .s-block--animated-products .s-block__title .left-side .s-button-text {

        font-size: 12px !important;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {

    .s-block--animated-products .s-products-slider-card.swiper-slide {

        width: 144px !important;
        min-width: 144px !important;
        max-width: 144px !important;
    }


    /*
     نحافظ على نفس اتجاه الزر
     ونرفعه قليلاً أيضًا في الشاشات الصغيرة.
  */

    .s-block--animated-products .add-to-cart-conatiner,

    .s-block--animated-products .add-to-cart-container {

        left: -6px !important;
        right: auto !important;

        top: 89px !important;
    }
}


/* =========================================================
   WAFI TREND — FINAL CART BUTTON POSITION FIX
   ========================================================= */

@media (max-width: 768px) {

    /* المرجع الصحيح لموضع الزر */


    /* زر السلة: يسار + عند نهاية الصورة */
    .s-block--animated-products .content-wrap .add-to-cart-conatiner,

    .s-block--animated-products .content-wrap .add-to-cart-container,

    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile {



        /* الجهة اليسرى */
        left: -10px !important;


        /* ارفعه إلى منطقة الصورة */











    }

    /* حجم الدائرة */


    /* الأيقونة في المنتصف */




    /* إخفاء كلمة أضف للسلة فقط */

}

/* =========================================================
   WAFI TREND — FINAL CART BUTTON POSITION FIX
   ========================================================= */

@media (max-width: 768px) {

    /* المرجع الصحيح لموضع الزر */
    .s-block--animated-products .content-wrap {
        position: relative !important;
        overflow: visible !important;
    }

    /* زر السلة: يسار + عند نهاية الصورة */
    .s-block--animated-products .content-wrap .add-to-cart-conatiner,

    .s-block--animated-products .content-wrap .add-to-cart-container,

    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile {

        position: absolute !important;

        /* الجهة اليسرى */
        left: -5px !important;
        right: auto !important;

        /* ارفعه إلى منطقة الصورة */
        top: -33px !important;
        bottom: auto !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;

        z-index: 50 !important;

        transform: none !important;
    }

    /* حجم الدائرة */
    .s-block--animated-products .content-wrap .add-to-cart-conatiner .s-button-element,

    .s-block--animated-products .content-wrap .add-to-cart-container .s-button-element,

    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile .s-button-element {

        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        padding: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;
        border-radius: 50% !important;

        background: #3f6fb6 !important;
        color: #ffffff !important;

        box-shadow:
            0 4px 12px rgba(63, 111, 182, 0.28) !important;
    }

    /* الأيقونة في المنتصف */
    .s-block--animated-products .content-wrap .add-to-cart-conatiner .s-button-text,

    .s-block--animated-products .content-wrap .add-to-cart-container .s-button-text,

    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile .s-button-text {

        width: 100% !important;
        height: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 0 !important;

        color: #fff !important;

        font-size: 0 !important;
        line-height: 1 !important;
    }

    .s-block--animated-products .content-wrap .add-to-cart-conatiner i,

    .s-block--animated-products .content-wrap .add-to-cart-container i,

    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile i {

        display: inline-block !important;

        margin: 0 !important;

        color: #ffffff !important;

        font-size: 18px !important;
        line-height: 1 !important;
    }

    /* إخفاء كلمة أضف للسلة فقط */
    .s-block--animated-products .content-wrap .add-to-cart-conatiner .overflow-hidden,

    .s-block--animated-products .content-wrap .add-to-cart-container .overflow-hidden,

    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile .overflow-hidden {

        position: absolute !important;

        width: 1px !important;
        height: 1px !important;

        margin: -1px !important;
        padding: 0 !important;

        overflow: hidden !important;

        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;

        white-space: nowrap !important;
    }
}


/* =========================================================
   WAFI TREND — MOBILE CART BUTTON FINAL POSITION
   Small + higher + left
   ========================================================= */

@media (max-width: 768px) {

    /* العنصر الحقيقي الموجود في HTML */
    .s-block--animated-products .content-wrap .product-entry__content .fixed-cart-btn-mobile {

        position: absolute !important;

        /* جهة اليسار داخل الكارد */
        left: 1px !important;
        right: 75px !important;

        /* رفع الزر أكثر داخل منطقة الصورة */
        top: -40px !important;
        bottom: auto !important;

        /* إلغاء w-full و mt-3 الموجودة في HTML */
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 50 !important;

        transform: none !important;
    }


    /* العناصر الداخلية لسلة */
    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile salla-add-product-button,

    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile salla-add-product-button>div,

    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile salla-button {

        display: inline-flex !important;

        width: auto !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* الدائرة */
    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile .s-button-element {

        display: inline-flex !important;

        /* تصغير الزر */
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;

        height: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;

        padding: 0 !important;
        margin: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        border: 0 !important;
        border-radius: 50% !important;

        background: #3f6fb6 !important;
        color: #ffffff !important;

        box-shadow:
            0 3px 8px rgba(63, 111, 182, .24) !important;

        transform: none !important;
    }


    /* المحتوى الداخلي */
    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile .s-button-text {

        display: flex !important;

        width: 32px !important;
        height: 32px !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 0 !important;

        color: #ffffff !important;

        font-size: 0 !important;
        line-height: 1 !important;
    }


    /* أيقونة السلة */
    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile .sicon-cart2,

    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile .sicon-shopping-bag2,

    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile .s-button-text>i {

        display: inline-flex !important;

        margin: 0 !important;

        color: #ffffff !important;

        font-size: 14px !important;
        line-height: 1 !important;
    }


    /* إخفاء كلمة أضف للسلة فقط */
    .s-block--animated-products .content-wrap .fixed-cart-btn-mobile .overflow-hidden {

        position: absolute !important;

        width: 1px !important;
        height: 1px !important;

        margin: -1px !important;
        padding: 0 !important;

        overflow: hidden !important;

        clip: rect(0 0 0 0) !important;
        clip-path: inset(50%) !important;

        white-space: nowrap !important;
    }
}

/* =========================================================
   WAFI TREND — DEFINITIVE PRICE STATE FIX V2
   State is assigned by main.js after validating numeric prices.
   This intentionally does NOT trust product-entry--sale or the mere
   presence of .sale-price, because Salla may render those on cards
   that do not have a real discount.
   ========================================================= */

/* Baseline: every regular price is a normal visible price. */
.product-entry__price>.regular-price,
.product-entry__price>.regular-or-normal-price {
    color: #252b33 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    opacity: 1 !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    text-decoration-thickness: 0 !important;
    white-space: nowrap !important;
}

.product-entry__price>.regular-price .sicon-sar,
.product-entry__price>.regular-or-normal-price .sicon-sar {
    color: currentColor !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
}

/* JS-confirmed normal-price state. */
.product-entry__price.wafi-price-normal-state,
.product-entry__price.wafi-price-normal-state *,
.product-entry__price.wafi-price-normal-state s,
.product-entry__price.wafi-price-normal-state del,
.product-entry__price.wafi-price-normal-state .line-through {
    text-decoration: none !important;
    text-decoration-line: none !important;
    text-decoration-color: transparent !important;
    text-decoration-thickness: 0 !important;
}

.product-entry__price.wafi-price-normal-state>.wafi-normal-price,
.product-entry__price.wafi-price-normal-state>.regular-price,
.product-entry__price.wafi-price-normal-state>.regular-or-normal-price {
    color: #252b33 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* JS-confirmed real sale state. */
.product-entry__price.wafi-price-sale-state>.wafi-current-price,
.product-entry__price.wafi-price-sale-state>.sale-price {
    color: #e24444 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    opacity: 1 !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    white-space: nowrap !important;
}

.product-entry__price.wafi-price-sale-state>.wafi-old-price {
    color: #a1a8b0 !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    opacity: 1 !important;
    text-decoration: line-through !important;
    text-decoration-line: line-through !important;
    text-decoration-color: currentColor !important;
    text-decoration-thickness: 1px !important;
    white-space: nowrap !important;
}

@media (max-width: 768px) {

    .product-entry__price.wafi-price-normal-state>.wafi-normal-price,
    .product-entry__price.wafi-price-normal-state>.regular-price,
    .product-entry__price.wafi-price-normal-state>.regular-or-normal-price,
    .product-entry__price.wafi-price-sale-state>.wafi-current-price,
    .product-entry__price.wafi-price-sale-state>.sale-price {
        font-size: 13px !important;
    }

    .product-entry__price.wafi-price-sale-state>.wafi-old-price {
        font-size: 9.5px !important;
    }
}

/* =========================================================
   END — DEFINITIVE PRICE STATE FIX V2
======================================================== */

/* =========================================================
   WAFI TREND — DISCOUNT BADGE FLUSH CORNER
   ملاصقة تمامًا لأعلى ويسار الكارد
   ========================================================= */

.s-block--animated-products .product-entry__image-wrap {
    position: relative !important;
    overflow: visible !important;
}

.s-block--animated-products .product-entry__image-wrap .wafi-discount-percent {

    position: absolute !important;

    /* ملاصقة بحافة الكارد */
    top: -16px !important;
    left: -20px !important;
    right: auto !important;
    bottom: auto !important;

    z-index: 50 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 39px !important;
    min-width: 39px !important;
    max-width: 39px !important;

    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    /*
      الزاوية الخارجية العلوية اليسرى
      تتطابق مع انحناء الكارد
    */
    border-radius:
        10px 4px 7px 3px !important;

    background: #ef5a62 !important;
    color: #ffffff !important;

    font-size: 9px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    text-align: center !important;
    white-space: nowrap !important;

    box-shadow:
        0 3px 8px rgba(239, 90, 98, .18) !important;
}


/* لا تظهر نسخة أخرى بجانب السعر */
.s-block--animated-products .product-entry__price .wafi-discount-percent,

.s-block--animated-products .price-wrapper .wafi-discount-percent {
    display: none !important;
}


/* =========================================================
   MOBILE — نفس الموضع بدون أي Override يعيدها للداخل
   ========================================================= */

@media (max-width: 768px) {

    .s-block--animated-products .product-entry__image-wrap .wafi-discount-percent {

        top: -16px !important;
        left: -8px !important;
        right: auto !important;

        width: 39px !important;
        min-width: 39px !important;
        max-width: 39px !important;

        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;

        border-radius:
            10px 4px 7px 3px !important;

        font-size: 14px !important;
    }
}


.s-block--animated-products .product-entry-btn--wishlist {
    display: none !important;
}


/* =========================================================
   WAFI TREND — COMPACT HOMEPAGE VERTICAL SPACING
   تقليل المسافات بين أقسام الصفحة الرئيسية
   ========================================================= */

@media (max-width: 768px) {

    /* =========================================
       1) قسم التصنيفات
       كان 38px من الأعلى والأسفل
       ========================================= */
    body#app .s-block--categories {
        padding-top: 14px !important;
        padding-bottom: 10px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /* =========================================
       2) أقسام المنتجات
       عروض وباقات / اختيارات / الأكثر مبيعاً...
       ========================================= */
    body#app .s-block--animated-products {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }


    /* عنوان قسم المنتجات */
    body#app .s-block--animated-products .container>.s-block__title {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }


    /* =========================================
       3) البنرات بين أقسام المنتجات
       ========================================= */
    body#app .s-block--fixed-banner {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    /* منع وجود margin إضافي داخل البنر */
    body#app .s-block--fixed-banner>.container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }


    /* =========================================
       4) عناوين الأقسام العامة
       ========================================= */
    body#app .s-block__title {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
    }


    /* =========================================
       5) عندما يأتي قسم منتجات بعد قسم منتجات
       ========================================= */
    body#app .s-block--animated-products+.s-block--animated-products {
        padding-top: 8px !important;
    }


    /* =========================================
       6) منتج ثم بنر
       ========================================= */
    body#app .s-block--animated-products+.s-block--fixed-banner {
        margin-top: 4px !important;
    }


    /* =========================================
       7) بنر ثم منتجات
       ========================================= */
    body#app .s-block--fixed-banner+.s-block--animated-products {
        padding-top: 8px !important;
    }
}

svg[viewBox="0 0 32 32"] path[d^="M30.276 28.391"] {
    display: none !important;
}

.s-block {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* =========================================================
   Wafi Trend — Blog experience refresh
   Scoped to the blog listing page; no store-wide overrides.
========================================================= */
.blog-index {
    --wafi-blog-teal: #15919b;
    --wafi-blog-teal-dark: #0e747d;
    --wafi-blog-ink: #183846;
    --wafi-blog-muted: #71828a;
    --wafi-blog-line: #e5eff0;
    --wafi-blog-soft: #f2f9f8;
    background: #fbfdfd !important;
}

.blog-index .app-inner>.container.mb-8 {
    width: min(100% - 32px, 1280px) !important;
    max-width: 1280px !important;
    margin: 0 auto 72px !important;
    padding: 0 !important;
}

/* Blog masthead */
.blog-index .blog-title-area {
    position: relative !important;
    display: block !important;
    min-height: 188px !important;
    margin: 18px 0 30px !important;
    padding: 88px 30px 26px !important;
    overflow: hidden !important;
    isolation: isolate;
    border: 1px solid rgba(21, 145, 155, .12) !important;
    border-radius: 24px !important;
    background:
        radial-gradient(circle at 12% 105%, rgba(169, 210, 101, .15), transparent 28%),
        radial-gradient(circle at 92% 0%, rgba(21, 145, 155, .16), transparent 30%),
        linear-gradient(120deg, #f8fcfb 0%, #edf8f7 58%, #f8fbf2 100%) !important;
    box-shadow: 0 12px 32px rgba(24, 56, 70, .055) !important;
}

.blog-index .blog-title-area::before {
    content: "مدونة وافي ترند";
    position: relative;
    display: block;
    color: var(--wafi-blog-ink);
    font-size: clamp(25px, 3vw, 36px);
    font-weight: 850;
    line-height: 1.35;
    letter-spacing: -.3px;
}

.blog-index .blog-title-area::after {
    content: "معلومات ونصائح موثوقة تساعدك على العناية بصحتك كل يوم";
    display: block;
    max-width: 640px;
    margin-top: 7px;
    color: #5c7278;
    font-size: 15px;
    line-height: 1.8;
}

.blog-index .blog-title-area>* {
    position: absolute !important;
    z-index: 2;
    inset-block-start: 17px;
    inset-inline-start: 24px;
    margin: 0 !important;
    padding: 0 !important;
    color: #71858a !important;
    font-size: 12px !important;
}

.blog-index .blog-title-area a {
    color: var(--wafi-blog-teal-dark) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* If Salla has no blog categories configured, let the article use the full column. */
.blog-index .app-inner>.container>.grid:has(> nav[aria-label="Sidebar"] ul:empty) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
}

.blog-index nav[aria-label="Sidebar"]:has(ul:empty) {
    display: none !important;
}

.blog-index .app-inner>.container>.grid:has(> nav[aria-label="Sidebar"] ul:empty)>.main-content {
    grid-column: 1 / -1 !important;
}

.blog-index .main-content {
    min-width: 0 !important;
}

/* Visible category panel when category links exist */
.blog-index nav[aria-label="Sidebar"]:not(:has(ul:empty)) {
    align-self: start;
    padding: 22px 20px !important;
    border: 1px solid var(--wafi-blog-line) !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(24, 56, 70, .045) !important;
}

.blog-index nav[aria-label="Sidebar"] h2 {
    margin: 0 0 16px !important;
    color: var(--wafi-blog-ink) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
}

.blog-index nav[aria-label="Sidebar"] ul:not(:empty) {
    display: grid !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.blog-index nav[aria-label="Sidebar"] ul a {
    display: flex !important;
    align-items: center;
    min-height: 42px;
    padding: 9px 12px !important;
    border-radius: 11px !important;
    color: #526b72 !important;
    background: #f7fbfa !important;
    text-decoration: none !important;
    transition: color .2s ease, background .2s ease, transform .2s ease;
}

.blog-index nav[aria-label="Sidebar"] ul a:hover {
    color: var(--wafi-blog-teal-dark) !important;
    background: #eaf6f5 !important;
    transform: translateX(-2px);
}

/* Featured article card */
.blog-index .post-entry {
    display: grid !important;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto 30px !important;
    overflow: hidden !important;
    border: 1px solid var(--wafi-blog-line) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: 0 14px 38px rgba(24, 56, 70, .075) !important;
    transition: transform .25s ease, box-shadow .25s ease;
}

.blog-index .post-entry:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 46px rgba(24, 56, 70, .11) !important;
}

.blog-index .post-entry__image {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 340px !important;
    overflow: hidden !important;
    background: #edf5f4 !important;
}

.blog-index .post-entry__image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 340px !important;
    object-fit: cover !important;
    transition: transform .55s cubic-bezier(.2, .7, .2, 1) !important;
}

.blog-index .post-entry:hover .post-entry__image img {
    transform: scale(1.035);
}

.blog-index .post-entry>.flex-1 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 34px 34px 12px !important;
}

.blog-index .post-entry h3 {
    margin: 14px 0 11px !important;
    color: var(--wafi-blog-ink) !important;
    font-size: clamp(21px, 2vw, 28px) !important;
    font-weight: 850 !important;
    line-height: 1.55 !important;
}

.blog-index .post-entry h3 a {
    color: inherit !important;
    text-decoration: none !important;
    transition: color .2s ease;
}

.blog-index .post-entry h3 a:hover {
    color: var(--wafi-blog-teal-dark) !important;
}

.blog-index .post-entry p {
    margin: 0 !important;
    color: var(--wafi-blog-muted) !important;
    font-size: 15px !important;
    line-height: 1.95 !important;
}

.blog-index .post-entry a[href*="/author/"] {
    color: var(--wafi-blog-teal-dark) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.blog-index .post-entry>.flex.flex-wrap {
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 34px 28px !important;
}

.blog-index .post-entry a[href*="/tag-"] {
    display: inline-flex !important;
    align-items: center;
    min-height: 31px;
    margin: 0 !important;
    padding: 5px 11px !important;
    border: 1px solid #e1efee !important;
    border-radius: 999px !important;
    color: #557076 !important;
    background: var(--wafi-blog-soft) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.blog-index .post-entry a[href*="/tag-"]:hover {
    border-color: rgba(21, 145, 155, .3) !important;
    color: var(--wafi-blog-teal-dark) !important;
    background: #e6f5f3 !important;
}

.blog-index a:focus-visible {
    outline: 3px solid rgba(21, 145, 155, .45) !important;
    outline-offset: 3px !important;
}

@media (max-width: 767px) {
    .blog-index .app-inner>.container.mb-8 {
        width: calc(100% - 24px) !important;
        margin-bottom: 46px !important;
    }

    .blog-index .blog-title-area {
        min-height: 158px !important;
        margin: 12px 0 20px !important;
        padding: 75px 19px 20px !important;
        border-radius: 19px !important;
    }

    .blog-index .blog-title-area::before {
        font-size: 25px;
    }

    .blog-index .blog-title-area::after {
        max-width: 100%;
        margin-top: 4px;
        font-size: 13px;
        line-height: 1.7;
    }

    .blog-index .blog-title-area>* {
        inset-block-start: 14px;
        inset-inline-start: 17px;
        font-size: 11px !important;
    }

    .blog-index .post-entry {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 22px !important;
        border-radius: 19px !important;
    }

    .blog-index .post-entry__image,
    .blog-index .post-entry__image img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 10;
    }

    .blog-index .post-entry>.flex-1 {
        padding: 21px 20px 9px !important;
    }

    .blog-index .post-entry h3 {
        margin: 11px 0 8px !important;
        font-size: 21px !important;
        line-height: 1.55 !important;
    }

    .blog-index .post-entry p {
        font-size: 14px !important;
        line-height: 1.85 !important;
    }

    .blog-index .post-entry>.flex.flex-wrap {
        padding: 0 20px 21px !important;
        gap: 7px !important;
    }
}

@media (prefers-reduced-motion: reduce) {

    .blog-index .post-entry,
    .blog-index .post-entry__image img,
    .blog-index nav[aria-label="Sidebar"] ul a,
    .blog-index .post-entry a[href*="/tag-"] {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

@media (max-width: 767px) {
    .blog-index .blog-title-area>.dropdown-toggler.cat-filter:not(:has(ul a)) {
        display: none !important;
    }

    .blog-index .blog-title-area>salla-breadcrumb.breadcrumbs {
        position: absolute !important;
        inset-block-start: 14px !important;
        inset-inline-start: 17px !important;
        inset-inline-end: auto !important;
    }
}

/* =======================================================
   Wafi Trend — Barcode / SKU Camera Search Inside Input
======================================================= */
.header__search,
salla-search,
.header-search,
form[action*="search"],
.store-header .search-wrapper {
    position: relative !important;
}

/* زر الباركود داخل مربع البحث */
#wafi-barcode-search-trigger,
.wafi-barcode-btn-trigger {
    position: absolute;
    top: 50%;
    inset-inline-end: 12px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #64748b;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 15;
    transition: all .2s ease-in-out;
}

#wafi-barcode-search-trigger svg,
.wafi-barcode-btn-trigger svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: transform .2s ease, stroke .2s ease;
}

#wafi-barcode-search-trigger:hover,
.wafi-barcode-btn-trigger:hover {
    color: var(--wafi-primary, #006b73);
    background: rgba(0, 107, 115, 0.08);
}

/* منع ظهور زر الباركود في وسوم وكلمات آخر ما تم البحث عنه فقط */
a[href*="?q="] .wafi-barcode-btn-trigger,
a[href*="search?"] .wafi-barcode-btn-trigger,
button.s-tag .wafi-barcode-btn-trigger,
.s-search-history .wafi-barcode-btn-trigger,
.search-history .wafi-barcode-btn-trigger,
[class*="history"] .wafi-barcode-btn-trigger,
[class*="recent"] .wafi-barcode-btn-trigger,
[class*="keywords"] .wafi-barcode-btn-trigger,
[class*="tags"] .wafi-barcode-btn-trigger,
[class*="suggestion"] .wafi-barcode-btn-trigger {
    display: none !important;
}

#wafi-barcode-search-trigger:hover svg,
.wafi-barcode-btn-trigger:hover svg {
    transform: scale(1.1);
}

#wafi-barcode-search-trigger:active,
.wafi-barcode-btn-trigger:active {
    transform: translateY(-50%) scale(0.92);
}

/* في حال كان زر ابحث في القائمة الجانبية رابطاً أو زراً كبيراً */
#storemenu-panel a[href*="search"],
.side-panel a[href*="search"],
#storemenu-panel [data-show="search"] {
    position: relative !important;
}

/* تعديل مساحة حقل الإدخال لعدم تداخل النص مع الزر */
.header__search input,
#storemenu-panel input,
.side-panel input,
salla-search input,
form[action*="search"] input {
    padding-inline-end: 42px !important;
}

/* نافذة الكاميرا Modal */
#wafi-barcode-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
    visibility: hidden;
}

#wafi-barcode-modal.is-open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

#wafi-barcode-modal .wafi-barcode-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

#wafi-barcode-modal .wafi-barcode-dialog {
    position: relative;
    background: #ffffff;
    width: 100%;
    max-width: 440px;
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
    z-index: 2;
    direction: rtl;
    text-align: right;
    font-family: inherit;
    transform: scale(0.95);
    transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1);
}

#wafi-barcode-modal.is-open .wafi-barcode-dialog {
    transform: scale(1);
}

.wafi-barcode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.wafi-barcode-header h2 {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wafi-barcode-header h2 svg {
    color: var(--wafi-primary, #006b73);
}

.wafi-barcode-close {
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 15px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
}

.wafi-barcode-close:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.wafi-barcode-help {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 14px 0;
    line-height: 1.5;
}

.wafi-barcode-camera-wrap {
    position: relative;
    width: 100%;
    height: 260px;
    border-radius: 14px;
    overflow: hidden;
    background: #090d16;
    display: flex;
    align-items: center;
    justify-content: center;
}

#wafi-barcode-reader {
    width: 100% !important;
    border: none !important;
}

#wafi-barcode-reader video,
#wafi-barcode-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
}

#wafi-barcode-reader img[alt="Info icon"],
#wafi-barcode-reader__dashboard_section_csr span {
    display: none !important;
}

/* إطار التوجيه والمسح */
.wafi-barcode-guide {
    position: absolute;
    width: 75%;
    height: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.wafi-barcode-guide .corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: #00d2b4;
    border-style: solid;
}

.wafi-barcode-guide .corner.tl {
    top: 0;
    left: 0;
    border-width: 3px 0 0 3px;
    border-top-left-radius: 8px;
}

.wafi-barcode-guide .corner.tr {
    top: 0;
    right: 0;
    border-width: 3px 3px 0 0;
    border-top-right-radius: 8px;
}

.wafi-barcode-guide .corner.bl {
    bottom: 0;
    left: 0;
    border-width: 0 0 3px 3px;
    border-bottom-left-radius: 8px;
}

.wafi-barcode-guide .corner.br {
    bottom: 0;
    right: 0;
    border-width: 0 3px 3px 0;
    border-bottom-right-radius: 8px;
}

.wafi-barcode-scan-line {
    position: absolute;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00d2b4, #fff, #00d2b4, transparent);
    box-shadow: 0 0 12px #00d2b4;
    animation: wafiBarcodeScan 2s infinite ease-in-out;
}

@keyframes wafiBarcodeScan {
    0% { top: 5%; opacity: 0.3; }
    50% { top: 92%; opacity: 1; }
    100% { top: 5%; opacity: 0.3; }
}

.wafi-barcode-status {
    font-size: 13px;
    color: #475569;
    text-align: center;
    margin: 10px 0 8px;
    min-height: 20px;
    font-weight: 500;
}

.wafi-barcode-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.wafi-barcode-start {
    background: var(--wafi-primary, #006b73);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease;
}

.wafi-barcode-start:hover {
    background: #00545a;
}

.wafi-barcode-manual {
    border-top: 1px dashed #e2e8f0;
    padding-top: 12px;
}

.wafi-barcode-manual label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 6px;
}

.wafi-barcode-manual-row {
    display: flex;
    gap: 8px;
}

.wafi-barcode-manual-row input {
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    outline: none;
    transition: border-color .2s ease;
}

.wafi-barcode-manual-row input:focus {
    border-color: var(--wafi-primary, #006b73);
}

.wafi-barcode-manual-row button {
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.wafi-barcode-manual-row button:hover {
    background: var(--wafi-primary, #006b73);
    color: #ffffff;
    border-color: var(--wafi-primary, #006b73);
}