html.sbs-overlay-active,
body.sbs-overlay-active {
  overflow: hidden;
}

.sbs-alternatives {
  display: block;

  .sbs-alternatives__cta {
    padding: var(--sbs-btn-padding-block) var(--sbs-btn-padding-inline);
    border-radius: var(--sbs-btn-border-radius);
    background-color: var(--sbs-btn-bg);
    border: 2px solid var(--sbs-btn-border-color);
    color: var(--sbs-btn-fg);
    font-size: 13px;
    line-height: 1.4;
  }

  .sbs-alternatives__cta-button {
    font-weight: 600;
    text-decoration-line: underline;
    text-decoration-color: currentcolor;
    cursor: pointer;

    &[data-disabled] {
      opacity: 0.75;
      pointer-events: none;
    }

    &[data-loading]::after {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      border: 2px solid currentcolor;
      border-top-color: transparent;
      border-radius: 50%;
      margin-left: 4px;
      animation: sbs-spinner 0.25s ease infinite;
    }
  }

  .sbs-alternatives__button {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    background-color: var(--sbs-btn-bg);
    color: var(--sbs-btn-fg);
    padding: var(--sbs-btn-padding-block) var(--sbs-btn-padding-inline);
    border-radius: var(--sbs-btn-border-radius);
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    border: none;
    cursor: pointer;

    &:disabled {
      opacity: 0.75;
    }

    &[data-loading]::after {
      content: "";
      width: 12px;
      height: 12px;
      border: 2px solid #ffffff;
      border-top-color: transparent;
      border-radius: 50%;
      animation: sbs-spinner 0.25s ease infinite;
    }
  }
}

.product_section .sbs-alternatives .sbs-alternatives__cta {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 200px;
  white-space: nowrap;
}


.product__list-item .sbs-alternatives .sbs-alternatives__cta {
  white-space: nowrap;

  > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-transform: uppercase;

    .sbs-alternatives__cta-button {
      text-transform: none;
    }
  }
}

.sbs-alternatives-popup {
  --sbs-popup-in: sbs-mobile-popup-in;
  --sbs-popup-out: sbs-mobile-popup-out;

  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 99999;
  animation-name: sbs-overlay-in;
  animation-duration: 0.25s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;

  .sbs-alternatives-popup__content {
    background-color: #ffffff;
    width: 100%;
    height: max-content;
    max-height: calc(100% - 40px);
    padding: 0 0 22px;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    flex-direction: column;
    animation-name: var(--sbs-popup-in);
    animation-duration: 0.25s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
  }

  .sbs-alternatives-popup__header {
    min-height: 60px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    background-color: var(--c-primary);
  }

  .sbs-alternatives-popup__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
  }

  .sbs-alternatives-popup__close {
    background-color: transparent;
    border: none;
    padding: 12px;
    display: flex;
    margin-right: -8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;

    svg {
      display: block;
      width: 20px;
      height: auto;
      fill: currentcolor;
      stroke: currentcolor;
      stroke-width: 2;
    }
  }

  .sbs-alternatives-popup__body {
    padding: 16px 16px 0;
    flex: 1;
    overflow: auto;
  }

  .sbs-alternative {
    padding: 12px;
    border-radius: 6px;
    border: 2px solid #e4e4e4;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    transition: all 0.25s ease;

    &:hover {
      border-color: var(--c-primary);
    }
  }

  .sbs-alternatives-popup__cards.sbs-alternatives-popup__cards--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    row-gap: 16px;

    .sbs-alternative {
      width: 100%;
      height: 100%;
      min-width: 0;
    }

    &.sbs-alternatives-popup__cards--cols-1 {
      grid-template-columns: 1fr;
    }
  }

  .sbs-alternatives-popup__cards.sbs-alternatives-popup__cards--slider {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    column-gap: 12px;
    overflow: hidden;
    height: max-content;
    max-width: calc(100% - 80px);
    margin: 0 40px;

    .sbs-alternative {
      width: calc((100% - 12px) / 2);
      flex-shrink: 0;
    }

    &.sbs-alternatives-popup__cards--cols-1 .sbs-alternative {
      width: 100%;
      flex-shrink: 0;
    }
  }

  &.sbs-alternatives-popup--disappearing {
    pointer-events: none;
    animation: sbs-overlay-out 0.25s ease forwards;

    .sbs-alternatives-popup__content {
      animation-name: var(--sbs-popup-out);
    }
  }
}

