/*
Theme Name: éon5 2026
Theme URI: https://eon5.aloj.com.br
Description: Tema filho do Twenty Twenty-Five com a identidade da éon5 (dourado #f8d246 sobre escuro #1f1d12, display Bricolage Grotesque). Existe porque a loja rodava no tema PADRAO do WordPress e parecia outro site — o lojista apontou isso.
Author: Aloj
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.6
License: GPL-2.0-or-later
Text Domain: eon5-2026
*/

:root{
  --eon-gold:#f8d246;
  --eon-ink:#1f1d12;
  --eon-cream:#fffbf2;
  --eon-cream-2:#fff5e0;
  --eon-line:rgba(31,29,18,.14);
  --eon-radius:18px;
}

body{
  background:var(--eon-cream)!important;
  color:var(--eon-ink)!important;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.wp-block-site-title,.wp-block-post-title,.woocommerce-loop-product__title,.wc-block-components-product-name{
  font-family:'Bricolage Grotesque',system-ui,sans-serif!important;
  letter-spacing:-.015em;
}
a{ color:var(--eon-ink); text-underline-offset:3px; }
a:hover{ color:#8a6d12; }

/* TOPO: fundo escuro da marca, texto creme, dourado no hover */
header.wp-block-template-part, header.wp-block-template-part .wp-block-group, .wp-block-group.alignfull.has-background{
  background-color:var(--eon-ink)!important;
  color:var(--eon-cream)!important;
}
header.wp-block-template-part a, header .wp-block-navigation a{ color:var(--eon-cream)!important; text-decoration:none; font-weight:600; }
header.wp-block-template-part a:hover, header .wp-block-navigation a:hover{ color:var(--eon-gold); }
header .wp-block-site-title a{ font-family:'Bricolage Grotesque',system-ui,sans-serif!important; font-weight:800; letter-spacing:-.02em; color:var(--eon-cream)!important; }
.wp-block-navigation__responsive-container.is-menu-open{ background:var(--eon-ink); color:var(--eon-cream); }

/* BUSCA DE PRODUTO NO CABECALHO (2026-10-04). MEDIDO: a busca do WooCommerce FUNCIONAVA no
   servidor (`?s=vela&post_type=product` -> 200 com "Vela de Areia"), mas o cabecalho nao tinha
   NENHUM campo de busca — em 31 produtos e 7 categorias o cliente so' navegava por pilula de
   categoria. O bloco e' o `woocommerce/product-search` (o nativo do WooCommerce), entao o
   comportamento e a semantica (input `s` + `post_type=product`) sao os da plataforma, nao um
   campo improvisado. Aqui e' so' a APARENCIA, para o campo nao ficar branco-no-escuro. */
header .wp-block-woocommerce-product-search{ margin:0; }
header .wp-block-woocommerce-product-search form{ display:flex; gap:8px; align-items:center; margin:0; }
header .wp-block-woocommerce-product-search input[type=search]{
  background:var(--eon-cream)!important; color:var(--eon-ink)!important;
  border:0!important; border-radius:999px!important; padding:.5em .95em!important;
  min-width:200px; font-size:14px!important;
}
header .wp-block-woocommerce-product-search button{
  background:var(--eon-gold)!important; color:var(--eon-ink)!important; border:0!important;
  border-radius:999px!important; padding:.5em 1em!important; font-weight:700!important; font-size:14px!important;
  cursor:pointer;
}
/* No celular o grupo do cabecalho quebra linha; a busca ocupa a linha inteira para nao espremer
   o menu (G27: o menu de celular da loja precisa continuar funcionando). */
@media (max-width:720px){
  header .wp-block-woocommerce-product-search{ width:100%; }
  header .wp-block-woocommerce-product-search form{ width:100%; }
  header .wp-block-woocommerce-product-search input[type=search]{ min-width:0; width:100%; }
}

/* BOTOES: dourado da marca, pill, sem borda */
.wp-block-button__link,.wp-element-button,button.single_add_to_cart_button,.button.alt,
.wc-block-components-button,.wc-block-components-checkout-place-order-button{
  background:var(--eon-gold)!important;
  color:var(--eon-ink)!important;
  border:0!important;
  border-radius:999px!important;
  font-weight:700!important;
  padding:.72em 1.5em!important;
  transition:transform .15s ease, box-shadow .15s ease;
}
.wp-block-button__link:hover,.wp-element-button:hover,button.single_add_to_cart_button:hover,
.wc-block-components-button:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(31,29,18,.16); }
.woocommerce-loop-product__link .button{ display:none; } /* cartao limpo: compra na pagina do produto */

/* CARTAO DE PRODUTO */
ul.products li.product,.wc-block-product{
  background:#fff; border:1px solid var(--eon-line); border-radius:var(--eon-radius);
  padding:14px; overflow:hidden;
}
ul.products li.product img,.wc-block-components-product-image img{ border-radius:calc(var(--eon-radius) - 6px); }
.woocommerce-Price-amount,.wc-block-components-product-price{ font-weight:700; font-variant-numeric:tabular-nums; }
.woocommerce-Price-amount bdi{ color:var(--eon-ink); }

/* formularios e tabelas */
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  border:1px solid var(--eon-line)!important; border-radius:12px!important; padding:.7em .9em!important; background:#fff!important;
}
.wc-block-components-text-input input:focus,.wc-block-components-select:focus-within{ outline:2px solid var(--eon-gold); }

