/* Add custom CSS styles below */
body#app {
    background-color: #f9fafb;
}

.top-navbar {
    background-color: #efa8ac;
}

/*banner main*/
section:nth-of-type(1).s-block.s-block--photos-slider {
    margin-top: 0rem;
}

 .s-slider-block__title-nav {
    display: none !important ;
}
 salla-slider.photos-slider .swiper-slide {
    width: 100%;
    padding:0 ;
  margin:0 ;
}


[dir=rtl] .carousel-slider .swiper {
    padding-left: 0;
    padding-right: 0;
}
[dir=rtl] salla-slider.photos-slider .swiper {
    padding-left: 0;
    padding-right: 0;

}
salla-slider.photos-slider .swiper:where([dir="ltr"], [dir="ltr"] *) {
    padding-right: 0 ;
    padding-left: 0;
}
.rounded-md,salla-slider.photos-slider .swiper-slide {
    border-radius: 0;
}


i.header-btn__icon.icon.sicon-shopping-bag,
i.header-btn__icon.sicon-user-circle {
    background-color: black;
    color: white;
    border: none;
}

header.store-header {
    position: relative;
    z-index: 999;
}

body.index section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type>.container {
    position: relative;
    margin-top: -85px !important;
    z-index: 5;
}

section.s-block.s-block--fixed-banner.wide-placeholder>.container {
    padding: 0px !important;
    margin: 0px !important;
    max-width: 100%;
}

section.s-block.s-block--fixed-banner.wide-placeholder {
    margin-top: 0rem;
}

.banner--fixed img {
    border-radius: 0rem !important;
    background-color: transparent;
}

section.s-block.s-block--banners.container:nth-of-type(2) .grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 5px;
}

section.s-block.s-block--banners.container:nth-of-type(2) .lazy__bg.lazy.entered.loaded {
    background-size: contain;
    background-repeat: no-repeat;
    height: 250px;
}



section.s-block.s-block--banners.container:nth-of-type(2) a.banner-entry.square-photos {
    background-color: transparent;
    height: 300px;
}

section.s-block.s-block--banners.container:nth-of-type(2) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 {
    height: 238px;
}


.s-product-card-entry {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;

}

.s-product-card-content * {
    justify-content: center;
    text-align: center;
}

h4.s-product-card-price {
    color: red;
}

.swiper.s-slider-container.swiper-initialized.swiper-horizontal.swiper-pointer-events.swiper-rtl.swiper-ios.swiper-backface-hidden {
    margin-bottom: 2rem;
}

.s-product-card-content {
    background-color: #fcf1b3;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;

}


.s-products-slider-card.swiper-slide {
    margin-bottom: 10px;
}

button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center {
    background-color: #4cc1c1;
    color: white;
    border: none;
}





section.s-block.s-block--banners.container:nth-of-type(13) .lazy__bg.lazy.entered.loaded {
    background-size: contain;
    background-repeat: no-repeat;
}


section.s-block.s-block--banners.container .banner-entry {
    background-color: #f9fafb
}

#app>div.app-inner.flex.flex-col.min-h-full>section.s-block.s-block--testimonials.container.overflow-hidden {
    margin-bottom: 7rem;
}

footer.store-footer:before {
    margin-top: 6rem;
}

section.s-block.s-block--fixed-banner.wide-placeholder a.banner.banner--fixed.overflow-hidden {
    margin-bottom: -10px !important
}

footer.store-footer {
    padding-top: 14rem;
    position: relative;
}

