/* ==========================================================================
   DFELX — WooCommerce (reskin)
   Loja e Produto (archive-product.php / single-product.php) usam markup
   100% próprio — já cobertos pelo design system em style.css. Este arquivo
   só existe pro que ainda roda com o markup padrão do WooCommerce (não há
   referência estática/aprovada pelo cliente pra essas telas ainda):
   Carrinho, Checkout, Minha Conta e o bloco nativo de Avaliações do
   produto. Aqui a régua é outra: herdar cores/tipografia/tokens do tema
   por cima das classes padrão do WooCommerce, sem reconstruir a estrutura
   — pra não quebrar nada do JS de carrinho/cupom/checkout, que depende
   dessas classes.
   ========================================================================== */

.dfelx-wc-notices {
  padding-top: 2rem;
}

/* -- Carrinho/Checkout: blocos nativos do WooCommerce (React/Store API) —
   cartão escuro consistente com o resto do site; o miolo (formulário,
   tabela, resumo) é o padrão do WooCommerce, só recolorido abaixo. */
.dfelx-wc-blocks-card {
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--slate-800);
  color: var(--slate-50);
}

@media (min-width: 768px) {
  .dfelx-wc-blocks-card {
    padding: 2.5rem;
  }
}

/* Grid de produtos que o próprio WooCommerce injeta no carrinho vazio
   ("Novidade na loja") — bloco nativo (Product New/Best Sellers), CSS
   próprio de fábrica (fundo branco, texto rosa). Reskin pro design
   system do site, no espírito de .product-card (sem reescrever a
   estrutura, só herdando cor/tipografia por cima). */
.dfelx-wc-blocks-card .wc-block-grid__products {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.dfelx-wc-blocks-card .wc-block-grid__product {
  flex: 1 1 200px;
  max-width: none;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--slate-800-60);
  border-radius: 1rem;
  background: var(--slate-900);
  text-align: left;
}

.dfelx-wc-blocks-card .wc-block-grid__product-image {
  display: block;
  margin-bottom: 0.75rem;
}

.dfelx-wc-blocks-card .wc-block-grid__product-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.6rem;
}

.dfelx-wc-blocks-card .wc-block-grid__product-title {
  color: var(--slate-50);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  margin: 0 0 0.4rem;
}

.dfelx-wc-blocks-card .wc-block-grid__product-price {
  color: var(--emerald-400);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0 0 0.75rem;
}

.dfelx-wc-blocks-card .wc-block-grid__product .wp-block-button__link {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--dfelx-blue);
  color: var(--dfelx-navy);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.dfelx-wc-blocks-card .wc-block-grid__product .wp-block-button__link:hover {
  filter: brightness(1.1);
}

/* Labels flutuantes dos campos do Checkout (Nome, E-mail, País etc.) — o
   componente do WooCommerce assume página clara: o label nasce DENTRO da
   caixa branca do campo (cinza-escuro, legível ali) e, quando o campo é
   preenchido/focado, flutua pra CIMA da caixa — sobre o nosso cartão
   escuro, onde precisa de uma cor clara. !important: o CSS de fábrica do
   componente (branco a 60% de opacidade) tem a mesma especificidade e
   carrega depois em alguns casos, vencendo sem isto — mesma causa
   recorrente de outros ajustes de contraste. */
.dfelx-wc-blocks-card .wc-block-components-text-input label {
  color: var(--slate-500) !important;
}

.dfelx-wc-blocks-card .wc-block-components-text-input.is-active label {
  color: var(--dfelx-blue) !important;
}

/* Estado: quando o país tem lista de estados conhecida (Brasil tem), o
   campo troca de componente (combobox em vez do mesmo text-input dos
   outros campos, ver wc-cart-checkout-base-frontend.js) — label sempre
   visível acima da caixa, não flutua, por isso não tem estado
   ativo/inativo pra tratar separado como acima. */
.dfelx-wc-blocks-card .wc-block-components-state-input label,
.dfelx-wc-blocks-card .wc-block-components-select-input label {
  color: var(--dfelx-blue) !important;
}

/* Miniatura do produto distorcida no Carrinho e no Resumo do pedido — o
   WooCommerce só restringe a largura (48px / 100% da coluna) e deixa a
   altura livre, então qualquer foto que não seja perfeitamente quadrada
   nasce esticada/achatada. Fixa a proporção 1:1 com recorte (object-fit),
   igual ao .product-card__media do resto do site. */
.dfelx-wc-blocks-card .wc-block-components-order-summary-item__image img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}

.dfelx-wc-blocks-card .wc-block-cart-item__image img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
}

.dfelx-wc-blocks-card a {
  color: var(--dfelx-blue-light);
}

/* Botões dos blocos de Carrinho/Checkout ("Finalizar compra", "Finalizar
   pedido", +/- de quantidade etc.) — classe estável do pacote
   @woocommerce/blocks, diferente da classe .button do carrinho/checkout
   clássico (não usada aqui, ver comentário no topo do arquivo). */
