fixed-buy-button {
  --text-color: #2D2523;
  --highlight-color: #7E6757;

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background-color: #F4F4F4;
  padding: 2rem 5vw;
  transition: all 0.3s ease;

  .fixed-buy-button__container {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    margin: 0 auto;
  }

  .fixed-buy-button__product-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .fixed-buy-button__product-title {
      max-width: 50%;
      font-size: 1.4rem;
      line-height: 1.2;
      font-family: var(--font-family-secondary);
      letter-spacing: 0.14rem;
      color: var(--text-color);
      margin: 0;
    }

    .fixed-buy-button__product-price {
      .tag-discount {
        display: none;
      }

      .price__regular, .price__sale, .price-item--regular {
        margin-left: auto;
        font-weight: 300;
        font-size: 1.4rem;
        color: var(--text-color);
        s {
          color: inherit;
          opacity: 0.9;
          font-size: 1.2rem;
          margin: auto 0;
        }
      }
    }
  }

  .fixed-buy-button__buttons {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }

  .assemble-your-set-section-link, .fixed-buy-button__buy-button {
    width: 100%;
    padding: 1.25rem;
    border: 1px solid var(--highlight-color);
    text-decoration: none;
    box-sizing: border-box;
    font-size: 1.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    margin: 0;
    font-family: var(--font-family-primary);
    letter-spacing: 0.1rem;
    transition: all 0.3s ease;
    height: 100%;

    span {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 1.8rem;
    }
  }

  .fixed-buy-button__buy-button {
    background-color: var(--highlight-color);
    color: white;
  }

  .assemble-your-set-section-link {
    color: var(--highlight-color);
    background-color: transparent;
    gap: 1.2rem;
  }
}

@media screen and (min-width: 470px) {
  fixed-buy-button {
    .fixed-buy-button__buttons {
      flex-direction: row;
      justify-content: space-between;
    }
  }
}

fixed-buy-button.translate-down {
  transform: translateY(100%);
  display: flex;
}

@media screen and (min-width: 1024px) {
  fixed-buy-button {
    display: none;
  }
}