body {
  background: #fff !important;
}
.top-navbar {
  background: #a77b32 !important;
  color: #000 !important;
}
[dir='ltr'] .s-slider-block__title h2,
[dir='rtl'] .s-slider-block__title h2 {
  font-size: 1.5rem !important;
  color: #a77b32 !important;
  padding-bottom: 1rem !important;
}
#mainnav .container,
.s-block.s-block--banners.container {
  width: 100% !important;
  max-width: 100% !important;
}
.main-nav-container i,
.main-nav-container.fixed-header i {
  color: #a77b32 !important;
}
.s-slider-block__title-right {
  flex-grow: 1;
  text-align: center;
}
.main-nav-container.fixed-header img {
  max-height: 5rem !important;
}
.s-block {
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
}
.banner--fixed img {
  background: 0 0 !important;
}
[dir='rtl'] .s-slider-block__title h2 {
  text-align: right;
}
[dir='ltr'] .s-slider-block__title h2 {
  text-align: left;
}
.s-product-card-vertical {
  flex-direction: column;
  outline: 1px solid #a77b32 !important;
}
.swiper-wrapper {
  margin: 30px 0 !important;
}
#mainnav .inner {
  background-color: #fff !important;
}
#mainnav .inner > * {
  color: #a77b32 !important;
}
.main-nav-container.shadow-default.bg-white.fixed-pinned animated.fixed-header,
.s-slider-nav-arrow:not(:disabled):hover {
  background-color: #fff !important;
}
.banner-entry,
.s-block--hero-slider .swiper-slide,
.s-block--hero-slider .swiper-slide .swiper-lazy:after {
  background-color: transparent !important;
}
.mm-spn.mm-spn--navbar:after {
  text-align: center !important;
}
.s-product-card-content-title a {
  text-align: center !important;
  font-size: 1rem !important;
}
.main-menu,
.s-product-card-content-sub {
  justify-content: center !important;
}
.s-product-card-price,
.s-product-card-sale-price * {
  font-size: 1rem !important;
}
.s-product-card-image img {
  max-height: 350px !important;
}
.breadcrumbs li > * {
  color: #a77b32 !important;
}
.s-block.s-block--fixed-banner > .container,
salla-slider.photos-slider .swiper-slide {
  width: 100% !important;
}
.s-product-card-content-footer button {
  background: #a77b32 !important;
  border: 1px solid #000;
  border-radius: 15px !important;
  color: #fff !important;
  font-size: 1rem !important;
  padding: 10px !important;
}
@media (min-width: 1280px) {
  .s-block.s-block--fixed-banner > .container {
    width: 100% !important;
    max-width: 100% !important;
  }
}
.banner-entry {
  background-color: transparent !important;
}
.banner-entry div {
  background-size: cover !important;
}
#mainnav {
  height: auto !important;
}
.s-block.s-block--banners.container {
  padding: 0 !important;
}
.store-footer__inner {
  background-color: #a77b32 !important;
}
.store-footer__inner > * {
  color: #fff !important;
  font-weight: 600 !important;
}
.navbar-brand img {
  max-width: 205px !important;
  max-height: 4rem !important;
}
@media screen and (min-width: 640px) {
  .navbar-brand img {
    max-width: 205px !important;
    max-height: 4rem !important;
  }
}
@media screen and (max-width: 450px) {
  .navbar-brand img {
    max-height: 4rem !important;
  }
  .main-nav-container.fixed-header img {
    max-height: 5rem !important;
  }
}
header.store-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  background-color: #fff;
}
@media screen and (max-width: 1024px) {
  .main-nav-container.fixed-header .inner {
    top: 51px;
    height: auto;
    box-shadow: 0 0 0 transparent;
  }
}
.main-nav-container.fixed-header .inner {
  top: 51px;
  height: auto;
  box-shadow: 0 0 0 transparent;
}
@media screen and (max-width: 678px) {
  .s-block--features__item {
    padding: 0 !important;
  }
}
.testimonial {
  background-color: #a77b32 !important;
  color: #fff !important;
}
.s-block.home-slider {
  margin-top: -30px !important;
}
.q8c6tt-3 ~ div {
  display: none;
}
salla-products-list {
  padding: 10px !important;
}
.carousel-slider .swiper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
salla-slider .swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: -0.25rem !important;
}
.swiper-pagination-bullet {
  background-color: #eee !important;
}
.swiper-pagination-bullet-active {
  background-color: #a77b32 !important;
}
.s-block--features__item .feature-icon {
  background-color: #a77b32 !important;
}
section.s-block--fixed-banner .container {
  padding: 0 !important;
}

