/*================================*/
@import url('https://fonts.googleapis.com/css2?family=Beiruti:wght@200..900&display=swap');
:root{
        --font-main: 'Beiruti'!important;
        --main-text-color: #370909;
        --color-primary: #ac2865;
        --color-headding: #b61a62;
        --shadow-all: 0px 0px 5px 0px #00000021;
        --shadow-bottom: 0px 2px 4px 0px #00000021;
        --box-border-color: 1px solid #dae0eb;
        --button-height:2rem;
        --color-primary-trans:#ac2865cf;
}

/*تصميم الازرار */
a.btn--main.btn--outline:hover,
button.btn--main.btn--outline:hover,
.btn--add-to-cart button.btn--outline:hover

 {
    background-color: var(--color-primary)!important;
}

a.btn--main.btn--outline,
button.btn--main.btn--outline,
.btn--add-to-cart button.btn--outline

 {
    border-width: 1px;
    border-color: var(--color-primary)!important;
    color: var(--color-primary)!important;
}
/* تنسيقات السلايدر الرئيسي للموبايل */
@media (max-width: 992px) {
    .s-block--main-slider-1 salla-slider, 
    .s-block--main-slider-1 div[slot=items], 
    .s-block--main-slider-1 .swiper-slide {
        height: 250px;
    }

    .pagination--narrow-buttons salla-slider.s-slider-v-centered .s-slider-block__title-nav {
        width: 4rem;
    }

    .s-slider-nav-arrow {
        height: 1.5rem;
        width: 1.5rem;
    }

    .s-block--main-slider-1 .container.slide-content {
        flex-direction: row;
    }

    .s-block--main-slider-1 .anime-item__img {
        transform: translate(0px, -14px) scale(1.3) !important;
    }

    .s-block--main-slider-1 .relative.flex.flex-col {
        /* تصحيح الخطأ هنا: إزالة القوس الزائد */
        transform: translate(26px, 17px) scale(.8);
    }

    .s-block--main-slider-1 .btn--main {
        bottom: 0px;
    }

    .s-block--main-slider-1 .bg-big-text {
        /* تصحيح الخطأ هنا: الفاصلة المنقوطة */
        --tw-translate-y: 200% !important;
    }

    .s-block--main-slider-1 .swiper-pagination {
        --tw-translate-y: 10px !important;
    }

    .s-block--main-slider-1 .s-slider-block__title-nav {
        top: 88% !important;
    }
}

/*#############################*/
/* شريط الاعلانات */
/*///////////////mobile\\\\\\\\\\\*/
@media (max-width: 992px) {
    .s-block--marquee .marquee__content li svg {
        margin-left: 1rem;
        margin-right: 1rem;
        width: 17px;
    }

    .s-block--marquee {
        position: relative;
        padding-top: 3px;
        padding-bottom: 3px;
    }
}

/*///////////////////\\\\\\\\\\\\\\\\\*/

/* =================================================
   تنسيق السلايدر المستطيل (Rectangular Slider)
   ================================================= */
.s-block--categories.is-slider.rectangular {
    box-shadow: 0px 0px 5px 0px #0000002b;
}

/* 1. ضبط عرض الشريحة (الكمبيوتر = 20%) */
.s-block--categories.rectangular .swiper-slide {
    width: 20% !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 2. إلغاء قيود الحاوية والصندوق الرمادي */
.s-block--categories.rectangular .item-img {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
}

/* 3. تنسيق الصورة نفسها */
.s-block--categories.rectangular .item-img img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* 4. إخفاء الظلال أو الحدود الزائدة */
.s-block--categories.rectangular .slide--cat-entry {
    border: none !important;
    box-shadow: none !important;
}

.s-block--categories.rectangular .swiper-scrollbar-drag::before {
    background-color: #f5297a !important;
}

/* =================================================
   تخصيص الجوال (Mobile) للتصنيفات
   ================================================= */
@media (max-width: 768px) {
    .s-block--categories.rectangular .swiper-slide {
        width: 30% !important;
        margin-left: 5px !important;
    }
    .s-block--categories.rectangular .s-slider-nav-arrow {
        display: none !important;
    }
    .s-block--categories.rectangular .swiper-scrollbar {
        width: calc(100% - 40px) !important;
        bottom: 0 !important;
    }
    .s-block--categories.rectangular .s-slider-container {
        padding-bottom: 1.5rem !important;
        background: #f3f3f38a;
        padding-top: 1rem;
        border: 1px solid #eae7e752;
    }
}

.s-block--categories.rectangular .slide--cat-entry,
.s-block--categories.rectangular img,
.s-block--categories.rectangular .image--aspect-ratio {
    border-radius: 5px !important;
}

/*////////////////////// بنرات مربعه*/
/* =================================================
   تنسيق شبكة البنرات الرباعية (2x2)
   Target: .banners-grid--4
   ================================================= */
.banners-grid.banners-grid--4 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: none !important;
    max-height: none !important;
    gap: 1rem !important;
    grid-template-rows: auto auto !important;
}

