/* stylelint-disable no-descending-specificity */
.product-recommendations {
  .product-recommendations__wrapper {
    display: flex;
    flex-direction: column;
    padding: var(--sizing-xl) 0 var(--sizing-xl) var(--sizing-l);
    overflow: hidden;

    @media (width >= 768px) {
      margin: auto;
      padding: var(--spacing-big) 0 var(--spacing-big) var(--sizing-l);
    }

    @media (width >= 1024px) {
      padding: 50px 0 50px 56px;
    }

    .splide__track {
      overflow: hidden;
    }

    .product-recommendations__header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: var(--sizing-xl);
      margin-right: var(--sizing-l);

      @media (width >= 768px) {
        border-bottom: 1px solid var(--border-gray);
        padding-bottom: var(--sizing-m);
      }

      @media (width >= 1024px) {
        margin-right: 56px;
      }

      .product-recommendations__header-content {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;

        @media (width >= 768px) {
          justify-content: flex-start;
          align-items: baseline;
        }

        .product-recommendations__title {
          display: flex;
          align-items: center;
          gap: 4px;

          > *,
          span {
            color: var(--neutrals-sub-texts-paragraphs);
            font: var(--heading-regular);
            font-size: var(--fs-large);
            font-weight: var(--fw-400);
            line-height: var(--lh-large);
            letter-spacing: -0.3px;

            @media (width >= 768px) {
              letter-spacing: normal;
              font-size: var(--fs-xslarge);
              line-height: var(--lh-normal);
            }

            @media (width >= 1024px) {
              font-size: var(--fs-xxlarge);
            }
          }
        }

        .product-recommendations__view-all {
          font-size: 14px;
          color: var(--primary-color);
          font-weight: var(--fw-500);
          line-height: var(--lh-medium);
          text-decoration-line: underline;
          text-decoration-style: solid;
          letter-spacing: 0.14px;
          background: transparent;
          outline: none;
          border: none;
          cursor: pointer;
          padding: 0;
          margin-left: var(--sizing-s);

          @media (width >= 768px) {
            margin-left: var(--sizing-m);
            font-size: 13.119px;
            line-height: 18.741px;
            letter-spacing: 0.131px;
          }
        }

        .product-recommendations__cta {
          padding-top: var(--spacing-small);
        }
      }

      .product-recommendations__nav-wrapper {
        display: none !important;

        @media (width>=768px) {
          display: flex !important;
        }

        @media (width >= 1024px) {
          display: flex !important;
          gap: var(--sizing-xs);
        }

        &.hidden {
          display: none !important;
        }
      }
    }
  }

  .product-recommendations-item__cta {
    margin-top: var(--sizing-m);
    width: 100%;

    .dropin-button--medium {
      width: 100%;
      font-size: var(--fs-small);
      font-weight: var(--fw-400);
      line-height: var(--lh-small);
      padding: var(--sizing-xs) var(--sizing-m);

      @media (width >= 768px) {
        padding: var(--sizing-s) var(--sizing-xl);
      }
    }
  }

  .product-recommendations-items__wrapper {
    .product-recommendations-items__list {
      display: flex;

      &.shimmer-list {
        gap: 16px;
        overflow-x: auto;

        @media (width >= 1024px) {
          gap: 24px;
        }
      }

      /* Common wishlist icon styling */
      .product-recommendations-item {
        position: relative;

        .product-recommendations-item__image-wrapper {
          overflow: hidden;

          img {
            height: 100%;
            width: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
          }
        }

        .arrow-icon {
          transition: all 0.5s ease-in-out;
        }

        .product-recommendations-item__offer-container {
          margin-left: var(--spacing-3);
          align-self: center;
          display: flex;
          align-items: center;
          gap: var(--spacing-xxsmall);

          @media (width <= 500px) {
            flex-basis: 100%;
            margin-left: 0;
          }

          .product-recommendations-item__offer-tag {
            display: flex;
            padding: var(--sizing-2xs, 4px) var(--spacing-xs, 8px);
            justify-content: center;
            align-items: center;
            color: var(--tertiary-color);
            background: var(--semantic-surface-flat-success);
            gap: 8px;
          }

          .product-recommendations-item__offer-discount-info {
            background: transparent;
            border: 0;
            padding: 0;

            .tooltip-image {
              width: 16px;
              height: 16px;
              cursor: pointer;
            }
          }
        }
      }

      /* Start Variant - Product Card */
      .product-recommendations-product-card.product-recommendations-item {
        display: flex;
        background-color: var(--ui-surface-flat-high);
        min-width: 240px;
        width: 100%;
        position: relative;
        flex: 0 0 100%;

        &:not(:last-child) {
          border-bottom: 1px solid var(--border-gray);
        }

        @media (width >= 768px) {
          flex-direction: column;
          align-items: center;
          flex: 0 0 auto;
          border: 1px solid var(--border-gray);
        }

        &.shimmer-card {
          background-color: var(--shimmer-card-bg);

          @media (width >= 768px) {
            width: calc((100% / 3) - 16px);
          }

          @media (width >= 1024px) {
            width: calc((100% / 4) - 24px);
          }
        }

        .product-recommendations-item__content-wrapper {
          padding: var(--spacing-none);
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
          width: 100%;

          &:hover {
            text-decoration: none;
          }

          @media (width >= 768px) {
            flex-direction: column;
          }

          &.shimmer-content-wrapper {
            width: 100%;

            @media (width >= 768px) {
              flex-direction: column;
            }
          }

          .product-recommendations-item__image-wrapper {
            flex-shrink: 0;
            width: 121px;

            @media (width >= 768px) {
              width: 100%;
              height: 152.61px;
            }

            @media (width >= 1024px) {
              height: 195px;
            }

            @media (width >= 1400px) {
              height: unset;
            }

            &.shimmer-base {
              height: 195px;
            }

            picture {
              height: 100%;
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .product-recommendations-item__purchased-count {
            position: absolute;
            top: 0;
            left: 0;
            padding: var(--spacing-xsmall);
            background: var(--gradients-accent-section-bg-1), var(--tertiary-color);
            min-width: 121px;
            font-size: 8px;
            font-weight: var(--fw-500);
            line-height: var(--lh-xsmall);
            letter-spacing: 0.4px;
            color: var(--schemes-on-surface);
            text-align: center;
            max-width: 120px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            @media (width >= 768px) {
              max-width: 100%;
              width: auto;
              font-size: var(--fs-xsmall);
              text-align: left;
            }
          }
        }

        .product-recommendations-item__content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 100%;
          height: 100%;
          padding: var(--sizing-xs);

          @media (width >= 768px) {
            padding: var(--sizing-m);
            flex-direction: column;
          }

          .product-recommendations-item__content--info {
            .product-recommendations-item__label {
              font-size: var(--fs-medium);
              font-weight: var(--fw-500);
              line-height: var(--lh-medium);
              margin-bottom: var(--sizing-xs);
              color: var(--ui-text-icon-high);
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              height: 40px;

              @media (width >= 768px) {
                font-size: var(--fs-small);
                margin-bottom: 11px;
              }

              @media (width >= 1024px) {
                font-size: var(--fs-medium);
                margin-bottom: var(--sizing-s);
              }
            }

            .product-recommendations-item__sku {
              font-size: var(--fs-xsmall);
              font-weight: var(--fw-400);
              line-height: 16px;
              letter-spacing: 0.24px;
              padding-bottom: var(--sizing-m);
              color: var(--ui-text-icon-medium);

              @media (width >= 768px) {
                line-height: var(--lh-medium);
                letter-spacing: 0.14px;
                padding-bottom: var(--sizing-s);
              }

              @media (width >= 1024px) {
                font-size: var(--fs-small);
                padding-bottom: var(--sizing-m);
              }
            }

            .product-recommendations-item__description {
              .product-recommendations-item__price-wrapper {
                .product-recommendations-item__price {
                  display: flex;
                  flex-direction: column;
                  gap: var(--spacing-xsmall);

                  .product-recommendations-item__price-final {
                    display: flex;
                    flex-wrap: wrap;
                    align-items: center;
                    gap: 3px;

                    .product-recommendations-item__price-label,
                    .product-recommendations-item__price-value {
                      font-size: var(--fs-medium);
                      font-style: normal;
                      font-weight: var(--fw-700);
                      line-height: var(--lh-large);
                      color: var(--ui-text-icon-high);

                      @media (width >= 768px) {
                        font-weight: var(--fw-600);
                      }

                      @media (width >= 1024px) {
                        font-size: var(--fs-xmedium);
                      }
                    }

                    .product-recommendations-item__price-unit {
                      font-size: var(--fs-xsmall);
                      font-style: normal;
                      font-weight: var(--fw-400);
                      color: var(--ui-text-icon-medium);
                      line-height: 1.6rem;
                      letter-spacing: 0.24px;
                    }
                  }

                  .product-recommendations-item__price-regular {
                    display: flex;
                    align-items: center;
                    gap: 7px;

                    .product-recommendations-item__price-label,
                    .product-recommendations-item__price-value {
                      font-size: var(--fs-small);
                      font-weight: var(--fw-400);
                      line-height: var(--lh-medium);
                      letter-spacing: 0.14px;
                      color: var(--ui-text-icon-medium);
                      text-decoration-line: line-through;
                    }

                    .product-recommendations-item__price-discount {
                      color: var(--discount-text);
                      font-size: var(--fs-small);
                      font-style: normal;
                      font-weight: var(--fw-800);
                      line-height: 23.4px;
                    }
                  }
                }

                .product-recommendations-item__emi {
                  .product-recommendations-item__emi-text {
                    color: var(--ui-text-icon-medium);
                    font-size: var(--fs-xsmall);
                    font-weight: var(--fw-400);
                    line-height: 1.6rem;
                    letter-spacing: 0.24px;
                    padding-top: var(--sizing-xs);
                    display: block;

                    @media (width >= 768px) {
                      padding-top: var(--sizing-s);
                    }

                    @media (width >= 1024px) {
                      padding-top: var(--sizing-m);
                    }
                  }
                }
              }
            }
          }

          .product-recommendations-item__content--wrapper {
            padding-top: var(--sizing-m);
            display: flex;
            align-items: center;
            gap: 8px;

            .product-recommendations-item__content-wishlist {
              @media (width >= 768px) {
                position: absolute;
                top: 8px;
                right: 8px;
                cursor: pointer;
              }

              span {
                border-radius: 100%;
                background-color: var(--icon-bg);
                width: 34px;
                height: 34px;
                padding: 7px;

                @media (width >= 768px) {
                  width: 32px;
                  height: 32px;
                  padding: 6.56px;
                }

                @media (width >= 1024px) {
                  width: 40px;
                  height: 40px;
                  padding: 8.202px;
                }

                &.shimmer-toggle {
                  background-color: var(--shimmer-card-bg);
                }
              }
            }
          }

          .product-recommendations-item__cta {
            @media (width < 768px) {
              margin-top: 0;
            }
          }
        }
      }

      /* END Variant - Product Card */

      /* START Variant - Teaser Card */
      .product-recommendations-teaser-card.product-recommendations-item {
        display: flex;
        flex: 0 0 auto;
        border: 1px solid var(--border-gray);

        @media (width < 768px) {
          width: 237px !important;
        }

        @media (width >= 1024px) {
          width: 100%;
        }

        &.shimmer-card {
          background-color: var(--shimmer-card-bg);

          @media (width >= 768px) {
            width: calc((100% / 3) - 16px);
          }

          @media (width >= 1024px) {
            width: calc((100% / 4) - 24px);
          }
        }

        .product-recommendations-item__content-container {
          height: 100%;
          width: 100%;
          background: var(--ui-surface-glass-thin);
          text-decoration: none;
          position: relative;

          .product-recommendations-item__content--wishlist-wrapper {
            .product-recommendations-item__content-wishlist {
              position: absolute;
              top: 8px;
              right: 8px;
              cursor: pointer;

              .icon {
                border-radius: 100%;
                background-color: var(--icon-bg);
                width: 32px;
                height: 32px;
                padding: 7px;

                @media (width >= 1024px) {
                  width: 40px;
                  height: 40px;
                  padding: 8.202px;
                }
              }
            }
          }
        }

        .product-recommendations-item__content-wrapper {
          min-height: 297px;
          height: 100%;
          display: flex;
          flex-direction: column;
          padding: var(--spacing-none);

          @media (width >= 1024px) {
            min-height: 376px;
          }

          &.shimmer-content-wrapper {
            width: 100%;
            min-height: fit-content;
          }

          .product-recommendations-item__image-wrapper {
            width: 100%;
            height: 157px;
            overflow: hidden;

            @media (width >= 768px) {
              height: 154px;
            }

            @media (width >= 1024px) {
              height: 195px;
            }

            &:not(.shimmer-base) {
              @media (width >= 1400px) {
                height: unset;
              }
            }
          }

          .product-recommendations-item__content {
            padding: var(--sizing-m) var(--spacing-2xs);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: var(--ui-surface-glass-thin);
            flex: 1;

            @media (width >= 768px) {
              padding: var(--sizing-m) var(--sizing-m);
            }

            @media (width >= 1024px) {
              padding: var(--sizing-xl) var(--sizing-m);
            }

            .product-recommendations-item__car-name {
              color: var(--ui-text-icon-medium);
              font-size: var(--fs-small);
              font-weight: var(--fw-400);
              line-height: var(--lh-medium);
              letter-spacing: 0.14px;
              margin-bottom: var(--sizing-xs);

              @media (width >= 1024px) {
                font-size: var(--fs-xmedium);
              }
            }

            .product-recommendations-item__label {
              font-size: var(--fs-xmedium);
              font-weight: var(--fw-500);
              color: var(--neutrals-sub-texts-paragraphs);
              line-height: normal;
              flex: 1;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              max-height: 44px;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
              padding-bottom: var(--spacing-none);
              margin-bottom: var(--sizing-m);

              @media (width >= 768px) {
                font-size: var(--fs-large);
              }

              @media (width >= 1024px) {
                font-size: var(--fs-xlarge);
                max-height: 60px;
              }
            }

            .product-recommendations-item__description {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .product-recommendations-item__price-wrapper {
                .product-recommendations-item__price {
                  display: flex;
                  align-items: center;
                  gap: 7px;
                  flex-flow: row wrap;

                  .product-recommendations-item__price-final {
                    .product-recommendations-item__price-label,
                    .product-recommendations-item__price-value {
                      font-size: var(--fs-large);
                      color: var(--neutrals-sub-texts-paragraphs);
                      font-weight: var(--fw-600);
                      line-height: var(--lh-normal);

                      @media (width >= 768px) {
                        font-size: var(--fs-xmedium);
                      }

                      @media (width >= 1024px) {
                        font-size: var(--fs-large);
                      }
                    }
                  }

                  .product-recommendations-item__price-regular {
                    .product-recommendations-item__price-value {
                      color: var(--ui-text-icon-medium);
                      font-feature-settings: var(--font-feature-settings);
                      font-size: 14px;
                      font-style: normal;
                      font-weight: 500;
                      line-height: normal;
                      text-decoration-line: line-through;
                    }
                  }
                }
              }

              .icon {
                width: 33.721px;
                height: 33.721px;

                @media (width >= 768px) {
                  width: 24px;
                  height: 24px;
                }

                @media (width >= 1024px) {
                  width: 40px;
                  height: 40px;
                }
              }
            }
          }
        }
      }

      /* END Variant - Teaser Card */

      /* Start Variant - Teaser Card CTA */
      .product-recommendations-teaser-card-cta.product-recommendations-item {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: space-between;

        &.shimmer-card {
          background-color: var(--shimmer-card-bg);
          width: calc((100% / 2) - 16px);

          @media (width >= 768px) {
            width: calc((100% / 5) - 16px);
          }

          @media (width >= 1024px) {
            width: calc((100% / 7) - 24px);
          }
        }

        .product-recommendations-item__content-container {
          height: 100%;
          width: 100%;
          position: relative;

          .product-recommendations-item__content--wishlist-wrapper {
            .product-recommendations-item__content-wishlist {
              position: absolute;
              top: 8px;
              right: 8px;
              cursor: pointer;

              .icon {
                border-radius: 100%;
                background-color: var(--icon-bg);
                width: 32px;
                height: 32px;
                padding: 7px;
              }
            }
          }
        }

        .product-recommendations-item__content-container:hover {
          text-decoration: none;
        }

        .product-recommendations-item__content-wrapper {
          height: 100%;
          display: flex;
          flex-direction: column;
          padding: var(--spacing-none);

          .product-recommendations-item__image-wrapper {
            width: 100%;
            height: 100px;

            .image {
              height: 100%;
              width: 100%;
              object-fit: cover;
            }
          }

          .product-recommendations-item__content {
            padding: 8px 0 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: fit-content;
            flex: 1;

            .product-recommendations-item__label {
              font-size: 16px;
              color: var(--neutrals-sub-texts-paragraphs);
              line-height: normal;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              height: 40px;
              text-overflow: ellipsis;
              padding-bottom: var(--spacing-none);
              margin-bottom: var(--sizing-xs);
            }

            .product-recommendations-item__description {
              display: flex;
              align-items: center;
              justify-content: space-between;

              .product-recommendations-item__price-wrapper {
                .product-recommendations-item__price {
                  .product-recommendations-item__price-final {
                    .product-recommendations-item__price-label,
                    .product-recommendations-item__price-value {
                      font-size: var(--fs-medium);
                      color: var(--neutrals-sub-texts-paragraphs);
                      font-weight: var(--fw-500);
                      line-height: normal;
                    }
                  }
                }
              }

              .icon {
                width: 33.721px;
                height: 33.721px;

                @media (width >= 768px) {
                  width: 24px;
                  height: 24px;
                }
              }
            }
          }
        }

        .product-recommendations-item__cta {
          .dropin-button--medium {
            min-height: 34px;

            @media (width >= 768px) {
              padding: var(--sizing-xs) var(--sizing-s);
            }
          }
        }
      }

      /* END Variant - Teaser Card CTA */
    }

    /* ViewMore - ViewLess CTA */
    .product-recommendations__view-more.dropin-button--secondary {
      border: none;
      margin-top: var(--sizing-m);
      width: 100%;
      font-weight: var(--fw-500);
      line-height: var(--lh-medium);
      gap: 8px;

      &::after {
        content: '';
        display: inline-block;
        width: 24px;
        height: 24px;
        vertical-align: middle;
        background: center / contain no-repeat url('/genuine-accessories/icons/unfold_more_filled.svg');
      }

      &:hover:not(:disabled, .disabled),
      &:focus {
        background: transparent;
        color: var(--primary-color);
      }

      @media (width >= 768px) {
        display: none;
      }
    }
  }
}