/* rodape */
footer.wp-block-template-part{ background-color:var(--eon-ink)!important; color:var(--eon-cream-2)!important; }
footer.wp-block-template-part a{ color:var(--eon-cream-2); }
footer.wp-block-template-part a:hover{ color:var(--eon-gold); }
/* RODAPE DA LOJA (2026-10-04): o rodape era o do TEMA PADRAO — "Patterns", "Themes",
   "Designed with WordPress" e oito links mortos `#`. Agora e' rodape da casa, no mesmo escuro do
   cabecalho, com contato real e links de politica (que aparecem so' quando publicados). */
footer.wp-block-group{ background-color:var(--eon-ink)!important; color:var(--eon-cream-2)!important; }
footer.wp-block-group a, footer.wp-block-group .wp-block-site-title a{ color:var(--eon-cream)!important; }
footer.wp-block-group a:hover{ color:var(--eon-gold)!important; }
footer.wp-block-group h3{ color:var(--eon-cream); margin:0; }
footer.wp-block-group .wp-block-list{ list-style:none; padding:0; margin:0; }
footer.wp-block-group .wp-block-list li{ margin:0 0 4px; }
.eon-politicas{ display:flex; flex-wrap:wrap; gap:16px; list-style:none; padding:0; margin:2px 0 0; font-size:14px; }
.eon-politicas li{ margin:0; }

/* ANTI-PADRAO "marquee" (detector da skill ux-review-impeccable): o CSS de blocos do WooCommerce
   deixa uma animacao HORIZONTAL INFINITA no placeholder de carregamento de preco
   (`.is-loading ... loading__animation`). Animacao que nunca para disputa atencao que nao ganhou.
   Aqui ela e' desligada; o estado de carregamento continua visivel por opacity, sem movimento. */
.is-loading::before, .is-loading::after,
.wc-block-components-product-price.is-loading::before,
.wc-block-components-product-price.is-loading::after,
.wc-block-grid__product-price.is-loading::before,
.wc-block-grid__product-price.is-loading::after{
  animation: none !important;
  background-image: none !important;
  opacity: .55 !important;
}

/* ------------------------------------------------------------------ ESTRUTURA DA LOJA
   Achados de direcao de arte (captura desktop + 390px), corrigidos aqui: grade densa, cards
   compactos, largura aproveitada e respiro entre a grade e o rodape. WooCommerce/Shopify usam
   grade densa; o tema padrao deixa 3 colunas altas com margens grandes. */
.wc-block-product-template, ul.products{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:22px !important;
  margin-bottom:34px !important;
}
@media (max-width:1000px){ .wc-block-product-template, ul.products{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; } }
@media (max-width:720px){ .wc-block-product-template, ul.products{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:14px !important; } }