@media (min-width: 768px) {
  .s-slider-block__title {
    margin-bottom: 0 !important;
  }
}
.s-slider-block__title {
  margin-bottom: 0 !important;
}
@media (min-width: 640px) {
  .two-row .banner-entry:first-child {
    grid-column: unset !important;
    grid-row: unset !important;
  }
}
salla-slider.photos-slider .swiper {
  padding: 0 !important;
}
salla-slider.photos-slider .swiper-wrapper {
  margin-top: 0 !important;
}
#whatsappButton {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #a77b32;
  border-radius: 50%;
  text-align: center;
  font-size: 27px;
  color: #fff;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
#whatsappButton i {
  color: #fff !important;
}
#whatsappButton:hover {
  background-color: #a77b32 !important;
}


.s-product-card-content-subtitle {
  text-align:center;
  font-size: 0.895rem;
  color:rgb(0,0,10);
}

.s-product-card-price {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    color: red !important;
}

.s-social-list{
  display:none!important;
}

.footer-is-light .store-footer .contact-social {
    border:none;
}

.contact-slot:first-of-type a[href^="tel:"] {
  display:none !important;
  }
  
  .store-footer__inner .container {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 1024px) {
    .lg\:col-span-2 {
        grid-column: auto;
    }
}

@media (max-width: 992px) {
  .store-footer__inner .container {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}


salla-apps-icons{
  display:none !important;
}













/* =====================================================
   X CARE - REMOVE TOP BAR
   MOVE SEARCH + LANGUAGE INTO MAIN HEADER
   ===================================================== */

/* Main header becomes positioning reference */
.store-header {
    position: relative !important;
}

/* Remove gold top bar visually */
.top-navbar {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
}

/* Remove topbar container height */
.top-navbar > .container {
    height: 0 !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}

/* Hide email / contact info */
.top-navbar salla-contacts,
.top-navbar [data-testid="store-header-contacts"] {
    display: none !important;
}

/* Hide unnecessary top nav links */
.top-navbar salla-menu,
.top-navbar [data-testid="store-header-topnav"] {
    display: none !important;
}

/* =====================================================
   SEARCH BOX INSIDE WHITE HEADER
   ===================================================== */

.top-navbar .header-search {
    display: block !important;
    position: absolute !important;

    /* LEFT SIDE OF MAIN HEADER */
    left: 145px !important;
    top: 17px !important;

    width: 340px !important;
    max-width: 340px !important;

    z-index: 999 !important;
    margin: 0 !important;
}

/* Search input styling */
.top-navbar .header-search salla-search {
    width: 100% !important;
}

/* Search field */
.top-navbar .header-search input,
.top-navbar .header-search .s-search-input {
    height: 42px !important;
    border-radius: 24px !important;
    background: #f7f3eb !important;
    border: 1px solid #e5d6b8 !important;
    box-shadow: none !important;
}

/* =====================================================
   LANGUAGE BUTTON INSIDE WHITE HEADER
   ===================================================== */

.top-navbar .header-buttons {
    display: flex !important;
    position: absolute !important;

    left: 500px !important;
    top: 18px !important;

    z-index: 1000 !important;
    margin: 0 !important;
    align-items: center !important;
}

/* Language button styling */
.top-navbar .header-buttons salla-localization-modal {
    margin: 0 !important;
}

/* =====================================================
   MAIN WHITE HEADER
   ===================================================== */

#mainnav {
    min-height: 76px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #eeeeee !important;
}

/* Give enough room on left for search/language */
@media (min-width: 1024px) {

    #mainnav .container {
        position: relative !important;
    }

    #mainnav custom-main-menu {
        margin-left: 470px !important;
    }
}


/* =====================================================
   TABLET
   ===================================================== */

