/* * COMGRUPOS — pele do WooCommerce (carrinho, checkout, obrigado, conta). * * Só "pele": cor, tipografia, borda e botão, sempre com o prefixo .cg, lendo * as Cores Globais do Elementor. O layout em etapas é do Fluid Checkout; este * arquivo não reposiciona nada dele, só veste com a identidade do site. * * Os seletores partem das classes do (.cg.cg-loja): com o cabeçalho * próprio do Fluid Checkout ligado, o template do tema não é usado no checkout * e nenhum invólucro do tema existe ali dentro. */ /* Funil de um produto só: não há carrinho para editar. */ .cg.cg-loja .fc-checkout-order-review__edit-cart{ display: none !important; } /* Sem endereço, o bloco «Tipo de pessoa + CPF» colava 20px a mais de margem depois do nome e abria um vão no meio de «Seus dados». */ .cg.cg-loja .woocommerce-billing-only-fields__field-wrapper{ margin-top: 0; } .cg .cg-oculto{ display: none !important; } .cg .cg-page-head--loja{ padding: clamp(40px, 5vw, 72px) 0 clamp(22px, 3vw, 36px); } .cg .cg-loja__sec{ padding: clamp(28px, 4vw, 56px) 0 clamp(64px, 8vw, 110px); } .cg.cg-loja{ font-family: var(--cg-font); color: var(--cg-text); } /* Variáveis do Fluid Checkout: a paleta do site no lugar do azul padrão. */ .cg.cg-loja{ --fluidtheme--color--primary: var(--cg-dark); --fluidtheme--color--primary--hover: var(--cg-primary); --fluidtheme--color--secondary: var(--cg-accent); --fluidtheme--color--body-text: var(--cg-text); --fluidtheme--color--text-light: var(--cg-muted); --fluidtheme--color--border: var(--cg-line); --fluidtheme--color--success: #2f7d32; --fluidtheme--color--error: #c0392b; --fluidtheme--field--border-radius: var(--cg-radius); --fluidtheme--field--border-color: var(--cg-line); --fluidtheme--field--border-color--focus: var(--cg-primary); --fluidtheme--button--border-radius: var(--cg-radius); } /* Títulos de etapa e seções. */ .cg.cg-loja h2, .cg.cg-loja h3, .cg.cg-loja .fc-step__substep-title{ font-family: var(--cg-font-head); font-weight: 800; letter-spacing: -.02em; color: var(--cg-text); } /* Campos. */ .cg.cg-loja input[type="text"], .cg.cg-loja input[type="email"], .cg.cg-loja input[type="tel"], .cg.cg-loja input[type="password"], .cg.cg-loja input[type="number"], .cg.cg-loja select, .cg.cg-loja textarea{ font-family: var(--cg-font); font-size: 1rem; /* 16px: o iOS não dá zoom no campo */ color: var(--cg-text); background: #fff; border: 1px solid var(--cg-line); border-radius: var(--cg-radius); min-height: 48px; box-sizing: border-box; } .cg.cg-loja input:focus, .cg.cg-loja select:focus, .cg.cg-loja textarea:focus{ border-color: var(--cg-primary); box-shadow: 0 0 0 3px rgba(62, 65, 150, .12); outline: none; } .cg.cg-loja label{ font-weight: 600; font-size: .875rem; color: var(--cg-text); } .cg.cg-loja .required{ color: var(--cg-accent-ink); text-decoration: none; } /* Botões: mesmo desenho do .cg-btn--primary. */ .cg.cg-loja .button, .cg.cg-loja button.button, .cg.cg-loja #place_order, .cg.cg-loja .fc-step__next-step{ font-family: var(--cg-font); font-weight: 600; font-size: .9375rem; letter-spacing: .01em; background: var(--cg-dark); color: #fff; border: 1px solid transparent; border-radius: var(--cg-radius); min-height: 52px; padding: 14px 26px; transition: background .2s var(--cg-ease); } .cg.cg-loja .button:hover, .cg.cg-loja #place_order:hover, .cg.cg-loja .fc-step__next-step:hover{ background: var(--cg-primary); color: #fff; } /* O botão final é a ação principal da página: laranja da marca. */ .cg.cg-loja #place_order{ background: var(--cg-accent); color: var(--cg-dark); font-weight: 700; width: 100%; } .cg.cg-loja #place_order:hover{ background: #ffa15e; color: var(--cg-dark); } .cg.cg-loja a:not(.button){ color: var(--cg-primary); text-underline-offset: 3px; } /* Resumo do pedido. */ .cg.cg-loja .fc-checkout-order-review, .cg.cg-loja .woocommerce-checkout-review-order{ background: var(--cg-light); border-radius: var(--cg-radius); } .cg.cg-loja .order-total .amount, .cg.cg-loja .fc-cart-totals .order-total .amount{ font-family: var(--cg-font-head); font-weight: 800; color: var(--cg-text); } /* Avisos. */ .cg.cg-loja .woocommerce-message, .cg.cg-loja .woocommerce-info, .cg.cg-loja .woocommerce-error{ border-radius: var(--cg-radius); border-top-color: var(--cg-primary); font-size: .9375rem; } /* Página de obrigado: próximo passo. */ .cg .cg-proximo{ margin: 0 0 40px; padding: clamp(26px, 4vw, 40px); background: var(--cg-lime); border-radius: var(--cg-radius); color: var(--cg-dark); } .cg .cg-proximo .cg-eyebrow{ color: var(--cg-dark); margin: 0 0 10px; } .cg .cg-proximo__t{ font-family: var(--cg-font-head); font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; margin: 0 0 12px; color: var(--cg-dark); } .cg .cg-proximo__p{ margin: 0 0 22px; max-width: 62ch; line-height: 1.7; color: var(--cg-dark); } .cg .cg-proximo .cg-btn{ text-decoration: none; } @media (max-width: 600px){ .cg.cg-loja .button, .cg.cg-loja .fc-step__next-step{ width: 100%; justify-content: center; } }