/* Add custom CSS styles below */ 
/* ----start---header---in this theme---- */
header.header.store-header.header--mini.has- {
  box-shadow: 0px 4px 4px 0px #00000040;
  background-color: #FFFFFF !important;
}

body{
  background-color: #F9F9F9 !important;
}
.header--boxed #main-nav:not(.fixed-pinned) {
  margin-block: 0px !important;
  border-radius: 0 !important;
}

@media(min-width:640px) {
  .navbar-brand img {
    max-height: 120px !important;
  }
}
@media(max-width:640px) {
  .navbar-brand img {
    max-height: 80px !important;
  }
}
.store-header .main-menu li>a{
  padding: 0  18px 18px 18px!important;
}

.quicklinks-item:hover span:before {
    width: 100%;
    opacity: 1;
}
span.item-img.image--aspect-ratio.image--aspect-ratio--portrait.bg-gray-100.relative {
    background-color: transparent !important;
    padding-bottom: 130px !important;
  width: 172px !important;
}
.promotion-title {
    background-color: #D4AF37 !important;
    color: #ffffff !important;
}
.badge {
    background-color: #D4AF37 !important;
    color: #ffffff !important;
}
  .promotion-title {
    background-color: #D4AF37 !important;
    color: #ffffff !important;
}
.badge {
    background-color: #D4AF37 !important;
    color: #ffffff !important;
}


a.group.slide--cat-entry.p-3.sm\:p-6.has-image.has-zoom-transition.is-portrait {
    background-color: transparent !important;
}
span.absolute.inset-0.border.border-gray-1500.bg-gray-100.rounded.rotate-\[-7deg\].group-hover\:rotate-0.scale-105.group-hover\:scale-100.-z-10.transition-transform.duration-300 {
    background-color: transparent !important;
    border-color: transparent;
}
img.lazy.relative.z-10.transition-transform.duration-300.ease-in-out.loaded {
    height: 172px !important;
    width: 172px !important;
}
h2.text-base.xl\:text-2xl {
    font-size: 20px;
    font-weight: 400;
    color:#011421;
}
a.group.slide--cat-entry.p-3.sm\:p-6.has-image.has-zoom-transition.is-portrait:hover h2.text-base.xl\:text-2xl {
    color: #BA7326;
}
.px-4.flex.items-center.w-full.lg\:w-1\/3.relative.py-0.md\:py-14.overflow-hidden.md\:min-h-\[280px\].lg\:min-h-\[380px\].rounded.aos-init.aos-animate {
    padding-top: 0 !important;
}

.right-side.flex.flex-col.items-start.justify-center {
    margin-bottom: 0 !important;
    h2.text-start {
        font-size: 32px !important;
        font-weight: bold !important;
        color: #011421 !important;
    }
}


@media(min-width:767px){
    .s-block--products-slider-with-side-fixedarea .s-slider-v-centered .s-slider-block__title-nav{
    top:69% !important;
}
}
salla-slider.s-slider-v-centered .s-slider-block__title-nav button {
  border: 1px solid #032B49 !important;
  background-color: transparent !important;
  &:hover{
    background-color: #BA7326 !important;
    border-color: #BA7326 !important;
    svg{
      fill: white !important;
    }
  }
  
}
button.s-button-element.s-button-btn.s-button-solid.s-button-large.s-button-wide.s-button-primary.s-button-loader-center {
    background-color: #BA7326 !important;
    color: white !important;
    border-radius: 10px;
    border-color: #BA7326 !important;
    &:hover{
        background-color: white !important;
        border-color: #BA7326 !important;
        color:#BA7326 !important
    }
}
span.regular-or-normal-price.normal-price {
    color:#032B49 !important;
}
a.product-entry__title {
    font-size: 16px;
    font-weight: 500;
    color:#011421 !important;
    transition: all .3s ease;
    &:hover{
        color:#BA7326 !important;
    }
}
p.product-entry__promotion_title.px-2.md\:px-2\.5.lg\:px-4.pb-0\.5.lg\:py-1.max-w-\[55\%\].overflow-hidden.text-ellipsis.whitespace-nowrap.bg-\[\#00af6c\].text-white.rounded-\[100px\].text-xs.md\:text-sm {
    background-color: #032B4929;
    border-radius: 5px;
    border: 1px solid #032B493D;
    color:#032B49;
}
img.lazy.loaded {
    border-radius: 0 !important;
}
a.h-12.px-4.py-3.bg-white.rounded-xl.border.border-\[\#eeeeee\].justify-center.items-center.gap-2.flex.text-center.text-\[\#444444\].text-base.font-semibold.leading-normal.hover\:bg-primary.hover\:text-color-primary-reverse.transition-colors.duration-300 {
    border: 1px solid #032B49;
    background-color: #BA73261A;
}
.p-6.bg-white.rounded-2xl.gap-4.flex.flex-col.md\:flex-row.md\:items-end.anime-item.aos-init.aos-animate {
    background-color: #BA73261A;
    --border-radius: 10px !important;
}
@media (min-width: 768px) {
    dl.md\:pb-\[101px\].space-y-2.md\:space-y-6 {
        padding-bottom: 75px;
    }
}
.py-2.md\:py-6.overflow-hidden.px-4.anime-item.border-b.border-\[\#eeeeee\].aos-init.aos-animate {
   border-bottom: 1px solid #BA732652
}