.product-recommendations__wrapper.teaser-card--container {
  .product-recommendations-item__content-container:hover {
    text-decoration: none;

    .product-recommendations-item__image-wrapper {
      img {
        transform: scale(1.1);
        transition: transform 0.4s ease;
      }
    }

    .arrow-icon {
      background: var(--primary-color);

      .icon {
        filter: invert(1);
      }
    }
  }
}

.product-recommendations__wrapper.teaser-card-cta--container {
  @media (width >= 768px) and (width < 1024px) {
    padding-top: var(--sizing-xl);
    padding-bottom: var(--sizing-xl);
  }

  .product-recommendations__header {
    margin-bottom: 0;
    padding-bottom: var(--sizing-xl);

    @media (width >= 768px) and (width < 1024px) {
      margin-bottom: 0;
      padding-bottom: var(--spacing-big);
      border-bottom: 0;
    }

    @media (width >= 1024px) {
      margin-right: var(--spacing-big);
      border-bottom: none;
    }

    .product-recommendations__header-content {
      justify-content: space-between;

      @media (width >= 768px) {
        justify-content: flex-start;
      }

      @media (width >= 1024px) {
        gap: var(--sizing-m);
      }

      .product-recommendations__title {
        h3,
        .product-recommendations__item-count {
          font-size: var(--fs-medium);
          font-weight: var(--fw-700);
          line-height: normal;

          @media (width >= 768px) {
            font-size: var(--fs-large);
            font-weight: var(--fw-600);
            line-height: var(--lh-xlarge);
            color: var(--schemes-on-surface);
          }

          @media (width >= 1024px) {
            font-size: var(--fs-xlarge);
          }
        }
      }

      .product-recommendations__view-all {
        font-size: var(--fs-medium);
        font-weight: var(--fw-400);
        line-height: var(--lh-small);
        margin-left: 0;
      }
    }
  }

  .product-recommendations-item__content-container {
    &:hover {
      text-decoration: none;

      .product-recommendations-item__image-wrapper {
        img {
          transform: scale(1.1);
          transition: transform 0.4s ease;
        }
      }
    }
  }
}

