$component-name: product-miniature;

.#{$component-name} {
  .card {
    height: 100%;
  }

  & &__infos {
    position: relative;
    z-index: 90;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0;

    &__top,
    &__bottom {
      padding: 0.25rem 0.5rem;
      background-color: var(--bs-white);
    }

    &__top {
      height: 100%;
      padding-top: 0.5rem;
    }

    &__bottom {
      margin-top: auto;
      margin-bottom: 1rem;
      @media (max-width: 767px) {
        .quantity-button input {
          max-width: unset;
        }
      }
    }
  }

  & &__title {
    margin: 0;
  }

  & &__image {
    height: auto;
  }

  & &__quickview {
    display: flex;
    margin: auto;
  }

  & &__regular-price {
    text-decoration: line-through;
  }

  & &__prices {
    display: flex;
  }

  & &__price {
    @extend .me-2;
  }
}
