/* ════════════════════════════════════════════════════════════════
   KODIN CHECKOUT — CSS ATIVO (Classic Checkout / shortcode)
   v2.3 — conteúdo consolidado a partir do que estava no
   Personalizador (CSS Adicional). A partir de agora, este é o
   ÚNICO lugar onde o CSS do checkout deve ser editado.
   Subir em: wp-content/themes/kodin/checkout-style.css
   (carregado por functions.php apenas em /checkout/ e /cart/)

   OBS: as versões antigas que existiam aqui (checkout em "blocos"
   do Gutenberg e uma v3.0 com escopo .kodin-classic-checkout)
   foram removidas por estarem obsoletas/duplicadas — o site usa
   o checkout clássico (shortcode) e a versão abaixo é a que
   realmente está no ar. O CSS da página /cart/, no fim deste
   arquivo, foi mantido como estava.
   ════════════════════════════════════════════════════════════════ */

/* ── Fundo da página ── */
body.woocommerce-checkout #page,
body.woocommerce-checkout .site-main,
body.woocommerce-checkout .entry-content,
body.woocommerce-checkout .woocommerce {
  background: #080809 !important;
}

/* ── Título "Checkout" ── */
body.woocommerce-checkout .entry-title,
body.woocommerce-checkout h1.entry-title {
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  max-width: 900px !important;
  margin: 0 auto 24px !important;
  padding: 0 24px !important;
}

/* ── FORM PRINCIPAL: coluna única, mais larga ── */
body.woocommerce-checkout form.checkout {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 24px 100px !important;
  background: transparent !important;
  display: block !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* Remove layout 2 colunas nativo do WC */
body.woocommerce-checkout form.checkout .col2-set,
body.woocommerce-checkout form.checkout #customer_details {
  float: none !important;
  width: 100% !important;
  clear: both !important;
  margin: 0 !important;
}
body.woocommerce-checkout form.checkout .col-1,
body.woocommerce-checkout form.checkout .col-2 {
  float: none !important;
  width: 100% !important;
}
body.woocommerce-checkout form.checkout .col-2 { display: none !important; }

/* ══ RESUMO COMPACTO — linha única criada pelo JS ══ */
#kodin-summary-line {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 18px 24px !important;
  flex-wrap: wrap !important;
}
#kodin-summary-line .kd-sum-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.3) !important;
}
#kodin-summary-line .kd-sum-sep {
  color: rgba(255,255,255,.15) !important;
  font-size: 12px !important;
}
#kodin-summary-line .kd-sum-count {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.5) !important;
}
#kodin-summary-line .kd-sum-total {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-left: auto !important;
}

/* ══ SEÇÕES — cada bloco é um card escuro ══ */
/* "SEU PEDIDO" (h3 nativo do WooCommerce) fica FORA do card #order_review,
   duplicando o título que já aparece dentro da caixa via #kodin-summary-line
   (.kd-sum-title). Removido do fluxo para o título existir só DENTRO da caixa
   e o checkout ocupar menos altura. */
body.woocommerce-checkout #order_review_heading {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Card do resumo do pedido */
body.woocommerce-checkout #order_review {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.4) !important;
  margin-bottom: 16px !important;
  float: none !important;
  width: 100% !important;
  clear: both !important;
}

/* Card dos dados pessoais */
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout .col2-set {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.4) !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
}

/* ── SEÇÃO LABELS (títulos internos das seções) ── */
body.woocommerce-checkout form.checkout h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.25) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* ── LABELS dos campos ── */
body.woocommerce-checkout form.checkout label,
body.woocommerce-checkout #customer_details label {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.3) !important;
  margin-bottom: 6px !important;
  display: block !important;
}
body.woocommerce-checkout form.checkout .required { color: #BC3C31 !important; }
body.woocommerce-checkout form.checkout .form-row { margin-bottom: 14px !important; }

/* ── INPUTS ── */
body.woocommerce-checkout form.checkout input[type="text"],
body.woocommerce-checkout form.checkout input[type="email"],
body.woocommerce-checkout form.checkout input[type="tel"],
body.woocommerce-checkout form.checkout input[type="password"],
body.woocommerce-checkout form.checkout input[type="number"],
body.woocommerce-checkout form.checkout textarea,
body.woocommerce-checkout form.checkout .input-text {
  font-family: 'Montserrat', sans-serif !important;
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 14px 18px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 50px !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: border-color .2s !important;
  box-sizing: border-box !important;
}
body.woocommerce-checkout form.checkout input:focus {
  border-color: #BC3C31 !important;
  box-shadow: 0 0 0 3px rgba(188,60,49,.1) !important;
  outline: none !important;
}
body.woocommerce-checkout form.checkout input::placeholder {
  color: rgba(255,255,255,.32) !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
}

/* Campos lado-a-lado (nome + sobrenome) */
body.woocommerce-checkout form.checkout .form-row-first,
body.woocommerce-checkout form.checkout .form-row-last {
  width: calc(50% - 8px) !important;
  float: left !important;
  box-sizing: border-box !important;
}
body.woocommerce-checkout form.checkout .form-row-last { margin-left: 16px !important; }
body.woocommerce-checkout form.checkout .form-row-wide {
  float: none !important;
  clear: both !important;
  width: 100% !important;
}
body.woocommerce-checkout #customer_details::after,
body.woocommerce-checkout .col-1::after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}

