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

.product{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    border-color: $gray-200;
    border-width: $product-border-width;
    border-style: solid;
    border-radius: $border-radius;
    padding: $product-padding;
    @if $product-shadow == "true"{
        box-shadow: $box-shadow;
    }
    .product-image{
        @extend .mb-3;
        display: block;
        position: relative;
        @include media-breakpoint-up(md){
            &:before{
                content: "";
                padding-top: $image-min-height;
                display: block;
            }
        }
        img{
            max-width: 100%;
            height: auto;
            animation: fade-in .5s ease;
            @include media-breakpoint-up(md){
                max-height: 100%;
                display: block;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                object-fit: contain;
            }
            @include media-breakpoint-down(md){
                width: 100%;
            }
        }
    }
    .product-description-wrapper{
        @include media-breakpoint-up(md){
            margin-bottom: auto;
        }
        @include media-breakpoint-down(md){
            margin-top: auto;
        }
        .product-title{
            @extend .mb-2;
            display: block;
            color: $dark;
            font-weight: $font-weight-bold;
            text-decoration: unset;
        }
        .product-description{
            @extend .mb-2;
            font-size: $font-size-sm;
            color: $text-muted;
            @include media-breakpoint-down(md){
                display: none;
            }
        }
    }
    .product-addtobasket{
        .stock_price{
            @extend .mb-3;
        }
        .add_to_basket_form_compact{
            .inline_add_to_basket_button{
                width: 100%;
                .availability-message{
                    &.backorder{
                        @extend .alert, .alert-warning, .py-1, .px-2, .small;
                        display: inline-block;
                    }
                }
                i{
                    @extend .me-2;
                }
                label{
                    display: inline;
                }
            }
        }
    }
}

