/* PRODUTOS CSS */ html, body { font-weight: 500; letter-spacing: 0.01em; font-size: 14px; background-color: #FFFFFA; margin: 0; padding: 0; } .bg-color{ color: #FFFFFA; } .m-color { color: #8B4513; } .bod { display: flex; flex-direction: row; justify-content: center; width: 100%; height: 100%; background-color: lightcyan; background-color: transparent; } .wrap { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; width: 100%; height:1000px; background-color: red background-color: transparent; align-items: top; } .box { display:flex; flex-direction: column; width: 400px; font-size: 15px; color: white; } .box-a { height:470px; background-color: lightsteelblue; background-color: transparent; } .box-b { height:550px; background-color: lightpink; background-color: transparent; } /* -------------------- MEDIA QUERY - DESK ----------*/ @media (min-width: 1200px) { .wrap{ height:550px }; } /* -------------------- MEDIA QUERY - NOTE BOOK ----------*/ @media (min-width: 992px) { .wrap{ height:550px }; } /* ------------------- TABLET ---------------------------- */ @media (min-width: 768px) { .bt-comprar, .bt-adicionar, .bt-vitrine { width:150px; } } /* ------------------- SMART ---------------------------- */ @media (min-width: 576px) { .bt-comprar, .bt-adicionar, .bt-vitrine { width:150px; } } /* ------------- SMART MINI DEFAULT ---------------------------- */ .produto-image { width: 400px; align-items: center; justify-content: center; padding-left: 5px; background-color: lightgray; background-color: transparent; } .produto-titulo { width: 400px; text-align: left; padding-left: 10px; font-weight: 400; font-size: 20px; letter-spacing: 0px; } .produto-sku { padding-left: 10px; font-size: 12px; font-weight: 400; color:#888; margin-top:-8px; margin-bottom : 15px } .produto-valor-anterior { padding-left: 10px; font-weight: 500; font-size: 15px; text-decoration: line-through; } .produto-valor-atual { padding-left: 10px; font-weight: 400; font-size: 22px; margin-top: -5px; } .produto-parcelamento { padding-left: 10px; font-weight: 500; font-size: 15px; margin-top: -5px; } .descricao-titulo { width: 400px; margin-bottom: 10px; font-weight: 500; font-size: 20px; color: #333; text-decoration: none; text-align: left; padding-left: 10px; } #descricao-texto{ width: 400px; margin-bottom: 20px; font-weight: 500; font-size: 15px; text-decoration: none; text-align: left; padding-left: 10px; } .qtd-container { display: flex; width: 90px; min-width:90px; height: 30px; border: 1px solid #D2691E; border-radius: 4px; padding-left: 0px; margin-left: 10px; } .qtd-minus-plus { height: 28px; width: 28px; cursor: pointer; opacity: 1; } .qtd-dial { width: 31px; font-weight: 500; font-size: 15px; line-height: 22px; text-align: center; margin-top: 3px; } #div-botoes { width: 350px; margin-left: 10px; } .bt-adicionar, .bt-comprar, .bt-vitrine { display:flex; width: 370px; height: 40px; min-height: 40px; margin-top: 10px; margin-left: 10px; background-color: #196909; color:white; font-weight: 500; font-size: 15px; justify-content: center; align-items: center; text-align: center; border-radius: 5px; cursor: pointer; } .bt-adicionar:hover { background-color: #8B4513; } .bt-comprar:hover { background-color: #8B4513; } .bt-adicionar, .bt-comprar { display:none; } .bt-vitrine { background-color: transparent; border: 2px solid #8B4513; color: #8B4513; padding-left: 10px; } .bt-vitrine:hover { background-color: #8B4513; color: white; padding-left: 10px; } .cep-frame { display: flex; width:240px; min-width:240px; height: 30px; min-height: 30px; margin-left: 30px; margin-top: 0px; /* border:none;*/ border: 1px solid #D2691E; border-radius: 3px; justify-content: right; align-items: center; text-align: center; visibility: visible; font-size: 15px; } .input-cep { width: 100px; margin-left:10px; border:0px; outline:none; padding-block: 0px; padding-inline: 0px; } .btn-cep { width: 70px; height: 22px; line-height: 22px; font-size: 15px; padding-top:0px; border-radius: 3px; color:white; background-color: #196909; margin-right:8px; cursor: pointer; } .btn-cep:hover { background-color: #8B4513; } .div-info { width:400px; padding:10px; margin-top:30px; font-size: 15px; padding-left: 10px; } .card-info { width:400px; padding:0px; margin-top:15px; font-size: 15px; border:none; padding-left: 10px; text-align: left; color: #8B4513; background-color: transparent; } #descricao-main { width: 400px; justify-content: center; align-items: center; text-align: left; font-weight: 500; font-style: normal; font-size: 15px; padding: 20px; margin-left: 40px; } .swiper { width: 380px; } .main { align-items: center; height: auto; justify-content: center; background-color: transparent; } .swiper-slide img { display: block; width: 100%; height: 100%; } .swiper-slide { font-size: 18px; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center; } .swiper-img { height: 370px; width: 370px; align-items: center; margin-right: 70px; } .swiper-thumbs { height: 90px; width: 370px; box-sizing: border-box; padding-top: 8px; margin-right: 70px; } .swiper-thumbs .swiper-slide { width: 0%; height: 100%; opacity: 1; } .swiper-thumbs .swiper-slide-thumb-active { opacity: 1; } /* .produto-image { width: 400px; margin-top: 0px; margin-right: 0px; align-items: center; justify-content: center; } .main-coluna1-detalhe { height:800px; min-height: 100%; align-items: center; justify-content: center; background-color: transparent; } .main-coluna2-detalhe { height:800px; min-height: 100%; padding-left: 30px; background-color: transparent; } .div-coluna1-detalhe-image { margin-top: 0px; margin-right: 0px; } .image-detalhe { width: 380px; height: 380px; } .produto-detalhe-titulo { width: 400px; font-weight: 400; font-size: 20px; letter-spacing: 0px; margin-bottom : 0px; } .sku { font-size: 12px; font-weight: 400; color:#888; margin-top:-8px; margin-bottom : 15px } .div-coluna1-detalhe-valor-anterior { font-weight: 500; font-size: 15px; text-decoration: line-through; letter-spacing: 0px; } .div-coluna1-detalhe-valor-atual { font-weight: 400; font-size: 22px; margin-top: -5px; } .div-coluna1-detalhe-valor-cartao { font-weight: 500; font-size: 15px; margin-top: -5px; } .div-coluna2-detalhe { margin-left: 50px; } .sp10{ width: 300px; height: 10px; min-height: 10px; background-color: #FFFFFA; } .sp15{ width: 300px; height: 15px; min-height: 15px; background-color: #FFFFFA; } .sp20{ width: 300px; height: 20px; min-height: 20px; background-color: #FFFFFA; } .sp30{ width: 300px; height: 30px; min-height: 30px; background-color: #FFFFFA; } .sp40{ width: 300px; height: 40px; min-height: 40px; background-color: #FFFFFA; } img { vertical-align: top; } .qtd-container { display: flex; width: 90px; min-width:90px; height: 30px; border: 1px solid #D2691E; border-radius: 4px; } .qtd-minus-plus { height: 28px; width: 28px; cursor: pointer; opacity: 1; } .qtd-dial { width: 31px; font-weight: 500; font-size: 15px; line-height: 22px; text-align: center; margin-top: 3px; } #div-botoes { width: 350px; margin-left: 0px; } .bt-adicionar, .bt-comprar, .bt-vitrine { display:flex; width: 370px; height: 40px; min-height: 40px; margin-top: 10px; background-color: #196909; color:white; font-weight: 500; font-size: 15px; justify-content: center; align-items: center; text-align: center; border-radius: 5px; cursor: pointer; } .bt-adicionar:hover { background-color: #8B4513; } .bt-comprar:hover { background-color: #8B4513; } .bt-adicionar, .bt-comprar { display:none; } .bt-vitrine { background-color: transparent; border: 2px solid #8B4513; color: #8B4513; } .bt-vitrine:hover { background-color: #8B4513; color: white; } .cep-frame { display: flex; width:240px; min-width:240px; height: 30px; min-height: 30px; margin-left: 20px; margin-top: 0px; padding: 0px; border: 1px solid #D2691E; border-radius: 4px; justify-content: center; align-items: center; text-align: center; visibility: visible; font-size: 15px; } .input-cep { width: 100px; margin-left:10px; border:0px; outline:none; padding-block: 0px; padding-inline: 0px; } .btn-cep { width: 50px; height: 20px; line-height: 20px; font-size: 12px; padding-top:0px; border-radius: 3px; color:white; background-color: #196909; margin-left:10px; cursor: pointer; } .btn-cep:hover { background-color: #8B4513; } .div-info { width:400px; padding:0px; margin-top:30px; font-size: 15px; } #card-info { width:400px; padding:0px; margin-top:10px; font-size: 15px; border:none; } #descricao-main { width: 400px; justify-content: center; align-items: center; text-align: left; font-weight: 500; font-style: normal; font-size: 15px; padding: 20px; margin-left: 40px; } .descricao-titulo { width: 400px; font-weight: 500; font-size: 20px; color: #333; text-decoration: none; text-align: left; margin-bottom: 10px; } #descricao-texto{ width: 400px; font-weight: 500; font-size: 15px; text-decoration: none; text-align: left; margin-bottom: 20px; } @media screen and (min-width: 992px) { .dsk-container-detalhe { display:flash; } .smt-container-detalhe { display:none; } .bt-comprar, .bt-adicionar, .bt-vitrine { width:370px; } } @media screen and (max-width: 991.98px) { .main-coluna1-detalhe, .main-coluna2-detalhe, .produto-detalhe-image, .produto-detalhe-titulo, .sku, #descricao-main, .descricao-titulo, #descricao-texto { width: 350px; } .image-detalhe { width: 350px; height: 350px; } .input-cep { width: 90px; margin-left:0px; } #div-condicoes-de-venda, #div-condicoes-de-entrega { width:340px;} .dsk-container-detalhe { display:flash; } .smt-container-detalhe { display:none; } .bt-comprar, .bt-adicionar, .bt-vitrine { width:150px; } .main-coluna1-detalhe { background-color: #999; } .main-coluna2-detalhe { background-color: #ddd; } .swiper { background-color: #ff9; } } @media screen and (max-width: 575.78px) { .dsk-container-detalhe { display:none; } .smt-container-detalhe { display:flash; } .bt-comprar, .bt-adicionar, .bt-vitrine { width:150px; } .main-coluna1-detalhe { background-color: #999; } .main-coluna2-detalhe { background-color: #ddd; } .swiper { background-color: lightgoldenrodyellow; } } */