/* Add custom CSS styles below */ 
body, #mainnav , #product-filter{
background-color: #000000;
color: #CC9751;
}
#product-filter{
border-color: #CC9751;
}
#app > div.app-inner.flex.flex-col.min-h-full > header > div.top-navbar > div > div > div.header-search.flex-1 > salla-search > div > div > div.s-search-input-wrapper > input , #app > div.app-inner.flex.flex-col.min-h-full > header > div.top-navbar > div > div > div.header-buttons > button{
background-color: #CC9751;
color: #FFF;
}
#app > div.app-inner.flex.flex-col.min-h-full > header > div.top-navbar > div > div > div.header-search.flex-1 > salla-search > div > div > div.s-search-input-wrapper > input::placeholder{
color: #FFF;
}
#mainnav > div > div > div > div.flex.items-center.justify-end > salla-cart-summary > a > p > b > i , .header-btn__icon{
color: #CC9751;
}

.header-btn__icon{
  border: unset;
}

#app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(4){
margin-top: unset;
}
#app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(4) > div , #app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(8) > div , #app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(10) > div , #app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(12) > div{
max-width: unset;
padding: unset;
}

#app > div.app-inner.flex.flex-col.min-h-full > section:nth-child(5) > div{
max-width:unset;
}

.banner.banner--fixed.overflow-hidden img{
  background-color: transparent;
}

/* Categories */ 
#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--banners.container > div > a:nth-child(1){
grid-row: unset;
}
.banner-entry.square-photos , .s-product-card-image{
background-color: transparent;
}
 section.s-block.s-block--banners.container{
max-width: unset;
}
.banner-entry.square-photos{
padding: unset;
height: 300px;
}
.s-products-list-wrapper , .swiper-wrapper{
padding: 10px;
}
.s-product-card-entry{
background-color: #000000;
box-shadow: 0 0 9.4px 0 #fff;
}
div.s-product-card-content > div.s-product-card-content-main > h3 > a , .s-product-card-price , .s-infinite-scroll-btn{
color:#FFF;
}
.s-button-primary-outline, .s-button-primary-outline:hover{
background-color: #CC9751;
color:#FFF;
border: unset;
}


#app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--banners.container > div{
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: unset;
}

@media screen and (min-width: 600px) and (max-width: 1150px){
section.s-block.s-block--banners.container > div{
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: unset;
}
.banner-entry.square-photos{
padding: unset;
height: 200px;
}
}
@media screen and (max-width: 599px){
  #app > div.app-inner.flex.flex-col.min-h-full > section.s-block.s-block--banners.container > div{
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: unset;
}
.banner-entry.square-photos{
padding: unset;
height: 150px;
}
}

div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > h1 , div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4.md\:pb-16 > div.flex.whitespace-nowrap.gap-4.items-center > div.gap-4.flex > h2{
color: #fff;
}


/* footer */
#app > div.app-inner.flex.flex-col.min-h-full > footer > div.store-footer__inner{
background-color: #CC9751;
color: #FFF;
}

#app > div.app-inner.flex.flex-col.min-h-full > footer{
background-color: #000000;
}

#app > div.app-inner.flex.flex-col.min-h-full > footer > div.md\:flex.items-center.justify-between.py-4.container.text-center > span > p{
font-weight:700;
font-size: 18px;
color: #FFF;
}


/* product page */

.ql-direction-rtl > a , .ql-direction-rtl > strong , .ql-direction-rtl > span , .ql-direction-rtl > br {
color : #fff !important;
}