/* FIXOS */ .processando-pagamento{ display:none;flex-flow:column;align-items:center;width:100vw;height:100vh;background-color: rgba(255,255,255,.99);position:fixed;top:0;left:0;z-index: 10; } .processando-pagamento div{ margin:auto auto 0 auto;border: solid 5px #9f2256; border-top: 5px solid rgba(0,0,0,0); border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; } .processando-pagamento > h1{ margin:25px auto auto auto;font-size:16px;color:#313c52; } .carregando-checkout{ position:fixed;width:100vw;height:100vh;background-color:#ffffff;display:flex;align-items:center;z-index:10; } .carregando-checkout div{ margin:0 auto; border: solid 5px #5846f7; border-top: 5px solid rgba(0,0,0,0); border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .carregando-no-botão{ margin:0 auto;display:flex;width:25px;height:25px;box-sizing: border-box;align-items:center;background-color:rgba(0,0,0,0);z-index:10; } .carregando-no-botão > div{ margin:auto;border-radius: 12.5px; width: 25px; height: 25px; animation: spin 0.35s linear infinite;border: 4px solid transparent;border-bottom-color: #ffffff; border-right-color: #ffffff; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #div_erro_de_pagamento{ display:none;align-items:center;background-color:rgba(255, 0, 21, 0.7);padding:20px;margin:10px 0;border-radius:8px; } #div_erro_de_pagamento > h1{ font-weight:normal;font-size:16px;color:#ffffff; } /* AMBIENTE SEGURO */ .section-ambiente-seguro{ display:none;flex-flow:column;align-items:center;width:100vw;height:100vh;background-color: rgba(0,0,0,.5);position:fixed;top:0;left:0;z-index: 10; overflow-y: auto; } .div-ambiente-seguro{ display:flex;flex-flow:column;width:calc(100% - 32px);height:max-content;background-color: #ffffff;border:solid 1px #ddd;border-radius:6px;margin:50px 16px;padding:32px 48px; } .div-ambiente-seguro > div:nth-of-type(1){ display:flex;align-items:center;justify-content: space-between;margin-bottom:20px; } .div-ambiente-seguro > h1{ font-size:32px;color:#313c52; } .div-ambiente-seguro > h1 > span{ color:#59bf75; } .div-ambiente-seguro > p{ font-size:18px;color:#626262;margin:15px 0; } .div-ambiente-seguro > span{ font-size:16px;color:#3d4456;margin:15px 0;font-weight:600; } .ul-ambiente-seguro{ display:flex;flex-flow:row wrap;gap:25px; } .ul-ambiente-seguro > li{ display:flex;align-items:flex-start;gap:25px; } .ul-ambiente-seguro > li > div{ display:flex;flex-flow:column;gap:5px; } .ul-ambiente-seguro > li > div > p{ font-size:16px;color:#3d4456;font-weight:600; } .ul-ambiente-seguro > li > div > span{ font-size:12px;color:#636363; } .div-ambiente-seguro > button{ min-height:44px;max-height:44px;background-color: #59bf75;border:none;border-radius:8px;margin-top:42px; font-size:16px;font-weight:600;color:#fff; } .section-senha-do-cartão{ display:none;flex-flow:column;align-items:center;width:100vw;height:100vh;background-color: rgba(0,0,0,.71);position:fixed;top:0;left:0;z-index: 10; } .div-identificação-do-banco{ display:flex;align-items:center;padding:0;flex-flow: row !important; } .div-identificação-do-banco > img{ max-height:50px;margin:0 auto 0 0; } .div-identificação-do-banco > div{ margin:0 0 0 auto;width:max-content; } .div-identificação-do-banco > div > svg{ min-width:44px;max-width:44px;display:none; } .div-senha-do-cartão{ display:flex;flex-flow:column;width:calc(100% - 32px);height:max-content;background-color: #ffffff;border:solid 1px #ddd;border-radius:6px;margin:auto 16px;padding:16px; } .div-senha-do-cartão > hr{ background-color:#ddd;min-height:1px;max-height:1px;border:none;margin:7px 0 15px; } .div-senha-do-cartão > h1{ font-size:20px;font-weight:bold;color:#313c52;margin-bottom:16px; } .div-senha-do-cartão > h2{ font-size:16px;font-weight:normal;color:#313c52;margin-bottom:16px; } .div-senha-do-cartão > button{ padding: 16px 24px;background-color: #23d07d;color: #ffffff;cursor:pointer;border-radius: 4px;text-transform: uppercase; border:none;font-weight:bold;font-size:16px;margin-top:20px;min-height:52px;max-height:52px; } .section-cartão-virtual{ display:none;flex-flow:column;align-items:center;width:100vw;height:100vh;background-color: rgba(0,0,0,.71);position:fixed;top:0;left:0;z-index: 10; } .div-cartão-virtual{ display:flex;flex-flow:column;width:calc(100% - 32px);height:max-content;background-color: #ffffff;border:solid 1px #ddd;border-radius:6px;margin:auto 16px;padding:16px; } .div-cartão-virtual > hr{ background-color:#ddd;min-height:1px;max-height:1px;border:none;margin:7px 0 15px; } .div-cartão-virtual > h1{ font-size:20px;font-weight:bold;color:#313c52;margin-bottom:16px; } .div-cartão-virtual > h2{ font-size:16px;font-weight:normal;color:#313c52;margin-bottom:16px; } .div-cartão-virtual > button{ padding: 16px 24px;background-color: #23d07d;color: #ffffff;cursor:pointer;border-radius: 4px;text-transform: uppercase; border:none;font-weight:bold;font-size:16px;margin-top:20px;min-height:52px;max-height:52px; } .div-cartão-virtual > div{ display:flex;flex-flow:column;gap:16px; } body{ margin:0;width:100%;-webkit-text-size-adjust:none;background-color: #f2f2f3; } header{ display:flex;flex-flow:column; } header > section:nth-of-type(1){ display:flex;align-items:center;justify-content: space-between;padding:16px;min-height:80px;max-height:80px; } header > section:nth-of-type(1) > div{ display:flex;align-items:center;justify-content: space-between;width:100%; } header > section:nth-of-type(1) > div > img{ min-height:60px;max-height:60px; } header > section:nth-of-type(1) > div > svg{ margin-left:auto; } header > section:nth-of-type(2){ display:flex;align-items:center;min-height:71px;max-height:71px;background-color: #9f2256;text-align:center;padding:16px; } header > section:nth-of-type(2) > span{ width:max-content;margin:0 auto;font-size:14px;color:#ffffff;padding:0 15px;line-height:19.2px; } main{ display:flex;flex-flow:column; } main > section{ display:flex;flex-flow:column;margin-top:10px; } .section-div-1{ display:flex;flex-flow:column;order:2; } .section-identificação{ display:flex;flex-flow:column;gap:16px;padding:16px;background-color:#ffffff;border-radius:12px;border-color: transparent; margin:16px; } .section-identificação > b{ font-size:16px;color:#313c52; } .div-identificação{ display:flex;flex-flow:column;gap:16px; } .div-inputs{ display:flex;flex-flow:column;gap:16px; } .div-input{ display:flex;flex-flow:column; } .div-cep{ position:relative; } .div-input > label{ font-size:14px;color:#313c52;font-weight:500;margin:0 0 5px; } .div-input > input, .div-input > select{ width:100%;min-height:49px;max-height:49px;border:solid 1px #ddd;padding:14px 16px;border-radius:8px;font-size:16px;outline:0;color:#313c52; background-color:#ffffff; } .div-input > input::placeholder, .div-input > select::placeholder{ color:#ddd; } .div-input > input:hover, .div-input > select:hover{ border:solid 1px rgb(46,133,236);filter: drop-shadow(rgba(46,133,236,0.3) 0px 0px 7px); } .spiner-cep{ position: absolute;top:38px;right:12px;display: none;width: 16px;height: 16px;animation-name: spiner-cep;animation-duration: 1.5s;animation-iteration-count: infinite;animation-timing-function: linear; } .div-input-erro{ display:none;align-items:center;gap:3px;margin-top:5px; } .div-input-erro span{ font-size:12px;color:#d10000; } .div-endereço{ display:flex;flex-flow:column; } .div-endereço-completo{ display:none;flex-flow:column;gap:16px;margin-top:16px; } .section-entrega{ display:flex;flex-flow:column;gap:16px;padding:16px;background-color:#ffffff;border-radius:12px;border-color: transparent; margin:16px; } .section-entrega > b{ font-size:16px;color:#313c52; } .div-outro-recebedor{ display:flex;flex-flow:column;gap:5px;margin-top:-14px; } .div-outro-recebedor > div:nth-of-type(1){ display:flex;align-items:center;gap:5px;text-align:left; } .div-outro-recebedor > div:nth-of-type(1) > span{ font-size:14px;color:#313c52; } .div-outro-recebedor > div:nth-of-type(1) > a{ font-size:14px;color:#0275d8;font-size:14px;text-decoration:none;cursor:pointer; } .div-outro-recebedor > div:nth-of-type(2){ display:none;flex-flow:column;margin-top:15px; } .div-endereço-pendente{ display:flex;flex-flow:column;border: 1px dashed #ddd;border-radius: 8px;padding: 24px; } .div-endereço-pendente h1{ font-style: normal;font-weight: 500;font-size: 16px;line-height: 19px;letter-spacing: -0.02em;color: #585858; } .div-endereço-pendente span{ font-style: normal;font-weight: 500;font-size: 12px;line-height: 15px;color: #999999;margin-top:8px; } .div-entregas{ display:flex;flex-flow:column;gap:16px;margin-top:30px; } .div-entregas > b{ font-size:14px;font-weight:500;color:#373737; } .ul-entregas{ display:none;flex-flow:column;gap:16px; } .li-entrega{ display:flex;align-items:center;padding:20px;border-radius:10px;border:solid 1px #dddddd;gap:20px;cursor:pointer; } .li-entrega-selecionada{ border:solid 1px #2e85ec; } .div-radio{ min-width:26px;max-width:26px;min-height:26px;max-height:26px;border-radius:26px;border:solid 1px #ddd; display:flex;align-items:center;text-align:center; } .li-entrega-selecionada .div-radio{ border-color:#2e85ec; } .li-entrega-selecionada .div-radio > span{ min-width:16px;max-width:16px;min-height:16px;max-height:16px;border-radius:16px; background-color: #2e85ec;margin:0 auto; } .li-entrega > div:nth-of-type(2){ display:flex;flex-flow:column;gap:5px;height:max-content; } .li-entrega > div:nth-of-type(2) > h1{ font-size:14px;color:#373737;font-weight:500;margin:0; } .li-entrega > div:nth-of-type(2) > span{ font-size:12px;color:#999999;font-weight:400;margin:0; } .li-entrega > h2{ font-size:14px;color:#313c52;font-weight:400;margin:0 0 0 auto; } .div-entregas > span{ font-size:10px;color:#999999; } .section-pagamento{ display:none;flex-flow:column;gap:16px;padding:16px;background-color:#ffffff;border-radius:12px;border-color: transparent; margin:0 16px 16px; } .section-pagamento > b{ font-size:16px;color:#313c52; } .ul-formas-de-pagamento{ display:flex;align-items:center;gap:12px;margin:0 auto; } .li-forma-de-pagamento{ display:flex;align-items:center;min-width:100px;max-width:100px;min-height:57px;max-height:57px;border-radius:4px;box-shadow: inset 0 0 0 1px #4388d3; position:relative;cursor:pointer; } .li-forma-de-pagamento-selecionada{ box-shadow: inset 0 0 0 2px #E93889; } .li-forma-de-pagamento > svg{ margin:0 auto; } .li-forma-de-pagamento > span{ position: absolute;bottom: -6px;left:26px;display: flex;justify-content: center;align-items: center;align-self: center;text-align: center; min-width: 52px;height: 18px;padding: 4px 7px;background: #59bf75;border-radius: 4px;letter-spacing: 0;color: #fff;font-size: 8px; font-weight: 600;line-height: 10px; } .pagamento-no-cartão{ display:flex;flex-flow:column;border:solid 1px #ddd;border-radius:4px; } .pagamento-no-cartão > div:nth-of-type(1){ display:flex;flex-flow:column;padding:15px;background-color:#f3f3f3;border-bottom:solid 1px #ddd; } .pagamento-no-cartão > div:nth-of-type(1) > p{ font-size:14px;color:#999999;margin:0 auto; } .pagamento-no-cartão > div:nth-of-type(1) > div{ display:flex;align-items:center;gap:5px;margin:0 auto; } .pagamento-no-cartão > div:nth-of-type(1) > div > svg{ min-width:44px;max-width:44px; } .pagamento-no-cartão > div:nth-of-type(2){ display:flex;flex-flow:column;padding:30px 20px;gap:16px; } .div-inputs-validade-cvv{ display:flex;align-items:flex-start;gap:16px;flex-flow:row wrap;justify-content: space-between; } .div-inputs-validade-cvv > div:nth-of-type(1), .div-inputs-validade-cvv > div:nth-of-type(2){ width:calc(50% - 16px); } .div-inputs-validade-cvv > div:nth-of-type(3){ width:100%; } .pagamento-no-pix{ display:none;flex-flow:column;border:solid 1px #ddd;border-radius:4px;padding:25px 20px; } .desconto-no-pix{ display:flex;align-items:flex-start;gap:10px; } .desconto-no-pix-percentual{ border-radius: 4px;border: 1px solid #6acd85;background: #ecf5f1;font-family: Inter;font-style: normal;font-weight:bold; font-size: 12px;color: #59bf75;min-width:max-content;padding:5px 40px;margin-bottom:35px; } .desconto-no-pix > span{ font-size:14px;color:#313c52;font-weight:bold; } .desconto-no-pix-valor{ color:#59bf75; } .pagamento-no-pix > span{ font-style: normal;font-weight: 400;font-size: 16px;color: #7e7e7e;text-align: left; } .ofertas-disponiveis{ display:flex;flex-flow:column; } .ofertas-disponiveis > div{ display:flex;align-items:center; } .ofertas-disponiveis > div > span{ font-size:14px;color:#59bf75;font-weight:500; } .ofertas-disponiveis > div > span > span{ color:#373737; } .ofertas-disponiveis > div > button{ min-width:36px;max-width:36px;min-height:36px;max-height:36px;padding:5px;border-radius:36px;background-color:#f1f1f1;border:none; display:flex;align-items:center;cursor:pointer; } .ofertas-disponiveis > div > button:nth-of-type(1){ margin:0 10px 0 auto; } .ofertas-disponiveis > div > button svg{ margin:0 auto;min-width:16px;max-width:16px;min-height:16px;max-height:16px; } .carrossel-wrapper::-webkit-scrollbar { display: none; } .carrossel-slide { flex-shrink: 0;width: 100%;scroll-snap-align: start;scroll-snap-stop: always; } .ul-ofertas-disponiveis{ display:flex;flex-flow:row;gap:10px;margin-top:16px;min-width:100%;max-width:100%;overflow:auto;padding:10px 0 20px; scroll-snap-type: x mandatory;scroll-behavior: smooth;scroll-snap-stop: always;-webkit-overflow-scrolling: touch;-ms-overflow-style: none;scrollbar-width: none; } .li-oferta-disponivel{ display:flex;align-items:flex-start;position:relative;gap:16px;padding:16px;border:2px dashed #f79f1a;background-color:#fff5ee; transition: background-color 2s, opacity .5s, filter .5s;border-radius:4px;min-width:100%;max-width:100%; } .li-oferta-disponivel .div-oferta-adquirida, .li-oferta-disponivel .remover{ display:none;cursor:pointer; } .li-oferta-disponivel > img{ min-width:78px;max-width:78px;min-height:78px;max-height:78px;border-radius:4px;object-fit: contain; } .li-oferta-disponivel-div-1{ display:flex;flex-flow:column;padding-bottom: 15px; } .li-oferta-disponivel-div-1 h1{ font-size:14px;color:#313c52; } .li-oferta-disponivel-div-1 span{ font-size:12px;color:#999999;margin-bottom:10px; } .li-oferta-disponivel-div-1 p{ font-size:10px;color:#e81414;text-decoration: line-through; } .li-oferta-disponivel-div-1 h2{ font-size:18px;color:#59bf75; } .div-pegar-oferta{ display:flex;align-items:center;position:absolute;gap:10px; border-radius: 7px;background-color: #ff8710; } .div-pegar-oferta > input{ min-width:24px;max-width:24px;min-height:24px;max-height:24px;outline:0;border:none; } .div-pegar-oferta > span{ color: #fff;font-size:16px;font-weight:bold; } .li-oferta-adquirida{ display:flex;align-items:flex-start;position:relative;gap:16px;padding:32px 16px;border:2px dashed #59bf75;background-color:#f3fff7; transition: background-color 2s, opacity .5s, filter .5s;border-radius:4px;position:relative; } .li-oferta-adquirida .div-oferta-adquirida{ display:flex;align-items:center;color:#ffffff;font-size:10px;font-weight:bold;position:absolute; width:max-content;height: 21px;padding: 5px 9px;border-radius: 4px;background-color: #59bf75;color: #fff; left:50%;transform: translateX(-50%);top:-12px;gap:5px; } .li-oferta-adquirida .remover{ position:absolute;top:10px;right:10px;cursor:pointer; } .li-oferta-adquirida .div-oferta-adquirida > span{ margin:-2px 0 0 auto; } .li-oferta-adquirida .div-oferta-adquirida > svg{ margin:0 auto 0 0; } .li-oferta-adquirida > img{ min-width:78px;max-width:78px;min-height:78px;max-height:78px;border-radius:4px;object-fit: contain; } .li-oferta-adquirida .div-pegar-oferta{ display:none; } .ofertas-disponiveis > nav{ display:flex;align-items:center;justify-content: space-between;margin-top:15px; } .ofertas-disponiveis > nav > span{ font-size: 10px;line-height: 10px;color: #999;font-weight:bold; } .ul-quantidade-de-ofertas{ display:flex;align-items:center;gap:4px; } .li-qtde-de-ofertas{ width: 10px;height: 10px;border-radius: 50%;background-color: #cecece; } .li-qtde-de-ofertas-selecionada{ background-color: #ff8710; } .section-pagamento > button{ padding: 16px 24px;background-color: #23d07d;color: #ffffff;cursor:pointer;border-radius: 4px;text-transform: uppercase; border:none;font-weight:bold;font-size:16px;margin-top:20px;min-height:52px;max-height:52px; } .section-div-2{ display:flex;flex-flow:column;order:1; } .section-carrinho{ display:flex;flex-flow:column;gap:10px;padding:16px;background-color:#ffffff;border-radius:12px;border-color: transparent; margin:16px; } .carrinho-header{ display:flex;align-items:center; } .carrinho-header > b{ font-size:16px;color:#313c52; } .carrinho-header > div{ min-width:24px;max-width:24px;min-height:24px;max-height:24px;border-radius:24px;background-color: #E93889; display:flex;align-items:center;margin:0 10px 0 auto; } .carrinho-header > div > span{ font-size:14px;color:#ffffff;margin:0 auto;font-weight:bold; } .carrinho-header > svg{ min-width:24px;max-width:24px;min-height:24px;max-height:24px; } .ul-carrinho{ display:flex;flex-flow:column;gap:10px; } .li-produto{ display:flex;align-items:center;padding:8px 0;gap:10px; } .li-produto > img{ min-width:50px;max-width:50px;min-height:50px;max-height:50px;object-fit: cover;border-radius:6px; } .li-produto > div:nth-of-type(1){ display:flex;flex-flow:column;gap:4px;min-height:50px;align-items:flex-start; } .li-produto > div:nth-of-type(1) > h1{ font-size:14px;color:#313c52; } .li-produto > div:nth-of-type(1) > span{ font-size:12px;color:#585858; } .div-qtde{ display:flex;align-items:center;border:solid 1px #ddd;border-radius:16px;overflow:hidden;min-width:max-content;max-width:max-content; margin:0 0 0 auto; } .div-qtde > button{ min-width:30px;max-width:30px;min-height:30px;max-height:30px;background-color:transparent;border:none;cursor:pointer; } .div-qtde > span{ font-size:14px;color:#313c52;font-family:sans-serif; } .ul-brindes{ display:flex;flex-flow:column;gap:5px; } .li-brinde{ display:flex;align-items:center;gap:16px;padding:10px;border-radius:8px;box-shadow:0px 0px 7px 0px #e9e9e9;position:relative; background-color: #fff; } .li-brinde > p{ position:absolute;border-radius:16px;background-color: #0275d8;color:#fff;font-size:10px; min-width:20px;max-width:20px;min-height:20px;max-height:20px;display:flex;align-items:center;top: 5px;left: 48px; } .li-brinde > p > span{ margin:0 auto; } .li-brinde > img{ min-width:50px;max-width:50px;min-height:50px;max-height:50px;object-fit: cover;border-radius:4px; } .li-brinde > div{ display:flex;flex-flow:column;gap:5px; } .li-brinde > div > strong{ color:#313c52;font-size:14px; } .li-brinde > div > p{ color:#313c52;font-size:14px;font-weight:200; } .li-brinde > div > span{ color:#6b768a;font-size:14px;text-decoration:line-through;font-weight:200; } .div-oferta-adquirida-carrinho{ display:flex;flex-flow:column;gap:10px; } .div-oferta-adquirida-carrinho > h1{ font-size:14px;color:#313c52; } .ul-carrinho-ofertas{ display:flex;flex-flow:column;gap:10px; } .li-oferta-adquirida-carrinho{ display:flex;align-items:flex-start;position:relative;gap:16px;padding:10px;border:2px dashed #59bf75;background-color:#f3fff7; transition: background-color 2s, opacity .5s, filter .5s;border-radius:4px;position:relative; } .div-oferta-adquirida-2{ display:flex;flex-flow:column; } .div-oferta-adquirida-2 h1{ font-size:14px;color:#313c52; } .div-oferta-adquirida-2 span{ font-size:12px;color:#999999;margin-bottom:10px; } .div-oferta-adquirida-2 > div{ display:flex;align-items:center; } .div-oferta-adquirida-2 > div > p{ font-size:12px;color:#313c52; } .desconto-na-oferta{ display: flex;padding: 2px 10px;border-radius: 2px;background-color: #59bf75; font-size: 10px;max-height:20px;margin-left:5px;width:max-content; } .desconto-na-oferta > span{ color:#ffffff;font-weight: 800; } .desconto-na-oferta > svg{ margin:3px 0 0 5px; } .div-oferta-adquirida-2 > div h2{ font-size:18px;color:#59bf75; } .li-oferta-adquirida-carrinho > img{ min-width:50px;max-width:50px;min-height:50px;max-height:50px;border-radius:4px;object-fit: contain; } .li-oferta-adquirida-carrinho > svg{ min-width:18px;max-width:18px;min-height:18px;max-height:18px;margin:0 0 0 auto;cursor:pointer; } .section-carrinho > hr{ width:100%;height:1px;background-color:#ddd;border:none; } .ul-resumo-valor{ display:flex;flex-flow:column;gap:10px; } .ul-resumo-valor li{ display:flex;align-items:center;justify-content: space-between;color:#585858;font-size:14px; } .ul-resumo-valor li .valor-do-desconto{ color:#6acd85; } .div-total{ display:flex;align-items:center;justify-content: space-between;color:#585858;font-size:14px; } .div-total > span{ font-size:16px;font-weight:bold; } .ambiente-seguro-1{ display: none;flex-direction: row;justify-content: center;align-items: center;color: #313c52;cursor: pointer;padding: 8px 24px; width: 178px;height: 40px;left: 85px;top: 638px;background: #fff;border: 1px solid #f7f6f8;box-sizing: border-box;border-radius: 60px; font-style: normal;font-weight: 600;font-size: 12px;line-height: 14px;outline: 0;gap:5px;margin:0 auto 0 110px; } footer{ display:flex;flex-flow:column;background-color: #fafafa;margin-top:20px; } footer > section{ display:flex;flex-flow:column;gap:10px;margin:25px auto; } footer > section > h1{ font-size:14px;color:#222222;font-weight:400;margin:0 auto; } footer .div-pagamentos{ display:flex;align-items:flex-start;gap:5px; } footer .div-pagamentos svg{ min-width:44px;max-width:44px; } footer > section > p{ font-size:14px;color:#222222;font-weight:400;margin:0 auto; } .ambiente-seguro-2{ display: flex;flex-direction: row;justify-content: center;align-items: center;color: #313c52;cursor: pointer;padding: 8px 24px; width: 178px;height: 40px;left: 85px;top: 638px;background: #fff;border: 1px solid #f7f6f8;box-sizing: border-box;border-radius: 60px; font-style: normal;font-weight: 600;font-size: 12px;line-height: 14px;outline: 0;gap:5px;margin:10px auto; } .section-pedido-finalizado-no-pix{ display:none;flex-flow:column;background-color:#f2f2f2;position:fixed;top:0;left:0;width:100vw;min-height:100vh;max-height:100vh;z-index:10;overflow-y: auto; } .div-pedido-finalizado-no-pix{ display:flex;flex-flow:column;width:100%; } .div-pedido-finalizado-no-pix > .header{ display:flex;align-items:center;background-color:#ffffff;min-height:74px;max-height:74px;padding:15px 25px; } .div-pedido-finalizado-no-pix > .header img{ min-width:44px;max-width:44px;object-fit: contain; } .titulo-finalizado-no-pix-mobile{ font-size:18px;color:#4b4b4b;padding:35px 12px;text-align:center;display:block; } .titulo-finalizado-no-pix-desktop{ display:none; } .divisor-finalizado-no-pix{ display:flex;flex-flow:column; } .div-código-pix{ display:flex;flex-flow:column;justify-content: center;text-align:center; } .sub-div-código-pix{ display:flex;flex-flow:column;background-color:#ffffff;align-items:center;border-radius:10px;margin:0 15px; } .sub-div-código-pix > p{ font-size:14px;padding:15px 0;color:#6b6b6b; } .sub-div-código-pix > p strong{ color:#f01; } .div-código-pix-2{ padding:15px;border-top:solid 1px #dddddd;display:flex;flex-flow:column;align-items:center;text-align:center;width:100%; } .div-código-pix-2 p{ font-size:16px;color:#393939;margin:9px auto 15px;max-width:252px; } .div-código-pix-2 input{ border:solid 1px #9f9f9f;border-radius:8px;background-color: transparent;min-height:46px;max-height:46px;padding:0 12px; font-size:16px;color:#686868;margin:9px auto;width:100%; } .button-copiar-código-pix{ font: normal normal 800 14px / 14px Inter;letter-spacing: 0;text-transform: uppercase;display: flex;justify-content: center; align-items: center;align-self: center;background-color:#41c286;color:#ffffff;text-decoration:none;width:100%;border-radius:4px; user-select: none;transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; -webkit-appearance: button;overflow: visible;border:none;min-height:50px;max-height:50px;gap:5px;margin:5px 0 25px; } .button-copiar-código-pix > svg{ transform: rotate(180deg) scaleX(-1); } .valor-total-no-pix{ align-self: center;font-size:16px;color:#393939;margin:15px 0; } .valor-total-no-pix > strong{ align-self: center;font-size:16px;color:#41c286; } .outros{ display:flex;flex-flow:column;padding:15px; } .div-instruções-de-pagamento{ display:flex;flex-flow:column; } .div-instruções-de-pagamento > p{ font-size:16px;color:#4b4b4b; } .ul-instruções-de-pagamento{ display:flex;flex-flow:column;gap:28px;padding:25px 16px;border-top:solid 1px #d1d1d1;margin:12px 0; } .li-instrução-de-pagamento{ display:flex;align-items:center;gap:16px; } .li-instrução-de-pagamento > div{ display:flex;align-items:center;justify-content:center;text-align:center; min-width:42px;max-width:42px;min-height:42px;max-height:42px;border-radius:42px;background-color:#41c286; } .li-instrução-de-pagamento > div > svg{ margin:0 auto; } .li-instrução-de-pagamento > span{ font-size:14px;color:#797979;max-width:245px; } .div-detalhes-da-compra{ display:flex;flex-flow:column;margin:25px 0; } .div-detalhes-da-compra-fundo-branco{ background-color: #fff;padding: 20px;border-radius: 10px; } .div-detalhes-da-compra > p{ font-size:16px;color:#4b4b4b; } .div-detalhes-da-compra > div{ background-color: #d1d1d1;width:100%;height:1px;margin:10px 0 0 0; } .ul-detalhes-da-compra{ display:flex;flex-flow:column;gap:5px;padding:0;margin:0; } .li-produto-resumo{ display:flex;align-items:center;padding:8px 0;gap:10px; } .li-produto-resumo > img{ min-width:50px;max-width:50px;min-height:50px;max-height:50px;border-radius:6px; } .li-produto-resumo > div:nth-of-type(1){ display:flex;flex-flow:column;gap:4px; } .li-produto-resumo > div:nth-of-type(1) > h1{ font-size:14px;color:#313c52; } .li-produto-resumo > div:nth-of-type(1) > span{ font-size:12px;color:#585858; } .li-produto-resumo > p{ font-size:14px;color:#393939;min-width:max-content;margin-left:auto; } /* BRINDE */ .li-sem-fundo > li{ background-color:transparent;padding:0;box-shadow: none;margin-top:5px; } .li-sem-fundo > li > p{ top: -2px;left: 40px; } .outros > .footer{ display:flex;align-items:center;justify-content: center;text-align:center;gap:16px;margin:10px 0 30px; } @media screen and (max-width: 768px){ /* MOBILE */ .mobile{ display: flex; } .div-pegar-oferta{ bottom: -20px;left: 50%;transform: translateX(-50%);padding: 4px 8px;margin-right: 0;width: 192px; } .div-qr-code-pix{ display:none; } .titulo-código-pix-desktop{ display:none; } .desktop{ display:none; } } @media screen and (min-width: 768px){ /* DESKTOP */ .mobile{ display: none; } .banner-1{ display:none; } .div-senha-do-cartão, .div-cartão-virtual{ min-width:400px;max-width:400px;margin:auto; } .div-ambiente-seguro{ min-width:700px;max-width:700px;min-height:600px;max-height:600px;margin:35px auto auto; } .ul-ambiente-seguro{ display: grid;grid-template-columns:repeat(2, 1fr);gap:16px;margin-top:20px; } .div-ambiente-seguro > button{ min-width:282px;max-width:282px;margin:55px auto 0;cursor:pointer; } header{ min-height:max-content;max-height:max-content; } header > section:nth-of-type(1){ min-height:90px;max-height:90px;width:100%;display:flex;align-items:center; } header > section:nth-of-type(1) > div{ min-width:1110px;max-width:1110px;margin:0 auto;display:flex;align-items:center;justify-content: space-between; } header > section:nth-of-type(1) > div > img{ min-height:150px;max-height:150px; } header > section:nth-of-type(1) > div > svg{ margin-left:auto; } header > section:nth-of-type(2){ min-height:52px;max-height:52px; } main > section{ min-width:1110px;max-width:1110px;margin:13px auto;flex-flow:row;justify-content: space-between;align-items: flex-start; } .section-div-1{ min-width:647px;max-width:647px;order:1; } .section-identificação, .section-entrega, .section-pagamento{ min-width:647px;max-width:647px;padding:28px; } .section-div-2{ min-width:370px;max-width:370px;order:2;padding:0;position: sticky;top:10px; } .section-carrinho{ min-width:370px;max-width:370px; } .mobile{ display:none; } .ambiente-seguro-1{ display:flex; } .div-identificação{ flex-flow:row;justify-content: space-between; } .div-identificação > .div-input{ width:calc(50% - 16px); } .div-inputs{ flex-flow:row; } .div-cep{ min-width:180px;max-width:180px; } .div-logradouro{ min-width:75%; } .div-numero{ margin-left:20px; } .div-bairro{ margin-left:auto; } .div-cidade, .div-estado, .div-pais{ flex:1; } .ul-ofertas-disponiveis, .li-oferta-disponivel,.li-oferta-adquirida{ width:100%; } .li-oferta-disponivel,.li-oferta-adquirida{ padding:16px; } .div-pegar-oferta{ position:static;min-width:max-content;margin:auto 0 0 auto;padding:5px; } .div-pegar-oferta > input{ min-width:20px;max-width:20px;min-height:20px;max-height:20px;cursor:pointer; } .titulo-finalizado-no-pix-mobile{ display:none; } .titulo-finalizado-no-pix-desktop{ display:flex;padding:35px 0;max-width:396px;margin:0 auto;font-size:22px;color:#4b4b4b;text-align:center; } .divisor-finalizado-no-pix{ flex-flow:row;min-width:1110px;max-width:1110px;margin:0 auto;align-items:flex-start;justify-content: center; } .div-qr-code-pix{ display:flex;flex-flow:column;margin-top:15px; } .div-qr-code-pix div{ background-color: #d1d1d1;width:135px;height:1px;margin:20px auto; } .titulo-código-pix-mobile{ display:none; } .titulo-código-pix-desktop{ min-width:max-content; } .div-código-pix{ min-width:525px;max-width:525px; } .div-código-pix button{ cursor:pointer;width:218px;align-self:center; } .outros{ min-width:450px;max-width:450px;padding:0 30px; } .div-instruções-de-pagamento{ order:2; } .div-detalhes-da-compra{ order:1;margin-top:0; } .valor-total-no-pix{ align-self:left;margin-right:auto; } .outros .footer{ order:3;justify-content: left;border-top:solid 1px #d1d1d1;padding-top:25px; } } /* Exibe as setas apenas em telas maiores (Desktop) */ @media (max-width: 768px){ .carrossel-container > svg{ display:none; } }