/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./sfra-webpack-builder/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./sfra-webpack-builder/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./sfra-webpack-builder/node_modules/css-unicode-loader/index.js!./sfra-webpack-builder/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[4]!./shark-ninja/cartridges/app_custom_sharkninja_core/cartridge/client/default/scss/experience/components/commerceAssets/heroComponent.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable */
/* stylelint-enable */
/***************************** Category Colors *****************************/
/***************************** Fonts *****************************/
/***************************** Border *****************************/
/***************************** Background *****************************/
/* stylelint-disable */
/* stylelint-enable */
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-carousel-inner:not(.slick-initialized) > .slick-carousel-item {
  padding: 0;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-carousel-inner > .slick-carousel-item .hero-container {
  max-height: calc(100vh - 36px);
  height: 100%;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-carousel-inner > .slick-carousel-item .hero-container .gradient-overlay {
  display: none;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-carousel-inner > .slick-carousel-item .hero-container .hero-row .hero-video.video-component video, .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-carousel-inner > .slick-carousel-item .hero-container .hero-row .hero-figure.image-component img {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-carousel-inner > .slick-carousel-item .hero-container .hero-row .hero-video.video-component .video-js, .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-carousel-inner > .slick-carousel-item .hero-container .hero-row video {
  height: 100%;
  padding: 0;
}
@media (max-width: 1199.98px) {
  .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-carousel-inner > .slick-carousel-item .hero-container .hero-row .hero-video.video-component .video-js, .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-carousel-inner > .slick-carousel-item .hero-container .hero-row video {
    height: 100%;
    min-height: 40rem;
    padding: 0;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-carousel-inner > .slick-carousel-item .hero-container .hero-row .hero-product.product-container {
  padding: 6.5rem 0;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-dotted .slick-dots {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 1.25rem;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  padding: 0 0.3125rem;
  border-radius: 2.5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-dotted .slick-dots li {
  background: #B0B0B0;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-dotted .slick-dots li button {
  height: 1.125rem;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .slick-dotted .slick-dots .slick-active {
  background: #fff;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container {
  max-height: calc(100vh - 36px);
  height: 100%;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 18.75rem;
  z-index: 1;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.8)), color-stop(70%, rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0) 100%);
}
@media (max-width: 1199.98px) {
  .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .gradient-overlay {
    height: 16.25rem;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 40%, rgba(0, 0, 0, 0) 100%);
  }
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row {
  height: 100%;
  position: relative;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-video.video-component {
  position: relative;
  height: 100%;
  padding: 0;
  margin: 0;
}
@media (max-width: 1199.98px) {
  .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-video.video-component .video-js, .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-video.video-component video {
    height: 100%;
    min-height: 40rem;
    padding: 0;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-video.video-component .vjs-big-play-button {
  z-index: 2;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-figure.image-component {
  margin: 0;
  width: 100%;
  position: relative;
}
@media (max-width: 1199.98px) {
  .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-figure.image-component, .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-figure.image-component img {
    height: 100%;
    min-height: 40rem;
  }
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-figure.image-component .common-image-component {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-figure.image-component .common-image-filter {
  -webkit-filter: brightness(40%);
          filter: brightness(40%);
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-figure.image-component .image-heading-container {
  position: absolute;
  top: 50%;
  width: 100%;
}
@media (min-width: 576px) {
  .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-figure.image-component .image-heading-container {
    padding-left: 7%;
  }
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-text.text-container {
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 7.75rem 5rem;
  z-index: 1;
  max-width: 43.75rem;
}
@media (min-width: 1200px) {
  .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-text.text-container.text-lg-position-center {
    min-width: 43.75rem;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    padding: 0 5rem;
  }
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-text.text-container.animate-text {
  opacity: 0;
  left: 18.75rem;
}
@media (min-width: 1200px) {
  .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-text.text-container.animate-text.animate-centered-text {
    left: 80%;
  }
}
@media (max-width: 1199.98px) {
  .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-text.text-container {
    min-width: 100%;
    padding: 0.75rem;
    top: 30%;
    left: 0;
    right: 0;
    bottom: unset;
  }
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-text.text-container .eyebrow-text {
  margin-bottom: 1rem;
  font-family: "DM Sans", arial, helvetica, serif;
  font-size: 0.875rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.25rem;
}
@media (max-width: 1199.98px) {
  .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-text.text-container .eyebrow-text {
    margin-bottom: 0.75rem;
  }
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-text.text-container .eyebrow-text + *:not(.btn), .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-text.text-container .text-title > * {
  margin-bottom: 2rem;
  font-family: "Plus Jakarta Sans", arial, helvetica, serif;
  font-size: 3rem;
  font-weight: 700;
  font-style: normal;
  line-height: 3.5rem;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container {
  position: absolute;
  bottom: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 6.5rem 0;
}
@media (max-width: 767.98px) {
  .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container {
    padding: 3.75rem 0.75rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    left: 0;
  }
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details {
  padding: 0.75rem;
  border-radius: 0.75rem 0 0 0.75rem;
  background-color: var(--product-background-color);
  color: var(--product-text-color);
  max-width: 21.5625rem;
  width: 100%;
}
@media (max-width: 767.98px) {
  .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details {
    border-radius: 0.75rem;
  }
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .name-link {
  margin-bottom: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-column-gap: 1.25rem;
     -moz-column-gap: 1.25rem;
          column-gap: 1.25rem;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .name-link span {
  color: var(--product-text-color);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-family: "DM Sans", arial, helvetica, serif;
  font-size: 0.75rem;
  font-weight: 700;
  font-style: normal;
  line-height: 1.125rem;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .name-link .right-arrow-icon {
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE2Ljg0MjUgOS40MjkwNUMxNi45OTU1IDkuNTc4NzkgMTcuMDgzNCA5Ljc4MDYxIDE3LjA4MzQgOS45OTU0NUMxNy4wODM0IDEwLjIxMDMgMTYuOTk1NSAxMC40MTIxIDE2Ljg0MjUgMTAuNTYxOUwxMS4xMTMzIDE2LjAzMDZDMTAuODAwOCAxNi4zMzAxIDEwLjMwNiAxNi4zMTcxIDEwLjAwOTggMTYuMDA0NkM5LjcxMzU4IDE1LjY5MjEgOS43MjMzNSAxNS4xOTczIDEwLjAzNTggMTQuOTAxMUwxNC4zNTIzIDEwLjc3NjdMMy4yODEyOSAxMC43NzY3QzIuODQ4MzUgMTAuNzc2NyAyLjUwMDA0IDEwLjQyODQgMi41MDAwNCA5Ljk5NTQ1QzIuNTAwMDQgOS41NjI1MSAyLjg0ODM1IDkuMjE0MiAzLjI4MTI5IDkuMjE0MkwxNC4zNTIzIDkuMjE0MkwxMC4wMzI2IDUuMDkzMTFDOS43MjAwOSA0Ljc5MzYzIDkuNzEwMzMgNC4zMDIwOSAxMC4wMDY2IDMuOTg5NTlDMTAuMzAyOCAzLjY3NzA5IDEwLjc5NzYgMy42NjczMyAxMS4xMTAxIDMuOTYzNTVMMTYuODM5MiA5LjQzMjNMMTYuODQyNSA5LjQyOTA1WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==") no-repeat;
  display: inline-block;
  width: 1.4375rem;
  height: 1.25rem;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .hero-product-ratings {
  margin-bottom: 0.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* stylelint-disable */
  /* stylelint-enable */
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .hero-product-ratings .rating-wrapper .rating-image img {
  width: 4.375rem;
  height: 0.75rem;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .hero-product-ratings .rating-wrapper .rating-display, .experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .hero-product-ratings .rating-wrapper .rating-count {
  color: var(--product-text-color);
  padding-top: 0.125rem;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .hero-product-ratings [data-bv-show=inline_rating] .bv_main_container .bv_sub_container {
  margin-top: 0.125rem !important;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .hero-product-ratings [data-bv-show=inline_rating] .bv_main_container .bv_sub_container .bv_averageRating_component_container .bv_text,
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .hero-product-ratings [data-bv-show=inline_rating] .bv_main_container .bv_sub_container .bv_numReviews_component_container .bv_text {
  color: var(--product-text-color) !important;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .pricing-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--product-text-color);
  padding: 0.375rem 0.625rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  -ms-flex-item-align: stretch;
      align-self: stretch;
  border-radius: 0.5rem;
  background: #000;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .pricing-container span {
  font-family: "DM Sans", arial, helvetica, serif;
  font-size: 0.75rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.125rem;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .pricing-container .dot {
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--product-text-color);
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .pricing-container .purchased-today-cotnainer {
  font-family: "DM Sans", arial, helvetica, serif;
  font-size: 0.75rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.125rem;
}
.experience-common-HeroCarousel .pd-slick-carousel-container .pd-slick-carousel .hero-container .hero-row .hero-product.product-container .product-details .pricing-container .purchased-today-cotnainer * {
  margin: 0;
  padding: 0;
}

/*# sourceMappingURL=heroComponent.css.map*/