@media (min-width: 768px) and (max-width: 1200px) {

    .top-navbar .header-search {
        left: 135px !important;
        width: 270px !important;
    }

    .top-navbar .header-buttons {
        left: 415px !important;
    }
}


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

@media (max-width: 767px) {

    /* Keep header clean */
    #mainnav {
        min-height: 68px !important;
    }

    /* Smaller search inside header */
    .top-navbar .header-search {
        left: 65px !important;
        right: 120px !important;
        top: 13px !important;
        width: auto !important;
        max-width: none !important;
    }

    .top-navbar .header-search input,
    .top-navbar .header-search .s-search-input {
        height: 40px !important;
    }

    /* Language button */
    .top-navbar .header-buttons {
        left: auto !important;
        right: 65px !important;
        top: 14px !important;
    }

}


/* =====================================================
   X CARE HEADER - PERFECT RTL / LTR MIRROR FIX
   Arabic = LEFT
   English = RIGHT
   ===================================================== */

@media (min-width: 1024px) {

    /* Make container full positioning reference */
    .top-navbar > .container {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
    }


    /* =========================
       SEARCH BOX
       ========================= */

    .top-navbar .header-search {
        position: absolute !important;

        /* IMPORTANT: cancel old positioning */
        left: auto !important;
        right: auto !important;

        /* LTR = RIGHT
           RTL = LEFT */
        inset-inline-end: 145px !important;

        top: 20px !important;

        width: 340px !important;
        max-width: 340px !important;

        margin: 0 !important;
        z-index: 9999 !important;
    }


    /* =========================
       LANGUAGE BUTTON
       ========================= */

    .top-navbar .header-buttons {
        position: absolute !important;

        /* Cancel old left/right */
        left: auto !important;
        right: auto !important;

        /* Automatically mirrors */
        inset-inline-end: 500px !important;

        top: 21px !important;

        margin: 0 !important;
        z-index: 10000 !important;
    }

}





/* =========================================================
   X CARE - CLEAN MOBILE HEADER FIX
   Paste at VERY BOTTOM
   ========================================================= */

@media (max-width: 767px) {

    /* Header gets extra space for search row */
    .store-header {
        position: relative !important;
        background: #fff !important;
        padding-bottom: 58px !important;
    }


    /* -----------------------------
       MAIN TOP ROW
       Logo + Cart + Menu
    ------------------------------ */

    #mainnav {
        position: relative !important;
        height: 64px !important;
        min-height: 64px !important;
        background: #fff !important;
        z-index: 20 !important;
        border-bottom: 0 !important;
    }

    #mainnav .container {
        height: 64px !important;
        min-height: 64px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        display: flex !important;
        align-items: center !important;
    }


    /* Keep logo smaller and clean */
    #mainnav img,
    #mainnav .navbar-brand img,
    #mainnav .store-logo img {
        max-height: 48px !important;
        width: auto !important;
        object-fit: contain !important;
    }


    /* -----------------------------
       OLD TOP BAR
       Remove all previous dimensions
    ------------------------------ */

    .top-navbar {
        display: block !important;

        position: static !important;

        height: 0 !important;
        min-height: 0 !important;

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

        background: transparent !important;
        overflow: visible !important;
    }

    .top-navbar > .container {
        position: static !important;

        height: 0 !important;
        min-height: 0 !important;

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

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

        overflow: visible !important;
    }


    /* Hide email/social completely */
    .top-navbar salla-contacts,
    .top-navbar .contact-social,
    .top-navbar [data-testid="store-header-contacts"] {
        display: none !important;
    }


    /* =====================================================
       SECOND ROW - SEARCH
    ====================================================== */

    .top-navbar .header-search {
        display: block !important;

        position: absolute !important;

        /* Reset ALL old desktop rules */
        left: auto !important;
        right: auto !important;

        top: 70px !important;

        /* Search takes most of row */
        inset-inline-start: 14px !important;
        inset-inline-end: 112px !important;

        width: auto !important;
        max-width: none !important;

        height: 42px !important;

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

        z-index: 100 !important;
    }


    .top-navbar .header-search salla-search {
        display: block !important;
        width: 100% !important;
        height: 42px !important;
    }


    .top-navbar .header-search input,
    .top-navbar .header-search .s-search-input {
        width: 100% !important;
        height: 42px !important;

        border-radius: 22px !important;

        border: 1px solid #ddcba8 !important;

        background: #faf8f3 !important;

        padding-inline-start: 18px !important;
        padding-inline-end: 40px !important;

        font-size: 13px !important;

        box-shadow: none !important;
    }


    /* =====================================================
       LANGUAGE BUTTON
       Separate from search
    ====================================================== */

    .top-navbar .header-buttons {
        display: flex !important;

        position: absolute !important;

        /* Reset old rules */
        left: auto !important;
        right: auto !important;

        top: 70px !important;

        inset-inline-start: auto !important;
        inset-inline-end: 14px !important;

        width: 88px !important;
        height: 42px !important;

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

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

        z-index: 101 !important;
    }


    .top-navbar .header-buttons button,
    .top-navbar .header-buttons a,
    .top-navbar .header-buttons salla-localization-modal {
        height: 42px !important;

        min-width: 88px !important;
        max-width: 88px !important;

        border-radius: 22px !important;

        background: #f5f5f5 !important;

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

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

        font-size: 12px !important;
        white-space: nowrap !important;
    }


    /* =====================================================
       IMPORTANT
       Cancel desktop menu margins on mobile
    ====================================================== */

    #mainnav custom-main-menu {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

}


