/* woocommerce-overrides.css — Identidade Palatine nas páginas do WooCommerce.

   Organização:
   1. COMPONENTES (GLOBAL) — skins dos componentes do WooCommerce (botões,
      campos, dropdowns, avisos, tabelas, preços) mirando as classes ESTÁVEIS
      do plugin, sem amarrar a uma página. Valem em loja, produto, carrinho,
      checkout, minha-conta e pedido-recebido de uma vez. A identidade-base
      (cores, fontes, fundo escuro, títulos em Cinzel, links dourados) já vem
      do theme.json — por isso não é repetida aqui.
   2. PÁGINAS — só o que é layout/estrutura específica de cada tela.

   !important aparece com frequência porque o CSS do WooCommerce (Blocks e
   clássico) costuma carregar depois e com a mesma especificidade que o nosso. */


/* ════════════════════════════════════════════════════════════════════════════
   1. COMPONENTES (GLOBAL)
   ════════════════════════════════════════════════════════════════════════════ */

/* Garantia de fundo escuro em toda página WC (reforça o theme.json) */
body.woocommerce-page,
body.woocommerce-account,
body.woocommerce-cart,
body.woocommerce-checkout {
  background-color: var(--color-bg-dark);
  color: var(--color-text-primary-dark);
}

/* Hero de fundo: Carrinho, Checkout, Loja, Minha Conta, Painel, Política de
   Reembolso e Privacidade — mesma imagem do login, fixada no topo do
   viewport. Diferente do login (onde a imagem fica inteira), aqui o degradê
   vai até opaco (var(--color-bg-dark) sem transparência) a ~55% da altura do
   viewport, então a imagem desaparece por completo e não distrai do
   conteúdo. background-attachment: fixed evita position:relative no body,
   que quebraria os dropdowns select2. */
body.palatine-hero-page {
  background-image:
    linear-gradient(to bottom, oklch(11% 0.015 302 / 0.45) 0%, var(--color-bg-dark) 55%),
    radial-gradient(ellipse at center top, oklch(76% 0.14 80 / 0.06) 0%, transparent 60%),
    url('../images/cursos-detail-concept.png');
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
}

/* Título da página (bloco "Post Title" do template padrão) — o preset "huge"
   do Gutenberg deixa Carrinho/Checkout/Loja/Minha Conta/Políticas bem maiores
   que os títulos do resto do site. Unifica com o tamanho usado em "Pedido
   recebido" (.wc-block-order-confirmation-status h1, abaixo). */
body.palatine-hero-page .wp-block-post-title {
  font-size: var(--text-3xl) !important;
}

/* Títulos de etapa do checkout e labels de totais em Cinzel (não são <h>, então
   o theme.json não os alcança). */
.wc-block-components-checkout-step__title,
.wc-block-components-totals-item__label {
  font-family: var(--font-serif);
}

/* ── Botões: cor/forma únicas para todo CTA (clássico + Blocks + avisos) ──────
   `background-image: none` neutraliza o gradiente que o .wp-element-button (TT4)
   aplica só no fundo. O tamanho (padding) é tratado logo abaixo, pois varia. */
.woocommerce .button,
.woocommerce button[type="submit"],
.woocommerce input[type="submit"],
.woocommerce-Button,
.wc-block-cart__submit-button.wc-block-components-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-notice-banner__content a.button,
.wc-block-components-notice-banner__content a.wp-element-button,
.wc-block-components-notice-banner__content a.wc-forward,
.wc-block-components-notice-banner:is(.is-error, .is-success, .is-info, .is-warning) .wc-block-components-notice-banner__content a {
  background-color: var(--color-gold) !important;
  background-image: none !important;
  border: 1px solid var(--color-gold) !important;
  color: var(--color-bg-dark) !important;
  font-family: var(--font-serif);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--text-sm);
  line-height: 1.2;
  border-radius: var(--radius-sm) !important;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.woocommerce .button:hover,