.banners-grid--4 {
    grid-template-rows: auto auto !important;
    max-width: 1400px;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0px;
    padding-left: 0px;
}

.banners-grid--4 .banner-entry {
    max-height: none !important;
    height: auto !important;
    grid-row: auto !important;
    grid-column: auto !important;
    aspect-ratio: unset !important;
}

.banners-grid--4 .banner-entry a {
    padding-bottom: 0px !important;
}

.banners-grid--4 .banner-entry:first-child {
    grid-row: auto !important;
    grid-column: auto !important;
}

.banners-grid--4 .banner-entry .h-full {
    height: auto !important;
}

.banners-grid--4 .banner-entry a {
    position: relative !important;
    display: block !important;
    height: auto !important;
}

.banners-grid--4 .banner-entry img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (min-width: 768px) {
    .banners-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 100%;
        grid-template-rows: auto auto !important;
    }
}

/* #########################################################
   ##                PHOTO SLIDER                         ##
   ######################################################### */
@media (max-width: 768px) {
    .s-block--photos-slider .swiper-pagination {
        display: none;
    }
    salla-slider.photos-slider .swiper {
        padding-bottom: 0rem;
    }
}

/* #########################################################
   ##                STATISTICS                           ##
   ######################################################### */
.s-block--statistics {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.s-block--statistics .statistics-item > div {
    display: flex;
    padding: 0px;
    flex-direction: row-reverse;
}

.s-block--statistics .statistics-item > div > div {
    border-radius: 10px;
}

.s-block--statistics .statistics-item > div > div h3 {
    height: 25px;
    font-size: 1.3rem;
}

.s-block--statistics .statistics-item > div > div p {
    font-size: 14px;
    line-height: 1rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .s-block--statistics {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .s-block--statistics .statistics-item > div {
        display: flex;
        padding: 0px;
        flex-direction: row;
        margin: 0 auto;
        width: 80%;
    }
    .s-block--statistics .statistics-item > div > div {
        border-radius: 10px;
    }
    .s-block--statistics .statistics-item > div > div h3 {
        height: 35px;
        font-size: 2.5rem;
    }
    .s-block--statistics .statistics-item > div > div p {
        font-size: 1.5rem;
        line-height: 2rem;
        font-weight: 600;
    }
    section.s-block--statistics > div > div.content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@          STICKY BUY BAR          @@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/
@media (max-width: 768px) {
    #app.fixed-add-to-cart-bar .addtocart-bar.support-sticky-bar {
        transform: translateY(-58px) !important;
        --tw-translate-y: -58px !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: fixed;
        padding: 5px 5px 9px;
    }
}

@media (max-width: 768px) {

/* استهداف الصورة داخل كلاس اللوجو */
    .navbar-brand img {
        content: url("https://cdn.salla.sa/PdgKNr/products/ImfuUQbU564JK0AWzNogmFLGlqq1olViaKpCNvxB.png") !important;
        height: auto !important;
        max-height: 25px !important;
        width: auto !important;
        object-fit: contain !important;
    }

/*############### ناف بار الموبايل ########*/
/* ارتفاع الناف */
.main-nav
 {

    min-height: 30px;
}
  /*ارتفاع البار مع السكرول */
  .main-nav.fixed-header .inner
 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    background: #5f022d82;
    backdrop-filter: blur(5px);

}
  /* اخفاء ايقونات الناف بار */
.s-user-menu-trigger-slot,
.s-cart-summary-wrapper,
.sicon-user{
    /*transform: translatey(-100px);*/
    opacity: 0;
}

/* بار السيرش */
.sicon-search::after {
    content: "البحث......";
    width: 188px;
    height: 26px;
    border-radius: 20px;
    border: 2px solid #ffffffa6;
    display: flex;
    align-items: center;
    position: absolute;
    top: calc(50% - 13px);
    left: calc(35% - 96px);
    font-size: 15px;
    font-family: var(--font-main), -apple-system, BlinkMacSystemFont;
    padding: 5px;
    box-shadow: 0px 0px 10px #e4e4e438;
}
/* ايقونة السيرش */
.sicon-search:before
 {
    content: "\ef09";
    position: absolute;
    top: calc(50% - 7px);
    font-size: 14px;
}
/*قائمة الملف الشخصى */
  .s-user-menu-dropdown{
    transform: translatey(-60px) !important;
}
  .s-user-menu-dropdown-list{
    display: grid;
    grid-template-columns: repeat(2, auto);
    padding-bottom: 0rem;

}
}
.s-user-menu-dropdown-item a {
    font-weight: 600;
    font-size: 1.1rem;
    color: rgb(54 52 52);
}
.s-user-menu-dropdown-item a svg {
    fill: var(--color-primary);
}

#main-nav{
      background: var(--color-primary) !important;
}