/* Selects */
body.woocommerce-checkout form.checkout select {
  font-family: 'Montserrat', sans-serif !important;
  background: #0a0a0a !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
  width: 100% !important;
  min-height: 50px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single {
  background: #0a0a0a !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  height: 50px !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  line-height: 50px !important;
  padding: 0 18px !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px !important; right: 10px !important; }
.select2-dropdown { background: #111 !important; border: 1px solid rgba(255,255,255,.1) !important; border-radius: 10px !important; box-shadow: 0 8px 32px rgba(0,0,0,.6) !important; }
.select2-results__option { color: #ccc !important; font-family: 'Montserrat', sans-serif !important; font-size: 13px !important; padding: 10px 14px !important; }
.select2-results__option--highlighted { background: rgba(188,60,49,.15) !important; color: #fff !important; }

/* ══ RESUMO DO PEDIDO ══ */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
  border: none !important;
}
/* Esconde header da tabela (Produto / Subtotal) */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead {
  display: none !important;
}
/* Esconde thumbnail e meta */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name img,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name .variation,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name dl,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name > *:not(.product-title):not(a) {
  display: none !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  padding: 13px 24px !important;
  font-family: 'Montserrat', sans-serif !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name a,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name { color: #fff !important; font-weight: 700 !important; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .woocommerce-Price-amount,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .amount { color: #fff !important; font-weight: 700 !important; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart-discount td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart-discount th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart-discount .amount { color: #BC3C31 !important; }
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total th {
  border-bottom: none !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total .amount {
  font-size: 24px !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* ══ PAGAMENTO (#payment — movido pelo JS ao final do form) ══ */
body.woocommerce-checkout #payment {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.4) !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  width: 100% !important;
  clear: both !important;
  box-sizing: border-box !important;
}

/* Label interno */
body.woocommerce-checkout #payment::before {
  content: 'PAGAMENTO' !important;
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .22em !important;
  color: rgba(255,255,255,.25) !important;
  padding: 20px 24px 0 !important;
}

/* ── TABS de gateway — display:contents eleva filhos de cada <li> para o flex do <ul> ── */
body.woocommerce-checkout #payment ul.payment_methods {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  list-style: none !important;
  margin: 12px 24px 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Cada <li> desaparece do layout; seus filhos viram flex-items diretos do <ul> */
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
  display: contents !important;
}

/* Label → aba clicável */
body.woocommerce-checkout #payment ul.payment_methods > li > label {
  order: 1 !important;
  flex: 1 !important;
  min-width: 130px !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 14px 12px !important;
  cursor: pointer !important;
  color: rgba(255,255,255,.5) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
  text-align: center !important;
  background: rgba(255,255,255,.03) !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  transition: border-color .2s, background .2s, color .2s !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
/* Aba ativa */
body.woocommerce-checkout #payment ul.payment_methods input[type="radio"]:checked + label {
  border-color: #BC3C31 !important;
  background: rgba(188,60,49,.08) !important;
  color: #fff !important;
}
body.woocommerce-checkout #payment ul.payment_methods label img {
  max-height: 20px !important;
  width: auto !important;
  opacity: .5 !important;
  border-radius: 3px !important;
}
body.woocommerce-checkout #payment ul.payment_methods input[type="radio"]:checked + label img { opacity: 1 !important; }
body.woocommerce-checkout #payment ul.payment_methods input[type="radio"] { display: none !important; }

/* .payment_box → oculto por padrão, aparece só quando a aba está ativa */
body.woocommerce-checkout #payment ul.payment_methods > li > .payment_box {
  order: 2 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: none !important;
  padding: 20px 24px !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Mostra apenas o box do método selecionado */
body.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"]:checked ~ .payment_box {
  display: block !important;
}

/* Oculta o container antigo criado pelo JS (não é mais usado) */
#kodin-payment-forms { display: none !important; }

/* ── MERCADO PAGO — override de fundos brancos ── */
/* Container principal */
body.woocommerce-checkout #payment .mp-checkout-custom-load,
body.woocommerce-checkout #payment .mp-checkout-custom-container {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}
/* Wallet button container */
body.woocommerce-checkout #payment .cho-container,
body.woocommerce-checkout #payment [class*="cho-"] {
  background: transparent !important;
  background-color: transparent !important;
}
/* Inputs do cartão (iframes/divs de campo) */
body.woocommerce-checkout #payment .mp-checkout-custom-card-input,
body.woocommerce-checkout #payment div.mp-checkout-custom-card-input {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 12px 14px !important;
  height: auto !important;
  min-height: 46px !important;
}
/* CÓDIGO DE SEGURANÇA (CVV) — esse campo vem de um iframe próprio do
   Mercado Pago, estilizado por ELES com uma regra de alta
   especificidade (#mp-checkout-custom-root #mp-custom-checkout-form-container
   ...), que ganhava da nossa regra genérica acima e deixava esse campo
   sozinho com fundo branco, destoando dos outros 3 campos do cartão
   (Número, Nome do titular, Vencimento).
   IMPORTANTE: o texto/placeholder ("Ex.: 123") que aparece DENTRO desse
   campo é renderizado dentro do próprio iframe do Mercado Pago — um
   documento de outra origem, que o nosso CSS não alcança por segurança
   (mesma razão que protege o número do cartão). A cor desse texto vem
   fixa em tom escuro, pensada pra um fundo claro. Por isso só dá pra
   trocar o FUNDO da caixinha (o que está ao redor do iframe) por aqui —
   e precisa continuar CLARO, senão o texto fica ilegível (escuro sobre
   escuro). Por isso usamos um cinza claro (não branco puro) em vez do
   fundo escuro dos outros campos: fica mais discreto que um branco
   total, mas continua legível. Repetimos a cadeia exata de seletores
   do Mercado Pago, só que prefixada com #payment, pra ganhar em
   especificidade (3 IDs em vez de 2) e poder sobrescrever o fundo. */
