/* CSS do tema — escrito a mao, nao extraido do v6_3.
 *
 * Espelha o assets/js/tema.js: o site.css e GERADO por
 * scripts/extrair-css.py e qualquer edicao a mao nele se perde na proxima
 * extracao. Ajuste nosso entra aqui.
 *
 * Regra: este arquivo so corrige o que o tema precisou mudar em relacao ao
 * v6_3. Nao e lugar para redesenhar nada — cor, fonte e espacamento saem dos
 * tokens e do site.css.
 */

/* O v6_3 usava <div class="acc-hd"> no cabecalho do acordeao. O tema usa
   <button>, que e focavel por teclado e anunciado como botao por leitor de
   tela — a <div> nao era nem uma coisa nem outra.
   Botao, porem, encolhe para caber: o cabecalho ficava com 237px numa caixa
   de 860px e o justify-content:space-between do site.css nao tinha folga para
   empurrar o "+" para a direita. Estas quatro linhas devolvem ao botao o
   comportamento que a <div> tinha. */
.acc-hd {
    width: 100%;
    text-align: left;
    font-family: inherit;
    appearance: none;
}


/* O contador do carrinho e um selo absoluto no canto do gatilho (top:-8px,
   right:-10px, do v6_3). Como o gatilho e so texto, o selo cobria as ultimas
   letras de "Carrinho". No v6_3 isso nunca apareceu porque o prototipo nunca
   teve item no carrinho. Um respiro a direita da lugar ao selo. */
.cart-trigger { padding-right: 14px; }


/* O #sobre estoura a tela no celular.
 *
 * A parte partes/sobre.php e copia literal do v6_3, e o v6_3 poe a grade num
 * style inline: grid-template-columns:420px 1fr. A media query de 1100px do
 * site.css manda 1fr, mas estilo inline so cede a !important — entao a coluna
 * fixa de 420px sobrevive e empurra o conteudo para fora da viewport. O
 * proprio v6_3 tem esse defeito; aqui ele nao passa porque a Fase 2 proibe
 * rolagem horizontal de 320px para cima. Mesma quebra do site.css, mais
 * forte. */
@media (max-width: 1100px) {
    .sobre-layout { grid-template-columns: 1fr !important; }
}


/* Quarta coluna na vitrine em telas muito largas.
 *
 * O v6_3 nao previu monitor grande: a grade e de tres colunas fixas, sem
 * largura maxima, com padding de 5vw. Num monitor de 1830px isso da cartoes de
 * 546x546 — tres produtos por tela, foto de poster.
 *
 * Este degrau nao inventa um conceito: o proprio desenho ja troca o numero de
 * colunas conforme a tela, 3 -> 2 -> 1 (site.css). Aqui ele so ganha um degrau
 * para cima, na mesma lingua. A alternativa — limitar a largura e centralizar —
 * traria um container que a home nao usa em lugar nenhum, ja que o hero sangra
 * nas bordas e toda secao usa 5vw.
 *
 * O corte e 1680px porque e onde o cartao de tres colunas passa de 500px, ou
 * seja, onde a foto deixa de ter a proporcao em que o desenho foi feito (430px
 * a 1440). Com quatro colunas o cartao volta para perto disso. */