.woocommerce button[type="submit"]:hover,
.woocommerce input[type="submit"]:hover,
.woocommerce-Button:hover,
.wc-block-cart__submit-button.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-notice-banner__content a.button:hover,
.wc-block-components-notice-banner__content a.wp-element-button:hover,
.wc-block-components-notice-banner:is(.is-error, .is-success, .is-info, .is-warning) .wc-block-components-notice-banner__content a:hover {
  background-color: var(--color-gold-hover) !important;
  border-color: var(--color-gold-hover) !important;
  color: var(--color-bg-dark) !important;
}
/* Tamanho dos botões clássicos */
.woocommerce .button,
.woocommerce button[type="submit"],
.woocommerce input[type="submit"],
.woocommerce-Button {
  padding: 0.8rem 1.6rem !important;
}
/* Botão dentro de um aviso (ex.: "Ver carrinho", "Ver produtos"): menor */
.wc-block-components-notice-banner__content a.button,
.wc-block-components-notice-banner__content a.wp-element-button,
.wc-block-components-notice-banner__content a.wc-forward,
.wc-block-components-notice-banner:is(.is-error, .is-success, .is-info, .is-warning) .wc-block-components-notice-banner__content a {
  padding: 0.45rem 1rem !important;
  font-size: var(--text-xs);
}

/* ── Campos dos Blocks (checkout/carrinho) ─────────────────────────────────── */
.wc-block-components-text-input input,
textarea.wc-block-components-textarea,
.wc-block-components-select select,
.wc-blocks-components-select__select,
.wc-block-components-combobox input {
  background-color: var(--color-bg-dark) !important;
  border-color: var(--color-border-dark) !important;
  color: var(--color-text-primary-dark) !important;
  border-radius: var(--radius-sm) !important;
}
.wc-block-components-text-input input::placeholder,
textarea.wc-block-components-textarea::placeholder {
  color: var(--color-text-muted-dark);
}
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-blocks-components-select__select:focus {
  border-color: var(--color-gold) !important;
}
/* Autofill do Chrome ignora background-color; só o box-shadow inset sobrescreve. */
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input input:-webkit-autofill:focus,
.wc-block-components-text-input input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--color-text-primary-dark);
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-dark) inset;
  box-shadow: 0 0 0 1000px var(--color-bg-dark) inset;
  caret-color: var(--color-text-primary-dark);
  transition: background-color 5000s ease-in-out 0s;
}
/* Rótulo flutuante: o WooCommerce desenha um "recorte" claro sobre a borda —
   alinhamos esse recorte ao fundo do painel (surface). */
.wc-block-components-text-input > label,
.wc-block-components-select > label,
.wc-blocks-components-select__label {
  background-color: var(--color-surface-dark);
  color: var(--color-text-muted-dark);
}

/* ── Campos clássicos (minha-conta, formulários WC clássicos) ────────────────
   Os Blocks (acima) não ficam sob .woocommerce, então as duas regras não
   colidem — e só aqui aplicamos padding (o Blocks usa o seu próprio p/ o
   rótulo flutuante). */
.woocommerce .input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select {
  background-color: var(--color-bg-dark) !important;
  border: 1px solid var(--color-border-dark) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-text-primary-dark) !important;
  padding: 0.8rem 1rem !important;
  color-scheme: dark;
}
.woocommerce .input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  border-color: var(--color-gold) !important;
  outline: none;
}
.woocommerce .input-text::placeholder {
  color: var(--color-text-muted-dark);
}

/* ── Dropdowns País/Estado dos Blocks ──────────────────────────────────────
   O fundo/borda do campo ficam no __container (o <select> interno é
   transparente). color-scheme: dark deixa o menu nativo aberto escuro. */
.wc-blocks-components-select,
.wc-blocks-components-select__container {
  background-color: var(--color-bg-dark) !important;
  border-color: var(--color-border-dark) !important;
  color: var(--color-text-primary-dark);
}
.wc-blocks-components-select__container:focus-within {
  border-color: var(--color-gold) !important;
}
.wc-blocks-components-select__select,
.wc-block-components-select select {
  color-scheme: dark;
}
.wc-blocks-components-select__select option,
.wc-block-components-select select option {
  background-color: var(--color-surface-dark);
  color: var(--color-text-primary-dark);
}
.wc-blocks-components-select__expand {
  fill: var(--color-text-secondary-dark);
}