/* =========================================================
   X CARE MOBILE HEADER - FINAL RTL / LTR FIX
   Arabic: Cart/User LEFT | Logo/Menu RIGHT
   English: Logo/Menu LEFT | Cart/User RIGHT
   ========================================================= */

@media (max-width: 767px) {

    /* MAIN HEADER */
    #mainnav {
        height: 64px !important;
        min-height: 64px !important;
        background: #fff !important;
    }

    #mainnav .inner,
    #mainnav .container {
        width: 100% !important;
        height: 64px !important;
        min-height: 64px !important;
    }


    /* MAIN FIRST ROW
       Restore Salla's normal flex behaviour */
    #mainnav .container > div.flex.items-stretch.justify-between.relative {
        position: relative !important;

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

        width: 100% !important;
        height: 64px !important;

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        transform: none !important;
        margin: 0 !important;
    }


    /* =====================================================
       LOGO + HAMBURGER GROUP
    ===================================================== */

    #mainnav .container > div.flex.items-stretch.justify-between.relative > div:first-child {
        position: static !important;

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

        left: auto !important;
        right: auto !important;
        top: auto !important;

        transform: none !important;
        margin: 0 !important;
    }


    /* Logo */
    #mainnav [data-testid="store-header-logo"] {
        position: static !important;
        margin: 0 !important;

        width: auto !important;
        max-width: 95px !important;
    }

    #mainnav [data-testid="store-header-logo"] img {
        width: auto !important;
        max-width: 95px !important;
        max-height: 52px !important;
        object-fit: contain !important;
    }


    /* Hamburger */
    #mainnav [data-testid="store-header-mobile-toggle"] {
        position: static !important;
        transform: none !important;
    }


    /* =====================================================
       USER + CART GROUP
       THIS IS THE IMPORTANT FIX
    ===================================================== */

    #mainnav .container > div.flex.items-stretch.justify-between.relative > div:last-child {
        position: static !important;

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

        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;

        inset: auto !important;

        transform: none !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;

        padding: 0 !important;
        width: auto !important;
        height: auto !important;

        z-index: auto !important;
    }


    /* User */
    #mainnav [data-testid="store-header-user-menu"] {
        position: static !important;
        margin: 0 !important;
        transform: none !important;
    }


    /* Cart */
    #mainnav [data-testid="store-header-cart"] {
        position: static !important;
        transform: none !important;
    }


    /* =====================================================
       LANGUAGE DIRECTION
       Let browser mirror whole header naturally
    ===================================================== */

    html[dir="rtl"] #mainnav .container > div.flex.items-stretch.justify-between.relative {
        direction: rtl !important;
    }

    html[dir="ltr"] #mainnav .container > div.flex.items-stretch.justify-between.relative {
        direction: ltr !important;
    }

}