.featured-product-spotlights {
  .featured-product-spotlights__heading {
    margin-bottom: 2.4rem;

    @media screen and (min-width: 768px) {
      margin-bottom: 3.2rem;
    }

    * {
      margin: 0;
    }

    * + * {
      margin-top: 1.6rem;
    }

    .h1 {
      font-size: 2.286em;
      font-weight: 440;
      line-height: 110%;
      letter-spacing: -1.08px;

      @media screen and (min-width: 768px) {
        font-size: 2.25em;
      }
    }
  }

  .featured-product-spotlights__heading-description.body,
  .featured-product-spotlights__product-description,
  .featured-product-spotlights__product-price {
    font-size: 15px;
    line-height: 130%;

    @media screen and (min-width: 768px) {
      font-size: 18px;
    }
  }

  .featured-product-spotlights__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 1.2rem;
    overflow: hidden;
    gap: 20px;

    @media screen and (min-width: 1024px) {
      flex-direction: row;
    }

    .featured-product-spotlights__item {
      width: 100%;
    }

    .button {
      background-color: #ffffff;
      display: block;
      text-align: center;
      padding: 18px;
      /* margin: 16px 0px 0px 0px; */

      @media screen and (min-width: 768px) {
        display: inline-flex;
        padding: 0 2.4rem;
        /* margin-top: 24px; */
      }
    }

    .featured-product-spotlights__product-media {
      position: relative;
      margin: 0 auto;

      @media screen and (min-width: 768px) {
        max-width: 74.65%;
      }

      img,
      video {
        max-width: 100%;
        height: 100%;
      }

      &.media-fit-contain img,
      &.media-fit-contain video {
        object-fit: contain;
      }

      &.media-fit-cover img,
      &.media-fit-cover video {
        object-fit: cover;
      }
    }

    .featured-product-spotlights__product-details {
      width: 100%;

      @media screen and (min-width: 768px) {
        max-width: 25.35%;
      }

      > div {
        padding: 2.4rem;
      }

      .featured-product-spotlights__product-content {
        * {
          margin: 0;
        }

        .featured-product-spotlights__product-featured-image {
          border-radius: 1.2rem;

          @media screen and (max-width: 767px) {
            float: left;
            margin-right: 1.2rem;
          }

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

        .featured-product-spotlights__product-selector {
          display: flex;
          flex-wrap: wrap;
          gap: 1.2rem;

          .button {
            background-color: var(--button);
            min-width: unset;
            padding: 0;

            &:not(.button--active):not(:hover)::after {
              box-shadow: none;
            }

            img {
              @media screen and (max-width: 767px) {
                width: 4.6rem;
                height: 4.6rem;
              }
            }
          }
        }

        .featured-product-spotlights__product-title {
          font-size: 1em;
          font-weight: 500;
          line-height: 120%;
        }

        * + .featured-product-spotlights__product-title,
        .featured-product-spotlights__product-price {
          margin-top: 1.2rem;
          color: rgb(var(--color-foreground));
        }

        .featured-product-spotlights__product-shop-button {
          display: inline-flex;
          margin-top: 2.4rem;
        }
      }
    }

    hr {
      margin: 0;
    }
  }

  .product-card {
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    border-radius: 12px 12px 0px 0px;
    width: 100%;
    height: 456px;

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

    @media screen and (min-width: 768px) {
      height: 540px;

      img {
        height: 540px;
      }
    }

    @media screen and (min-width: 1024px) {
      height: 600px;

      img {
        height: 600px;
      }
    }
  }

  .product-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.6) 80%
    );
  }

  .product-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 16px 16px 16px;
    gap: 0;

    @media screen and (min-width: 768px) {
      max-width: 552px;
      margin: 0px 32px 32px 32px;
      padding: 0;
    }
  }

  .product-name {
    margin: 0;
    color: var(--form-msg-text-color);
  }

  .product-description {
    color: var(--form-msg-text-color);
    font-size: 15px;
    margin: 20px 0px 0px 0px;

    @media screen and (min-width: 768px) {
      font-size: 18px;
    }
  }

  .benefits__box {
    padding: 16px 16px 24px 16px;
    background: #f7f3e9;
    border-radius: 0px 0px 12px 12px;

    .benefits__heading {
      h2 {
        font-size: 15px;
        max-width: none;
        font-weight: 400;
        color: #666;

        strong {
          font-weight: 500;
          color: #252525;
        }
      }
    }
  }

  .featured-product-spotlights__product-benefits {
    padding: 2.4rem;

    .benefits__heading h2 {
      max-width: none;
    }
  }

  .featured-product-spotlights__content
    + .featured-product-spotlights__product-benefits {
    border-radius: 1.2rem;
    margin-top: 2.4rem;

    @media screen and (min-width: 768px) {
      margin-top: 2rem;
    }
  }
}

.featured-product-spotlights.single-product {
  .featured-product-spotlights__content {
    border-radius: 0;

    .featured-product-spotlights__product-media {
      border-radius: 1.2rem;
      overflow: hidden;
    }

    .featured-product-spotlights__product-details {
      background-color: inherit;

      & > div {
        padding: 0;

        @media screen and (max-width: 767px) {
          padding-top: 1.6rem;
        }

        @media screen and (min-width: 768px) {
          padding-left: 2rem;
        }
      }

      .featured-product-spotlights__product-title {
        @media screen and (max-width: 767px) {
          margin-top: 0;
        }
      }

      .featured-product-spotlights__product-shop-button {
        @media screen and (min-width: 768px) {
          width: auto;
        }
      }
    }
  }
}