/* ── Avisos / mensagens ──────────────────────────────────────────────────────
   Banner dos Blocks (Pedidos/Métodos: .wc-block-components-notice-banner) e
   mensagens clássicas (Assinaturas: .woocommerce-message/.woocommerce-info/
   .woocommerce-error) compartilham a mesma identidade: fundo
   --color-surface-dark, acento lateral de 3px por tipo, ícone à esquerda (SVG
   recolorido nos Blocks; mask em currentColor nas clássicas) e texto
   secundário. */
.wc-block-components-notice-banner,
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  background-color: var(--color-surface-dark) !important;
  border: 1px solid var(--color-border-dark) !important;
  border-left-width: 3px !important;
  border-radius: var(--radius-md) !important;
  color: var(--color-text-secondary-dark) !important;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.wc-block-components-notice-banner__content {
  color: var(--color-text-secondary-dark) !important;
}

/* Mensagens clássicas: troca o ícone padrão do WC core (fonte de ícones,
   position: absolute) por um ícone em mask igual ao SVG dos avisos dos
   Blocks, e desfaz o float do botão "Ver produtos". */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
  position: relative;
  padding: var(--space-sm) var(--space-sm) var(--space-sm) calc(var(--space-sm) + 24px + var(--space-xs)) !important;
  list-style: none;
}
.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
  content: "" !important;
  position: absolute !important;
  top: var(--space-sm);
  left: var(--space-sm);
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--notice-icon) center / contain no-repeat;
  mask: var(--notice-icon) center / contain no-repeat;
}
.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button {
  float: right !important;
  padding: 0.45rem 1rem !important;
  font-size: var(--text-xs) !important;
}

/* Sucesso (verde) */
.wc-block-components-notice-banner.is-success,
.woocommerce-message {
  border-left-color: var(--color-green) !important;
  --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' fill='%23000'/%3E%3C/svg%3E");
}
.wc-block-components-notice-banner.is-success svg { fill: var(--color-green); }

/* Informação (dourado) */
.wc-block-components-notice-banner.is-info,
.woocommerce-info {
  border-left-color: var(--color-gold) !important;
  --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z' fill='%23000'/%3E%3C/svg%3E");
}
.wc-block-components-notice-banner.is-info svg { fill: var(--color-gold); }

/* Erro (vermelho) */
.wc-block-components-notice-banner.is-error,
.woocommerce-error {
  border-left-color: oklch(65% 0.18 28) !important;
  --notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z' fill='%23000'/%3E%3C/svg%3E");
}
.wc-block-components-notice-banner.is-error svg { fill: oklch(65% 0.18 28); }