.sbs-alternatives-results {
  .sbs-alternative {
    padding: 12px;
    border-radius: 4px;
    border: 1px solid #e4e4e4;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }

  .sbs-alternatives__cards {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    column-gap: 12px;
    overflow: hidden;
    height: max-content;
    max-width: calc(100% - 80px);
    margin: 0 40px;

    .sbs-alternative {
      width: calc((100% - 12px) / 2);
      flex-shrink: 0;
    }
  }

  &:not(:empty) {
    margin-block: var(--margin-y);
  }
}

.sbs-alternatives-popup,
.sbs-alternatives-results {
  .sbs-alternative__image {
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    background-color: #fafafa;
    border-radius: 4px;
    overflow: hidden;

    img {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      object-fit: contain;
    }
  }

  .sbs-alternative__title,
  .sbs-alternative__price {
    display: block;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: #333333;
    text-decoration: none;
  }

  .sbs-alternative__price {
    margin-bottom: auto;
    color: var(--c-primary);
  }

  .sbs-alternative__input {
    height: 28px;
    padding: 0 !important;
  }

  .sbs-alternative__button {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    height: 28px;
    background-color: var(--sbs-result-btn-bg);
    color: var(--sbs-result-btn-fg);
    border-radius: var(--sbs-result-btn-border-radius);
    font-size: 12px;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 600;
    border: none;
    cursor: pointer;

    &:disabled {
      opacity: 0.75;
    }

    &[data-loading]::after {
      content: "";
      width: 12px;
      height: 12px;
      border: 2px solid #ffffff;
      border-top-color: transparent;
      border-radius: 50%;
      animation: sbs-spinner 0.25s ease infinite;
    }

    svg {
      width: 9px;
      height: auto;
    }
  }
}

.sbs-slider {
  position: relative;

  .sbs-slider__slides {
    scroll-snap-type: x mandatory;
  }

  .sbs-slider__navigation {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sbs-slider__navigation-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e4e4e4;
    color: #333333;
    border-radius: 50%;
    pointer-events: all;
    cursor: pointer;

    svg {
      display: block;
      width: 20px;
      height: auto;
    }

    &[data-visible="false"] {
      pointer-events: none;
      opacity: 0.5;
    }
  }
}

.sbs-alternatives__spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #333333;
  border-radius: 60px;
  border-top-color: transparent;
  animation: sbs-spinner 0.5s linear infinite;
  margin: 30px auto;
}

.boost-sd__product-item-list-view-layout .sbs-alternatives {
  margin-top: 8px;
  margin-left: auto;
}

@media screen and (max-width: 576px) {
  .boost-sd__product-item-list-view-layout .sbs-alternatives {
    width: calc(100vw - 76px);
    margin-left: calc(-100% - 3px);
    text-align: center;
  }

  .boost-sd__product-item-list-view-layout .sbs-alternatives__cta {
    padding: min(var(--sbs-btn-padding-block), var(--sbs-btn-padding-inline));
  }
}

@media screen and (min-width: 576px) {
  .sbs-alternatives-popup {
    --sbs-popup-in: sbs-popup-in;
    --sbs-popup-out: sbs-popup-out;

    align-items: center;

    &.sbs-alternatives-popup--desktop-drawer-left {
      --sbs-popup-in: sbs-drawer-left-in;
      --sbs-popup-out: sbs-drawer-left-out;

      justify-content: flex-start;
    }

    &.sbs-alternatives-popup--desktop-drawer-right {
      --sbs-popup-in: sbs-drawer-right-in;
      --sbs-popup-out: sbs-drawer-right-out;

      justify-content: flex-end;
    }

    .sbs-alternatives-popup__content {
      border-radius: 20px;
      width: max-content;
      max-width: calc(100% - 80px);
    }

    .sbs-alternatives-popup__header {
      padding: 8px 20px;
    }

    &.sbs-alternatives-popup--desktop-drawer-left,
    &.sbs-alternatives-popup--desktop-drawer-right {
      .sbs-alternatives-popup__content {
        height: 100%;
        max-height: unset;
        width: 450px;
        border-radius: 0;
      }
    }

    &.sbs-alternatives-popup--desktop-popup {
      .sbs-alternatives-popup__cards.sbs-alternatives-popup__cards--grid {
        max-width: 100%;

        &.sbs-alternatives-popup__cards--cols-desktop-popup-2 {
          width: calc((244px * 2) + 12px);
          grid-template-columns: repeat(2, 1fr);
        }

        &.sbs-alternatives-popup__cards--cols-desktop-popup-3 {
          width: calc((244px * 3) + (12px * 2));
          grid-template-columns: repeat(3, 1fr);
        }

        &.sbs-alternatives-popup__cards--cols-desktop-popup-4 {
          width: calc((244px * 4) + (12px * 3));
          grid-template-columns: repeat(4, 1fr);
        }
      }

      .sbs-alternatives-popup__cards.sbs-alternatives-popup__cards--slider {
        &.sbs-alternatives-popup__cards--cols-desktop-popup-2,
        &.sbs-alternatives-popup__cards--cols-desktop-popup-3,
        &.sbs-alternatives-popup__cards--cols-desktop-popup-4 {
          width: calc((244px * 2) + 12px);

          .sbs-alternative {
            width: calc((100% - 12px) / 2);
          }
        }
      }
    }
  }
}

@media screen and (min-width: 768px) {
  .sbs-alternatives-popup.sbs-alternatives-popup--desktop-popup {
    .sbs-alternatives-popup__cards.sbs-alternatives-popup__cards--slider {
        &.sbs-alternatives-popup__cards--cols-desktop-popup-3,
        &.sbs-alternatives-popup__cards--cols-desktop-popup-4 {
          width: calc((244px * 3) + (12px * 2));
    
          .sbs-alternative {
            width: calc((100% - (12px * 2)) / 3);
          }
        }
    }
  }
}

@media screen and (min-width: 992px) {
  .sbs-alternatives-popup.sbs-alternatives-popup--desktop-popup {
    .sbs-alternatives-popup__cards.sbs-alternatives-popup__cards--slider.sbs-alternatives-popup__cards--cols-desktop-popup-4 {
      width: calc((244px * 4) + (12px * 3));

      .sbs-alternative {
        width: calc((100% - (12px * 3)) / 4);
      }
    }
  }
}

@keyframes sbs-spinner {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes sbs-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sbs-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes sbs-mobile-popup-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes sbs-mobile-popup-out {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

@keyframes sbs-popup-in {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes sbs-popup-out {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(20px);
  }
}

@keyframes sbs-drawer-left-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes sbs-drawer-left-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes sbs-drawer-right-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes sbs-drawer-right-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes sbs-spinner {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}