/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!./custom/cartridges/app_custom_unified_portal/cartridge/client/default/scss/experience/components/commerceLayouts/carousel.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* stylelint-disable no-descending-specificity */
.carousel {
  margin-bottom: 22px; }
  @media (pointer: coarse) and (max-width: 991.98px) {
    .carousel {
      padding-inline: 0; } }
  .carousel:has(.carousel-indicators) {
    margin-bottom: 36px; }
  @media (pointer: fine), (min-width: 992px) {
    .carousel:not(.custom-carousel):has(.carousel-control-prev) {
      padding-left: 60px; } }
  @media (pointer: fine), (min-width: 992px) {
    .carousel:not(.custom-carousel):has(.carousel-control-next) {
      padding-right: 60px; } }
  .carousel-item {
    padding: 0 15px; }
    .carousel-item > img, .carousel-item .tile-image {
      width: 100%;
      max-width: 400px;
      max-height: 400px;
      aspect-ratio: 1 / 1;
      -o-object-fit: contain;
         object-fit: contain;
      position: relative;
      background: var(--skin-image-background-color-1);
      padding: 40px;
      clip-path: circle(50% at 50% 50%);
      margin: auto; }
  .carousel .carousel-control-next,
  .carousel .carousel-control-prev {
    width: 2.5rem;
    height: 2.5rem;
    margin: auto 10px;
    opacity: 1; }
    @media (pointer: coarse) and (max-width: 991.98px) {
      .carousel .carousel-control-next,
      .carousel .carousel-control-prev {
        display: none; } }
    .carousel .carousel-control-next:hover .icon-next,
    .carousel .carousel-control-next:hover .icon-prev,
    .carousel .carousel-control-prev:hover .icon-next,
    .carousel .carousel-control-prev:hover .icon-prev {
      background: var(--skin-primary-color-1); }
      .carousel .carousel-control-next:hover .icon-next::before,
      .carousel .carousel-control-next:hover .icon-prev::before,
      .carousel .carousel-control-prev:hover .icon-next::before,
      .carousel .carousel-control-prev:hover .icon-prev::before {
        color: var(--skin-primary-color-invert-1); }
    .carousel .carousel-control-next:focus,
    .carousel .carousel-control-prev:focus {
      outline: none; }
    .carousel .carousel-control-next .icon-next,
    .carousel .carousel-control-next .icon-prev,
    .carousel .carousel-control-prev .icon-next,
    .carousel .carousel-control-prev .icon-prev {
      width: 2.5rem;
      height: 2.5rem;
      padding: 0;
      border: 1px solid var(--skin-primary-color-1);
      border-radius: 50%; }
      .carousel .carousel-control-next .icon-next::before,
      .carousel .carousel-control-next .icon-prev::before,
      .carousel .carousel-control-prev .icon-next::before,
      .carousel .carousel-control-prev .icon-prev::before {
        color: var(--skin-primary-color-1);
        vertical-align: middle;
        margin-left: 2px; }
    .carousel .carousel-control-next .icon-prev::before,
    .carousel .carousel-control-prev .icon-prev::before {
      margin-inline: 0 2px; }
  .carousel-indicators {
    margin: 0;
    bottom: -22px;
    z-index: 1; }
    .carousel-indicators li {
      margin: 0 5px;
      width: 10px;
      height: 10px;
      border: 0;
      outline: 0;
      background: var(--skin-primary-color-2);
      border-radius: 50%;
      opacity: 1;
      transition: none; }
      .carousel-indicators li:focus, .carousel-indicators li:hover, .carousel-indicators li.active {
        background: var(--skin-primary-color-1); }