/*##############################################
###########       كروت الاصناف         #########
##############################################*/

/* الحاوية الرئيسية للنموذج */
.product-form > div {
    background: #ffffff;
    padding: 5px;
    gap: 2px;
}

/* عنوان المنتج داخل النموذج */
.product-form h2 {
    text-align: center;
}

/* تظبيط زر أضف للسلة */
.product-form .add-to-cart-conatiner salla-button button {
    padding: 3px;
    height: 30px;
    border-radius: 6px;
}

/* النص داخل الزرار */
.product-form .add-to-cart-conatiner salla-button button span {
    gap: 0.5rem;
    padding: 0;
    font-size: 12px;
}

/* حجم الكارت في السلايدر */
.swiper-slide.slide--one-fourth,
.s-products-slider-card.swiper-slide {
    max-width: 145px !important;
}

/* محتوى الكارت (الاسم والسعر) */
.product-entry__content {
    gap: 2px;
    padding: 5px;
    background: white;
}

/* تظبيط الظل والحواف */
.product-entry--vertical .product-entry__inner {
    height: 100%;
    flex-direction: column;
    gap: 0px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
}

.product-entry__image-wrap {
    background: white;
}

.product-entry--vertical .product-entry__content {
    background: white;
}

/* المنتج */
.card-title-is-bold .product-entry__title a {
    font-weight: 700;
    font-size: 12px;
    color: #363636;
}

/* السعر الرئيسي */
.sale-price {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    color: #f5297a;
}

/* السعر القديم */
.regular-or-normal-price {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: #363636;
}

/* زر المفضلة */
.product-entry__image-wrap .product-entry-btn--wishlist {
    height: 25px !important;
    width: 25px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(4px);
}

/*##############################################
###########       Mini Cart            #########
##############################################*/
.smart-mini-cart-drawer {}

.smart-cart-header {
    background: #ff0192;
    margin-bottom: 20px;
    padding: 7px !important;
}

.smart-cart-title {
    font-size: 23px;
    color: #ffffff;
}

.smart-mini-cart-drawer span.absolute {
    top: 0 !important;
    left: 0 !important;
}
/*#########################################
###########################################
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
###########################################
###########################################*/
/*

الاقسام ايقونات

*/
.s-block--categories div.swiper-slide.slide--one-sixth a span img {
    margin: auto;
    object-fit: contain;
    margin-bottom: 8px;
    position: initial;
    margin: auto;
}