/* ── Tabelas (pedidos, downloads, assinaturas, detalhes do pedido) ─────────── */
.woocommerce table.shop_table,
.woocommerce-orders-table,
.wc-block-order-confirmation-totals__table {
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  border-collapse: separate;
  border-spacing: 0;
  color: var(--color-text-secondary-dark);
  width: 100%;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-orders-table th,
.woocommerce-orders-table td,
.wc-block-order-confirmation-totals__table th,
.wc-block-order-confirmation-totals__table td {
  border-color: var(--color-border-dark) !important;
  background-color: transparent !important;
}

/* ── Preços e textos de apoio ──────────────────────────────────────────────── */
.woocommerce-Price-amount,
.wc-block-components-totals-item__value,
.wc-block-components-product-price {
  color: var(--color-text-primary-dark);
}
.wc-block-components-totals-item,
.wc-block-components-product-metadata,
.wc-block-cart-item__product-metadata {
  color: var(--color-text-secondary-dark);
}

/* ── Badge de quantidade no resumo do pedido (número sobre a imagem) ────────── */
.wc-block-components-order-summary-item__quantity {
  background-color: var(--color-gold) !important;
  color: var(--color-bg-dark) !important;
  border-color: var(--color-surface-dark) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. PÁGINAS (layout/estrutura específica)
   ════════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   Carrinho & Checkout (Blocks) — cards das colunas
   ────────────────────────────────────────────────────────────────────────── */

/* Painel direito: card único (Resumo do pedido / Total no carrinho). */
.wp-block-woocommerce-cart .wc-block-cart-items,
.wp-block-woocommerce-cart .wc-block-components-sidebar,
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* .wc-block-cart-items é uma <table>: o WooCommerce define border-collapse:
   collapse com !important depois do nosso CSS — por isso o card não aparecia. */
.wp-block-woocommerce-cart .wc-block-cart-items {
  background-color: var(--color-surface-dark) !important;
  border: 1px solid var(--color-border-dark) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-md) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.wp-block-woocommerce-cart .wc-block-cart-items th,
.wp-block-woocommerce-cart .wc-block-cart-items td {
  background-color: transparent !important;
}

/* O WooCommerce dá fundo branco próprio à variante "is-large" do resumo de
   itens — sem isso, sobra um "card dentro do card" no painel direito. */
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-checkout-order-summary__content,
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar .wc-block-components-order-summary {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Coluna esquerda do checkout: o card vai em .wc-block-checkout__form (e não em
   .wc-block-checkout__main, que tem o padding-right reservado p/ a coluna
   direita — senão o card "encosta" no painel direito). */
.wp-block-woocommerce-checkout .wc-block-checkout__form {
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* "País" (BR) vem após Nome/Sobrenome e fica colado; o wrapper do país não
   recebe o margin-top que os demais campos ganham do WooCommerce. */
.wc-block-components-address-form__country {
  margin-top: 0.75rem !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Minha Conta (template clássico, /minha-conta) — autenticação + painel
   Espelha a identidade do wp-login.php.
   ────────────────────────────────────────────────────────────────────────── */

/* Telas de autenticação (deslogado, ou esqueci/redefinir senha mesmo
   logado): card escuro centralizado */
body.woocommerce-account:not(.logged-in) .woocommerce,
body.woocommerce-account-auth .woocommerce {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-sm) var(--space-xxl);
}
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register,
body.woocommerce-account .woocommerce-ResetPassword {
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 48px oklch(10% 0.01 302 / 0.7);
  padding: var(--space-md);
  margin-top: var(--space-sm);
}

/* Oculta o título da página ("Minha conta") nas telas de login (deslogado)
   e esqueci/redefinir senha; o card traz seu próprio texto, como no
   wp-login.php. */
body.woocommerce-account:not(.logged-in) .wp-block-post-title,
body.woocommerce-account:not(.logged-in) .entry-title,
body.woocommerce-account-auth .wp-block-post-title,
body.woocommerce-account-auth .entry-title {
  display: none;
}

/* Rótulos uppercase (exceto checkbox). Descendente para alcançar o label
   dentro do .label-row. */
body.woocommerce-account .woocommerce form .form-row label:not(.woocommerce-form__label-for-checkbox) {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--text-sm);
  margin-bottom: 0.4rem;
  color: var(--color-text-secondary-dark);
}
body.woocommerce-account .woocommerce form .input-text {
  width: 100%;
}

/* Cabeçalho/footer/links do card de login (template form-login.php) */
body.woocommerce-account .login-header {
  text-align: center;
  margin-bottom: var(--space-md);
}
body.woocommerce-account .login-title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-text-primary-dark);
  margin: 0 0 0.35rem;
  border-bottom: none;
  padding-bottom: 0;
}
body.woocommerce-account .login-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-muted-dark);
  line-height: 1.4;
  margin: 0;
}
body.woocommerce-account .label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
body.woocommerce-account .label-row label {
  margin-bottom: 0.4rem;
}
body.woocommerce-account .forgot-link {
  font-size: var(--text-xs);
  color: var(--color-text-muted-dark);
  text-transform: none;
  letter-spacing: normal;
}
body.woocommerce-account .forgot-link:hover {
  color: var(--color-gold);
}
body.woocommerce-account .login-footer {
  text-align: center;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-dark);
}
body.woocommerce-account .login-footer p {
  font-size: var(--text-sm);
  color: var(--color-text-muted-dark);
  margin: 0;
}
body.woocommerce-account .login-footer a {
  color: var(--color-gold);
  font-weight: 500;
}
body.woocommerce-account .login-footer a:hover {
  color: var(--color-gold-hover);
}

