/* Slider container */
.splide.slider {
  border-radius: 10px;
  overflow: hidden;
}

.slider-shadow {
  box-shadow: 0 4px 8px 10px rgba(0, 0, 0, 0.3);
}

/* Slider track */
.splide__track {
  padding: 10px;
}


/* Individual slides */
.splide__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  border-radius: 5px;
}

/* Slide content with background image */
.slide-with-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* Pagination (indicators) */
.splide__pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.splide__pagination__page {
  width: 6px;
  height: 6px;
  margin: 0 5px;
  background-color: #999;
  border-radius: 50%;
  cursor: pointer;
  transition: all ease-in-out 0.4s;
}

.splide__pagination__page.is-active {
  background-color: #ffb700;
  width: 15px;
  border-radius: 10%;
}

.shop-all-slide {
  background-size: contain; 
  width: 300px; 
  height: 400px; 
  background-repeat: no-repeat; 
  background-position: center;
}
.shop-all-slide .title {
  margin: 0;
  position: relative;
  top: 330px;
  text-shadow: 0 0 5px #000000;
  background: rgb(10, 10, 10);
  background: -moz-radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  background: -webkit-radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  background: radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdbb2d",endColorstr="#000000",GradientType=1);
}
.shop-all-slide .discount {
  position: relative;
  top: 30px;
  left: 5%;
  height: 100px;
  width: 100px;
  border: #ffb700;
  border-radius: 50%;
  box-shadow: 0 0 5px 10px #ffb700d9;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-45deg);
  color: #000000;
  text-shadow: 0 0 5px #000000;
  background: rgb(10, 10, 10);
  background: -moz-radial-gradient(circle, rgba(253,187,45,0.9) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-radial-gradient(circle, rgba(253,187,45,0.9) 0%, rgba(0,0,0,0) 100%);
  background: radial-gradient(circle, rgba(253,187,45,0.9) 0%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdbb2d",endColorstr="#000000",GradientType=1);
  transition: all ease-in-out 0.3s;
}
.shop-all-slide:hover .discount {
  opacity: 0;
}

.shop-slide {
  background-size: contain; 
  width: 250px; 
  height: 300px; 
  background-repeat: no-repeat; 
  background-position: center;
}
.shop-slide .title {
  margin: 0;
  position: relative;
  top: 230px;
  text-shadow: 0 0 5px #000000;
  background: rgb(10, 10, 10);
  background: -moz-radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  background: -webkit-radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  background: radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdbb2d",endColorstr="#000000",GradientType=1);
}
.shop-slide .discount {
  position: relative;
  top: 30px;
  left: 30%;
  height: 100px;
  width: 100px;
  border: #ffb700;
  border-radius: 50%;
  box-shadow: 0 0 5px 10px #ffb700d9;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-45deg);
  text-shadow: 0 0 5px #000000;
  background: rgb(10, 10, 10);
  background: -moz-radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  background: -webkit-radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  background: radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdbb2d",endColorstr="#000000",GradientType=1);
  transition: all ease-in-out 0.3s;
}
.shop-slide:hover .discount {
  opacity: 0;
}

.shop-item-slide {
  background-size: contain; 
  width: 100%;
  height: 500px;
  background-repeat: no-repeat; 
  background-position: center;
}
.shop-item-slide .title {
  margin: 0;
  position: relative;
  top: 440px;
  color: #000000;
  text-shadow: 0 0 3px #000000;
  background: rgb(10, 10, 10);
  background: -moz-radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  background: -webkit-radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  background: radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdbb2d",endColorstr="#000000",GradientType=1);
  transition: all ease-in-out 0.8s;
}
.shop-item-slide .discount {
  position: relative;
  left: 10%;
  height: 100px;
  width: 100px;
  border: #ffb700;
  border-radius: 50%;
  box-shadow: 0 0 5px 10px #ffb700d9;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-45deg);
  color: #000000;
  text-shadow: 0 0 5px #000000;
  background: rgb(10, 10, 10);
  background: -moz-radial-gradient(circle, rgba(253,187,45,1) 0%, rgba(253,187,45,0.4) 100%);
  background: -webkit-radial-gradient(circle, rgba(253,187,45,1) 0%, rgba(253,187,45,0.4) 100%);
  background: radial-gradient(circle, rgba(253,187,45,1) 0%, rgba(253,187,45,0.4) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdbb2d",endColorstr="#000000",GradientType=1);
  transition: all ease-in-out 0.3s;
}
.shop-item-slide:hover .title {
  opacity: 0;
}
.shop-item-slide:hover .discount {
  opacity: 0;
}

.std .splide__arrow {
  background-color: rgba(253,187,45,0.75);
}
.splide__slide.featured {
  font-size: 1rem;
}
.featured .splide__arrow {
  background-color: rgba(253,187,45,0.75);
}
.featured .splide__arrow--prev {
  background-color: rgba(253,187,45,0.75);
  left: 3px;
}
.featured .splide__arrow--next {
  background-color: rgba(253,187,45,0.75);
  right: 3px;
}
.shop-featured-slide {
  background-size: contain; 
  height: 100px;
  width: 220px;
  background-repeat: no-repeat; 
  background-position: center;
  margin: auto;
}
.shop-featured-slide .title {
  margin: 0;
  position: relative;
  top: 55px;
  text-shadow: 0 0 5px #000000;
  text-shadow: 0 0 3px #000000;
  text-shadow: 0 0 1px #000000;
  color: #ffb700;
  background: rgb(10, 10, 10);
  background: -moz-radial-gradient(circle, rgba(29, 29, 29, 0.95) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  background: -webkit-radial-gradient(circle, rgba(29, 29, 29, 0.95) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  background: radial-gradient(circle, rgba(29, 29, 29, 0.95) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdbb2d",endColorstr="#000000",GradientType=1);
}
.shop-featured-slide .discount {
  position: absolute;
  top: 5px;
  left: 25px;
  height: 50px;
  width: 50px;
  font-size: small;
  border: #ffb700;
  border-radius: 50%;
  box-shadow: 0 0 5px 10px #ffb700d9;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(-45deg);
  text-shadow: 0 0 5px #000000;
  background: rgb(10, 10, 10);
  background: -moz-radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  background: -webkit-radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  background: radial-gradient(circle, rgba(253,187,45,0.75) 0%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fdbb2d",endColorstr="#000000",GradientType=1);
  transition: all ease-in-out 0.3s;
}
.shop-featured-slide:hover .discount {
  opacity: 0;
}
.featured-item {
  width: 250px;
}