/* Add custom CSS styles below */ 
#app.product-card-bg-on custom-salla-product-card{
box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
}

.sq-awesome-banners .banner-outer .banner-texts .banner__title{
background: rgba(255, 255, 255, 0.6);
color:#000;
}
.s-block--banners .on-img .banner-texts:not(.of-video){
top:auto;
bottom:0px;
}
.sq-awesome-banners .banner-outer .banner-texts .banner__title{
text-align:right;
padding:4px 20px;
position: relative;
}

h3.banner__title.font-bold.leading-normal::after {
  content: "";
  position: absolute;
  left: 10px; /* adjust spacing from text */
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #000; /* black square background */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Create white arrow inside the box */
h3.banner__title.font-bold.leading-normal::after {
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M15 18l-6-6 6-6'/></svg>") no-repeat center;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'><path d='M15 18l-6-6 6-6'/></svg>") no-repeat center;
  mask-size: 12px;
  -webkit-mask-size: 40px;
  background-color: #000; /* white arrow */
}

custom-salla-product-card .product-block-outer{
background:#f8f8f8
}