@media (min-width: 1680px) {
    .prod-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Pedraria tem 19 produtos (correntes/pedraria com e sem ponteira, por cor
 * — nao 6, essa era so a amostra do v6_3) e Correntes tem 4: nenhuma conta
 * redonda pro grid de 3-4 colunas pensado pros 22 lustres. 19 e primo — NAO
 * TEM numero de colunas de 2 a 18 que divida sem sobra, entao "escolher a
 * coluna certa" nao resolve Pedraria de jeito nenhum. A ultima linha
 * sobrava com 1-2 cartoes e o resto em branco — um buraco bem em cima da
 * calculadora avulsa que entra logo abaixo da grade (revisao de
 * 16/09/2026, apos a calculadora tornar o buraco visivel e obvio).
 *
 * DUAS tentativas erradas antes desta, as duas reescrevendo o proprio
 * .prod-grid pra flexbox: (1) flex-grow esticava o cartao sozinho da
 * ultima linha pra ocupar a linha inteira, foto gigante e fora de
 * proporcao; (2) largura travada + justify-content:center resolvia a
 * proporcao, mas exigia REPETIR A MAO os cortes de coluna do .prod-grid
 * original (3 base, 4 em 1680px, 2 em 768px, 1 em 480px) — e a largura
 * real do navegador do Leo (escala do Windows, barra de favoritos) caiu
 * num ponto que os meus cortes nao preveram certo, entao a "sensacao"
 * responsiva ficou diferente do resto do site mesmo com os numeros
 * batendo no papel.
 *
 * A solucao correta nao mexe no .prod-grid: ele continua o MESMO CSS Grid
 * do v6_3, com os MESMOS breakpoints do resto do site (site.css/tema.css),
 * garantia de ficar identico em qualquer largura porque e o mesmo codigo.
 * O que preenche o buraco sao ate 3 ".prod-card-filler" (o maximo de
 * colunas menos 1, ver partes/catalogo.php) — divs vazias, sem classe
 * .prod-card, que so ocupam a largura da coluna do grid sem ter conteudo
 * nem altura visivel. Como as colunas do grid sao sempre 1fr (a mesma
 * largura pra qualquer item, com ou sem conteudo), os fillers completam a
 * ultima linha silenciosamente — o cartao de verdade nunca estica, nunca
 * precisa de justify-content, e o numero de colunas nunca e reescrito. */
.prod-card-filler { visibility: hidden; }

/* A calculadora avulsa (e o Guia de Tamanhos, na aba Pedraria) vinham
 * colados direto na borda da grade — sem margem nenhuma, a caixa branca da
 * calculadora encostava na caixa branca do ultimo cartao sem nenhuma
 * respiração entre as duas secoes (mesma revisao de 16/09/2026). */
.ceno-calc-catalogo { margin-top: 48px; }

/* Botao "Voltar" da ficha (revisao de 17/09/2026, pedido do Leo). Sem
 * precedente no v6_3 — la o produto abre em modal, nunca em pagina propria
 * (decisao D12), entao nao ha estilo dele pra copiar. Mesma linguagem da
 * trilha logo abaixo (.woocommerce-breadcrumb em woo.css): discreto, mas
 * com a cor de destaque do tema pra se diferenciar de um link de orientacao
 * e se ler como uma acao. */
.ficha-voltar {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    margin-bottom: 10px;
    transition: color var(--tr);
}
.ficha-voltar:hover { color: var(--text); }

/* [hidden] deveria bastar sozinho, mas regras de autor com display proprio
 * (ex.: form.cart { display: flex } em woo.css) vencem o display:none de
 * user-agent do [hidden], porque UA tem prioridade menor que autor — nao e
 * questao de especificidade. !important aqui e o jeito certo de devolver ao
 * [hidden] a garantia que o proprio HTML promete. Achado na Tarefa 8 (Fase
 * 3), verificado ao vivo: o formulario de compra continuava clicavel com
 * "outra altura" selecionada mesmo com formulario.hidden = true no JS.
 * Regra generica de proposito, nao so para form.cart: o mesmo risco existe
 * em qualquer .hidden = true/false do tema (ex.: paineis de aba do Catalogo
 * Completo).
 *
 * Mora em tema.css, nao em woo.css: woo.css so e enfileirado condicionalmente
 * (is_woocommerce() || is_cart() || is_checkout() || is_account_page() ||
 * is_front_page(), functions.php), entao uma pagina institucional fora dessas
 * condicoes nao recebia a regra. tema.css e enfileirado incondicionalmente. */
[hidden] { display: none !important; }

/* Guia de Tamanhos (Pedraria, dentro do Catalogo Completo) e a calculadora
 * avulsa do v6_3 (revisao de 15/09/2026, ver inc/calculadora-correntes.php).
 * .guia-grid so tinha a regra responsiva em site.css (extraida do media
 * query do v6_3): a base era style="display:grid;grid-template-columns:
 * repeat(3,1fr)" inline no HTML original, que o extrator nao captura. */
.guia-tamanhos { margin-top: 48px; }
.guia-tamanhos-titulo {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}
.guia-tamanhos-desc { font-size: 12px; color: var(--text-muted); margin-bottom: 18px; }
.guia-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.guia-grid img { width: 100%; border-radius: var(--r); display: block; }

.calc-field-produto { margin-bottom: 14px; }
.calc-catalogo-acoes { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.calc-catalogo-acoes .btn-add,
.calc-catalogo-acoes .btn-outline { width: auto; margin: 0; }

/* #macQty (quantidade de peças do macramê na home) é o mesmo campo que o
 * v6_3 chama #qtyMac — nome trocado pra bater com a convenção do resto do
 * tema (mac + Substantivo: macTipo, macMedida, macComprar...), mas isso
 * também deixou o campo fora da regra "#qtyMac,#pmQty" do site.css, que
 * nunca é reescrita à mão. Revisão de 16/09/2026: o campo aparecia sem
 * estilo nenhum (borda fina, fundo branco), achado ao vivo. */
#macQty {
    width: 70px;
    text-align: center;
    background: var(--bg4);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    padding: 10px;
    border-radius: var(--r);
    outline: none;
}
/* Começa vazio de propósito (revisão de 16/09/2026, pedido do Leo): um
 * valor padrão de 1 corria o risco de a cliente clicar "Adicionar" sem
 * perceber que ia levar só 1 peça. Vazio pede preenchimento — a borda
 * dourada é o mesmo tratamento de :focus que os outros campos do tema já
 * usam, só que sem precisar do foco: sinaliza "isto falta" à primeira
 * vista, não só quando a cliente já clicou dentro. */
#macQty:placeholder-shown {
    border-color: var(--gold);
}
/* Destaque quando a cliente clica "Adicionar ao Carrinho" com a quantidade
 * vazia/zerada — antes disso o clique so navegava pra ficha em silencio,
 * sem dizer por que (revisao de 17/09/2026, apontada pelo Leo: "jogando
 * pra ficha do produto em vez de validar que esta vazio"). Anel dourado
 * mais forte que o :placeholder-shown sozinho, porque precisa chamar
 * atencao MESMO se a cliente ja tiver digitado algo invalido (0, por
 * exemplo) — onde :placeholder-shown nao se aplica mais. */
#macQty.qty-invalida {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-dim);
}