i.sicon-keyboard_arrow_down.text-2xl {
    color: #BA7326;
}
.bg-\[\#F8F8F8\].h-full.rounded-3xl.flex.flex-col.relative.pb-24 {
    background-color: #032B49 !important;
    border-radius: 20px !important;
    color: white !important;
}
figcaption.flex.gap-5.border-gray-100.border-t.p-2.md\:p-5.mt-auto.rounded-tl-3xl.absolute.bottom-0.right-0.w-fit.bg-white {
    background-color: #BA7326 !important;
    color: white !important;
    border-top-width:0 !important;
    padding: 11px 15px;
     border-radius: 20px 0 20px!important;
    p{
        color: white !important;
    }
}
.block.mt-4.text-base.text-gray-600.leading-relaxed.max-w-2xl,h3.font-extrabold.text-2xl.md\:text-2xl.text-gray-800.mb-2\.5 {
    color: white;
}
ul#widget-footer-menu {
    display: flex;
    flex-direction: column;
}

button.\!justify-end.\!font-normal.\!border-none.h-8.s-button-element.s-button-btn.s-button-outline.s-button-light-outline.s-button-loader-after {
    border: 1px solid #011421 !important;
    transition: .3s ease-in-out;
}
.store-footer__bottom-bar.mx-auto.md\:rounded-full.rounded-\[32px\].bg-white.py-6.px-6.md\:px-10.border {
    border-width: 0 !important;
    border-color: transparent !important;
}
.store-footer .s-social-link a{
    background-color: #BA7326 !important;
    transition: .3s ease-in-out;
    svg{
        fill: white !important;
    }
}
.store-footer .s-social-link a:hover{
   transform: scale(1.1) !important;
    svg{
        
        transform: rotate(360deg) !important;
    }
}
button.\!justify-end.\!font-normal.\!border-none.h-8.s-button-element.s-button-btn.s-button-outline.s-button-light-outline.s-button-loader-after:hover {
    background-color: #BA7326 !important;
    color: white !important;
    border: 1px solid #BA7326 !important;
    
}
span.s-contacts-icon {
    border-color: #BA7326 !important;
    transition: .3s ease-in-out;
    svg{
        fill: #BA7326 !important;
        transition: .3s ease-in-out;
    }
    &:hover{
        background-color: #BA7326 !important;
        transform: scale(1.1) !important;
        svg{
            fill: white !important;
        }
    }
}

@media(max-width:767px){
.s-block--main-slider-2.is-first-block .swiper-slide {
     padding-top: 0!important
}
}


.s-block--main-slider-2 .swiper-slide img.swiper-lazy {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}
/* .header--boxed #main-nav:not(.fixed-pinned) {
    box-shadow: 0px 4px 4px 0px #00000040;
} */

.main-nav.fixed-pinned .inner{
    box-shadow: 0px 4px 4px 0px #00000040;

}
section.s-block.s-block--anime.s-block--categories.is-slider.portrait.align-below.has-title.three-in-mobile {
    padding-block: 65px;
}
section#products-slider-2-slider {
    margin-bottom: 40px;
}




.custom-whatsapp {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;

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

    background: #25D366 !important;
    border-radius: 50% !important;

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

    z-index: 999999 !important;

    box-shadow: 0 4px 14px rgba(0,0,0,0.22) !important;

    text-decoration: none !important;

    transition: all 0.25s ease !important;
}

.custom-whatsapp .whatsapp-svg {
    width: 36px !important;
    height: 36px !important;

    display: block !important;

    transform: translateY(0) !important;
}

.custom-whatsapp:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.28) !important;
}