#payment #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-column .mp-checkout-custom-security-code-container .mp-checkout-custom-security-code-input {
  background: #9a9a9a !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
}
/* Input de texto (nome do titular) */
body.woocommerce-checkout #payment input.mp-checkout-custom-card-input,
body.woocommerce-checkout #payment #form-checkout__cardholderName {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  padding: 12px 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.woocommerce-checkout #payment #form-checkout__cardholderName::placeholder { color: rgba(255,255,255,.45) !important; }
/* Labels do MP (input-label custom element) — escondidos visualmente
   (mas acessíveis a leitor de tela), igual ao padrão já usado nos campos
   de "Detalhes de cobrança" (ver FIXES v2.4 mais abaixo): o nome do
   campo já aparece como placeholder dentro da própria caixa ("Número do
   cartão", "Nome do titular" etc.), então a legenda separada acima da
   caixa fica redundante e quebra a consistência visual com o resto do
   formulário. O ícone de "?" (tooltip) do Código de segurança é um
   elemento irmão do input-label, não filho — continua visível normalmente. */
body.woocommerce-checkout #payment input-label,
body.woocommerce-checkout #payment input-label .mp-input-label,
body.woocommerce-checkout #payment .mp-checkout-custom-card-form label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-size: 0 !important;
}
/* Helper text */
body.woocommerce-checkout #payment input-helper .mp-helper {
  color: rgba(255,255,255,.3) !important;
  font-size: 11px !important;
  font-family: 'Montserrat', sans-serif !important;
}
/* Texto de ajuda abaixo do "Nome do titular" ("Preencha o nome como
   está no cartão.") — essa mensagem vem num elemento filho
   (.mp-helper-message.info) que tem sua PRÓPRIA cor inline definida
   pelo Mercado Pago (preto quase sólido, rgba(0,0,0,.55)), pensada pra
   fundo claro. A regra acima estiliza só o container .mp-helper, não
   alcança esse texto filho — por isso ele ficava ilegível (preto sobre
   preto). Aqui sobrescrevemos a cor do texto em si (a versão "error",
   vermelho escuro sobre preto, também ficava com contraste muito baixo,
   então clareamos as duas). */
body.woocommerce-checkout #payment .mp-helper-message.info {
  color: rgba(255,255,255,.45) !important;
}
body.woocommerce-checkout #payment .mp-helper-message.error {
  color: #ff6b6b !important;
}
/* Bandeiras de cartão (Mastercard/Visa/Elo/Amex/Hipercard) — removidas
   por completo, deixando o formulário do cartão mais limpo */
body.woocommerce-checkout #payment .mp-checkout-custom-card-flags {
  display: none !important;
}
/* Botão Mercado Pago (wallet) — mantém amarelo mas com bordas arredondadas.
   OBS: o bloco "Pague com um toque" (título + botão + rodapé de
   privacidade) é movido via JS (kdMoveWalletToTop, no functions.php)
   para um card fixo no topo da página, #kd-wallet-top — por isso o
   estilo dele está numa seção própria mais abaixo, não aqui dentro de
   #payment. As regras antigas e genéricas que tentavam estilizar
   qualquer classe com "wallet" no nome foram removidas: elas batiam em
   vários elementos aninhados ao mesmo tempo (container, título, botão)
   e criavam aquele efeito de "caixa dentro de caixa". */
