/*  ______     ______     ______   ______     __  __                      */
/* /\  ___\   /\  ___\   /\__  _\ /\  __ \   /\ \/\ \                     */
/* \ \  __\   \ \___  \  \/_/\ \/ \ \ \/\ \  \ \ \_\ \                    */
/*  \ \_____\  \/\_____\    \ \_\  \ \_____\  \ \_____\                   */
/*   \/_____/   \/_____/     \/_/   \/_____/   \/_____/                   */
/*                                                                        */
/*  ______   __     ______     ______     __   __     _____     ______    */
/* /\  ___\ /\ \   /\  ___\   /\  __ \   /\ "-.\ \   /\  __-.  /\  __ \   */
/* \ \  __\ \ \ \  \ \ \____  \ \  __ \  \ \ \-.  \  \ \ \/\ \ \ \ \/\ \  */
/*  \ \_\    \ \_\  \ \_____\  \ \_\ \_\  \ \_\\"\_\  \ \____-  \ \_____\ */
/*   \/_/     \/_/   \/_____/   \/_/\/_/   \/_/ \/_/   \/____/   \/_____/ */
/*                                                                        */
/*  __         ______     __  __     ______     ______                    */
/* /\ \       /\  __ \   /\ \/\ \   /\  ___\   /\  __ \                   */
/* \ \ \____  \ \ \/\ \  \ \ \_\ \  \ \ \____  \ \ \/\ \                  */
/*  \ \_____\  \ \_____\  \ \_____\  \ \_____\  \ \_____\                 */
/*   \/_____/   \/_____/   \/_____/   \/_____/   \/_____/                 */
/* Cornélio, Felipe - 2025*/

:root {
    --main-bg-color: #1E1E1E;
    --secondary-color: #FF3D10;
    --text-color: white;
    --btn-bg: green;
}