@media (max-width: 768px) {

    .custom-whatsapp {
        width: 54px !important;
        height: 54px !important;

        right: 16px !important;
        bottom: 65px !important;
    }

    .custom-whatsapp .whatsapp-svg {
        width: 32px !important;
        height: 32px !important;
    }
}



/* =========================================
   Mobile Bottom Navigation
   ========================================= */

.custom-mobile-bottom-nav {
    display: none;
}


/* Mobile Only */
@media (max-width: 767px) {
  .s-modal-entering{
        --tw-translate-y: -65px !important;
  }
  .s-user-menu-toggler.opened .s-user-menu-dropdown{
    --tw-translate-y: -65px !important;
  }
    body {
        padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    }


    /* =========================================
       Main Bar
       ========================================= */

    .custom-mobile-bottom-nav {
        position: fixed;

        bottom: 0;
        left: 0;
        right: 0;

        z-index: 99999;

        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: center;

        width: 100%;
        height: calc(68px + env(safe-area-inset-bottom));

        padding: 0 5px env(safe-area-inset-bottom);

        background: #ffffff;

        border-top: 1px solid #eeeeee;

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

        direction: rtl;

        box-sizing: border-box;
    }


    /* =========================================
       Items
       ========================================= */

    .custom-mobile-bottom-nav .bottom-nav-item {
        position: relative;

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

        gap: 4px;

        width: 100%;
        height: 68px;

        margin: 0;
        padding: 5px 1px;

        border: 0;
        outline: 0;

        background: transparent;

        color: #222222;

        font-family: inherit;
        font-size: 10px;
        font-weight: 400;
        line-height: 1.2;

        text-decoration: none;

        cursor: pointer;

        box-sizing: border-box;

        -webkit-tap-highlight-color: transparent;
        -webkit-appearance: none;
        appearance: none;
    }


    .custom-mobile-bottom-nav .bottom-nav-item:hover,
    .custom-mobile-bottom-nav .bottom-nav-item:focus {
        color: #222222;
        text-decoration: none;
        outline: none;
    }


    /* =========================================
       Icons
       ========================================= */

    .custom-mobile-bottom-nav svg {
        display: block;

        width: 23px;
        height: 23px;

        flex-shrink: 0;

        fill: none;

        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


    /* =========================================
       Text
       ========================================= */

    .custom-mobile-bottom-nav .bottom-nav-item > span {
        display: block;

        white-space: nowrap;

        color: inherit;
    }


    /* =========================================
       Active Item
       ========================================= */

    .custom-mobile-bottom-nav .bottom-nav-item.active {
        font-weight: 600;
    }


    /* =========================================
       Center Logo
       ========================================= */

    .custom-mobile-bottom-nav .nav-logo {
        padding: 2px;
    }


    .custom-mobile-bottom-nav .nav-logo img {
        display: block;

        width: 50px;
        height: 50px;

        max-width: 50px;

        object-fit: contain;

        margin: 0 auto;
    }


    /* =========================================
       Cart Icon Wrapper
       ========================================= */

    .custom-mobile-bottom-nav .bottom-nav-icon-wrap {
        position: relative;

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


    /* =========================================
       Cart Count Badge
       ========================================= */

    .custom-mobile-bottom-nav .custom-cart-count {
        position: absolute;

        top: -7px;
        right: -9px;

        display: none;

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

        min-width: 16px;
        height: 16px;

        padding: 0 4px;

        border-radius: 20px;

        background: #e91e63;

        color: #ffffff !important;

        font-size: 9px;
        font-weight: 600;
        line-height: 16px;

        text-align: center;

        box-sizing: border-box;
    }


    .custom-mobile-bottom-nav .custom-cart-count.show {
        display: flex;
    }

}


/* =========================================
   Desktop / Tablet
   ========================================= */

@media (min-width: 768px) {

    .custom-mobile-bottom-nav {
        display: none !important;
    }

}




.custom-mobile-bottom-nav .custom-account-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-mobile-bottom-nav .bottom-nav-user-avatar {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    object-fit: cover;
}

@media (max-width: 767px) {
    .custom-whatsapp {
        bottom: 85px !important;
    }
}


/* =========================
   FIX SLIDER UNDER HEADER
========================= */

/* @media (min-width: 768px) {
    .s-block--main-slider-2 {
        margin-top: 120px !important;
    }
}

@media (max-width: 767px) {
    .s-block--main-slider-2 {
        margin-top: 80px !important;
    }
} */


/* إخفاء القائمة المنسدلة الأصلية فقط */
section.product-options-section select,
.s-product-options-wrapper select {
    display: none !important;
}

/* إعادة إظهار عنوان الكمية وجعله متناسقاً */
.s-product-options-option-label {
    display: flex !important;
    align-items: center;
    gap: 5px;
    margin-bottom: 6px;
    font-size: 14px;
}

/* حاوية أزرار الخيارات بمسافات ضيقة ومترابطة */
.custom-options-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* عرض الأزرار في عمودين */
    gap: 6px; /* مسافة صغيرة جداً بين المربعات */
    margin-top: 4px;
    margin-bottom: 12px;
}

/* شكل زر الاختيار */
.custom-option-btn {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    width: 100%;
}

/* شكل الزر عند المرور عليه */
.custom-option-btn:hover {
    border-color: #111;
}

/* شكل الزر النشط/المحدد */
.custom-option-btn.active {
    background-color: #111;
    color: #fff;
    border-color: #111;
}
.px-4.py-1.bg-\[\#00af6c\]{
   background-color: #C8102E !important;
}

/* @media (max-width:767px){
  .s-block--main-slider-2 salla-slider{
    margin-top:43px !important;
    ;
}
} */



/* =========================================
   FIX MOBILE MAIN SLIDER
   1024 x 416
   ========================================= */

.s-block--main-slider-2 salla-slider {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1024 / 416 !important;
    overflow: hidden !important;
}

.s-block--main-slider-2 .s-slider-container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1024 / 416 !important;
    overflow: hidden !important;
}