.dfelx-wc-blocks-card .wc-block-components-button {
  background: var(--dfelx-blue);
  color: var(--dfelx-navy);
  border: none;
  /* !important: a ordem de carregamento entre o CSS do pacote
     @woocommerce/blocks e o nosso não é garantida (mesma especificidade,
     ambos plugin/tema enfileiram no mesmo hook) — sem isto, o
     border-radius padrão do componente pode vencer dependendo da ordem. */
  border-radius: 8px !important;
}

.dfelx-wc-blocks-card .wc-block-components-button:hover {
  background: var(--dfelx-blue);
  color: var(--dfelx-navy);
  filter: brightness(1.1);
}

/* Selo de quantidade ("× 2") ao lado do produto no resumo do pedido — o
   componente pinta o próprio fundo a partir da cor do texto
   (currentColor), então só mudar o texto pra --dfelx-navy deixaria o
   fundo escuro também (navy sobre navy); por isso fixa os dois. */
.dfelx-wc-blocks-card .wc-block-components-product-badge {
  background: var(--dfelx-blue-light);
  color: var(--dfelx-navy);
}

/* Bolinha de quantidade no canto da miniatura do produto (Resumo do
   pedido, Carrinho e Checkout) — mesmo problema: fundo em currentColor
   (herda nosso branco) + número forçado em branco pelo próprio
   WooCommerce = número invisível sobre fundo quase branco. */
.dfelx-wc-blocks-card .wc-block-components-order-summary-item__quantity {
  background: var(--dfelx-blue-light);
}

.dfelx-wc-blocks-card .wc-block-components-order-summary-item__quantity span {
  color: var(--dfelx-navy);
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
.woocommerce-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  list-style: none;
  font-size: 0.9rem;
  background: var(--slate-800-40);
  border: 1px solid var(--dfelx-blue-25);
  color: var(--slate-100);
}

.woocommerce-error {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(127, 29, 29, 0.25);
}

.woocommerce-message .button,
.woocommerce-error .button,
.woocommerce-info .button {
  order: 2;
}

/* -- Base: cor herdada em qualquer bloco WooCommerce sem estilo próprio -- */

.woocommerce,
.woocommerce-account {
  color: var(--slate-300);
  font-size: 0.9rem;
  line-height: 1.7;
}

.woocommerce table,
.woocommerce-account table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
}

.woocommerce th,
.woocommerce td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--slate-800-60);
  text-align: left;
  vertical-align: middle;
}

.woocommerce th {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-400);
}

/* :not() pros botões/links próprios do tema (.btn-dfelx-*, cards de
   produto, ícone de carrinho) — sem isso, esta regra genérica (pensada só
   pro miolo padrão do Carrinho/Checkout/Minha Conta/Avaliações) vazava pra
   eles também, porque o WordPress bota a classe "woocommerce" no <body>
   de toda página da Loja/Produto, não só nessas. Deixava o texto do botão
   "Adicionar" ilegível (azul claro sobre fundo azul). :not(.button)
   também exclui os botões de ação de Minha Conta/Pedidos ("Ver", "Pagar",
   "Cancelar" — todos <a class="... button ...">), que devem ficar navy
   (ver .woocommerce a.button abaixo) e não azul-claro. */
.woocommerce a:not([class*='btn-dfelx-']):not([class*='product-card__']):not([class*='site-header__']):not(.added_to_cart):not(.button) {
  color: var(--dfelx-blue-light);
}

.woocommerce a:not([class*='btn-dfelx-']):not([class*='product-card__']):not([class*='site-header__']):not(.added_to_cart):not(.button):hover {
  color: var(--dfelx-blue);
}

/* -- Inputs / selects / textareas ---------------------------------------- */

.woocommerce input.input-text,
.woocommerce input[type='text'],
.woocommerce input[type='email'],
.woocommerce input[type='tel'],
.woocommerce input[type='password'],
.woocommerce input[type='number'],
.woocommerce select,
.woocommerce textarea {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--slate-800-60);
  border-radius: 0.6rem;
  background: var(--slate-950-60);
  color: var(--slate-50);
  font-family: var(--font-sans);
  font-size: 0.9rem;
}

.woocommerce input.input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus {
  outline: none;
  border-color: var(--dfelx-blue);
}

.woocommerce label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--slate-100);
  font-size: 0.85rem;
  font-weight: 600;
}

.woocommerce .form-row {
  margin-bottom: 1rem;
}

/* -- Botões: mesma linguagem visual de .btn-dfelx-primary ---------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  background: var(--dfelx-blue);
  color: var(--dfelx-navy);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover {
  filter: brightness(1.1);
}

/* -- Carrinho ------------------------------------------------------------- */

.woocommerce-cart-form__cart-item img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.6rem;
  object-fit: cover;
}

.woocommerce td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--slate-800-40);
  color: var(--slate-100);
  text-decoration: none;
}

.woocommerce .quantity .qty {
  width: 4.5rem;
}

.cart-collaterals,
.woocommerce-cart-form {
  margin-bottom: 2rem;
}

.cart_totals {
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--slate-800-40);
  border: 1px solid var(--dfelx-blue-25);
}

.cart_totals h2 {
  margin-top: 0;
  color: var(--slate-50);
}

