/*
author: Zowie Beha
license: Copyright © 2024 Zowie Beha
*/


/* ===========
Products content
============== */

/* in the future i'd like the whole card area to be clickable */

/* main > section#products {
    padding: 0 0.6em;
} */
main > section#products .product-flexbox {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

main > section#products .product-card a {
    text-decoration: none;
}

main > section a p span.arrow {
    display: inline-block;
    position: absolute;
    transition-property: padding-left;
    transition-duration: 1s;
    padding-left: 0.3em;
    
    line-height: 1.3em;
}

main > section a:hover p span.arrow {
    padding-left: 0.6em;
}


main > section p br {
    margin-bottom: 1em;
}

main > section#products .product-card {
    background-color: rgb(240, 237, 237);
    border: 1px solid rgb(221, 218, 218);
    padding: 1em 1.5em;
    border-radius: 1em;
}

main > section#products .product-card h2 {
    margin-top: 0.5em;
    color: #383333;
}

main > section#products .product-card .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

main > section#products .product-card .bottom-info {
    display: flex;
    gap: 10px;
    color: rgb(85, 79, 16);
    margin-top: 0.3em;
}

main > section#products .product-card img {
    width: 20em;
    height: 20em;
    object-fit: cover;
    border-radius: 0.6em;
}


main > section#products .product-card .bottom-info .price {
    font-size: large;
    line-height: 1.1em;
    color: rgb(64, 154, 64);
}

main > section#products .product-card .info .old-price {
    color: rgb(154, 64, 64);
    text-decoration: line-through;
}

main > section#products .product-card .info.sale {
    position: relative;
    display: inline-block;
}

/* can't set a background-image on a replaced element,
so we do this instead to make it work */
main > section#products .product-card .info.sale::after {
    content: '';
    display: inline-block;
    position: absolute;

    right: 0;
    /* I could calculate this exactly instead of estimating.
    maybe after the project.*/
    bottom: 4.310em;
    width: 10em;
    height: 10em;
    /* i could also put this in a div that wraps the image so
    that I can use the image position technique instead. */
    background: url("../images/sale-img.png") no-repeat;
    background-size: contain;
}

/* main > section a {
    color: #5b86f1;
    transition-property: color;
    transition-duration: 0.1s;
}
main > section a:hover {
    color: #4c71d1;
} */

main > section > h1 {
    font-size: xx-large;
    margin-bottom: 0.5em;
}

/* ===========
Responsive Products content
============== */