article {
        display: flex;
        aspect-ratio: 1/1.2;
        max-width: 300px;
        min-width: 250px;
        position: relative;
        box-shadow: 2px 2px 10px rgba(255, 38, 38, 0.766);
        background-color: white;
        transition: transform 300ms,box-shadow 300ms;
    }
    .productphoto {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .stock {
       background-color: red;
       color: white;
       position: absolute;
       padding: 4px 20px 4px 2px;
       clip-path: polygon(0% 0%,0% 100%,85% 100%,100% 50%,85% 0%);
       top: 10px;
       left: 0px;
       font-style: italic;
    }
    .discount {
        color: azure;
        background-color: blueviolet;
        position: absolute;
        padding: 4px 2px 4px 10px;
        top: 10px;
        right: 0px;
    }
    .price {
        background-color: rgb(254, 237, 0);
        color: red;
        position: absolute;
        z-index: 1;
        padding: 10px 20px;
        bottom: 5px;
        left: 10px;
        font-size: 20px;
        font-weight: bolder;
        clip-path: polygon(0% 0%,90% 0%,100% 100%,10% 100%);
        transition:  background-color 300ms,color 100ms;
        box-shadow:inset 0px 0px 5px rgba(0, 0, 0, 0.3);
    }
    .product {
        background-color: rgba(255, 255, 255, 0.5);
        position: absolute;
        bottom: 0px;
        height: 40%;
        width: 100%;
        display: flex;
        justify-content: center;
        opacity: 0;
        transition: opacity 300ms;
    }
    article:hover {
        transform: translateY(-5px);
        box-shadow: -2px -2px 10px rgb(255, 0, 0);
    }
    article:hover .price {
        background-color: red;
        color: white;
    }

    article:hover .product {
        opacity: 1;
    }
    .checkout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        position: absolute;
        bottom: 40%;
    }
    .buy {
        background-color: rgb(0, 0, 0);
        color: azure;
    }
    .add {
        background-color: azure;
        color: rgb(0, 0, 0);
    }
    .buy, .add {
        padding: 10px 20px;
        border-style: solid;
        border-color: rgb(0, 0, 0);
        border-radius: 5px;
        border-width: 1px;
        cursor: pointer;
        transition: opacity 300ms,filter 300ms;
    }
    .buy:hover, .add:hover {
        opacity: 0.8;
    }
    .buy:active, .add:active {
        opacity: 0.6;
        filter: invert(1);
    }