body.woocommerce-checkout #mp-wallet-button {
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}
/* Título "Pague com um toque / usando seus cartões salvos" — enquanto o
   wallet ainda está dentro do box do cartão (antes de ser movido pro
   #kd-wallet-top), ele vem como um único bloco de texto sem hierarquia
   (mesmo tamanho/peso nas duas linhas), diferente do Pix, que tem um
   título em negrito (16px) e um subtítulo mais claro (14px) abaixo.
   Aqui replicamos esse mesmo padrão: a 1ª linha (::first-line) vira o
   "título" e a 2ª linha fica como "subtítulo", igual ao box do Pix —
   melhor aproveitamento do espaço e visual consistente entre os boxes.
   Assim que o fix kdMoveWalletToTop entrar no ar, esse bloco passa a
   morar em #kd-wallet-top (que já tem seu próprio estilo lá embaixo)
   e esta regra simplesmente deixa de se aplicar. */
body.woocommerce-checkout #payment .mp-wallet-button-title {
  text-align: center !important;
}
body.woocommerce-checkout #payment .mp-wallet-button-title span {
  display: block !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1.4 !important;
}
body.woocommerce-checkout #payment .mp-wallet-button-title span::first-line {
  font-weight: 700 !important;
  font-size: 16px !important;
  color: rgba(255,255,255,.92) !important;
}
/* Texto do MP dentro do box */
body.woocommerce-checkout #payment .payment_box p,
body.woocommerce-checkout #payment .payment_box span:not([class*="amount"]):not(.woocommerce-Price-currencySymbol) {
  color: rgba(255,255,255,.5) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
}
/* Separador "ou" entre wallet e formulário */
body.woocommerce-checkout #payment .mp-checkout-custom-or-divider,
body.woocommerce-checkout #payment [class*="divider"] {
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.2) !important;
}
/* Teste mode banner */
body.woocommerce-checkout #payment test-mode .mp-test-mode-card {
  background: rgba(188,60,49,.08) !important;
  border: 1px solid rgba(188,60,49,.2) !important;
  border-radius: 8px !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 11px !important;
}

/* ── STRIPE UPE — 100% largura ── */
#payment ul.payment_methods .payment_method_stripe.payment_box fieldset,
#payment ul.payment_methods .payment_method_stripe.payment_box .wc-stripe-upe-element,
#payment ul.payment_methods .payment_method_stripe.payment_box #wc-stripe-upe-form {
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}
#payment .wc-stripe-upe-element iframe,
.wc-stripe-upe-element iframe {
  width: 100% !important;
  min-width: 100% !important;
  display: block !important;
}

/* "Salve as informações" — reset */
body.woocommerce-checkout .payment_method_stripe .payment_box label,
body.woocommerce-checkout .payment_method_stripe .payment_box p {
  font-weight: 400 !important;
  text-transform: none !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  text-align: left !important;
}
body.woocommerce-checkout .wc-stripe-currency-selector { display: none !important; }

/* Saved payment methods list */
body.woocommerce-checkout .woocommerce-SavedPaymentMethods {
  list-style: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}
body.woocommerce-checkout .woocommerce-SavedPaymentMethods li {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin-bottom: 6px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.5) !important;
  min-width: 0 !important;
  flex: unset !important;
  display: block !important;
}
body.woocommerce-checkout .woocommerce-SavedPaymentMethods label {
  font-weight: 500 !important;
  text-transform: none !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
}

/* PayPal box */
#payment ul.payment_methods .payment_method_ppcp-gateway.payment_box p {
  color: rgba(255,255,255,.3) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  display: block !important;
}
#payment ul.payment_methods .payment_method_ppcp-gateway .paypal-button-container,
#payment ul.payment_methods .payment_method_ppcp-gateway [id^="ppc-button"] {
  width: 100% !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* ── Termos e Privacidade ── */
body.woocommerce-checkout #payment .terms,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  padding: 0 24px !important;
  margin-bottom: 14px !important;
}
body.woocommerce-checkout #payment .terms label,
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label {
  color: rgba(255,255,255,.2) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  line-height: 1.5 !important;
}
body.woocommerce-checkout input[type="checkbox"] {
  accent-color: #BC3C31 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  width: 14px !important;
  height: 14px !important;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text {
  color: rgba(255,255,255,.15) !important;
  font-size: 11px !important;
  margin: 0 0 12px !important;
  padding: 0 24px !important;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a { color: rgba(255,255,255,.3) !important; }

/* ── BOTÃO FINALIZAR ── */
body.woocommerce-checkout #payment .place-order {
  padding: 0 24px 24px !important;
  border: none !important;
  background: transparent !important;
}
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button#place_order,
#place_order {
  display: block !important;
  width: 100% !important;
  background: #BC3C31 !important;
  background-color: #BC3C31 !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 18px 24px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: 0 4px 28px rgba(188,60,49,.4) !important;
  transition: background .2s, transform .1s, box-shadow .2s !important;
  box-sizing: border-box !important;
  margin-top: 12px !important;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout button#place_order:hover {
  background: #a8332a !important;
  background-color: #a8332a !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 36px rgba(188,60,49,.55) !important;
}