.custom-carousel {
  position: static;
  padding: 0;
  margin: 0 30px; }
  .custom-carousel .carousel-inner {
    display: flex;
    padding-bottom: 10px; }
  .custom-carousel .carousel-item > * {
    height: 100%; }
  .custom-carousel .carousel-control-prev,
  .custom-carousel .carousel-control-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-inline: 10px; }
    .custom-carousel .carousel-control-prev:active, .custom-carousel .carousel-control-prev:focus,
    .custom-carousel .carousel-control-next:active,
    .custom-carousel .carousel-control-next:focus {
      border: 2.5px solid var(--skin-primary-color-invert-2);
      outline: none; }
  @media (min-width: 769px) {
    .custom-carousel--3 .carousel-inner {
      justify-content: center; } }
  @media (min-width: 769px) and (max-width: 1199.98px) {
    .custom-carousel--3 .carousel-item {
      /* Show 3rd slide for smooth animations */ }
      .custom-carousel--3 .carousel-item.active + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;
        z-index: -1;
        display: block;
        visibility: visible; } }
  @media (min-width: 769px) {
    .custom-carousel--3 .carousel-item {
      margin-right: 0;
      /* left or forward direction */
      /* farthest right hidden item must be also positioned for animations */
      /* right or prev direction */ }
      .custom-carousel--3 .carousel-item.active {
        /* show 2 items */ }
        .custom-carousel--3 .carousel-item.active + .carousel-item {
          display: block; }
        .custom-carousel--3 .carousel-item.active,
        .custom-carousel--3 .carousel-item.active + .carousel-item {
          transition: none; }
      .custom-carousel--3 .carousel-item.carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0); }
      .custom-carousel--3 .carousel-item.active.carousel-item-left + .carousel-item-next.carousel-item-left,
      .custom-carousel--3 .carousel-item.carousel-item-next.carousel-item-left + .carousel-item,
      .custom-carousel--3 .carousel-item.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        transform: translate3d(-100%, 0, 0);
        visibility: visible; }
      .custom-carousel--3 .carousel-item.carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible; }
      .custom-carousel--3 .carousel-item.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
      .custom-carousel--3 .carousel-item.carousel-item-prev.carousel-item-right + .carousel-item,
      .custom-carousel--3 .carousel-item.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        display: block;
        visibility: visible; } }
  @media (min-width: 1200px) {
    .custom-carousel--3 .carousel-item {
      /* left or forward direction */
      /* right or prev direction */ }
      .custom-carousel--3 .carousel-item.active {
        /* show 3rd of 3 item slide */
        /* Show 4th slide for smooth animations */ }
        .custom-carousel--3 .carousel-item.active + .carousel-item + .carousel-item {
          display: block; }
        .custom-carousel--3 .carousel-item.active + .carousel-item + .carousel-item + .carousel-item {
          position: absolute;
          top: 0;
          right: -33.3333%;
          z-index: -1;
          display: block;
          visibility: visible; }
        .custom-carousel--3 .carousel-item.active + .carousel-item + .carousel-item {
          transition: none; }
      .custom-carousel--3 .carousel-item.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible; }
      .custom-carousel--3 .carousel-item.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        display: block;
        visibility: visible; } }
  .custom-carousel--4 .carousel-inner {
    justify-content: center; }
  .custom-carousel--4 .carousel-item {
    padding-inline: 10px;
    margin-right: 0;
    /* left or forward direction */
    /* farthest right hidden item must be also positioned for animations */
    /* right or prev direction */ }
    .custom-carousel--4 .carousel-item.active {
      /* show 2 items */ }
      .custom-carousel--4 .carousel-item.active + .carousel-item {
        display: block; }
      .custom-carousel--4 .carousel-item.active,
      .custom-carousel--4 .carousel-item.active + .carousel-item {
        transition: none; }
    .custom-carousel--4 .carousel-item.carousel-item-next {
      position: relative;
      transform: translate3d(0, 0, 0); }
    .custom-carousel--4 .carousel-item.active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .custom-carousel--4 .carousel-item.carousel-item-next.carousel-item-left + .carousel-item,
    .custom-carousel--4 .carousel-item.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
      transform: translate3d(-100%, 0, 0);
      visibility: visible; }
    .custom-carousel--4 .carousel-item.carousel-item-prev.carousel-item-right {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      display: block;
      visibility: visible; }
    .custom-carousel--4 .carousel-item.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .custom-carousel--4 .carousel-item.carousel-item-prev.carousel-item-right + .carousel-item,
    .custom-carousel--4 .carousel-item.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
      position: relative;
      transform: translate3d(100%, 0, 0);
      display: block;
      visibility: visible; }
    @media (max-width: 768.98px) {
      .custom-carousel--4 .carousel-item {
        /* Show 3rd slide for smooth animations */ }
        .custom-carousel--4 .carousel-item.active + .carousel-item + .carousel-item {
          position: absolute;
          top: 0;
          right: -50%;
          z-index: -1;
          display: block;
          visibility: visible; } }
    @media (min-width: 769px) and (max-width: 1199.98px) {
      .custom-carousel--4 .carousel-item {
        /* left or forward direction */
        /* right or prev direction */ }
        .custom-carousel--4 .carousel-item.active {
          /* show 3rd of 3 item slide */
          /* Show 4th slide for smooth animations */ }
          .custom-carousel--4 .carousel-item.active + .carousel-item + .carousel-item {
            display: block; }
          .custom-carousel--4 .carousel-item.active + .carousel-item + .carousel-item + .carousel-item {
            position: absolute;
            top: 0;
            right: -33.3333%;
            z-index: -1;
            display: block;
            visibility: visible; }
          .custom-carousel--4 .carousel-item.active + .carousel-item + .carousel-item {
            transition: none; }
        .custom-carousel--4 .carousel-item.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
          position: relative;
          transform: translate3d(-100%, 0, 0);
          visibility: visible; }
        .custom-carousel--4 .carousel-item.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
          position: relative;
          transform: translate3d(100%, 0, 0);
          display: block;
          visibility: visible; } }
    @media (min-width: 1200px) {
      .custom-carousel--4 .carousel-item {
        padding-inline: 20px;
        /* left or forward direction */
        /* right or prev direction */ }
        .custom-carousel--4 .carousel-item.active {
          /* show 4th of 4 item slide */
          /* Show 5th slide for smooth animations */ }
          .custom-carousel--4 .carousel-item.active + .carousel-item + .carousel-item,
          .custom-carousel--4 .carousel-item.active + .carousel-item + .carousel-item + .carousel-item {
            display: block; }
          .custom-carousel--4 .carousel-item.active + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
            position: absolute;
            top: 0;
            right: -25%;
            z-index: -1;
            display: block;
            visibility: visible; }
          .custom-carousel--4 .carousel-item.active + .carousel-item + .carousel-item,
          .custom-carousel--4 .carousel-item.active + .carousel-item + .carousel-item + .carousel-item {
            transition: none; }
        .custom-carousel--4 .carousel-item.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
          position: relative;
          transform: translate3d(-100%, 0, 0);
          visibility: visible; }
        .custom-carousel--4 .carousel-item.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
          position: relative;
          transform: translate3d(100%, 0, 0);
          display: block;
          visibility: visible; } }
  @media (max-width: 768.98px) {
    .custom-carousel--no-mobile {
      margin-inline: 0; }
      .custom-carousel--no-mobile .carousel-control-prev,
      .custom-carousel--no-mobile .carousel-control-next {
        display: none; }
      .custom-carousel--no-mobile .carousel-inner {
        flex-wrap: wrap; }
      .custom-carousel--no-mobile .carousel-item {
        display: flex !important;
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 1 !important;
        float: none !important;
        padding: 10px 0 !important;
        margin: 0 !important; }
        .custom-carousel--no-mobile .carousel-item--hide-all-visible {
          display: none !important; } }


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