* {
    font-family: 'Jetbrains Mono', monospace;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--text-color);
    scroll-behavior: smooth;

    a {
        text-decoration: none;
    }

    li {
        list-style: none;
    }

    body {
        background-color: var(--main-bg-color);

        header {
            width: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
            z-index: 3;

            #topRow {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                align-items: center;
                height: 82px;
                border-bottom: 2px solid var(--secondary-color);
                background-color: var(--main-bg-color);

                #leftSide {
                    width: 65%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    #logo {
                        width: 124px;
                        height: 46px;
                        margin-left: 15px;
                    }

                    #menuDiv {

                        #dropdown {
                            display: grid;
                            grid-template-columns: repeat(4, 1fr);
                            justify-items: center;
                            position: absolute;
                            left: 0;
                            top: -500px;
                            z-index: -5;
                            width: 100%;
                            height: 245px;
                            background-color: var(--main-bg-color);
                            border: 2px solid var(--secondary-color);
                            border-top: none;
                            transition: all 0.5s;

                            ul {
                                li {
                                    list-style: none;

                                    a {
                                        text-decoration: none;
                                        line-height: 30px;
                                    }
                                }

                                &:first-child {
                                    grid-column: 1;
                                }

                            }
                        }
                    }
                }

                #pesquisar {
                    text-align: right;
                    width: 100%;
                    height: 35px;
                    border: 2px solid black;
                    border-radius: 25px;
                    color: black;
                    background-color: var(--secondary-color);

                    &::placeholder {
                        color: var(--main-bg-color);
                    }
                }

                #rightSide {
                    justify-self: center;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 80%;

                    #btnContainer {
                        display: inherit;
                        align-items: center;

                        @media (max-width: 550px) {
                            h4 {
                                display: none;
                            }
                        }

                        #btn {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            background-color: var(--btn-bg);
                            width: 30px;
                            height: min-content;
                            border-radius: 15px;
                            border: 1px solid black;


                            #ball {
                                width: 15px;
                                height: 15px;
                                border-radius: 15px;
                                background-color: white;
                                border: 1px solid black;
                                margin-left: 15px;
                            }
                        }

                    }

                    #carrinho {
                        width: 45px;
                        height: 45px;

                        a {
                            svg {
                                width: auto;
                                height: auto;
                                fill: var(--secondary-color);
                            }
                        }
                    }

                    #userDiv {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        width: 45px;
                        height: 45px;
                        background-color: var(--secondary-color);
                        border: black 3px solid;
                        border-radius: 45px;

                        svg {
                            fill: var(--main-bg-color);
                            width: 25px;
                            height: 25px;
                        }
                    }
                }
            }
        }

        #splash {
            width: 100%;
            height: 70vh;
            align-items: center;
            justify-content: center;
            display: flex;
            border-bottom: 1px solid var(--secondary-color);

            background-image: url(assets/placeholder.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-attachment: fixed;

            div {
                width: 40%;
                height: 20vh;
                background-color: var(--main-bg-color);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-evenly;
                text-align: center;

                a {
                    padding: 10px;
                    background-color: var(--secondary-color);
                }
            }
        }

        #highlights {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 5%;

            &>h1 {
                margin: 2% 0;
            }

            #sale {
                width: 70%;
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 30px;
                padding: 1% 0%;
                margin-bottom: 2%;
                border-bottom: var(--secondary-color) 3px solid;
                border-top: var(--secondary-color) 3px solid;

                &>div {
                    width: auto;

                    img {
                        width: 100%;
                    }
                }
            }

            #new {
                width: 70%;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: repeat(3, 1fr);
                gap: 20px;

                &>div {
                    width: auto;
                    border-radius: 8px;
                    transition: .5s all;

                    &:hover {
                        background-color: rgba(0, 0, 0, 0.5);
                    }

                    img {
                        width: 100%;
                    }
                }
            }
        }

        #cartMain {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            height: 90vh;

            #placeholderProduct {
                margin: 2% 0 0 2%;
                grid-column: span 2;
                display: flex;
                justify-content: space-between;
                border: 2px solid var(--secondary-color);
                padding: 10px;
                border-radius: 8px;
                height: min-content;

                img {
                    width: 40%;
                    height: 40%;
                    margin-right: 1%;
                }

                &>div {
                    height: 20vh;
                    display: inherit;
                    flex-direction: column;

                    h3,
                    p {
                        margin-bottom: 3%;
                    }

                    input[type="number"] {
                        appearance: textfield;
                        width: 10%;
                        background-color: var(--secondary-color);
                        color: black;
                        border: 1px solid black;
                        border-radius: 8px;
                        padding: 2px;
                    }

                    button {
                        width: 20px;
                        background-color: var(--secondary-color);
                        color: black;
                        border: 1px solid black;
                        border-radius: 8px;
                        padding: 2px;
                    }
                }
            }

            aside {
                justify-self: center;
                border-left: 3px solid var(--secondary-color);
                padding-left: 10px;

                div {
                    width: 100%;
                    margin: 4% 2%;
                    border: 2px solid var(--secondary-color);
                    padding: 8px;
                    border-radius: 8px;

                    &>h5:not(:first-child) {
                        margin-top: 5%;
                    }
                }

                button {
                    margin-top: 4%;
                    color: black;
                    background-color: var(--secondary-color);
                    border: 1px solid black;
                    border-radius: 8px;
                    padding: 2px;
                }
            }
        }

        #genericMain {
            width: 100%;
            display: flex;
            margin: 3% 0;

            aside {
                display: flex;
                flex-direction: column;
                align-items: center;
                border: 2px solid var(--secondary-color);
                border-left: none;
                border-radius: 0 6px 6px 0;

                &>* {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    border-bottom: 2px solid var(--secondary-color);
                    margin-bottom: 2%;
                    height: min-content;
                    width: 100%;
                    position: sticky;
                }

                #filterPrice {
                    left: 0;
                    top: 0;
                    height: 10vh;

                    &>div {
                        display: flex;
                        justify-content: space-between;

                        input {
                            width: 40%;
                        }
                    }
                }

                #filterCategory {
                    left: 0;
                    top: 10vh;
                    height: 15vh;
                }

                #filterBrand {
                    left: 0;
                    top: 25vh;
                    height: 15vh;
                }
            }

            &>div {
                max-width: 1720px;
                margin: 0 0 2% 2%;

                #productGrid {
                    width: 90%;
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    grid-template-rows: repeat(4, 1fr);
                    gap: 20px;

                    &>a div {
                        width: auto;
                        border-radius: 8px;
                        transition: .5s all;

                        &:hover {
                            background-color: rgba(0, 0, 0, 0.5);
                        }

                        img {
                            width: 100%;
                        }
                    }

                }
            }
        }

        #productMain {
            width: 100%;
            height: 180vh;

            #top,
            #bottom {
                height: 70vh;
            }

            #top {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-template-rows: 10vh 80vh;
                margin: 0 2%;

                #gallery {
                    width: 100%;
                    height: 100%;
                    grid-row: 2;
                    display: flex;
                    flex-direction: column;
                    justify-content: end;
                    align-self: center;
                    align-items: center;

                    #display {
                        width: 100%;
                        height: 65vh;
                        background-image: url("assets/7hzTimelessII.png");
                        background-repeat: no-repeat;
                        background-size: contain;
                        background-position: center;
                        transition: .5s all;
                    }

                    #miniGallery {
                        display: inherit;
                        width: 70%;
                        height: 15vh;
                        justify-content: space-around;

                        img {
                            border: 2px solid var(--secondary-color);
                            border-radius: 6px;
                        }
                    }

                }
            }

        }

        footer {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            justify-items: center;
            width: 100%;
            height: 30vh;
            border-top: 1px solid var(--secondary-color);

            &>* {
                margin-top: 10%;
            }

            li {
                margin-bottom: 10%;
            }

            &>div {
                display: flex;
                flex-direction: column;
                text-align: center;
                align-items: center;

                img {
                    margin-bottom: 5%;
                    width: 124px;
                    height: 46px;
                }
            }
        }
    }
}