/* ── Banner cupom ── */
body.woocommerce-checkout .woocommerce-info {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-left: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  color: rgba(255,255,255,.4) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  padding: 12px 20px !important;
  margin-bottom: 20px !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: none !important;
}
body.woocommerce-checkout .woocommerce-info::before { display: none !important; }
body.woocommerce-checkout .woocommerce-info a { color: #BC3C31 !important; font-weight: 700 !important; }

/* ── "Pague com um toque" (wallet Mercado Pago, cartões salvos) ──
   Movido via JS para um card fixo no topo da página, antes do bloco de
   cupom (ver kdMoveWalletToTop em functions.php). Só aparece quando
   "Cartão de crédito" é o método selecionado — em Pix/Boleto fica
   escondido (.kd-hidden, controlado por kdSyncWalletVisibility). O
   formulário de número/nome/vencimento/código do cartão NÃO é movido:
   continua dentro da aba de Cartão de crédito, como antes. */
#kd-wallet-top {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.4) !important;
  padding: 20px !important;
  margin: 0 0 20px !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
#kd-wallet-top.kd-hidden { display: none !important; }
#kd-wallet-top .mp-wallet-button-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
#kd-wallet-top .mp-wallet-button-title {
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
#kd-wallet-top .mp-wallet-button-title span {
  color: rgba(255,255,255,.4) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  line-height: 1.7 !important;
}
#kd-wallet-top .mp-wallet-button-button {
  width: 100% !important;
  max-width: 320px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
#kd-wallet-top .mp-wallet-button-button button {
  width: 100% !important;
  border-radius: 10px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
}
#kd-wallet-top .mp-privacy-policy-footer {
  color: rgba(255,255,255,.2) !important;
  font-size: 11px !important;
  font-family: 'Montserrat', sans-serif !important;
  text-align: center !important;
  margin: 0 !important;
}
#kd-wallet-top .mp-privacy-policy-footer a { color: rgba(255,255,255,.4) !important; }

/* ── Formulário "Aplicar cupom" (revelado ao clicar no link acima) ──
   IMPORTANTE: não forçar "display" aqui — o WooCommerce controla a
   exibição (esconde/mostra) desse form via JS (slideToggle), trocando
   o style inline display:none ⇄ display:block. Se a gente forçar
   display:flex/block !important aqui, o form fica sempre visível e o
   link "Clique aqui para digitar seu cupom" para de funcionar. Por
   isso o layout em colunas é feito com float (igual ao resto do
   checkout), não com flex no elemento <form>. */
body.woocommerce-checkout .checkout_coupon {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 24px rgba(0,0,0,.4) !important;
  padding: 20px !important;
  margin: 0 0 20px !important;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important; /* contém os floats das colunas abaixo */
}
body.woocommerce-checkout .checkout_coupon p.form-row {
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
/* O markup padrão do WooCommerce tem um <label class="screen-reader-text">
   seguido de um <br> antes do input — esconder só o label (acima) não
   remove o <br>, que continua ocupando uma linha extra e deixa essa
   coluna mais alta que a do botão, desalinhando os dois. */
body.woocommerce-checkout .checkout_coupon p.form-row br {
  display: none !important;
}
body.woocommerce-checkout .checkout_coupon p.form-row-first {
  float: left !important;
  width: calc(100% - 156px) !important;
  margin-right: 12px !important;
}
body.woocommerce-checkout .checkout_coupon p.form-row-last {
  float: left !important;
  width: 144px !important;
}
body.woocommerce-checkout .checkout_coupon .clear { clear: both !important; }
body.woocommerce-checkout .checkout_coupon label.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}
body.woocommerce-checkout .checkout_coupon #coupon_code {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 14px !important;
  padding: 14px 18px !important;
  width: 100% !important;
  min-height: 50px !important;
  outline: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.woocommerce-checkout .checkout_coupon #coupon_code:focus {
  border-color: #BC3C31 !important;
  box-shadow: 0 0 0 3px rgba(188,60,49,.1) !important;
}
body.woocommerce-checkout .checkout_coupon #coupon_code::placeholder { color: rgba(255,255,255,.32) !important; }
body.woocommerce-checkout .checkout_coupon .button {
  background: transparent !important;
  border: 1.5px solid #BC3C31 !important;
  border-radius: 10px !important;
  color: #BC3C31 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  padding: 0 10px !important;
  width: 100% !important;
  min-height: 50px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background .2s, color .2s !important;
  box-sizing: border-box !important;
}
body.woocommerce-checkout .checkout_coupon .button:hover {
  background: #BC3C31 !important;
  color: #fff !important;
}

