* {
    box-sizing:border-box;
    padding:0;
    margin:0;
}

main {
    width:100vw;
    height:auto;
    overflow-x:visible;
    box-sizing:border-box;

    #versão1 {

        #categoria1 {
            display:flex;
            justify-content:center;
            align-items:center;
            width:100%;
            height:250px;
            position:relative;
            left:50%;
            transform:translateX(-50%);
            z-index:3;
            margin-top:80px;
            box-shadow:0px 5px 10px #96832e;
            background-color:#e6ddae;
            cursor:pointer;

            #link_loja {
                display:flex;
                justify-content:center;
                align-items:center;
                height:100%;
                width:100%;
                color:#ffffff;
                font-size:25px;
                font-weight:bold;
            }
        }

        #destaques {
            border:1px solid green;
            width:100vw;
            position:relative;

            h2 {
                border:1px solid orange;
                display:flex;
                align-items:center;
                height:90px;
                font-size:40px;
                padding-left:7%;
            }

            #itens_destaques {
                border:1px solid red;

                #itens_controle {
                    height:45vw;
                    max-height:350px;
                    width:100%;
                    position:absolute;
                    margin:0.5%;

                    #icone_anterior {
                        border:1px solid #ffffff;
                        border-radius:50px;
                        display:flex;
                        justify-content:center;
                        align-items:center;
                        height:50px;
                        width:50px;
                        position:absolute;
                        top:45%;
                        z-index:2;
                        margin-left:20px;
                        cursor:pointer;
                        color:#ffffff;
                        background-color:#ccc9c944;
                    }

                    #icone_avançar {
                        border:1px solid #ffffff;
                        border-radius:50px;
                        display:flex;
                        justify-content:center;
                        align-items:center;
                        height:50px;
                        width:50px;
                        position:absolute;
                        top:45%;
                        justify-self:end;
                        z-index:2;
                        margin-right:25px;
                        transform:rotate(180deg);
                        cursor:pointer;
                        color:#ffffff;
                        background-color:#ccc9c944;
                    }
                }

                #container_destaques {
                    border:1px solid red;
                    width:100%;
                    position:relative;
                    overflow:hidden;
                    white-space:nowrap;

                    .img_destaques {
                        border:1px solid #000000;
                        display:inline-block;
                        vertical-align:text-top;
                        max-width:350px;
                        padding:0.5%;

                        #imagem {
                            border:1px solid yellow;
                            border-radius:10px;
                            display:block;
                            height:45vw;
                            max-height:350px;
                            width:39vw;
                            max-width:330px;
                            margin:auto;
                            background-color:#000000;
                        }

                        #nome_d {
                            border:1px solid blue;
                        }

                        #valor_d {
                            border:1px solid yellow;
                            height:20px;
                        }

                        #contato_d {
                            display:none;
                            justify-content:center;

                            a {
                                margin:5px;
                                text-decoration:none;
                                font-size:clamp(19px, 2.5vw, 25px);
                            }
                        }
                    }
                }
            }
        }
    }

    #versão2 {
        display:none;
        flex-direction:column;
        overflow-y:hidden;
        z-index:4;

        #itens {
            display:grid;
            grid-template-columns:30% 30% 30%;
            justify-content:center;
            column-gap:20px;
            width:100vw;
            position:relative;
            margin-bottom:5%;

            .info_item {
                display:flex;
                flex-direction:column;
                width:80%;
                aspect-ratio:16/23;
                margin:auto;
                margin-top:8%;
                margin-bottom:5%;
                box-shadow:1px 1px 3px #96832e;
                cursor:pointer;
                background-color:#e6ddae;

                #img {
                    height:40%;

                    #imagem_dinâmica {

                        source {
                            height:100%;
                            width:100%;
                        }

                        img {
                            height:100%;
                            width:100%;
                            background-size:contain;
                        }
                    }

                    #oferta {

                    }
                }

                #container_preço {
                    display:flex;
                    flex-direction:column;
                    align-items:center;
                    height:60%;
                    padding-top:15px;

                    #marca_peça {
                        padding:5px;
                        color:#000000;
                        font-weight:bold;
                    }

                    #nome_peça {
                        width:100%;
                        padding:10px;
                        color:#858383;
                        font-size:20px;
                        text-align:center;
                        text-overflow:ellipsis;
                        overflow:hidden;
                        white-space:nowrap;
                    }

                    #_preço {
                        display:flex;
                        padding:7px;
                    
                        #sem_desconto {
                            margin-right:10px;
                            color:#000000;
                            font-weight:bold;
                        } 

                        #com_desconto {
                            color:#b10303;
                            font-weight:bold;
                        }
                    }
                }
            }
        }

        #destaques {
            border:1px solid green;
            width:100vw;
            position:relative;
            overflow-x:hidden;

            h2 {
                border:1px solid orange;
                display:flex;
                align-items:center;
                height:90px;
                font-size:40px;
                padding-left:7%;
            }

            #itens_destaques {
                border:1px solid red;

                #itens_controle {
                    height:45vw;
                    max-height:350px;
                    width:100%;
                    position:absolute;
                    margin:0.5%;

                    #icone_anterior {
                        border:1px solid #ffffff;
                        border-radius:50px;
                        display:flex;
                        justify-content:center;
                        align-items:center;
                        height:50px;
                        width:50px;
                        position:absolute;
                        top:45%;
                        z-index:2;
                        margin-left:20px;
                        cursor:pointer;
                        color:#ffffff;
                        background-color:#ccc9c944;
                    }

                    #icone_avançar {
                        border:1px solid #ffffff;
                        border-radius:50px;
                        display:flex;
                        justify-content:center;
                        align-items:center;
                        height:50px;
                        width:50px;
                        position:absolute;
                        top:45%;
                        justify-self:end;
                        z-index:2;
                        margin-right:25px;
                        transform:rotate(180deg);
                        cursor:pointer;
                        color:#ffffff;
                        background-color:#ccc9c944;
                    }
                }

                #container_destaques {
                    border:1px solid red;
                    width:100%;
                    position:relative;
                    overflow:hidden;
                    white-space:nowrap;

                    .img_destaques {
                        border:1px solid #000000;
                        display:inline-block;
                        vertical-align:text-top;
                        max-width:350px;
                        padding:0.5%;

                        #imagem {
                            border:1px solid yellow;
                            border-radius:10px;
                            display:block;
                            height:45vw;
                            max-height:350px;
                            width:39vw;
                            max-width:330px;
                            margin:auto;
                            background-color:#000000;
                        }

                        #nome_d {
                            border:1px solid blue;
                        }

                        #valor_d {
                            border:1px solid yellow;
                            height:20px;
                            }

                        #contato_d {
                            display:none;
                            justify-content:center;

                            a {
                                margin:5px;
                                text-decoration:none;
                                font-size:clamp(19px, 2.5vw, 25px);
                            }
                        }
                    }
                }
            }
        }

        #modal {
            display:flex;
            justify-content:center;
            align-items:center;
            height:0;
            width:0;
            position:fixed;
            top:12vh;
            z-index:4;
            transition:0.1s;
            background-color:#00000056;

            #modal_item {
                border-radius:20px;
                width:60%;
                max-width:350px;
                height:70%;
                box-shadow:1px 1px 5px #000000;
                background-color:#ffffff;
            

                #container_img {
                    border-top-left-radius:20px;
                    border-top-right-radius:20px;
                    height:50%;
                    width:100%;

                    img {
                        border-top-left-radius:20px;
                        border-top-right-radius:20px;
                        height:100%;
                        width:100%;
                    }
                }

                #container_p {
                    display:flex;
                    flex-direction:column;
                    align-items:center;
                    row-gap:10px;
                    height:20%;
                    padding-top:5%;
                    margin-bottom:5%;

                    #marca_p {
                        color:#000000;
                        font-weight:bold;
                    }

                    #nome_p {
                        color:#858383;
                        font-weight:bold;
                    }

                    #preço_p {
                        color:#b10303;
                        font-weight:bold;
                    }
                }

                #container_contatar {
                    display:flex;
                    flex-direction:column;
                    align-items:center;
                    height:30%;
                    padding:5%;

                    #contatar_texto {
                        font-weight:bold;
                        margin-bottom:5%;
                    }

                    #contatar_links {

                        #whatsapp {

                            i {
                                font-size:30px;
                            }
                        }

                        #instagram {

                            i {
                                font-size:30px;
                            }
                        }   
                    }
                }
            }
        }
    }
} 

@media (min-width:700px) {
    main {
        position:relative;
        top:60px;
        
        #versão1 {
            display:none;
        }

        #versão2 {
            display:flex;
        }
    }
}