/* "Lembre-me" inline + botão de submit em largura total (telas de auth) */
body.woocommerce-account .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted-dark);
}
body.woocommerce-account .woocommerce-form-login__rememberme input {
  width: 15px;
  height: 15px;
  accent-color: var(--color-gold);
}
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register__submit,
body.woocommerce-account .woocommerce-ResetPassword .button {
  width: 100%;
  display: block;
}

/* "Esqueci a senha": cabeçalho injetado via filtro vem em <span>; força bloco.
   E os campos (rótulo/input/botão) ocupam toda a largura — o WooCommerce dá
   width:47% à primeira linha (.form-row-first). */
body.woocommerce-account .woocommerce-ResetPassword .login-header,
body.woocommerce-account .woocommerce-ResetPassword .login-title,
body.woocommerce-account .woocommerce-ResetPassword .login-subtitle {
  display: block;
}
body.woocommerce-account .woocommerce-ResetPassword .form-row {
  width: 100%;
  float: none;
  margin-left: 0;
}
body.woocommerce-account .woocommerce-LostPassword {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
}

/* Ícone "mostrar senha" e espaço reservado p/ ele não cobrir o texto */
body.woocommerce-account .woocommerce .password-input .show-password-input {
  color: var(--color-text-muted-dark);
}
body.woocommerce-account .woocommerce .password-input .show-password-input:hover {
  color: var(--color-gold);
}
body.woocommerce-account .woocommerce .password-input .input-text {
  padding-right: 2.8rem !important;
}

/* Painel logado: navegação lateral */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface-dark);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  /* Há espaço em branco entre </a> e </li> no template; sem isto esse nó de
     texto vira uma linha vazia e estica a célula. */
  line-height: 0;
  border-bottom: 1px solid var(--color-border-dark);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: none;
}
body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.8rem 1rem;
  line-height: 1.4;
  color: var(--color-text-secondary-dark);
}
body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--color-gold);
  background-color: var(--color-surface-dark-hover);
}

/* Painel logado: conteúdo. As telas remanescentes da Minha Conta (endereços,
   detalhes da conta, adicionar método de pagamento, ver pedido/assinatura)
   ganham um card escuro único envolvendo campos e botão, no mesmo padrão das
   demais telas. */
body.woocommerce-account .woocommerce-MyAccount-content {
  /* O WooCommerce flutua esta coluna em width:68%; sem border-box o padding/
     borda do card somam à largura e a coluna invade a navegação lateral. */
  box-sizing: border-box;
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--color-text-secondary-dark);
}
body.woocommerce-account .woocommerce-Address address {
  color: var(--color-text-secondary-dark);
}

/* "Adicionar método de pagamento" (/minha-conta/add-payment-method).
   O WooCommerce monta caixas aninhadas com fundos claros próprios, várias via
   seletores com ID (#payment ...) — daí a necessidade de !important e de
   "achatar" os filhos. O card vem do .woocommerce-MyAccount-content; aqui só
   removemos os fundos/bordas/setas próprios do WooCommerce. */
body.woocommerce-account #payment {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
}
/* ul, li e payment_box ficam transparentes (sem caixa própria nem a "seta"
   ::before do WooCommerce), herdando o card do conteúdo. */
body.woocommerce-account #payment ul.payment_methods {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 var(--space-md) !important;
  list-style: none !important;
}
body.woocommerce-account #payment ul.payment_methods li {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.woocommerce-account #payment .payment_box {
  background-color: transparent !important;
  border: none !important;
  margin: var(--space-sm) 0 0 !important;
  padding: 0 !important;
  color: var(--color-text-secondary-dark);
}
body.woocommerce-account #payment .payment_box::before {
  display: none !important;
}
body.woocommerce-account #payment .woocommerce-PaymentBox fieldset {
  border: none;
  padding: 0;
  margin-top: 0;
}
body.woocommerce-account #payment .woocommerce-PaymentBox a {
  color: var(--color-gold);
}
body.woocommerce-account #payment .woocommerce-PaymentBox .testmode-info {
  color: var(--color-text-muted-dark);
  font-size: var(--text-sm);
}