/* ── Remove a seta/triângulo padrão do WooCommerce acima do conteúdo
   do método de pagamento ativo (ficava "flutuando" ao lado das
   bandeiras de cartão, sem combinar com o layout em abas) ── */
body.woocommerce-checkout #payment ul.payment_methods .payment_box::before,
body.woocommerce-checkout #payment ul.payment_methods .payment_box::after {
  display: none !important;
  content: none !important;
}

/* ── Mensagens de erro: removidas (a validação já aparece nos próprios
   campos em vermelho — não precisa duplicar num bloco de aviso acima) ── */
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-NoticeGroup-checkout {
  display: none !important;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  body.woocommerce-checkout form.checkout { padding: 0 16px 100px !important; }
  body.woocommerce-checkout #customer_details,
  body.woocommerce-checkout .col2-set { padding: 20px !important; }
  body.woocommerce-checkout form.checkout .form-row-first,
  body.woocommerce-checkout form.checkout .form-row-last {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }
  body.woocommerce-checkout #payment ul.payment_methods li { min-width: calc(50% - 4px) !important; }
}

/* ═══════════════════════════════════════════════════════════
   FIXES v2.1 — alinhamento das abas, Pix/Boleto e loading
   ═══════════════════════════════════════════════════════════ */

/* ── CVV: classe diferente dos outros campos MP ──
   ATENÇÃO: o fundo aqui precisa ficar CLARO (não escuro como os outros
   campos do cartão), porque o texto/placeholder ("Ex.: 123") vem de
   dentro de um iframe do Mercado Pago com cor fixa escura — fundo escuro
   = texto ilegível. A regra de maior especificidade lá em cima (com
   #mp-checkout-custom-root #mp-custom-checkout-form-container) é quem
   de fato vence essa propriedade; mantemos o valor igual aqui (em vez de
   remover) só pra não deixar duas declarações contraditórias no arquivo.
   FIX (bug "código de segurança quebrando o layout"): esse campo tinha
   padding: 12px 14px + min-height: 46px, diferente dos outros dois campos
   do cartão (cardNumber/expirationDate, que ficam com padding: 0 porque
   uma regra própria do Mercado Pago com mais especificidade vence ali).
   Com padding nas 4 bordas, o <iframe> interno (que sempre ocupa height:
   100% do espaço de conteúdo) sobrava só ~22px de altura em vez dos ~46px
   dos outros campos — e o texto "Ex.: 123" renderizado DENTRO do iframe
   (cuja altura interna o MP assume fixa) ficava cortado/colado no topo da
   caixinha. Solução: zerar o padding e fixar height/min-height em 48px,
   igual aos outros dois campos, pra dar ao iframe a mesma altura interna
   e o texto renderizar centralizado como nos demais. */
body.woocommerce-checkout #payment .mp-checkout-custom-security-code-input,
body.woocommerce-checkout #payment div.mp-checkout-custom-security-code-input {
  background: #9a9a9a !important;
  background-color: #9a9a9a !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  padding: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
}

/* ── FIX: Labels Pix/Boleto recebem bg branco do plugin MP — reforça especificidade ── */
body.woocommerce-checkout #payment ul.payment_methods li label,
body.woocommerce-checkout #payment ul.payment_methods > li > label,
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label {
  background: rgba(255,255,255,.03) !important;
  background-color: rgba(255,255,255,.03) !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.5) !important;
}
body.woocommerce-checkout #payment ul.payment_methods input[type="radio"]:checked + label,
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input[type="radio"]:checked + label {
  background: rgba(188,60,49,.08) !important;
  background-color: rgba(188,60,49,.08) !important;
  border-color: #BC3C31 !important;
  color: #fff !important;
}

/* ── FIX: alinhamento — oculta chevron/seta e qualquer elemento extra que o MP injeta dentro do <li> ── */
body.woocommerce-checkout #payment ul.payment_methods > li > *:not(label):not(input[type="radio"]):not(.payment_box) {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── FIX: suprime overlay de loading do WooCommerce ao trocar de método de pagamento ── */
body.woocommerce-checkout #payment .blockUI.blockOverlay,
body.woocommerce-checkout #payment .blockUI,
body.woocommerce-checkout #order_review .blockUI.blockOverlay,
body.woocommerce-checkout #order_review .blockUI {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* ═══════════════════════════════════════════════════════════
   FIXES v2.2 — fundo branco nas caixas de Pix e Boleto
   ═══════════════════════════════════════════════════════════ */
body.woocommerce-checkout #payment #mp-checkout-pix-root,
body.woocommerce-checkout #payment .mp-checkout-pix-container,
body.woocommerce-checkout #payment #mp-checkout-ticket-root,
body.woocommerce-checkout #payment .mp-checkout-ticket-container,
body.woocommerce-checkout #payment .mp-checkout-ticket-single {
  background: transparent !important;
  background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════
   FIXES v2.3 — fundo branco no conteúdo interno do Pix
   e nos campos do formulário do Boleto (CPF, CEP, Cidade,
   Bairro, Endereço, Número, Complemento)
   ═══════════════════════════════════════════════════════════ */