.product-recommendations__wrapper.product-card--container {
  padding-right: var(--sizing-l);

  @media (width >= 768px) {
    padding-right: 0;
  }

  .product-recommendations__header {
    margin-right: 0;
    margin-bottom: var(--sizing-l);

    @media (width >= 768px) {
      margin-right: var(--sizing-xl);
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  .product-recommendations-items__wrapper {
    .product-recommendations-product-card:hover {
      a {
        text-decoration: none;

        .product-recommendations-item__content {
          background: var(--color-neutral-150);
        }

        .product-recommendations-item__image-wrapper {
          img {
            transform: scale(1.1);
            transition: transform 0.4s ease;
          }
        }
      }
    }
  }
}

.cart {
  .product-recommendations {
    @media (width >= 1024px) {
      padding: 50px 56px;
    }

    .product-recommendations__wrapper {
      @media (width >= 1024px) {
        padding: var(--sizing-xl) var(--sizing-2xs) var(--sizing-xl) var(--spacing-big);
        background: var(--tertiary-color);
      }
    }
  }
}

.product-recommendations-item__offer-discount-info::before {
  content: '';
  position: absolute;
  right: -4px;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

.product-recommendations-item__offer-discount-info.tooltip--below::before {
  bottom: -8px;
  border-bottom: 12px solid var(--tooltip-bg-color-light);
}

.product-recommendations-item__offer-discount-info.tooltip--above::before {
  top: -8px;
  border-top: 12px solid var(--tooltip-bg-color-light);
}

.recommendation-tooltip-box {
  position: absolute;
  display: none;
  max-width: 300px;
  padding: var(--sizing-s) var(--spacing-xsmall) var(--sizing-s) var(--sizing-s);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-300);
  line-height: 1.6rem;
  color: var(--neutrals-sub-texts-paragraphs);
  background: linear-gradient(90deg, var(--tooltip-bg-color-light), var(--tooltip-bg-color-dark));
  text-align: left;
  z-index: 1;
}