.woocommerce-shipping-calculator .shipping-calculator-button {
  color: var(--dfelx-blue-light);
}

/* -- Checkout -------------------------------------------------------------- */

.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.woocommerce-checkout .col-1,
.woocommerce-checkout .col-2 {
  flex: 1 1 320px;
}

#order_review,
.woocommerce-checkout-review-order {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 1rem;
  background: var(--slate-800-40);
  border: 1px solid var(--dfelx-blue-25);
}

.woocommerce-checkout-payment {
  margin-top: 1.5rem;
}

.woocommerce-checkout-payment ul.payment_methods {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.woocommerce-checkout-payment ul.payment_methods li {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--slate-800-60);
}

.woocommerce-checkout-payment .payment_box {
  margin-top: 0.5rem;
  padding: 1rem;
  border-radius: 0.6rem;
  background: var(--slate-950-60);
  font-size: 0.85rem;
}

/* -- Minha Conta ------------------------------------------------------------ */

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.woocommerce-MyAccount-navigation li a {
  display: inline-flex;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  background: var(--slate-800-40);
  color: var(--slate-100);
  text-decoration: none;
  font-size: 0.85rem;
}

.woocommerce-MyAccount-navigation li.is-active a {
  background: var(--dfelx-blue);
  /* !important: a regra genérica ".woocommerce a:not(...)" (cor de link
     azul-claro) acumula vários :not() e acaba com especificidade maior
     que esta aqui, vencendo por padrão — mesma causa dos botões "Ver
     pedido" corrigidos antes. */
  color: var(--dfelx-navy) !important;
  font-weight: 600;
}

.woocommerce-MyAccount-content {
  max-width: 100%;
}

.woocommerce-orders-table__cell-order-status mark {
  background: none;
  color: inherit;
  font-weight: 600;
}

/* Endereços de cobrança/entrega em /minha-conta/view-order/ — sem o CSS
   padrão do WooCommerce (removido, ver topo do arquivo), as duas colunas
   nativas (.woocommerce-columns--addresses) perdiam o layout e
   empilhavam espremidas numa só coluna estreita. Uma coluna por linha,
   ocupando a largura toda, no mobile; duas colunas iguais lado a lado a
   partir do desktop. */
.woocommerce-columns--addresses {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0 0 1.5rem;
}

.woocommerce-columns--addresses .woocommerce-column {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .woocommerce-columns--addresses .woocommerce-column {
    flex: 1 1 calc(50% - 0.75rem);
  }
}

/* -- Login / Esqueci a senha: formulário estreito e centralizado -------- */

body.woocommerce-account .woocommerce > h2 {
  text-align: center;
}

/* Mensagem introdutória do "Esqueci a senha" — só o <p> sem classe (os
   demais <p> dentro do form são as linhas de campo, essas continuam
   alinhadas à esquerda normalmente). */
body.woocommerce-account .woocommerce-ResetPassword > p:not([class]) {
  text-align: center;
}

body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-ResetPassword {
  max-width: 500px;
  width: 100%;
  margin-inline: auto;
}

/* -- Campo de senha: ícone de mostrar/esconder (injetado via JS, ver
   scripts.js) — antes só existia o controle nativo do navegador, sem
   rótulo nenhum, impossível de identificar pra que servia. */
.dfelx-password-field {
  position: relative;
  display: block;
  line-height: 0;
}

.dfelx-password-field input[type='password'],
.dfelx-password-field input[type='text'] {
  padding-right: 2.75rem !important;
  margin: 0 !important;
}

.dfelx-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--slate-500);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.dfelx-password-toggle:hover {
  color: var(--slate-900);
}

/* Esconde o controle nativo do Safari (o "botão" que aparecia fora do
   campo, sem rótulo, que deu origem a este ajuste todo) — sem isso ele
   continua desenhado por cima/ao lado do nosso próprio ícone. Chrome e
   Firefox não têm equivalente visível por padrão, nada a esconder ali. */
input[type='password']::-webkit-credentials-auto-fill-button,
input[type='password']::-webkit-strong-password-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}

/* O próprio woocommerce.js também injeta um botão de mostrar/esconder
   senha (.show-password-input, via jQuery, em toda página com esse
   script carregado) — sem estilo nenhum porque removemos o CSS padrão
   do WooCommerce, aparecia solto fora do campo, duplicado com o nosso
   (.dfelx-password-toggle, ver scripts.js). Escondido: o nosso já cobre
   a mesma função. */
.show-password-input {
  display: none !important;
}

/* -- Avaliações do produto (comment_form nativo do WordPress/WooCommerce) - */

.dfelx-product-reviews #reviews {
  width: 100%;
}

.dfelx-product-reviews .commentlist {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.dfelx-product-reviews .commentlist li {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--slate-800-60);
}

.dfelx-product-reviews .star-rating {
  color: var(--star-gold);
}

.dfelx-product-reviews .comment-form-rating select {
  display: none;
}

.dfelx-product-reviews p.stars a {
  color: var(--star-gold);
  text-decoration: none;
}

/* -- Tela de pagamento Pix (plugin WooCommerce Mercado Pago) ------------- */

.mp-details-title {
  color: var(--dfelx-blue);
}