/** * Grade Market - pagina do produto. * * SOBRE OS VALORES PADRAO: este plugin roda em MAIS DE UMA LOJA. Por isso os * padroes de cor de acento saem de var(--e-global-color-secondary), que cada * loja define no proprio kit do Elementor - assim o botao nasce na cor da casa * sem que este arquivo tenha opiniao de marca nenhuma. * * A TINTA e a excecao, e vale explicar. Ela NAO pode seguir o acento: texto * branco sobre o ambar da Seguretec (#FFA71A) da 1,95:1 e reprova qualquer * leitura. Entao o padrao aqui e escuro (#18181B), que sobre esse ambar da * 9,11:1. Se a outra loja usar um acento escuro, a tinta certa la e clara - * e isso se resolve no editor do Elementor, em "Comprar Agora (Grade Market)", * sem tocar neste arquivo. */ a.mgm-buy-now.mgm-buy-now { --mgm-bn-bg: var( --e-global-color-secondary, #18181B ); --mgm-bn-color: #18181B; --mgm-bn-border: var( --mgm-bn-bg ); --mgm-bn-bg-hover: var( --e-global-color-text, #000000 ); --mgm-bn-color-hover: var( --mgm-bn-color ); --mgm-bn-border-hover: var( --mgm-bn-bg-hover ); --mgm-bn-bg-off: #F3F4F6; --mgm-bn-color-off: #4B5563; /* 7,6:1 sobre o #F3F4F6 - desligado tambem precisa ser lido */ --mgm-bn-border-off: #E5E7EB; --mgm-bn-radius: 6px; --mgm-bn-pad-y: 15px; --mgm-bn-pad-x: 18px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; /* alvo de toque */ padding: var( --mgm-bn-pad-y ) var( --mgm-bn-pad-x ); border: 1px solid var( --mgm-bn-border ); border-radius: var( --mgm-bn-radius ); background: var( --mgm-bn-bg ); color: var( --mgm-bn-color ); font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease; } a.mgm-buy-now.mgm-buy-now:hover, a.mgm-buy-now.mgm-buy-now:focus-visible { background: var( --mgm-bn-bg-hover ); border-color: var( --mgm-bn-border-hover ); color: var( --mgm-bn-color-hover ); } a.mgm-buy-now.mgm-buy-now:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /** * Estado desligado. Vale para produto variavel sem opcao escolhida. * O seletor casa pelos DOIS sinais - a ausencia de href e o aria-disabled - * porque sao justamente eles que tornam o inerte de verdade. Assim o CSS * nunca diverge do comportamento: se parece desligado, esta desligado. */ a.mgm-buy-now.mgm-buy-now:not( [href] ), a.mgm-buy-now.mgm-buy-now[aria-disabled="true"] { background: var( --mgm-bn-bg-off ); border-color: var( --mgm-bn-border-off ); color: var( --mgm-bn-color-off ); cursor: not-allowed; font-weight: 600; } a.mgm-buy-now.mgm-buy-now:not( [href] ):hover, a.mgm-buy-now.mgm-buy-now[aria-disabled="true"]:hover { background: var( --mgm-bn-bg-off ); border-color: var( --mgm-bn-border-off ); color: var( --mgm-bn-color-off ); } /* ========================================================================= A LINHA DOS BOTOES Medido em 24/08/2026 no produto 16233: o container media 621px de largura dentro de uma janela de 620px, com flex-wrap: nowrap. Resultado: o botao "Adicionar ao carrinho" ficava cortado fora da tela. Passa a quebrar. O min-width:0 e o que permite os filhos encolherem - sem ele um item flex nunca fica menor que o proprio conteudo e a linha estoura mesmo com wrap. ====================================================================== */ /* O !important aqui e o unico do arquivo, e tem motivo. A folha do proprio widget da WooCommerce no Elementor (widget-woocommerce-product-add-to-cart.min.css) crava flex-wrap:nowrap com um seletor :is(...) que soma peso perto de (0,5,2). Sair out-especificando isso produziria um seletor ilegivel que quebra na proxima versao deles. A variavel continua no meio do caminho, entao o controle do editor do Elementor segue mandando. */ .woocommerce div.product form.cart .woocommerce-variation-add-to-cart, .woocommerce-variation-add-to-cart { display: flex; flex-wrap: var( --mgm-var-row-wrap, wrap ) !important; align-items: stretch; gap: var( --mgm-var-row-gap, 10px ); } .woocommerce-variation-add-to-cart > * { min-width: 0; } .woocommerce-variation-add-to-cart .single_add_to_cart_button, .woocommerce-variation-add-to-cart .mgm-buy-now { flex: 1 1 auto; } /* ========================================================================= O ROTULO DA OPCAO No print do dono o "Tamanho" tinha saido branco sobre fundo claro, ou seja invisivel. A cor vinha de fora deste plugin, entao aqui ela e imposta - e fica exposta como controle no editor do Elementor para quem quiser mudar. #374151 sobre branco da 10,31:1. ====================================================================== */ .woocommerce div.product form.cart table.variations th.label label, form.variations_form table.variations th.label label { color: var( --mgm-var-label, #374151 ) !important; } /* ========================================================================= OS SELETORES DE OPCAO (tamanho, cor...) O minimo de alvo de toque para o dedo e 44x44. O plugin de swatches entrega 36x36 por atributo em linha (style="min-width:36px"), entao a variavel aqui precisa de !important para vencer o estilo embutido no HTML. ====================================================================== */ .cfvsw-swatches-container .cfvsw-swatches-option { min-width: var( --mgm-var-swatch, 44px ) !important; min-height: var( --mgm-var-swatch, 44px ) !important; display: inline-flex; align-items: center; justify-content: center; border-color: var( --mgm-var-swatch-border, #D1D5DB ); } .cfvsw-swatches-container .cfvsw-swatches-option.cfvsw-selected-swatch { border-color: var( --mgm-var-swatch-selected, var( --e-global-color-secondary, #111827 ) ); box-shadow: 0 0 0 1px var( --mgm-var-swatch-selected, var( --e-global-color-secondary, #111827 ) ); } .cfvsw-swatches-container .cfvsw-swatches-option:focus-visible { outline: 2px solid var( --mgm-var-swatch-selected, #111827 ); outline-offset: 2px; } @media ( max-width: 480px ) { .woocommerce-variation-add-to-cart .single_add_to_cart_button, .woocommerce-variation-add-to-cart .mgm-buy-now { flex: 1 1 100%; } }