@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Leckerli+One&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Send+Flowers&display=swap');

:root{
    --background-main: #faf9f6;
    --background-sec: #F0F2F5;
    --background-third: #F7F6F3;
    --background-fourth: #121212;
    --accent-gold: #CCac00;
    --box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);

    --text-regular1: Roboto;
    --text-regular2: Open Sans;
    --text-bold: Cal Sans;
    --text-stylish: Leckerli One;
}

*{
    margin: 0;
    padding: 0;
}
body{
    position: relative;
    scroll-behavior: smooth;
}

main{
    background: var(--background-third);
    .showcase-offset{
        display: flex;
        align-items: center;
        margin-bottom: 60px;
        height: 250px;
        width: 100%;
        background-image: url('../../Images/showcase-bg.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        overflow: hidden;

        img{
            margin-top: 8%;
            width: 30%;
            rotate: 27deg;
            transform: scale(1.2);
            animation: scaleDown 1.5s ease forwards;
        }
        .text{
            margin-left: 1%;
            font-family: var(--text-bold);
            font-size: 5rem;
            line-height: .9;
            color: var(--background-third);

            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s ease forwards;
            animation-delay: 0.5s;
        }
    }

    .all-products{
        .product-section{
            margin-bottom: 60px;
            padding: 0 30px;
            height: fit-content;

            .title{
                padding-bottom: 20px;
                text-align: left;
                text-wrap: nowrap;
                font-size: 40px;
                font-family: var(--text-bold);
            }
            .grid-container{
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
                gap: 50px;

                .product-card{
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    height: 400px;
                    font-family: var(--text-regular1);
                    border-radius: 18px;
                    box-shadow: 0px 1.5px 5px rgba(0, 0, 0, .4);

                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                    overflow: hidden;

                    .top, .bottom{
                        width: 100%;
                        z-index: 20;
                    }
                    .top{
                        display: flex;
                        justify-content: center;
                        height: 25%;
                        border-radius: inherit;

                        .left, .right{
                            display: flex;
                            justify-content: flex-start;
                            padding: 15px;
                            width: 40%;
                            height: 65%;

                            .add-to-wishlist-btn, .product-name, .product-price{
                                display: flex;
                                align-items: center;
                                gap: 3px;
                                padding: 7px 10px;
                                width: fit-content;
                                height: fit-content;
                                font-size: .8rem;
                                color: var(--background-third);
                                white-space: nowrap;
                                background: rgba(255, 255, 255, 0.15);
                                backdrop-filter: blur(10px);
                                -webkit-backdrop-filter: blur(10px);
                                border-radius: 20px;
                                border: 1px solid rgba(255, 255, 255, 0.2);
                                box-shadow: var(--box-shadow);
                                transition: all .4s ease-in-out;
                                cursor: pointer;

                                svg{

                                    fill: var(--background-third);
                                }
                            }
                            .add-to-wishlist-btn{
                                padding: 5px 10px;
                            }
                            .add-to-wishlist-btn:hover{
                                background: rgba(255, 255, 255, 0.35);
                                box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.15),
                                -0px -.1px 3px rgba(0, 0, 0, 0.15);
                            }
                        }
                        .right{
                            flex-direction: column;
                            align-items: flex-end;
                            gap: 3px;
                            width: 55%;
                        }
                    }

                    .bottom{
                        display: flex;
                        align-items: flex-end;
                        gap: 15px;
                        margin-top: auto;
                        padding: 15px;
                        width: 90%;
                        height: 30%;
                        border-radius: inherit;

                        .left{
                            display: flex;
                            flex-direction: column;
                            gap: 5px;
                            .open-product-info-window-btn{
                                width: 100px;
                            }
                            .add-to-cart-btn{
                                svg{
                                    fill: none;
                                }
                            }
                        }
                        .right{
                            button{
                                background: var(--background-third);
                                color: var(--background-fourth);
                                font-weight: bold;
                                &:hover{
                                    color: var(--background-third);
                                }
                            }
                        }

                        /* ALL BUTTONS IN THE SECTION */
                        button{
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 5px;
                            padding: 0px 10px;
                            width: 120px;
                            height: 50px;
                            color: var(--background-third);
                            white-space: nowrap;
                            font-size: .8rem;
                            background: rgba(255, 255, 255, 0.15);
                            backdrop-filter: blur(10px);
                            -webkit-backdrop-filter: blur(10px);
                            border-radius: 20px;
                            border: 1px solid rgba(255, 255, 255, 0.2);
                            box-shadow: var(--box-shadow);
                            transition: all .4s ease-in-out;
                            cursor: pointer;

                            svg{
                                fill: var(--background-third);
                            }

                            &:hover{
                                background: rgba(255, 255, 255, 0.35);
                                box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.15),
                                -0px -.1px 3px rgba(0, 0, 0, 0.15);
                            }
                        }
                    }

                    &::after{
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 30%;
                        backdrop-filter: blur(100px);
                        background: linear-gradient(to top, rgba(0, 0, 0, .5),  transparent);
                        mask-image: linear-gradient(to top, black, transparent);
                        -webkit-mask-image: linear-gradient(to top, black, transparent);
                        z-index: 10;
                    }
                }
            }
        }
    }

    .back-to-top{
        position: fixed;
        display: none;
        bottom: 15%;
        right: 7%;
        width: 20px;
        padding: 7px 7px;
        background: rgba(87, 94, 85, .4);
        backdrop-filter: blur(10px);
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, .6);
        z-index: 60;

        svg{
            fill: var(--background-third);
            transform: rotate(-90deg);
        }
    }
}
@keyframes scaleDown {
    to {
        transform: scale(1);
    }
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 900px){
    main{
        .showcase-offset{
            position: relative;
            justify-content: center;
            img{
                position: absolute;
                left: -20%;
                width: 310px;
            }
            .text{
                font-size: 3rem;
            }
        }
    }
}
@media (max-width: 600px){
    main{
        .showcase-offset{
            img{
                bottom: -35%;
            }
            .text{
                margin-bottom: 40px;
                font-size: 2.8rem;
            }
        }
    }
}
@media (max-width: 500px){
    main{
        .all-products{
            .product-section{
                .grid-container{
                    .product-card{
                        .top{
                            .left, .right{
                                .add-to-wishlist-btn, .product-name, .product-price{
                                    padding: 10px 12px;
                                }
                            }
                            .left{
                                padding: 10px;
                            }
                        }
                        .bottom{
                            gap: 5px;
                            .left{
                                .open-product-info-window-btn{
                                    width: 150px;
                                }
                            }
                            button{
                                padding: 8px 12px;
                                width: 160px;
                                height: 55px;
                            }
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 390px){
    main{
        .showcase-offset{
            .text{
                font-size: 2.5rem;
            }
        }
        .all-products{
            .product-section{
                .grid-container{
                    .product-card{
                        .bottom{
                            gap: 10px;
                            .left{
                                .open-product-info-window-btn{
                                    width: 125px;
                                }
                            }
                            button{
                                width: 135px;
                                height: 50px;
                            }
                        }
                    }
                }
            }
        }
    }
}