/* "Detalhes da conta": fieldset "Alteração de senha" */
body.woocommerce-account .woocommerce fieldset {
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md) var(--space-md);
  margin-top: var(--space-md);
}
body.woocommerce-account .woocommerce fieldset legend {
  padding: 0 0.5rem;
  font-family: var(--font-serif);
  color: var(--color-text-secondary-dark);
}
body.woocommerce-account .woocommerce em {
  color: var(--color-text-muted-dark);
}

/* Dropdowns País/Estado da conta usam select2 (substitui o <select> nativo).
   O painel de opções é anexado ao <body>, por isso fica sob body.woocommerce-account. */
body.woocommerce-account .select2-container--default .select2-selection--single {
  background-color: var(--color-bg-dark);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  height: 48px;
  display: flex;
  align-items: center;
}
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--color-text-primary-dark);
  line-height: normal;
  padding-left: 0.6rem;
}
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--color-text-muted-dark);
}
body.woocommerce-account .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}
body.woocommerce-account .select2-dropdown {
  background-color: var(--color-surface-dark);
  border: 1px solid var(--color-border-dark);
  color: var(--color-text-primary-dark);
}
body.woocommerce-account .select2-results__option {
  color: var(--color-text-secondary-dark);
  background-color: transparent;
}
body.woocommerce-account .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--color-gold);
  color: var(--color-bg-dark);
}
body.woocommerce-account .select2-search--dropdown .select2-search__field {
  background-color: var(--color-bg-dark);
  border: 1px solid var(--color-border-dark);
  color: var(--color-text-primary-dark);
}

/* ──────────────────────────────────────────────────────────────────────────
   Página de produto (variável)
   ────────────────────────────────────────────────────────────────────────── */

/* Dropdown de seleção de plano (variação) */
body.single-product table.variations select,
body.single-product .variations select {
  background-color: var(--color-bg-dark) !important;
  border: 1px solid var(--color-border-dark) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-text-primary-dark) !important;
  padding: 0.7rem 0.9rem !important;
  min-width: 220px;
  color-scheme: dark;
}
body.single-product .variations select:focus {
  border-color: var(--color-gold) !important;
  outline: none;
}
body.single-product .variations select option {
  background-color: var(--color-surface-dark);
  color: var(--color-text-primary-dark);
}
body.single-product .reset_variations {
  color: var(--color-text-muted-dark);
  font-size: var(--text-sm);
}
body.single-product .reset_variations:hover {
  color: var(--color-gold);
}

/* Zoom (magnify) da imagem: garantia por CSS (o remove_theme_support nem sempre
   pega). O pointer-events:none também desativa o clique de ampliar (lightbox),
   adequado p/ a imagem-logo. */
body.single-product .woocommerce-product-gallery__wrapper .zoomImg {
  display: none !important;
}
body.single-product .woocommerce-product-gallery__image img {
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   "Pedido recebido" (order confirmation — Blocks)
   theme.json já aplica Cinzel/Outfit/fundo; aqui só harmonizamos os TAMANHOS
   de título (o bloco mistura h1 enorme, h2 24px inline e h2 sem tamanho).
   ────────────────────────────────────────────────────────────────────────── */
.wc-block-order-confirmation-status h1 {
  font-size: var(--text-3xl) !important;
  margin-bottom: var(--space-sm);
}
.wc-block-order-confirmation-status p {
  color: var(--color-text-secondary-dark);
}
.wc-block-order-confirmation-totals-wrapper h2,
.wc-block-order-confirmation-billing-wrapper h2 {
  font-size: var(--text-2xl) !important;
  margin-bottom: var(--space-sm);
}
.wc-block-order-confirmation-summary-list-item__key {
  color: var(--color-text-muted-dark);
  font-weight: 600;
}
.wc-block-order-confirmation-summary-list-item__value {
  color: var(--color-text-primary-dark);
}
.wc-block-order-confirmation-billing-address address {
  font-style: normal;
  color: var(--color-text-secondary-dark);
}