/* A largura do card vem da TRILHA da grade, nao da regra por coluna do WooCommerce.
   O `li.product` da grade classica carrega `ul.products.columns-5 li.product{width:...}` (largura
   pensada para o layout flutuante ANTIGO). Como aqui a lista virou `display:grid`, essa largura
   brigava com a trilha: em "Produtos relacionados" o card ficava com 53px dentro de uma trilha de
   214px e a caixa de preco com 23px — o preco era espremido e cortado na vertical.
   Medido no DOM (nao "no olho"): card 53px -> preco 23px de largura, `scrollWidth > clientWidth`.
   Nao removo a grade densa (o lojista pediu): neutralizo o que sobra do layout antigo. */
ul.products li.product{ width:auto !important; max-width:none !important; float:none !important; margin:0 !important; }
/* O mesmo vale para a lista em bloco (.wc-block-product-template), que e' o caso REAL dos
   "Produtos relacionados": ela sai como `ul.wc-block-product-template.is-flex-container.columns-5`,
   e o Woo mantem `...columns-5 > li{ width:calc(20% - 1em) }` do layout flex antigo. Com a grade,
   20% da TRILHA vira um card de 63px e o preco e' cortado. A largura volta a ser da trilha.
   (O seletor anterior `ul.products li.product` nao pegava: essa `ul` nao tem a classe `products`.) */
.wc-block-product-template.is-flex-container > li{ width:auto !important; margin:0 !important; }

/* card compacto: a imagem ocupava o card inteiro e sobrava vazio interno */
.wc-block-product-template .wc-block-components-product-image img,
ul.products li.product img{ width:100%; height:190px; object-fit:cover; border-radius:12px; }
@media (max-width:720px){
  .wc-block-product-template .wc-block-components-product-image img,
  ul.products li.product img{ height:150px; }
}
.wc-block-components-product-name, .woocommerce-loop-product__title{ font-size:16px !important; line-height:1.25 !important; margin:10px 0 4px !important; }
.wc-block-components-product-price, .woocommerce-Price-amount{ font-size:15px !important; }

/* respiro antes do rodape (a grade encostava nele) */
.wc-block-product-template, ul.products{ padding-bottom:6px !important; }
footer.wp-block-template-part{ margin-top:44px !important; }

/* titulo de arquivo com peso de marca */
.wp-block-woocommerce-product-results-count, h1.wp-block-query-title, .woocommerce-products-header__title{
  font-family:'Bricolage Grotesque',system-ui,sans-serif !important; letter-spacing:-.02em;
}

/* introducao da loja (injetada no functions.php antes da grade) */
.eon-loja-intro{ max-width:62ch; margin:6px 0 26px; }
.eon-loja-intro h2{ font-size:clamp(22px,3vw,30px); margin:0 0 8px; }
.eon-loja-intro p{ margin:0; color:rgba(31,29,18,.78); line-height:1.55; }
/* CATEGORIAS: as 7 categorias existiam e o arquivo de cada uma renderizava, mas a loja nao linkava
   nenhuma — o cliente nao tinha como navegar 31 produtos. Pilulas com a contagem do WooCommerce. */
.eon-categorias{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 26px; }
.eon-cat{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
  background:#fff; border:1px solid var(--eon-line); color:var(--eon-ink); text-decoration:none;
  font-size:14px; font-weight:600; }
.eon-cat:hover{ border-color:var(--eon-gold); background:var(--eon-cream); }
.eon-cat-n{ font-size:12px; font-weight:700; color:rgba(31,29,18,.55); }

/* --------------------------------------------------- ESTRUTURA DA PAGINA DE PRODUTO
   Achados de direcao de arte (desktop + 390px): imagem pequena com metade da largura vazia,
   colunas desbalanceadas e a compra espremida (quantidade e botao na mesma linha estreita).
   Aqui: 50/50 ocupando o container, preco grande e botao de compra em largura total. */