body.woocommerce-checkout #payment .mp-pix-template-container {
  background: transparent !important;
  background-color: transparent !important;
}

body.woocommerce-checkout #payment .mp-input-document,
body.woocommerce-checkout #payment .mp-input-document .mp-input,
body.woocommerce-checkout #payment .mp-checkout-ticket-billing-input-number,
body.woocommerce-checkout #payment select.mp-document-select,
body.woocommerce-checkout #payment input.mp-document,
body.woocommerce-checkout #payment input.mp-checkout-andes-input,
body.woocommerce-checkout #payment #form-checkout__address_street_number {
  background: #0a0a0a !important;
  background-color: #0a0a0a !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}

/* ═══════════════════════════════════════════════════════════
   FIXES v2.4 — campos com nome do campo DENTRO da caixa
   (estilo referência Kiwify), sem label visível acima, e
   estado inválido (borda + texto interno em vermelho).
   O texto "Campo inválido" dentro da caixa é trocado pelo JS
   (functions.php) quando o WooCommerce marca a linha como
   .woocommerce-invalid (ele mesmo faz isso no blur/submit).
   ═══════════════════════════════════════════════════════════ */

/* Esconde o <label> visualmente (mantém acessível a leitor de tela) —
   o nome do campo já aparece como placeholder dentro do input. */
body.woocommerce-checkout #customer_details .form-row > label,
body.woocommerce-checkout .col2-set .form-row > label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Estado inválido: borda + texto do placeholder em vermelho */
body.woocommerce-checkout #customer_details .form-row.woocommerce-invalid input,
body.woocommerce-checkout #customer_details .form-row.woocommerce-invalid select,
body.woocommerce-checkout .col2-set .form-row.woocommerce-invalid input,
body.woocommerce-checkout .col2-set .form-row.woocommerce-invalid select {
  border-color: #BC3C31 !important;
  box-shadow: 0 0 0 3px rgba(188,60,49,.12) !important;
}
body.woocommerce-checkout #customer_details .form-row.woocommerce-invalid input::placeholder,
body.woocommerce-checkout .col2-set .form-row.woocommerce-invalid input::placeholder {
  color: #BC3C31 !important;
  opacity: 1 !important;
  font-weight: 600 !important;
}

/* ============================================================
   KODIN CART PAGE v1.0  (/cart/ — layout clássico WooCommerce)
   ============================================================ */

.woocommerce-cart #page,
.woocommerce-cart .site-main,
.woocommerce-cart .woocommerce {
  background: #0a0a0a !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ── Título da página ── */
.woocommerce-cart h1.entry-title,
.woocommerce-cart h1,
.woocommerce-cart .page-title {
  font-family: 'Montserrat', sans-serif !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* ── Tabela de itens ── */
.woocommerce-cart-form .shop_table.cart {
  background: transparent !important;
  border: none !important;
  border-collapse: collapse !important;
  width: 100% !important;
}
.woocommerce-cart-form .shop_table.cart thead th {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.3) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: 10px 16px !important;
}
.woocommerce-cart-form .shop_table.cart tr.cart_item {
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  background: transparent !important;
  transition: background .15s !important;
}
.woocommerce-cart-form .shop_table.cart tr.cart_item:hover {
  background: rgba(255,255,255,.02) !important;
}
.woocommerce-cart-form .shop_table.cart td {
  background: transparent !important;
  border: none !important;
  padding: 16px !important;
  vertical-align: middle !important;
  color: #fff !important;
}

/* Thumbnail */
.woocommerce-cart-form td.product-thumbnail img {
  width: 64px !important;
  height: 64px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* Nome */
.woocommerce-cart-form td.product-name a {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  font-family: 'Montserrat', sans-serif !important;
}
.woocommerce-cart-form td.product-name .variation dt,
.woocommerce-cart-form td.product-name .variation dd {
  color: rgba(255,255,255,.35) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* Preço */
.woocommerce-cart-form td.product-price .amount,
.woocommerce-cart-form td.product-subtotal .amount {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  font-family: 'Montserrat', sans-serif !important;
}
.woocommerce-cart-form td.product-subtotal .woocommerce-Price-amount { color: #fff !important; }

/* Quantidade */
.woocommerce-cart-form td.product-quantity input.qty {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 60px !important;
  padding: 8px !important;
}
.woocommerce-cart-form td.product-quantity input.qty:focus {
  outline: none !important;
  border-color: rgba(188,60,49,.5) !important;
}

/* Remover */
.woocommerce-cart-form td.product-remove a.remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.3) !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transition: background .2s, color .2s !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}
.woocommerce-cart-form td.product-remove a.remove:hover {
  background: rgba(188,60,49,.2) !important;
  color: #BC3C31 !important;
  border-color: rgba(188,60,49,.3) !important;
}

/* Botão "Atualizar carrinho" */
.woocommerce-cart-form .actions .button {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.4) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: color .2s, border-color .2s !important;
}
.woocommerce-cart-form .actions .button:hover {
  color: rgba(255,255,255,.7) !important;
  border-color: rgba(255,255,255,.25) !important;
}

/* Campo de cupom na tabela */
.woocommerce-cart-form .coupon #coupon_code {
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  padding: 10px 14px !important;
  outline: none !important;
}
.woocommerce-cart-form .coupon #coupon_code::placeholder { color: rgba(255,255,255,.2) !important; }
.woocommerce-cart-form .coupon #coupon_code:focus { border-color: rgba(188,60,49,.4) !important; }
.woocommerce-cart-form .coupon .button {
  background: rgba(188,60,49,.15) !important;
  border: 1px solid rgba(188,60,49,.3) !important;
  color: #BC3C31 !important;
}
.woocommerce-cart-form .coupon .button:hover {
  background: rgba(188,60,49,.25) !important;
  color: #e05a4e !important;
}