.s-block--categories div.swiper-slide.slide--one-sixth a span {
    background: transparent;
    background: #eeeeee;
    padding: 1px;
    border-radius: 50% 50% 50% 50% / 28% 28% 72% 72% !important;
    border: 1px solid rgb(245 41 122 / 40%) !important;
    width: auto;
    height: 60px;
}

.s-block--categories div.swiper-slide.slide--one-sixth {
    width: auto;
}

.s-block--categories div.swiper-slide.slide--one-sixth a {
    width: 60px;
    display: flex;
    justify-content: flex-start;
}

.s-block--categories div.swiper-slide.slide--one-sixth a h2 {
    font-size: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 14px;
}

.product-index-page-header{
    height: fit-content!important;
    width: 100%;
    color: #454545!important;
    margin-bottom: 20px;
    padding: 5px;
      border-bottom: 1px solid #f3f3f3;
    box-shadow: 0px 1px 2px #0000002b;
}
    .product-index-page-header .head-bg {
        background-color: #f6f6f6f6 !important;
}





.product-index-page-header .container > div{
    gap: 0;
    justify-content: start;
    text-align: start;
}

.product-index-page-header .container {
    gap: 0;
    justify-content: start;
    text-align: start;
}

.product-index-page-header h2 {
font-size: 22px;
    font-weight: 600;
    line-height: 50px;
    padding: 4px 0;
}


/*#########################################
########### صفحة المنتج ##################
#########################################*/
.container.product-images--slider .breadcrumbs{
    height: fit-content;
    width: 100%;
    color: #454545;
    margin-bottom: 20px;
    padding: 10px 5px;
    background: #f6f6f6;
    box-shadow: 0px 1px 8px #00000059;
}
.container.product-images--slider{
    padding: 0 !important;
    margin:0 !important;
}

.product-elems{
    padding: 0 10px;
}

.product-brand{
    border: var(--box-border-color);
    box-shadow: var(--shadow-bottom);
    border-radius: 7px;
    padding: 4px 10px;
}
.product-brand a{
    margin: 0;
}
.product-brand a > div{
    gap:0;
}
.product-brand b {
    color: rgb(76 76 76);
}
.product-brand p,
.product-brand a {
    color: var(--brown);
}
article .product__description p{
    color: var(--brown);
}


.product-brand + div.flex > div:first-child {
    flex-direction: column;
}
.text-\[var\(--color-product-details-title\)\]

 {
   font-weight: 500;
}

 .product-single .addtocart-bar salla-button {
    height: 2rem;
}
.product-single .s-add-product-button-main salla-mini-checkout-widget {
    --salla-fast-checkout-button-height: 2rem;
}

.product-single .product-static-info__item:not(:last-child)
 {
     padding-bottom: 0;

}
.product-single .product-static-info
 {
    padding: 0.25rem;
 }

.s-installment-mispay-content, 
.s-installment-madfu-content, 
.s-installment-emkan-content, 
.s-installment-rajehi-content
 {
    flex-direction: column-reverse;
    width: 100%;
    align-items: flex-start;
    gap: 0rem;
    border: 1px solid #dae0eb;
    border-radius: 10px;
    padding: 18px;
}

span.s-installment-emkan-content-text {
    font-size: 16px;
    font-weight: 600;
    color: #7c6363;
}


.s-installment-mispay-content:hover, .s-installment-madfu-content:hover, .s-installment-emkan-content:hover, .s-installment-rajehi-content:hover

 {
    background-color: #f6f6f6 !important;

}
div#progress-scroll {
    z-index: 999999;
}

.s-installment-mispay-wrapper, 
.s-installment-madfu-wrapper, 
.s-installment-emkan-wrapper, 
.s-installment-rajehi-wrapper{
padding:0 !important;
}

.product-single .s-add-product-button-main salla-mini-checkout-widget,
.product-single .addtocart-bar .s-quantity-input-container,
.product-single .addtocart-bar salla-button {
    height: var(--button-height);
}
.product-static-info__item span.text-sm.font-bold.mb-1,
.product-sequential-section h2
 {
    color: var(--color-headding);
    font-weight: 500;
}


/* login modal */
    .s-modal-body
 {
    backdrop-filter: blur(11px);
    border: var(--box-border-color);
    background-color: #ffffffa8;
}