body.woocommerce-cart, body.woocommerce-checkout { background-color: var(--scs-card) !important; } /* Trava a barra de scroll horizontal (e qualquer overflow visual) causada pela técnica de quebra 100vw abaixo — aplica-se a QUALQUER página que use o nosso
standalone (Carrinho, Checkout e Minha Conta), em vez de depender de repetir isto por cada body class à parte (o que tinha ficado esquecido para Carrinho/Checkout, causando o bug). */ body:has(#sevencoffee-standalone-main) { overflow-x: hidden !important; } /* Quando esta página usa o nosso modelo próprio (Carrinho/Checkout), este
escapa a qualquer largura/padding imposto pelo contentor do tema, para o nosso conteúdo controlar sempre a largura real da página. */ #sevencoffee-standalone-main.sevencoffee-standalone-page { display: block; width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); overflow-x: hidden; } /* --------------------------------------------------------------------- CORES DA MARCA EM TODA A PARTE — links, checkboxes e rádios nativos do browser são, por padrão, AZUIS (cor de sistema do Chrome/Safari). Isto acontece em qualquer link/checkbox que o WooCommerce gera e que não tenha uma classe nossa (ex: "política de privacidade", "termos e condições", "o que é o MBWAY?", caixa "li e aceito os termos"). Estas regras aplicam-se às 3 páginas (carrinho, checkout, conta) para nunca mais aparecer azul em nenhum sítio. --------------------------------------------------------------------- */ /* [v2.5.43] O ":not(.button)" é ESSENCIAL — não remover. BUG QUE ISTO CORRIGE: estas regras existem para matar o azul dos links, e excluíam as NOSSAS classes de botão (.sevencoffee-btn-dark/-outline). Mas o WooCommerce desenha os botões DELE com — sem classe nossa. Resultado: esses botões apanhavam "color: var(--scs-dark)", que é exatamente a mesma cor do fundo do botão (var(--scs-dark)). Texto castanho-escuro sobre fundo castanho-escuro: INVISÍVEL. Só aparecia ao passar o rato por cima, porque a regra de hover mudava a cor para caramelo. Passou despercebido muito tempo porque quase todos os botões do site são nossos e usam as classes nossas. Só se nota nos botões que o WooCommerce desenha sozinho: o "Ver Produtos" dos Descarregamentos, o "Voltar à loja" do carrinho vazio, e o banner novo do WooCommerce 11. PORQUE É QUE ESTA REGRA GANHAVA À REGRA DO BOTÃO: as duas têm !important, por isso decide a especificidade — e esta (4 classes) é mais específica do que ".woocommerce a.button" (2 classes). Ao acrescentar :not(.button), os botões deixam de entrar aqui e ficam com a cor certa. */ .sevencoffee-page-wrapper a:not(.button):not(.sevencoffee-btn-dark):not(.sevencoffee-btn-outline), body.woocommerce-account .woocommerce a:not(.button):not(.sevencoffee-btn-dark):not(.sevencoffee-btn-outline), .sevencoffee-auth a:not(.button):not(.sevencoffee-btn-dark):not(.sevencoffee-btn-outline) { color: var(--scs-dark) !important; } .sevencoffee-page-wrapper a:hover:not(.button):not(.sevencoffee-btn-dark):not(.sevencoffee-btn-outline), body.woocommerce-account .woocommerce a:hover:not(.button):not(.sevencoffee-btn-dark):not(.sevencoffee-btn-outline), .sevencoffee-auth a:hover:not(.button):not(.sevencoffee-btn-dark):not(.sevencoffee-btn-outline) { color: var(--scs-accent) !important; } /* Rede de segurança: qualquer botão desenhado pelo WooCommerce fica sempre com texto branco sobre o fundo escuro da marca, em qualquer das 3 páginas e em qualquer estado (normal, rato por cima, foco pelo teclado). Escrito com especificidade alta de propósito, para nunca mais ser ultrapassado por uma regra de links. */ .sevencoffee-page-wrapper a.button, .sevencoffee-page-wrapper a.button:hover, .sevencoffee-page-wrapper a.button:focus, body.woocommerce-account .woocommerce a.button, body.woocommerce-account .woocommerce a.button:hover, body.woocommerce-account .woocommerce a.button:focus, .sevencoffee-auth a.button, .sevencoffee-auth a.button:hover, .sevencoffee-auth a.button:focus { color: var(--scs-card) !important; } .sevencoffee-page-wrapper button:not(.sevencoffee-btn-dark):not(.sevencoffee-btn-outline):not([class*="qty-btn"]), body.woocommerce-account .woocommerce button:not(.sevencoffee-btn-dark):not(.sevencoffee-btn-outline):not([class*="qty-btn"]) { color: var(--scs-text); } .sevencoffee-page-wrapper input[type="checkbox"], .sevencoffee-page-wrapper input[type="radio"], body.woocommerce-account .woocommerce input[type="checkbox"], body.woocommerce-account .woocommerce input[type="radio"], .sevencoffee-auth input[type="checkbox"], .sevencoffee-auth input[type="radio"] { accent-color: var(--scs-dark); } .sevencoffee-page-wrapper { max-width: 1400px; margin: 0 auto !important; padding: 130px 32px 160px !important; font-family: var(--scs-font-body); color: var(--scs-text); } .sevencoffee-page-wrapper.sevencoffee-checkout, .sevencoffee-page-wrapper.sevencoffee-cart { max-width: max(1400px, min(1900px, 70vw)); } .sevencoffee-page-title { font-family: var(--scs-font-heading); font-size: 2.2rem; margin: 0 0 32px; } .sevencoffee-checkout__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; } .sevencoffee-checkout__header .sevencoffee-page-title { margin-bottom: 0; } .sevencoffee-checkout__secure-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--scs-soft-bg); color: var(--scs-dark); border-radius: var(--scs-radius-full); padding: 8px 16px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } /* ---------- Botões partilhados (usados em vários sítios) ---------- */ .sevencoffee-btn-dark, .sevencoffee-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--scs-radius-sm); padding: 14px 28px; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; font-family: var(--scs-font-body); text-decoration: none; cursor: pointer; white-space: normal; line-height: 1.3; transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } .sevencoffee-btn-dark { background-color: var(--scs-dark) !important; color: var(--scs-card) !important; border: 1px solid var(--scs-dark) !important; } .sevencoffee-btn-dark:hover { background-color: var(--scs-dark-hover) !important; border-color: var(--scs-dark-hover) !important; transform: translateY(-1px); } .sevencoffee-btn-outline { background-color: transparent !important; color: var(--scs-text) !important; border: 1px solid var(--scs-dark) !important; } .sevencoffee-btn-outline:hover { background-color: var(--scs-dark) !important; color: var(--scs-card) !important; } .sevencoffee-checkout-heading { font-family: var(--scs-font-heading); font-size: 1.25rem; margin: 0 0 16px; } /* ========================================================================== CARRINHO ========================================================================== */ .sevencoffee-cart__layout { display: grid !important; /* [v2.5.57] minmax em vez de 400px fixos. Com largura fixa, num laptop de 1100px a coluna da esquerda ficava com ~600px e os campos apertavam; e a caixa lateral nunca encolhia, mesmo quando já não cabia bem. Agora ela cede espaço a partir dos 320px. */ grid-template-columns: minmax(0, 1fr) minmax(320px, 400px) !important; gap: 32px; align-items: start; margin-top: 24px; } .sevencoffee-page-subtitle { color: var(--scs-muted); font-size: 0.95rem; margin: -20px 0 24px; } .sevencoffee-cart-table { background: var(--scs-card); border: 1px solid var(--scs-border); border-radius: var(--scs-radius); overflow: hidden; box-shadow: var(--scs-shadow); } .sevencoffee-cart-row { display: flex; gap: var(--scs-space-4); align-items: flex-start; padding: var(--scs-space-6); border-bottom: 1px solid var(--scs-border); position: relative; transition: background-color 0.15s ease; } .sevencoffee-cart-row:last-child { border-bottom: none; } .sevencoffee-cart-row:hover { background: var(--scs-soft-bg); } .sevencoffee-cart-row__thumb { flex-shrink: 0; display: block; } .sevencoffee-cart-row__thumb img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--scs-radius); border: 1px solid var(--scs-border); display: block; } .sevencoffee-cart-row__info { flex: 1; min-width: 0; } .sevencoffee-cart-row__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .sevencoffee-cart-row__name { font-weight: 700; color: var(--scs-text) !important; text-decoration: none; font-size: 1.02rem; overflow-wrap: break-word; } .sevencoffee-cart-row__name:hover { color: var(--scs-accent) !important; } .sevencoffee-cart-row__subtotal { font-weight: 700; font-size: 1rem; color: var(--scs-text); white-space: nowrap; flex-shrink: 0; } /* Meta dos itens (variações + dados de Pack: "Produtos escolhidos" / "Oferta") */ .sevencoffee-cart-row__meta { margin: 6px 0 0; font-size: 0.85rem; color: var(--scs-muted); } .sevencoffee-cart-row__meta .wc-item-meta, .sevencoffee-cart-row__meta dl.variation { display: flex; flex-direction: column; gap: 2px; } .sevencoffee-cart-row__meta .wc-item-meta strong, .sevencoffee-cart-row__meta dl.variation dt { color: var(--scs-text); font-weight: 600; } .sevencoffee-cart-row__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } .sevencoffee-qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--scs-border); border-radius: var(--scs-radius-full); overflow: hidden; background: var(--scs-card); } .sevencoffee-qty-btn { width: 32px; height: 32px; flex-shrink: 0; border: none; background: transparent; color: var(--scs-dark); font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.15s ease; } .sevencoffee-qty-btn:hover { background: var(--scs-soft-bg); } .sevencoffee-qty-stepper input.qty { width: 38px; border: none; text-align: center; padding: 0; font-family: var(--scs-font-body); font-weight: 600; -moz-appearance: textfield; } .sevencoffee-qty-stepper input.qty::-webkit-inner-spin-button, .sevencoffee-qty-stepper input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .sevencoffee-cart-row__remove { color: var(--scs-muted) !important; text-decoration: underline !important; font-size: 0.82rem; font-weight: 600; white-space: nowrap; } .sevencoffee-cart-row__remove:hover { color: var(--scs-error) !important; } .sevencoffee-cart__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* O carrinho atualiza-se sozinho ao mudar a quantidade (ver shop.js) — este botão só existe "escondido" para continuar a funcionar como gatilho interno; a pessoa nunca precisa de lhe tocar. */ .sevencoffee-cart__actions button[name="update_cart"] { display: none; margin-top: 20px; } .sevencoffee-cart__actions .sevencoffee-btn-outline { padding: 12px 22px; } .sevencoffee-cart__coupon { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; } .sevencoffee-cart__coupon input.input-text { flex: 1; min-width: 180px; padding: 12px 14px; border: 1px solid var(--scs-border); border-radius: var(--scs-radius-sm); font-family: var(--scs-font-body); } .sevencoffee-cart__coupon button { padding: 12px 22px; } /* [v2.5.62] O aspeto vem agora do padrão .scs-empty-state, em assets/tokens.css. Estas regras eram IDÊNTICAS às do outro ecrã, escritas duas vezes em ficheiros diferentes. */ .sevencoffee-cart__empty { background: var(--scs-card); border: 1px dashed var(--scs-border-strong); border-radius: var(--scs-radius); padding: var(--scs-space-12) var(--scs-space-6); text-align: center; color: var(--scs-muted); } /* ---------- Totais (caixa lateral) ---------- */ .sevencoffee-cart-totals, .sevencoffee-order-review__totals { background: var(--scs-card); border: 1px solid var(--scs-border); border-radius: var(--scs-radius); padding: 24px; box-shadow: var(--scs-shadow); } .sevencoffee-cart-totals h2 { font-family: var(--scs-font-heading); font-size: 1.25rem; margin: 0 0 16px; } .sevencoffee-cart-totals__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--scs-border); font-size: 0.9rem; } .sevencoffee-cart-totals__row:first-of-type { border-top: none; } .sevencoffee-cart-totals__row--total { border-bottom: none; border-top: 2px solid var(--scs-border); font-size: 1.15rem; font-weight: 700; padding-top: 16px; margin-top: 4px; } .sevencoffee-cart-totals__row--coupon { color: var(--scs-muted); } .sevencoffee-cart-totals__checkout { margin-top: 20px; } .sevencoffee-cart-totals__checkout .sevencoffee-btn-dark { width: 100%; } .sevencoffee-cart-totals__trust { display: flex; justify-content: center; gap: 22px; margin-top: 16px; color: var(--scs-muted); } /* Calculadora de envio (markup nativo do WooCommerce, dentro da nossa caixa) */ .sevencoffee-cart-totals .shipping-calculator-form { margin-top: 8px; } .sevencoffee-cart-totals .shipping-calculator-form p { margin: 0 0 10px; } .sevencoffee-cart-totals select, .sevencoffee-cart-totals .shipping-calculator-form input.input-text { width: 100%; padding: 10px 12px; border: 1px solid var(--scs-border); border-radius: var(--scs-radius-sm); font-family: var(--scs-font-body); margin-bottom: 8px; } .sevencoffee-cart-totals .shipping-calculator-button { color: var(--scs-dark); font-weight: 600; font-size: 0.85rem; } /* ========================================================================== CHECKOUT ========================================================================== */ .sevencoffee-checkout__layout { display: grid !important; /* [v2.5.57] Ver a nota igual em .sevencoffee-cart__layout. Aqui era pior: 420px fixos ao lado do formulário de faturação, que é a parte com mais campos (nome+apelido lado a lado, NIF, morada, localidade, código postal, telefone). Num laptop de 1100px sobravam ~600px para tudo isso. */ grid-template-columns: minmax(0, 1fr) minmax(320px, 420px) !important; gap: 28px; align-items: start; } .sevencoffee-checkout__details { display: flex; flex-direction: column; gap: 20px; } .sevencoffee-step-heading { display: flex; align-items: center; gap: 12px; font-family: var(--scs-font-heading); font-size: 1.3rem; color: var(--scs-text); } .sevencoffee-step-number { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--scs-dark); color: var(--scs-card); font-family: var(--scs-font-body); font-size: 0.95rem; font-weight: 700; } /* Campos de faturação/envio: WooCommerce gera o HTML via woocommerce_form_field(), por isso o estilo aplica-se às classes nativas .form-row / .input-text, mas sem nenhum wrapper estranho do Elementor à volta — controlamos tudo. */ #customer_details { background: var(--scs-card); border: 1px solid var(--scs-border); border-radius: var(--scs-radius); padding: var(--scs-space-6); } #customer_details .col-2 { border-top: 1px solid var(--scs-border); padding-top: 20px; margin-top: 20px; } /* O nosso título numerado ("1. Informação de Faturação") já cumpre o papel deste título nativo do WooCommerce, por isso escondemo-lo para não ficar duplicado. O título da secção de Envio ("col-2"), esse, mantém-se. */ #customer_details > .col-1 > h3, #customer_details > .woocommerce-billing-fields > h3 { display: none; } #customer_details h3 { font-family: var(--scs-font-heading); font-size: 1.2rem; margin: 0 0 16px; } .woocommerce-checkout .form-row { margin-bottom: 16px !important; } .woocommerce-checkout .form-row label { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--scs-muted); font-weight: 700; margin-bottom: 8px; display: block; } .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row textarea, .woocommerce-checkout .form-row select, .woocommerce-checkout .select2-container .select2-selection--single { background: var(--scs-card); border: 1px solid var(--scs-border); border-radius: var(--scs-radius-sm); padding: 12px 14px; width: 100%; font-size: 0.95rem; font-family: var(--scs-font-body); color: var(--scs-text); height: auto; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row textarea:focus, .woocommerce-checkout .form-row select:focus { outline: none !important; border-color: var(--scs-accent) !important; box-shadow: 0 0 0 3px rgba(212, 163, 115, 0.15) !important; } /* Select2 dropdown styling */ .woocommerce-checkout .select2-container .select2-selection--single { display: flex; align-items: center; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; color: var(--scs-text); font-family: var(--scs-font-body); font-size: 0.95rem; line-height: 1.5; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; } /* ---------- Resumo da encomenda (produtos + totais + pagamento) ---------- */ .sevencoffee-order-review { background: var(--scs-card); border: 1px solid var(--scs-border); border-radius: var(--scs-radius); padding: var(--scs-space-6); box-shadow: var(--scs-shadow); } .sevencoffee-order-review__items { margin-bottom: 16px; } /* ---------- Cupão (movido para dentro do Passo 2) ---------- */ .sevencoffee-checkout-coupon { margin-bottom: 16px; } .sevencoffee-checkout-coupon__toggle { background: none !important; border: none !important; padding: 0; color: var(--scs-dark) !important; font-size: 0.85rem; font-weight: 600; text-decoration: underline; cursor: pointer; } .sevencoffee-checkout-coupon__toggle:hover { background: none !important; color: var(--scs-accent) !important; } .sevencoffee-checkout-coupon__form { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } .sevencoffee-checkout-coupon__form .form-row { flex: 1; min-width: 160px; margin: 0 !important; } .sevencoffee-checkout-coupon__form input.input-text { width: 100%; padding: 11px 12px; border: 1px solid var(--scs-border); border-radius: var(--scs-radius-sm); font-family: var(--scs-font-body); } .sevencoffee-checkout-coupon__form button { background-color: var(--scs-dark) !important; color: var(--scs-card) !important; border: none !important; border-radius: var(--scs-radius-sm); padding: 0 20px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; cursor: pointer; } .sevencoffee-order-review__item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--scs-border); } .sevencoffee-order-review__item-remove { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; color: var(--scs-muted) !important; background: var(--scs-soft-bg); text-decoration: none !important; font-size: 1.05rem; line-height: 1; } .sevencoffee-order-review__item-remove:hover { background: var(--scs-error) !important; color: var(--scs-card) !important; } .sevencoffee-order-review__item-thumb { flex-shrink: 0; } .sevencoffee-order-review__item-thumb img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--scs-radius-sm); border: 1px solid var(--scs-border); display: block; } .sevencoffee-order-review__item-info { display: block; flex: 1; min-width: 0; max-width: 100%; font-size: 0.88rem; padding-top: 1px; } /* Linha de topo: nome (+ quantidade) à esquerda, preço à direita — igual à lógica já usada no Carrinho. Mantê-los na mesma linha flex (em vez de espalhados pela linha toda do item, junto com o thumb e o botão de remover) é o que evita o preço "fugir" para fora do cartão quando o texto do pack é longo. */ .sevencoffee-order-review__item-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; } .sevencoffee-order-review__item-name { flex: 1; min-width: 0; font-weight: 600; line-height: 1.4; overflow-wrap: break-word; } .sevencoffee-order-review__item-name .product-quantity { font-weight: 600; color: var(--scs-muted); white-space: nowrap; } .sevencoffee-order-review__item-total { flex-shrink: 0; font-weight: 700; font-size: 0.9rem; white-space: nowrap; } /* Meta do Pack ("Produtos escolhidos" / "Oferta") — mesma lógica já usada no Carrinho: lista em coluna, sem o espaçamento estranho por defeito do
/
/
do WooCommerce, a toda a largura por baixo do preço. */ .sevencoffee-order-review__item-info .wc-item-meta, .sevencoffee-order-review__item-info dl.variation { display: flex; flex-direction: column; gap: 2px; width: 100%; margin: 6px 0 0; padding: 0; font-size: 0.78rem; color: var(--scs-muted); } .sevencoffee-order-review__item-info .wc-item-meta > *, .sevencoffee-order-review__item-info dl.variation dt, .sevencoffee-order-review__item-info dl.variation dd { margin: 0; padding: 0; overflow-wrap: break-word; line-height: 1.4; } .sevencoffee-order-review__item-info .wc-item-meta strong, .sevencoffee-order-review__item-info dl.variation dt { color: var(--scs-text); font-weight: 600; } .sevencoffee-order-review__totals { box-shadow: none; border: none; padding: 16px 0 0; } .sevencoffee-order-review__payment, div#payment.sevencoffee-order-review__payment { margin-top: 20px; border-top: 1px solid var(--scs-border); padding-top: 20px; background: transparent !important; background-color: transparent !important; } /* ---------- Métodos de pagamento — grelha de cartões clicáveis ---------- */ .sevencoffee-order-review ul.payment_methods, body.woocommerce-order-pay #payment ul.payment_methods { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; } .sevencoffee-order-review ul.payment_methods li, body.woocommerce-order-pay #payment ul.payment_methods li { position: relative; border: 1px solid var(--scs-border); border-radius: var(--scs-radius); background: var(--scs-card) !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; overflow: hidden; } .sevencoffee-order-review ul.payment_methods li:hover, body.woocommerce-order-pay #payment ul.payment_methods li:hover { border-color: var(--scs-accent); } /* O rádio nativo fica presente (acessibilidade/teclado) mas visualmente escondido — o cartão inteiro funciona como a área clicável. */ .sevencoffee-order-review ul.payment_methods li input.input-radio, body.woocommerce-order-pay #payment ul.payment_methods li input.input-radio { position: absolute; top: 12px; left: 12px; margin: 0 !important; accent-color: var(--scs-dark); width: 16px; height: 16px; z-index: 1; } .sevencoffee-order-review ul.payment_methods li label, body.woocommerce-order-pay #payment ul.payment_methods li label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; margin: 0 !important; padding: 22px 12px 14px; cursor: pointer; font-weight: 600; font-size: 0.8rem; text-align: center; } /* Os ícones de cada gateway vêm com tamanhos de ficheiro diferentes — forçamos sempre a mesma ALTURA, a largura ajusta-se à proporção. */ .sevencoffee-order-review ul.payment_methods li label img, body.woocommerce-order-pay #payment ul.payment_methods li label img { height: 22px; width: auto; max-width: 100%; flex-shrink: 0; object-fit: contain; } .sevencoffee-order-review ul.payment_methods li label a, body.woocommerce-order-pay #payment ul.payment_methods li label a { font-size: 0.7rem; color: var(--scs-muted); margin-top: 2px; } .sevencoffee-order-review ul.payment_methods li.woocommerce-checkout-payment-method-selected, .sevencoffee-order-review ul.payment_methods li:has(input:checked), body.woocommerce-order-pay #payment ul.payment_methods li.woocommerce-checkout-payment-method-selected, body.woocommerce-order-pay #payment ul.payment_methods li:has(input:checked) { border-color: var(--scs-dark); box-shadow: 0 0 0 1px var(--scs-dark); background: var(--scs-soft-bg) !important; } /* O método selecionado, se tiver campos próprios (ex: número de cartão), ocupa a largura toda da grelha para mostrar esses campos com espaço. */ .sevencoffee-order-review ul.payment_methods li:has(input:checked):has(.payment_box), body.woocommerce-order-pay #payment ul.payment_methods li:has(input:checked):has(.payment_box) { grid-column: 1 / -1; } .sevencoffee-order-review ul.payment_methods li:has(input:checked):has(.payment_box) label, body.woocommerce-order-pay #payment ul.payment_methods li:has(input:checked):has(.payment_box) label { flex-direction: row; justify-content: flex-start; padding-left: 38px; } .sevencoffee-order-review div.payment_box, body.woocommerce-order-pay #payment div.payment_box { background: transparent !important; border-top: 1px solid var(--scs-border); padding: 14px 16px; margin: 0 !important; font-size: 0.85rem; } .sevencoffee-order-review div.payment_box:empty, body.woocommerce-order-pay #payment div.payment_box:empty { display: none; } .sevencoffee-order-review div.payment_box::before, body.woocommerce-order-pay #payment div.payment_box::before { display: none; } /* ---------- Cartões guardados (dentro da caixa da Stripe) [v2.5.53] ---------- PORQUE É QUE ISTO É PRECISO: Os seletores acima estão escritos como "ul.payment_methods li" — descendente, não filho direto. Apanham QUALQUER
  • lá dentro, a qualquer profundidade. A lista de cartões guardados da Stripe fica aninhada assim: ul.payment_methods > li (Stripe) > .payment_box > ul.woocommerce-SavedPaymentMethods > li <-- apanhado sem querer Resultado: cada cartão guardado herdava text-align:center, flex-direction: column, padding de 22px no topo e o rádio em position:absolute no canto — ficava o texto ao meio e a bolinha sozinha em cima à esquerda. Nunca se viu antes porque esta lista SÓ existe depois de um cliente guardar um cartão, e nenhum teste tinha chegado a esse ponto. Aqui repomos tudo para uma linha normal: rádio à esquerda, texto ao lado. NÃO se mudaram os seletores originais para "child" (>) de propósito — o WooCommerce muda a estrutura interna entre versões e isso partiria o desenho principal dos métodos de pagamento, que está a funcionar bem. */ .sevencoffee-order-review ul.woocommerce-SavedPaymentMethods, body.woocommerce-order-pay #payment ul.woocommerce-SavedPaymentMethods { list-style: none; margin: 0 0 var(--scs-space-4); padding: 0; display: flex; flex-direction: column; gap: var(--scs-space-2); } /* [v2.5.54] O
  • passa a FLEX. Na v2.5.53 ficou "display: block" e o resultado foi o rádio numa linha e o texto na linha de baixo — porque na marcação do WooCommerce o é IRMÃO do
  • que tem de o fazer. */ .sevencoffee-order-review ul.woocommerce-SavedPaymentMethods li, body.woocommerce-order-pay #payment ul.woocommerce-SavedPaymentMethods li { position: relative; display: flex !important; align-items: center; gap: var(--scs-space-3); /* [v2.5.60] Havia AQUI um "padding: 0 !important" logo a seguir a este, que anulava o de cima — sobra da v2.5.53, quando o
  • ainda era "display: block" e o padding vivia no
  • para flex na v2.5.54, o padding voltou para cá mas a linha antiga ficou. Resultado: as caixas dos cartões guardados estavam sem respiro interior nenhum. */ padding: var(--scs-space-3) !important; border: 1px solid var(--scs-border); border-radius: var(--scs-radius-sm); background: var(--scs-card) !important; margin: 0 !important; overflow: visible; } .sevencoffee-order-review ul.woocommerce-SavedPaymentMethods li:hover, body.woocommerce-order-pay #payment ul.woocommerce-SavedPaymentMethods li:hover { border-color: var(--scs-accent); } .sevencoffee-order-review ul.woocommerce-SavedPaymentMethods li:has(input:checked), body.woocommerce-order-pay #payment ul.woocommerce-SavedPaymentMethods li:has(input:checked) { border-color: var(--scs-dark); box-shadow: 0 0 0 1px var(--scs-dark); background: var(--scs-soft-bg) !important; } /* O rádio volta ao fluxo normal, à esquerda do texto. */ .sevencoffee-order-review ul.woocommerce-SavedPaymentMethods li input, body.woocommerce-order-pay #payment ul.woocommerce-SavedPaymentMethods li input { position: static !important; top: auto !important; left: auto !important; width: 16px; height: 16px; margin: 0 !important; accent-color: var(--scs-dark); flex-shrink: 0; } .sevencoffee-order-review ul.woocommerce-SavedPaymentMethods li label, body.woocommerce-order-pay #payment ul.woocommerce-SavedPaymentMethods li label { flex: 1 1 auto; display: block !important; padding: 0 !important; margin: 0 !important; text-align: left !important; font-weight: 500; font-size: 0.85rem; line-height: 1.35; cursor: pointer; } /* ---------- Botões Apple Pay / Google Pay (Stripe Express Checkout) [v2.5.54] ---------- Estes botões são desenhados pela Stripe dentro de um