.single-product .wp-block-columns{ align-items:flex-start; gap:48px; }
@media (min-width:900px){
  .single-product .wp-block-columns > .wp-block-column:first-child{ flex-basis:52% !important; }
  .single-product .wp-block-columns > .wp-block-column:last-child{ flex-basis:48% !important; }
}
.single-product .woocommerce-product-gallery img, .single-product .wp-block-woocommerce-product-image img{
  width:100%; height:auto; border-radius:var(--eon-radius);
}
/* preco com peso de decisao */
.single-product .price, .single-product .woocommerce-Price-amount,
.single-product .wc-block-components-product-price{ font-size:26px !important; font-weight:800 !important; line-height:1.2; }
/* compra: quantidade e botao em LINHAS distintas, botao ocupando a largura do bloco */
.single-product form.cart, .single-product .wp-block-woocommerce-add-to-cart-form form,
.single-product .wc-block-add-to-cart-with-options{
  display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:12px !important;
}
.single-product form.cart .quantity, .single-product .wc-block-components-quantity-selector{ align-self:flex-start !important; }
.single-product .single_add_to_cart_button, .single-product .wp-block-woocommerce-add-to-cart-form .wp-element-button,
.single-product .wc-block-add-to-cart-with-options .wc-block-components-button{
  width:100% !important; padding:1em 1.5em !important; font-size:17px !important; border-radius:999px !important;
}

/* --------------------------------------------------- CARRINHO/CHECKOUT (estrutura)
   Achados de direcao de arte com item NO carrinho (a captura anterior era de carrinho vazio por
   bug do meu instrumento): (1) o TOTAL tinha o mesmo peso visual do item; (2) o botao de fechar o
   pedido tinha contraste medio (dourado sobre creme) e sumia na rolagem. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value,
.wc-block-components-totals-item.wc-block-components-totals-footer-item{
  font-size:24px !important; font-weight:800 !important; color:var(--eon-ink) !important;
}
.wc-block-components-totals-footer-item{
  border-top:2px solid var(--eon-line) !important; padding-top:14px !important; margin-top:12px !important;
}
/* o CTA de fechar o pedido: escuro da marca sobre creme (contraste alto) em vez de dourado claro */
.wc-block-components-checkout-place-order-button,
.wc-block-checkout__actions_row .wc-block-components-button{
  background:var(--eon-ink) !important; color:var(--eon-cream) !important;
  box-shadow:0 10px 26px rgba(31,29,18,.22) !important; font-size:17px !important;
}

/* E43 — HIPOTESE QUE EU NAO TINHA TESTADO: em todas as tentativas anteriores eu mexi em
   `grid-template-columns` e no posicionamento dos filhos, mas SEMPRE deixei o elemento como GRID.
   Aqui eu removo o contexto de grid (`display:flex` em coluna): nao ha trilhas para o WooCommerce
   posicionar o botao em `grid-column:2/3`, entao o botao ocupa a largura inteira naturalmente.
   Quantidade e botao ficam em linhas distintas — o que a direcao de arte pediu. */
.wp-block-woocommerce-add-to-cart-form .woocommerce-variation-add-to-cart,
.wp-block-woocommerce-add-to-cart-form .variations_button,
form.cart .woocommerce-variation-add-to-cart,
form.cart .variations_button{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:12px !important;
}
.wp-block-woocommerce-add-to-cart-form .variations_button > .quantity,
form.cart .variations_button > .quantity{ align-self:flex-start !important; }
.wp-block-woocommerce-add-to-cart-form .variations_button > .single_add_to_cart_button,
form.cart .variations_button > .single_add_to_cart_button{ width:100% !important; align-self:stretch !important; }

/* ===== MENU DE CELULAR DA LOJA: TELA BRANCA (2026-10-06) =====
   MEDIDO em 390x844 na /shop/: o painel ABRE e os 5 links existem e estao "visiveis" para o
   DOM, mas com cor `rgb(255,251,242)` (creme da marca) — e o WP imprime o `background-color` do
   container de navegacao como estilo INLINE, que vence a folha de estilo. Resultado: creme sobre
   fundo claro = tela branca com links invisiveis (o G27 passava porque ele conta os links, nao
   se eles podem ser LIDOS). Aqui o painel aberto volta ao escuro da marca, com !important para
   vencer o inline — e o gate E53 passa a medir CONTRASTE, nao so' contagem. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  background-color: var(--eon-ink) !important;
  color: var(--eon-cream) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open button{
  color: var(--eon-cream) !important;
  opacity: 1 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
  color: var(--eon-cream) !important;
}
/* Alvo de toque do botao do menu no celular: MEDIDO em 24x24px (abaixo do minimo de 44px). */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{
  min-width:44px !important; min-height:44px !important; padding:10px !important;
  color:var(--eon-cream) !important;
}