/* Add custom CSS styles below */ 
/* Full website white background */
body,
html,
#app,
main,
section,
.container,
.s-block,
.store-page,
.index {
  background: #ffffff !important;
}




/* edit header */
/* .top-navbar {
    background-color: rgb(151 56 149) !important;
    color: white !important;
} */

.container.flex.justify-between {
    background-color: transparent !important;
}

.inner.bg-inherit.w-full,
.inner.bg-inherit.w-full > .container {
  background-color: #933694 !important;
}

/* Main menu links only */
.inner.bg-inherit.w-full nav > ul > li > a,
.inner.bg-inherit.w-full .main-menu > li > a,
.inner.bg-inherit.w-full .s-mega-menu-section > a {
  color: #fff !important;
}



/* Cart + user icons only */
.inner.bg-inherit.w-full .s-cart-summary-wrapper,
.inner.bg-inherit.w-full .s-cart-summary-wrapper *,
.inner.bg-inherit.w-full .s-user-menu-trigger,
.inner.bg-inherit.w-full .s-user-menu-trigger * {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

.inner.bg-inherit.w-full svg path {
  fill: #fff !important;
  stroke: #fff !important;
}




/* Header menu hover animation */
.inner.bg-inherit.w-full .main-menu > li > a {
  position: relative !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}

/* Move slightly up on hover */
.inner.bg-inherit.w-full .main-menu > li > a:hover {
  transform: translateY(-3px) !important;
  color: #ffd6ff !important;
}



/* edit slider */
section.s-block.s-block--photos-slider {
    margin-top: 0px !important;
}
/* making slider talking full width */
section.s-block.s-block--photos-slider .swiper,
section.s-block.s-block--photos-slider .swiper-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Every slide full screen width */
section.s-block.s-block--photos-slider .swiper-slide {
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
}



/* Hide slider title */
.s-slider-block__title-nav {
  display: none !important;
}


/* Dots style */
.photos-slider .swiper-pagination-bullet {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #d6c3dd !important;
  opacity: 1 !important;

}

.photos-slider .swiper-pagination-bullet-active {
  background: #933694 !important;
}


/* cat */

a.banner-entry.square-photos img{
    object-fit: cover !important;
}
a.banner-entry.square-photos{
    padding: 0px !important;
    border-radius: 0px !important;
   min-height: 300px !important;

}

.grid.one-row.md\:grid-cols-3.grid-flow-row.gap-3.sm\:gap-8 {
    gap: 4px !important;
}

@media(max-width:768px){
  a.banner-entry.square-photos img{
    object-fit: contain !important;
    background-color: white !important;
}
}





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




/* product cards  */
/* All buttons background */
.s-button-btn,
button.s-button-element,
.s-button-element {
  background: rgb(144 55 145) !important;
  border-color: rgb(144 55 145) !important;
  color: #fff !important;
}

/* Hover effect */
.s-button-btn:hover,
button.s-button-element:hover,
.s-button-element:hover {
  background: rgb(124 45 125) !important;
  border-color: rgb(124 45 125) !important;
  color: #fff !important;
}

/* Icons inside buttons */
.s-button-element svg,
.s-button-btn svg {
  stroke: #fff !important;
  color: #fff !important;
}

/* Product card hover scale */
custom-salla-product-card,
.s-products-list-wrapper .s-product-card-entry,
.s-products-list-wrapper .s-product-card-vertical {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

custom-salla-product-card:hover,
.s-products-list-wrapper .s-product-card-entry:hover,
.s-products-list-wrapper .s-product-card-vertical:hover {
  transform: scale(1.01) !important;

}






/* logo section */
/* Desktop */
.index .s-block--logos-slider .grid {
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
}

.index .s-block--logos-slider .brand-item {
  grid-row: span 1 / span 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.index .s-block--logos-slider .brand-item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .index .s-block--logos-slider .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .index .s-block--logos-slider .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .index .s-block--logos-slider .brand-item {
    height: 90px !important;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .index .s-block--logos-slider .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .index .s-block--logos-slider .brand-item {
    height: 80px !important;
  }
}


/* titlle */
/* Brand section title */
.index .s-block--logos-slider .right-side {
  width: 95% !important;
}

.index .s-block--logos-slider .s-block__title h2,
.index .s-block--logos-slider .right-side h2 {
  color: hsl(301.26deg 45.89% 40.59%) !important;
  font-size: 25px !important;
  font-weight: 500 !important;
  text-align: center !important;
  width: 100% !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .index .s-block--logos-slider .s-block__title h2,
  .index .s-block--logos-slider .right-side h2 {
    font-size: 22px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .index .s-block--logos-slider .s-block__title {
    justify-content: center !important;
  }

  .index .s-block--logos-slider .right-side {
    text-align: center !important;
  }

  .index .s-block--logos-slider .s-block__title h2,
  .index .s-block--logos-slider .right-side h2 {
    font-size: 20px !important;
    line-height: 1.4 !important;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .index .s-block--logos-slider .s-block__title h2,
  .index .s-block--logos-slider .right-side h2 {
    font-size: 18px !important;
  }
}


/* Brand logos section background only */
.index section.s-block.s-block--logos-slider {
  background: rgb(249 251 252) !important;
}

/* Keep inside container transparent */
.index section.s-block.s-block--logos-slider .container,
.index section.s-block.s-block--logos-slider .grid,
.index section.s-block.s-block--logos-slider .brand-item {
  background: transparent !important;
}


/* footer */
.container.grid.grid-col-1.lg\:grid-cols-6.gap-8.lg\:gap-6 ,
.store-footer__inner {
    color: white !important;
      background-color: hsl(301.26deg 45.89% 40.59%) !important;
}