/* ── Totais / Sidebar ── */
.cart-collaterals .cart_totals {
  background: #0f0f0f !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 12px !important;
  padding: 24px !important;
  box-shadow: 0 4px 32px rgba(0,0,0,.5) !important;
}
.cart-collaterals .cart_totals h2 {
  font-family: 'Montserrat', sans-serif !important;
  color: rgba(255,255,255,.3) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}
.cart-collaterals .shop_table.woocommerce-shipping-totals,
.cart-collaterals table.shop_table {
  background: transparent !important;
  border: none !important;
  border-collapse: collapse !important;
  width: 100% !important;
}
.cart-collaterals table.shop_table tr {
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}
.cart-collaterals table.shop_table th,
.cart-collaterals table.shop_table td {
  background: transparent !important;
  border: none !important;
  padding: 12px 0 !important;
  font-family: 'Montserrat', sans-serif !important;
}
.cart-collaterals table.shop_table th {
  color: rgba(255,255,255,.35) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-align: left !important;
}
.cart-collaterals table.shop_table td {
  color: rgba(255,255,255,.7) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: right !important;
}
.cart-collaterals table.shop_table .cart-subtotal td .amount,
.cart-collaterals table.shop_table .order-total td .amount {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}
.cart-collaterals table.shop_table .order-total th {
  color: rgba(255,255,255,.6) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
.cart-collaterals table.shop_table .cart-discount td,
.cart-collaterals table.shop_table .cart-discount th {
  color: #BC3C31 !important;
}
.cart-collaterals table.shop_table .cart-discount td .amount {
  color: #BC3C31 !important;
  font-size: 14px !important;
}

/* Botão Finalizar Compra */
.wc-proceed-to-checkout .checkout-button,
.cart-collaterals .wc-proceed-to-checkout a.checkout-button {
  display: block !important;
  width: 100% !important;
  background: #BC3C31 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 17px 24px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  margin-top: 16px !important;
  transition: background .2s, transform .1s, box-shadow .2s !important;
  box-shadow: 0 4px 24px rgba(188,60,49,.3) !important;
  box-sizing: border-box !important;
}
.wc-proceed-to-checkout .checkout-button:hover,
.cart-collaterals .wc-proceed-to-checkout a.checkout-button:hover {
  background: #a8332a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 32px rgba(188,60,49,.45) !important;
}

/* Mensagens de erro / sucesso WooCommerce na cart */
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info {
  background: #111 !important;
  border-left: 4px solid #BC3C31 !important;
  border-radius: 0 8px 8px 0 !important;
  color: rgba(255,255,255,.7) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  padding: 14px 18px !important;
}
.woocommerce-cart .woocommerce-message { border-left-color: #2a7a2a !important; }
.woocommerce-cart .woocommerce-info   { border-left-color: #2a4a7a !important; }

/* ── Esconde cross-sells / upsells na cart (já temos o mini-cart próprio) ── */
.woocommerce-cart .cross-sells { display: none !important; }

/* ── Skeleton de pagamento travado (fallback enquanto Blocks carrega) ── */
.wc-block-components-skeleton {
  background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%) !important;
  background-size: 200% 100% !important;
  animation: kdSkeleton 1.5s infinite !important;
  border-radius: 6px !important;
}
@keyframes kdSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── MOBILE cart ── */
@media (max-width: 768px) {
  .woocommerce-cart-form .shop_table.cart thead { display: none !important; }
  .woocommerce-cart-form .shop_table.cart tr.cart_item { display: grid !important; grid-template-columns: 70px 1fr auto !important; gap: 12px !important; align-items: center !important; padding: 12px 0 !important; }
  .woocommerce-cart-form .shop_table.cart td { padding: 4px 0 !important; }
  .cart-collaterals .cart_totals { padding: 18px !important; border-radius: 10px !important; }
}