footer.store-footer:before {
    position: absolute;
    content: "";
    height: 320px;
    width: 100%;
    background-image: url(https://i.postimg.cc/W37444Wn/cats.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent !important;
    top: -16px;
    left: 50%;
    transform: translate(-50%, -50%) !important;
}

.store-footer__inner {
    background-image: url(https://i.postimg.cc/LsMF7hGv/fff.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    background-color: transparent !important;

}

.store-footer__inner * {
    justify-content: center;
    align-items: center;
    text-align: center;
}

@media(max-width: 767px) {
    .store-footer__inner {

        background-color: #fcf2b3 !important;
    }

    footer.store-footer {
        padding-top: 18rem;
        position: relative;
    }

    footer.store-footer:before {
        position: absolute;
        content: "";
        height: 310px;
        width: 100%;
        background-image: url('https://i.postimg.cc/Zn0FtGRH/mob-cat-f.png');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: transparent !important;
        top: -15px !important;
        right: 50% !important;
        transform: translatex(50%) !important;
    }

    body.index section.s-block.s-block--fixed-banner.wide-placeholder:first-of-type>.container {
        position: relative;
        margin-top: -40px !important;
        z-index: 5;
    }

    section.s-block.s-block--banners.container:nth-of-type(2) .grid.md\:grid-cols-3.two-row.grid-flow-row.gap-3.sm\:gap-8 {
        height: 320px;
    }

    section.s-block.s-block--banners.container:nth-of-type(2) .lazy__bg.lazy.entered.loaded {
        background-size: contain;
        background-repeat: no-repeat;
        height: 150px;
    }

    section.s-block.s-block--banners.container .banner-entry {
        /* height: 150px !important; */
        background-color: #f9fafb;
    }



    section.s-block.s-block--banners.container .grid.md\:grid-cols-2.grid-flow-row.gap-3.sm\:gap-8 {
        grid-auto-flow: column;
    }

    section.s-block.s-block--banners.container:nth-of-type(13) .banner-entry {
        height: 130px !important;
        background-size: contain !important;
    }




}

ٍ body.index>div.app-inner>section.s-block.s-block--photos-slider {
    margin-top: 0px !important;
}

body.index>div.app-inner>section.s-block.s-block--photos-slider .container {
    padding: 0px !important;
    width: 100%;
    max-width: unset;
}

body.index>div.app-inner>section.s-block.s-block--photos-slider .swiper-slide {
    padding: 0px !important;
    margin: 0px !important;
    width: 100% !important;
}

body.index>div.app-inner>section.s-block.s-block--photos-slider .swiper {
    padding: 0px !important;
    margin-top: -10px !important;
}



.product-single .main-content {
    display: flex;
    flex-direction: column;
}


.product-single .main-content salla-installment:has(#tabbyPromoWrapper) {
    order: -1;
}


.product-single .main-content form.form.product-form {
    order: -1;
}

.product-single .main-content h1.text-xl.md\:text-2xl.leading-10.font-bold.mb-6.text-gray-800 {
    order: -4;
}

.product-single .main-content h2.product-entry__sub-title {
    order: -3;
}

.product-single .main-content .flex.whitespace-nowrap.gap-4.items-center {
    order: -2;
}

.product-single .main-content .product-brand {
    order: -2;
}

/** sticky cart and price **/


.product-single form.form.product-form section.sticky-product-bar,
.product-single form.form.product-form section.flex.bg-white.p-5.sm\:pb-0.rounded-md.rounded-b-none {
    position: fixed !important;
    z-index: 9999;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 0.75rem;
}

.product-single form.form.product-form section.sticky-product-bar {
    bottom: 0px;
    left: 0px;

}

.product-single form.form.product-form section.flex.bg-white.p-5.sm\:pb-0.rounded-md.rounded-b-none {
    bottom: 120px;
    left: 0px;
    padding-block: 20px;
}

.product-single form.form.product-form section.flex.bg-white.p-5.sm\:pb-0.rounded-md.rounded-b-none>div,
.product-single .sticky-product-bar__quantity {
    justify-content: center;
    gap: 20px;
}


@media (max-width: 767px) {
    .product-single form.form.product-form section.flex.bg-white.p-5.sm\:pb-0.rounded-md.rounded-b-none {
        bottom: 144px;
    }
}

/* teaser and whatsapp button pose */
div#bcio-popups {
    display: none;
}

.css-lrlg9a {
    bottom: 150px !important;
}

salla-mini-checkout-widget.s-add-product-button-mini-checkout.s-mini-checkout {
    background: #41cd41;
    border-radius: 10px;
}

salla-mini-checkout-widget.s-add-product-button-mini-checkout.s-mini-checkout * {
    color: white;
}

header.store-header+.container {
    z-index: 2;
}


section.offers {
    padding: 25px;
    box-shadow: rgb(149 157 165 / 13%) 0px 8px 24px;
    border-radius: 20px;
    margin-block: 30px;
}

section.offers button.s-button-element.s-button-btn.s-button-outline.s-button-wide.s-button-primary-outline.s-button-loader-center {
    padding: 3px;
}

section.offers .s-modal-title,
section.offers svg {
    fill: #1e4c92;
}

footer>div.store-footer__inner>div>div>div>salla-social>li:nth-child(1)>a {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);

}

footer>div.store-footer__inner>div>div>div>salla-social>li:nth-child(2)>a {
    background: linear-gradient(45deg, #FFFC00, #FFEA00);

}

footer>div.store-footer__inner>div>div>div>salla-social>li:nth-child(3)>a {
    background: linear-gradient(45deg, #25F4EE, #FE2C55, #000000);

}

@media (max-width: 767px) {
    section.offers .s-product-card-content * {
        text-align: center;
        justify-content: center;
    }

    section.offers .s-product-card-content {
        padding: 3px 0;
    }

    section.offers .s-product-card-image img {
        object-fit: contain !important;
        background: white;
    }

    section.offers .s-product-card-promotion-title {
        padding: 3px;
        font-size: 11px;
    }

    section.offers {
        padding: 15px;
    }

    section.offers .s-modal-header-inner {
        flex-direction: column;
        padding-left: 0;
    }

    section.offers .s-modal-header-inner * {
        justify-content: center !important;
        text-align: center;
    }
}

section.offers .s-product-card-image img {
    object-fit: contain;
    background: #fff;
}

section.offers .s-product-card-image {
    height: 9rem !important;
    max-height: 10rem !important;
}

section.offers .s-product-card-content {
    padding: 5px 0;
}

section.s-block--banners .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    background-color: transparent !important;
    gap: 10px !important;
}

section.s-block--banners .grid .banner-entry {
    height: 18vw !important;
}

section.s-block--banners .grid .banner-entry div {
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

section:nth-of-type(10).s-block--banners .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
section:nth-of-type(10).s-block--banners .grid .banner-entry{
    height: 25vw !important;
}

@media screen and (max-width: 768px) {
    section.s-block--banners.container {
        max-width: 95% !important;
    }

    section.s-block--banners .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }



    section.s-block--banners .grid .banner-entry {
        height: 30vw !important;
    }
    section:nth-of-type(10).s-block--banners .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
section:nth-of-type(10).s-block--banners .grid .banner-entry{
    height: 25vw !important;
}

}