:root { --wd-text-font: "BradescoSans", Arial, Helvetica, sans-serif; --wd-text-font-weight: 400; --wd-text-color: #777777; --wd-text-font-size: 14px; --wd-title-font: "BradescoSans", Arial, Helvetica, sans-serif; --wd-title-font-weight: 400; --wd-title-color: #242424; --wd-entities-title-font: "BradescoSans", Arial, Helvetica, sans-serif; --wd-entities-title-font-weight: 400; --wd-entities-title-color: #333333; --wd-entities-title-color-hover: rgb(51 51 51 / 65%); --wd-alternative-font: "BradescoSans", Arial, Helvetica, sans-serif; --wd-widget-title-font: "BradescoSans", Arial, Helvetica, sans-serif; --wd-widget-title-font-weight: 400; --wd-widget-title-transform: uppercase; --wd-widget-title-color: #333; --wd-widget-title-font-size: 16px; --wd-header-el-font: "BradescoSans", Arial, Helvetica, sans-serif; --wd-header-el-font-weight: 400; --wd-header-el-transform: uppercase; --wd-header-el-font-size: 13px; --wd-brd-radius: 15px; --wd-otl-style: dotted; --wd-otl-width: 2px; --wd-primary-color: rgb(255,66,142); --wd-alternative-color: #fbbc34; --btn-default-font-family: "Poppins", Arial, Helvetica, sans-serif; --btn-default-font-weight: 600; --btn-default-bgcolor: #f7f7f7; --btn-default-bgcolor-hover: #efefef; --btn-accented-font-family: "Poppins", Arial, Helvetica, sans-serif; --btn-accented-font-weight: 600; --btn-accented-bgcolor: rgb(249,56,119); --btn-accented-bgcolor-hover: rgb(211,27,87); --wd-form-brd-width: 2px; --notices-success-bg: #459647; --notices-success-color: #fff; --notices-warning-bg: #E0B252; --notices-warning-color: #fff; --wd-link-color: rgb(73,187,247); --wd-link-color-hover: rgb(28,107,147); --wd-sticky-btn-height: 95px; } .wd-age-verify-wrap { --wd-popup-width: 500px; } .wd-popup.wd-promo-popup { background-color: #111111; background-image: none; background-repeat: no-repeat; background-size: contain; background-position: left center; } .wd-promo-popup-wrap { --wd-popup-width: 800px; } :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg, :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg :is(.wd-product,.wd-cat) { --wd-prod-bg:rgb(255,255,255); --wd-bordered-bg:rgb(255,255,255); } .wd-page-title .wd-page-title-bg img { object-fit: cover; object-position: center center; } .wd-footer { background-color: rgb(83,70,140); background-image: none; } :is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) { background-color: rgb(246,246,246); background-image: none; } .woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) { background-color: rgb(246,246,246); background-image: none; } .single-product :is(.wd-page-content, .whb-header) { background-color: rgb(246,246,246); background-image: none; } html .entry-summary .single_add_to_cart_button, .wd-single-add-cart .single_add_to_cart_button { color: rgb(255,255,255); background: rgb(8,53,97); } html .entry-summary .single_add_to_cart_button:hover, .wd-single-add-cart .single_add_to_cart_button:hover { color: rgb(255,255,255); background: rgb(0,6,56); } html .btn.wd-buy-now-btn { color: rgb(255,255,255); background: rgb(255,148,0); } html .btn.wd-buy-now-btn:hover { color: rgb(255,255,255); background: rgb(211,123,0); } .wd .product-label.onsale { background-color: rgb(115,84,215); } .wd .product-label.new { background-color: rgb(115,84,215); } .wd .product-label.featured { background-color: rgb(115,84,215); } .wd .product-label.out-of-stock { background-color: rgb(255,255,255); } .wd .product-label.attribute-label:not(.label-with-img) { background-color: rgb(255,255,255); } .mfp-wrap.wd-popup-quick-view-wrap { --wd-popup-width: 920px; } @media (max-width: 1024px) { :root { --wd-sticky-btn-height: 95px; } } @media (max-width: 768.98px) { :root { --wd-sticky-btn-height: 42px; } } :root{ --wd-container-w: 1222px; --wd-form-brd-radius: 0px; --btn-default-color: #333; --btn-default-color-hover: #333; --btn-accented-color: #fff; --btn-accented-color-hover: #fff; --btn-default-brd-radius: 5px; --btn-default-box-shadow: none; --btn-default-box-shadow-hover: none; --btn-accented-brd-radius: 5px; --btn-accented-box-shadow: none; --btn-accented-box-shadow-hover: none; } @media (min-width: 1222px) { section.elementor-section.wd-section-stretch > .elementor-container { margin-left: auto; margin-right: auto; } } .wd-page-title { background-color: #0a0a0a; } @font-face { font-family: "BradescoSans"; src: url("//distrilentes.com.br/wp-content/uploads/2026/02/Bradesco-Sans.woff") format("woff"); font-weight: 400; font-display:swap; font-style: normal; } @font-face { font-family: "BradescoSans"; src: url("//distrilentes.com.br/wp-content/uploads/2026/02/Bradesco-Sans-Bold.woff") format("woff"); font-weight: 600; font-display:swap; font-style: normal; } /* Botão "Ver produto": exibir lupa */ .wd-add-btn.wd-style-icon > a.view-product-link { font-size: 0 !important; gap: 0; } .wd-add-btn.wd-style-icon > a.view-product-link::before { content: "" !important; display: inline-block !important; width: 20px; height: 20px; flex: 0 0 20px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16 16 5 5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16 16 5 5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; } /*ajustes formulario*/ .gform_hidden { display: none!important } .gform_wrapper.gravity-theme .gfield-choice-input+label { max-width: 100%!important } label { margin:0 } .woocommerce-product-details__short-description { margin: 20px 0!important } .whb-row .whb-rmrq801wtof6nnm9zjph.wd-tools-element > a > .wd-tools-icon:hover { background: #fff; } .product-tabs-wrapper { background: #083561!important; margin-bottom: 20px!important; padding-bottom: 0!important; } .cart-content-wrapper>.cart_totals .cart-totals-inner { border:0; background: #fff; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);} .wd-coupon-form .input-text { border-radius: 8px } .wd-coupon-form .input-text::placeholder { color: #c3c3c3 } .wd-product.wd-hover-tiled .product-element-bottom { text-align: center } .elementor-popup-modal .dialog-close-button { z-index: 100 } .wd-content-layout { padding-block:20px; } #customer_login p { margin-bottom: 1em!important } .woocommerce-billing-fields__field-wrapper { background: #fff; border-radius: 20px; padding: 20px 25px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05); } .woocommerce-billing-fields>h3 { text-align: center } form.woocommerce-checkout { flex-wrap: wrap!important } div.quantity input[type="button"] { border: 1px solid #c3c3c3; border-radius: 20px!important } div.quantity .btn { color: #fff; } div.quantity .plus { border-radius: 0 10px 10px 0!important} div.quantity .minus { border-radius: 10px 0 0 10px!important} /*Calculadora de Frete*/ #wc-shipping-sim { margin: 0; padding: 10px 0 0 0 } /*banner topo*/ .banner_acuvue, .banner_optix, .banner_biofinity, .banner_solflex {color: #fff} .banner_optix { display: flex; flex-direction: row; justify-content: space-around; margin-top: 30px; align-items: center; } .banner_optix p { font-size: 22px!important; color: #fff!important; line-height: 1em } .banner_acuvue h2, .banner_biofinity h2, .banner_solflex h2 {color: #fff; line-height: 1em} .banner_acuvue span, .banner_biofinity span, .banner_solflex span { color: #fff; font-size: 18px; line-height: 1em } .banner_acuvue button, .banner_biofinity button, .banner_solflex button { font-size: 14px; color: #fff; margin-top: 60px; border-radius: 15px } .banner_acuvue button:hover, .banner_biofinity button:hover, .banner_solflex button:hover { color: #fff!important } .wd-nav-pagin li { line-height: 1em } /*widged sidebar filtros*/ .wd-swatches-brands li { background: #fff; border-radius: 10px } .wd-swatches-brands a { flex: auto!important; justify-content: center; padding: 10px 0!important; } .wd-shape-round li { flex: unset!important } /*calculadora de frete*/ #wc-shipping-sim-form-fields button, input.input-postcode { border-radius: 5px!important; height: auto!important; font-size: 13px!important } input.input-postcode::placeholder {color: #c3c3c3 } #wc-shipping-sim-form-fields button { color: #fff!important; background: #49BBF7; } #wc-shipping-sim-form-fields button:hover { background: #198bc4 } #wc-shipping-sim-br-cep-finder a { font-size: 12px!important; color: #49BBF7!important } .wd-sticky-add-to-cart { background: #FF9400!important } /*Ajustes na descrição longa do produto */ .wd-accordion-title { padding: 20px!important } .wd-nav-tabs>li:is(.current-menu-item,.wd-active,.active)>a, .wd-accordion-title-text { color: #49BBF7!important; } .wd-nav-tabs>li>a { color: #F6F6F6!important; font-size: 22px!important; } .shop_attributes tr, .shop_attributes th { color: #fff } .shop_attributes tr { border-bottom: 1px solid #fff } .shop_attributes tbody {margin:0; padding: 20px;} /*Titulo produto individual*/ @media (max-width: 768.98px) { .product_title { font-size: 28px; } } .product_title { margin-bottom: 0px!important } /*PREÇO produto individual*/ p.price { float: left; } p.price bdi { font-size: 35px; margin-right: 10px } p.price del bdi { font-size: 22px; margin-right: 0; } .amount, .price { color: var(--wd-entities-title-color); } /*botao adicionar ao carrinh*/ .summary-inner .preco-parcelado {width: auto!important; background:#083561!important; color:#fff!important } .summary-inner .preco-parcelado { margin-bottom: 0px!important } .single_add_to_cart_button { background: #083561!important } .single_add_to_cart_button:hover { background: #000638!important } .wd-quantity-overlap div.quantity input[type] { background: #000638!important } .single_add_to_cart_button:before { content: "\f147a"; font-family: "woodmart-font"; font-weight: 400; opacity: unset; position: unset; font-size: 16px; } .wd-buy-now-btn:before { content: "\f128"; font-family: "woodmart-font"; font-weight: 400; font-size: 16px; } .wd-sticky-btn-cart .single_add_to_cart_button, .wd-sticky-btn-cart .wd-buy-now-btn, .wd-sticky-btn-cart .quantity { display: none !important; } /* Esconde o seletor de grau no sticky */ .wd-sticky-btn #lens-power-selector, .wd-sticky-btn h3.grau-das-lentes { display: none !important; }*/ /* Correção nav carrossel */ .wd-nav-pagin li { line-height: 1em } /*Ajustes pagina checkout*/ .woocommerce-checkout>.customer-details .woocommerce-billing-fields { margin-top: 0!important } :is(.woocommerce-checkout>.checkout-order-review,.woocommerce-order-pay #order_review) { padding: 0!important } .customer-details p { margin-bottom: 10px!important } #billing_address_2_field, #billing_neighborhood_field { display: none!important } form.woocommerce-checkout input::placeholder, #order_comments::placeholder { color: #c3c3c3 } #billing_first_name_field { width: 100% } .wc_payment_method { padding: 10px; border-radius: 20px; background: #083561 } .wc_payment_method label { color: #fff; font-weight: bold } /* Nome e Sobrenome lado a lado */ .woocommerce-billing-fields #billing_first_name_field, .woocommerce-billing-fields #billing_last_name_field { width: 48%; display: inline-block; vertical-align: top; } .woocommerce-billing-fields #billing_first_name_field { margin-right: 4%; } /* Endereço + Número lado a lado */ .woocommerce-billing-fields #billing_address_1_field { width: 70%; display: inline-block; vertical-align: top; margin-right: 4%; } .woocommerce-billing-fields #billing_number_field { width: 26%; display: inline-block; vertical-align: top; } /* Cidade + Estado lado a lado */ .woocommerce-billing-fields #billing_city_field, .woocommerce-billing-fields #billing_state_field { width: 48%; display: inline-block; vertical-align: top; } .woocommerce-billing-fields #billing_city_field { margin-right: 4%; } /* CPF e Data de Nascimento lado a lado */ .woocommerce-billing-fields #billing_cpf_field, .woocommerce-billing-fields #billing_birthdate_field { width: 48%; display: inline-block; vertical-align: bottom; } .woocommerce-billing-fields #billing_cpf_field { margin-right: 4%; } /* Complemento largura total logo abaixo de Endereço + Número */ .woocommerce-billing-fields #billing_address_2_field { width: 100%; display: block; clear: both; } /* pagina após pedido realizado */ .wd-builder-off .woocommerce-order:not(.wd-with-extra-content) { padding: 20px; border-radius: 20px; background: #fff; } .wd-builder-off :is(.woocommerce-thankyou-order-received,.woocommerce-thankyou-order-failed) { color: #083561; border-color: #083561; margin-bottom: 20px!important } /* ========================================================================== DISTRILENTES · Formulário "Fale por WhatsApp" — Gravity Form #3 CSS otimizado para conversão · v3 Cole no campo CSS do widget do formulário (Elementor > Avançado > CSS) Substitui integralmente o CSS anterior (v2). O que mudou na v3 (foco em conversão): · Opções viraram BOTÕES de verdade (alvo grande, sombra, chevron, check) · "Tipo de Lente" em grade 2x2 → menos scroll, decisão mais rápida · Urgência com código de cor (vermelho/âmbar/azul) por opção · Animação de entrada a cada pergunta (sensação de fluxo rápido) · Estado selecionado muito mais evidente + feedback tátil no toque · Correção do bug de grid no mobile (grid-column:0 → 1/-1) ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ #pre-cadastro{ --dl-brand:#6C63FF; --dl-brand-dark:#5249F0; --dl-brand-soft:#F2F1FF; --dl-wa:#25D366; --dl-wa-dark:#1DAF54; --dl-border:#DEDEE8; --dl-text:#2E2F38; --dl-muted:#6E6F7E; --dl-error:#F93877; --dl-radius:14px; --dl-accent:var(--dl-brand); /* sobrescrito por pergunta */ } /* ---------- 2. Base ------------------------------------------------------ */ .gform_required_legend{display:none} .elementor-kit-14 h3{margin:0} #pre-cadastro .gform_wrapper .gform_fields{ column-gap:10px!important; row-gap:18px!important; } /* font-size 16px evita o zoom automático do iOS ao focar o campo */ #pre-cadastro input[type=text], #pre-cadastro input[type=tel], #pre-cadastro input[type=email], #pre-cadastro input[type=number], #pre-cadastro select, #pre-cadastro textarea{font-size:16px!important} /* ---------- 3. Barra de progresso (100% CSS, sem plugin) ---------------- */ #pre-cadastro .gform_body{position:relative;padding-top:22px} #pre-cadastro .gform_body::before, #pre-cadastro .gform_body::after{ content:"";position:absolute;top:0;left:0;height:6px;border-radius:99px; } #pre-cadastro .gform_body::before{width:100%;background:#ECECF4} #pre-cadastro .gform_body::after{ width:8%;background:linear-gradient(90deg,var(--dl-brand),#8E87FF); box-shadow:0 0 12px rgba(108,99,255,.45); transition:width .5s cubic-bezier(.4,0,.2,1); } #gform_3:has(#field_3_5 input:checked) .gform_body::after{width:30%} #gform_3:has(#field_3_25 input:checked) .gform_body::after{width:55%} #gform_3:has(#field_3_26 input:checked) .gform_body::after{width:75%} #gform_3:has(#input_3_1:not(:placeholder-shown)) .gform_body::after{width:85%} #gform_3:has(#input_3_3:not(:placeholder-shown)) .gform_body::after{width:100%} /* ---------- 4. Pergunta (label do grupo) -------------------------------- */ #pre-cadastro .gfield--type-radio{ animation:dl-question-in .38s cubic-bezier(.16,1,.3,1) both; } @keyframes dl-question-in{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } #pre-cadastro .gfield--type-radio .gfield_label{ display:block;text-align:center; font-size:17px;font-weight:700;line-height:1.35; color:var(--dl-text);margin-bottom:14px;letter-spacing:-.2px; } #pre-cadastro .gfield_required{color:var(--dl-error);margin-left:2px} /* ---------- 5. BOTÕES DE OPÇÃO ------------------------------------------ */ #pre-cadastro .gfield_radio{ display:grid;grid-template-columns:1fr;gap:10px;text-align:left; } #pre-cadastro .gchoice{margin-bottom:0;min-width:0} #pre-cadastro .gchoice .gfield-choice-input[type=radio]{ position:absolute;opacity:0;width:1px;height:1px;pointer-events:none; } /* superfície do botão */ #pre-cadastro .gchoice .gform-field-label{ position:relative;display:flex;align-items:center;gap:10px; width:100%;min-height:60px;padding:14px 46px 14px 18px; border:2px solid var(--dl-border);border-radius:var(--dl-radius); background:#fff;color:var(--dl-text); font-size:15.5px;font-weight:600;line-height:1.3;text-align:left; cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent; box-shadow:0 1px 2px rgba(20,20,43,.05); transition:border-color .18s ease,background-color .18s ease, box-shadow .2s ease,transform .12s ease,color .18s ease; } /* faixa de destaque na borda esquerda */ #pre-cadastro .gchoice .gform-field-label::before{ content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:4px;height:0;border-radius:0 4px 4px 0; background:var(--dl-accent);transition:height .22s ease; } /* indicador à direita: círculo vazio → check quando selecionado */ #pre-cadastro .gchoice .gform-field-label::after{ content:"";position:absolute;right:16px;top:50%; width:22px;height:22px;margin-top:-11px; border:2px solid var(--dl-border);border-radius:50%; background:transparent no-repeat center/12px 9px; transition:border-color .18s ease,background-color .18s ease,transform .18s ease; } /* hover / foco */ @media (hover:hover){ #pre-cadastro .gchoice .gform-field-label:hover{ border-color:var(--dl-accent);background:var(--dl-brand-soft); transform:translateY(-2px); box-shadow:0 8px 18px rgba(20,20,43,.10); } #pre-cadastro .gchoice .gform-field-label:hover::before{height:60%} #pre-cadastro .gchoice .gform-field-label:hover::after{border-color:var(--dl-accent)} } #pre-cadastro .gchoice .gfield-choice-input[type=radio]:focus-visible+.gform-field-label{ outline:3px solid rgba(108,99,255,.38);outline-offset:2px; } /* toque: feedback imediato */ #pre-cadastro .gchoice .gform-field-label:active{ transform:scale(.985);box-shadow:0 2px 6px rgba(20,20,43,.10); } /* SELECIONADO */ #pre-cadastro .gchoice .gfield-choice-input[type=radio]:checked+.gform-field-label{ border-color:var(--dl-accent); background:var(--dl-accent); color:#fff;font-weight:700; box-shadow:0 10px 22px color-mix(in srgb,var(--dl-accent) 32%,transparent); transform:translateY(-1px); } #pre-cadastro .gchoice .gfield-choice-input[type=radio]:checked+.gform-field-label::before{ height:0; } #pre-cadastro .gchoice .gfield-choice-input[type=radio]:checked+.gform-field-label::after{ border-color:#fff;background-color:#fff; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.4L4.3 7.7 11 1' stroke='%236C63FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); animation:dl-pop .28s cubic-bezier(.34,1.56,.64,1); } @keyframes dl-pop{0%{transform:scale(.4)}60%{transform:scale(1.18)}100%{transform:scale(1)}} /* ---------- 5b. "Tipo de Lente" em grade 2x2 (rótulos curtos) ----------- */ #pre-cadastro #field_3_25 .gfield_radio{grid-template-columns:1fr 1fr} #pre-cadastro #field_3_25 .gchoice .gform-field-label{ flex-direction:column;align-items:center;justify-content:center;gap:0; min-height:76px;padding:16px 12px; text-align:center;font-size:15px; } #pre-cadastro #field_3_25 .gchoice .gform-field-label::after{ right:9px;top:9px;margin-top:0;width:18px;height:18px;background-size:10px 8px; } #pre-cadastro #field_3_25 .gchoice .gform-field-label::before{ left:50%;top:auto;bottom:0;transform:translateX(-50%); width:0;height:4px;border-radius:4px 4px 0 0; transition:width .22s ease; } @media (hover:hover){ #pre-cadastro #field_3_25 .gchoice .gform-field-label:hover::before{height:4px;width:46%} } /* ---------- 5c. Urgência: cor por nível de intenção --------------------- */ #pre-cadastro #field_3_26 .gchoice:nth-child(1){--dl-accent:#E8354F} /* agora */ #pre-cadastro #field_3_26 .gchoice:nth-child(2){--dl-accent:#E8A317} /* dias */ #pre-cadastro #field_3_26 .gchoice:nth-child(3){--dl-accent:#3D8BFD} /* pesquisa*/ #pre-cadastro #field_3_26 .gchoice .gform-field-label{ border-left-width:2px; } #pre-cadastro #field_3_26 .gchoice .gfield-choice-input[type=radio]:checked+.gform-field-label::after{ background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M1 4.4L4.3 7.7 11 1' stroke='%232E2F38' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } @media (hover:hover){ #pre-cadastro #field_3_26 .gchoice .gform-field-label:hover{ background:color-mix(in srgb,var(--dl-accent) 8%,#fff); } } /* ---------- 6. Bloco "Seus dados de contato" ---------------------------- */ #pre-cadastro .gsection{border-bottom:0;padding:6px 0 0;margin:6px 0 0} #pre-cadastro .gsection_title{ font-size:17px!important;font-weight:700;color:var(--dl-text); text-align:left;line-height:1.3; } /* ---------- 7. Campos de texto e select --------------------------------- */ #pre-cadastro .gfield--type-text .gfield_label, #pre-cadastro .gfield--type-select .gfield_label, #pre-cadastro .gfield--type-email .gfield_label, #pre-cadastro .gfield--type-phone .gfield_label{ display:block;text-align:left; font-size:13px;font-weight:600;color:var(--dl-muted);margin-bottom:6px; } #pre-cadastro .ginput_container input[type=text], #pre-cadastro .ginput_container input[type=tel], #pre-cadastro .ginput_container input[type=email], #pre-cadastro .ginput_container input[type=number], #pre-cadastro .ginput_container select{ width:100%;height:54px;padding:0 14px; border:1.5px solid var(--dl-border)!important; border-radius:var(--dl-radius)!important; background-color:#fff;color:var(--dl-text);text-align:left;box-shadow:none; transition:border-color .18s ease,box-shadow .18s ease; } #pre-cadastro .ginput_container select{ -webkit-appearance:none;appearance:none;padding-right:40px!important; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236E6F7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important; background-position:right 14px center!important; background-size:14px 9px!important; } #pre-cadastro .ginput_container input::placeholder{color:#A3A4B2} #pre-cadastro .ginput_container input:focus, #pre-cadastro .ginput_container select:focus{ border-color:var(--dl-brand)!important; box-shadow:0 0 0 4px rgba(108,99,255,.15)!important;outline:none; } /* Nome (8 colunas) + Idade (4 colunas) */ #field_3_1{grid-column:1/9} #field_3_8{grid-column:9/13} #input_3_8{text-align:center} /* ---------- 8. CTA — botão WhatsApp ------------------------------------- */ #pre-cadastro .gform_footer{margin:22px 0 0!important;padding:0!important;} #pre-cadastro .gform_footer #gform_submit_button_3, #pre-cadastro #gform_submit_button_3.button{ position:relative;overflow:hidden; align-items:center;justify-content:center;gap:10px; width:100%;min-height:60px;padding:16px 20px!important; background:var(--dl-wa)!important; border:0!important;border-bottom:4px solid var(--dl-wa-dark)!important; border-radius:16px!important; color:#fff!important; font-size:18px!important;font-weight:800!important; text-transform:none!important;line-height:1.2;letter-spacing:-.2px; box-shadow:0 8px 20px rgba(37,211,102,.32); cursor:pointer; transition:background-color .18s ease,transform .12s ease,box-shadow .18s ease; } #pre-cadastro #gform_submit_button_3::before{ content:"";flex:0 0 24px;width:24px;height:24px; background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M.057 24l1.687-6.163a11.867 11.867 0 01-1.587-5.945C.16 5.335 5.495 0 12.05 0c3.2.01 6.2 1.26 8.413 3.488a11.82 11.82 0 013.48 8.414c-.003 6.557-5.338 11.892-11.893 11.892a11.9 11.9 0 01-5.688-1.448L.057 24zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.767.967-.94 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413z' fill='white'/%3E%3C/svg%3E") center/contain no-repeat; } /* brilho passando pelo botão: chama atenção sem poluir */ #pre-cadastro #gform_submit_button_3::after{ content:"";position:absolute;top:0;left:-60%;width:40%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-18deg); animation:dl-shine 3.2s ease-in-out 1.2s infinite; } @keyframes dl-shine{0%{left:-60%}35%,100%{left:120%}} #pre-cadastro #gform_submit_button_3:hover{ background:var(--dl-wa-dark)!important;box-shadow:0 12px 26px rgba(37,211,102,.42); transform:translateY(-1px); } #pre-cadastro #gform_submit_button_3:active{ transform:translateY(2px);border-bottom-width:2px!important; box-shadow:0 4px 12px rgba(37,211,102,.3); } #pre-cadastro #gform_submit_button_3[disabled]{opacity:.6;cursor:wait} #pre-cadastro #gform_submit_button_3[disabled]::after{display:none} /* ---------- 9. Erros de validação --------------------------------------- */ #pre-cadastro .gform_validation_errors{ border:1.5px solid #FFC9D6!important;background:#FFF3F6!important; border-radius:var(--dl-radius)!important;box-shadow:none!important;padding:12px 14px!important; } #pre-cadastro .gform_validation_errors h2{font-size:14px!important;color:#C2185B!important;margin:0!important} #pre-cadastro .gfield_error .ginput_container input, #pre-cadastro .gfield_error .ginput_container select{ border-color:var(--dl-error)!important;background-color:#FFF7F9; } #pre-cadastro .gfield_validation_message, #pre-cadastro .validation_message{ background:transparent!important;border:0!important; padding:4px 0 0!important;margin:0!important; font-size:13px!important;color:#D81B60!important; } #pre-cadastro .gfield_error .gform-field-label{border-color:var(--dl-error)} /* ---------- 10. Mobile --------------------------------------------------- */ @media (max-width:640px){ #pre-cadastro .gform_wrapper.gravity-theme .gform_fields{column-gap:10px!important} /* correção: 'grid-column:0' era inválido e quebrava o layout */ #pre-cadastro .gfield--type-radio .gfield_label{font-size:16px;margin-bottom:12px} #pre-cadastro .gchoice .gform-field-label{ font-size:15px;padding:14px 44px 14px 16px;min-height:62px; } #pre-cadastro #field_3_25 .gchoice .gform-field-label{ font-size:14px;min-height:72px;padding:14px 10px; } #pre-cadastro #gform_submit_button_3{font-size:17px!important;min-height:58px} } @media (max-width:360px){ #pre-cadastro #field_3_25 .gfield_radio{grid-template-columns:1fr} #pre-cadastro #field_3_25 .gchoice .gform-field-label{min-height:58px} } /* ---------- 11. Movimento reduzido (acessibilidade) --------------------- */ @media (prefers-reduced-motion:reduce){ #pre-cadastro *,#pre-cadastro *::before,#pre-cadastro *::after{ transition:none!important;animation:none!important; } } /* ---------- 12. Fallback p/ navegadores sem color-mix -------------------- */ @supports not (color:color-mix(in srgb,red 50%,blue)){ #pre-cadastro .gchoice .gfield-choice-input[type=radio]:checked+.gform-field-label{ box-shadow:0 10px 22px rgba(20,20,43,.18); } @media (hover:hover){ #pre-cadastro #field_3_26 .gchoice .gform-field-label:hover{background:var(--dl-brand-soft)} } } /* ========================================================================== DISTRILENTES · Finalização de Compra (WooCommerce + WoodMart) CSS otimizado para conversão · v3.1 — substitui a v3 por completo ONDE COLAR: no MESMO lugar onde a v3 está hoje — WoodMart → Configurações do tema → CSS personalizado (Custom CSS global), que é o arquivo xts-theme_settings_default.css. NÃO é o "CSS adicional" do Personalizar: lá (#wp-custom-css) só existe CSS de outras páginas. Substitua todo o bloco da v3 (do comentário de cabeçalho até o fim) por este. ATENÇÃO — CSS ANTIGO DE CHECKOUT NO MESMO CAMPO Antes do bloco da v3, nesse mesmo Custom CSS, existe uma customização anterior de checkout (linhas soltas como "#billing_first_name_field{width:100%}", ".wc_payment_method label{...}", ".customer-details p{...}" e a regra que esconde Complemento/Bairro). Ela continua ativa e pode brigar com este arquivo. Este CSS foi escrito para vencer essas regras por especificidade, mas o ideal, quando você tiver tempo, é limpar aquele trecho antigo. O QUE MUDOU DA v3 PARA A v3.1 - CORRIGIDO o layout quebrado do campo Bairro. Causa: a customização antiga de checkout, no mesmo Custom CSS, tem a regra "#billing_address_2_field,#billing_neighborhood_field{display:none!important}", que esconde Complemento E Bairro juntos. A v3 reativava só o Bairro e o deixava em 7/13, então a metade esquerda da linha ficava vazia e o Bairro boiava sozinho à direita. Agora os dois voltam (bloco 4c): Complemento à esquerda, Bairro à direita. - O rótulo do Complemento vem do WooCommerce como .screen-reader-text (invisível), o que desalinhava os dois inputs em ~19px. Ele é escondido e substituído por um rótulo curto e visível, "Complemento (opcional)". - No celular os dois passam a ocupar a linha inteira (bloco 10). O QUE JÁ TINHA MUDADO DA v2 PARA A v3 1. GATEWAY: a loja usa ASAAS (Cartão de Crédito + Pix), não Mercado Pago. Todo o bloco #mp-* da v2 estava morto. Reescrito para os campos reais (#asaas-cc-name, #asaas-cc-number, #asaas-cc-expiration-month/year, #asaas-cc-security-code, #asaas-cc-installments). 2. CARTÃO: ícones nos rótulos + Mês / Ano / CVV lado a lado (3 colunas), no desktop E no celular. 3. SELECTS: o campo Estado usa Select2, que ignorava a altura dos demais campos (42px contra 54px). Agora todo select/Select2 do checkout tem a mesma altura, borda e foco. A regra é genérica: se o plugin de endereço transformar Cidade em select, ela já entra no mesmo padrão. 4. GRID DO ENDEREÇO: reorganizado (Complemento e Bairro na mesma linha, Cidade + Estado na mesma linha). 5. TEXTO DE RETIRADA: "Retirada no escritório em Maracanaú" trocado por Aldeota, Maracanaú ou Caucaia — no box de confiança e numa linha de apoio abaixo das opções de entrega. ========================================================================== */ body.woocommerce-checkout{ --dl-roxo:#685BA4; --dl-rosa:#F93877; --dl-rosa-esc:#E02463; --dl-borda:#E3E3EC; --dl-txt:#242424; --dl-mudo:#6E6F7E; --dl-r:10px; } /* ========================================================================== 1. CABEÇALHO ENXUTO ========================================================================== */ body.woocommerce-checkout:not(.woocommerce-order-received) .whb-header-bottom, body.woocommerce-checkout:not(.woocommerce-order-received) .wd-header-main-nav, body.woocommerce-checkout:not(.woocommerce-order-received) .wd-search-form, body.woocommerce-checkout:not(.woocommerce-order-received) .wd-header-wishlist, body.woocommerce-checkout:not(.woocommerce-order-received) .wd-header-my-account, body.woocommerce-checkout:not(.woocommerce-order-received) .wd-header-mobile-nav, body.woocommerce-checkout:not(.woocommerce-order-received) .wd-toolbar, body.woocommerce-checkout:not(.woocommerce-order-received) .whb-top-bar .wd-social-icons{ display:none!important; } /* ========================================================================== 2. CUPOM DISCRETO ========================================================================== */ body.woocommerce-checkout .woocommerce-form-coupon-toggle{margin:0 0 16px} body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{ background:transparent!important;border:0!important; padding:0!important;margin:0!important; text-align:right;display:block; } body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info, body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info *{ font-size:13px!important;font-weight:500!important; color:#8A8B97!important;line-height:1.5!important;letter-spacing:0!important; } body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a{ text-decoration:underline!important; } body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before{display:none!important} /* ========================================================================== 3. ETAPAS NUMERADAS (1 Dados · 2 Pedido · 3 Pagamento) ========================================================================== */ body.woocommerce-checkout .woocommerce-billing-fields>h3, body.woocommerce-checkout #order_review_heading{ display:flex;align-items:center;gap:10px; font-size:19px!important;text-align:left!important;text-transform:none!important; color:var(--dl-txt);margin:0 0 16px!important; padding-bottom:12px;border-bottom:1px solid var(--dl-borda); } body.woocommerce-checkout .woocommerce-billing-fields>h3::before, body.woocommerce-checkout #order_review_heading::before, body.woocommerce-checkout #payment::before{ flex:0 0 28px;width:28px;height:28px;border-radius:50%; background:var(--dl-roxo);color:#fff;font-size:14px;font-weight:700; display:flex;align-items:center;justify-content:center; } body.woocommerce-checkout .woocommerce-billing-fields>h3::before{content:"1"} body.woocommerce-checkout #order_review_heading::before{content:"2"} body.woocommerce-checkout #payment{position:relative;padding-top:52px!important} body.woocommerce-checkout #payment::before{content:"3";position:absolute;left:0;top:0} body.woocommerce-checkout #payment::after{ content:"Pagamento";position:absolute;left:38px;top:2px; font-size:19px;font-weight:700;color:var(--dl-txt);line-height:28px; } /* ========================================================================== 4. CAMPOS DE DADOS — de 13 linhas para 7 no desktop ========================================================================== */ /* País é sempre Brasil (o valor continua sendo enviado). */ body.woocommerce-checkout #billing_country_field{display:none!important} body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper{ display:grid;grid-template-columns:repeat(12,1fr);column-gap:12px;row-gap:14px; } body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper>p.form-row{ width:auto!important;float:none!important; margin:0!important;padding:0!important;display:block!important;grid-column:1/13; } body.woocommerce-checkout #billing_first_name_field{grid-column:1/7} body.woocommerce-checkout #billing_last_name_field {grid-column:7/13} body.woocommerce-checkout #billing_cpf_field {grid-column:1/7} body.woocommerce-checkout #billing_postcode_field {grid-column:7/13} body.woocommerce-checkout #billing_address_1_field {grid-column:1/10} body.woocommerce-checkout #billing_number_field {grid-column:10/13} body.woocommerce-checkout #billing_city_field {grid-column:1/8} body.woocommerce-checkout #billing_state_field {grid-column:8/13} body.woocommerce-checkout #billing_phone_field {grid-column:1/7} body.woocommerce-checkout #billing_email_field {grid-column:7/13} /* Complemento e Bairro: ver bloco 4c (precisam vencer uma regra do tema) */ body.woocommerce-checkout .form-row label{ font-size:13px!important;font-weight:600; color:var(--dl-mudo)!important;margin-bottom:5px;display:block; } /* 16px evita o zoom automático do iOS ao focar o campo */ body.woocommerce-checkout .form-row .input-text, body.woocommerce-checkout .form-row select{ font-size:16px!important;height:54px!important;padding:0 14px!important; border:1.5px solid var(--dl-borda)!important;border-radius:var(--dl-r)!important; background-color:#fff!important;color:var(--dl-txt)!important; } body.woocommerce-checkout .form-row .input-text:focus, body.woocommerce-checkout .form-row select:focus{ border-color:var(--dl-roxo)!important; box-shadow:0 0 0 4px rgba(104,91,164,.15)!important;outline:none; } body.woocommerce-checkout .woocommerce-invalid .input-text, body.woocommerce-checkout .woocommerce-invalid select{ border-color:var(--dl-rosa)!important;background-color:#FFF7F9!important; } body.woocommerce-checkout #order_comments{ height:90px!important;min-height:90px!important; padding:12px 14px!important;font-size:16px!important; border:1.5px solid var(--dl-borda)!important;border-radius:var(--dl-r)!important; } body.woocommerce-checkout .woocommerce-additional-fields h3{ font-size:15px!important;text-align:left!important;text-transform:none!important; color:var(--dl-mudo)!important;margin:22px 0 8px!important; } /* -------------------------------------------------------------------------- 4b. SELECTS (Estado, Cidade e qualquer outro) — nativos e Select2 O Select2 monta um no lugar do