.s-block--main-slider-2 .swiper {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1024 / 416 !important;
    overflow: hidden !important;
}

.s-block--main-slider-2 .swiper-wrapper {
    width: 100% !important;
    height: 100% !important;
}

.s-block--main-slider-2 .swiper-slide {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.s-block--main-slider-2 .swiper-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .s-block--main-slider-2 salla-slider,
    .s-block--main-slider-2 .s-slider-container,
    .s-block--main-slider-2 .swiper {
        width: 100% !important;
        height: calc(100vw * 0.40625) !important;
        aspect-ratio: 1024 / 416 !important;
    }

    .s-block--main-slider-2 .swiper-wrapper,
    .s-block--main-slider-2 .swiper-slide {
        height: 100% !important;
    }

    .s-block--main-slider-2 .swiper-slide img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

}
@media (max-width: 767px) {
    /* 1. فرض الارتفاع الدقيق للحاوية الرئيسية وتجاهل حسابات Swiper المضمنة */
    .s-block--main-slider-2,
    .s-block--main-slider-2 salla-slider,
    .s-block--main-slider-2 .s-slider-container,
    .s-block--main-slider-2 .swiper {
        width: 100% !important;
        /* حساب الارتفاع ديناميكياً بناءً على نسبة 416/1024 */
        height: calc(100vw * 0.40625) !important; 
        min-height: unset !important;
        max-height: unset !important;
        overflow: hidden !important;
    }

    /* 2. إجبار الغلاف والشرائح على الالتزام بارتفاع الحاوية الجديد */
    .s-block--main-slider-2 .swiper-wrapper,
    .s-block--main-slider-2 .swiper-slide {
        height: 100% !important;
        min-height: unset !important;
        background-color: transparent !important;
    }

    /* 3. ضبط أبعاد الصورة لتملأ المساحة الجديدة بدقة */
    .s-block--main-slider-2 .swiper-slide img.swiper-lazy {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important; 
    }

    /* 4. إخفاء ظلال تأثير الـ Cube الوهمية التي تخلق مساحات إضافية */
    .s-block--main-slider-2 .swiper-cube-shadow,
    .s-block--main-slider-2 .swiper-slide-shadow-cube,
    .s-block--main-slider-2 .swiper-slide-shadow-left,
    .s-block--main-slider-2 .swiper-slide-shadow-right {
        display: none !important;
        opacity: 0 !important;
    }
}
.s-block--main-slider-2.is-fullscreen salla-slider, .s-block--main-slider-2.is-fullscreen div[slot=items], .s-block--main-slider-2.is-fullscreen .swiper-slide {
    height: 100vh;
    min-height: 0;
}
@media (max-width: 767px) {
  a.scroll-down {
    display: none;
}
}
@media (max-width: 768px) {
    #app.fixed-add-to-cart-bar .addtocart-bar, #app.product-single .addtocart-bar {
        position: relative;
    }
}
@media (max-width: 767px) {
    .s-cart-summary-card {
        /* z-index: 999999; */
        position: fixed !important;
      transform: translatey(-67px);
     
    
    } 
}