/*
Theme Name: La Luce Child
Theme URI: https://laluce.rio.br
Description: Tema filho do Astra para a loja La Luce. Personalizacoes de estilo e template ficam aqui; o tema pai (Astra) nunca e editado diretamente.
Author: Raccoon Digital
Author URI: https://raccoondigital.com.br
Template: astra
Version: 0.2.5
Text Domain: laluce-child
*/

/* As personalizacoes de CSS da loja vao abaixo. */

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/playfair-500.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/playfair-600.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/lato-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/lato-700.woff2') format('woff2')}
@font-face{font-family:'Allura';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/allura-400.woff2') format('woff2')}
@font-face{font-family:'Quattrocento';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/quattrocento-400.woff2') format('woff2')}
@font-face{font-family:'Quattrocento';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/quattrocento-700.woff2') format('woff2')}

:root{
	--petrol:#003b46;
	--petrol-light:#36656d;
	--cream:#F5F5DC;
	/* Creme mais claro (adicionado em 2026-08-06, a pedido do Ronaldo, a
	   partir de um teste ao vivo na pagina 404 - NAO substitui "--cream"
	   acima, que continua em uso em outros lugares do site (logo, hover de
	   botoes etc.). Derivacao, em 2 rodadas de "clarear" sucessivas: 1)
	   "--cream" (#F5F5DC) misturado com branco em partes iguais (50%) =
	   #FAFAEE; 2) esse resultado misturado com branco de novo, agora 20% =
	   #FBFBF1 (cada rodada foi "clarear o que acabou de ser aprovado", nao
	   um recalculo do zero a partir do creme original). */
	--cream-light:#fbfbf1;
	--brown:#9a6856;
	/* Marrom mais claro (2026-08-22, a pedido do Ronaldo, "temos como criar um
	   marrom mais claro?"): mistura de "--brown" com 30% de branco, mesma
	   tecnica de derivacao ja usada em "--cream-light" acima. Registrado
	   tambem em theme.json (slug "marrom-claro") pra ficar disponivel no
	   editor de blocos. */
	--brown-light:#b89589;
	--orange:#fea50c;
	/* "Outras cores" do branding (memory/design.md, paleta secundaria/
	   exploratoria) trazidas pra paleta principal, a pedido do Ronaldo
	   (2026-08-22): valores exatos vindos de identidade-visual/laluce-
	   branding.md ("Rosa Antigo" e "Bordo/Vinho"). Registrados tambem em
	   theme.json (slugs "rosa-antigo"/"bordo"). */
	--rosa-antigo:#C08081;
	--bordo:#800020;
	/* Variantes claras das 2 acima (2026-08-22, mesmo dia): o Ronaldo pediu
	   pra NAO mexer nas cores puras (mantidas pra uso futuro), so' criar
	   tons mais claros pra aplicacao imediata - mesma tecnica de mistura
	   com branco ja usada em "--brown-light"/"--cream-light". "--rosa-claro"
	   e' "--rosa-antigo" + 70% de branco (o quadriculado da Cucina Italiana
	   pediu "bem clarinho", por isso a mistura mais forte que o padrao de
	   30% usado nas outras derivacoes). "--bordo-claro" e' "--bordo" + 25%
	   de branco (fundo da faixa de selos - pedido inicial de "50% mais
	   claro" corrigido no mesmo dia pro Ronaldo pra "so 25%"). Registradas
	   tambem em theme.json (slugs "rosa-claro"/"bordo-claro"). */
	--rosa-claro:#ECD9D9;
	--bordo-claro:#A04058;
	/* Vermelho do coracao "favoritado" (2026-07-28) - fora da paleta canonica
	   de proposito: convencao universal de UX pra "curtido"/"na lista de
	   desejos", nao um tom de marca. */
	--heart-red:#e63946;

	/* Camadas de fundo da vitrine/categoria (opcao "Nevoa Petroleo", decisao
	   de 2026-07-29, ver memory/design.md): diluicoes bem claras do azul
	   petroleo, uma por camada (site/sidebar/grade), pra dar profundidade
	   sutil sem sair da paleta. Os cards de produto continuam brancos.
	   "--bg-site" trocado de "#ffffff" para "var(--cream-light)" em
	   2026-08-06 (a pedido do Ronaldo, aplicado ao site inteiro apos teste
	   aprovado na pagina 404) - VALOR ANTERIOR REGISTRADO AQUI pra reverter
	   facil se nao ficar bom: era "#ffffff" (branco, opcao "Nevoa Petroleo"
	   original documentada em design.md). "--bg-sidebar"/"--bg-grid" NAO
	   foram tocados (o pedido foi so sobre o fundo geral da pagina). */
	--bg-site:var(--cream-light);
	--bg-sidebar:#e8edee;
	--bg-grid:#f2f5f6;

	/* Fundo da barra de filtros no DESKTOP (2026-08-15, a pedido do Ronaldo):
	   o mesmo creme claro que hoje pinta o fundo das paginas (#fbfbf1, valor
	   atual de "--cream-light"/"--bg-site"), mas escrito como valor LITERAL de
	   proposito, NAO como "var(--bg-site)" - o Ronaldo quer os dois
	   desacoplados (mesma decisao de 2026-08-06 registrada na regra
	   "#secondary" mais abaixo neste arquivo), entao trocar o creme geral do
	   site nao arrasta a barra de filtros junto, e testar outra cor aqui nao
	   mexe em mais nada do site. Visualmente parece "fundo removido", mas e uma
	   cor propria: e' este o placeholder pra experimentar outros tons na barra.
	   Consumida SO dentro do "@media (min-width:922px)" da secao "Sidebar de
	   filtros" - a gaveta de filtros MOBILE e' o MESMO elemento ("#secondary"
	   com "position:fixed") e continua no branco fixo da regra base, sem
	   nenhuma relacao com esta variavel. */
	--bg-filter-bar:#fbfbf1;

	/* Tons neutros claros do redesenho de Carrinho/Checkout aprovado pelo
	   Ronaldo no Claude Design (2026-08-07) - substituem o marrom saturado
	   (--brown) como cor de borda das caixas dessas 2 paginas, por um
	   contorno mais suave/neutro. Nao usados em nenhuma outra pagina do
	   site ainda (--brown continua valendo la). */
	--border-light:#e6e2d3;
	--border-input:#d8d4c4;
	/* Divisoria interna (ex.: linha fina abaixo do titulo de uma caixa,
	   "Entrar"/"Cadastre-se" na Minha Conta) - tom documentado a parte no
	   handoff de design (design_handoff_la_luce/README.md, "Divisorias
	   internas"), mais claro que "--border-light" (usado na BORDA externa
	   das caixas). Redesenho da Minha Conta, 2026-08-07. */
	--border-divider:#f0ede0;
}

/* Paleta Global do Astra (Customizer > Global > Colors), NAO o
   theme.json: sao dois sistemas de cor separados. O theme.json so
   alimenta a paleta do editor de blocos; esta aqui e a paleta de 9 cores
   (variaveis "--ast-global-color-0" a "8") que o proprio Astra usa pra
   colorir sozinho botoes/bordas/links/notices em QUALQUER lugar do site,
   inclusive nas paginas nativas do WooCommerce (carrinho, checkout, minha
   conta) - nunca tinha sido configurada, entao ficava no azul de fabrica
   do Astra ("#046bd2"/"#045cb4"), destoando da nossa marca (achado ao
   vivo via Playwright, 2026-07-29: botao "Finalizar pedido", borda de
   aviso, "Aplicar cupom" etc. todos nesse azul). So sobrescrevemos as
   duas primeiras ("Brand"/"Alternate Brand" - base e hover/variante
   escura, sao as unicas que apareciam em azul nas paginas testadas) para
   as cores da nossa marca; as outras 7 (headings/texto/fundos/bordas em
   tons neutros de cinza/branco/preto) ja estavam adequadas e nao foram
   tocadas. CONFIRMADO ao vivo via Playwright (2026-07-29), nas 4 paginas
   nativas do WooCommerce (carrinho, checkout, minha conta, wishlist):
   funciona so redefinindo a variavel aqui, sem "!important" - o CSS do
   tema-filho carrega depois do Astra, entao vence por ordem, igual a
   regra de cor de link abaixo. Cobre botao "Finalizar pedido", botao
   "Continuar para Finalização" (".checkout-button"), "Aplicar cupom",
   "Atualizar carrinho", "Acessar"/"Cadastre-se" e a borda dos avisos
   (".woocommerce-info") - todos usam ".button"/".button.alt" do proprio
   WooCommerce, que o Astra ja colore via esta mesma variavel
   (customizer "button-bg-color", que cai de volta pro "theme-color"
   quando nao customizado, que por sua vez cai pro Color 0 da paleta
   global). */
:root{
	--ast-global-color-0:var(--petrol);
	--ast-global-color-1:var(--petrol-light);
}

/* Cor padrao de link do site inteiro (decisao registrada em
   memory/design.md, 2026-07-28): petroleo claro como base (contraste
   ~6.5:1 sobre branco/creme), marrom no hover/foco - reaproveita a mesma
   convencao ja repetida 3x neste arquivo (".laluce-hdrop-item a:hover",
   ".laluce-hdrop-list a:hover", ".laluce-mobile-categorias-menu a:hover")
   em vez de criar um 4o padrao de hover diferente. Regra por ELEMENTO (`a`),
   de proposito: qualquer contexto que ja tem cor propria por classe/ID
   (menu sobre fundo petroleo, rodape, listas/dropdowns do header) continua
   vencendo por especificidade, isso aqui e so o padrao geral que faltava
   (cobre, por exemplo, o link "Entrar ou Cadastrar" do painel de conta, que
   nunca teve cor propria e caia no azul padrao do navegador/Astra). O
   Astra tambem define uma regra propria de mesma especificidade
   ("a{color:...}", var. $link_color em class-astra-dynamic-css.php); como
   o CSS do tema-filho carrega DEPOIS do tema pai na fila do WordPress, esta
   regra vence o empate por ordem, sem precisar de "!important". */
a{
	color:var(--petrol-light);
}
a:hover,
a:focus{
	color:var(--brown);
}

/* Fonte padrao do corpo do texto (decisao em memory/design.md): Lato.
   GAP fechado em 2026-07-28 - a fonte ja estava @font-face'd acima e
   registrada em theme.json (paleta de fontes do editor), mas nunca tinha
   sido aplicada como padrao do site (nenhum "body{font-family}" existia);
   sem isso, todo texto corrido (preco/parcelamento do card, paragrafos,
   etc.) caia na fonte padrao do sistema do proprio Astra.
   Trocado para Quattrocento em 2026-08-05 (arquivos trazidos pelo Ronaldo) e
   revertido de volta pra Lato NO MESMO DIA, a pedido do Ronaldo: o "body"
   e' herdado por qualquer elemento sem font-family propria, entao a troca
   vazou pra bem mais coisa do que os paragrafos pretendidos (a lista de
   excecoes so cobria os titulos com "voz tipografica" ja decidida, nao a UI
   toda) - os ajustes pontuais feitos noutros lugares deste arquivo so pra
   conter esse vazamento (sidebar de filtros, contador de resultados,
   dropdown de ordenacao) foram desfeitos junto com esta reversao, ver
   historico em design.md. Regra por ELEMENTO, mesmo raciocinio do link
   acima: o CSS do tema-filho carrega DEPOIS do pai, entao vence o empate de
   especificidade por ordem: nao precisa de "!important" nem de sobrescrever
   a fonte propria dos titulos. */
body{
	font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	background-color:var(--bg-site);
}
/* Gotcha achado testando o fundo na pagina 404 (2026-08-06): a regra acima
   ("body{background-color:var(--bg-site)}", selector de ELEMENTO puro) NAO
   e suficiente pra cobrir o site inteiro sozinha - o proprio Astra tem
   ".ast-separate-container{background-color:#f5f5f5}" (selector de
   CLASSE, main.min.css) no layout "Conteineres Separados", que VENCE por
   especificidade (classe bate elemento) em qualquer pagina que use esse
   layout, independente de ordem de carregamento. */
body.ast-separate-container{
	background-color:var(--bg-site);
}
/* CORRECAO (2026-08-07, achada revisando o fundo da pagina do Carrinho a
   pedido do Ronaldo): a suposicao acima - de que "ast-plain-container"
   (o OUTRO layout do Astra, usado pela MAIORIA do site: Home, Shop,
   Carrinho, Checkout, Minha Conta) nao tinha regra concorrente - estava
   ERRADA. O Astra gera um bloco "<style>" DINAMICO (Customizer > Global >
   Colors, nao o main.min.css estatico) com ".ast-plain-container,
   .ast-page-builder-template{background-color:var(--ast-global-color-4)}"
   - tambem um seletor de CLASSE, tambem vencendo a regra "body{}" pura
   por especificidade, com "--ast-global-color-4" fixado em "#FFFFFF"
   (um dos 9 slots da paleta global do Astra, nunca redefinido - so' os
   slots 0/1 foram, ver mais abaixo). Ou seja: o fundo creme claro NUNCA
   chegou a valer, em NENHUMA pagina que usa esse layout, desde que foi
   criado - so' foi notado agora, ao vivo, no Carrinho. Mesmo tratamento
   da regra acima (seletor "body" + classe, especificidade maior que so'
   a classe sozinha, sem precisar de "!important"). */
body.ast-plain-container{
	background-color:var(--bg-site);
}

/* Titulos (headings inseridos via blocos do editor, ex.: Home) passam a
   usar Lato em vez de Playfair Display (decisao de 2026-08-05). O
   WordPress gera sozinho, no <head>, a regra
   ".has-playfair-display-font-family{font-family:var(--wp--preset--font-
   family--playfair-display) !important}" (Global Styles, a partir do slug
   registrado em theme.json) toda vez que um heading no editor tem a fonte
   "Playfair Display" escolhida - e ela carrega ANTES deste arquivo (handle
   "global-styles-inline-css", conferido no HTML servido). Sobrescrita aqui
   por cima, com a MESMA classe e "!important", pra vencer o empate de
   especificidade por ordem de carregamento (mesmo raciocinio das demais
   regras desta secao). Faz por CSS, sem tocar o conteudo dos posts/paginas
   nem o registro "Playfair Display" em theme.json/@font-face acima - de
   proposito, pra manter intacto o REGISTRO de que Playfair era a fonte de
   titulo ate aqui (nome, slug e classe embutida nos blocos continuam
   dizendo "Playfair Display"; so o valor visual mudou). */
.has-playfair-display-font-family{
	font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Site branding: o titulo em texto ("La Luce") ao lado do logo e redundante
   agora que temos a imagem da logo; escondido (a logo ja carrega o nome). */
.ast-site-identity .site-title{
	display:none !important;
}

/* Menu DESKTOP (#ast-hf-menu-1 = menu de categorias, movido para a linha
   "Below Header" em 2026-07-25, ver bin/setup-header-builder.sh): texto em
   creme (combinacao assinatura da marca). Escopado ao id do menu desktop
   (nao ao .main-header-menu generico) porque o dropdown mobile usa a mesma
   classe mas tem fundo branco e precisa de cor diferente (ver regra abaixo).
   O antigo #ast-hf-menu-2 (Cart/My Account via Dashicon) foi removido: o
   carrinho agora e o elemento nativo woo-cart do Astra e a conta virou o
   dropdown "Bem-vindo(a)" (functions.php).
   Hover em laranja (revertido em 2026-08-05 pelo Ronaldo apos testar ao
   vivo branco+negrito - "estava melhor" com laranja, mesmo o fundo tendo
   passado de petroleo-claro para marrom, --brown, bin/setup-header-builder.php).
   Contraste de laranja sobre marrom mede ~2.4:1 (abaixo do minimo de 3:1
   pra texto grande) - decisao estetica deliberada do Ronaldo, que ja
   experimentou a alternativa mais acessivel (branco+negrito) e preferiu
   reverter mesmo assim. NAO reabrir essa troca sem pedido explicito dele. */
#ast-hf-menu-1.main-header-menu .menu-link{
	color:var(--cream) !important;
}
#ast-hf-menu-1.main-header-menu .menu-item:hover > .menu-link,
#ast-hf-menu-1.main-header-menu .menu-link:hover,
#ast-hf-menu-1.main-header-menu .menu-link:focus{
	color:var(--orange) !important;
}

/* Menu MOBILE (dropdown, #ast-hf-mobile-menu) sobre fundo branco: texto em
   petroleo (contraste correto sobre branco). Hover/item atual em petroleo
   claro, nao laranja: o proprio design.md registra que laranja tem baixo
   contraste como cor de texto sobre fundo claro. */
#ast-hf-mobile-menu .menu-link{
	color:var(--petrol) !important;
}
#ast-hf-mobile-menu .menu-item:hover > .menu-link,
#ast-hf-mobile-menu .menu-link:hover,
#ast-hf-mobile-menu .menu-link:focus,
#ast-hf-mobile-menu .current-menu-item > .menu-link{
	color:var(--petrol-light) !important;
}

/* Menu principal: Cart/Checkout/My Account viram so icone (Dashicons nativo do
   WordPress), texto escondido visualmente mas preservado para leitor de tela;
   o "title" do item de menu aparece como tooltip nativo do navegador ao passar
   o mouse. */
.main-header-menu .nav-icon > .menu-link{
	font-size:0 !important;
	position:relative;
}
.main-header-menu .nav-icon > .menu-link::before{
	font-family:dashicons !important;
	font-size:20px !important;
	line-height:1;
	speak:none;
}
.main-header-menu .nav-icon-cart > .menu-link::before{ content:"\f174"; }
.main-header-menu .nav-icon-checkout > .menu-link::before{ content:"\f160"; }
.main-header-menu .nav-icon-account > .menu-link::before{ content:"\f110"; }

/* Menu MOBILE (dropdown): reverte os icones de volta para texto (decisao do
   Ronaldo, 2026-07-22 - ficou ruim como icone no mobile). Icones ficam
   exclusivos do desktop (#ast-hf-menu-1, regra abaixo). */
#ast-hf-mobile-menu .nav-icon > .menu-link{
	font-size:1em !important;
}
#ast-hf-mobile-menu .nav-icon > .menu-link::before{
	content:none !important;
}

/* ACHADA a causa real de "a fonte do menu nao muda nunca" (o Ronaldo achou
   via DevTools): esta regra e uma sobra de QUANDO O MENU AINDA MORAVA NA
   LINHA PRIMARY (comentario antigo dizia "centro", mas o menu foi movido pra
   linha "Below Header" em 2026-07-25). Ela nunca foi atualizada/removida
   depois da mudanca, e como usa ID (#ast-hf-menu-1) + !important, vence
   QUALQUER regra por classe que eu escrevesse depois pra mudar o tamanho
   dessa fonte, mesmo tambem com !important - especificidade por ID nao
   perde pra classes dentro do mesmo empate de "!important". Esta e agora A
   regra oficial do tamanho da fonte do menu de categorias (18px -> 14px a
   pedido do Ronaldo); a tentativa redundante em ".ast-below-header-bar
   .main-header-menu > .menu-item > .menu-link" foi removida por ser codigo
   morto (nunca vencia esta aqui). */
#ast-hf-menu-1.main-header-menu .menu-link{
	font-size:14px !important;
}

/* Header mobile: hamburguer a esquerda, logo centralizada. Igual ao desktop,
   reestruturado em 2026-07-22 para usar a posicao nativa do Header Builder do
   Astra (header-mobile-items: left=mobile-trigger, center=logo) em vez de
   CSS de posicionamento absoluto - a tentativa anterior (position:absolute na
   logo) fez a logo colapsar a largura da coluna do hamburguer no grid,
   jogando os dois um em cima do outro. So a cor do icone continua precisando
   de CSS (nao tem opcao nativa para isso). */
@media (max-width:921px){
	#ast-mobile-header .menu-toggle{
		color:var(--cream) !important;
	}
	/* Moldura pontilhada ao redor do hamburguer (:focus do navegador, mesma
	   familia de bug ja documentada pro campo de busca - o proprio tema tem
	   uma regra generica "button:focus{outline:thin dotted}" em main.min.css
	   que nunca tinha sido zerada NESTE botao especifico). Pedido do
	   Ronaldo, 2026-07-27, reforcado no mesmo dia: a 1a tentativa so cobria
	   ":focus"/":active", mas alguns navegadores aplicam o aro padrao via
	   ":focus-visible" especificamente (nao e sinonimo de ":focus" em toda
	   engine) - zerado tambem, e sem depender de pseudo-classe nenhuma
	   (a regra base ja sai sem outline, nao so ao ganhar foco). */
	#ast-mobile-header .menu-toggle,
	#ast-mobile-header .menu-toggle:focus,
	#ast-mobile-header .menu-toggle:focus-visible,
	#ast-mobile-header .menu-toggle:active{
		outline:none !important;
		box-shadow:none !important;
		border:none !important;
	}
	/* Botoes "X" de fechar das tres gavetas (menu hamburguer - nativo do
	   Astra, "#menu-toggle-close" - busca, ".laluce-search-drawer-close" - e
	   filtros, ".laluce-filter-drawer-close"): mesmo pedido de remover
	   qualquer moldura/aro de foco, nas tres. */
	#menu-toggle-close,
	#menu-toggle-close:focus,
	#menu-toggle-close:focus-visible,
	#menu-toggle-close:active,
	.laluce-search-drawer-close,
	.laluce-search-drawer-close:focus,
	.laluce-search-drawer-close:focus-visible,
	.laluce-search-drawer-close:active,
	.laluce-filter-drawer-close,
	.laluce-filter-drawer-close:focus,
	.laluce-filter-drawer-close:focus-visible,
	.laluce-filter-drawer-close:active{
		outline:none !important;
		box-shadow:none !important;
		border:none !important;
	}
	/* A cor do icone do hamburguer vem de "fill" direto no SVG (nao de
	   "currentColor"/"color" como parecia); sobrescrevendo a regra exata que
	   o Astra usa (fill:var(--ast-global-color-0), a causa da cor azul).
	   Tamanho igualado ao icone do carrinho (30px, ver ".ast-site-header-cart
	   .astra-icon" mais acima) a pedido do Ronaldo, 2026-07-27. flex-shrink:0
	   pra nao encolher/sumir dentro da coluna do grid mobile do Astra
	   (".ast-primary-header-bar" vira "display:grid" abaixo de 922px) quando
	   dividindo espaco com a lupa ao lado, tambem aumentada. */
	[data-section="section-header-mobile-trigger"] .ast-mobile-svg{
		fill:var(--cream) !important;
		width:30px !important;
		height:30px !important;
		flex-shrink:0;
	}
	/* Espaco entre a borda esquerda da tela e o hamburguer, e entre o
	   hamburguer e a lupa: reduzidos pela metade a pedido do Ronaldo,
	   2026-07-27. Medido ao vivo (Playwright) pra saber os valores reais
	   antes de mudar, em vez de chutar:
	   - margem esquerda: "padding-left:20px" no ".ast-primary-header-bar"
	     (regra do proprio Astra, ".ast-header-break-point #masthead
	     .ast-mobile-header-wrap .ast-primary-header-bar") -> 10px.
	   - gap hamburguer/lupa: 20px NO TOTAL, mas vem de DUAS origens
	     somadas (10px de "padding-right" no wrap do hamburguer + 10px de
	     "padding-left" no wrap da busca, ".ast-header-search") -> 5px em
	     cada um, pra fechar em 10px total. So mexe no lado esquerdo do
	     header (nao toca no padding-right, que fica perto do carrinho). */
	#ast-mobile-header .ast-primary-header-bar{
		padding-left:10px !important;
	}
	[data-section="section-header-mobile-trigger"]{
		padding-right:5px !important;
	}
	#ast-mobile-header .ast-header-search{
		padding-left:5px !important;
	}
	/* Icone nativo de busca do mobile: causa REAL do sumico confirmada ao
	   vivo (Playwright headless, 2026-07-27, ver scratchpad da sessao) -
	   ".ast-search-icon" vem do proprio Astra com "visibility:hidden"
	   computado (nao e coisa nossa, nem grid cortando nada). O motivo: o
	   tipo de busca configurado (opcao global "header-search-box-type",
	   nao responsiva) e o modo "sempre aberto" que usamos no desktop - esse
	   modo esconde o icone de toggle por padrao, porque nele a barra fica
	   sempre visivel sem precisar de icone nenhum. Como o desktop ja força
	   tudo via CSS proprio (visto acima, dentro de @media min-width:922px)
	   independente desse "type", e seguro forçar so aqui no mobile a
	   visibilidade do icone, em vez de mexer na opcao global (evita qualquer
	   efeito colateral no desktop). "visibility" e propriedade herdada, mas
	   forcada nos 3 niveis (div/link/svg) pra nao depender de heranca. */
	#ast-mobile-header .ast-search-icon,
	#ast-mobile-header .ast-search-icon a,
	#ast-mobile-header .ast-search-icon svg{
		visibility:visible !important;
	}
	#ast-mobile-header .ast-header-search,
	#ast-mobile-header .ast-search-icon{
		flex-shrink:0;
		overflow:visible !important;
	}
	#ast-mobile-header .site-header-primary-section-left{
		overflow:visible !important;
	}
	/* O wrap/link do icone de busca (".ast-search-icon"/".astra-search-icon")
	   tinha uma caixa de 32x38px por padrao do Astra (padding/line-height
	   proprios), maior que a caixa de 50x50 do hamburguer só visualmente por
	   causa dessa folga extra - o SVG em si ja era 30x30 nos dois. Travado
	   em 30x30 exato pra eliminar qualquer diferença de altura percebida
	   (pedido do Ronaldo, 2026-07-27, medido ao vivo via Playwright: as
	   duas SVGs ja alinhavam a 1px de diferença, a caixa ao redor que
	   diferia). */
	#ast-mobile-header .ast-search-icon,
	#ast-mobile-header .ast-search-icon a{
		width:30px !important;
		height:30px !important;
		display:flex !important;
		align-items:center;
		justify-content:center;
	}
	#ast-mobile-header .ast-search-icon svg{
		fill:var(--cream) !important;
		width:30px !important;
		height:30px !important;
	}
	/* Logo mobile: pedido inicial era igualar aos 30px dos icones, mas ficou
	   pequena demais - aumentada +10px a pedido do Ronaldo (2026-07-27),
	   mesmo ficando diferente da altura dos icones agora (decisao dele). A
	   largura fixa vinda do Customizer (ast-header-responsive-logo-width,
	   160px no mobile) deixava a logo desproporcional aos icones porque a
	   wordmark e larga e baixa (proporcao ~2:1) - aqui prevalece a altura,
	   largura solta (auto) pra manter a proporcao. */
	#ast-mobile-header .site-logo-img img{
		height:40px !important;
		width:auto !important;
	}

	/* Faixa de categorias no mobile (menu-1, mesmo menu do "Below Header" do
	   desktop): por padrao o Astra empilha esse menu em modo "acordeao"
	   (classe "stack-on-mobile", uma lista de paginas cheia, sem estilo).
	   Trocado para "inline-on-mobile" via astra-settings
	   (header-menu1-menu-stack-on-mobile=false, ver
	   bin/setup-mobile-header.php) - e uma opcao NATIVA do componente "Menu"
	   do Header Builder, nao um bloco a parte (nao ha bloco de editor pra
	   isso: essa faixa e o Header Builder do tema, nao conteudo de pagina).
	   O "inline-on-mobile" do proprio Astra so cuida do layout em linha; cor,
	   fonte e o scroll horizontal continuam por nossa conta aqui, igual ao
	   restante deste arquivo. Fundo (marrom, --brown) e altura da faixa ja
	   vem do "#ast-below-header-bar"/"site-below-header-wrap" (regra mais
	   abaixo neste arquivo, sem media query - ja vale pro mobile). Hover em
	   laranja: revertido de branco+negrito no mesmo dia, ver comentario
	   completo no menu desktop acima (decisao estetica deliberada do
	   Ronaldo, contraste baixo ~2.4:1 aceito conscientemente). */
	#ast-hf-menu-1-mobile.main-header-menu .menu-link{
		color:var(--cream) !important;
		font-size:14px !important;
	}
	#ast-hf-menu-1-mobile.main-header-menu .menu-item:hover > .menu-link,
	#ast-hf-menu-1-mobile.main-header-menu .menu-link:hover,
	#ast-hf-menu-1-mobile.main-header-menu .menu-link:focus{
		color:var(--orange) !important;
	}
	/* Fundo branco cobrindo o marrom da faixa: achado no CSS dinamico
	   do proprio Astra - ".main-header-menu{background-color:var(--ast-global-color-4)}",
	   uma regra generica (nao especifica de mobile/stack) que pinta o
	   proprio <ul> do menu com uma cor clara da paleta global do tema, por
	   cima do fundo da faixa (".ast-below-header-bar", que fica por baixo).
	   No desktop isso nao aparecia (create outra regra do Astra derrubando
	   pra transparent vencia por ordem); aqui garantimos direto. */
	#ast-hf-menu-1-mobile.main-header-menu{
		background-color:transparent !important;
	}
	/* A reducao de altura da faixa SO PRO MOBILE mora la embaixo, perto da
	   regra compartilhada ".ast-below-header-bar,.site-below-header-wrap"
	   (procure "Altura da faixa de categorias no MOBILE") - precisa vir
	   DEPOIS dela no arquivo pra vencer o empate de especificidade/!important
	   (2026-07-27: a 1a tentativa de reduzir ficava AQUI em cima, ou seja
	   ANTES da regra compartilhada, e nunca "colava" - mesmo seletor, mesmo
	   !important, quem vem depois no arquivo e que vence). */
	/* Scroll lateral quando os itens nao cabem na largura da tela (o
	   "inline-on-mobile" do Astra so tira o "wrap"/empilhamento, nao adiciona
	   scroll sozinho). Rolagem suave no iOS + barra de scroll escondida
	   (visual mais limpo, tipo "chip scroller" de loja) sem perder a
	   funcionalidade em navegadores que nao suportam esconder a barra.
	   CORRECAO IMPORTANTE (2026-07-27, achada medindo ao vivo via
	   Playwright): so "overflow-x:auto" nao bastava porque o proprio <ul>
	   nao tinha NENHUM limite de largura - ele so crescia (scrollWidth
	   igual a clientWidth, ambos 686px, maior que os 390px da tela), o que
	   empurrava a PAGINA INTEIRA pra ficar mais larga que a tela (documento
	   com scrollWidth 726px) em vez de rolar so por dentro. Por isso
	   arrastar pra rolar o menu arrastava a pagina toda junto.
	   "overscroll-behavior-x:contain" evita o gesto de arrastar "vazar" pro
	   scroll da pagina mesmo nas bordas do menu.
	   AJUSTE (mesmo dia, 2 tentativas): a 1a versao usava "max-width:100vw"
	   (a largura da TELA, sem descontar o padding do proprio pai,
	   ".ast-below-header-bar", que tem 20px de cada lado) - resolvia o
	   overflow, mas o <ul> comecava em x=20 (empurrado pelo padding-left do
	   pai) e ia ate x=20+390=410, ou seja, 20px ALEM da borda direita da
	   tela - por isso a borda direita nao tinha respiro nenhum (e ainda
	   sobrava um pouco de overflow de pagina por causa disso). Tentei trocar
	   para "max-width:100%" (esperando que respeitasse o padding do pai
	   sozinho), mas isso trouxe de volta o bug original inteiro - o <ul>
	   voltou a nao ter limite nenhum (scrollWidth==clientWidth de novo,
	   pagina inteira alargando) porque algum ancestral mais acima na cadeia
	   nao esta contido de verdade (motivo pelo qual "100vw" foi escolhido
	   originalmente, exatamente pra nao depender disso). Solucao final:
	   continuar com "vw" (garantia de conter, nao depende da cadeia de
	   pais) mas descontando os 40px (20px do padding-left que already
	   empurra o inicio + 20px de respiro simetrico que queremos no fim):
	   "calc(100vw - 40px)".

	   CORRECAO DEFINITIVA (2026-08-10, medida ao vivo no Checkout mobile
	   depois de o Ronaldo reportar barra de rolagem horizontal e margem
	   assimetrica): o "calc(100vw - 40px)" ERA a causa, por um motivo que a
	   medicao anterior nao tinha como pegar - "100vw" INCLUI A LARGURA DA
	   BARRA DE ROLAGEM VERTICAL. Medido na pagina real: tela de 390px, barra
	   de 15px, largura util de 375px, e "100vw" resolvendo pra 390. O menu
	   era montado 15px mais largo que o espaco existente. A medicao de
	   2026-07-27 rodou no Playwright headless, onde a barra nao ocupa espaco
	   ("100vw" == util) - por isso as contas fechavam la' e nao aqui.
	   REGRA GERAL PRA ESTE PROJETO: "vw" so' e' seguro em pagina que nunca
	   rola verticalmente; fora disso ele mente pelo tamanho da barra.

	   Cadeia completa, medida (nao deduzida): o <ul> de 350px fazia o grid do
	   Astra em volta (".ast-builder-grid-row{display:grid;grid-template-
	   columns:auto auto;column-gap:20px}", main.min.css) resolver as colunas
	   em "350px 0px" e a linha inteira em 370px - dentro de um pai cuja area
	   util e' 335px. Repare nos 20px de "column-gap" contando mesmo com a
	   coluna da direita VAZIA (0px): so' encolher o <ul> nao bastaria, a
	   linha continuaria maior que o pai.

	   Correcao em 3 partes, todas necessarias:
	   1) "max-width:100%" no lugar do "vw" - agora funciona porque o item (2)
	      conserta justamente a cadeia de pais "nao contida" que fez a
	      tentativa de "100%" de 2026-07-27 falhar;
	   2) "min-width:0" no grid do Astra e na secao da esquerda: item de
	      grid/flex tem minimo automatico igual ao proprio conteudo, entao a
	      linha nao conseguia encolher ate' o pai por mais que o filho
	      pedisse (mesmo gotcha ja documentado nos campos do Checkout);
	   3) "column-gap:0" nesta faixa: o vao de 20px do Astra so' faz sentido
	      separando duas secoes preenchidas, e aqui a da direita esta' vazia. */
	#ast-hf-menu-1-mobile.main-header-menu{
		display:flex;
		max-width:100%;
		overflow-x:auto;
		overscroll-behavior-x:contain;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
	}
	.ast-below-header-bar .ast-builder-grid-row,
	.ast-below-header-bar .site-header-below-section-left{
		min-width:0;
	}
	.ast-below-header-bar .ast-builder-grid-row{
		column-gap:0;
	}
	/* TRAVA DE LARGURA DO CABECALHO MOBILE (2026-08-15) - cinto e suspensorio da
	   correcao de causa raiz que mora em functions.php
	   ("laluce_sync_breakpoint_class()"), ler o comentario de la primeiro.
	   Resumo: as 4 declaracoes abaixo sao copia FIEL das do proprio Astra, que
	   existem so' prefixadas por ".ast-header-break-point" - uma classe que o
	   servidor escreve a partir do USER-AGENT, nao da largura da tela. Enquanto
	   essa classe nao bate com a tela (quem estreita a janela sem recarregar), o
	   ".main-navigation" desta faixa fica no "inline-flex" nativo, cresce ate' a
	   largura natural do menu inteiro (~686px medidos em 2026-07-27) e ESTOURA a
	   pagina na horizontal - o "max-width:100%" do <ul> acima nao segura nada,
	   porque 100% passa a ser desse pai inflado, e todo o conteudo da pagina
	   aparece deslocado, sem a margem direita (print do Ronaldo).
	   Repetidas aqui por ID + media query (nao dependem de classe nenhuma), o
	   estouro deixa de ser possivel mesmo se o JS nao rodar. Quando a classe
	   esta' certa, isto e' redundante de proposito: mesmos valores do Astra,
	   zero diferenca visual. */
	#ast-mobile-header .ast-builder-menu,
	#ast-mobile-header .main-header-bar-navigation{
		width:100%;
	}
	#ast-mobile-header .main-header-bar-navigation{
		margin:0;
	}
	#ast-mobile-header .main-navigation{
		display:block;
		width:100%;
	}
	#ast-mobile-header .ast-main-header-bar-alignment{
		display:block;
		width:100%;
		flex:auto;
		order:4;
	}
	#ast-hf-menu-1-mobile.main-header-menu::-webkit-scrollbar{
		display:none;
	}
	/* Causa real do texto quebrado em coluna estreita (print do Ronaldo,
	   2026-07-27): "overflow-x:auto" sozinho nao impede os itens flex de
	   ENCOLHEREM pra caber na largura disponivel (flex-shrink e 1 por
	   padrao) - eles foram espremidos ate o texto quebrar letra a letra em
	   vez de estourar a largura e disparar o scroll. "flex-shrink:0" +
	   "white-space:nowrap" travam a largura natural de cada item, forcando
	   a fileira inteira a ultrapassar a tela (dai o scroll horizontal
	   funcionar de verdade). */
	#ast-hf-menu-1-mobile.main-header-menu > .menu-item{
		flex-shrink:0;
		white-space:nowrap;
	}
	#ast-hf-menu-1-mobile.main-header-menu .menu-link{
		white-space:nowrap;
	}

	/* Setinhas "<"/">" nas pontas da faixa de categorias mobile (pedido do
	   Ronaldo, 2026-09-04), indicando que da pra rolar pros lados - mesmo
	   padrao ja aprovado na pill-nav da Minha Conta
	   (".laluce-ma-pill-arrow", ver mais abaixo neste arquivo e
	   assets/js/my-account.js): botao com fundo em degrade (some pro
	   transparente) sobre um chevron, escondido por padrao
	   ("display:none") e so' revelado ("is-visible", classe ligada por JS
	   conforme scrollLeft/scrollWidth) do lado em que ainda ha' conteudo
	   pra rolar. Os 2 botoes sao criados em assets/js/header.js (a faixa
	   e' o Header Builder do Astra, sem bloco/hook de PHP pra injetar
	   marcacao nova dentro dela - mesmo motivo ja documentado acima pro
	   cabecalho da gaveta de busca) e ancorados aqui em
	   ".ast-below-header-bar": no mobile essa linha do Header Builder so'
	   tem o menu-1 (below_center/right vazios, ver
	   bin/setup-mobile-header.php), entao a faixa inteira pertence a ele -
	   seguro usar como referencia de "position:relative" pros 2 botoes. */
	.ast-below-header-bar{
		position:relative;
	}
	.laluce-catbar-arrow{
		position:absolute;
		top:0;
		bottom:0;
		width:26px;
		display:none;
		align-items:center;
		border:none;
		padding:0;
		cursor:pointer;
		opacity:0;
		transition:opacity .15s;
		z-index:2;
	}
	.laluce-catbar-arrow.is-visible{
		display:flex;
		opacity:1;
	}
	.laluce-catbar-arrow--left{
		left:0;
		justify-content:flex-start;
		background:linear-gradient(to right, var(--brown) 55%, transparent);
	}
	.laluce-catbar-arrow--right{
		right:0;
		justify-content:flex-end;
		background:linear-gradient(to left, var(--brown) 55%, transparent);
	}

	/* Painel de conta dentro do menu hamburguer (html-3,
	   laluce_render_mobile_account_panel() em functions.php): reaproveita as
	   MESMAS classes do dropdown de desktop (laluce-hdrop-list,
	   laluce-account-greet, laluce-hdrop-item, laluce-hdrop-panel), so
	   precisa parar de flutuar - dentro do menu ja aberto nao faz sentido
	   mais um dropdown por cima. As cores/layout de trigger e item ja vem
	   certos por especificidade (".laluce-hdrop-list button" ja pinta o
	   botao de petroleo, vence ".laluce-hdrop-trigger" sozinho); so a
	   POSICAO do painel precisa de override aqui. */
	.laluce-mobile-panel{
		padding:18px 20px 28px;
		color:var(--petrol);
	}
	.laluce-mobile-panel .laluce-hdrop-panel{
		position:static;
		width:auto;
		box-shadow:none;
		border-radius:0;
		padding:0 0 8px 28px;
	}
	/* "Ola, visitante" no TOPO da gaveta, mesma linha do X (pedido do
	   Ronaldo, 2026-07-28): o elemento (".laluce-account-greet") e movido pra
	   dentro do cabecalho nativo do Astra (".ast-mobile-popup-header", so
	   tinha o X por padrao) via JS (header.js) - aqui so o layout. O Astra
	   pinta esse cabecalho com "justify-content:flex-end" (so cabia o X,
	   encostado a direita); sobrescrito pra "space-between" pra abrir espaco
	   a esquerda pro texto, preenchendo o vazio que sobrava ali. Padding-left
	   igualado aos 20px do resto do conteudo da gaveta (".laluce-mobile-panel"
	   acima) pra alinhar a mesma margem esquerda; padding-right raso porque o
	   botao X ja tem folga propria (".6em" nativo do Astra ao redor do icone).
	   Seguro sobrescrever sem condicional (":has()" etc.): o JS que move o
	   texto pra dentro deste cabecalho roda sempre, antes da gaveta ficar
	   visivel (ver comentario em header.js). "align-items" trocado de
	   "center" para "flex-start" (pedido do Ronaldo, 2026-07-28, rodada 2):
	   com "center" o texto ficava mais colado no topo da gaveta que o X
	   (medido ao vivo via Playwright - avatar comecava a 9.4px do topo contra
	   14.4px do icone do X, a folga nativa do proprio botao do Astra,
	   "padding:.6em" com fonte de 24px). Com "flex-start" os dois passam a
	   partir do mesmo topo (y:0) e o "padding-top" abaixo controla a folga.
	   Ajustado de 14.4px (igual ao X) para 16px (pedido do Ronaldo, 2026-07-28,
	   rodada 3 - folga um pouco maior que a do X, de proposito). */
	#ast-mobile-popup .ast-mobile-popup-header{
		justify-content:space-between !important;
		align-items:flex-start;
		padding:0 6px 0 20px;
	}
	#ast-mobile-popup .ast-mobile-popup-header .laluce-account-greet{
		align-items:flex-start;
		padding-top:20px;
		padding-bottom:0;
		margin-bottom:0;
		border-bottom:none;
		font-size:16px;
	}
	/* "Entrar ou Cadastrar": o aumento de fonte acima e so pro "Ola,
	   visitante"; revertido aqui pro tamanho original (herdado da regra
	   compartilhada ".laluce-account-greet{font-size:.92rem}"). */
	#ast-mobile-popup .ast-mobile-popup-header .laluce-account-greet a{
		font-size:.92rem;
	}
	.laluce-mobile-heading{
		margin:18px 0 8px;
		padding-top:16px;
		border-top:1px solid rgba(0,59,70,.1);
		font-size:.8rem;
		font-weight:700;
		text-transform:uppercase;
		letter-spacing:.04em;
		color:var(--petrol);
	}
	.laluce-mobile-categorias-menu{
		list-style:none;
		margin:0;
		padding:0;
	}
	.laluce-mobile-categorias-menu li + li{
		border-top:1px solid rgba(0,59,70,.08);
	}
	.laluce-mobile-categorias-menu a{
		display:block;
		padding:10px 2px;
		font-size:.9rem;
		color:var(--petrol);
		text-decoration:none;
	}
	.laluce-mobile-categorias-menu a:hover{
		color:var(--brown);
	}

	/* Gaveta de busca no mobile: o Astra ja alterna a classe
	   ".ast-dropdown-active" no clique do icone de busca sozinho
	   (assets/js/unminified/frontend.js do proprio tema, funcao nativa - sem
	   JS nosso aqui), inclusive fechando ao clicar fora. So reestilizamos a
	   APRESENTACAO desse estado.
	   CORRECAO IMPORTANTE (2026-07-27, achada ao vivo via Playwright
	   headless, ver scratchpad da sessao): ".ast-search-menu-icon.slide-search"
	   NAO e so o form - e o wrapper que contem TANTO o form QUANTO o
	   proprio icone-gatilho (".ast-search-icon") como filhos. A 1a versao
	   desta gaveta transformava esse wrapper inteiro, arrastando o gatilho
	   junto pra fora da tela (por isso a lupa "sumia" mesmo com
	   visibility:visible - ela estava la, so que a -180px de x, dentro do
	   wrapper transformado). Correcao: so o ".search-form" (o filho que
	   realmente contem o campo) vira a gaveta fixa; o wrapper fica normal no
	   fluxo do cabecalho, do tamanho do icone-gatilho, que continua visivel
	   e clicavel no lugar certo. Pelo lado ESQUERDO (mesmo lado do
	   hamburguer/off-canvas-slide=left, corrigido a pedido do Ronaldo - a
	   1a versao saia pela direita). O miolo (input/botao) reaproveita a
	   MESMA solucao ja resolvida pro desktop (".ast-header-search
	   .search-submit" mais acima, dentro do @media min-width:922px) - depois
	   de "um longo problema" para o botao de lupa aparecer no lugar certo
	   (ver blueprints.md, 2026-07-25), a mesma tecnica (restilizar o botao
	   nativo ".search-submit" em vez de esconder e reinventar) e repetida
	   aqui. */
	#ast-mobile-header .ast-header-search .ast-search-menu-icon.slide-search{
		position:relative;
		display:flex !important;
		align-items:center;
		visibility:visible !important;
		opacity:1 !important;
	}
	#ast-mobile-header .ast-header-search .ast-search-menu-icon.slide-search .search-form{
		position:fixed !important;
		top:0;
		left:0;
		bottom:0;
		width:85%;
		max-width:360px;
		height:100vh;
		background:#fff;
		z-index:100000;
		display:flex !important;
		flex-direction:column;
		align-items:stretch;
		padding:24px 20px 20px;
		box-sizing:border-box;
		overflow-y:auto;
		box-shadow:8px 0 30px rgba(0,0,0,.25);
		transform:translateX(-100%) !important;
		transition:transform .3s ease;
		visibility:hidden !important;
		opacity:1;
	}
	/* Gaveta cortada em cima quando logado no wp-admin (print do Ronaldo,
	   2026-07-27): a "admin bar" do WordPress ocupa espaco real no topo da
	   tela pra quem esta logado, e nossa gaveta usava "top:0" fixo,
	   ignorando isso - o cabecalho "Pesquisar"/X ficava atras da admin bar,
	   so aparecendo se a pagina fosse rolada (a admin bar, no mobile, rola
	   junto com a pagina normalmente, nao fica fixa). A gaveta do menu
	   hamburguer NUNCA teve esse problema porque o proprio Astra ja
	   resolve isso nativamente (".ast-mobile-popup-drawer", visto no CSS
	   dinamico dele: "body.admin-bar{top:32px}" e "@media(max-width:782px)
	   body.admin-bar{top:46px}") - replicando exatamente o mesmo padrao
	   aqui, pros dois ficarem alinhados (mesmo pedido do Ronaldo: "a mesma
	   altura da gaveta do hamburguer"). */
	body.admin-bar #ast-mobile-header .ast-header-search .ast-search-menu-icon.slide-search .search-form{
		top:32px;
		height:calc(100vh - 32px);
	}
	#ast-mobile-header .ast-header-search .ast-search-menu-icon.slide-search.ast-dropdown-active .search-form{
		transform:translateX(0) !important;
		visibility:visible !important;
		/* Overlay escuro atras da gaveta, mesma linguagem visual da gaveta do
		   menu (".ast-mobile-popup-overlay" do proprio Astra). Tentativa
		   inicial era um "body::after" com ":has()" (sem JS/markup novo),
		   mas nao renderizava de forma confiavel (confirmado via Playwright
		   headless, 2026-07-27 - o "elementFromPoint" fora da gaveta
		   continuava achando o conteudo da pagina, nao um overlay).
		   Substituido por um truque de box-shadow com espalhamento gigante
		   (9999px) direto na propria gaveta: preenche o resto da tela com
		   preto translucido sem depender de nenhum recurso novo de CSS,
		   suporte universal. Mantido o box-shadow direcional original (8px
		   0 30px) para a sombra de profundidade na borda da gaveta. */
		box-shadow:8px 0 30px rgba(0,0,0,.25), 0 0 0 9999px rgba(0,0,0,.5);
	}
	/* Cabecalho da gaveta de busca ("Pesquisar" + botao X na mesma linha,
	   ACIMA da barra nativa), igual a referencia da Velas Inspire mandada
	   pelo Ronaldo (2026-07-27). Criado via JS (header.js), aqui so o
	   layout. Antes o X era "position:absolute" flutuando por cima da
	   barra de busca - trocado pra fluxo normal (flex row), mais previsivel
	   e sem risco de ficar coberto/mal posicionado. */
	#ast-mobile-header .laluce-search-drawer-header{
		display:flex;
		align-items:center;
		justify-content:space-between;
		width:100%;
		flex-shrink:0;
		margin-bottom:20px;
	}
	/* Mesmo estilo/fonte do titulo "Categorias" (".laluce-mobile-heading"
	   logo abaixo), a pedido do Ronaldo (2026-07-28) - antes usava Playfair
	   Display serifada, destoando do titulo de categorias. */
	#ast-mobile-header .laluce-search-drawer-title{
		font-size:.8rem;
		font-weight:700;
		text-transform:uppercase;
		letter-spacing:.04em;
		color:var(--petrol);
	}
	#ast-mobile-header .laluce-search-drawer-close{
		width:26px;
		height:26px;
		flex-shrink:0;
		display:flex;
		align-items:center;
		justify-content:center;
		background:transparent;
		border:none;
		box-shadow:none;
		font-size:22px;
		line-height:1;
		color:var(--petrol);
		cursor:pointer;
	}
	/* Divisor apos a barra de busca (antes da lista de categorias). Espaco
	   entre o divisor e o titulo "Categorias" (margin-bottom) igualado aos
	   16px de "padding-top" da ".laluce-mobile-heading" (gaveta do
	   hamburguer), a pedido do Ronaldo (2026-07-28) - antes era 4px, folga
	   bem menor que a da outra gaveta. */
	#ast-mobile-header .laluce-search-drawer-divider{
		width:100%;
		flex-shrink:0;
		border:none;
		border-top:1px solid rgba(0,59,70,.12);
		margin:20px 0 16px;
	}
	/* Titulo "Categorias" dentro da gaveta de busca: clone via JS de
	   ".laluce-mobile-heading" (mesmo titulo do painel do hamburguer), entao
	   ja reaproveita a fonte/estilo daquela classe automaticamente - so
	   zera a borda/respiro superior porque aqui quem separa da barra de
	   busca acima e o ".laluce-search-drawer-divider" logo acima dela. */
	#ast-mobile-header .laluce-search-drawer-categorias-heading{
		margin:0 0 8px;
		padding-top:0;
		border-top:none;
	}
	/* Lista de categorias dentro da gaveta de busca: clone via JS de
	   ".laluce-mobile-categorias-menu" (mesma do painel do hamburguer),
	   entao ja reaproveita o estilo daquela classe (cor, padding, hover,
	   separador entre itens) automaticamente - so precisa garantir que
	   role dentro da gaveta se a lista de categorias for maior que o
	   espaco disponivel. */
	#ast-mobile-header .laluce-search-drawer-categorias{
		width:100%;
		flex:1 1 auto;
		overflow-y:auto;
	}
	/* Gaveta do menu hamburguer: largura igualada a gaveta de busca (85%,
	   max 360px), em vez do padrao do proprio Astra (max-width:90%, quase
	   tela cheia) - pedido do Ronaldo, 2026-07-27, ja que tem espaco de
	   sobra e nenhum item do menu e prejudicado. O botao de fechar nativo
	   do Astra ("#menu-toggle-close") ja existe, so ficava dificil de notar
	   numa gaveta quase do tamanho da tela toda. */
	#ast-mobile-popup .ast-mobile-popup-inner{
		width:85% !important;
		max-width:360px !important;
	}
	/* Barra em pilula (input+botao) dentro da gaveta - o "label" e quem
	   embrulha os dois no markup do Astra, o "search-form" agora e o painel
	   inteiro da gaveta (acima). */
	#ast-mobile-header .ast-header-search .search-form label{
		display:flex;
		align-items:center;
		width:100%;
		height:44px;
		margin:0;
		background:#fff;
		border:1.5px solid rgba(0,59,70,.2);
		border-radius:999px;
		overflow:hidden;
		box-sizing:border-box;
	}
	#ast-mobile-header .ast-header-search .search-field{
		flex:1;
		width:100% !important;
		height:100%;
		border:none;
		background:transparent;
		padding:0 8px 0 18px !important;
		box-sizing:border-box;
		outline:none;
		color:var(--petrol);
		-webkit-appearance:none;
		appearance:none;
	}
	#ast-mobile-header .ast-header-search .search-submit{
		display:flex !important;
		align-items:center;
		justify-content:center;
		flex-shrink:0;
		width:28px;
		height:28px;
		margin:0 12px 0 0;
		padding:0;
		border:none;
		background:none;
		box-shadow:none;
		color:var(--petrol);
		cursor:pointer;
	}
	#ast-mobile-header .ast-header-search .search-submit .ast-icon{
		display:flex;
		align-items:center;
		justify-content:center;
		width:100%;
		height:100%;
	}
	#ast-mobile-header .ast-header-search .search-submit svg{
		width:100%;
		height:100%;
		margin:0 !important;
	}
}
/* Mesmo ajuste da admin bar acima (".search-form" com "body.admin-bar"),
   mas no breakpoint EXATO que o proprio Astra usa pra admin bar mobile
   (782px, onde ela passa a medir 46px em vez de 32px) - replicado à
   risca do CSS dinamico dele pra gaveta de busca ficar alinhada com a do
   menu hamburguer em qualquer largura. */
@media (max-width:782px){
	body.admin-bar #ast-mobile-header .ast-header-search .ast-search-menu-icon.slide-search .search-form{
		top:46px;
		height:calc(100vh - 46px);
	}
}

/* Rodape: fundo petroleo, texto branco. A opcao nativa do Astra para isso
   (footer-adv-bg-obj) nao se aplicou porque esta linha do rodape usa a
   paleta global do tema (--ast-global-color-4), entao sobrescrevemos aqui. */
.site-below-footer-wrap[data-section="section-below-footer-builder"]{
	background-color:var(--petrol) !important;
}
.site-below-footer-wrap[data-section="section-below-footer-builder"],
.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-footer-copyright,
.site-below-footer-wrap[data-section="section-below-footer-builder"] a{
	color:var(--cream);
}

/* Altura do rodape: zero padding em cima/embaixo (o border-top ja separa
   visualmente do conteudo), vale para desktop e mobile (sem media query).
   O Astra tambem forcava min-height:60px na linha do rodape (zerado). Causa
   real de o rodape continuar "alto" mesmo com o padding baixo (2026-07-22):
   o texto do copyright vem dentro de uma tag <p> (`<div class=
   "ast-footer-copyright"><p>...</p></div>`), que tem margem padrao do
   navegador (~16px em cima e embaixo) somando por cima do padding - nunca
   tinha sido zerada. Depois de zerar padding+margem, reduzido tambem o
   line-height do texto (1.2, era 1.65 herdado do body) para o pedido do
   Ronaldo de compactar ainda mais. */
.site-below-footer-wrap,
.site-below-footer-wrap[data-section="section-below-footer-builder"]{
	padding-top:0 !important;
	padding-bottom:0 !important;
	min-height:0 !important;
}
/* Causa real de nenhum ajuste anterior de padding/margem/line-height ter
   mudado a altura visivel (2026-07-22): esta regra do Astra trava a altura
   MINIMA da linha do grid interna do rodape em 60px, independente do
   conteudo - um elemento diferente do .site-below-footer-wrap acima, nunca
   sobrescrito ate agora. Achada via curl no CSS dinamico da propria pagina.
   Forcado tambem flex+center aqui (em vez de confiar no align-items do
   proprio Astra) porque so existe UMA secao no rodape (copyright) - seguro
   sobrescrever sem quebrar outras colunas, que nao existem neste projeto. */
.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row{
	min-height:50px !important;
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
}
.ast-footer-copyright p{
	margin:0 !important;
	line-height:1.2 !important;
}

/* Copyright do rodape no mobile: fonte fluida + respiro nas 2 laterais
   (2026-09-03, achado no celular real do Ronaldo - Samsung A55 - que o
   navegador simulado a 390px nao pegava; 4a rodada em 2026-09-04, a pedido
   dele para a fonte ficar visivelmente maior - as 3 primeiras tentativas
   do mesmo dia nao surtiram efeito visivel por um BUG REAL descoberto so'
   agora, checando ao vivo com Playwright a pedido dele).
   O texto "Copyright (c) 2026 La Luce | Powered by Raccoon Digital" e'
   longo (54 caracteres) e antes usava um tamanho FIXO (10px), que
   encostava na borda em telas maiores e ficava pequeno demais em outras.
   O tamanho escala com a largura da tela ("vw", mesma tecnica de
   ".laluce-rodape-legais" abaixo) para o texto ocupar a largura do
   rodape (descontado o padding) em qualquer aparelho, com piso de 10px
   (nao fica ilegivel a partir de ~320px) e teto de 16px - o mesmo
   "font-size:1rem" que o Astra aplica no desktop
   (".ast-footer-copyright.site-footer-focus-item", default do tema, sem
   customizacao salva), entao a fonte nunca fica maior que a do desktop.
   BUG REAL DO PADDING (achado 2026-09-04, via Playwright): o proprio Astra
   renderiza DOIS elementos aninhados com a MESMA classe ".ast-footer-copyright"
   - um DIV externo (".ast-builder-layout-element...ast-footer-copyright",
   o container flex que vira coluna aqui embaixo) e, dentro dele, um DIV
   interno so' com essa classe, envolvendo o "<p>" (markup nativo do Astra,
   "footer_copyright()", nao e' nada nosso). O seletor generico usado nas
   3 primeiras rodadas ("...wrap .ast-footer-copyright") batia nos DOIS,
   entao o padding lateral era aplicado EM DOBRO (ex.: "8px" virava 16px
   efetivos de cada lado) - o respiro real sempre foi o DOBRO do numero
   escrito aqui, e as 3 tentativas de aumentar a fonte compensando o
   respiro nunca refletiam o respiro de verdade, ora sobrando espaco (fonte
   pequena, aumento imperceptivel), ora faltando (fonte grande, quebra de
   linha). Corrigido restringindo esta regra so' ao DIV EXTERNO
   (".ast-footer-copyright.ast-builder-layout-element", mesmo escopo da
   regra de "flex-direction:column" abaixo) - o padding agora e' aplicado
   uma UNICA vez.
   Com o respiro corrigido (unico, nao duplicado), recalibrado com a
   largura REAL do texto renderizado (medida via Playwright: ~24.3
   "larguras de fonte" pro texto inteiro) meta de 6px de respiro em cada
   lado e "vw" testado ao vivo em 320/360/390/414/480/544px sem quebrar
   linha em nenhuma, sempre parando no teto de 16px a partir de ~380px. */
@media (max-width:921px){
	.ast-footer-copyright p{
		font-size:clamp(10px,3.6vw,16px) !important;
	}
	.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-footer-copyright.ast-builder-layout-element{
		padding-left:6px !important;
		padding-right:6px !important;
	}
}

/* Rodape: links das paginas legais (Privacidade / Termos / Trocas), logo
   acima do copyright - pedido do Ronaldo, 2026-09-02. A marcacao vem de
   inc/rodape.php, num hook do proprio Astra ("astra_footer_copyright",
   prioridade 5), entao os links entram DENTRO do mesmo elemento do
   copyright. Esse elemento e' flex por CSS dinamico do Astra
   (".ast-footer-copyright.ast-builder-layout-element{display:flex}"), o
   que colocaria links e copyright lado a lado - por isso a coluna aqui.
   So existe UMA secao neste rodape (copyright), entao empilhar aqui nao
   afeta nenhuma outra coluna. */
.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-footer-copyright.ast-builder-layout-element{
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;
	padding:10px 0;
}
/* Uma linha so, centralizada, com respiro entre os itens. "flex-wrap:nowrap"
   e' o que garante os 3 links na mesma linha em qualquer largura (junto com
   os rotulos curtos e a fonte fluida mais abaixo).

   TAMANHO DA FONTE (2a rodada de 2026-09-02, pedido do Ronaldo): 12px, em
   vez dos 14px do menu de categorias da 1a versao. O pedido foi "no desktop,
   o mesmo tamanho da fonte que usei no mobile" - e no mobile o tamanho era
   fluido (3vw), ou seja, nao ha um numero unico: da' ~11,7px num celular de
   390px de largura, que e' a faixa comum. Fixado 12px, que e' esse valor
   arredondado, e o teto da regra de tela estreita mais abaixo desceu junto,
   pra fonte ser a MESMA em todas as larguras, so encolhendo abaixo de 400px
   pra continuar cabendo numa linha.

   SEM SUBLINHADO (mesma rodada): o "underline" da 1a versao foi retirado a
   pedido dele - segue o padrao dos demais links do site, que tambem nao tem
   sublinhado. O estado de hover continua sendo so' a troca de cor (creme ->
   laranja). Nao reintroduzir sublinhado aqui sem pedido explicito. */
.laluce-rodape-legais{
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	justify-content:center;
	gap:0.85em;
	font-size:12px;
	line-height:1.2;
}
.laluce-rodape-legais a{
	color:var(--cream);
	text-decoration:none;
}
.laluce-rodape-legais a:hover,
.laluce-rodape-legais a:focus{
	color:var(--orange);
	text-decoration:none;
}
/* Ponto separador: creme suavizado, para pontuar sem competir com os links. */
.laluce-rodape-legais-sep{
	color:var(--cream);
	opacity:0.55;
}

/* Celular estreito: fonte fluida (encolhe com a largura da tela) para os 3
   links caberem na linha ate' nos aparelhos de 320px, sem ficar ilegivel. O
   teto e' o mesmo 12px do resto das larguras, entao acima de ~400px nada
   muda - so abaixo disso a fonte comeca a ceder. */
@media (max-width:544px){
	.laluce-rodape-legais{
		gap:0.6em;
		font-size:clamp(9px,3vw,12px);
	}
}

/* Botao "voltar ao topo" (elemento nativo do Astra, "#ast-scroll-top", so
   aparece depois de rolar a pagina): fundo marrom castanho da paleta em vez
   do petroleo - pedido do Ronaldo, 2026-09-02. O petroleo nao vinha de uma
   escolha propria: o CSS dinamico do Astra pinta esse botao com
   "--ast-global-color-0", que este tema aponta pro petroleo (ver a secao da
   paleta global do Astra). Aqui basta a mesma especificidade dele (1 ID),
   sem "!important", porque o style.css do filho e' carregado DEPOIS do bloco
   inline do Astra. */
#ast-scroll-top{
	background-color:var(--brown);
}

/* Formulario de captura de WhatsApp na Home (bloco "Captura de WhatsApp"),
   reaproveitando o mesmo visual do formulario da landing "Em breve" sobre
   fundo petroleo (ver coming-soon.html, variante .scheme-petrol). Raio
   trocado de "999px" (pilula) pra 5px (padrao do site) - pedido do Ronaldo,
   2026-08-22, campo e botao. */
.laluce-wa-form{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	width:100%;
	max-width:360px;
	margin:24px auto 0;
}
.laluce-wa-form input[type=tel]{
	width:100%;
	padding:13px 18px;
	border-radius:5px;
	font-size:1rem;
	font-family:inherit;
	border:1.5px solid rgba(245,245,220,.4);
	outline:none;
	text-align:center;
	background:rgba(255,255,255,.06);
	color:var(--cream);
}
.laluce-wa-form input[type=tel]::placeholder{
	color:var(--cream);
	opacity:.6;
}
.laluce-wa-form button{
	padding:13px 30px;
	border:none;
	border-radius:5px;
	font-family:inherit;
	font-weight:700;
	font-size:.98rem;
	cursor:pointer;
	white-space:nowrap;
	background:var(--orange);
	color:var(--petrol);
	transition:transform .06s ease,filter .15s ease;
}
.laluce-wa-form button:hover{ filter:brightness(1.05); }
.laluce-wa-form button:active{ transform:translateY(1px); }
.laluce-wa-form button:disabled{ opacity:.65; cursor:progress; filter:none; transform:none; }
.laluce-wa-msg{
	font-size:.92rem;
	margin-top:8px;
	min-height:1.2em;
	color:var(--cream);
	text-align:center;
}

/* Formulario de captura de e-mail na Home (bloco "Captura de e-mail"),
   variante clara (fundo creme) espelhando .scheme-marfim do coming-soon.html.
   Raio trocado de "999px" (pilula) pra 5px (padrao do site) - pedido do
   Ronaldo, 2026-08-22, campo e botao. */
.laluce-email-form{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px;
	width:100%;
	max-width:360px;
	margin:24px auto 0;
}
.laluce-email-form input[type=email]{
	width:100%;
	padding:13px 18px;
	border-radius:5px;
	font-size:1rem;
	font-family:inherit;
	border:1.5px solid rgba(0,59,70,.28);
	outline:none;
	text-align:center;
	background:#fff;
	color:var(--petrol);
}
.laluce-email-form input[type=email]::placeholder{
	color:var(--petrol);
	opacity:.5;
}
.laluce-email-form button{
	padding:13px 30px;
	border:none;
	border-radius:5px;
	font-family:inherit;
	font-weight:700;
	font-size:.98rem;
	cursor:pointer;
	white-space:nowrap;
	background:var(--petrol);
	color:var(--cream);
	transition:transform .06s ease,filter .15s ease;
}
.laluce-email-form button:hover{ filter:brightness(1.3); }
.laluce-email-form button:active{ transform:translateY(1px); }
.laluce-email-form button:disabled{ opacity:.65; cursor:progress; filter:none; transform:none; }
.laluce-email-msg{
	font-size:.92rem;
	margin-top:8px;
	min-height:1.2em;
	color:var(--petrol);
	text-align:center;
}

/* =========================================================================
 * Cabecalho principal (redesenho 2026-07-25, inspirado na Velas Inspire, ver
 * memory/velas-inspire.md e bin/setup-header-builder.sh): logo + busca +
 * Central de Atendimento + Bem-vindo(a) + carrinho, todos na linha "Primary
 * Header". O menu de categorias (#ast-hf-menu-1) foi movido pro "Below
 * Header" pelo script acima; a cor dele continua vindo da regra mais acima
 * neste arquivo (nao muda so por trocar de linha).
 * ========================================================================= */

/* CABECALHO DUPLICADO NO DESKTOP - trava de seguranca (2026-08-10, reportado
 * pelo Ronaldo com print: "ao alternar entre modo mobile e modo desktop, a
 * responsividade quebrou", cabecalho mobile aparecendo por baixo do de
 * desktop e a faixa do menu branca em vez de marrom). Reproduzido pixel a
 * pixel e rastreado.
 *
 * CAUSA: quem decide qual cabecalho aparece NAO e' a largura da tela - e' uma
 * classe que o Astra escreve NO SERVIDOR, a partir do User-Agent:
 *
 *     if ( wp_is_mobile() ) { $classes[] = 'ast-header-break-point'; }
 *     else                  { $classes[] = 'ast-desktop'; }
 *     (astra_body_classes(), inc/markup-extras.php do tema pai)
 *
 * Com essa classe no <body>, vale ".ast-header-break-point #ast-mobile-header
 * {display:block}" (main.min.css) - regra SEM media query nenhuma e com 1 ID
 * + 1 classe, que por isso vence o "@media (min-width:922px){#ast-mobile-
 * header{display:none}}" do CSS dinamico (1 ID, sem classe). Resultado: o
 * cabecalho mobile aparece em QUALQUER largura, junto com o de desktop, e a
 * faixa branca do print e' o menu mobile aparecendo onde nao devia.
 *
 * QUANDO ACONTECE, E QUANTO TEMPO DURA (importante nao exagerar o risco):
 * o JS do Astra corrige a classe sozinho comparando "window.innerWidth" com
 * o breakpoint, e faz isso ASSIM QUE O SCRIPT EXECUTA - nao espera
 * "DOMContentLoaded" nem "resize" (frontend.min.js: "o()" e' chamado na
 * propria expressao que o define, junto com o "ast-header-loaded"). Ou seja:
 *
 *   - EM PRODUCAO o estranho e' PASSAGEIRO. O WP Super Cache esta' com o
 *     suporte a mobile desligado ("wp_cache_mobile_enabled = 0", conferido),
 *     entao celular e desktop dividem o MESMO arquivo de cache e um visitante
 *     de desktop pode receber o HTML marcado como mobile - mas a classe e'
 *     consertada quando o "frontend.min.js" roda. O que sobra e' um PISCA de
 *     cabecalho duplicado ate' la', e e' esse pisca que a regra abaixo mata
 *     (CSS vale desde a 1a pintura; JS so' quando chega a vez dele).
 *   - NO DEVTOOLS o estranho PERSISTE, e foi assim que o Ronaldo achou: ao
 *     ligar o modo dispositivo o Chrome recarrega mandando User-Agent de
 *     celular; voltando pro desktop sem recarregar, a pagina fica com a
 *     classe de mobile numa janela larga e ninguem reavalia nada.
 *
 * A CORRECAO: fazer a visibilidade seguir a LARGURA REAL DA TELA, que e' o
 * que "responsivo" quer dizer, em vez de um palpite de User-Agent feito no
 * servidor. So' este sentido precisa de regra: o caminho inverso (classe
 * "ast-desktop" numa tela estreita) ja' funciona sozinho - testado a 390px,
 * o cabecalho de desktop se esconde certo.
 *
 * "!important" e' necessario: a regra do Astra tem a MESMA especificidade
 * (1 ID + 1 classe), entao so' o "!important" desempata. Nao ha' como vencer
 * so' com seletor sem inventar peso artificial.
 *
 * ESCOPO DA TRAVA: ela cobre o sintoma GRAVE (dois cabecalhos empilhados e a
 * faixa branca do menu mobile aparecendo no desktop). Outros efeitos menores
 * da classe trocada - o menu do desktop fica apagado e estreito - continuam
 * enquanto a classe estiver errada, e somem no primeiro carregamento normal.
 * Nao foram perseguidos um a um de proposito: seria caca a sintoma, e o JS do
 * Astra ja' resolve a origem em toda carga real. */
@media (min-width:922px){
	.ast-header-break-point #ast-mobile-header{
		display:none !important;
	}
}

/* Icones de interface (mask + background-color:currentColor - mesmo esquema
   do design.md, usado aqui pela primeira vez dentro do style.css). currentColor
   deixa o icone seguir a cor do texto ao redor: creme no gatilho sobre
   petroleo, petroleo dentro do painel branco - sem variavel por contexto. */
.ic{
	display:inline-block;
	width:18px;
	height:18px;
	flex-shrink:0;
	background-color:currentColor;
	-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;
	-webkit-mask-position:center;
	mask-position:center;
	-webkit-mask-size:contain;
	mask-size:contain;
}
.ic-chat{ -webkit-mask-image:url(assets/icons/chat-pb.svg); mask-image:url(assets/icons/chat-pb.svg); }
.ic-person{ -webkit-mask-image:url(assets/icons/person-pb.svg); mask-image:url(assets/icons/person-pb.svg); }
.ic-phone{ -webkit-mask-image:url(assets/icons/phone-pb.svg); mask-image:url(assets/icons/phone-pb.svg); }
.ic-envelope{ -webkit-mask-image:url(assets/icons/envelope-pb.svg); mask-image:url(assets/icons/envelope-pb.svg); }
.ic-clock{ -webkit-mask-image:url(assets/icons/clock-pb.svg); mask-image:url(assets/icons/clock-pb.svg); }
.ic-box{ -webkit-mask-image:url(assets/icons/box-pb.svg); mask-image:url(assets/icons/box-pb.svg); }
.ic-heart{ -webkit-mask-image:url(assets/icons/heart-pb.svg); mask-image:url(assets/icons/heart-pb.svg); }
.ic-tag{ -webkit-mask-image:url(assets/icons/tag-pb.svg); mask-image:url(assets/icons/tag-pb.svg); }
.ic-trash{ -webkit-mask-image:url(assets/icons/trash-pb.svg); mask-image:url(assets/icons/trash-pb.svg); }
.ic-cart{ -webkit-mask-image:url(assets/icons/cart-pb.svg); mask-image:url(assets/icons/cart-pb.svg); }
.ic-wa{ -webkit-mask-image:url(assets/icons/wa-pb.svg); mask-image:url(assets/icons/wa-pb.svg); }
.ic-chevron-down{ width:14px; height:14px; -webkit-mask-image:url(assets/icons/chevron-down-pb.svg); mask-image:url(assets/icons/chevron-down-pb.svg); }
.ic-chevron-right{ width:16px; height:16px; -webkit-mask-image:url(assets/icons/chevron-right-pb.svg); mask-image:url(assets/icons/chevron-right-pb.svg); }
.ic-sort{ width:16px; height:16px; -webkit-mask-image:url(assets/icons/sort-pb.svg); mask-image:url(assets/icons/sort-pb.svg); }
.ic-filter{ width:16px; height:16px; -webkit-mask-image:url(assets/icons/filter-pb.svg); mask-image:url(assets/icons/filter-pb.svg); }
/* ".ic-search" foi removida - a lupa da busca parou de usar mask-image (ver
   funcao "laluce_render_search_icon()" em functions.php pro motivo: virou
   SVG inline de verdade). Os outros icones deste conjunto continuam via
   mask normalmente. */

/* Zona direita da linha principal (Atendimento, Bem-vindo, Carrinho): espaco
   entre os tres grupos. */
.site-header-primary-section-right{
	display:flex;
	align-items:center;
	gap:20px;
}

/* Barra de busca sempre aberta, em vez do padrao "icone que expande" do
   Astra free (o campo comeca em width:0 ate ganhar .ast-dropdown-active via
   clique - achado em inc/extras.php:astra_search_static_css()). A Velas
   Inspire usa uma barra sempre visivel, entao forcamos aberto. A coluna
   central da linha principal tambem precisa esticar: por padrao o Astra usa
   grid-template-columns:1fr auto 1fr nessa linha (".ast-grid-center-col-layout",
   achado no CSS minificado do tema), ou seja o CENTRO fica do tamanho do
   conteudo e as LATERAIS esticam - o oposto do que queremos aqui. */
.main-header-bar .ast-builder-grid-row.ast-grid-center-col-layout{
	grid-template-columns:auto 1fr auto;
}
.main-header-bar .site-header-primary-section-center{
	width:100%;
	display:flex;
	justify-content:center;
}
/* O markup do Astra tem TRES elementos disputando espaco dentro do wrapper
   (astra_get_search() em markup-extras.php): o <form> com um <label> que
   embrulha input+botao de submit (esse com sua PROPRIA lupa), e um segundo
   elemento IRMAO ".ast-search-icon" com outra lupa (o gatilho do modo
   "desliza ao clicar", inutil aqui porque a barra fica sempre aberta - esse
   continua escondido). O <label> nao e flex nem tem largura definida em
   lugar nenhum do tema, entao ele encolhe pro tamanho do conteudo (motivo
   real de o campo nunca preencher a barra toda). */
/* MUDANCA DE ESTRATEGIA (5a tentativa pra lupa aparecer): as 4 tentativas
   anteriores (span+mask externo, span+mask data-URI, svg inline via
   margem negativa, svg inline via grid sobreposto) tinham algo em comum -
   TODAS injetavam um elemento NOVO, IRMAO de ".ast-search-menu-icon", que
   precisava se sobrepor visualmente a ele por CSS (absolute, margem
   negativa ou grid-area compartilhada). Nenhuma apareceu na tela do
   Ronaldo, mesmo confirmando via DevTools que o elemento existia com
   tamanho correto - ou seja, o problema era a propria SOBREPOSICAO, nao o
   icone em si. Solucao: parar de sobrepor. O proprio Astra ja renderiza um
   botao de busca (".search-submit") DENTRO do <label>, ao lado do <input>,
   no fluxo normal (nao precisa se sobrepor a nada porque MORA no lugar
   certo por definicao do proprio markup do tema) - so estava escondido.
   Em vez de escondido + reinventado do zero, agora e so RESTILIZADO (cor,
   tamanho, sem fundo/borda de botao). O SVG dele ja usa "fill:currentColor"
   por padrao no proprio CSS do Astra (".ast-icon svg:not([fill])", achado
   em class-astra-icons.php - o path nao tem atributo "fill" proprio), entao
   so precisamos definir a cor no elemento pai.

   Escopado a partir de 2026-07-27 para DESKTOP apenas (min-width:922px): o
   mobile passou a ter busca tambem (bin/setup-mobile-header.php), e sem essa
   media query esse bloco inteiro (que forca a barra "sempre aberta" e
   esconde o icone de toggle) tambem valeria pro mobile, ficando uma barra
   larga (max-width:520px) espremida ao lado do hamburguer. No mobile e
   melhor deixar o comportamento NATIVO do Astra (icone compacto que abre a
   busca ao toque, o mesmo ".ast-search-icon" que aqui embaixo so escondemos
   pro contexto desktop). */
@media (min-width:922px){
.ast-header-search{
	width:100%;
	max-width:520px;
	margin:0 auto;
}
.ast-header-search .ast-search-menu-icon{
	width:100%;
}
.ast-header-search .ast-search-menu-icon.slide-search{
	display:flex !important;
	align-items:center;
	background:#fff;
	border:1.5px solid rgba(0,59,70,.2);
	border-radius:999px;
	overflow:hidden;
	box-sizing:border-box;
	visibility:visible !important;
	opacity:1 !important;
	height:40px;
}
.ast-header-search .ast-search-menu-icon.slide-search .search-form{
	flex:1;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	border:none;
	background:transparent;
	display:flex !important;
	align-items:center;
	visibility:visible !important;
	opacity:1 !important;
}
/* O <label> e o filho direto do form em flex (nao o <input> diretamente) -
   sem isso esticar, o width:100% do input nao tem em relacao a que esticar. */
.ast-header-search .search-form label{
	display:flex;
	align-items:center;
	flex:1;
	width:100%;
	height:100%;
	margin:0;
}
.ast-header-search .search-field{
	flex:1;
	width:100% !important;
	height:100%;
	border:none;
	background:transparent;
	padding:0 8px 0 18px !important;
	box-sizing:border-box;
	outline:none;
	-webkit-appearance:none;
	appearance:none;
}
/* Moldura pontilhada ao focar: o Astra ja tenta zerar isso
   (".search-form input.search-field:focus{outline:none}", achada no CSS
   inline da propria pagina), mas quem realmente pinta o pontilhado e uma
   regra do PROPRIO tema (main.min.css) que mira o input pelo atributo
   "input[type=search]:focus{outline:thin dotted}" - mesma especificidade
   da correcao do Astra em pontos diferentes do cascade, entao nao da pra
   confiar em qual vence. Regra propria, com !important, elimina a duvida. */
.ast-header-search .search-field:focus{
	outline:none !important;
	box-shadow:none !important;
	border:none !important;
}
/* O gatilho "desliza ao clicar" (".ast-search-icon", IRMAO do form, fora
   dele) continua sem uso, some. O botao de busca nativo (".search-submit",
   DENTRO do form) NAO some mais - ver bloco de comentario acima: agora e
   restilizado em vez de escondido+reinventado. */
.ast-header-search .ast-search-icon{
	display:none !important;
}
.ast-header-search .search-submit{
	display:flex !important;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
	width:28px;
	height:28px;
	margin:0 22px 0 0;
	padding:0;
	border:none;
	background:none;
	box-shadow:none;
	color:var(--petrol);
	cursor:pointer;
}
.ast-header-search .search-submit .ast-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
}
/* O Astra tem uma regra propria (".ast-icon.icon-search svg{margin-top:3px;
   margin-right:2px}") que desalinhava o icone verticalmente - zerada aqui. */
.ast-header-search .search-submit svg{
	width:100%;
	height:100%;
	margin:0 !important;
}
} /* fim @media (min-width:922px) - busca desktop */

/* Carrinho nativo do Astra (elemento "woo-cart", icone "bag" configurado por
   bin/setup-header-builder.sh): recolorindo pra combinar com a paleta e
   removendo a moldura quadrada que o Astra aplica por padrao (classe
   "ast-menu-cart-with-border", fixa no array em
   class-astra-woocommerce.php:3451 - nao da pra tirar por opcao do
   Customizer, so via CSS mesmo). Selector do contador achado no CSS
   dinamico do proprio tema (class-astra-dynamic-css.php:
   ".ast-site-header-cart i.astra-icon:after"). Tamanho igual ao icone de
   gatilho aumentado (.laluce-trigger-icon, ver abaixo), pro trio
   Atendimento/Bem-vindo/Carrinho ficar visualmente parelho. */
.ast-site-header-cart,
.ast-site-header-cart .cart-container,
.ast-site-header-cart i.astra-icon{
	border:none !important;
	box-shadow:none !important;
	background:none !important;
}
.ast-site-header-cart .cart-container,
.ast-site-header-cart .cart-container:focus,
.ast-site-header-cart .cart-container:focus-visible{
	outline:none !important;
}
/* A moldura azul de verdade: achada no CSS inline da propria pagina -
   ".ast-menu-cart-outline .ast-addon-cart-wrap{border-style:solid;
   border-color:var(--ast-global-color-0);border-width:2px}". E o estilo
   "Outline" nativo do icone do carrinho (2px, cor de destaque global do
   tema), num elemento (".ast-addon-cart-wrap") que as regras acima nunca
   miravam - por isso nao sumia. */
.ast-addon-cart-wrap{
	border:none !important;
}
.ast-site-header-cart .astra-icon,
.ast-site-header-cart .ic-cart{
	width:30px !important;
	height:30px !important;
}
/* Icone do carrinho: trocado do SVG nativo do Astra por um proprio (mesmo
   esquema mask-image + currentColor dos triggers "Central de Atendimento"/
   "Bem-vindo(a)", ver laluce_custom_cart_icon() em functions.php e
   identidade-visual/svg/cart-icon-opcao-c-com-trelica.svg, aprovado pelo
   Ronaldo em 2026-08-13), para bater visualmente com o resto do cabecalho. */
.ast-site-header-cart .ic-cart{
	background-color:var(--cream) !important;
}
.ast-site-header-cart:hover .ic-cart{
	background-color:var(--orange) !important;
}
.ast-site-header-cart i.astra-icon:after{
	background-color:var(--orange) !important;
	color:var(--petrol) !important;
}

/* Dropdowns "Central de Atendimento" e "Bem-vindo(a)" (functions.php,
   laluce_render_central_atendimento/laluce_render_bem_vindo). Gatilho sobre
   fundo petroleo (creme, laranja no hover, mesmo padrao do menu); painel
   flutuante em branco com texto petroleo. */
.laluce-hdrop{
	position:relative;
}
/* Icone de gatilho (Central de Atendimento / Bem-vindo(a)): mesma altura do
   texto em duas linhas ao lado. */
.laluce-trigger-icon{
	width:30px;
	height:30px;
}
.laluce-hdrop-trigger,
.laluce-hdrop-trigger:hover,
.laluce-hdrop-trigger:focus,
.laluce-hdrop-trigger:focus-visible,
.laluce-hdrop-trigger:active,
.laluce-hdrop-trigger[aria-expanded="true"]{
	display:flex;
	align-items:center;
	gap:8px;
	background:none !important;
	background-color:transparent !important;
	border:none;
	outline:none;
	box-shadow:none;
	-webkit-appearance:none;
	appearance:none;
	cursor:pointer;
	padding:8px 4px;
	color:var(--cream);
	font-family:inherit;
	text-align:left;
	line-height:1.25;
}
/* So a cor do texto/icone muda no hover/aberto - nunca fundo (pedido do
   Ronaldo, 2026-07-25: o azul que aparecia era o foco/hover padrao do
   navegador num <button> sem "appearance:none", corrigido acima). */
.laluce-hdrop-trigger:hover,
.laluce-hdrop-trigger:focus-visible,
.laluce-hdrop-trigger[aria-expanded="true"]{
	color:var(--orange);
}
.laluce-hdrop-label{
	font-size:.82rem;
	white-space:nowrap;
}
.laluce-hdrop-label strong{
	font-size:.88rem;
}
.laluce-hdrop-trigger[aria-expanded="true"] .ic-chevron-down{
	transform:rotate(180deg);
}
.ic-chevron-down{
	transition:transform .15s ease;
}

.laluce-hdrop-panel{
	display:none;
	position:absolute;
	top:100%;
	right:0;
	background:#fff;
	color:var(--petrol);
	border-radius:10px;
	box-shadow:0 12px 30px rgba(0,0,0,.18);
	padding:18px;
	width:280px;
	z-index:60;
}
#laluce-atendimento .laluce-hdrop-panel{
	left:0;
	right:auto;
}
/* Desktop: abre no hover (sem gap entre gatilho e painel, senao o mouse
   "perde" o hover no meio do caminho e o painel fecha sozinho). Mobile
   (ainda nao construido): abre no clique, via a classe "is-open" que o
   header.js aplica. */
@media (min-width:922px){
	.laluce-hdrop:hover .laluce-hdrop-panel{
		display:block;
	}
}
.laluce-hdrop.is-open .laluce-hdrop-panel{
	display:block;
}

.laluce-hdrop-item{
	display:flex;
	align-items:flex-start;
	gap:12px;
	padding:10px 0;
	border-bottom:1px solid rgba(0,59,70,.1);
}
.laluce-hdrop-item:last-of-type{
	border-bottom:none;
}
.laluce-hdrop-item .ic{
	margin-top:2px;
	color:var(--petrol);
}
.laluce-hdrop-item strong{
	display:block;
	font-size:.85rem;
	margin-bottom:2px;
}
.laluce-hdrop-item a,
.laluce-hdrop-item span{
	font-size:.88rem;
	color:var(--petrol);
	text-decoration:none;
}
.laluce-hdrop-item a:hover{
	color:var(--brown);
}

.laluce-hdrop-cta{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	margin-top:14px;
	padding:11px 16px;
	border-radius:999px;
	background:var(--petrol);
	color:var(--cream);
	font-weight:700;
	font-size:.9rem;
	text-decoration:none;
}
.laluce-hdrop-cta:hover{
	filter:brightness(1.2);
}

.laluce-account-greet{
	display:flex;
	align-items:center;
	gap:10px;
	padding-bottom:12px;
	margin-bottom:6px;
	border-bottom:1px solid rgba(0,59,70,.1);
	font-size:.92rem;
}
/* Avatar em circulo solido (boneco dentro do circulo, como na referencia) -
   de proposito diferente do icone de "Minha Conta" na lista abaixo (esse
   fica sem circulo, so o icone). Circulo petroleo + icone creme por cima,
   em vez de mask+cor sozinho, pra nao ficar "claro demais" (o problema
   antes era um circulo quase transparente atras de um icone fino). */
.laluce-avatar-badge{
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	flex-shrink:0;
	border-radius:999px;
	background:var(--petrol);
}
.laluce-avatar-badge .ic{
	width:18px;
	height:18px;
	color:var(--cream);
}

.laluce-hdrop-list{
	list-style:none;
	margin:0;
	padding:0;
}
.laluce-hdrop-list li + li{
	border-top:1px solid rgba(0,59,70,.08);
}
.laluce-hdrop-list a,
.laluce-hdrop-list button{
	display:flex;
	align-items:center;
	gap:10px;
	width:100%;
	padding:10px 2px;
	background:none;
	border:none;
	font-family:inherit;
	font-size:.9rem;
	color:var(--petrol);
	text-decoration:none;
	cursor:pointer;
	text-align:left;
}
.laluce-hdrop-list a:hover,
.laluce-hdrop-list button:hover{
	color:var(--brown);
}

.laluce-track-form{
	display:none;
	gap:8px;
	margin-top:10px;
}
.laluce-track-form.is-open{
	display:flex;
}
.laluce-track-form input{
	flex:1;
	padding:9px 12px;
	border-radius:999px;
	border:1.5px solid rgba(0,59,70,.25);
	font-family:inherit;
	font-size:.85rem;
	color:var(--petrol);
	outline:none;
}
.laluce-track-form input::placeholder{
	color:var(--petrol);
	opacity:.5;
}
.laluce-track-form button{
	display:flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	border-radius:999px;
	border:none;
	background:var(--petrol);
	cursor:pointer;
	flex-shrink:0;
}
.laluce-track-form button .ic{
	color:var(--cream);
}

/* Card do mini-carrinho (dropdown ao passar o mouse no icone do carrinho):
   MESMO design visual dos cards "Central de Atendimento"/"Bem-vindo(a)"
   acima (fundo branco, radius 10px, sombra, mesma paleta) - a pedido do
   Ronaldo (2026-08-07), que notou os 3 cards do cabecalho destoando entre
   si (o do carrinho ainda usava o visual generico do Astra/WooCommerce).
   O widget nativo (".widget_shopping_cart") ja tem "z-index:999999" e
   "position:absolute" prontos do Astra - reaproveitados, so os tokens
   visuais (cor/radius/sombra/espacamento) sao sobrescritos aqui, mesmo
   padrao ja usado no resto do cabecalho (ex.: ".ast-site-header-cart"
   acima, que so troca cor/tamanho do icone nativo em vez de reconstruir).

   BUG relatado junto (2026-08-07, print do Ronaldo): o card por vezes
   aparecia ATRAS do conteudo da pagina ao passar o mouse. Nao foi possivel
   reproduzir de forma confiavel testando ao vivo (varias larguras de tela,
   com e sem AJAX de carrinho em andamento) - o "z-index:999999" nativo ja
   vence qualquer conteudo comum da pagina nos testes feitos. Um "z-index"
   explicito (60, MESMO valor dos outros 2 cards do cabecalho,
   ja comprovado estavel nesta mesma fileira) foi fixado aqui como reforco
   preventivo; se o sumiço voltar a acontecer depois desta rodada, vale
   registrar a largura de tela/passos exatos pra investigar de novo. */
/* Especificidade por PROPRIEDADE, nao por bloco (gotcha recorrente neste
   projeto, ver tambem pagina-carrinho.md e pagina-categoria.md): o Astra
   estiliza esse widget inteiro com o padrao
   ".ast-site-header-cart .widget_shopping_cart X, .woocommerce
   .ast-site-header-cart .widget_shopping_cart X" (4 classes no 2o ramo).
   GOTCHA REAL (2026-08-07, achado pelo Ronaldo ao vivo - "o dropdown do
   carrinho parece ter revertido pro estilo antigo"): a 1a versao deste
   bloco copiava o PREFIXO ".woocommerce" do Astra pra empatar em
   especificidade - mas essa classe so' existe no body em paginas NATIVAS
   do WooCommerce (loja, produto, carrinho, checkout, minha conta). O
   dropdown do carrinho e' parte do CABECALHO, GLOBAL em toda pagina do
   site, inclusive a Home e qualquer pagina que NAO seja do WooCommerce -
   nessas paginas nao existe NENHUM ".woocommerce" ancestral, entao TODO
   este bloco silenciosamente nunca batia, caindo pro visual cru do Astra
   (280px, sem raio, sem sombra, sem padding) - so' nao ficava obviamente
   quebrado por coincidencia (o Astra ja usa uma cor de fundo clara por
   padrao, e os botoes ja saem em pilula por causa da config GLOBAL de
   botoes do site, sem relacao nenhuma com este bloco). Corrigido trocando
   o prefixo ".woocommerce .ast-site-header-cart" por
   ".ast-site-header-cart.ast-site-header-cart" (a MESMA classe repetida no
   mesmo elemento) - matematicamente a MESMA especificidade (2 classes,
   nao importa se estao no mesmo elemento ou em elementos diferentes), mas
   sem depender de nenhum ancestral que pode nao existir. */
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart{
	right:0;
	left:auto;
	background:#fff;
	color:var(--petrol);
	border-radius:10px;
	box-shadow:0 12px 30px rgba(0,0,0,.18);
	padding:18px;
	width:340px;
	z-index:60;
	border:none;
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart_content{
	color:var(--petrol);
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart ul.woocommerce-mini-cart{
	list-style:none;
	margin:0;
	padding:0 8px 0 0;
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item{
	position:relative;
	padding:10px 26px 10px 0;
	border-bottom:1px solid rgba(0,59,70,.1);
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item:first-child{
	padding-top:0;
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item:last-of-type{
	border-bottom:none;
	padding-bottom:0;
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item > a:not(.remove){
	display:flex;
	align-items:center;
	gap:10px;
	padding:0;
	font-size:.88rem;
	font-weight:600;
	color:var(--petrol);
	text-decoration:none;
	line-height:1.3;
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item > a:not(.remove):hover{
	color:var(--brown);
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item > a:not(.remove) img{
	position:static;
	left:auto;
	top:auto;
	transform:none;
	margin:0;
	width:44px;
	height:44px;
	flex-shrink:0;
	border-radius:5px;
	object-fit:cover;
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item .quantity{
	display:block;
	margin-top:4px;
	padding-left:54px;
	font-size:.8rem;
	color:var(--petrol);
	opacity:.7;
	overflow-wrap:normal;
	word-break:normal;
}
/* Icone de remover item: a MESMA lixeira vermelha do carrinho e da lista de
   desejos (".ic-trash" + "--heart-red", ver "body.woocommerce-cart
   .laluce-cart-remove" mais abaixo) no lugar do "x" nativo - pedido do
   Ronaldo (2026-08-17), pra loja inteira falar a mesma lingua na acao de
   remover. Quem troca o conteudo do link e' o PHP
   ("laluce_cart_item_remove_link", inc/cart.php); aqui fica so' o visual.
   Duas herancas do Astra precisam ser desmontadas (as duas pensadas pro "x"
   de texto, nao pra um icone): a moldura redonda desenhada por um
   pseudo-elemento (".woocommerce-js a.remove:before{border:1px solid ...;
   border-radius:100%}" - e' ela o "circulo" ao redor do x, ver
   assets/css/minified/compatibility/woocommerce/woocommerce-grid.min.css) e
   o "opacity:.5" da mesma regra, que apagaria o vermelho. Mesmo hover por
   opacidade do carrinho. Icone em 18px (nao 22px como no carrinho/desejos):
   aqui a linha do item e' compacta e a area reservada a' direita e' de 26px
   (ver "padding" do "li" acima). */
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item a.remove{
	position:absolute;
	top:10px;
	right:0;
	display:flex;
	align-items:center;
	justify-content:center;
	width:20px;
	height:20px;
	padding:0;
	border:none;
	border-radius:0;
	color:var(--heart-red);
	opacity:1;
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item a.remove::before{
	content:none;
	border:none;
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item a.remove .ic{
	width:18px;
	height:18px;
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart li.woocommerce-mini-cart-item a.remove:hover{
	color:var(--heart-red);
	opacity:.7;
}

/* Gaveta de carrinho do MOBILE (".astra-cart-drawer", elemento separado do
   dropdown acima): sai do MESMO template do WooCommerce
   ("cart/mini-cart.php"), entao o link de remover tambem ja vem com a
   lixeira pelo PHP - so' o visual precisa acompanhar aqui, senao o icone
   sairia cinza e dentro da moldura redonda do Astra. Hoje essa gaveta nao e'
   alcancavel na loja (o clique no icone do carrinho no mobile leva pra
   /carrinho/, ver bin/setup-carrinho-mobile.php + memory/
   cabecalho-mini-carrinho.md), mas o markup existe no DOM em toda pagina -
   estas 3 regras evitam que ela apareca errada se a opcao mudar. */
.astra-cart-drawer .woocommerce-mini-cart a.remove{
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:0;
	color:var(--heart-red);
	opacity:1;
}
.astra-cart-drawer .woocommerce-mini-cart a.remove::before{
	content:none;
	border:none;
}
.astra-cart-drawer .woocommerce-mini-cart a.remove .ic{
	width:18px;
	height:18px;
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	margin:14px 0 0;
	padding-top:14px;
	border-top:1px solid rgba(0,59,70,.1);
	font-size:.9rem;
	color:var(--petrol);
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total strong{
	width:auto;
	font-weight:700;
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons{
	display:flex;
	flex-direction:column;
	gap:8px;
	margin:14px 0 0;
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:11px 16px;
	border-radius:999px;
	font-weight:700;
	font-size:.9rem;
	text-decoration:none;
	text-align:center;
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout){
	background:none;
	border:1.5px solid var(--petrol);
	color:var(--petrol);
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.wc-forward:not(.checkout):hover{
	background:rgba(0,59,70,.06);
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.checkout{
	background:var(--petrol);
	border:none;
	color:var(--cream);
}
.ast-site-header-cart.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons a.button.checkout:hover{
	filter:brightness(1.2);
}

/* Linha divisoria clara entre o cabecalho principal e o menu de categorias:
   e a borda inferior padrao do Astra pra linha "Primary Header"
   (".main-header-bar{border-bottom-width:1px}", achada no CSS inline da
   propria pagina), que so ficou visivel/estranha agora que virou fronteira
   entre duas linhas de cor diferente. */
.main-header-bar{
	border-bottom:none !important;
}

/* Altura fixa do "Below Header" (menu Home/Shop/Sample Page): o Astra trava
   min-height:60px em DOIS elementos ao mesmo tempo - o wrap externo
   (".ast-below-header-bar") e o wrap interno (".site-below-header-wrap"),
   achados no CSS inline da propria pagina (mesmo padrao ja documentado pro
   rodape em blueprints.md). Na 1a rodada so tinha zerado o interno, por
   isso a reducao nao "colava" direito - o externo continuava reservando
   60px por baixo. Reduzido mais 2px a pedido do Ronaldo (58px -> 56px),
   aplicado aos dois agora. O ".ast-below-header-bar" tambem tem sua PROPRIA
   borda inferior (border-bottom, achada no mesmo CSS inline, diferente da
   borda do ".main-header-bar" ja removida acima) - removida junto, e uma
   provavel causa do espaco extra que sobrou entre o menu e o hero. */
.ast-below-header-bar,
.site-below-header-wrap{
	min-height:40px !important;
}
.ast-below-header-bar{
	border-bottom:none !important;
}
/* Linha fina cor petroleo, achada pelo Ronaldo (2026-08-22) so' no preset
   "Galaxy S20 Ultra" do Chrome (412px, DPR 3.5) - nao aparecia no "Galaxy
   S8+" nem em nenhum teste aqui num navegador com DPR inteiro (nao da' pra
   emular DPR fracionario neste ambiente). Causa mais provavel: a faixa
   petroleo do topo (".ast-primary-header-bar", #003b46, 80px de altura) e
   a faixa marrom de categorias (".ast-below-header-bar", #9a6856, logo
   abaixo, comecando exatamente onde a de cima termina) sao dimensionadas
   por mecanismos de CSS diferentes (padding+line-height vs min-height) -
   em DPR fracionario, as duas contas podem arredondar pra pixels de
   DISPOSITIVO adjacentes DIFERENTES nessa fronteira, abrindo uma fresta de
   1 pixel de dispositivo onde a cor petroleo de baixo (a mais escura das
   duas, batendo com o que o Ronaldo descreveu) aparece por baixo da faixa
   marrom. Corrigido estendendo o fundo marrom 1px pra CIMA via
   "box-shadow" (nao afeta layout/altura, so pintura) - cobre a fresta nos
   dois sentidos de arredondamento, sem risco: e' a mesma cor que ja esta'
   ali, so' garante que ela sempre cobre a fronteira. */
.ast-below-header-bar{
	box-shadow:0 -1px 0 0 var(--brown);
}
/* Altura da faixa de categorias no MOBILE: mais 2px reduzida que o valor
   compartilhado acima (40px -> 34px), so no mobile, sem tocar no desktop.
   PRECISA vir DEPOIS da regra compartilhada acima no arquivo (mesmo
   seletor, mesmo !important - empate de especificidade e resolvido por
   ordem no arquivo, nao por estar dentro de um media query). A 1a
   tentativa desta reducao ficava la em cima, ANTES da regra de 40px, e por
   isso nunca vencia (2026-07-27). */
@media (max-width:921px){
	.ast-below-header-bar,
	.site-below-header-wrap{
		min-height:34px !important;
	}
}
/* O motivo real de "nada mudar" na rodada anterior: alem do min-height (que
   ja tinha sido zerado nos dois wraps acima), o Astra tambem forca
   line-height:60px direto no item de menu (".ast-below-header-bar
   .main-header-menu > .menu-item{line-height:60px}", achado no CSS inline
   da pagina) - e o line-height do TEXTO que estava sustentando a altura de
   60px, nao o min-height do container (mesma familia de bug ja documentada
   pro rodape em blueprints.md: "verificar se existe uma regra separada
   mirando o ELEMENTO INTERNO"). Fixado em 40px a pedido do Ronaldo. */
.ast-below-header-bar .main-header-menu > .menu-item{
	line-height:40px !important;
}
/* Fonte do menu de categorias: a regra que realmente manda e
   "#ast-hf-menu-1.main-header-menu .menu-link" (ver linha ~97) - essa aqui
   embaixo NUNCA vencia (ID bate classe), foi removida pra nao confundir de
   novo no futuro. */

/* Espaco em branco entre o menu de categorias e o hero: nao tinha nada a
   ver com o cabecalho (a borda removida acima nao era a causa real). E o
   padding padrao do Astra na area de conteudo - "#primary{padding:1.5em 0;
   margin:0}" (~24px), achado no CSS inline da pagina, a ULTIMA de varias
   regras "#primary" que vao se sobrescrevendo (mesma pegadinha do rodape:
   a regra que realmente vale nem sempre e a primeira que aparece). O hero
   e o primeiro elemento dentro de #primary, entao esse padding-top vira
   exatamente o espaco em branco visto antes dele. */
#primary{
	padding-top:0 !important;
}
/* O espaco em branco PERSISTIU mesmo depois do fix acima porque a causa real
   e outra, nada a ver com "#primary" nem com o cabecalho: esta pagina tem
   titulo e imagem destacada ocultos (config da propria pagina), e por isso o
   Astra ainda renderiza um <header class="entry-header ast-no-title
   ast-no-thumbnail ast-header-without-markup"> vazio entre o cabecalho e o
   conteudo - e da FAMILIA typography do tema (nao do header-dynamic-css) que
   aplica ".entry-header{margin-top:2em}" incondicionalmente, mesmo vazio
   (achado no CSS inline da propria pagina). O Astra ja tem um fix pronto pra
   isso (".ast-page-builder-template .entry-header.ast-header-without-markup
   {margin-top:0}"), mas so se aplica quando o body tem a classe
   "ast-page-builder-template" (paginas feitas com Elementor/Beaver) - esta
   pagina usa blocos nativos do WordPress, entao essa classe nunca entra e o
   fix do proprio Astra nunca dispara. Repetindo o mesmo fix sem exigir essa
   classe. */
.entry-header.ast-header-without-markup{
	margin-top:0 !important;
	margin-bottom:0 !important;
}
/* TERCEIRA causa, achada so agora inspecionando o DOM ao vivo pelo DevTools
   (print do Ronaldo): o proprio "#primary" tem uma MARGEM de 4em (~58px, nao
   e padding) vinda de uma regra do Astra pra layout "Plain Container" +
   "pagina unica" - ".yes-js.js_active .ast-plain-container.ast-single-post
   #primary{margin:4em 0}" (confirmado no HTML servido, dentro do bloco de
   estilo que por coincidencia de handle carrega junto com o CSS do plugin
   YITH Wishlist - nao tem relacao com o plugin, e regra do proprio tema).
   Especificidade dela e mais alta que a do fix de padding acima (tem ID +
   4 classes) mas "padding" e "margin" sao propriedades DIFERENTES, entao um
   nao cobria o outro - faltava zerar o margin-top tambem. */
#primary{
	margin-top:0 !important;
}

/* =========================================================================
 * Home: pontinhos de navegacao do hero (carrossel Spectra/Swiper), a pedido
 * do Ronaldo (2026-08-17). Dois pedidos juntos: tirar os pontinhos do
 * caminho do botao CTA (que ficava por cima da arte do banner) e trocar os
 * circulos por tracinhos/pilulas.
 *
 * O painel do bloco Slider so expoe a COR (atributo "arrowColor") e a
 * distancia ate o rodape ("dotsMarginTop", 20px, que vira "bottom:20px" no
 * ".swiper-pagination") - forma, tamanho e alinhamento horizontal nao tem
 * controle nenhum, dai virem daqui. O botao CTA desceu para essa mesma
 * faixa por atributo de bloco (padding inferior do Container = 20px,
 * bin/setup-home-slider.php): com os pontinhos encostados na direita e o
 * botao centralizado, os dois dividem a linha de baixo sem se sobrepor.
 *
 * O Swiper monta a bolinha a partir de variaveis CSS proprias
 * (assets/css/swiper-bundle.min.css: "width:var(--swiper-pagination-bullet-
 * width, var(--swiper-pagination-bullet-size, 8px))"), entao mudar o tamanho
 * e so redefinir as variaveis no ancestral - nao precisa brigar por
 * especificidade. O "border-radius:50%" (circulo), esse sim, esta fixo na
 * regra dele e precisa ser sobrescrito.
 * ========================================================================= */

.wp-block-uagb-slider .swiper-pagination{
	--swiper-pagination-bullet-width:22px;
	--swiper-pagination-bullet-height:5px;
	--swiper-pagination-bullet-horizontal-gap:4px;
	/* ".swiper-pagination-bullets" nativo e "left:0;width:100%" com
	   "text-align:center" - basta trocar o alinhamento do texto, os
	   pontinhos sao inline-block. O padding acompanha o respiro lateral
	   do resto do site. */
	text-align:right;
	padding-right:24px;
	/* A CAIXA dos pontinhos nao pode roubar o clique do que estiver embaixo
	   dela (2026-08-18, defeito medido ao vivo). Ela e' "position:absolute;
	   left:0; width:100%; z-index:10" e tem 26px de ALTURA - nao por causa
	   das pilulas, que tem 5px, mas do "line-height" herdado do corpo do
	   site, que estica a linha delas. Como o botao CTA foi trazido para essa
	   mesma faixa de baixo, os 26px caiam por cima dele: sobrava clicavel so'
	   a fatia de 13px acima da caixa, o que dava a impressao de que "clicar
	   no fundo do botao funciona, no texto nao" (o texto fica no meio, bem na
	   area coberta). Anular o ponteiro na caixa e devolve-lo so' nas pilulas
	   resolve sem mexer na posicao de nada: elas continuam clicaveis, que e'
	   o que o bloco pede com "clickable:true". */
	pointer-events:none;
}
.wp-block-uagb-slider .swiper-pagination-bullet{
	border-radius:3px;
	pointer-events:auto;
}

/* Clique do botao CTA do hero (2026-08-18, defeito relatado pelo Ronaldo:
   clicar EM CIMA DO TEXTO nao levava a lugar nenhum, so clicar no fundo
   laranja do botao funcionava).
   Causa: o rotulo e' texto selecionavel dentro de um carrossel que simula
   arrasto com o mouse ("simulateTouch" do Swiper, ligado por padrao). Com o
   ponteiro sobre o texto, o "mousedown" comeca uma SELECAO de texto; basta o
   ponteiro andar um ou dois pixels ate o "mouseup" para o navegador tratar
   aquilo como arrasto de selecao e NAO disparar o "click" no link. No fundo
   do botao nao ha texto para selecionar, entao ali o clique sempre completa -
   exatamente o padrao que o Ronaldo descreveu.
   Duas linhas de defesa: o rotulo deixa de receber ponteiro (o alvo do
   clique passa a ser sempre o proprio <a>) e o link inteiro deixa de ter
   texto selecionavel. O "cursor:pointer" e' repetido aqui de proposito: e' o
   sintoma que denuncia o problema (sem ele o ponteiro nem vira mao sobre o
   texto) e nao custa nada garantir. */
.wp-block-uagb-slider .uagb-infobox-cta-link{
	cursor:pointer;
	-webkit-user-select:none;
	user-select:none;
}
.wp-block-uagb-slider .uagb-infobox-cta-link .uagb-inline-editing{
	pointer-events:none;
}

/* =========================================================================
 * Home: hero no MOBILE (ate 767px, o mesmo corte que o Spectra usa), a
 * pedido do Ronaldo (2026-08-18). Tres mudancas que so valem no celular:
 * a altura passa a vir da proporcao da arte, o botao CTA sai de vista e
 * vira a area de toque do banner inteiro, e os pontinhos vao para o centro,
 * ocupando o lugar que era do botao.
 * ========================================================================= */

@media (max-width:767px){

	/* ALTURA PELA PROPORCAO, nao por numero fixo. As artes de celular sao
	   800x400 (o "2-1" no nome do arquivo e' isso). Altura fixa em px nunca
	   combina com largura de tela variavel: com os 200px que havia antes,
	   tela de 360px precisaria de 180 e cortava as laterais, tela de 430px
	   precisaria de 215 e cortava em cima e embaixo. Com "aspect-ratio" a
	   caixa tem sempre exatamente o formato da foto, em qualquer largura, e
	   o "background-size:cover" nao tem o que cortar.
	   Isso so funciona porque o script (bin/setup-home-slider.php) grava
	   "minHeightMobile" = 0 no Slider e no Container: qualquer altura minima
	   maior que a proporcao voltaria a cortar nas telas mais estreitas.
	   MUDAR ESTE VALOR se um dia a arte de celular deixar de ser 2:1. */
	.wp-block-uagb-slider .swiper-slide .wp-block-uagb-container{
		aspect-ratio:2/1;
	}

	/* O BANNER INTEIRO VIRA O LINK. Em vez de esconder o botao e inventar um
	   clique em JS, o proprio <a> do CTA e esticado sobre o slide: continua
	   sendo link de verdade (mesmo href, mesmo nome acessivel, abre com o
	   teclado), sem nenhuma marcacao nova - o que importa aqui, porque o
	   bloco e de save estatico e marcacao inventada invalidaria ele no
	   editor (ver bin/setup-home-slider.php).
	   O ancestral posicionado tem que ser o Container (slide 1) ou o
	   ".uagb-container-inner-blocks-wrap" (slides 2 e 3) - os dois cobrem o
	   banner inteiro, porque o script zera o padding inferior do Container no
	   mobile. Dai a regra do Info Box logo abaixo: sem ela, o <a> se prendia
	   ao proprio Info Box, que tem "position:relative" de fabrica e, sem
	   titulo e sem descricao, encolheu para 24px de altura - o link cobria
	   so' essa tirinha e o toque no banner nao fazia nada (defeito medido ao
	   vivo em 2026-08-18).
	   O "!important" aqui e' deliberado e nao tem alternativa razoavel: quem
	   declara esse "relative" e' uma regra do Spectra que mira TODO filho
	   direto do Container, escrita como "body .wp-block-uagb-container > *"
	   seguida de uma corrente de TREZE ":not(.classe)". Como o ":not()" soma
	   a especificidade do que esta dentro dele, aquilo pesa 14 classes; um
	   seletor nosso que vencesse por peso proprio seria ilegivel. Detalhe que
	   explica por que o defeito aparecia em UM slide so': a regra exige filho
	   DIRETO do Container, e isso so' acontece no slide 1, que e' "alignwide";
	   nos slides "alignfull" o Info Box fica dentro do
	   ".uagb-container-inner-blocks-wrap" e escapa dela. */
	.wp-block-uagb-slider .wp-block-uagb-info-box.uagb-infobox__content-wrap{
		position:static !important;
	}
	/* Cadeia de seletor longa de proposito na regra do <a>: o CSS que o
	   Spectra gera para o botao tem 6 classes (cor de fundo, padding, raio),
	   entao um seletor curto perderia a disputa. */
	.wp-block-uagb-slider .uagb-infobox__content-wrap .wp-block-button.uagb-ifb-button-wrapper .uagb-infobox-cta-link.wp-block-button__link{
		position:absolute;
		inset:0;
		padding:0;
		background-color:transparent;
		border:none;
		border-radius:0;
		box-shadow:none;
	}
	/* O rotulo sai da vista mas continua no documento: e ele que da nome ao
	   link para leitor de tela. "display:none" tiraria esse nome e deixaria
	   um link anonimo cobrindo o banner. */
	.wp-block-uagb-slider .uagb-infobox-cta-link .uagb-inline-editing{
		position:absolute;
		width:1px;
		height:1px;
		overflow:hidden;
		clip-path:inset(50%);
		white-space:nowrap;
	}

	/* Pontinhos ao centro, no lugar que era do botao. Continuam clicaveis
	   por cima do link do banner: o Swiper da "z-index:10" a
	   ".swiper-pagination", e o <a> esticado nao cria z-index proprio. */
	.wp-block-uagb-slider .swiper-pagination{
		text-align:center;
		padding-right:0;
	}
}

/* =========================================================================
 * Home: cards de "Nossas Categorias" (bloco woocommerce/featured-category),
 * a pedido do Ronaldo (2026-08-17). O raio de 5px do card e do botao "Ver
 * categoria" NAO estao aqui: os dois tem controle nativo no editor e por
 * isso viraram atributo de bloco (bin/setup-home-categorias.php) - repetir
 * em CSS criaria a armadilha classica de o painel mostrar um valor e o site
 * exibir outro. Aqui ficam so os dois ajustes sem controle equivalente:
 * alinhar titulo+botao no rodape do card e apertar o vao entre eles.
 * ========================================================================= */

/* Alinhamento no rodape: precisa ser nos DOIS niveis. O
   ".wc-block-featured-category" (o card) tem "align-items:center" nativo e
   e' quem posiciona o ".__wrapper"; o ".__wrapper" tem "height:100%", que
   nao resolve porque a altura do card vem de um "min-height" (280px inline,
   altura indefinida para efeito de porcentagem) - ou seja, sem mexer no
   card, o wrapper fica do tamanho do conteudo e centralizado, e alinhar
   dentro dele nao teria efeito nenhum. Especificidade de proposito acima da
   nativa (2 classes contra 1) para nao depender da ordem de carregamento
   entre o CSS do bloco e o do tema. */
.wp-block-woocommerce-featured-category.wc-block-featured-category,
.wc-block-featured-category .wc-block-featured-category__wrapper{
	align-items:flex-end;
	align-content:flex-end;
}
/* Vao entre o titulo da categoria e o botao. Valor absoluto de proposito
   (nao "reduzir o que existe"): o espaco vinha da margem padrao de <h2> do
   Astra somada a do bloco de botoes, entao fixar os tres numeros aqui
   deixa o resultado previsivel. O respiro ate a borda de baixo do card
   continua sendo o "padding:0 48px 16px" nativo do ".__inner-blocks". */
.wc-block-featured-category__inner-blocks .wp-block-woocommerce-category-title{
	margin-top:0;
	margin-bottom:10px;
}
.wc-block-featured-category__inner-blocks .wp-block-buttons{
	margin-top:0;
	margin-bottom:0;
}

/* =========================================================================
 * Home: faixa de selos de confianca logo abaixo do hero (Container +
 * 4x Info Box do Spectra, montado pelo Ronaldo no wp-admin), a pedido do
 * Ronaldo (2026-07-31), inspirado na Velas Inspire (ver
 * memory/velas-inspire.md). Escopado pela classe de ID do bloco Container
 * ("uagb-block-8a7cc172", gerada pelo proprio Spectra ao inserir o bloco -
 * so muda se o Container for apagado e recriado do zero) pra nao afetar
 * os Info Box do hero (Slider acima, layout "icone acima do titulo",
 * markup diferente: uagb-infobox-icon-above-title).
 * ========================================================================= */

/* Fundo bordo claro (2026-08-22, mesmo dia: "o background bordo da faixa
   deve ser 50% mais claro" - ver "--bordo-claro" no :root acima). Historico:
   bordo solido (mesmo dia, mais cedo); antes disso branco (2026-08-19);
   antes disso sem cor propria nenhuma, mostrando o fundo geral da pagina
   por baixo (ver memory/pendencias.md). Setado aqui via CSS (mesma tecnica
   ja usada no resto desta secao, direto na classe de ID do bloco) em vez de
   mexer no atributo do bloco no editor, porque o painel do Spectra pra
   "Background Type: Color" exige reconfigurar varios sub-campos (tipo, cor,
   opacidade) que o `wp:group` nao tem - aqui e' uma linha so. */
.uagb-block-8a7cc172{
	background-color:var(--bordo-claro);
}

/* Icone+titulo ("Icon Position: Left" no painel) formam um grupo inline;
   sem controle no painel pra isso, centralizado esse grupo e o subtitulo
   alinhado com o INICIO DO TITULO (nao do icone), rente por baixo dele
   (2026-07-31, ajuste a pedido do Ronaldo depois de ver o 1o resultado
   com o subtitulo centralizado no card inteiro - ficava desalinhado do
   titulo). Resolvido com CSS Grid em vez de flex: 2 colunas
   ("auto auto", largura de cada uma = a do proprio conteudo), grid
   inteiro centralizado no card via "justify-content:center" no
   container - isso mantem o grupo icone+titulo centralizado como
   unidade (igual antes) mas com o icone na coluna 1 e o
   titulo+subtitulo os DOIS na coluna 2, entao o subtitulo herda
   automaticamente a mesma posicao horizontal do titulo, sem precisar de
   nenhum valor fixo em px (funciona pra qualquer tamanho de icone).
   ".uagb-ifb-left-title-image" (o wrapper original do icone+titulo) vira
   "display:contents": some do layout mas deixa icone e titulo "subirem"
   como filhos diretos do grid, e o subtitulo (que ja era sibling dele,
   fora do grupo) entra como um 3o item na mesma coluna do titulo, na
   linha de baixo. */
.uagb-block-8a7cc172 .uagb-ifb-content{
	display:grid;
	grid-template-columns:auto auto;
	justify-content:center;
	align-items:center;
	column-gap:10px;
	row-gap:2px;
}
.uagb-block-8a7cc172 .uagb-ifb-left-title-image{
	display:contents;
}
.uagb-block-8a7cc172 .uagb-ifb-icon-wrap{
	grid-column:1;
	/* Ocupa as 2 linhas do grid (titulo + subtitulo), nao so' a do titulo -
	   e o que permite o icone ficar centralizado ao lado do BLOCO inteiro
	   (titulo+subtitulo), em vez de so' ao lado do titulo sozinho (ver
	   regra de altura do icone, mais abaixo: sem isso a altura do icone so'
	   empurrava a linha do titulo pra baixo, sem "abracar" o subtitulo). */
	grid-row:1 / span 2;
	align-self:center;
	/* Zerado pra nao somar com o "column-gap" acima (o Spectra ja poe
	   margin-right:10px aqui por padrao pro layout "icone a esquerda";
	   sem zerar, o espaco entre icone e titulo dobraria pra 20px). */
	margin-right:0;
}
.uagb-block-8a7cc172 .uagb-ifb-title-wrap{
	grid-column:2;
	grid-row:1;
}
/* Espaco vertical entre titulo e subtitulo (2026-07-31, reduzido a pedido
   do Ronaldo): o "gap" (2px acima) e' o unico espacamento agora - os
   "margin-bottom"/"margin-top" que o Spectra poe por padrao no h3 (10px)
   e no paragrafo (20px) foram zerados aqui, senao somariam por cima do
   row-gap do grid. */
.uagb-block-8a7cc172 .uagb-ifb-title{
	margin:0;
}
.uagb-block-8a7cc172 .uagb-ifb-desc{
	grid-column:2;
	grid-row:2;
	text-align:left;
	margin:0;
}

/* Altura total do card reduzida em 10px no desktop (2026-07-31, a pedido
   do Ronaldo: "10px menor do que esta hoje"), encolhendo o CONTEUDO
   proporcionalmente (nao o padding, que continua igual): bloco
   titulo+subtitulo+gap media 60px antes (31.2 + 2 + 26.4); reduzido pra
   exatos 50px (26 + 2 + 22), escala de ~0.83 aplicada nas fontes
   (titulo 24px->20px, subtitulo 16px->13px). Tamanho "de fabrica" (24px/
   16px) e' o mesmo que o Spectra usa no desktop; o "!important" e'
   necessario pelo mesmo motivo do ajuste mobile (escala fluida propria
   do Astra por viewport). Fica de fora do media query do mobile, que
   continua com seu proprio tamanho (ainda menor) por vir depois no
   arquivo. */
.uagb-block-8a7cc172 .uagb-ifb-title{
	font-size:20px !important;
	line-height:26px !important;
}
.uagb-block-8a7cc172 .uagb-ifb-desc{
	font-size:13px !important;
	line-height:22px !important;
}

/* Altura do icone = altura do bloco titulo+subtitulo (pedido do Ronaldo,
   2026-07-31): o icone (30px de fabrica) ficava baixo demais perto do
   bloco de texto. Reduzido de 60px pra 50px junto com o corte de 10px
   acima, pra continuar batendo com a nova altura do bloco de texto.
   Repetido dentro do media query do mobile mais abaixo com um valor
   menor, proporcional aos tamanhos de fonte de la. */
.uagb-block-8a7cc172 .uagb-ifb-icon-wrap,
.uagb-block-8a7cc172 .uagb-ifb-icon-wrap svg{
	width:50px !important;
	height:50px !important;
}

/* Cor branca (2026-08-22, pedido do Ronaldo ao trocar o fundo pra bordo -
   "ajuste as fontes para branco", marrom sobre bordo nao teria contraste
   nenhum) no icone (fill do SVG, sem fill proprio no path) e nos textos.
   Historico: era marrom (--brown), pensado pro fundo branco anterior.
   O !important no fill e' necessario aqui: o proprio Spectra gera uma
   regra mais especifica pro fill do SVG
   (".uagb-infobox__content-wrap .uagb-ifb-content .uagb-ifb-icon-wrap > svg",
   3 classes) que vence a nossa (2 classes) mesmo carregando depois -
   confirmado via screenshot (Playwright) antes da correcao original: cor do
   titulo/subtitulo pegou, icone continuou preto. */
.uagb-block-8a7cc172 .uagb-ifb-icon-wrap svg{
	fill:#fff !important;
}
.uagb-block-8a7cc172 .uagb-ifb-title,
.uagb-block-8a7cc172 .uagb-ifb-desc{
	color:#fff;
}

/* Mobile (ate 544px, breakpoint nativo do Astra - mesmo valor ja usado em
   outros pontos do tema pra separar "celular" de "tablet", ver
   memory/pagina-busca.md): o painel do Container so expoe Direction/Wrap pro
   desktop nesta versao do Spectra: mantem os 4 selos numa linha so e libera
   scroll horizontal por toque, em vez de espremer/empilhar. Largura fixa em cada
   coluna e' o que forca a linha a estourar a largura da tela (sem isso o
   flexbox so encolhe cada item pra caber, e nao sobra nada pra rolar); o
   !important e' necessario porque o proprio Spectra ja define a largura de
   cada coluna via um seletor mais especifico (varios ":not()" empilhados,
   cada um conta como uma classe de especificidade).
   "justify-content:flex-start" tambem e' obrigatorio aqui: o Spectra
   centraliza a linha por padrao, e com conteudo mais largo que a tela isso
   deixa a metade inicial (a 1a e a 2a coluna) inacessivel - o navegador so
   permite rolar pra frente (scrollLeft >= 0), nunca "pra tras" o
   suficiente pra revelar o que ficou centralizado pra fora da tela a
   esquerda. Confirmado via screenshot (Playwright) antes desta correcao:
   selos apareciam cortados/sobrepostos, "Promocoes" nem aparecia.

   Barra de rolagem escondida (2026-07-31, a pedido do Ronaldo): o scroll
   continua funcionando por toque, so a barrinha visual e' que some (3
   propriedades pra cobrir Firefox/Edge legado e Chrome/Safari/webkit
   mobile, cada motor usa uma tecnica diferente pra isso).

   Altura da faixa reduzida e conteudo proporcional (2026-07-31, a pedido
   do Ronaldo): coluna mais estreita (200px -> 150px) e padding interno
   menor (10px -> 8px), fonte do titulo e do subtitulo reduzidas (o
   tamanho "de fabrica", 24px/16px, e' o mesmo do desktop - nao existe
   valor mobile proprio configurado no bloco). O "!important" nos
   font-size/line-height e' necessario porque o Astra aplica uma escala
   fluida propria de tipografia por viewport (confirmado ao vivo: o
   tamanho computado batia fracionado, tipo "18.24px", nao um numero
   redondo - sinal de que algo estava escalando o 24px original). Icone
   reduzido junto (60px -> 34px) pra bater com a nova altura, menor, do
   bloco titulo+subtitulo nesse tamanho de fonte.

   Largura da coluna aumentada de 150px pra 190px (2026-07-31, correcao a
   pedido do Ronaldo): 150px forcava quebra de linha ("Parcelado 3x sem
   juros" virava 2 linhas, "Entrega Rapida" - o titulo mais longo -
   quebrava tambem, ficando com cara de largura diferente dos outros
   cards apesar de ser a MESMA largura). Medido ao vivo (Playwright,
   "white-space:nowrap" temporario pra achar a largura natural de cada
   titulo/subtitulo): o mais largo era "Recreio, RJ e Adjacencias",
   ~121px. Coluna de conteudo (grid, 2a coluna) fixada em 130px (cabe o
   mais largo + folga), e a largura total do card ajustada pra caber
   isso: icone(34) + gap(6) + conteudo(130) + padding(8*2=16) = 186px,
   arredondado pra 190px.

   Escopado a "max-width:544px" (2026-09-09, correcao a pedido do Ronaldo):
   antes cobria ate 921px, entao o TABLET herdava esse mesmo tratamento de
   "2 selos por vez com scroll" - so que sobra largura de sobra num tablet
   pra caber os 4 sem rolagem nenhuma, igual no desktop. Ver regra dedicada
   de tablet logo abaixo (fora deste media query), que reusa os mesmos
   tamanhos de fonte/icone daqui mas distribui os 4 cards numa largura
   flexivel (25% cada) em vez de forcar 2-a-2 com scroll. */
@media (max-width:544px){
	.uagb-block-8a7cc172 .uagb-container-inner-blocks-wrap{
		flex-wrap:nowrap;
		justify-content:flex-start !important;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		scrollbar-width:none;
		-ms-overflow-style:none;
		/* Rolagem "de 2 em 2" (pedido do Ronaldo, 2026-09-03): sem isso, o
		   arrasto para em qualquer ponto (posicao livre), o que deixava o
		   card da direita sempre pela metade, cortado - nunca uma dupla
		   inteira. Com "mandatory" + "scroll-snap-align" em cada card (ver
		   abaixo), o arrasto sempre encaixa na borda do card mais proximo. */
		scroll-snap-type:x mandatory;
	}
	.uagb-block-8a7cc172 .uagb-container-inner-blocks-wrap::-webkit-scrollbar{
		display:none;
	}
	.uagb-block-8a7cc172 .uagb-container-inner-blocks-wrap > div{
		flex:0 0 auto;
		/* Largura responsiva por tela, nao mais um px fixo (2026-09-04,
		   correcao a pedido do Ronaldo): o valor fixo de 165px (historico
		   abaixo) foi medido so' pra tela de 360px (Samsung A55/S8+) - em
		   telas mais largas do mesmo "mobile" (ex.: Samsung A51/A71,
		   412px) sobrava espaco na faixa e o 3o card aparecia quase
		   inteiro em vez de so' espiar na borda, quebrando a leitura de
		   "dupla" (confirmado no aparelho fisico). Formula cobre qualquer
		   largura: metade do espaco visivel da faixa (100% do track) menos
		   meio "gap" cada, entao 2 cards + 1 gap somam exatamente 100% do
		   track - sempre exatamente 2 cards inteiros na tela, em qualquer
		   aparelho, sem depender de medir tela por tela. "min-width" trava
		   no mesmo 165px de antes (o valor ja testado ao vivo) so' pra nao
		   encolher o card - e quebrar o texto mais longo, "Recreio, RJ e
		   Adjacencias" - em telas bem estreitas (<366px); nelas volta a
		   sobrar uma tira do 3o card, igual ja era o comportamento de
		   hoje, so' que agora nesse extremo estreito, nao em qualquer
		   aparelho.

		   Historico (2026-09-03, pedido do Ronaldo - celular real, Samsung
		   A55): reduzido de 190px pra 165px porque com 190px, 2 cards + o
		   vao entre eles (20px) somavam 400px, mais largos que a faixa
		   visivel (~340px, 340 = tela de 360px menos os 10px de padding do
		   bloco de cada lado) - por isso o 2o card SEMPRE aparecia cortado
		   pela metade, em vez de completo. Testado ao vivo que o texto
		   mais longo continua numa linha so' - ver padding/gap interno
		   reduzidos junto, pra sobrar espaco pro texto sem crescer o
		   card. */
		width:calc((100% - 8px) / 2) !important;
		min-width:165px;
		padding:6px !important;
		scroll-snap-align:start;
	}
	.uagb-block-8a7cc172 .uagb-container-inner-blocks-wrap{
		gap:8px !important;
	}
	.uagb-block-8a7cc172 .uagb-ifb-content{
		/* Coluna de texto (titulo+subtitulo) volta a ser "auto" (tamanho do
		   proprio conteudo, igual ao desktop) em vez de fixa em 130px
		   (2026-08-02, correcao a pedido do Ronaldo): 130px era o suficiente
		   pra caber o texto mais longo dos 4 cards ("Recreio, RJ e
		   Adjacencias") sem quebrar linha, mas pra cards com texto mais
		   curto (ex.: "Promocoes"/"Imperdiveis") sobrava bastante espaco
		   vazio a direita do texto DENTRO da coluna, antes do fim da celula
		   de 190px - como o conjunto icone+texto so tinha ~2px de folga de
		   centralizacao total, isso fazia o conteudo parecer "colado a
		   esquerda" da celula, com um vao grande ate o proximo card. Com
		   "auto", cada card centraliza (via "justify-content:center" na
		   regra base, ver acima) so' o tamanho real do seu proprio
		   conteudo dentro da celula de 190px - a celula continua fixa (nao
		   volta a quebrar linha, o mais longo cabe tranquilo), so' o
		   quanto o conteudo "usa" dela e' que fica proporcional a cada
		   texto. Nao mexe no alinhamento interno icone/titulo/subtitulo
		   entre si (isso continua igual). */
		column-gap:4px;
	}
	.uagb-block-8a7cc172 .uagb-ifb-title{
		font-size:15px !important;
		line-height:18px !important;
	}
	.uagb-block-8a7cc172 .uagb-ifb-desc{
		font-size:10px !important;
		line-height:13px !important;
	}
	.uagb-block-8a7cc172 .uagb-ifb-icon-wrap,
	.uagb-block-8a7cc172 .uagb-ifb-icon-wrap svg{
		width:34px !important;
		height:34px !important;
	}
}

/* Tablet (545px a 921px, o mesmo teto do Astra usado no resto do tema pra
   "nao e' mais desktop"): os 4 selos cabem numa linha so' sem rolagem,
   igual ao desktop - o motivo de precisar de regra propria (em vez de so'
   herdar do desktop) e' que o desktop tem 1200px de container e sobra
   espaco de sobra pra cada card respirar (largura "auto", olhando so' pro
   proprio conteudo); no tablet a faixa e' bem mais estreita (largura da
   tela - 20px de padding do bloco, ver regra base ".uagb-block-8a7cc172"
   acima) e da' pra estourar se cada card continuar do tamanho do desktop -
   por isso aqui cada card tem largura FLEXIVEL (25% cada, "flex:1 1 0"),
   sempre somando exatos 100% da faixa, nunca mais, nunca menos: nao
   importa a largura exata do tablet (545px no limite inferior ou 921px no
   superior), os 4 SEMPRE cabem, sem rolagem e sem estourar.
   "min-width:0" e' o que permite o card encolher abaixo da largura natural
   do texto (senao o flexbox trava no min-content e o card mais largo -
   "Recreio, RJ e Adjacencias" - forcaria a faixa toda a estourar de novo,
   igual acontecia sem o tratamento). Tamanho de fonte/icone reduzidos
   (mesmos valores do mobile, ver acima) pelo mesmo motivo do mobile: o
   tamanho de fabrica (24px/16px/60px) nao cabe numa coluna estreita sem
   quebrar feio - aqui e' so' pra garantir folga, ja que a largura calculada
   (~180-220px por card conforme a tela) e' proxima da faixa mobile onde
   esses tamanhos ja foram testados. Sem overflow/scroll-snap: nao ha nada
   pra rolar, a linha inteira sempre cabe. */
@media (min-width:545px) and (max-width:921px){
	.uagb-block-8a7cc172 .uagb-container-inner-blocks-wrap{
		flex-wrap:nowrap;
		justify-content:center;
		overflow-x:visible;
		gap:8px !important;
	}
	.uagb-block-8a7cc172 .uagb-container-inner-blocks-wrap > div{
		flex:1 1 0;
		min-width:0;
		padding:6px !important;
	}
	.uagb-block-8a7cc172 .uagb-ifb-content{
		column-gap:4px;
	}
	.uagb-block-8a7cc172 .uagb-ifb-title{
		font-size:15px !important;
		line-height:18px !important;
	}
	.uagb-block-8a7cc172 .uagb-ifb-desc{
		font-size:10px !important;
		line-height:13px !important;
	}
	.uagb-block-8a7cc172 .uagb-ifb-icon-wrap,
	.uagb-block-8a7cc172 .uagb-ifb-icon-wrap svg{
		width:34px !important;
		height:34px !important;
	}
}

/* =========================================================================
 * Paginas de categoria de produto e vitrine (/shop/): grade de produtos,
 * card customizado e sidebar de filtros, a pedido do Ronaldo (2026-07-26),
 * inspirado na Velas Inspire (ver memory/velas-inspire.md). Layout
 * (sidebar esquerda) e widgets de filtro vem de dado de banco
 * (bin/setup-shop-sidebar.php); o card em si vem de
 * woocommerce/content-product.php + inc/product-archive.php.
 * ========================================================================= */

/* Titulo das paginas de vitrine/categoria ("Shop", "Velas Aromaticas" etc.),
   2026-07-30: testado com Playfair Display 600 primeiro, reprovado no teste
   visual pelo Ronaldo - trocado pra Lato 700. So temos os arquivos 400/700
   de Lato auto-hospedados (nao existe arquivo 600 de verdade); o titulo do
   CARD de produto usa "font-weight:600" (".laluce-card-title") mas, sem uma
   face 600 embutida, o navegador substitui automaticamente pela mais
   proxima (700) - ou seja, os cards ja renderizam em 700 hoje. Usar 700
   aqui tambem mantem a mesma "voz tipografica" em todo o site e cria
   contraste real contra o corpo do texto (400), sem carregar fonte nova. */
.woocommerce-products-header__title{
	font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight:700;
	/* Tamanho: 36px e' o padrao herdado do H1 do Astra (nunca setado por
	   nos); reduzido pra 28px em 2026-07-31 (1a rodada, sem tamanho-alvo
	   definido) e ajustado pra 22px no mesmo dia (2a rodada, valor exato
	   pedido pelo Ronaldo depois de ver o resultado). */
	font-size:22px;
}
/* Linha do titulo + botao "Filtrar" (2026-08-06, a pedido do Ronaldo -
   gaveta de filtros mobile, ver secao dedicada mais abaixo e assets/js/
   shop.js). Override do template ("woocommerce/loop/header.php") envolve o
   <h1> e o botao num wrapper flex - o titulo PAROU de ser irmao direto da
   descricao (".page-description"/".term-description"), entao o antigo
   ".woocommerce-products-header__title:has(+ .page-description)" nunca mais
   bateria; a logica de margem (36px padrao / 10px com descricao) migrou pra
   este wrapper. GOTCHA (mesma familia do item 13d dos Gotchas do Astra): virar
   item flex cria um novo contexto de formatacao de bloco, que IMPEDE a margem
   nativa do <h1> (os 36px herdados, nunca setados por nos) de colapsar pra
   fora dele - precisa ser zerada aqui e reaplicada no wrapper, senao a altura
   dobra (36px presos dentro do h1 + os proprios 36px do wrapper). */
.laluce-shop-title-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	margin-bottom:36px;
}
.laluce-shop-title-row .woocommerce-products-header__title{
	margin-bottom:0;
}
.laluce-shop-title-row:has(+ .page-description),
.laluce-shop-title-row:has(+ .term-description){
	margin-bottom:10px;
}
/* Botao "Filtrar": escondido por padrao, so aparece no mobile (ver
   "@media (max-width:921px)" da secao "Gaveta de filtros mobile" mais
   abaixo, junto com o resto da gaveta). */
.laluce-filter-toggle{
	display:none;
	align-items:center;
	gap:6px;
	flex-shrink:0;
	padding:8px 14px;
	border:1px solid var(--brown);
	border-radius:5px;
	background:#fff;
	color:var(--petrol);
	font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size:.85rem;
	font-weight:600;
	cursor:pointer;
}
.laluce-filter-toggle .ic{
	color:var(--brown);
}
/* Cabecalho "Filtros"/X e o rotulo "Ordenar por:" da gaveta de filtros: o JS
   (assets/js/shop.js) monta os dois dentro de "#secondary" em QUALQUER largura
   desde 2026-08-15 - antes ele decidia mobile/desktop uma unica vez, no load, e
   quem atravessava o breakpoint sem recarregar via os dois vazarem pra sidebar
   do desktop (bug reportado pelo Ronaldo com print). Quem esconde no desktop
   passa a ser esta regra, mesmo esquema ja usado no botao "Filtrar" acima
   ("display:none" por padrao, ligado so' dentro do "@media (max-width:921px)"
   da secao "Gaveta de filtros mobile"). Escondido por CSS, nao removido do DOM:
   o estado da gaveta acompanha o breakpoint na hora, sem depender de JS rodar
   de novo. */
.laluce-filter-drawer-header,
.laluce-filter-drawer-order-heading{
	display:none;
}
/* Espaco entre a barra de menu secundario e o titulo "Shop"/"Velas
   Aromaticas" (2026-07-31, a pedido do Ronaldo, depois da remocao do
   breadcrumb): sem o breadcrumb, o titulo ficava colado na barra de menu
   (0px), enquanto a sidebar de filtros ao lado tinha 24px de respiro
   ("#secondary{padding-top:24px}" mais abaixo neste arquivo). A causa NAO
   era falta de espaco proprio da pagina - e uma regra GLOBAL mais acima
   neste arquivo, "#primary{padding-top:0 !important}" (secao "Cabecalho
   principal"), que zera o padding-top nativo do Astra (~24px, o mesmo
   valor coincidente do padding da sidebar) em TODAS as paginas, incluindo
   esta. Corrigido com "padding-top:24px" no proprio
   ".woocommerce-products-header" (mesma tecnica de padding no container,
   nao margin no filho, que a sidebar ja usa - evita o gotcha de colapso de
   margem ja documentado no item 13d dos Gotchas do Astra), reproduzindo
   exatamente os mesmos 24px, escopado so a paginas de vitrine/categoria
   (unico contexto onde essa classe existe). */
.woocommerce-products-header{
	padding-top:24px;
}

/* Mesmo gotcha do bloco acima, confirmado pelo Ronaldo tambem nas paginas de
   Sacola (carrinho), Minha Conta e Lista de Desejos (YITH): a mesma regra
   GLOBAL "#primary{padding-top:0 !important}" zera o padding nativo do
   Astra ali tambem, colando o titulo ("Sacola de Compras", "Minha Conta",
   "Lista de Desejos") na barra de menu. Essas 3 paginas NAO usam
   ".woocommerce-products-header" (isso e' exclusivo de arquivo/vitrine) -
   o titulo delas vem do template padrao de PAGINA do Astra
   (".entry-header", markup normal de post/page, com H1
   ".entry-title" dentro). Escopado pelas classes de BODY que o proprio
   WooCommerce/YITH ja adicionam nessas paginas especificas
   ("woocommerce-cart"/"woocommerce-account"/"woocommerce-wishlist" -
   nenhuma delas aparece em `/shop/` ou categoria, que tem sua propria
   classe "ast-woo-shop-archive", entao nao ha risco de dobrar o padding
   ali). Confirmado que ".entry-header" nessas 3 paginas nao tinha
   padding-top/margin-top proprios (0px) antes deste fix. */
body.woocommerce-cart .entry-header,
body.woocommerce-account .entry-header,
body.woocommerce-wishlist .entry-header,
body.woocommerce-checkout .entry-header{
	padding-top:24px;
}

/* Titulo "Carrinho"/"Checkout" (H1 padrao de pagina do Astra, ".entry-title")
   com a MESMA fonte/peso/tamanho do titulo "Shop" (".woocommerce-products-
   header__title" acima), a pedido do Ronaldo (2026-08-06) - mesmas 3
   declaracoes, sem cor propria (a cor ja vem igual nos 2 casos, herdada da
   mesma regra global de titulo do Astra - so fonte/peso/tamanho divergiam,
   o "Shop" usa Lato 700/22px, o padrao do Astra usa a fonte/tamanho nativos
   do tema). Checkout incluido junto (mesmo pedido, "faça isso pra Checkout
   também") - usa o MESMO template de titulo de pagina que o Carrinho
   (".entry-header .entry-title", nenhuma classe propria de WooCommerce).
   "Minha Conta" (woocommerce-account) somado no redesenho de 2026-08-07 -
   mesmo template de titulo, mesmo valor "22-24px/700" documentado no
   handoff de design pra titulo de pagina, so seguindo a mesma convencao ja
   estabelecida pras outras 2 paginas nativas do WooCommerce. "Lista de
   Desejos" (woocommerce-wishlist) somada no redesenho de 2026-08-14, a
   pedido do Ronaldo ("mesmo tamanho, fonte e estilo que o titulo da vitrine
   Shop") - e' o mesmo H1 ".entry-title" das outras 3, so faltava entrar
   nesta lista; o padding-top de 24px dela ja estava resolvido no bloco
   acima. */
body.woocommerce-cart .entry-header .entry-title,
body.woocommerce-checkout .entry-header .entry-title,
body.woocommerce-account .entry-header .entry-title,
body.woocommerce-wishlist .entry-header .entry-title{
	font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight:700;
	font-size:22px;
}

/* Mesmo gotcha e mesma correcao acima, aplicado agora as 3 paginas legais
   (Politica de Privacidade, Termos de Uso, Politica de Troca e Devolucao) -
   a pedido do Ronaldo (2026-08-24), mesmo padrao visual do titulo "Shop":
   24px de respiro acima do titulo (a mesma regra global "#primary{padding-
   top:0 !important}" zera o padding nativo do Astra tambem aqui) e a mesma
   fonte/peso/tamanho (Lato 700 22px) no H1 padrao de pagina do Astra
   (".entry-header .entry-title").
   CORRIGIDO em 2026-09-03: usava "body.page-id-N" com os IDs do ambiente
   LOCAL (3/598/9). ID de pagina nao e' portavel entre ambientes - em
   producao so' Privacidade bateu por coincidencia, Trocas e Devolucao (11)
   e Termos de Uso (13) ficaram sem o respiro, titulo grudado na barra de
   menu. Trocado pela classe "laluce-pagina-legal", resolvida por
   OPCAO/SLUG (nunca por ID) em inc/paginas-legais.php - mesma regra ja'
   usada em bin/setup-paginas-legais.php. */
body.laluce-pagina-legal .entry-header{
	padding-top:24px;
}
body.laluce-pagina-legal .entry-header .entry-title{
	font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight:700;
	font-size:22px;
}
/* Espacamento entre linhas reduzido no corpo das 3 paginas legais (mesmo
   pedido, 2026-08-24): o padrao herdado do Astra e' 1.65 (regra global em
   "body,button,input..." no topo deste arquivo), alto demais pro texto
   corrido e as listas de uma pagina de politica. Reduzido pra 1.5, mesmo
   valor ja usado em texto descritivo parecido
   (".woocommerce-products-header .page-description p"). Aplicado no
   ".entry-content" inteiro (paragrafos, titulos H2, itens de lista), nao so
   nos paragrafos, porque o pedido foi "reduza o espacamento entre linhas"
   de forma geral nessas paginas. */
body.laluce-pagina-legal .entry-content{
	line-height:1.5;
}
/* Titulos de SECAO dentro do corpo das 3 paginas legais (H2 ".wp-block-
   heading" - "Quais dados coletamos", "Uso do site", "Direito de
   arrependimento" etc. - mesmo nivel nas 3 paginas, confirmado via curl
   antes de mexer). 2ª rodada do mesmo pedido (2026-08-24): o Ronaldo pediu
   pra cobrir TODOS os titulos, nao so o H1. Mesma voz tipografica do titulo
   da pagina logo acima (Lato 700), num tamanho menor pra manter hierarquia -
   18px, mesmo valor ja usado noutros "titulo de cartao" deste tema (ver
   ".laluce-ma-order-card-title" e afins). Cor nao setada de proposito: ja
   herda a mesma cor global de titulo do Astra, igual ao H1. Margem vertical
   tambem reduzida (24px acima / 8px abaixo, no lugar do espacamento maior
   que vinha do tema), continuando o pedido de espacamento mais compacto. */
body.laluce-pagina-legal .entry-content .wp-block-heading{
	font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight:700;
	font-size:18px;
	line-height:1.3;
	margin:24px 0 8px;
}

/* Mesmo gotcha acima, confirmado tambem na pagina 404 (2026-08-06): o
   WordPress ja adiciona "error404" no <body> sozinho (is_404()), sem
   precisar de classe propria nossa. Ver inc/error-404.php pro resto da
   pagina (textos em portugues, remocao do widget de busca do Astra).
   Aplicado na SECTION que envolve o quadro (".error-404"), nao no
   "page-header" (2ª rodada, ver bloco do quadro logo abaixo) - o
   "page-header" agora mora DENTRO do quadro com borda, e colocar os 24px
   ali empurraria so o titulo, quebrando a distancia simetrica que o
   quadro precisa ter entre o texto e as bordas de cima/baixo. Aplicado
   como padding (nao margin) na SECTION pela mesma razao de sempre: evita
   o gotcha de colapso de margem ja documentado nas demais regras desta
   secao. */
body.error404 .error-404{
	padding-top:24px;
}

/* =========================================================================
 * Pagina 404: quadro com borda ao redor do titulo+subtitulo+paragrafo+botao
 * (2ª rodada, 2026-08-06, a pedido do Ronaldo). Reaproveita o proprio
 * "ast-404-layout-1" (div nativa do Astra que ja envolve os 3 textos) como
 * o quadro, em vez de um wrapper novo - ele ja vem com "padding:3em"
 * NATIVO E SIMETRICO (mesmo valor nos 4 lados, main.min.css do Astra),
 * entao a "distancia consistente do texto ate a borda de cima e de baixo"
 * pedida ja sai de graca so com borda+radius, sem inventar nenhum valor de
 * padding novo. Ver inc/error-404.php pro resto do raciocinio.
 * ========================================================================= */
body.error404 .ast-404-layout-1{
	border:1px solid var(--brown);
	border-radius:5px;
}
/* Gotcha de simetria: o <h1> tem margin-top de UA (User-Agent stylesheet,
   ~0.67em, nunca resetado pelo Astra pra essa classe especifica) somando
   por cima do padding simetrico do quadro, so no topo - sem isso o texto
   ficava mais longe da borda de CIMA do que da borda de BAIXO (o botao,
   ultimo elemento, nao tem margem padrao nenhuma). Zerada pra sobrar so o
   padding do quadro nos dois lados (mesma familia de gotcha documentada em
   blueprints.md: "checar se o texto esta dentro de uma tag com margem
   padrao do navegador"). */
body.error404 .ast-404-layout-1 .page-header > *:first-child{
	margin-top:0;
}
body.error404 .ast-404-layout-1 .page-content > *:last-child{
	margin-bottom:0;
}
/* Novo paragrafo de orientacao (ver inc/error-404.php), logo abaixo do
   subtitulo nativo do Astra - so respiro entre os dois, sem precisar de
   font-family propria (ja herda a mesma voz tipografica do corpo). */
.laluce-404-help{
	margin-top:12px;
}
/* Botao "Ir para o Início": classe "button" (a mesma que WooCommerce/Astra
   ja usam em QUALQUER pagina, nao so dentro de ".woocommerce" - radius 4px,
   ver main.min.css) reaproveitada so pelo FORMATO/padding/box-shadow do
   botao padrao da loja, sem inventar layout novo. So respiro em relacao
   ao paragrafo acima e "inline-block" pra o margin funcionar (o elemento
   e um <a>, inline por padrao). Cor: ver bloco "marrom" logo abaixo (3ª
   rodada, cor petroleo nativa do "button" trocada por marrom). */
.laluce-404-cta{
	display:inline-block;
	margin-top:16px;
}
/* 3ª rodada (2026-08-06, a pedido do Ronaldo: "o botao deve ser marrom da
   cor da paleta, com hover compativel"). Reaproveita o MESMO par
   cor-cheia/borda + hover invertido ja usado no botao "Comprar por WA" dos
   cards (".laluce-whatsapp-btn", mais abaixo neste arquivo) - so comecando
   pela fase oposta: aqui o REPOUSO ja vem marrom preenchido (o pedido),
   entao o hover inverte pra creme preenchido + texto marrom (o mesmo par
   de cores, so trocando qual das duas esta "cheia"). Especificidade
   ("body.error404 .laluce-404-cta", 1 elemento + 2 classes) vence sozinha
   o "background-color"/"color" do "button" nativo (so 1 classe casando,
   ".button"), sem precisar de "!important". */
body.error404 .laluce-404-cta{
	background-color:var(--brown);
	border:1.5px solid var(--brown);
	color:var(--cream);
}
/* 4ª rodada (2026-08-06, feedback sobre a 3ª: "a cor marrom do botao esta
   OK, mas quero que o hover seja no laranja da nossa paleta e a borda
   fique marrom da paleta, acho que a cor do texto pode permanecer"). So o
   FUNDO do hover mudou (creme -> laranja); a borda ja era marrom sempre
   (declarada uma vez so' na regra de repouso acima, nunca redeclarada
   aqui, entao continua marrom nos dois estados sem precisar repetir) e a
   logica de cor do texto foi mantida como estava (continua trocando pra
   marrom no hover, mesma regra de antes).

   5ª rodada, mesmo dia ("ajuste o hover... para que a borda seja o mesmo
   laranja do botao e a fonte seja branca"): revisado - borda passa a
   acompanhar o laranja do fundo (nao mais marrom fixo) e o texto passa a
   branco (nao mais marrom). "border-color" sozinho (nao o "border"
   completo) so troca a cor, sem repetir largura/estilo ja declarados na
   regra de repouso. Bonus: resolve de quebra o contraste baixo (marrom
   sobre laranja, ~2.36:1) sinalizado na rodada anterior - branco sobre
   laranja mede ~1.98:1, ainda abaixo do minimo de acessibilidade (a
   laranja da paleta e uma cor de luminancia media, contra QUALQUER
   cor solida - clara ou escura - o contraste fica baixo; ver "Paleta de
   cores" em design.md pro mesmo tipo de tradeoff ja aceito antes pelo
   Ronaldo), mas ainda assim mais alto que a versao anterior. */
body.error404 .laluce-404-cta:hover,
body.error404 .laluce-404-cta:focus{
	background-color:var(--orange);
	border-color:var(--orange);
	color:#fff;
}

/* Cores dos textos em palheta (3ª rodada, 2026-08-06, a pedido do
   Ronaldo): titulo/subtitulo/paragrafo vinham nos tons neutros PADRAO do
   Astra (nunca tocados na 1ª/2ª rodada, ver "--ast-global-color-2/3" em
   main.min.css - cinza-azulado, NAO marca). Trocado pra petroleo nesta
   rodada; **revisado na 4ª rodada, mesmo dia** ("quero que os textos [...]
   sejam em marrom da nossa paleta, nao em petroleo") - marrom no lugar de
   petroleo. Escopado ao quadro (nao precisa - as 3 classes ja sao
   exclusivas da 404 - mas mantem o mesmo padrao "body.error404 ..." do
   resto deste bloco, por clareza). */
body.error404 .ast-404-layout-1 .page-title,
body.error404 .ast-404-layout-1 .page-sub-title,
body.error404 .ast-404-layout-1 .laluce-404-help{
	color:var(--brown);
}

/* Faixa branca entre o menu secundario e o quadro (3ª rodada, 2026-08-06,
   a pedido do Ronaldo, com print - seta apontando pra ela). Causa real: o
   layout desta pagina usa "Conteineres Separados" do Astra (classe
   "ast-separate-container" no <body>, ver Astra_Woocommerce/Customizer >
   Layout > Container), que da um fundo BRANCO PROPRIO a ".error-404"
   (".ast-separate-container .error-404{background-color:#fff}", 2
   classes, main.min.css) - diferente do fundo geral da pagina (a variavel
   "--bg-site"). Os 24px de "padding-top" adicionados na 2ª rodada (ver
   acima) caiam DENTRO dessa area branca, criando a faixa. Corrigido
   tornando essa secao transparente (deixa o fundo real da pagina
   aparecer) e dando um fundo BRANCO PROPRIO ao quadro (".ast-404-layout-1"
   nao tinha nenhum, so' "herdava" o branco da secao - sem isso o quadro
   sumiria dentro do fundo da pagina, perdendo o efeito de "cartao"). */
body.error404 .error-404{
	background-color:transparent;
}
body.error404 .ast-404-layout-1{
	background-color:#fff;
}

/* O teste de fundo creme feito aqui nas rodadas anteriores (escopado so a
   esta pagina, "body.error404.ast-separate-container") foi aprovado pelo
   Ronaldo e virou padrao do SITE INTEIRO em 2026-08-06 - regra retirada
   daqui (era so' desta pagina) e substituida pela combinacao geral no
   topo do arquivo, secao "Camadas de fundo": "--bg-site" (agora
   "var(--cream-light)") + "body.ast-separate-container{background-
   color:var(--bg-site)}" (cobre o layout "Conteineres Separados" que essa
   pagina usa). A derivacao da cor (#F5F5DC -> #FAFAEE -> #FBFBF1, duas
   rodadas de "clarear com branco") esta documentada no comentario da
   variavel "--cream-light" em ":root". */

/* ATUALIZACAO (2026-08-01): a regra acima ("#main{padding-top:24px}", ja
   removida numa rodada anterior) e a que existiu aqui logo depois dela
   ("margin-bottom:24px" no cabecalho, so pra busca) ficaram OBSOLETAS e
   foram removidas de vez - desde que a pagina de busca passou a usar o
   MESMO template de arquivo de produto do WooCommerce que a vitrine (ver
   inc/search-results.php), a estrutura e os hooks (titulo, descricao,
   linha "Exibindo X de Y resultados", grade) sao IDENTICOS aos da
   vitrine/categoria - o espacamento generico ja definido mais acima neste
   arquivo (".woocommerce-products-header{padding-top:24px}" e o
   ":has(+ .page-description){margin-bottom:10px}" no titulo) basta
   sozinho, sem nada extra pra esta pagina. Tinha ficado uma margem extra
   aqui de quando a busca ainda usava um cabecalho escrito a mao (hook
   "astra_archive_header" do Astra) fora dessa cadeia de hooks nativa -
   confirmado ao vivo que causava um gap maior aqui (40px) do que na
   vitrine (26px) ate esta remocao. */

/* Espaco entre a sidebar de filtros e a grade de produtos (2026-07-28, a
   pedido do Ronaldo): o Astra reserva 60px em CADA lado (".ast-left-sidebar
   #secondary{padding-right:60px}" + ".ast-left-sidebar #primary{padding-
   left:60px}", achado só ao vivo via CSSOM - nao aparece em nenhum arquivo
   .css buscavel por texto, e' CSS dinamico do proprio tema), 120px de
   respiro combinado. Reduzido pra 20px de cada lado (40px combinado) -
   mesma especificidade (1 classe + 1 ID) das regras do Astra, vence por
   ordem de carregamento (tema-filho carrega depois). */
.ast-left-sidebar #secondary{
	padding-right:20px;
}
.ast-left-sidebar #primary{
	padding-left:20px;
}

/* Linha divisora entre a sidebar de filtros e a grade (2026-07-30, a pedido
   do Ronaldo): o Astra desenha 2 bordas de 1px que se sobrepoe
   (".ast-left-sidebar #secondary{border-right:1px solid var(--ast-
   border-color);margin-right:-1px}" + ".ast-left-sidebar #primary{border-
   left:1px solid var(--ast-border-color)}", achado só ao vivo via CSSOM -
   mesma familia do gotcha do espaco lateral logo acima). Mesma tecnica:
   mesma especificidade (1 classe + 1 ID), vence por ordem de carregamento. */
.ast-left-sidebar #secondary{
	border-right:none;
}
.ast-left-sidebar #primary{
	border-left:none;
}

/* Grade de produtos: CSS grid no lugar do esquema float/columns-N padrao do
   WooCommerce - responsivo sozinho (sem media query) via auto-fill. Valores
   desta regra (padding:24px, gap:20px) sao a base DESKTOP - ver o bloco
   "Espacamento da grade MOBILE" logo abaixo pro override so-mobile. */
.woocommerce ul.products{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
	gap:20px;
	list-style:none;
	margin:0 0 40px;
	padding:24px;
	background-color:var(--bg-grid);
	border-radius:10px;
}
/* =========================================================================
   Espacamento da grade MOBILE (2026-08-06, a pedido do Ronaldo, com print de
   referencia). Historico curto (ver memory/pagina-categoria.md pro detalhe
   completo): a 1a versao deste bloco tambem reduzia o padding do ".ast-
   container"/"#primary"/".ast-woocommerce-container" pra criar um gutter
   externo de 4px - PROBLEMA (apontado pelo Ronaldo): esses 3 elementos sao os
   MESMOS que envolvem o TITULO/DESCRICAO da pagina, nao so' a grade - mexer
   neles empurrava titulo e texto junto, efeito colateral nao pedido.
   RESOLVIDO na 2a rodada: o gutter externo de Shop/categoria JA' era
   assimetrico (40px esquerda/20px direita) mesmo ANTES de eu mexer em
   qualquer coisa - bug antigo nosso (".ast-left-sidebar #primary{padding-
   left:20px}", escrita pro respiro DESKTOP entre a sidebar de filtros e a
   grade, vazando pro mobile sem media query). Corrigindo so' esse vazamento
   (sem tocar em ".ast-container"/".ast-woocommerce-container"), o gutter
   nativo do Astra (20px, simetrico) volta a valer sozinho - pro TITULO E
   PARA A GRADE ao mesmo tempo, sem precisar de nenhum tratamento diferente
   entre os dois (decisao do Ronaldo: o valor nativo simetrico ja resolve,
   nao precisava ser exatamente 16px). Na busca nao havia bug nenhum pra
   corrigir (nunca carrega a classe ".ast-left-sidebar") - gutter dela ja
   era nativo e simetrico (~22px, via ".ast-container" + ".ast-woocommerce-
   container", os dois exclusivos do layout "Separate Container" que so' a
   busca usa) - nao mexido.

   So' no mobile, so' nas paginas com grade de produtos (Shop, categoria,
   busca - mesmo escopo da "Gaveta de filtros mobile" acima neste arquivo,
   via as mesmas 2 classes de body: "ast-woo-shop-archive" cobre Shop+
   categoria, "search-results" cobre a busca). */
@media (max-width:921px){
	/* Gutter externo: zera o vazamento (bug antigo, ver acima) que so'
	   Shop/categoria tinham - a busca nunca teve essa classe, entao a regra
	   abaixo nao teria efeito nela mesmo sem o escopo "body.ast-woo-shop-
	   archive" (mantido explicito por clareza). Sem essa regra nova, o
	   "#primary{padding-left:20px}" mais acima neste arquivo (regra
	   DESKTOP, sem media query) continuaria valendo tambem no mobile. */
	body.ast-woo-shop-archive.ast-left-sidebar #primary{
		padding-left:0;
	}
	/* Padding interno da grade (borda da caixa ate cada card) + espaco entre
	   os cards (linhas e colunas) - SEM ".woocommerce" antes de "ul.products"
	   de proposito (achado ao vivo via CSSOM, 2026-08-06): nesta pagina
	   ".woocommerce" e' classe do proprio <body> (nao de algum wrapper
	   aninhado por dentro dele) - um seletor "body.X .woocommerce ul.products"
	   pede DOIS ancestrais diferentes (um pra "body.X", outro pra
	   ".woocommerce"), mas os dois so' existem no MESMO elemento <body>, que
	   nao pode ser ancestral de si mesmo. Resultado: a regra nunca batia,
	   silenciosamente (nao e' erro de sintaxe, so' zero elementos
	   compativeis).
	   Valores: 24px/20px (padrao desktop) -> 4px (1a rodada) -> 10px (2a
	   rodada, pedido do Ronaldo - "nao ficou bom", aumentar). */
	body.ast-woo-shop-archive ul.products,
	body.search-results ul.products{
		padding:10px;
		gap:10px;
	}
	/* Margem negativa pra reclamar largura do "#ast-container" do Astra (20px
	   fixos de cada lado, MESMO valor em qualquer largura de tela - nao
	   escala pra telas estreitas), sem tocar no padding:10px acima, que ja
	   foi negociado 2x com o Ronaldo (2026-08-06). Achado no celular real
	   (Samsung A55, 2026-09-03): a grade tinha 30px de cada lado somando os
	   dois niveis (20 do container + 10 do padding proprio), 60px perdidos
	   numa tela de ~360px. Isso "puxa" a grade 10px de cada lado pra dentro
	   desse padding do container, sobrando 20px de cada lado no total -
	   ainda um respiro visivel, mas os cards ficam sensivelmente maiores. */
	body.ast-woo-shop-archive ul.products,
	body.search-results ul.products{
		margin-left:-10px;
		margin-right:-10px;
	}
}

/* GOTCHA (2026-07-29, achado depois de uma 1a tentativa que nao resolveu de
   vez o alargamento da coluna): so colocar "min-width:0" no BOTAO (mais
   fundo na arvore) nao bastou. Todo item flex tem "min-width:auto" por
   padrao (tamanho de min-content, nao "0") - e essa cadeia tem VARIOS itens
   flex empilhados entre o botao e a grade (".laluce-card-actions", item flex
   de ".laluce-card-body"; ".laluce-card-body", item flex de ".laluce-card";
   e o proprio "li.product", item da GRADE CSS em si). "min-width:0" precisa
   estar em CADA elo da cadeia que e' item flex/grid - um "min-width:0" so no
   botao nao "atravessa" os pais que ainda tem "min-width:auto" proprio,
   calculado a partir do conteudo dos filhos. Confirmado ao vivo (Ronaldo,
   print) que texto longo sem quebra ainda alargava a coluna inteira mesmo com
   o botao corrigido - faltava zerar aqui, no proprio item da grade. */
.woocommerce ul.products li.product{
	width:auto !important;
	float:none !important;
	margin:0 !important;
	clear:none !important;
	min-width:0;
}

/* --- Card de produto (woocommerce/content-product.php) --- */
.laluce-card{
	display:flex;
	flex-direction:column;
	height:100%;
	background:#fff;
	border-radius:5px;
	overflow:hidden;
	box-shadow:0 2px 10px rgba(0,59,70,.08);
	transition:box-shadow .2s ease,transform .2s ease;
}
.laluce-card:hover{
	box-shadow:0 10px 26px rgba(0,59,70,.16);
	transform:translateY(-2px);
}
.laluce-card-media{
	position:relative;
	aspect-ratio:1/1;
	background:var(--cream);
	overflow:hidden;
}
.laluce-card-media-link{
	display:block;
	width:100%;
	height:100%;
}
.laluce-card-media img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:transform .35s ease;
}
.laluce-card:hover .laluce-card-media img{
	transform:scale(1.05);
}

/* Selo "Promocao" (".onsale", template proprio em
   woocommerce/loop/sale-flash.php so pra trocar o texto "Sale!" por
   "Promocao"), canto superior direito, sobre a imagem. Etiqueta (radius
   5px), NAO pilula - trocado de 999px a pedido do Ronaldo (2026-07-28). */
.laluce-card-media .onsale{
	position:absolute;
	z-index:2;
	display:flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	min-height:0;
	min-width:0;
	height:32px;
	background:var(--brown);
	color:#fff;
	font-size:.72rem;
	font-weight:700;
	line-height:1;
	padding:0 12px;
	border-radius:5px;
	text-transform:uppercase;
	letter-spacing:.03em;
}
/* GOTCHA (achado ao vivo, 2026-07-28, via Playwright - o CSS por si so nao
   denunciava isso): DUAS regras nativas (WooCommerce e Astra) tem
   especificidade MAIOR que a regra acima (2 classes) e venciam a nossa:
   1) "ul.products li.product .onsale{top:0;right:0;left:auto;margin:-.5em
   -.5em 0 0}" (woocommerce.css, 3 classes) jogava o selo pro canto superior
   direito "cru" (sem respiro) com margem NEGATIVA - a metade de fora ficava
   cortada pelo "overflow:hidden" do card/media (era a causa real do selo
   "cortando"); 2) ".woocommerce span.onsale{background-color:var(
   --ast-global-color-0)}" (CSS dinamico do Astra, tambem 2 classes + o
   elemento "span" de desempate) trocava nossa cor marrom pelo azul de
   destaque do tema. Repeticao de tudo com uma cadeia de seletor bem mais
   especifica pra vencer as duas de vez. Posicao 4px/4px (2026-07-28, a
   pedido do Ronaldo - antes era 10px/10px, igual ao coracao). */
/* GOTCHA (2026-07-29, achado medindo a altura ao vivo - o card do "Hoodie"
   media 38.4px em vez dos 32px pedidos): o proprio WooCommerce tem
   ".woocommerce span.onsale{min-height:3.236em;font-size:.857em;
   line-height:3.236;...}" (2 classes + elemento "span" - MAIS especifico que
   a regra base ".laluce-card-media .onsale", so 2 classes, mesmo sem
   "!important" nenhum) - "min-height"/"font-size"/"line-height" da regra
   base perdiam esse empate especifico (o restante das propriedades da regra
   base, tipo "background"/"border-radius", nao tinham concorrente do
   WooCommerce nessas propriedades, por isso so a ALTURA ficava errada,
   nao a cor/formato). Repetindo aqui (cadeia ja vencedora, 5 classes) pra
   garantir controle total da altura, independente do que o WooCommerce
   declarar nessas propriedades especificas. */
.woocommerce ul.products li.product .laluce-card-media .onsale{
	top:4px;
	right:4px;
	left:auto;
	margin:0;
	background:var(--brown);
	display:flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	height:32px;
	min-height:0;
	min-width:0;
	padding:0 12px;
	border-radius:5px;
	font-size:.72rem;
	line-height:1;
}

/* Selo "Esgotado" do card (".onsale.out-of-stock"): MESMO formato/posicao
   do selo "Promocao" acima (reaproveita toda a cadeia de selecao ja
   vencedora contra WooCommerce/Astra), so troca a cor pra fundo preto - a
   base ".laluce-card-media .onsale" ja declara "color:#fff", por isso so
   precisa sobrescrever o "background" aqui. Fora de estoque prevalece sobre
   promocao: o template (woocommerce/loop/sale-flash.php) so imprime UM dos
   dois selos por vez, nunca os dois juntos - a pedido do Ronaldo
   (2026-09-06). */
.woocommerce ul.products li.product .laluce-card-media .onsale.out-of-stock{
	background:#000;
}

/* Selo "Promocao" da PAGINA DE PRODUTO individual (woocommerce/single-
   product/sale-flash.php, texto trocado igual ao do card): mesmo desenho
   visual do selo do card acima (etiqueta marrom, 5px, 32px de altura), a
   pedido do Ronaldo (2026-09-03) - "exatamente o mesmo design", so' que no
   canto superior ESQUERDO do quadro da foto principal (o card usa o
   direito), com respiro das margens.
   GOTCHA (achado lendo o CSS do Astra, nao so' de olho): existe uma regra
   nativa exclusiva do produto individual, ".woocommerce-js.single-product
   .sale>span.onsale" (selo verde, circular, com offset NEGATIVO de -.5em -
   ".sale" e' uma classe que o proprio WooCommerce adiciona ao MESMO
   "div.product" quando o produto esta em promocao, via "post_class()" -
   nao e' um wrapper novo). 4 classes, empata com a nossa base de 4
   ("body.single-product"+".woocommerce"+"product"+"onsale") - o desempate
   e' pelo NUMERO DE ELEMENTOS na cadeia (2 aqui - "body"+"div" - contra 1
   la', "span"), que fecha a favor desta regra. Repetir "top"/"left" fixos
   aqui e' so' um valor de partida (produto com 1 foto so', sem miniaturas
   ver abaixo): assets/js/product.js ("positionSaleBadge()") sobrescreve via
   "style.top"/"style.left" inline sempre que houver miniaturas.
   POR QUE PRECISA DE JS PRA POSICAO DE VERDADE: ".onsale" e' FILHO DIRETO de
   "div.product" (o proprio WooCommerce ja marca esse elemento como
   "position:relative", nao precisamos declarar de novo) - o MESMO
   container que tambem envolve a coluna de miniaturas, colocada a ESQUERDA
   da foto principal (a pedido do Ronaldo, ver ".woocommerce-product-
   gallery" mais abaixo). Um "left" fixo aqui cairia sobre as MINIATURAS
   (o elemento mais a esquerda dentro de "div.product"), nao sobre a foto -
   so' da' certo "de graca" quando o produto tem 1 foto so' (sem coluna de
   miniaturas, a moldura da foto e' o proprio primeiro filho). */
body.single-product.woocommerce div.product > .onsale{
	position:absolute;
	z-index:5;
	display:flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	min-height:0;
	min-width:0;
	height:32px;
	top:12px;
	left:12px;
	margin:0;
	background:var(--brown);
	color:#fff;
	font-size:.72rem;
	font-weight:700;
	line-height:1;
	padding:0 12px;
	border-radius:5px;
	text-transform:uppercase;
	letter-spacing:.03em;
	pointer-events:none;
}

/* Selo "Esgotado" da pagina de produto individual (".onsale.out-of-stock"):
   mesma logica do selo do card acima - reaproveita a cadeia de selecao ja
   vencedora do selo "Promocao" (incluindo contra o selo verde circular
   nativo do Astra, ver GOTCHA acima), so troca o "background" pra preto (a
   regra base ja declara "color:#fff"). Fora de estoque prevalece sobre
   promocao - a pedido do Ronaldo (2026-09-06). */
body.single-product.woocommerce div.product > .onsale.out-of-stock{
	background:#000;
}

/* Coracao de favoritos (YITH Wishlist): canto superior ESQUERDO (oposto ao
   selo de promocao, que fica no direito), circulo branco sobre a imagem.
   ATUALIZADO 2026-07-28: a versao instalada (4.17.0) vem configurada por
   padrao pra renderizar o botao do loop via componente React, hidratado em
   runtime num "<div class=yith-add-to-wishlist-button-block>" vazio - o
   coracao ate aparecia (confirmado ao vivo via Playwright), mas o CSS do
   proprio plugin nao reserva espaco pro rotulo "Add to wishlist" que vem
   junto (sem equivalente ao truque de esckonder via "a > span" abaixo, que so
   cobre o wrapper CLASSICO), entao o texto ficava visivel, cortado pelo
   circulo de 34px ("Add..."), e o icone espremia (largura encolhida pelo
   flexbox pra abrir espaco pro texto). Corrigido forcando o WooCommerce a
   renderizar o template PHP classico de novo (opcao
   "yith_wcwl_rendering_method" = "php-templates", ver
   bin/setup-shop-sidebar.php) - sem depender de hidratacao JS, o mesmo HTML
   de sempre (".yith-wcwl-add-to-wishlist"), com o rotulo escondido via
   "a > span" (regra abaixo) e so o SVG do coracao visivel. O wrapper React
   continua estilizado abaixo por seguranca (caso a opcao volte ao padrao
   numa atualizacao do plugin), mas nao deveria mais renderizar. */
.laluce-card-media .yith-wcwl-add-to-wishlist,
.laluce-card-media .yith-add-to-wishlist-button-block{
	position:absolute;
	top:10px;
	left:10px;
	margin:0;
	z-index:2;
	width:34px;
	height:34px;
	border-radius:999px;
	background:#fff;
	box-shadow:0 2px 8px rgba(0,0,0,.18);
	overflow:hidden;
}
.laluce-card-media .yith-wcwl-add-to-wishlist a{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:999px;
	color:var(--petrol);
	text-decoration:none;
}
.laluce-card-media .yith-wcwl-add-to-wishlist a:hover{
	color:var(--orange);
}
.laluce-card-media .yith-wcwl-add-to-wishlist a > span{
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}
.laluce-card-media .yith-wcwl-add-to-wishlist i{
	font-size:18px;
}
/* O icone do template classico vem como SVG ("svg.yith-wcwl-icon-svg"), nao
   "<i>" - o proprio CSS do plugin (assets/css/style.css) ja forca
   "color:var(--add-to-wishlist-icon-color,#000)" com especificidade igual a
   nossa ("2 classes + elemento"), preto por padrao; precisa de uma cadeia
   extra ("a svg") pra vencer e herdar a cor do link (petroleo/laranja no
   hover, ja definidos acima). CENTRALIZACAO (2026-07-28): o Ronaldo apontou
   o coracao fora do centro do circulo - a centralizacao via flexbox do "a"
   pai media certo nos testes daqui, mas nao ao vivo no navegador dele;
   trocado para centralizacao absoluta (compativel com "position:relative" no
   "a" acima), metodo que nao depende de calculo de flexbox nenhum, garantido
   pixel a pixel. */
.laluce-card-media .yith-wcwl-add-to-wishlist a svg{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	color:var(--petrol);
	width:18px;
	height:18px;
}
.laluce-card-media .yith-wcwl-add-to-wishlist a:hover svg{
	color:var(--orange);
}

/* Estado "ja esta na lista de desejos" (2026-07-28): apos o clique, o YITH
   troca o conteudo de dentro do circulo (mesmo wrapper .yith-wcwl-add-to-
   wishlist de sempre) pra um template DIFERENTE
   (".yith-wcwl-wishlistaddedbrowse", templates/add-to-wishlist-added.php) -
   coracao PREENCHIDO (fill="currentColor", nao mais so contorno) + texto
   "Product added!" + link "Browse wishlist", nenhum dos dois dentro de um
   "<a>" (por isso as regras "a svg"/"a > span" acima, escritas pro estado
   ANTES do clique, nunca alcancavam este outro estado - essa "falta de
   estilo" era a causa real do coracao preenchido nao aparecer certo, nao
   falta do icone em si, que o YITH ja manda pronto). Mesmo tratamento:
   circulo mostra so o coracao (agora vermelho, preenchido), texto e link
   escondidos - "font-size:0" no lugar do truque de clip (o texto aqui e' um
   no de texto solto dentro do "span.feedback", nao da pra escolder via
   "clip" sem tocar em HTML do plugin). */
.laluce-card-media .yith-wcwl-wishlistaddedbrowse{
	position:relative;
	width:100%;
	height:100%;
}
.laluce-card-media .yith-wcwl-wishlistaddedbrowse .feedback{
	font-size:0;
}
.laluce-card-media .yith-wcwl-add-to-wishlist.exists .yith-wcwl-wishlistaddedbrowse svg{
	color:var(--heart-red);
}
.laluce-card-media .yith-wcwl-wishlistaddedbrowse svg{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:18px;
	height:18px;
	color:var(--heart-red);
}
.laluce-card-media .yith-wcwl-wishlistaddedbrowse > a{
	display:none;
}

/* Estado "ja esta na lista de desejos", COM remocao (2026-07-29): opcao
   'yith_wcwl_after_add_to_wishlist_behaviour' trocada de 'view' (bloco acima,
   ".yith-wcwl-wishlistaddedbrowse" - so um link "Browse wishlist", sem jeito
   de desfavoritar de novo) para 'remove' (ver bin/setup-shop-sidebar.php,
   item 6) - clicar de novo no coracao vermelho agora desfavorita de verdade.
   Template PHP diferente (add-to-wishlist-remove.php): NAO usa o wrapper
   ".yith-wcwl-wishlistaddedbrowse" acima, o link real
   ("a.delete_item", href com nonce "remove_from_wishlist") fica direto dentro
   do MESMO wrapper ".yith-wcwl-add-button" do estado inicial ("favoritar") -
   por isso a regra generica ".yith-wcwl-add-to-wishlist a" ja centraliza e
   dimensiona o circulo sozinha, sem precisar de nada novo aqui. So falta: 1)
   esconder o texto "Remove from list" que vem solto (nao dentro de um <span>,
   por isso o truque de "clip" do "a > span" acima nao alcanca) - "font-size:0"
   direto no link resolve, sem afetar o SVG (dimensionado em px, nao em em);
   2) repetir a cor vermelha do coracao preenchido para este link especifico
   (a regra vermelha acima so mirava ".yith-wcwl-wishlistaddedbrowse svg", que
   não existe mais neste estado). */
.laluce-card-media .yith-wcwl-add-to-wishlist a.delete_item{
	font-size:0;
}
.laluce-card-media .yith-wcwl-add-to-wishlist.exists a.delete_item svg{
	color:var(--heart-red);
}

/* Aviso "Adicionado a lista de desejos" (2026-07-28): toast custom,
   centralizado sobre a IMAGEM do card especifico (nao o circulo pequeno do
   coracao) - assets/js/shop.js observa a classe "exists" aparecer no
   wrapper (sinal de sucesso do YITH) e injeta/remove este elemento. */
.laluce-wishlist-toast{
	position:absolute;
	top:50%;
	left:50%;
	z-index:6;
	transform:translate(-50%,-50%) scale(.92);
	padding:8px 16px;
	border-radius:5px;
	background:var(--cream);
	color:var(--brown);
	font-family:'Lato',-apple-system,BlinkMacSystemFont,sans-serif;
	font-size:.8rem;
	font-weight:700;
	text-align:center;
	white-space:nowrap;
	box-shadow:0 4px 14px rgba(0,0,0,.2);
	opacity:0;
	pointer-events:none;
	transition:opacity .25s ease,transform .25s ease;
}
.laluce-wishlist-toast.is-visible{
	opacity:1;
	transform:translate(-50%,-50%) scale(1);
}

.laluce-card-body{
	display:flex;
	flex-direction:column;
	flex:1;
	min-width:0;
	padding:16px 18px 20px;
}
.laluce-card-title{
	margin:0 0 8px;
	font-family:'Lato',-apple-system,BlinkMacSystemFont,sans-serif;
	font-size:1rem;
	line-height:1.35;
	font-weight:600;
}
.laluce-card-title a{
	color:var(--petrol);
	text-decoration:none;
}
.laluce-card-title a:hover{
	color:var(--brown);
}

.laluce-card-price{
	font-size:1.15rem;
	font-weight:700;
	color:var(--petrol);
}
.laluce-card-price ins{
	text-decoration:none;
	color:var(--brown);
	margin-left:6px;
}
.laluce-card-price del{
	color:rgba(0,59,70,.45);
	font-weight:400;
	font-size:.9rem;
}
.laluce-card-installment{
	margin:2px 0 14px;
	font-size:.82rem;
	color:rgba(0,59,70,.7);
}

.laluce-card-actions{
	margin-top:auto;
	display:flex;
	flex-direction:column;
	min-width:0;
	gap:6px;
}

/* Seletor de quantidade + adicionar ao carrinho, lado a lado (assets/js/shop.js
   liga o stepper ao atributo data-quantity do botao nativo). REVERTIDO em
   2026-07-28 (a pedido do Ronaldo) o layout empilhado da correcao anterior:
   agora o rotulo do botao vira "Adicionar" (bem mais curto que "Adicionar ao
   carrinho", ver filtro "woocommerce_product_add_to_cart_text" em
   inc/product-archive.php) e o seletor encolheu (botoes -/+ de 30px para
   26px, campo numerico de 34px para 28px) - a soma cabe ao lado do texto
   curto mesmo nos cards mais estreitos do grid (minmax(230px,1fr)), sem
   precisar quebrar linha. */
.laluce-qty-row{
	display:flex;
	align-items:stretch;
	gap:6px;
	margin-left:-10px;
	margin-right:-10px;
}
.laluce-qty-stepper{
	display:flex;
	align-items:center;
	height:32px;
	box-sizing:border-box;
	border:1.5px solid rgba(0,59,70,.2);
	border-radius:5px;
	overflow:hidden;
	flex-shrink:0;
}
.laluce-qty-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	height:32px;
	border:none;
	background:none;
	font-size:.8rem;
	line-height:1;
	color:var(--petrol);
	cursor:pointer;
}
.laluce-qty-btn:hover{
	color:var(--orange);
}
.laluce-qty-input{
	height:32px;
	border:none;
	border-left:1px solid rgba(0,59,70,.15);
	border-right:1px solid rgba(0,59,70,.15);
	text-align:center;
	font-family:inherit;
	font-size:.8rem;
	color:var(--petrol);
	-moz-appearance:textfield;
}
.laluce-qty-input::-webkit-outer-spin-button,
.laluce-qty-input::-webkit-inner-spin-button{
	-webkit-appearance:none;
	margin:0;
}
/* GOTCHA (achado ao vivo, 2026-07-28 - mesma familia dos outros bugs de
   especificidade desta sessao, e a causa raiz real do "excedendo a largura
   do card" relatado desde o pedido original - nao so o texto longo do botao
   de adicionar): DUAS regras genericas do Astra/WooCommerce inflavam o
   stepper: 1) "input[type=\"number\"], input[type=\"text\"], ...{width:100%}"
   (seletor de atributo conta como classe - "input[type=number]" com 1
   elemento+1 atributo vencia ".laluce-qty-input" sozinha, 1 classe so); 2)
   "button{padding:15px 30px}" e "input[type=number]{padding:12px 16px}"
   (paddings enormes, genericos pra qualquer botao/input do site) - com
   "box-sizing:border-box" (tambem do Astra), quando o padding sozinho ja
   passa da largura que a gente pedia (26px/28px), o navegador nao consegue
   encolher mais - a caixa vira do tamanho do padding (e o conteudo fica
   espremido a 0), por isso os numeros batiam exatamente com o padding do
   Astra (60px = 30+30, 34px = 16+16+2 de borda), nao com os 26px/28px daqui.
   Largura E padding movidos pra ca, escopados a ".laluce-qty-stepper" (2
   classes, vence sem ambiguidade), zerando o padding explicitamente. Mesma
   familia de bug tambem na ALTURA do campo numerico (2026-07-28, 3a rodada):
   "input[type=\"text\"],input[type=\"number\"],...{height:40px}" (CSS
   dinamico do Astra, 1 elemento+1 atributo) vencia ".laluce-qty-input"
   sozinha (1 classe) - o campo ficava 40px contra os 38px do resto (botao
   "Adicionar", botoes -/+), o conjunto inteiro esticava pra 40+bordas via
   "align-items:stretch" da linha. Altura movida pra ca tambem. */
.laluce-qty-stepper .laluce-qty-btn{
	width:18px;
	padding:0;
}
.laluce-qty-stepper .laluce-qty-input{
	width:20px;
	height:32px;
	padding:0;
}

/* GOTCHA (2026-07-29, achado no card do "WordPress Pennant" depois de forcar
   "white-space:nowrap" - ver comentario mais abaixo): o texto sem quebra
   alargou o proprio BOTAO, que alargou o CARD inteiro e a COLUNA da grade
   (".ast-woo-shop-products" usa CSS Grid, "repeat(auto-fill,minmax(230px,
   1fr))") - nunca deveria acontecer, a pedido do Ronaldo ("nada deve
   modificar a largura das colunas de produtos"). Causa raiz: este botao E'
   um item flex de ".laluce-card-actions" (coluna) - todo item flex tem
   "min-width:auto" por padrao (nao "0"), que o spec define como o tamanho de
   MIN-CONTENT do item; com "white-space:nowrap", o min-content de um texto
   vira igual ao max-content (a linha inteira, sem quebra possivel) - ou
   seja, o item flex se recusava a encolher abaixo da largura do texto
   completo, empurrando a cadeia toda (".laluce-card-actions" -> ".laluce-
   card-body" -> "li.product", este ultimo o proprio item da grade) a crescer
   junto. "min-width:0" quebra essa regra especial (permite encolher abaixo
   do conteudo), e junto com "overflow:hidden"/"text-overflow:ellipsis" o
   texto que nao cabe trunca com "..." em vez de alargar qualquer coisa -
   confirmado ao vivo que a largura do card fica identica com ou sem este
   produto de exemplo. */
.laluce-card-actions a.button,
.laluce-card-actions a.add_to_cart_button{
	display:flex;
	align-items:center;
	justify-content:center;
	height:32px;
	margin:0;
	padding:0 14px;
	border-radius:5px;
	background:var(--orange);
	color:var(--petrol);
	font-weight:700;
	font-size:.9rem;
	text-decoration:none;
	text-align:center;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	min-width:0;
	transition:filter .15s ease;
}
/* GOTCHA (2026-07-29): "text-overflow:ellipsis" nao funciona de forma
   confiavel direto no "<a class=button>" - ele e' "display:flex" e o texto e'
   um NO SOLTO (item flex anonimo, sem elemento proprio); confirmado ao vivo
   (mobile) que o "..." nunca aparecia, o navegador so cortava o texto dos 2
   lados sem indicacao nenhuma (pior ainda com "justify-content:center": o
   corte acontecia nos dois lados ao mesmo tempo). Unico caso onde um texto
   arbitrariamente longo pode aparecer: produto tipo "externo/afiliado"
   (".product_type_external", classe que o proprio WooCommerce ja adiciona -
   link pra fora, texto do botao livre por produto); "Adicionar"/"Ver opcoes"/
   os nossos proprios rotulos continuam curtos, nunca precisam truncar.
   Resolvido envolvendo o texto num "<span class=laluce-btn-label">" de
   verdade via JS (assets/js/shop.js, "wrapExternalButtonLabel") - um
   elemento normal aceita "overflow/text-overflow" do jeito esperado, ao
   contrario do no de texto solto. */
.laluce-card-actions a.button.product_type_external{
	justify-content:flex-start;
}
.laluce-card-actions a.button.product_type_external .laluce-btn-label{
	display:block;
	width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	text-align:left;
}
/* GOTCHA (2026-07-28, achado corrigindo o card de produto variavel - ex.:
   "Hoodie", com variacoes de tamanho/cor): "flex:1" fazia sentido so dentro
   de ".laluce-qty-row" (o botao dividindo espaco com o stepper, ver
   abaixo) - produtos SEM seletor de quantidade (nao-simples, ou fora de
   estoque) renderizam esse botao direto dentro de ".laluce-card-actions"
   (coluna, "flex-direction:column"), onde "flex:1" refere-se a ALTURA (eixo
   principal da coluna), nao largura - o botao esticava/desalinhava em vez
   de so ocupar a largura toda. "width:100%" acima resolve o caso comum aos
   dois contextos; "flex:1" (largura, dividindo com o stepper) fica isolado
   aqui, so pra dentro da linha. */
.laluce-qty-row a.button,
.laluce-qty-row a.add_to_cart_button{
	flex:1;
	min-width:0;
	width:auto;
}
/* Respiro do texto "Adicionar" sumindo em telas bem estreitas (2026-09-18,
   achado pelo Ronaldo comparando Samsung S20 Ultra - 412px - com Samsung A55
   - 360px). Causa raiz medida ao vivo (Playwright, viewport real): dentro de
   ".laluce-qty-row" so' o BOTAO e' flexivel ("flex:1" acima) - o stepper de
   quantidade ao lado tem largura FIXA (~58px) e o padding do botao
   (".laluce-card-actions a.button", 14px de cada lado) e' fixo tambem, sem
   escalar com a tela. Cada px que a coluna do card perde vira, direto, px a
   menos so' pro botao (unico elemento elastico da linha) - com o texto
   "Adicionar" tambem em tamanho fixo, existe uma largura de tela onde o
   padding simplesmente nao cabe mais e o texto passa a invadir a area do
   padding (sem "..." visivel, gotcha ja documentado acima nesta secao -
   o navegador so' corta silenciosamente, dos 2 lados, por causa do
   "justify-content:center").
   Medido: com o padding/fonte originais, o ponto de virada fica em ~381px de
   largura de tela (382px = card com espaco exato para texto+padding, sem
   sobra) - abaixo disso, o respiro comeca a diminuir e depois sumir. O S20
   Ultra (412px) fica acima da virada (por isso sempre teve respiro), o A55
   (360px) fica abaixo (por isso perdeu o respiro).
   Correcao: alivia o padding e a fonte SO' abaixo de 390px (S20 Ultra segue
   sem nenhuma mudanca) - reduz o espaco que o padding+texto exigem, para
   voltar a caber com folga na largura de botao real dessas telas. Valores
   conferidos ao vivo (Playwright) em 320/360/375/390px: sobra >= 8px de
   cada lado do texto em todos, sem cortar "Adicionar". */
@media (max-width:390px){
	.laluce-qty-row a.button,
	.laluce-qty-row a.add_to_cart_button{
		padding:0 8px;
		font-size:.8rem;
	}
}
/* GOTCHA (2026-07-28, mesma familia de bug de especificidade): o
   "margin:0" acima nao vencia sozinho porque o Astra tem
   ".woocommerce-js ul.products li.product .button{margin-top:.5em}" (4
   classes + 2 elementos) - mais especifico que ".laluce-card-actions
   a.button" (2 classes + 1 elemento). Isso empurrava o botao ~7px pra
   baixo, desalinhando do seletor de quantidade ao lado. Repetindo a MESMA
   cadeia de seletor do Astra pra vencer de vez. */
/* GOTCHA (2026-07-29, achado no card do "WordPress Pennant" - texto de botao
   longo, "Buy on the WordPress swag store!"): alem da margem (comentario
   acima), essa mesma regra do WooCommerce ("ul.products li.product .button",
   3 classes) tambem tinha "white-space:normal", vencendo o "white-space:
   nowrap" da nossa regra base (2 classes) - o texto longo quebrava em 2
   linhas, estourando a altura fixa (32px) do botao. Repetido aqui na mesma
   cadeia ja vencedora. */
.woocommerce-js ul.products li.product .laluce-card-actions a.button,
.woocommerce-js ul.products li.product .laluce-card-actions a.add_to_cart_button{
	margin:0;
	white-space:nowrap;
}
/* Produto SEM seletor de quantidade (variavel/indisponivel - ex.: "Hoodie"):
   o botao e' filho DIRETO de ".laluce-card-actions" (sem ".laluce-qty-row"
   por cima), entao precisa da MESMA margem negativa lateral que o
   ".laluce-qty-row" leva no caso comum, pra alinhar com o botao do WhatsApp
   logo abaixo (8px de respiro nas 2 bordas). O combinador ">" ja
   distingue os dois casos sozinho (grandfilho de ".laluce-qty-row" nao
   bate aqui). */
.woocommerce-js ul.products li.product .laluce-card-actions > a.button,
.woocommerce-js ul.products li.product .laluce-card-actions > a.add_to_cart_button{
	margin:0 -10px;
}
.laluce-card-actions a.button:hover,
.laluce-card-actions a.add_to_cart_button:hover{
	filter:brightness(1.08);
}
.laluce-card-actions a.button.loading{
	opacity:.7;
}

/* Margem negativa nas laterais/embaixo (2026-07-28, a pedido do Ronaldo):
   puxa o botao pra mais perto das bordas do card do que o padding do
   ".laluce-card-body" (18px laterais, 20px embaixo) deixaria por padrao -
   sem mudar esse padding, que tambem serve pro titulo/preco/etc acima. Novo
   respiro: 8px dos 3 lados (18-10 e 20-12). */
.laluce-whatsapp-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	height:32px;
	margin:0 -10px -12px;
	border:1.5px solid var(--brown);
	border-radius:5px;
	background:var(--cream);
	color:var(--brown);
	font-weight:700;
	font-size:.85rem;
	text-decoration:none;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	min-width:0;
}
.laluce-whatsapp-btn:hover{
	background:var(--brown);
	color:var(--cream);
}
.laluce-whatsapp-btn .ic{
	width:16px;
	height:16px;
}

/* --- Sidebar de filtros (Main Sidebar / sidebar-1 do Astra - so aparece em
   /shop/ e categorias, ver bin/setup-shop-sidebar.php) --- */
/* Fundo do painel (2026-07-30, a pedido do Ronaldo - "mesma cor do
   background da loja"): trocado de "--bg-sidebar" (opcao "Nevoa Petroleo"
   documentada em design.md, um petroleo bem diluido) para "--bg-site"
   (branco na epoca, a mesma variavel que colore o "body" do site inteiro) -
   a variavel "--bg-sidebar" continua definida em :root (nao removida) caso
   o Ronaldo queira voltar a um painel destacado no futuro, so nao e mais
   consumida aqui. So padding-top/bottom/left aqui, o padding-right (respiro
   ate a grade) fica com a regra ".ast-left-sidebar #secondary" (mais
   especifica, 1 classe + 1 ID) mais acima neste arquivo - nao mexer nele por
   aqui.

   DESACOPLADO de "--bg-site" em 2026-08-06 (a pedido do Ronaldo): quando
   "--bg-site" virou creme claro (ver "Camadas de fundo" no topo do
   arquivo), a sidebar mudou de cor JUNTO - efeito colateral indesejado,
   apontado pelo Ronaldo ("a cor de fundo das barras de filtro... deveria
   ter permanecido como estava"). Essa MESMA regra tambem e a gaveta de
   filtros MOBILE (ver secao "Gaveta de filtros mobile" mais abaixo - a
   gaveta e o proprio "#secondary" reposicionado via "position:fixed",
   "sem elemento novo de fundo" - por isso a cor da gaveta mudou junto
   tambem, mesma causa). Corrigido voltando a um branco FIXO (nao mais
   ligado a variavel nenhuma) - a decisao de 2026-07-30 era "acompanhar o
   fundo da loja", mas agora que o fundo da loja mudou de tom, o Ronaldo
   quer os dois desacoplados: sidebar/gaveta continuam brancas, so o fundo
   geral da pagina muda.

   ATUALIZADO em 2026-08-15 (a pedido do Ronaldo): no DESKTOP a barra passa a
   usar o creme das paginas de novo, mas agora por uma variavel PROPRIA
   ("--bg-filter-bar", ver :root no topo), nao mais herdando "--bg-site" - o
   desacoplamento de 2026-08-06 continua valendo, muda so o valor. O
   "background-color:#fff" da regra abaixo NAO foi tocado de proposito: e' ele
   que pinta a gaveta MOBILE (este mesmo "#secondary" vira gaveta no
   "@media (max-width:921px)"), que segue branca. A troca desktop esta no
   "@media (min-width:922px)" logo depois da regra. */
/* "margin-top:0" (2026-07-30, a pedido do Ronaldo): zera o "#secondary{margin:
   4em 0 2.5em}" nativo do Astra (so 1 ID de especificidade, ganha por ordem
   de carregamento) - sem isso a sidebar comecava 64px mais abaixo que a
   grade/titulo "Shop" (mesma coluna, o "#primary" nao tem esse margin-top).
   "align-self:flex-start" (mesmo pedido): o pai (".ast-container") e' flex
   sem "align-items" proprio (equivale a "stretch"), entao a sidebar esticava
   pra bater a altura da grade de produtos (bem mais alta, ainda mais com a
   rolagem infinita). Com isso a altura volta a ser so o conteudo real (os
   filtros) + o "padding-bottom" abaixo. */
#secondary{
	background-color:#fff;
	padding-top:24px;
	padding-bottom:30px;
	padding-left:24px;
	margin-top:0;
	border-radius:10px;
	align-self:flex-start;
}
/* Fundo da barra de filtros, SO no desktop (2026-08-15, a pedido do Ronaldo).
   Vale em toda pagina que mostra esta sidebar (vitrine /shop/, categorias e
   resultados de busca) - o seletor e' o proprio "#secondary", nao ha nada
   escopado por tipo de pagina aqui.

   Por que uma media query em vez de trocar o valor na regra acima: a regra
   acima serve os DOIS modos (no mobile este mesmo elemento vira a gaveta
   deslizante, ver secao "Gaveta de filtros mobile" mais abaixo, que so' muda
   posicao/tamanho e nunca redeclara o fundo). Mexer nela pintaria a gaveta
   junto - exatamente o efeito colateral que o Ronaldo apontou em 2026-08-06.
   Breakpoint 922px = o mesmo par ja usado no arquivo inteiro (as gavetas vivem
   em "max-width:921px"), entao nao existe faixa de largura sem regra nem faixa
   com as duas.

   Especificidade: 1 ID nos dois lados (media query nao soma especificidade),
   entao esta vence por vir DEPOIS no arquivo - mesma tecnica de empate+ordem ja
   usada varias vezes aqui contra o CSS dinamico do Astra. */
@media (min-width:922px){
	#secondary{
		background-color:var(--bg-filter-bar);
	}
}
#secondary .widget{
	/* Reduzido de 32px (pedido do Ronaldo, 2026-07-31): distancia entre o
	   divisor (este "border-bottom") e o titulo do widget seguinte. */
	margin-bottom:6px;
	padding-bottom:24px;
	border-bottom:1px solid rgba(0,59,70,.1);
}
/* Ultimo widget (2026-07-30): zera a margem/padding proprios do widget -
   sobra so o "padding-bottom:30px" do "#secondary" acima como distancia ate
   a borda de baixo do painel, contado a partir do ultimo valor disponivel
   (ex.: "Presente" dentro de "Filtrar por Ideia", o widget que
   estiver por ultimo no momento). */
#secondary .widget:last-child{
	border-bottom:none;
	margin-bottom:0;
	padding-bottom:0;
}
#secondary .widget:last-child .woocommerce-widget-layered-nav-list li:last-child,
#secondary .widget:last-child .laluce-layered-nav-list li:last-child{
	margin-bottom:0;
}
#secondary .widget-title{
	margin:0 0 16px;
	font-family:'Lato',-apple-system,BlinkMacSystemFont,sans-serif;
	/* 15px (pedido do Ronaldo, 2026-07-31) - raiz do documento e 16px (sem
	   override em nenhum "html{font-size}" deste tema), entao 15/16 = .9375rem. */
	font-size:.9375rem;
	font-weight:600;
	color:var(--petrol);
}

/* Lista de termos (Aroma nativo + Sub-categoria/Tags customizados, ver
   inc/product-archive.php) com aparencia de checkbox via ::before - os 3
   sao <a> que adicionam/removem o termo da URL (mesma tecnica do layered
   nav nativo do WooCommerce), nao um <form> com <input type=checkbox> de
   verdade. */
.woocommerce-widget-layered-nav-list,
.laluce-layered-nav-list{
	list-style:none;
	margin:0;
	padding:0;
}
/* GOTCHA (achado ao vivo via Playwright, 2026-07-31, mesma familia de bug ja
   documentada mais abaixo pro padding-left do checkbox): o Astra injeta
   "#secondary li{margin-bottom:.75em}" via <style> inline no <head> (CSS
   dinamico do Customizer, sem arquivo/"href" proprio) - 1 ID de
   especificidade, que ganha de QUALQUER numero de classes, entao a regra
   abaixo (so classes) nunca vencia, nao importava o valor. Repete o mesmo
   truque ja usado nesta secao: prefixa com "#secondary" pra empatar (e
   ganhar por ordem, o CSS do tema-filho carrega depois) em vez de so
   classe. */
#secondary .woocommerce-widget-layered-nav-list li,
#secondary .laluce-layered-nav-list li{
	/* Reduzido de 10px (pedido do Ronaldo, 2026-07-31, "espaco entre as
	   opcoes de filtro" menor). */
	margin:0 0 4px;
}
.woocommerce-widget-layered-nav-list li a,
.laluce-layered-nav-list li a{
	position:relative;
	display:inline-flex;
	align-items:center;
	padding-left:26px;
	/* 13px (pedido do Ronaldo, 2026-07-31) - 13/16 = .8125rem (raiz 16px, ver
	   nota em "#secondary .widget-title" acima). */
	font-size:.8125rem;
	color:var(--petrol);
	text-decoration:none;
}
/* GOTCHA (achado ao vivo via Playwright, 2026-07-28 - mesma familia de bug
   do selo/coracao do card, corrigidos mais acima): o CSS de compatibilidade
   do Astra pra grade do WooCommerce
   (".woocommerce-js .woocommerce-widget-layered-nav-list
   .woocommerce-widget-layered-nav-list__item a{padding:1px 0px}",
   woocommerce-grid.min.css) tem mais classes (3) que a regra acima (1) e
   zerava o "padding-left" - o quadradinho de checkbox (absoluto em "left:0")
   ficava sobrepondo as 2-3 primeiras letras de cada termo ("Baunilha"
   aparecia como "unilha", "Presente" como "esente"). Repeticao do valor
   escopada a "#secondary" (a sidebar de filtros): ID bate qualquer
   quantidade de classe, sem precisar contar/igualar cadeia de seletor. */
#secondary .woocommerce-widget-layered-nav-list li a,
#secondary .laluce-layered-nav-list li a{
	padding-left:26px;
}
.woocommerce-widget-layered-nav-list li a::before,
.laluce-layered-nav-list li a::before{
	content:"";
	position:absolute;
	left:0;
	width:16px;
	height:16px;
	border:1.5px solid rgba(0,59,70,.3);
	border-radius:4px;
	background:#fff;
}
.woocommerce-widget-layered-nav-list li.chosen a::before,
.laluce-layered-nav-list li.chosen a::before{
	background:var(--petrol);
	border-color:var(--petrol);
}
/* GOTCHA (achado ao vivo via Playwright, 2026-08-07, mesma familia de bug ja
   documentada nesta secao pro padding-left e pro "margin-bottom" do "li"):
   o CSS de compatibilidade do Astra pra grade do WooCommerce
   (woocommerce-grid.min.css) tem
   ".woocommerce-widget-layered-nav-list__item--chosen a::before" (3 classes)
   setando um GLYPH de fonte de icone (content:"\e013", font-family:
   WooCommerce - um circulo preenchido com check) na cor #d65d67 (vermelho) -
   mais classes que a nossa regra acima (2 classes + 2 elementos), entao o
   "content"/"color"/"font-family" dela vencem e pintam esse icone vermelho
   POR CIMA do nosso quadradinho (mesmo "::before", background/border
   continuam nossos - so o glyph em si nao era). Resultado visual: um circulo
   vermelho ao inves do quadradinho petrol vazio que o "::after" (o check de
   verdade, cream) deveria completar. Repete o truque ja usado nesta secao:
   prefixa com "#secondary" (ID sempre vence qualquer quantidade de classe)
   so pra zerar o "content" e nenhum glyph aparecer. */
#secondary .woocommerce-widget-layered-nav-list li.chosen a::before,
#secondary .laluce-layered-nav-list li.chosen a::before{
	content:"";
}
/* "top" de proposito ausente (2026-08-07, achado ao vivo via Playwright ao
   confirmar o fix do glyph vermelho do Astra acima - ate entao o check nunca
   tinha aparecido de verdade pra ninguem perceber, sempre escondido embaixo
   do circulo vermelho): igual o "::before" do quadradinho (mesma secao,
   tambem sem "top"), deixa o "align-items:center" do "a{display:inline-flex}"
   centralizar verticalmente sozinho. Um "top:3px" fixo aqui (valor antigo)
   nao correspondia a nenhuma conta em cima do "top:5px" que o quadradinho
   recebe do mesmo jeito - o check aparecia colado no topo da caixa em vez de
   centralizado dentro dela. */
.woocommerce-widget-layered-nav-list li.chosen a::after,
.laluce-layered-nav-list li.chosen a::after{
	content:"";
	position:absolute;
	left:5px;
	width:6px;
	height:9px;
	border:solid var(--cream);
	border-width:0 2px 2px 0;
	transform:rotate(45deg);
}
.woocommerce-widget-layered-nav-list li a:hover,
.laluce-layered-nav-list li a:hover{
	color:var(--brown);
}
.woocommerce-widget-layered-nav-list .count,
.laluce-layered-nav-list .count{
	margin-left:6px;
	/* 11px (pedido do Ronaldo, 2026-07-31) - 11/16 = .6875rem. */
	font-size:.6875rem;
	color:rgba(0,59,70,.5);
}

/* Filtro de preco: skin do slider nativo (jQuery UI, WC_Widget_Price_Filter)
   na paleta da marca. */
.price_slider_wrapper .ui-slider{
	position:relative;
	height:4px;
	margin:12px 4px 20px;
	background:rgba(0,59,70,.15);
	border-radius:999px;
}
.price_slider_wrapper .ui-slider-range{
	position:absolute;
	height:100%;
	background:var(--petrol);
	border-radius:999px;
}
.price_slider_wrapper .ui-slider-handle{
	position:absolute;
	top:50%;
	width:16px;
	height:16px;
	margin-left:-8px;
	transform:translateY(-50%);
	background:var(--orange);
	border:2px solid #fff;
	border-radius:999px;
	box-shadow:0 1px 4px rgba(0,0,0,.3);
	cursor:pointer;
	outline:none;
}
.price_slider_amount{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:8px;
}
.price_slider_amount input[type=text]{
	width:80px;
	padding:6px 8px;
	border:1.5px solid rgba(0,59,70,.2);
	border-radius:5px;
	/* 12px (pedido do Ronaldo, 2026-07-31) - 12/16 = .75rem. */
	font-size:.75rem;
	color:var(--petrol);
	text-align:center;
}
.price_slider_amount .button{
	margin-left:auto;
	padding:7px 16px;
	border:none;
	border-radius:999px;
	background:var(--petrol);
	color:var(--cream);
	/* 12px (pedido do Ronaldo, 2026-07-31) - 12/16 = .75rem. */
	font-size:.75rem;
	font-weight:700;
	cursor:pointer;
}
.price_slider_amount .button:hover{
	filter:brightness(1.2);
}
.price_slider_amount .price_label{
	width:100%;
	/* 12px (pedido do Ronaldo, 2026-07-31) - 12/16 = .75rem. */
	font-size:.75rem;
	color:rgba(0,59,70,.7);
}
.price_slider_amount .clear{
	display:none;
}

/* Descricao da vitrine/categoria ("Bem-vinda a La Luce...", conteudo da
   pagina "Shop" ou da categoria, ver bin/setup-shop-descriptions.php), logo
   abaixo do titulo "Shop"/"Velas Aromaticas": vinha sem NENHUMA cor propria
   (herdava um cinza-azulado generico do Astra, "#334155" - nao e da nossa
   paleta, nao aparece em lugar nenhum documentado em design.md). ".page-
   description" e o wrapper na vitrine, ".term-description" o wrapper na
   categoria (nomes diferentes, mesmo hook "woocommerce_archive_description",
   ver wc-template-functions.php).
   LARGURA (2026-07-30, a pedido do Ronaldo - "mesma largura do container dos
   produtos, pra dar simetria"): removido o "max-width:640px" da 1a versao -
   sem limite proprio, o texto ocupa 100% da coluna de conteudo (mesmo "auto"
   que ".woocommerce ul.products" ja usa, sem largura fixa nenhuma tambem),
   entao os dois ficam com a mesma largura e o mesmo alinhamento a esquerda
   automaticamente, sem precisar repetir nenhum valor em px (nem depender de
   que a largura da sidebar continue a mesma no futuro). */
.woocommerce-products-header .page-description,
.woocommerce-products-header .term-description{
	margin-bottom:10px;
	color:rgba(0,59,70,.85);
}
.woocommerce-products-header .page-description p,
.woocommerce-products-header .term-description p{
	margin:0 0 14px;
	line-height:1.6;
}
.woocommerce-products-header .page-description p:last-child,
.woocommerce-products-header .term-description p:last-child{
	margin-bottom:0;
}
/* Espaco entre o titulo "Shop"/"Velas Aromaticas" e o texto de descricao
   reduzido para 10px (2026-07-30, a pedido do Ronaldo - estava em 36px).
   REGRA MOVIDA em 2026-08-06 pra ".laluce-shop-title-row" (ver acima, junto
   da CSS do botao "Filtrar") - desde que o titulo passou a morar dentro de
   um wrapper flex, ele deixou de ser irmao direto da descricao, entao este
   ":has()" escopado no proprio <h1> nunca mais bateria. */
/* Assinatura "Tuo momento, tua luce" (2026-07-30, a pedido do Ronaldo): fonte
   Allura (a mesma do slogan na landing "Em breve", coming-soon.html/.slogan)
   em vez do Lato em italico da 1a versao - reaproveita a fonte cursiva ja
   auto-hospedada (ver @font-face no topo deste arquivo), so num tamanho
   menor que o da landing (ali e' hero de pagina inteira; aqui e' so um
   toque de assinatura abaixo de um paragrafo comum). Cor marrom (acento
   quente da paleta) em vez do petroleo do texto ao redor, pra destacar como
   assinatura, nao como mais uma frase do corpo. */
.laluce-slogan{
	font-family:'Allura', cursive;
	font-size:1.6rem;
	line-height:1.2;
	color:var(--brown);
}

/* Linha "Exibindo 1-12 de 19 resultados" + dropdown de ordenacao: layout de
   "tabela de 1 linha, 2 colunas" (2026-09-03, pedido do Ronaldo com print -
   substitui a versao anterior baseada em float). O wrapper
   ".laluce-shop-toolbar" (aberto/fechado via hook em
   inc/product-archive.php, em volta dos dois sem sobrescrever nenhum
   template) resolve os dois lados de uma vez: coluna 1 (contador)
   encostada na borda ESQUERDA, coluna 2 (ordenacao) encostada na borda
   DIREITA - a MESMA borda direita da grade de produtos logo abaixo, ja que
   os dois sao filhos do mesmo container. "flex-wrap:nowrap" explicito: o
   Ronaldo NAO quer o dropdown caindo pra uma 2a linha em nenhuma largura
   (1a tentativa, baseada em float, fazia isso abaixo de 544px e foi
   rejeitada) - a folga necessaria pra' nunca precisar quebrar linha vem do
   texto curto no mobile (".laluce-result-count-short", ver abaixo), nao
   deste wrapper. */
.laluce-shop-toolbar{
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	margin-bottom:8px;
}
.laluce-shop-toolbar .woocommerce-result-count{
	float:none;
	margin:0;
	text-align:left;
}
.laluce-shop-toolbar .woocommerce-ordering{
	float:none;
	margin:0;
}

/* --- Dropdown de ordenacao (woocommerce_catalog_ordering) --- */
.woocommerce-ordering{
	display:flex;
	align-items:center;
	gap:8px;
}
/* Icone de ordenacao (seta pra cima + seta pra baixo) no lugar de um label
   de texto (2026-08-05, pedido do Ronaldo: o label "Ordenação:" nao ficou
   bom). So aparece porque woocommerce/loop/orderby.php sobrescreve o
   template nativo pra renderizar esse <span> antes do <select> (o original
   nao tem nenhum icone aqui). Cor petroleo pra acompanhar o texto do
   proprio seletor (".ic" usa "background-color:currentColor", ver a
   definicao base mais acima neste arquivo). */
.woocommerce-ordering .ic-sort{
	color:var(--petrol);
}
/* Prefixo "#primary" necessario so nesta regra pra vencer por especificidade
   a propria CSS do Astra pra este elemento exato (achada via curl na pagina,
   ver blueprints.md): "woocommerce-grid.min.css" tem ".woocommerce
   .woocommerce-ordering select{border:transparent;border-radius:0}" (2
   classes), que vence a nossa versao de 1 classe mesmo carregando depois -
   so um seletor por ID bate 2 classes garantido. As demais propriedades
   abaixo (padding, background-image, cor, fonte) nao tem concorrencia e
   continuariam funcionando sem o prefixo, mas fica tudo junto por clareza.
   "#secondary" adicionado em 2026-08-06: no mobile o proprio ".woocommerce-
   ordering" e' MOVIDO (nao clonado) pra dentro da gaveta de filtros (ver
   "Gaveta de filtros mobile" mais abaixo e assets/js/shop.js) - sem repetir
   o seletor aqui, o dropdown perderia todo este estilo ao trocar de pai
   (deixa de ser descendente de "#primary"). */
#primary .woocommerce-ordering select,
#secondary .woocommerce-ordering select{
	-webkit-appearance:none;
	appearance:none;
	/* "width:auto" pra vencer o "select{width:100%}" global do Astra (CSS de
	   Forms do customizer, especificidade menor que a nossa mas so perde se
	   a gente tambem declarar "width" aqui - cada propriedade e resolvida
	   separadamente, ganhar a regra inteira nao "herda" as propriedades que
	   ela nao declarou). Sem isso o select esticava pra ocupar o espaco
	   sobrando no flex, bem mais largo que o texto das opcoes (pedido do
	   Ronaldo, 2026-08-05: dropdown "mais justinho"). */
	width:auto;
	padding:9px 34px 9px 16px;
	/* Marrom da paleta (--brown), fina (1px) e cantos com radius 5px -
	   pedido do Ronaldo (2026-08-05), substitui a borda em pilula anterior. */
	border:1px solid var(--brown);
	border-radius:5px;
	background-color:#fff;
	background-image:url(assets/icons/chevron-down-pb.svg);
	background-repeat:no-repeat;
	background-position:right 14px center;
	background-size:12px;
	color:var(--petrol);
	font-family:inherit;
	font-size:.88rem;
	cursor:pointer;
}

/* Card "Nenhum produto foi encontrado" (woocommerce/loop/no-products-found.php,
   NUNCA sobrescrito - a div ".woocommerce-no-products-found" que o embrulha
   e' exclusiva desse template, entao da' pra escopar por ela sem afetar
   nenhum outro ".woocommerce-info" do site (cupom, carrinho, etc. - ver
   memory/mensagens-modal.md). Mesmo cartao branco com borda/raio 5px do
   estado vazio da Minha Conta (".laluce-ma-empty", ver mais abaixo neste
   arquivo), pedido do Ronaldo (2026-09-03) pra vitrine/categoria/busca -
   as 3 paginas que podem cair nesse "sem resultado" (mesmo template
   archive-product.php nos 3 casos, ver laluce_is_shop_archive() em
   inc/product-archive.php). Sem botao depois (diferente do "Ver produtos"
   do Downloads): aqui a pessoa ja' esta' numa pagina de produtos, um botao
   pra "ver produtos" seria redundante. */
.woocommerce-no-products-found .woocommerce-info{
	display:block;
	margin:0;
	padding:32px 16px;
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	text-align:center;
	font-size:14px;
	color:#7a7a70;
}
/* Icone padrao do Astra (pseudo-elemento da fonte de icones dele) - some
   igual a' tecnica ja usada em ".laluce-modal-corpo .woocommerce-info"
   acima neste arquivo, so' sai com "content:none". */
.woocommerce-no-products-found .woocommerce-info::before{
	content:none;
}

/* Contador de resultados: versao curta no mobile, nas 3 frases possiveis
   (resultado unico / todos numa pagina so' / paginado) - 2026-09-03, pedido
   do Ronaldo. Causa: o texto do contador (float:left) e o dropdown de
   ordenacao (float:right, ".woocommerce-ordering") disputam a mesma linha -
   achado ao vivo com Playwright (375px de largura) que ate' o caso mais
   comum ("Exibindo 1-12 de 84 resultados") ja' espremia o dropdown, nao so'
   o de resultado unico.
   1a TENTATIVA (mesmo dia): deixar o dropdown CAIR pra' uma 2a linha quando
   nao coubesse ao lado do texto. REJEITADA pelo Ronaldo (print): ele quer
   os dois SEMPRE na mesma linha, nunca empilhados - entao a solucao certa e'
   encurtar o TEXTO, nao ceder espaco. A versao curta (template
   woocommerce/loop/result-count.php, override neste tema-filho) tira a
   palavra "resultado(s)" das 3 frases, ficando so' com os numeros
   ("Exibindo 1-12 de 84" em vez de "...84 resultados"; resultado unico vira
   "Exibindo 1 de 1", no MESMO formato numerico dos outros 2 casos, em vez
   de "um unico resultado" por extenso) - da' folga suficiente pro dropdown
   ficar ao lado sem espremer nem quebrar linha, sem precisar mexer no
   float/layout dos dois elementos.
   As duas versoes (completa/curta) sao impressas sempre pelo template; so'
   o CSS decide qual aparece - sem JS, sem duplicar logica de paginacao/
   ordenacao. Escondida por padrao (desktop mostra a versao completa,
   nativa do WooCommerce, com todo o texto adicional de acessibilidade);
   troca no mesmo breakpoint "mobile" ja usado no resto desta pagina
   (gaveta de filtros, botao "Filtrar" - ver acima). */
.laluce-result-count-short{
	display:none;
}
@media (max-width:921px){
	.laluce-result-count-full{
		display:none;
	}
	.laluce-result-count-short{
		display:inline;
	}
}

/* =========================================================================
   Gaveta de filtros MOBILE (2026-08-06, a pedido do Ronaldo, inspirado na
   Velas Inspire): a propria sidebar de filtros ("#secondary") vira uma
   gaveta deslizante no mobile, aberta pelo botao "Filtrar" (ao lado do
   titulo, ver ".laluce-filter-toggle" acima e "woocommerce/loop/header.php").
   Mesma linguagem visual/tecnica das gavetas do menu hamburguer e da busca
   (".ast-mobile-popup-drawer"/".ast-search-menu-icon.slide-search" mais
   acima neste arquivo - position:fixed + transform + box-shadow como overlay,
   sem elemento novo de fundo) - PEDIDO EXPLICITO DO RONALDO: esta gaveta sai
   pelo lado OPOSTO (direita pra esquerda), as outras duas saem da esquerda.
   O cabecalho ("Filtros" + X), o titulo "Ordenar por:" e o proprio dropdown
   de ordenacao (movido, nao clonado - ver justificativa em assets/js/shop.js)
   sao injetados/reposicionados via JS; aqui so o layout da gaveta em si. */
@media (max-width:921px){
	#secondary{
		position:fixed;
		top:0;
		right:0;
		bottom:0;
		left:auto;
		width:85%;
		max-width:360px;
		height:100vh;
		z-index:100000;
		display:flex;
		flex-direction:column;
		align-items:stretch;
		margin:0;
		padding:24px 20px 20px;
		box-sizing:border-box;
		overflow-y:auto;
		border-radius:0;
		box-shadow:-8px 0 30px rgba(0,0,0,.25);
		transform:translateX(100%);
		transition:transform .3s ease;
		visibility:hidden;
	}
	/* GOTCHA (achado ao vivo via CSSOM, 2026-08-06): o proprio Astra tem CSS
	   dinamico (Customizer) "#secondary.secondary{padding-top:0}" neste MESMO
	   breakpoint (o "#secondary" ganha a classe "secondary" tambem, ver
	   "astra_get_secondary_class()") - 1 ID + 1 classe, mais especifico que o
	   "#secondary" sozinho da regra acima, entao zerava o padding-top mesmo
	   depois dela (o cabecalho "Filtros"/X ficava colado no topo da gaveta,
	   sem o mesmo respiro de 24px que a gaveta de busca tem - apontado pelo
	   Ronaldo). Repetindo a MESMA cadeia de seletor (empata em especificidade,
	   o arquivo do tema-filho carrega depois) pra vencer de vez - mesma tecnica
	   ja usada varias vezes neste arquivo contra CSS dinamico do Astra (ver
	   Gotchas do Astra em memory/pagina-categoria.md). */
	#secondary.secondary{
		padding-top:24px;
	}
	/* Mesmo ajuste de admin bar ja usado nas outras duas gavetas (o Astra
	   reserva 32px/46px de espaco real no topo pra quem esta logado) - sem
	   isso o cabecalho "Filtros"/X ficaria atras dela. */
	body.admin-bar #secondary{
		top:32px;
		height:calc(100vh - 32px);
	}
	#secondary.is-open{
		transform:translateX(0);
		visibility:visible;
		/* Sombra direcional (profundidade na borda ESQUERDA da gaveta, lado
		   oposto da versao usada na gaveta de busca, que abre pela esquerda) +
		   truque de "overlay" via box-shadow com espalhamento gigante (9999px),
		   mesma tecnica ja usada na gaveta de busca (nao dava pra confiar num
		   "body::after" com ":has()", ver comentario detalhado la em cima). */
		box-shadow:-8px 0 30px rgba(0,0,0,.25), 0 0 0 9999px rgba(0,0,0,.5);
	}
	#secondary .laluce-filter-drawer-header{
		display:flex;
		align-items:center;
		justify-content:space-between;
		width:100%;
		flex-shrink:0;
		margin-bottom:20px;
	}
	#secondary .laluce-filter-drawer-title{
		font-size:.8rem;
		font-weight:700;
		/* "normal" pra vencer o "#secondary{line-height:2}" nativo do Astra
		   (regra global, sem media query, pensada pro texto dos widgets) - sem
		   isso o titulo "Filtros" renderizava mais alto que "Pesquisar" da
		   gaveta de busca (que fica FORA de "#secondary", nunca herda essa
		   regra), descentralizando os dois verticalmente um do outro mesmo com
		   o mesmo padding-top/altura de linha no cabecalho. */
		line-height:normal;
		text-transform:uppercase;
		letter-spacing:.04em;
		color:var(--petrol);
	}
	#secondary .laluce-filter-drawer-close{
		width:26px;
		height:26px;
		flex-shrink:0;
		display:flex;
		align-items:center;
		justify-content:center;
		background:transparent;
		border:none;
		box-shadow:none;
		font-size:22px;
		line-height:1;
		color:var(--petrol);
		cursor:pointer;
	}
	/* Titulo "Ordenar por:" acima do dropdown de ordenacao movido pra dentro
	   da gaveta (ponto 3 do pedido do Ronaldo: "a barra deslizante de filtros
	   tambem deve conter as opcoes de ordenacao, antes dos filtros"). Mesma
	   fonte/peso dos titulos de widget (".widget-title" mais acima), pra
	   parecer mais uma secao da gaveta do que um elemento solto. */
	#secondary .laluce-filter-drawer-order-heading{
		/* "display:block" repoe o padrao do <div> aqui: fora do mobile ele fica
		   em "display:none" (regra base na secao do botao "Filtrar"). */
		display:block;
		margin:0 0 12px;
		font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
		font-size:.9375rem;
		font-weight:600;
		/* Mesmo motivo do titulo "Filtros" acima - vencer "#secondary{line-
		   height:2}" nativo do Astra. */
		line-height:normal;
		color:var(--petrol);
	}
	/* O ".woocommerce-ordering" movido pra dentro ganha um divisor por baixo
	   (mesmo tom das bordas entre widgets, "#secondary .widget" mais acima) -
	   sem isso ficaria colado na primeira faixa de preco/categoria, sem
	   distincao visual de que sao secoes diferentes. */
	#secondary .woocommerce-ordering{
		width:100%;
		margin:0 0 20px;
		padding-bottom:20px;
		border-bottom:1px solid rgba(0,59,70,.1);
	}
	.laluce-filter-toggle{
		display:inline-flex;
	}
}
/* Mesmo ajuste da admin bar acima, mas no breakpoint EXATO que o proprio
   Astra usa pra admin bar mobile (782px, onde ela passa a medir 46px em vez
   de 32px) - replicado a risca do CSS dinamico dele, mesma tecnica ja usada
   nas outras duas gavetas. */
@media (max-width:782px){
	body.admin-bar #secondary{
		top:46px;
		height:calc(100vh - 46px);
	}
}

/* Rolagem infinita (2026-07-28, a pedido do Ronaldo, sem paginacao): a
   paginacao nativa do WooCommerce continua sendo renderizada (o
   assets/js/shop.js reaproveita o link "next" dela pra saber a proxima
   pagina, em vez de reimplementar a query de filtros/ordenacao no
   servidor), só escondida da tela. */
.woocommerce-pagination{
	display:none;
}
/* Sentinela do IntersectionObserver: precisa continuar no fluxo do layout
   (por isso "visibility:hidden", nao "display:none") pra ser detectavel -
   um elemento "display:none" nunca entra em interseccao com a viewport. */
.laluce-infinite-sentinel{
	grid-column:1/-1;
	height:1px;
	visibility:hidden;
}
/* Home: Produtos Selecionados (2026-08-04, reescrito no mesmo dia). Usa o
   shortcode CLASSICO do WooCommerce ([products], class-wc-shortcode-
   products.php) em vez do bloco "Handpicked Products" (WooCommerce
   Blocks) - decisao do Ronaldo pra herdar EXATAMENTE o card customizado
   da vitrine (".laluce-card", coracao, seletor de quantidade, WA), coisa
   que o bloco nao dava (ele usa o proprio template ".wc-block-grid__
   product", mais simples). O shortcode classico chama a mesma
   content-product.php e sai como "<div class=woocommerce columns-4
   laluce-featured-products><ul class=products>...", herdando de graca a
   regra ".woocommerce ul.products{display:grid;grid-template-
   columns:repeat(auto-fill,minmax(230px,1fr))}" (ver acima) - so falta
   fixar o numero de colunas (a vitrine usa "auto-fill" fluido de
   proposito, mas aqui o pedido foi um numero exato: 4 no desktop, 2
   linhas x 2 no mobile). */
.laluce-featured-products ul.products{
	grid-template-columns:repeat(4,1fr);
}
@media (max-width:921px){
	.laluce-featured-products ul.products{
		grid-template-columns:repeat(2,1fr);
	}
}
/* Espacamento mobile igual ao da Shop (2026-08-19, pedido do Ronaldo: os
   grids de produto da Home - Novidades/Produtos em Destaque/Ofertas/Cucina
   Italiana - estavam com um espacamento visualmente diferente da pagina
   Shop no mobile). Causa: a grade da Home herda a regra BASE (desktop) de
   ".woocommerce ul.products" (padding:24px;gap:20px, ver acima), mas nao
   herdava o override MOBILE dela, que so' se aplica quando o <body> tem a
   classe "ast-woo-shop-archive" ou "search-results" (Shop/categoria/busca) -
   a Home nao tem nenhuma das duas. Mesmos valores usados la' (padding:10px,
   gap:10px), copiados aqui direto pra classe generica da Home. */
@media (max-width:921px){
	.laluce-featured-products ul.products{
		padding:10px;
		gap:10px;
	}
	/* Mesma margem negativa da Shop/categoria (ver acima), aqui pro grupo
	   com fundo que envolve cada grade da Home (Novidades/Produtos em
	   Destaque/Ofertas/Cucina Italiana): reclama largura do padding do
	   "wp-block-group" (~22px de cada lado, medido no celular real,
	   2026-09-03), sem tocar no padding:10px proprio da grade acima. */
	/* "!important" simples nao bastava: o WordPress injeta um estilo global
	   inline pro layout "constrained" (".is-layout-constrained > :where(...)
	   {margin-left:auto!important}") que empata em especificidade (":where()"
	   conta ZERO) e vence por vir depois no <head>. "body.home" na frente
	   soma +1 classe, o suficiente pra vencer o empate sem depender de
	   ordem. */
	body.home .laluce-featured-products{
		margin-left:-10px !important;
		margin-right:-10px !important;
	}
}
/* Margem inferior da grade reduzida de 40px (padrao herdado de ".woocommerce
   ul.products", ver acima) para 20px - so' na Home, pedido explicito do
   Ronaldo em 2026-08-19 ("apenas na home"), sem mexer no valor
   compartilhado com Shop/categoria/busca. Mesmo valor no mobile e no
   desktop (nenhuma das duas telas tinha pedido de diferenciar). */
.laluce-featured-products ul.products{
	margin-bottom:20px;
}

/* Titulos de secao em Allura menores no mobile (2026-08-19, pedido do
   Ronaldo): o tamanho gravado no atributo do bloco (48px, ver
   setup-home-titulos.php) e' fixo em px de proposito (nao "rem"), pra nao
   variar sozinho com a tipografia responsiva do Astra - exatamente por
   isso, uma diferenca REAL entre mobile e desktop precisa de uma regra de
   CSS a parte, com "!important" pra vencer o style inline do bloco
   ("style=font-size:48px", que qualquer CSS externo sem "!important" nunca
   venceria, so' inline vence inline). Escopado a' Home (".home", classe do
   <body>) e a' classe que so' os titulos de secao usam
   (".has-allura-font-family"), pra nao pegar nenhum outro heading do site. */
@media (max-width:921px){
	body.home .wp-block-heading.has-allura-font-family{
		font-size:42px !important;
	}
	/* Respiro titulo -> grid de produtos menor no mobile (2026-09-03, pedido
	   do Ronaldo comparando com o celular real): o "margin-bottom" do titulo
	   e' 0.7em (padrao do bloco heading do WordPress), que a 42px vira quase
	   30px - reduzido so' no mobile, onde a tela e' curta e cada respiro
	   conta mais. Vale para Novidades/Produtos em Destaque/Ofertas/Cucina
	   Italiana, os 4 titulos com esta mesma classe. */
	body.home .wp-block-heading.has-allura-font-family{
		margin-bottom:14px !important;
	}
}

/* Titulos LONGOS de secao (Feita a mao/Novidades antes de todo mundo/Nao
   perca nenhuma novidade/Segue a gente no Instagram) encolhem sozinhos pra
   caber numa linha so' no mobile, em vez de quebrar (2026-08-19, pedido do
   Ronaldo). Marcados com a classe "laluce-titulo-fit"
   (setup-home-titulo-fit.php - so' esses 4, os outros 5 titulos da Home sao
   curtos o bastante e continuam no tamanho fixo de 42px acima).
   "white-space:nowrap" e' o que GARANTE que nunca quebra pra 2a linha (o
   texto vira "estouro" horizontal medivel em vez de quebra visual); quem
   calcula o tamanho exato de fonte que faz esse estouro desaparecer e' o JS
   (assets/js/titulo-fit.js, so' na Home), que mede a largura necessaria do
   texto contra a largura disponivel do titulo e ajusta o "font-size" ali
   mesmo, elemento por elemento - impossivel fazer isso so' com CSS porque
   cada titulo tem um texto de tamanho diferente (nao existe 1 valor fixo
   que sirva pros 4). Antes do JS rodar (fracao de segundo), o texto pode
   aparecer maior que o container - aceitavel, e' so' o instante entre o
   HTML pintar e o JS, que roda assim que a pagina carrega. */
@media (max-width:921px){
	body.home .laluce-titulo-fit{
		white-space:nowrap;
	}
}

/* "Compre por Categoria" em 2 linhas de 2 no mobile (2026-08-19, pedido do
   Ronaldo, ao adicionar a 4a categoria "Kits para Presente"). Por padrao o
   bloco nativo "Columns" empilha 1 coluna por linha no mobile
   (".wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column
   {flex-basis:100%!important}", CSS do core, wp-includes/css/dist/block-
   library/style.min.css) - trocando o wrapper pra "display:grid" o
   "flex-basis" das colunas deixa de fazer efeito (grid nao usa flex-basis
   pra dimensionar), sem precisar de "!important" pra vencer a regra do
   core. So' existe 1 "wp-block-columns" na Home hoje (esta secao), mas
   escopado a' Home mesmo assim por seguranca caso surja outro no futuro. */
@media (max-width:921px){
	body.home .wp-block-columns{
		display:grid;
		grid-template-columns:repeat(2,1fr);
		gap:10px;
		/* Container "card" ao redor dos 4 cards de categoria (2026-08-22,
		   pedido do Ronaldo, so' no mobile): os grids de PRODUTO (Novidades/
		   Produtos em Destaque/Ofertas/Cucina Italiana) ja tem esse visual
		   "de graca", herdado de ".woocommerce ul.products" (raio 10px, ver
		   regra mais acima neste arquivo) - o grid de categoria vive num
		   "wp:columns" nativo do Gutenberg, que nunca teve nenhum estilo
		   equivalente. Raio igual aos grids de produto; padding igual ao
		   "padding:10px" que os grids de produto usam no mobile (regra
		   "Espacamento mobile igual ao da Shop"). Fundo creme claro (mesmo
		   dia, ajustado de "--bg-grid" pro Ronaldo: "ao inves de branco") -
		   diferente do fundo dos grids de produto de proposito (pedido
		   explicito so' pra este card). */
		background-color:var(--cream-light);
		border-radius:10px;
		padding:10px;
	}
	body.home .wp-block-columns > .wp-block-column{
		width:auto;
	}
}
/* Bug real de navegador, achado pelo Ronaldo (2026-08-22): o espaco ABAIXO
   da 2a linha de categorias ficava maior que os outros 3 lados. Causa:
   ".wp-block-columns{display:grid}" acima calcula a altura das 2 linhas
   ("auto", pelo conteudo) errado - SEMPRE 20px maior que a altura real dos
   cards (158px medido virando 178.125px de "grid-template-rows"),
   reproduzido isolando cada variavel (conteudo do card, posicao no grid,
   imagem, min-height) ate sobrar so' "e' a ULTIMA celula do grid" como
   causa - um bug de calculo intrinseco do proprio motor de grid do
   navegador com caixas "aspect-ratio" na ultima celula, nao do nosso CSS.
   Testado ao vivo (Playwright): nenhuma propriedade CSS testada
   (align-items/grid-auto-rows/grid-template-rows explicito) conseguiu
   corrigir o TAMANHO da linha, so' reposicionar o conteudo dentro dela (o
   espaco fantasma continuava contando pra altura total do container).
   Unica correcao que funcionou: forcar "grid-template-rows" com o valor em
   PIXELS medido de verdade (a largura do proprio card, ja que e' quadrado)
   via JS, no lugar de deixar o navegador calcular sozinho - ver
   assets/js/categoria-grid-fit.js, so' na Home, so' no mobile. */

/* Cards de categoria RESPONSIVOS no mobile (2026-08-22, correcao de bug real
   achado ao vivo com Playwright: a grade 2x2 acima deixou cada card com
   metade da largura de antes, mas a ALTURA continuou fixa em 280px - um
   "min-height:280px" gravado inline no proprio bloco, ver
   bin/setup-home-categorias.php - o card virou retrato (165x280) em vez de
   quadrado, e o padding lateral nativo de 48px (pensado pra' um card largo
   de 1 coluna) sobrou quase toda a largura do card, quebrando "Aromaticas"
   no meio da palavra e forcando "Ver categoria" a quebrar em 2-3 linhas.
   Trocado por "aspect-ratio:1/1" (card sempre quadrado, em qualquer
   largura - precisa de "!important" so aqui, pra vencer o "min-height"
   inline, mesma logica ja documentada no resto deste arquivo pra estilo
   inline) e padding/fonte do botao reduzidos pra caber nos ~155px de
   largura de cada card. */
@media (max-width:921px){
	body.home .wp-block-columns .wc-block-featured-category{
		min-height:0 !important;
		aspect-ratio:1/1;
	}
	body.home .wp-block-columns .wc-block-featured-category__inner-blocks{
		padding:0 16px 16px;
	}
	body.home .wp-block-columns .wc-block-featured-category__inner-blocks .wp-block-woocommerce-category-title{
		font-size:18px;
		line-height:1.25;
	}
	body.home .wp-block-columns .wc-block-featured-category__inner-blocks .wp-block-button__link{
		padding:8px 14px;
		font-size:12px;
		white-space:nowrap;
	}
}

/* Fundo quadriculado DIAGONAL rosa-claro/branco, so' na secao "Cucina
   Italiana" (2026-08-22, pedido do Ronaldo; cor trocada de rosa-antigo pra
   rosa-claro no mesmo dia - "nao gostei do vermelho, use um rosa bem
   clarinho"). Marcado com a classe "laluce-quadriculado"
   (bin/setup-home-cores-3.php), que substitui a cor solida que a secao
   tinha antes (o script remove o "backgroundColor" do bloco - nao da' pra
   combinar os dois, o padrao
   cobre a secao inteira).
   TECNICA (testada visualmente com Playwright antes de aplicar - ver
   memory/pendencias.md, "Rodada 8"): um checkerboard comum em CSS
   (2 pares de "linear-gradient" a 45deg/-45deg, tecnica classica) sempre
   sai com os quadrados ALINHADOS aos eixos (bordas retas, tipo tabuleiro
   de xadrez) - pra ficar de verdade DIAGONAL (losangos), o checkerboard
   precisa nascer bem maior que a secao e ser GIRADO 45 graus inteiro,
   dentro de um "::before" absolutamente posicionado. "200vmax" (maior
   dimensao entre largura/altura da tela, dobrada) garante que o quadrado
   girado sempre cobre a secao inteira até as quinas, em qualquer
   proporcao largura×altura (testado em desktop largo/baixo E mobile
   estreito/alto) - um valor em "%" relativo ao proprio elemento nao
   funciona aqui porque a largura e a altura da secao raramente sao
   parecidas. O conteudo real (titulo, grid de produtos) recebe
   "position:relative;z-index:1" pra ficar por CIMA do padrao. */
.laluce-quadriculado{
	position:relative;
	overflow:hidden;
	background-color:#ffffff;
	/* Centraliza o titulo (pilula "inline-block") na largura da secao - ver
	   comentario completo perto da regra do <h2>, mais abaixo. */
	text-align:center;
}
.laluce-quadriculado::before{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width:200vmax;
	height:200vmax;
	transform:translate(-50%,-50%) rotate(45deg);
	background-color:#ffffff;
	background-image:
		linear-gradient(45deg, var(--rosa-claro) 25%, transparent 25%),
		linear-gradient(-45deg, var(--rosa-claro) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--rosa-claro) 75%),
		linear-gradient(-45deg, transparent 75%, var(--rosa-claro) 75%);
	background-size:40px 40px;
	background-position:0 0, 0 20px, 20px -20px, -20px 0px;
	z-index:0;
}
.laluce-quadriculado > *{
	position:relative;
	z-index:1;
}
/* Container SO' do texto do titulo (2026-08-22, pedido do Ronaldo): fundo
   branco + raio de 10px (ajustado de 5px pro Ronaldo no mesmo dia) pra criar
   contraste com o proprio quadriculado por baixo, ja que o rosa claro
   sozinho quase some atras do titulo. "display:inline-block" e' o que faz o
   fundo abracar so' o texto (nao a largura toda da secao) - o <h2> por
   padrao e' block e ocuparia 100% da largura. Cor da fonte (bordo) continua
   vindo do atributo nativo do bloco (textColor, bin/setup-home-cores-3.php),
   nao daqui - so' fundo/raio/padding nao tem controle equivalente no editor
   pra este caso (fundo do TEXTO, nao da SECAO inteira).
   CENTRALIZACAO (bug real, achado pelo Ronaldo no mesmo dia): "display:
   inline-block" faz o <h2> encolher pra largura do proprio texto, mas
   "text-align:center" gravado nele mesmo (atributo do bloco) so' centraliza
   o TEXTO dentro dessa caixa ja encolhida - nao centraliza a caixa em si
   dentro da secao. Precisa de "text-align:center" no PAI (".laluce-
   quadriculado"), que e' quem de fato posiciona um filho "inline-block"
   horizontalmente (regra ja aplicada acima, junto com o resto do
   ".laluce-quadriculado"). */
.laluce-quadriculado h2.wp-block-heading{
	display:inline-block;
	background-color:#ffffff;
	border-radius:10px;
	padding:10px 32px;
}

.laluce-infinite-loading{
	grid-column:1/-1;
	padding:24px 0;
	text-align:center;
	color:var(--petrol-light);
	font-size:.9rem;
}

/* =========================================================================
   Pagina de produto individual (2026-08-04, a pedido do Ronaldo). Breadcrumb,
   texto de categoria acima do titulo e rotulo do YITH Wishlist sao dado de
   banco (bin/setup-single-product.php), sem CSS correspondente aqui. Detalhe
   completo de cada decisao em memory/pagina-produto.md.
   ========================================================================= */

/* Espaco entre o menu secundario (".ast-below-header-bar", faixa de
   categorias abaixo do cabecalho) e a borda superior da foto principal do
   produto - por padrao ficavam coladas. Escopado a "body.single-product"
   pra nao alterar o espacamento intencionalmente colado do Home (ver
   comentario do ".ast-below-header-bar" mais acima neste arquivo).
   MESMO valor aplicado a ".summary.entry-summary" (2026-08-04, a pedido do
   Ronaldo: "o titulo tenha a mesma distancia do menu que a foto tem") - as
   duas sao colunas IRMAS na mesma linha (foto a esquerda, resumo a
   direita); sem isso, so' a foto descia (o titulo, primeiro elemento
   visivel da coluna de resumo desde que breadcrumb/categoria foram
   removidos, ficava na posicao original, mais alto que a foto). Repetir o
   mesmo valor nos dois e' mais simples/robusto que tentar mirar o
   container-pai das duas colunas (classe gerada pelo WooCommerce/Astra,
   nao um seletor nosso). */
body.single-product .woocommerce-product-gallery,
body.single-product .summary.entry-summary{
	margin-top:30px;
}

/* Foto principal quadrada (a que da zoom ao passar o mouse), pra "puxar" os
   demais elementos da pagina pra cima - a pedido do Ronaldo. A foto de
   origem nao vem necessariamente quadrada (ex.: 600x636px nos produtos de
   teste); "object-fit:cover" recorta mantendo o centro, sem distorcer.
   ".woocommerce-product-gallery__image" e' o mesmo elemento que recebe o
   zoom (".woocommerce-product-gallery" inteiro, feature nativa do
   WooCommerce/PhotoSwipe) - a marcacao continua identica, so o formato do
   contorno muda. */
body.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image{
	aspect-ratio:1/1;
	overflow:hidden;
	border-radius:5px;
}
/* GOTCHA REAL (2026-08-04, achado ao vivo via Playwright - o Ronaldo
   reportou fotos mais altas que largas cortando a parte de baixo, mesmo
   com "object-position:50% 50%" (centro) ja' computando certo): o
   ".woocommerce-js div.product div.images img{width:100%;height:auto}"
   nativo (3 elementos + 3 classes) tem MAIS especificidade que a 1a versao
   deste seletor (2 elementos + 3 classes - empate nas classes, ele vence
   no numero de ELEMENTOS) - "height:auto" vencia escondido, a imagem
   renderizava na PROPRIA proporcao (ex.: 600x636 vira 477x505, nao
   477x477) em vez de quadrada. Como o box da img nunca ficava quadrado de
   verdade, "object-fit:cover" nao tinha o que recortar (a imagem so'
   encolhia proporcional, sem cortar nada) - so' a metade de cima cabia
   dentro da moldura (".overflow:hidden"), cortando a de baixo. Corrigido
   repetindo a MESMA cadeia "div.product div.images" que a regra nativa usa
   (ja' usada em outras regras desta secao) pra vencer por numero de
   elementos tambem, nao so' de classes. */
body.single-product div.product div.images .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

/* Fotos alternativas (miniaturas) a ESQUERDA da foto principal, em vez de
   abaixo dela - a pedido do Ronaldo (2026-08-04). Estrutura real da
   galeria (3 filhos diretos de ".woocommerce-product-gallery", confirmado
   ao vivo via Playwright, "curl" nao mostra isso porque parte vem de JS do
   proprio FlexSlider): ".woocommerce-product-gallery__trigger" (botao de
   zoom/lupa, "position:absolute", fica de fora do calculo do flex abaixo -
   item fora do fluxo, ignorado pelo algoritmo, sem precisar de tratamento
   proprio nele mesmo - o "top:16px" nativo dele ja fica certo sozinho
   porque a foto principal fica alinhada ao TOPO da linha, ver
   "align-items:flex-start" abaixo) - ".flex-viewport" (moldura da foto
   principal, "overflow:hidden" nativo, contem o "trilho" ainda mais largo
   com todos os slides lado a lado por baixo, nao mexemos nisso) -
   ".flex-control-nav" (a lista de miniaturas, "<ol>", inserida pelo
   proprio FlexSlider). Especificidade alta de proposito (repete
   "div.product div.images" - a MESMA cadeia que o CSS nativo do
   Astra/WooCommerce usa pra layout de galeria, ver
   "woocommerce-grid.min.css") pra vencer sem depender da ordem de
   carregamento.
   "align-items:flex-start" (2026-08-04, correcao a pedido do Ronaldo - a
   1a versao usava "center", ver Historico): a foto principal fica alinhada
   ao TOPO (nao mais centralizada verticalmente contra a coluna de
   miniaturas). Como consequencia, a coluna de miniaturas passa a ter
   altura MAXIMA = altura da foto (ver ".flex-control-nav" abaixo, medida
   via JS) em vez de poder crescer mais que ela. */
body.single-product div.product div.images.woocommerce-product-gallery{
	display:flex;
	align-items:flex-start;
	gap:12px;
}
/* Produto com 1 SO' FOTO: o WooCommerce nem inicializa o FlexSlider (sem
   ".flex-viewport"/".flex-control-nav"/botao de zoom - confirmado ao vivo,
   "curl" num produto de teste com 1 foto so' -
   ".woocommerce-product-gallery__wrapper" fica FILHO DIRETO da galeria).
   Sem "flex:1" nele tambem (regra de baixo so' mira ".flex-viewport"), ele
   encolheria pro tamanho de conteudo em vez de ocupar a coluna inteira,
   ja' que virou item de um "display:flex" (o combinador ">" restringe a
   filho DIRETO, entao nao pega o wrapper aninhado dentro do
   ".flex-viewport" no caso de VARIAS fotos). */
body.single-product div.product div.images.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper{
	flex:1;
	min-width:0;
}
/* ".flex-viewport{margin-bottom:1em}" (16px, CSS nativo do WooCommerce,
   pensado pra separar a foto principal das miniaturas quando elas ficavam
   ABAIXO dela, layout padrao) empurraria a foto 16px pra baixo do topo da
   linha, mesmo com "align-items:flex-start" - zerado, sem mais motivo pra
   existir agora que as miniaturas ficam do lado. */
body.single-product div.product div.images.woocommerce-product-gallery .flex-viewport{
	flex:1;
	min-width:0;
	order:2;
	margin:0;
	border-radius:5px;
}
/* GOTCHA: ".flex-control-thumbs li{float:left;width:25%}" (CSS nativo,
   organiza 4 miniaturas por linha, pensado pra ficar ABAIXO da foto
   principal) - zerado "float" e trocado por coluna vertical no proprio
   "<ol>", que tambem perde a margem/numeracao padrao de lista.
   "overflow-y:auto" (2026-08-04, a pedido do Ronaldo: "se a quantidade de
   miniaturas for grande, nao deve ultrapassar a borda inferior da foto
   principal - colocar scroll") - o "max-height" de verdade (= altura da
   foto principal, que e' dinamica, depende da largura da coluna) e'
   aplicado via JS (assets/js/product.js, "syncGalleryThumbsHeight()"), nao
   da pra fazer isso so' com CSS sem saber a altura de UM elemento irmao
   dentro do outro. Com poucas miniaturas (mais baixo que a foto), o
   "max-height" so' fica maior que o conteudo - sem scroll visivel, sem
   efeito nenhum. */
body.single-product div.product div.images.woocommerce-product-gallery .flex-control-nav{
	order:1;
	display:flex;
	flex-direction:column;
	gap:8px;
	width:70px;
	flex-shrink:0;
	overflow-y:auto;
	margin:0;
	padding:0;
	list-style:none;
}
body.single-product div.product div.images.woocommerce-product-gallery .flex-control-nav li{
	float:none;
	width:100%;
	margin:0;
}
body.single-product div.product div.images.woocommerce-product-gallery .flex-control-nav img{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:1/1;
	object-fit:cover;
	border-radius:5px;
	cursor:pointer;
}

/* Titulo do produto: 20px e' o padrao herdado do Astra (".entry-title",
   generico, 1 classe so - ver "product_title.entry-title" no HTML nativo do
   WooCommerce), pequeno demais pro elemento mais importante da pagina.
   Aumentado pra 28px (Lato 700) numa rodada anterior; trocado pra 22px em
   2026-09-03 a pedido do Ronaldo ("o mesmo estilo, fonte, cores que o
   titulo da pagina SHOP") - MESMAS 3 declaracoes de
   ".woocommerce-products-header__title" (titulo da vitrine/Shop, ver secao
   "Vitrine/Categoria" mais acima), sem cor propria (a cor ja vem igual nos
   2 casos, herdada da mesma regra global de titulo do Astra). */
body.single-product h1.product_title{
	font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size:22px;
	font-weight:700;
}

/* "form.cart" vira uma grade de 2 linhas: [seletor de quantidade +
   "Adicionar ao carrinho"] na 1a linha, "Comprar por WA" ocupando a linha
   toda embaixo - reescrito em 2026-09-03 a pedido do Ronaldo, depois do
   esquema anterior (altura medida em runtime do botao nativo do Astra, que
   muda de preset de padding por breakpoint - ver Historico) ter ficado
   visivelmente quebrado no mobile (alturas diferentes entre os 3, quebra de
   linha "espontanea" e imprevisivel).
   NOVO CRITERIO: altura FIXA de 32px nos 3 componentes - a MESMA altura
   desses mesmos componentes dentro do card da vitrine (".laluce-qty-
   stepper"/".laluce-card-actions a.button"/".laluce-whatsapp-btn", mais
   acima neste arquivo), copiada em CSS puro, em vez de copiar a altura
   VARIAVEL do botao nativo do Astra em runtime (a causa raiz da quebra no
   mobile). Com altura fixa em vez de medida, o JS de sincronia que existia
   aqui (assets/js/product.js, "syncCartActionsHeight") deixou de ser
   necessario e foi removido.
   "flex:1 1 100%" no botao do WA (ver regra dele mais abaixo) forca a
   quebra pra' uma 2a linha SEMPRE, em qualquer largura de tela - nao mais
   "quando a soma das 3 larguras nao coubesse numa linha so'" (dependia da
   largura disponivel, resultado imprevisivel; a pedido do Ronaldo, "o botao
   Comprar por WA posicionado abaixo do grupo Contador + Adicionar ao
   carrinho", sempre). */
body.single-product form.cart{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	gap:12px;
}
/* GOTCHA (mesma familia ja documentada acima pro seletor de quantidade dos
   cards da vitrine, ".laluce-qty-stepper"): regras GENERICAS do Astra/
   WooCommerce ("input[type=number]{width:100%}", "button{width:100%}" em
   alguns breakpoints) inflam qualquer input/botao do site por padrao -
   escopando largura a este seletor (corrente de classes propria) resolve
   sem precisar de "!important". */
body.single-product form.cart .quantity,
body.single-product form.cart button.single_add_to_cart_button,
body.single-product form.cart .laluce-single-wa-btn{
	width:auto;
	margin:0;
}
/* GOTCHA REAL (achado ao vivo via Playwright, inspecionando quais regras
   realmente casavam no elemento - "margin:0" acima nao bastava sozinho):
   ".woocommerce-js div.product form.cart div.quantity"/".woocommerce-js
   div.product form.cart .button" (CSS dinamico do Astra,
   woocommerce-grid.min.css) tem "margin:0 1em 1em 0"/"margin-bottom:1em" -
   contando as classes embutidas em "div.product"/"form.cart" nessa cadeia
   (4 classes), ela e' MAIS especifica que a regra acima (3 classes,
   "body.single-product form.cart .quantity"), entao 16px de margin-bottom
   vazavam mesmo com "margin:0" declarado (medido ao vivo: ".quantity" e
   ".single_add_to_cart_button" tinham "margin-bottom:16px" de verdade,
   empurrando as linhas seguintes do form pra baixo). Corrigido repetindo a
   MESMA cadeia do Astra (mesma tecnica ja usada varias vezes nos cards da
   vitrine, ver pagina-categoria.md) com um qualificador a mais
   ("body.single-product"), garantindo vencer por especificidade em vez de
   depender da ordem de carregamento. */
body.single-product div.product form.cart div.quantity,
body.single-product div.product form.cart button.single_add_to_cart_button{
	margin:0;
}

/* Produto VARIAVEL (2026-09-08, 1o produto com variacoes cadastrado - "Trio
   de Mini Velas Aromaticas 30g", atributo "Aromas"): o template nativo
   ("variable.php"/"variation-add-to-cart-button.php") embrulha quantidade +
   botao nativo + "Comprar por WA" (o hook "woocommerce_after_add_to_cart_
   button" tambem dispara AQUI, dentro deste wrapper) em
   ".woocommerce-variation-add-to-cart", por sua vez dentro de
   ".single_variation_wrap" - os 3 deixam de ser filhos DIRETOS de "form.cart"
   (que so' continua com "table.variations"/".single_variation_wrap" como
   filhos diretos). Como o flex acima ("form.cart{display:flex}") so' governa
   os PROPRIOS filhos diretos, o agrupamento em linha do trio parava de
   funcionar so' pra produto variavel (layout "solto", 2a linha espontanea de
   volta) - reproduzido ao vivo transformando uma copia local do mesmo
   produto em variavel (ver memory/pagina-produto.md, 14a rodada). Repete a
   MESMA receita flex no wrapper de verdade: com isso, ".quantity"
   ("flex-shrink:0"), o botao nativo ("flex:1") e ".laluce-single-wa-btn"
   ("flex:1 1 100%", forca a quebra pra' uma linha propria) - todos definidos
   mais abaixo, e ja' escopados por "form.cart X" em vez de "form.cart > X" -
   voltam a se comportar exatamente como no produto simples, em qualquer
   largura de tela (sem "@media" - a mesma regra do produto simples ja' vale
   pros dois). */
body.single-product form.cart .woocommerce-variation-add-to-cart{
	display:flex;
	flex-wrap:wrap;
	align-items:flex-start;
	gap:12px;
}

/* Seletor de quantidade no MESMO desenho visual E na MESMA altura (32px) do
   stepper dos cards da vitrine (".laluce-qty-stepper"/".laluce-qty-btn"/
   ".laluce-qty-input", ver mais acima neste arquivo) - a pedido do Ronaldo:
   "a altura deles deve ser igual a altura desses mesmos botoes quando
   apresentados dentro do card". Os botoes -/+ entram via hooks nativos do
   WooCommerce (inc/single-product.php), o campo "input.quantity" em si ja
   e' nativo (so ganha a classe "laluce-qty-input" via filtro) - por isso o
   seletor aqui mira o proprio ".quantity" nativo, sem precisar de uma
   classe extra no wrapper. */
body.single-product form.cart .quantity{
	display:flex;
	align-items:stretch;
	height:32px;
	box-sizing:border-box;
	border:1.5px solid rgba(0,59,70,.2);
	border-radius:5px;
	overflow:hidden;
	flex-shrink:0;
}
/* GOTCHA REAL (achado conferindo o proprio CSS gerado, nao só de olho):
   ".laluce-qty-btn{height:32px}"/".laluce-qty-input{height:32px}" (regras
   GENERICAS dos cards da vitrine, so 1 classe, mais acima neste arquivo) e
   "input[type=\"number\"]{height:40px}" (CSS dinamico do Astra, elemento +
   atributo) continuavam VALENDO aqui mesmo com o seletor abaixo tendo mais
   classes - especificidade e' resolvida POR PROPRIEDADE, nao por regra
   inteira (mesma familia de bug ja documentada varias vezes neste arquivo,
   ver secao dos cards da vitrine). "height:auto" aqui (nao um valor fixo)
   e' o que permite o "stretch" do ".quantity" (pai, acima, com 32px fixo)
   preencher a altura de verdade nos filhos, sem precisar repetir "32px"
   em cada um. */
body.single-product form.cart .quantity .laluce-qty-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:auto;
	padding:0;
	border:none;
	background:none;
	font-size:1rem;
	line-height:1;
	color:var(--petrol);
	cursor:pointer;
}
body.single-product form.cart .quantity .laluce-qty-btn:hover{
	color:var(--orange);
}
body.single-product form.cart .quantity .laluce-qty-input{
	width:46px;
	height:auto;
	padding:0;
	border:none;
	border-left:1px solid rgba(0,59,70,.15);
	border-right:1px solid rgba(0,59,70,.15);
	text-align:center;
	font-family:inherit;
	font-size:1rem;
	color:var(--petrol);
	-moz-appearance:textfield;
}
body.single-product form.cart .quantity .laluce-qty-input::-webkit-outer-spin-button,
body.single-product form.cart .quantity .laluce-qty-input::-webkit-inner-spin-button{
	-webkit-appearance:none;
	margin:0;
}

/* Botao nativo "Adicionar ao carrinho": MESMA altura (32px), mesmo formato
   (raio 5px, texto sem quebra com reticencias se nao couber) E MESMO fundo/
   cor (laranja da paleta + texto petroleo) do botao equivalente do card da
   vitrine (".laluce-card-actions a.button", mais acima neste arquivo) - a
   pedido do Ronaldo. Ate 2026-09-03 o fundo/cor ficavam de fora do pedido
   (so' o tamanho), deixando o cinza nativo do Astra; nesta rodada o Ronaldo
   pediu explicitamente "o mesmo laranja do mesmo botao nos cards" - mesmos
   2 valores (background/color) copiados 1:1 da regra do card. "flex:1"
   preenche o resto da 1a linha, ao lado do seletor de quantidade (largura
   fixa, "flex-shrink:0" na regra do ".quantity" acima). */
body.single-product div.product form.cart button.single_add_to_cart_button{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:1;
	min-width:0;
	height:32px;
	box-sizing:border-box;
	padding:0 16px;
	border-radius:5px;
	background:var(--orange);
	color:var(--petrol);
	font-size:.9rem;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	transition:filter .15s ease;
}
body.single-product div.product form.cart button.single_add_to_cart_button:hover{
	filter:brightness(1.08);
}

/* Produto VARIAVEL, botao "Adicionar ao carrinho" com fundo petroleo em vez
   de laranja ANTES de escolher um "Aroma" (2026-09-08, reportado pelo
   Ronaldo). Nao e' o CSS estatico do Astra/WooCommerce (arquivos .min.css
   deste tema/plugin, ja conferidos antes) - e' um bloco de CSS DINAMICO que o
   Astra imprime inline no <head> de cada pagina (id "astra-theme-css-inline-
   css", gerado a partir das opcoes globais de "Botoes" do Customizer), nunca
   visto nas rodadas anteriores porque so aparece no HTML servido de
   verdade, nao nos arquivos do plugin/tema em disco - achado baixando a
   pagina real (`curl`) e vasculhando esse bloco especifico, nao so os
   arquivos .css. Esse bloco declara, faz parte de uma linha de seletores
   GIGANTE (botoes do site inteiro), uma combinacao exclusiva pro botao de
   variacao ainda sem selecao: ".woocommerce button.button.alt.disabled.
   wc-variation-selection-needed{...background-color:var(--ast-global-
   color-0)...}" (a classe "disabled" e' adicionada por JS do proprio
   WooCommerce - "add-to-cart-variation.js" - enquanto nenhuma variacao foi
   escolhida ainda, NUNCA existe em produto simples) - "--ast-global-color-0"
   e' a mesma variavel de paleta global do Astra que este tema aponta pro
   petroleo (ver ":root", inicio deste arquivo) - dai o "petroleo claro" que
   substituia o laranja. 5 classes nessa cadeia (".woocommerce"+"button"+
   "alt"+"disabled"+"wc-variation-selection-needed") - MAIS especifica que a
   nossa regra de cima (4 classes), mesmo ela tendo mais elementos (elemento
   so desempata quando a contagem de classes empata). Corrigido repetindo a
   MESMA cadeia de classes do produto simples (regra acima, neste arquivo) com
   ".disabled" a mais, pra fechar em 5 classes tambem e vencer por elemento
   (4 elementos contra 1). Cobre as 2 sub-classes que o WooCommerce alterna
   (".wc-variation-selection-needed" - nenhuma opcao escolhida - e
   ".wc-variation-is-unavailable" - combinacao indisponivel) com o MESMO
   seletor, ja que nenhuma das 2 muda o numero de classes daqui. */
body.single-product div.product form.cart button.single_add_to_cart_button.disabled{
	background:var(--orange);
	color:var(--petrol);
}
body.single-product div.product form.cart button.single_add_to_cart_button.disabled:hover{
	background:var(--orange);
	color:var(--petrol);
	filter:brightness(1.08);
}

/* Botao "Comprar por WA": MESMA altura (32px) e mesma combinacao creme/
   marrom com cantos quadrados (5px) ja usada no botao equivalente do card
   da vitrine (".laluce-whatsapp-btn"), numa classe propria (nao a mesma)
   porque so' existe nesta pagina. "flex:1 1 100%" forca a quebra pra' uma
   linha propria, sempre ABAIXO do grupo seletor+"Adicionar ao carrinho"
   (ver comentario do "form.cart" mais acima). */
.laluce-single-wa-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	flex:1 1 100%;
	height:32px;
	box-sizing:border-box;
	padding:0 20px;
	border:1.5px solid var(--brown);
	border-radius:5px;
	background:var(--cream);
	color:var(--brown);
	font-weight:700;
	font-size:.9rem;
	text-decoration:none;
	white-space:nowrap;
	transition:background-color .15s ease, color .15s ease;
}
.laluce-single-wa-btn:hover{
	background:var(--brown);
	color:var(--cream);
}
.laluce-single-wa-btn .ic{
	width:18px;
	height:18px;
}

/* Tabela de variacoes ("table.variations", rotulo "Aromas" + dropdown -
   2026-09-08, 1o produto com variacoes cadastrado). O Astra so' declara
   "max-width/min-width/width" pro "<select>" nativo ("woocommerce-grid.min.
   css", ".variations select"), sem nenhuma borda/radius propria - por isso
   ele aparecia no estilo cru do navegador, destoando dos demais campos do
   site. Mesma receita ja usada nos campos do Checkout/Minha Conta ("border-
   input", radius 5px, fundo branco) - pedido do Ronaldo, "radius 5px, mesmo
   design dos demais campos da pagina". */
body.single-product form.cart .variations select{
	width:100%;
	max-width:100%;
	box-sizing:border-box;
	padding:7px 32px 7px 10px;
	border:1px solid var(--border-input);
	border-radius:5px;
	height:auto;
	font-size:14px;
	font-family:inherit;
	background:#fff;
	color:#1c1c1c;
	/* GOTCHA (achado depois, o Ronaldo reportou "sumiu a seta do dropdown"):
	   existe uma regra AINDA MAIS GENERICA do Astra so' pro elemento
	   "select" sozinho (1 elemento, SEM classe nenhuma - "woocommerce-grid.
	   min.css"/"woocommerce.min.css", vale pra qualquer "<select>" do site,
	   nao so' o de variacao): "select{appearance:none;background-position:
	   98% 50%;...}" - desliga o "appearance" nativo do navegador (que e' o
	   que desenha a seta) SEM declarar nenhum "background-image" pra' repor
	   uma seta propria (o "background-position:98% 50%" fica orfao, sem
	   imagem nenhuma pra posicionar). Como a regra acima (deste arquivo) so'
	   mexe em "border"/"border-radius"/"background-color" (via o atalho
	   "background", que TAMBEM zera "background-image" se nao citado) e
	   nunca tinha citado "appearance" nem "background-image", o "appearance:
	   none" do Astra continuava valendo (especificidade e' resolvida por
	   PROPRIEDADE, nao por regra inteira - mesma familia de bug ja
	   documentada varias vezes neste arquivo) - o campo ficava sem NENHUMA
	   seta, nativa ou nossa. Corrigido repondo uma seta propria, mesmo icone
	   e mesma tecnica ja usada no dropdown "Ordenar por" (".woocommerce-
	   ordering select", mais acima neste arquivo) - "padding-right" alargado
	   pra 32px pra' abrir espaco pro icone sem sobrepor o texto da opcao. */
	-webkit-appearance:none;
	appearance:none;
	background-image:url(assets/icons/chevron-down-pb.svg);
	background-repeat:no-repeat;
	background-position:right 10px center;
	background-size:12px;
	cursor:pointer;
}
body.single-product form.cart .variations select:focus{
	outline:2px solid var(--petrol-light);
	outline-offset:1px;
}

/* Link nativo "Limpar" ("<a class="reset_variations">", template "variable.
   php" do WooCommerce - desfaz a selecao de "Aromas") - a pedido do Ronaldo,
   escondido por completo, desktop e mobile, os 2 estados.
   1a TENTATIVA (nao funcionou, o Ronaldo reportou com print): so
   "display:none", apostando que o JS do WooCommerce so alternava
   "visibility" (o que e' verdade em "toggleResetLink()", mas so' MEIO da
   historia). Reforcada a especificidade contra a regra propria do Astra
   pra este elemento (".woocommerce-js div.product form.cart
   .reset_variations{all:initial;...;display:inline-block;...}", 4 classes/
   2 elementos) repetindo "div.product" na cadeia (mesma tecnica da regra do
   botao "Adicionar ao carrinho", algumas linhas acima) - e MESMO ASSIM nao
   bastou.
   CAUSA REAL (achada lendo "add-to-cart-variation.js" de novo, funcao
   "toggleResetLink"): ao MOSTRAR o link (variacao escolhida), o jQuery roda
   ".css('visibility','visible').hide().fadeIn()" - "hide()"/"fadeIn()" do
   jQuery escrevem "display" direto no atributo "style" do proprio elemento
   (estilo INLINE), nao so' "visibility". **Estilo inline sempre vence
   qualquer regra de folha de estilo, nao importa a especificidade** - por
   isso "display:none" (por mais especifico que fosse o seletor) nunca teve
   chance nenhuma contra o "style="display:inline-block"" que o jQuery
   escreve na hora de mostrar o link. Unico jeito de vencer um estilo
   inline, sem tocar no JS do proprio WooCommerce (arquivo do plugin, nao
   nosso): "!important" na folha de estilo - ferramenta certa pra ESTE caso
   especifico (nao usada como atalho, o resto do arquivo evita "!important"
   propositalmente quando da' pra vencer so' por especificidade). */
body.single-product div.product form.cart a.reset_variations{
	display:none !important;
}

/* Linha divisoria sob a tabela "Aromas" (2026-09-08, o Ronaldo reportou que
   continuava aparecendo mesmo depois do link "Limpar" escondido - os 2 nao
   tem nenhuma relacao real entre si, so' pareciam "juntos" por estarem
   fisicamente colados). Nao vem do "Limpar" (regra acima, so' esconde o
   proprio link) - e' o proprio "table.variations" que sempre teve
   "border-bottom" (regra nativa do Astra, incondicional, independente de
   selecao nenhuma feita: ".woocommerce-js div.product form.cart
   .variations{border-bottom:1px solid var(--ast-border-color);...}").
   Removida (borda + a margem que ela media junto, sem motivo pra manter
   separando visualmente a tabela do conjunto de botoes logo abaixo). */
body.single-product div.product form.cart .variations{
	border-bottom:none;
	margin-bottom:0;
}

/* Espaco vazio empurrando o conjunto de botoes pra baixo DEPOIS de escolher
   um aroma (2026-09-08, reportado pelo Ronaldo - "efeito visual
   desconfortavel"). Causa: ".single_variation" (div vazia dentro de
   ".single_variation_wrap", que o WooCommerce popula via JS com descricao/
   preco/disponibilidade DA VARIACAO - "add-to-cart-variation.js",
   "onFoundVariation") fica com os 3 campos em branco pra este produto (mesmo
   preco pra todos os aromas, sem descricao nem disponibilidade proprias por
   variacao) - MESMO ASSIM o proprio JS do WooCommerce chama ".show()" nela
   quando o texto sai vazio (ver a funcao, linha ~449: "if (texto) slideDown;
   else show()") - ela fica visivelmente presente no fluxo, SEM NENHUM
   conteudo, só' carregando a propria caixa (regra nativa do Astra,
   ".single_variation_wrap .single_variation{margin-bottom:1.2em;
   border-top:...}") - daí o vao vazio empurrando tudo pra baixo. Zerado o
   "margin-bottom" (a regra nativa ja' zera o proprio "border-top" por conta
   própria, com uma 2a declaracao "border-top:0" logo depois da 1a no mesmo
   seletor - conferido no CSS antes de escrever, nao repetido aqui por ja'
   nao ter efeito visual nenhum). Sem "!important": o JS so mexe em "display"
   neste elemento (mesmo mecanismo do "Limpar", mas so' nessa propriedade),
   nunca em "margin"/"border" inline - especificidade sozinha já resolve. */
body.single-product div.product form.cart .single_variation_wrap .single_variation{
	margin-bottom:0;
}

/* Espaco ANTES do divisor (borda superior) de ".product_meta" (a linha que
   separa os botoes do "Categoria: .../Tags: ...") - a pedido do Ronaldo
   (2026-08-04). O CSS nativo (".product_meta{border-top:1px solid
   ...;padding-top:.5em}", ver "woocommerce.min.css" do Astra) ja' cria os
   0.5em (~7px) DEPOIS da linha via "padding-top" - o "margin-top:.5em"
   abaixo iguala o espaco ANTES dela (pedido de uma rodada anterior, ver
   historico no fim do arquivo). Depois disso o Ronaldo pediu mais 4px SO'
   no espaco ANTES do divisor (entre ele e os botoes) - por isso
   "calc(.5em + 4px)" em vez de so' "4px" fixo (mantem o valor anterior como
   base, so' soma o extra, sem perder o motivo original do "em": ficar
   proporcional se o "font-size" desse elemento mudar).
   GOTCHA (achado ao vivo, medido - "margin-top" nao aplicava de primeira):
   existe uma 2a regra nativa so' pro "margin" (".woocommerce-js div.product
   .product_meta{margin:0 0 .8em}", "woocommerce-grid.min.css", 3 classes)
   MAIS especifica que a 1a tentativa (2 classes) - precisou de "div.product"
   no seletor pra igualar/vencer, mesma tecnica ja usada nas outras regras
   desta secao. */
body.single-product div.product .product_meta{
	margin-top:calc(.5em + 4px);
}

/* Espaco entre a linha (foto+resumo) e as abas do produto (Descricao /
   Informacao adicional / Avaliacoes, ".woocommerce-tabs") - a pedido do
   Ronaldo (2026-08-04), valor final de 16px.
   GOTCHA REAL (por que a 1a tentativa, so' reduzindo o "padding-top" das
   abas de 2em/32px pra 1em/16px, pareceu "nao fazer nada" pro Ronaldo):
   esse padding e' so' METADE do espaco total - a outra metade vem de uma
   regra nativa DIFERENTE, nunca tocada antes, nas colunas de foto/resumo:
   ".woocommerce-js div.product div.images{margin-bottom:2em}" e
   ".woocommerce-js div.product div.summary{margin-bottom:2em}"
   ("woocommerce-grid.min.css" do Astra) - 32px de margem SOB as duas
   colunas, empilhando com o padding-top das abas (32+16=48px de espaco
   real, so' 16px menor que o original 32+32=64px - diferenca pequena
   demais pra notar). Zerado abaixo (repetindo a cadeia nativa com
   "body.single-product" na frente pra vencer por especificidade, mesma
   tecnica ja documentada varias vezes neste arquivo) e o valor final movido
   pro "padding-top" das abas, um unico lugar controlando o espaco todo -
   1a tentativa pos-bug foi 8px (valor que o Ronaldo tinha pedido como
   alvo caso o bug nao fosse encontrado), mas com o bug ja corrigido (sem
   mais a margem nativa por cima) ficou perto demais na pratica; ajustado
   pra 16px (o valor ja reduzido da 4a rodada, que fazia sentido sozinho -
   so' nao surtia efeito visivel por causa do bug). */
body.single-product div.product div.images,
body.single-product div.product div.summary{
	margin-bottom:0;
}
body.single-product div.product .woocommerce-tabs{
	padding-top:16px;
}

/* Titulo "Produtos relacionados" (".related.products h2"): MESMA fonte/peso/
   tamanho do titulo das paginas de vitrine/categoria/Home
   (".woocommerce-products-header__title", Lato 700 22px - ver secao
   "Vitrine/Categoria" mais acima neste arquivo) - a pedido do Ronaldo
   (2026-09-03), "o mesmo estilo, fonte, cores que o título das páginas
   home, categorias, etc". Sem cor propria (mesmo motivo documentado na
   regra irma do Carrinho/Checkout/Minha Conta: a cor ja vem igual, herdada
   da regra global de titulo do Astra). */
body.single-product .related.products > h2{
	font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight:700;
	font-size:22px;
}

/* Grade de "Produtos relacionados": mesmos cards da vitrine/Home (usa o
   MESMO content-product.php, ja' herda ".woocommerce ul.products{display:
   grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}" la' de
   cima neste arquivo) - so' faltava CADA CARD ocupar a largura de verdade
   da sua celula do grid, a pedido do Ronaldo ("a grade de produtos deve ter
   o mesmo estilo, ocupando mais largura, etc, que a grade de produtos da
   home").
   GOTCHA (achado lendo o CSS do Astra, nao so' de olho): existe uma regra
   nativa exclusiva desta secao, ".woocommerce-js div.product .related.
   products ul.products li.product{width:22.5%;width:calc(25% - 15px)}" -
   sobra do layout ANTIGO do WooCommerce (float/columns-N, de antes da
   grade em CSS Grid). "width" num FILHO de grid layout continua valendo
   (nao e' ignorado so' porque o pai virou "display:grid") - cada card
   encolhia pra' ~25% da largura da PROPRIA CELULA (ja' definida por
   "minmax(230px,1fr)" no pai), sobrando vao vazio a direita de cada um,
   em vez de preencher a celula inteira. 6 classes (contando "div"/"ul"/
   "li" como elementos, nao classes, na conta de especificidade) - vencida
   aqui com "body.single-product" na frente, mesma tecnica ja documentada
   varias vezes neste arquivo. */
body.single-product div.product .related.products ul.products li.product{
	width:auto;
}

/* Grade de "Produtos relacionados" no MOBILE (2026-09-03, a pedido do
   Ronaldo - a rodada anterior corrigiu só a largura de cada card, mas o
   ESPAÇAMENTO da grade continuava batendo com o valor DESKTOP herdado de
   ".woocommerce ul.products{padding:24px;gap:20px}", diferente da Home/
   Shop, que ganham um override próprio só no mobile, escopado às classes
   de body que essas 2 páginas têm ("ast-woo-shop-archive"/"search-results"/
   ".laluce-featured-products" - nenhuma delas existe na página de produto).
   Mesmos valores usados lá (padding:10px, gap:10px) e a MESMA grade fixa de
   2 colunas da Home no mobile (a base ".woocommerce ul.products" usa
   "auto-fill" fluido, que pode cair pra 1 coluna só em telas estreitas -
   "repeat(2,1fr)" garante a mesma contagem de colunas da Home sempre).
   CORRECAO REAL (2026-09-03, medido ao vivo via Playwright, depois de MAIS
   DE UMA tentativa anterior nao ter resolvido de vez - pedido do Ronaldo:
   "ainda nao esta assim, apesar de ja termos tentado algumas vezes"):
   comparando as 2 grades lado a lado (".getBoundingClientRect()" nos
   cards, nao so' no "ul"), o card da Shop comecava a 20px da borda real
   da tela, enquanto o card de "Produtos relacionados" comecava a 30px -
   10px de diferenca real, apesar do "padding:10px"/"gap:10px" acima ja
   serem IDENTICOS aos da Shop. Causa: a Shop tem uma REGRA IRMA (nao
   documentada aqui antes, ver secao "Grade de produtos" mais acima neste
   arquivo) que puxa a CAIXA do "ul.products" 10px pra' DENTRO do padding
   do container ("margin-left:-10px;margin-right:-10px", pensada
   originalmente pra' compensar um vazamento de padding exclusivo do
   layout COM sidebar de filtros, "ast-left-sidebar") - sem essa margem
   negativa aqui, a caixa do grid ficava 10px mais pra' dentro (encostada
   no padding NATIVO do container da pagina de produto, que por coincidencia
   tambem soma ~20px nesta largura, mesmo essa pagina NAO tendo sidebar
   nem o mesmo bug). Repetida a MESMA margem negativa aqui - conferido ao
   vivo que os 2 cards passam a comecar EXATAMENTE nos mesmos 20px da
   borda da tela, em 390px/360px/320px de largura. */
@media (max-width:921px){
	body.single-product div.product .related.products ul.products{
		grid-template-columns:repeat(2,1fr);
		padding:10px;
		gap:10px;
		margin-left:-10px;
		margin-right:-10px;
	}
}

/* Coração de favoritos (YITH Wishlist) NA PÁGINA DE PRODUTO, estado "já
   favoritado": coração TOTALMENTE vermelho (preenchido, não só contorno) -
   a pedido do Ronaldo (2026-09-03). Escopado por
   ".yith-wcwl-add-to-wishlist--single" (modificador que o próprio YITH já
   grava nesse contexto, distinto de ".laluce-card-media" do card da
   vitrine - ver a seção do coração do card, mais acima neste arquivo, pro
   mesmo tratamento lá).
   GOTCHA: diferente do card, aqui o rótulo ("Remove from list") continua
   VISÍVEL de propósito (só traduzido via option, ver
   bin/setup-single-product.php, "yith_wcwl_remove_from_wishlist_text") -
   por isso NENHUM "font-size:0"/esconde-rótulo é repetido aqui.
   GOTCHA REAL (achado lendo o template do plugin, não só de olho): o SVG do
   estado "já favoritado" (template "add-to-wishlist-remove.php") é o MESMO
   ícone de CONTORNO do estado inicial ("fill=none;stroke=currentColor"
   direto no "<svg>", atributos de apresentação) - o plugin só troca o link/
   href, não o ícone. Só "color" (que pinta o TRAÇO) deixaria um coração
   VAZADO vermelho, não "totalmente vermelho" como pedido. "fill"/"stroke"
   via CSS vencem o "fill=none" do atributo (especificidade mínima,
   qualquer regra de CSS de verdade já vence um atributo de apresentação). */
body.single-product .yith-wcwl-add-to-wishlist--single.exists a.delete_item svg{
	fill:var(--heart-red);
	stroke:var(--heart-red);
	color:var(--heart-red);
}

/* Linha "ou Ver ›" que o YITH insere logo ao lado do botao de favoritos, no
   estado "ja favoritado" - a pedido do Ronaldo (2026-09-03): "remova a
   opcao/texto ou...Ver>> que esta logo abaixo de Adicionar/Remover da lista
   de desejos". Nao quer essa navegacao extra pra' lista de desejos na
   pagina de produto.
   1a TENTATIVA (mesmo dia) mirou as classes ERRADAS
   (".yith-wcwl-wishlistexistsbrowse"/".yith-wcwl-wishlistaddedbrowse") -
   nao funcionou, o texto continuou aparecendo (reportado pelo Ronaldo).
   GOTCHA REAL (achado lendo `get_template_kind()` em
   "class-yith-wcwl-add-to-wishlist-button.php", nao so' de olho): a opcao
   "yith_wcwl_after_add_to_wishlist_behaviour" deste site e' "remove" (ver
   `bin/setup-shop-sidebar.php`) - com produto JA na lista E esse
   comportamento, o plugin SEMPRE usa o template "add-to-wishlist-remove.php"
   (nunca "browse.php"/"added.php", cujas classes eu tinha mirado antes,
   corretas em teoria mas mortas na pratica pra este site). Esse template
   NAO usa um wrapper proprio pro link "Ver" - ele fica dentro do MESMO
   "<div class=yith-wcwl-add-button>" do link de remover, como
   "<span class=separator>ou</span><a class=view-wishlist>Ver ›</a>"
   irmaos do "<a class=delete_item>" (o coracao vermelho). */
body.single-product .yith-wcwl-add-to-wishlist--single .yith-wcwl-add-button span.separator,
body.single-product .yith-wcwl-add-to-wishlist--single .yith-wcwl-add-button a.view-wishlist{
	display:none;
}

/* =========================================================================
   Abas do produto (Descrição / Informação adicional / Avaliações) - a
   pedido do Ronaldo (2026-08-04): a barrinha fina que o Astra desenha ACIMA
   da guia selecionada ("ul.tabs li.active::before", 3px, cor do acento do
   tema) removida (::before/::after escondidos mais abaixo).
   2026-09-03, 1a tentativa: substituida por um "chip" cheio (fundo marrom +
   texto branco, laranja no hover/selecionada) - reprovado pelo Ronaldo no
   teste visual ("nao ficaram bons"). SUBSTITUIDO no mesmo dia por algo mais
   discreto: SEM fundo nenhum, so' a COR da fonte muda - escura (petroleo)
   por padrao, marrom da paleta no HOVER e na guia SELECIONADA (o marrom
   passa a ser o proprio indicador de selecao, no lugar do chip/da barra
   fina). Cor vale igual no mobile e desktop, sem "@media" (a pedido
   explicito do Ronaldo, "tanto no mobile como no desktop") - o "@media"
   que EXISTE mais abaixo (empilhamento) e' sobre outra coisa, layout, nao
   cor.
   ESPECIFICIDADE: repete a MESMA cadeia que o Astra usa
   (".woocommerce-js div.product .woocommerce-tabs ul.tabs li", 4 classes +
   3 elementos) com "body.single-product" na frente (4 classes + 4
   elementos) - mesma tecnica de sempre neste arquivo, vence por numero de
   elementos com as classes empatadas. */
body.single-product div.product .woocommerce-tabs ul.tabs li{
	background:none;
	border:none;
	margin:0 8px 0 0;
	padding:0;
}
body.single-product div.product .woocommerce-tabs ul.tabs li a{
	padding:10px 18px;
	color:var(--petrol);
	font-weight:700;
	transition:color .15s ease;
}
body.single-product div.product .woocommerce-tabs ul.tabs li:hover a,
body.single-product div.product .woocommerce-tabs ul.tabs li.active a{
	color:var(--brown);
}
/* Empilhamento das guias no mobile (2026-09-03, correcao sobre a rodada
   anterior) - o Ronaldo suspeitou que as 3 guias cabiam numa linha so' e
   pediu pra testar. TESTADO AO VIVO via Playwright (excecao pontual,
   autorizada pelo Ronaldo pra esta medicao especifica - sem screenshot, so'
   leitura de "getBoundingClientRect"): nao era um problema de LARGURA
   insuficiente por si so', era um COMPORTAMENTO NATIVO do proprio
   WooCommerce - "woocommerce.css" tem
   ".woocommerce #content div.product .woocommerce-tabs ul.tabs li{
   display:block}" dentro de "@media (max-width:544px)", que empilha as
   guias de proposito abaixo desse breakpoint (o "#content" e' um ID -
   qualquer seletor SEM id perde pra ele, nao importa quantas classes
   tenha; e' por isso que a regra de cor acima, com 4 classes, nunca
   conseguiria mudar o "display" mesmo se tentasse).
   Medido ao vivo (390px/360px/320px, larguras reais de celular, do maior
   pro menor testado): com "display:inline-block" restaurado e o padding/
   fonte ORIGINAIS (18px/sem reducao), as 3 guias ("Descrição"/"Informação
   adicional"/"Avaliações (0)") somam ~400px de largura - nao cabem nem no
   container mais largo testado (335px em 390px de tela). Reduzindo padding
   horizontal (18px->2px) e fonte (~14.6px->12px, ainda legivel, mesmo
   tamanho ja usado no cabecalho da tabela do Carrinho) elas passam a caber
   numa linha so' com folga positiva em TODAS as larguras testadas (390px:
   ok; 360px: ok; 320px, a tela realista mais estreita ainda em uso: ok,
   3px de sobra). ESPECIFICIDADE: repete a cadeia nativa incluindo
   "#content" (empata no ID, "body.single-product" garante o resto). */
@media (max-width:544px){
	body.single-product #content div.product .woocommerce-tabs ul.tabs li{
		display:inline-block;
		margin:0 2px 0 0;
	}
	body.single-product #content div.product .woocommerce-tabs ul.tabs li a{
		padding:10px 2px;
		font-size:12px;
	}
}
/* A barrinha fina nativa (substituida pela cor de fonte acima) e os
   "dentes" de canto do Astra (pseudo-elementos decorativos da aba, ja sem
   nenhum efeito visual no CSS de fabrica - "border:none;box-shadow:none" -
   mas escondidos aqui por garantia, caso uma atualizacao do Astra volte a
   desenhar algo neles). */
body.single-product div.product .woocommerce-tabs ul.tabs li.active::before,
body.single-product div.product .woocommerce-tabs ul.tabs li::before,
body.single-product div.product .woocommerce-tabs ul.tabs li::after{
	display:none;
}

/* Guia "Avaliações": formulario de avaliacao ("#review_form_wrapper", a
   caixa "Seja o primeiro a avaliar..."/"Adicionar uma avaliacao") no mesmo
   estilo do site - a pedido do Ronaldo (2026-09-03): campos com radius 5px
   (mesma receita de campo ja usada no Checkout, "body.woocommerce-checkout
   input[...]" mais abaixo neste arquivo), asterisco de obrigatorio em
   vermelho, e as 5 estrelas alinhadas na VERTICAL com o texto "Sua
   avaliacao*" (o proprio WooCommerce esconde o "<select id=rating>" nativo
   e insere um "<p class=stars>" ANTES dele via JS, ambos filhos de
   ".comment-form-rating" - "display:flex;align-items:center" no pai alinha
   rotulo+estrelas na mesma linha/altura, o "<select>" escondido nao afeta
   o layout).
   1a versao (7a rodada) envolvia tudo isso num CARD (fundo branco+borda+
   radius+padding 24px, mesma receita de ".laluce-ma-card" da Minha Conta) -
   reprovado pelo Ronaldo no teste visual ("remova o card interno", 8a
   rodada). Card removido por completo naquela rodada.
   10a rodada (mesmo dia): tentativa de RE-ADICIONAR o mesmo card mal
   interpretou o pedido "radius 5px no card da guia Avaliações" - o
   Ronaldo pediu pra REVERTER essa tentativa (voltar ao estado sem card da
   8a rodada, este aqui) e refazer o pedido do zero, pra conversa ficar
   mais limpa.
   11a rodada (mesmo dia): mesmo com o card acima 100% removido, uma borda
   continuava aparecendo (print do Ronaldo com 2 setas - verde numa moldura,
   vermelha noutra). Causa real, achada via Playwright (getComputedStyle +
   iteracao em TODAS as folhas de estilo, nao so' grep): NUNCA foi o nosso
   CSS - e' uma regra NATIVA do Astra, sempre existiu, em outro elemento
   (".woocommerce-js #reviews #review_form{border:1px solid var(--ast-
   border-color);padding:1.67em}", "woocommerce-grid.min.css") - "#review_
   form" e' um "<div>" DIFERENTE de "#review_form_wrapper" (fica DENTRO
   dele, envolvendo so' "#respond"), nunca estilizado por nos antes. A
   moldura da seta VERMELHA (a que devia sair) era o nosso card extra por
   cima; a da seta VERDE (a que devia ficar) e' ESTA aqui, nativa - so'
   virou visivel/unica depois do revert acima remover a nossa por cima.
   Radius 5px pedido explicitamente aplicado nela. */
body.single-product #reviews #review_form{
	border-radius:5px;
}
body.single-product #review_form_wrapper .comment-reply-title{
	display:block;
	margin-bottom:16px;
	font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size:18px;
	font-weight:700;
	color:var(--petrol);
}
body.single-product #review_form_wrapper label{
	display:block;
	margin-bottom:6px;
	font-weight:700;
	color:var(--petrol);
	font-size:.9rem;
}
body.single-product #review_form_wrapper .required{
	color:var(--heart-red);
	font-weight:700;
}
body.single-product #review_form_wrapper .comment-form-rating{
	display:flex;
	align-items:center;
	gap:10px;
	margin-bottom:16px;
}
body.single-product #review_form_wrapper .comment-form-rating label{
	margin-bottom:0;
}
body.single-product #review_form_wrapper p.stars{
	margin:0;
}
body.single-product #review_form_wrapper .comment-form-author,
body.single-product #review_form_wrapper .comment-form-email,
body.single-product #review_form_wrapper .comment-form-comment{
	margin-bottom:16px;
}
body.single-product #review_form_wrapper input[type="text"],
body.single-product #review_form_wrapper input[type="email"],
body.single-product #review_form_wrapper textarea{
	box-sizing:border-box;
	width:100%;
	border:1px solid var(--border-input);
	border-radius:5px;
	padding:9px 12px;
	font-family:inherit;
	font-size:.9rem;
	color:#1c1c1c;
	background-color:#fff;
}
body.single-product #review_form_wrapper textarea{
	min-height:100px;
	resize:vertical;
}
body.single-product #review_form_wrapper input[type="text"]:focus,
body.single-product #review_form_wrapper input[type="email"]:focus,
body.single-product #review_form_wrapper textarea:focus{
	outline:2px solid var(--petrol-light);
	outline-offset:1px;
}
/* Botao "Enviar": fundo marrom da paleta, texto branco, hover laranja com
   texto petroleo - mesma paleta marrom->laranja usada em varios outros
   elementos do site, a pedido do Ronaldo. */
body.single-product #review_form_wrapper .form-submit{
	margin:0;
}
body.single-product #review_form_wrapper #submit{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:38px;
	padding:0 24px;
	border:none;
	border-radius:5px;
	background:var(--brown);
	color:#fff;
	font-weight:700;
	font-size:.9rem;
	cursor:pointer;
	transition:background-color .15s ease, color .15s ease;
}
body.single-product #review_form_wrapper #submit:hover{
	background:var(--orange);
	color:var(--petrol);
}
/* Mobile (<=921px, mesmo breakpoint nativo do Astra ja' usado neste
   arquivo): botao "Enviar" passa de largura pelo conteudo ("inline-flex",
   padding 0 24px) pra' ocupar 100% do container - a pedido do Ronaldo
   (2026-09-03), "centralizado e ocupar toda a largura do container,
   mantendo os respiros na direita e esquerda". "display:flex" (nao mais
   "inline-flex") + "width:100%" preenche a largura do proprio ".form-submit"
   (um "<p>", 100% do painel da guia) - os respiros laterais ja existem por
   fora, na largura do proprio painel/container da pagina, sem precisar de
   margin extra aqui. Preencher a linha toda ja resulta em centralizacao. */
@media (max-width:921px){
	body.single-product #review_form_wrapper #submit{
		display:flex;
		width:100%;
	}
}

/* =========================================================================
   Pagina do carrinho (/carrinho/) - 2026-08-06, 3 rodadas a pedido do
   Ronaldo. 1a rodada: molduras marrom (--brown) com radius 5px, seletor de
   quantidade no desenho do card/pagina de produto. 2a rodada (correcoes +
   pedidos novos, ver inc/cart.php e woocommerce/cart/cart-totals.php pro
   lado PHP de cada item):
   1) corrigido o radius "com o canto cortado" (GOTCHA abaixo);
   2) icone de remover virou lixeira vermelha, coluna mais estreita;
   3) titulo visivel "Foto" na coluna da miniatura;
   4) titulo do produto maior + categoria/tags abaixo;
   5) stepper de quantidade corrigido (esticava a coluna toda) + coluna
      encolhida ao conteudo, centralizada;
   6) linha "Subtotal" movida pra dentro desta tabela (removida da caixa de
      totais);
   7) frete/CEP/opcoes de entrega viraram uma caixa propria, "Frete e
      Envio", antes da caixa "Total no carrinho" (cart-totals.php).
   3a rodada (mais correcoes + pedidos novos):
   1) icone da lixeira 2x maior, SOLIDO (nao mais contorno), sem o circulo
      nativo do WooCommerce/Astra ao redor, "title" adicionado (so'
      "aria-label" nao aparece em hover);
   2) categoria/"Ideias" (renomeado de "Tags") com a MESMA fonte do rotulo,
      espacamento titulo->categoria->ideias igualado;
   3) espaco novo entre a tabela de produtos e "Frete e Envio" (mesmo valor
      do espaco ja existente entre as 2 caixas de totais); "Total no
      carrinho" renomeado pra "Total da Compra" (cart-totals.php);
   4) "Frete e Envio" virou largura cheia (igual a' tabela de produtos, sem
      o "float:right;width:48%" nativo) e a linha de frete foi dividida em 2
      colunas, "Endereco"/"Opcoes de Envio" (novo override,
      woocommerce/cart/cart-shipping.php).
   (Rodadas 4a-9a: ver memory/pagina-carrinho.md - indice completo, incluindo
   o bug real de "update_cart" e o lookup automatico de bairro via ViaCEP.)

   10a rodada (2026-08-07) - RESKIN visual completo a partir de um mockup
   aprovado pelo Ronaldo no Claude Design (arquivo em identidade-visual/
   claude-design/, "Checkout Redesign"). So' as TELAS de Carrinho/Checkout -
   cabecalho e menu de navegacao ficaram de fora, a pedido explicito dele.
   Nenhuma logica/comportamento mudou (ViaCEP, AJAX, avisos escondidos etc.
   seguem identicos) - so' cor/forma:
   1) bordas das caixas (tabela de produtos, "Frete e Envio", "Total da
      Compra") trocadas de marrom saturado (1.5px, "--brown") pra um
      contorno neutro mais claro (1px, "--border-light", token novo -
      ver :root); cabecalho das caixas trocou o fundo marrom-translucido
      por "--bg-grid" (o mesmo tom ja usado na grade de produtos da
      vitrine, "Nevoa Petroleo" - ver design.md);
   2) NOVO cabecalho da tabela de produtos (Produto/Preco/Quantidade/
      Subtotal) com fundo "--bg-grid", texto petroleo maiusculo - antes
      usava o cinza generico do Astra, sem tratamento de marca;
   3) subtitulos "Dados da entrega"/"Opcoes de envio" trocados de marrom
      pra petroleo (bate com o mockup);
   4) stepper de quantidade redesenhado: de uma caixa UNICA "unida" (borda
      em volta dos 3 elementos + divisores internos) pra 3 quadrados
      SEPARADOS (26x26, borda propria clara, "--border-input") com espaco
      entre eles - mesmo mecanismo de acessibilidade/JS por baixo
      (".laluce-qty-btn"/".laluce-qty-input", inc/cart.php), so' o
      desenho visual mudou;
   5) botao "Continuar Comprando" trocado de marrom (borda/texto/hover)
      pra petroleo; botao "Ir para o Pagamento" ganhou cor PROPRIA
      (laranja, "--orange") em vez de herdar o petroleo da paleta global
      do Astra que TODOS os botoes nativos do site usam (design.md,
      2026-07-29) - unico botao com essa excecao, coerente com o papel do
      laranja na paleta canonica ("Destaque/CTA: usar com parcimonia");
   6) campo de cupom com largura maxima (220px, antes esticava livre);
   7) "Atualizar carrinho": o mockup so' mostra "Aplicar cupom" nesta
      linha, mas o botao foi MANTIDO (decisao do Ronaldo, nao do mockup -
      e' o unico fallback funcional se o JS falhar/estiver desligado),
      so' com visual discreto (virou link de texto sublinhado, padrao de
      link ja estabelecido no site - petroleo-claro base, marrom hover -
      em vez de botao solido).
   ========================================================================= */

/* GOTCHA REAL (2026-08-06, achado pelo proprio Ronaldo ao vivo - "o bico do
   canto ficou cortado"): a 1a versao dava "border-radius"/cor de borda
   DIRETO no elemento "<table>". O WooCommerce (10.9) ate' da radius:5px
   nativo a ".shop_table" ("border-collapse:separate"), mas isso so' clipa a
   PROPRIA borda da tabela - o FUNDO do cabecalho (thead, cinza claro via
   Astra) e' de um elemento FILHO, e "overflow:hidden" em "<table>" nao clipa
   o conteudo dos filhos de forma confiavel entre navegadores (limitacao
   conhecida do modelo de tabela - ao contrario de uma "<div>" comum, onde
   "overflow:hidden" sempre funciona). Resultado: a borda arredondava, mas o
   fundo cinza do cabecalho continuava desenhando um retangulo reto por cima
   do canto, parecendo "cortado". Corrigido com um WRAPPER de verdade
   (".laluce-cart-table-wrap", uma "<div>" de verdade, ver
   "woocommerce_before_cart_table"/"woocommerce_after_cart_table" em
   inc/cart.php) - a moldura (borda+radius+overflow:hidden) vai nela, a
   TABELA em si fica sem borda propria (evita moldura dupla).
   CORRECAO (2026-08-07, achada pelo Ronaldo ao vivo com print - "os cards
   nao deveriam ser creme"): este wrapper NUNCA teve "background-color"
   proprio - "parecia" branco so' porque a PAGINA inteira era branca antes
   da correcao do "--bg-site"/"ast-plain-container" (ver "Camadas de
   fundo" em design.md). Com a pagina virando creme claro, o fundo creme
   "vazava" pra dentro da caixa (sem cor propria, um elemento mostra o que
   tiver atras dele). Fundo branco explicito adicionado - mesmo principio
   ja documentado pra vitrine/categoria (design.md, "Camadas de fundo":
   "os cards de produto continuam brancos... so' a camada atras muda"). */
body.woocommerce-cart .laluce-cart-table-wrap{
	background-color:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	overflow:hidden;
}
body.woocommerce-cart .laluce-cart-table-wrap table.shop_table.cart{
	border:none;
	border-radius:0;
	margin:0;
}
body.woocommerce-cart .laluce-cart-table-wrap table.shop_table.cart td,
body.woocommerce-cart .laluce-cart-table-wrap table.shop_table.cart tbody th{
	border-top-color:var(--border-light);
}
/* Cabecalho da tabela de produtos (Produto/Preco/Quantidade/Subtotal), novo
   no redesenho aprovado (2026-08-07) - antes usava o cinza generico do
   Astra, sem nenhum tratamento proprio da marca. Mesmo tom de fundo ja
   usado na grade de produtos da vitrine (--bg-grid, "Nevoa Petroleo", ver
   design.md), texto em petroleo, maiusculas com leve espacamento entre
   letras (convencao tipica de cabecalho de tabela). */
body.woocommerce-cart .laluce-cart-table-wrap table.shop_table.cart thead th{
	background-color:var(--bg-grid);
	color:var(--petrol);
	/* ".75rem" -> 12px na revisao de escala de 2026-08-11 (ver o comentario do
	 * titulo do produto mais abaixo). Em rem isto dava ~10,9px, menor que os
	 * 12px que o mockup pede pro cabecalho da tabela. */
	font-size:12px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.03em;
	border-top:none;
}

/* Coluna "Produto" (4a rodada, 2026-08-06, a pedido do Ronaldo): as antigas
   colunas "Remover" e "Foto" deixaram de existir como colunas da tabela -
   viraram 3 "celulas" visuais DENTRO da unica celula "Produto"
   (".laluce-product-row", flex em LINHA - foto, depois titulo+categoria+
   ideias, depois a lixeira - ver woocommerce/cart/cart.php, override).
   "align-items:center" centraliza a lixeira (menor) e o bloco de texto
   (altura variavel) contra a foto (o elemento mais alto da linha), sem
   precisar calcular nada na mao. */
body.woocommerce-cart .laluce-product-row{
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:14px;
}
/* Foto de cada produto, mesmo radius das demais fotos do site (galeria da
   pagina de produto, card da vitrine). Tamanho fixo (nao encolhe, nao
   estica) pra nao competir por espaco com o bloco de texto ao lado. */
body.woocommerce-cart .laluce-product-photo{
	flex:0 0 auto;
}
body.woocommerce-cart .laluce-product-photo img{
	display:block;
	width:64px;
	height:64px;
	object-fit:cover;
	border-radius:5px;
}
/* Bloco de texto (titulo+categoria+ideias): unico item que deve CRESCER pra
   ocupar o espaco sobrando na celula (a foto e a lixeira sao largura fixa),
   "min-width:0" evita que um titulo de produto longo estoure a largura da
   coluna em vez de quebrar linha normalmente (gotcha classico de item flex
   com texto longo, sem "min-width" o minimo e' o do conteudo, nao 0). */
body.woocommerce-cart .laluce-product-info{
	flex:1 1 auto;
	min-width:0;
}
/* Lixeira: largura fixa (nao estica), sempre por ultimo na linha. */
body.woocommerce-cart .laluce-product-remove{
	flex:0 0 auto;
}

/* Icone de remover (lixeira SOLIDA, ".ic-trash" - ver
   assets/icons/trash-pb.svg), vermelho ("--heart-red", mesma excecao "fora
   da paleta de proposito" ja usada no coracao de favoritos - convencao
   universal de UX pra acao destrutiva, ver memory/pagina-categoria.md).
   GOTCHA (2026-08-06, "tem uma especie de circulo ao redor que precisa ser
   removido"): o link "a.remove" nativo do WooCommerce/Astra vem com uma
   moldura circular PROPRIA - "border-radius:100%" + "width/height:20px"
   (que tambem espremia o icone dentro de uma caixinha pequena) + um
   "::before" que desenha uma BORDA circular por cima (".woocommerce-js
   a.remove:before{border:1px solid ...;border-radius:100%}") + a cor
   vermelha nativa do WooCommerce vem com "!important" (precisa de outro
   "!important" pra vencer). Tudo isso e' pensado pro "x" de texto original,
   nao pra um icone; neutralizado abaixo. Tamanho do icone: 2x na 3a rodada
   (18px->36px) e reduzido de novo na 4a rodada pra bater com a altura do
   conjunto seletor de quantidade (".quantity{height:32px}", ver mais
   abaixo) - 22px de icone dentro de uma area clicavel de 32px de altura. */
body.woocommerce-cart .laluce-cart-remove{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:auto;
	height:32px;
	border-radius:0;
	opacity:1;
	color:var(--heart-red) !important;
}
body.woocommerce-cart .laluce-cart-remove::before{
	content:none;
	border:none;
}
body.woocommerce-cart .laluce-cart-remove .ic{
	width:22px;
	height:22px;
}
body.woocommerce-cart .laluce-cart-remove:hover{
	opacity:.7;
}

/* Titulo do produto maior (a pedido do Ronaldo) - mesma "voz tipografica"
   ja usada no titulo do card/pagina de produto (Lato 700). Categoria/tags
   abaixo (".laluce-cart-item-meta", injetadas via "woocommerce_after_cart_
   item_name" em inc/cart.php), no mesmo tom "texto secundario" ja usado no
   parcelamento do card/descricao da vitrine (petroleo translucido).
   GOTCHA (2026-08-06, "categoria e ideias ainda nao tem o mesmo tamanho de
   fonte" - achado revisando o proprio CSS): o seletor usado ate' a 3a
   rodada, "td.product-name a", casava com QUALQUER link dentro da celula -
   nao so' o titulo, mas TAMBEM os links de categoria/ideias (aninhados
   dentro de ".laluce-cart-item-meta", mas ainda descendentes de
   "td.product-name"), forcando 1.1rem/700/Lato neles tambem e vencendo a
   regra mais especifica-em-classes-mas-com-menos-elementos ".laluce-cart-
   item-meta a" (especificidade e' resolvida por CAMADA - IDs, depois
   classes, depois elementos; as 2 regras empatavam em classes, e a com MAIS
   elementos no seletor vencia o desempate, nao a "mais aninhada"). Trocado
   pra ".laluce-product-info > a" (filho DIRETO do bloco de texto) - o link
   do titulo e' filho direto dali, os links de categoria/ideias NAO SAO
   (estao 2 niveis mais fundo, dentro de ".laluce-cart-item-meta span"), af
   agora so' o titulo bate com essa regra. */
/* ESCALA TIPOGRAFICA DO CARRINHO, 2026-08-11 (a pedido do Ronaldo: "a escala
 * do carrinho esta' grande demais, mas nao quero reduzir tanto quanto o
 * checkout - quero algo intermediario").
 *
 * De "1.1rem" pra' 14px cravados. Os numeros que sustentam a escolha, medidos
 * ao vivo antes: o titulo aqui dava 16px no desktop e 14,59px no celular
 * (rem escala junto com a raiz, que o Astra muda por viewport), contra 13px
 * fixos do titulo de produto no Checkout. 14px cai exatamente no meio - e nao
 * e' numero inventado: e' o valor que o mockup aprovado ja' pedia pra' esta
 * tela (Carrinho-Checkout.html, item do carrinho: nome 14px/700, categoria
 * 12px, preco 14px, subtotal 14px/700). Ou seja, "intermediario" e "bater com
 * o mockup" apontam pro mesmo lugar.
 *
 * POR QUE TROCAR rem POR px AQUI: em rem, o mesmo texto media 16px numa tela e
 * 14,59px na outra - a escala escorregava sozinha entre desktop e mobile, e
 * nenhum dos dois valores era o pedido. Em px o tamanho fica igual nos dois
 * modos, que e' como o Checkout ja' se comporta. As demais medidas em rem
 * desta secao (botoes de quantidade, titulos das caixas) NAO foram tocadas -
 * o pedido foi sobre o texto dos itens.
 *
 * A COR tambem entra aqui, e vale registrar que e' um acrescimo: esta regra
 * declarava familia e peso mas nunca cor, entao o titulo vinha com o cinza-
 * azulado padrao do Astra (#334155) em vez do petroleo da marca. O mockup pede
 * petroleo, e o rotulo aparece lado a lado com o preco/subtotal que ja' sao
 * petroleo - deixar so' o titulo em cinza destoava. */
body.woocommerce-cart .laluce-product-info > a{
	font-family:'Lato';
	font-weight:700;
	font-size:14px;
	color:var(--petrol);
}
/* GOTCHA (2026-08-06, "Amigurumi deve ter o mesmo estilo de Categoria"): o
   nome do termo ("Amigurumi") e' um LINK ("<a>", vindo de
   "get_the_term_list()") - sem essas 4 declaracoes explicitas, ele
   arriscava herdar o estilo GLOBAL de link do site (".../style.css", "cor
   padrao de link, global", petroleo-claro/marrom) em vez do mesmo tom
   neutro do rotulo "Categoria:"/"Ideias:" ao lado. Espaco titulo->categoria
   e categoria->ideias IGUAIS (2px nos dois: o de fora, entre o titulo do
   produto e este bloco; o de dentro, entre as duas linhas, via
   "span + span"). */
body.woocommerce-cart .laluce-cart-item-meta{
	margin-top:2px;
	/* ".8rem" -> 12px, mesma troca de rem por px do titulo logo acima (ver o
	 * comentario de la' pro raciocinio). 12px e' o valor do mockup pra' esta
	 * linha secundaria. */
	font-size:12px;
	font-weight:400;
	color:rgba(0,59,70,.75);
}
body.woocommerce-cart .laluce-cart-item-meta span{
	display:block;
	line-height:1.5;
}
body.woocommerce-cart .laluce-cart-item-meta span + span{
	margin-top:2px;
}
body.woocommerce-cart .laluce-cart-item-meta a{
	color:inherit;
	font-weight:inherit;
	font-family:inherit;
	font-size:inherit;
	text-decoration:none;
}
body.woocommerce-cart .laluce-cart-item-meta a:hover{
	text-decoration:underline;
}

/* Preco e Subtotal de cada item, na mesma revisao de escala de 2026-08-11.
 * Estas 2 celulas nunca tiveram regra de fonte propria: herdavam os 16px da
 * tabela (que por sua vez vinham do <body>), e por isso ficavam MAIORES que o
 * proprio nome do produto ao lado depois que ele caiu pra 14px. Agora as 3
 * medidas do item andam juntas, como no mockup: nome, preco e subtotal em
 * 14px, com o subtotal em negrito/petroleo por ser o valor que fecha a linha. */
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price,
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal{
	font-size:14px;
}
body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal{
	font-weight:700;
	color:var(--petrol);
}
/* A linha de fecho "Subtotal" (a ultima da tabela, ver inc/cart.php) fica um
 * degrau ACIMA dos itens, nao junto: ela resume a tabela inteira. Os 16px que
 * ela tinha eram herdados, nao escolhidos - e a 1a versao desta revisao
 * baixou so' o VALOR pra 14px, deixando rotulo (16px) e valor (14px)
 * desalinhados na mesma linha. Os 2 declarados juntos aqui pra' nao voltar a
 * divergir; 15px e' o mesmo tamanho que o mockup da' ao rotulo "Total da
 * Compra" da caixa seguinte, mantendo a hierarquia item (14) < fecho (15). */
body.woocommerce-cart table.shop_table.cart tr.laluce-cart-subtotal-row th,
body.woocommerce-cart table.shop_table.cart tr.laluce-cart-subtotal-row td{
	font-size:15px;
}

/* Linha "Subtotal" nova no fim da tabela de produtos (inc/cart.php) - mesmo
   peso visual da linha "Total" da caixa de totais (destaque sutil, borda
   superior mais grossa separando do ultimo produto). Valor alinhado a
   direita (7a rodada, 2026-08-06, "alinhe pela direita o total dos itens no
   carrinho com os totais de Frete e Envio e Total da Compra") - a celula de
   valor ("td.product-subtotal") nao tem alinhamento proprio no WooCommerce/
   Astra, herda "text-align:left" generico da tabela toda
   (".shop_table{text-align:left}"), diferente dos totais das outras 2
   caixas (alinhados a direita via flex "justify-content:space-between" no
   cabecalho, ver mais abaixo). So' esta linha (nao as linhas de produto
   acima, que nao foram citadas no pedido). */
body.woocommerce-cart tr.laluce-cart-subtotal-row th,
body.woocommerce-cart tr.laluce-cart-subtotal-row td{
	font-weight:700;
	border-top:1.5px solid var(--border-light);
}
body.woocommerce-cart tr.laluce-cart-subtotal-row td{
	text-align:right;
}
/* GOTCHA (2026-08-07, "coloque o valor do subtotal em negrito, assim como
   o proprio texto Subtotal"): o "font-weight:700" da regra acima ja' cobre
   o "<td>", mas o VALOR de verdade fica dentro de um
   "<span class=\"woocommerce-Price-amount\">" (montado por
   "wc_price()"/"get_cart_subtotal()") - e o Astra tem
   ".woocommerce-page table.shop_table .woocommerce-Price-amount{font-
   weight:400}" (main.min.css), com MAIS classes no seletor (3 vs as 2
   daqui) que VENCE por especificidade e forca o valor de volta pra 400,
   mesmo com o "<td>" pai em 700 (font-weight nao e' propriedade herdada
   por CASCATA normal aqui - o span tem sua PROPRIA declaracao, que
   precisa da sua PROPRIA regra pra ser vencida). Corrigido mirando o
   proprio span, com selector que iguala as 3 classes do Astra e ainda
   soma mais elementos (body/tr/td) - resolve o empate de classes a nosso
   favor sem precisar de "!important". */
body.woocommerce-cart tr.laluce-cart-subtotal-row td .woocommerce-Price-amount{
	font-weight:700;
}

/* Seletor de quantidade de cada item, no MESMO desenho visual do stepper do
   card/pagina de produto (".laluce-qty-btn"/".laluce-qty-input" definidas
   mais acima neste arquivo).
   GOTCHA REAL (2026-08-06, "o conjunto ficou quebrado" - achado revisando o
   proprio CSS, sem navegador): 2 causas juntas. 1) ".quantity{display:flex}"
   USA display:BLOCK como base (e' uma "<div>" comum) - um flex container em
   fluxo normal de bloco estica pra 100% da largura do PAI (a celula da
   tabela, larga), em vez de abracar so' o tamanho do proprio conteudo -
   virava um retangulo bem mais largo que "- 1 +", com os itens agrupados so'
   a esquerda dele (visual de "quebrado"/desalinhado). Trocado pra
   "display:inline-flex" (encolhe ao conteudo) + "text-align:center" na
   CELULA (centraliza esse bloco agora estreito dentro da coluna). 2) o
   preset de input do Astra ("input[type=number],...{border-radius:4px;
   box-shadow:...}", CSS dinamico) da' RAIO PROPRIO e SOMBRA ao campo
   numerico - nem "border-radius" nem "box-shadow" eram citados na 1a versao
   deste seletor, entao essas 2 propriedades especificas (especificidade e'
   resolvida por propriedade, nao por regra inteira - mesma familia de bug
   ja documentada varias vezes neste arquivo) continuavam do preset do
   Astra, dando ao campo um contorno arredondado + sombra PROPRIOS por
   dentro da caixa reta do stepper - parecia 2 caixas divergentes coladas.
   Corrigido citando "border-radius:0;box-shadow:none" explicitamente nos 2
   elementos (botao e input). Coluna encolhida ao conteudo via "width:1%;
   white-space:nowrap" (no th E no td - "white-space:nowrap" no cabecalho
   tambem evita "Quantidade" quebrar linha ao inves da coluna encolher). */
body.woocommerce-cart th.product-quantity,
body.woocommerce-cart td.product-quantity{
	width:1%;
	white-space:nowrap;
	text-align:center;
}
/* Redesenho do stepper (2026-08-07, mockup aprovado no Claude Design): a
   caixa UNICA "unida" (borda em volta dos 3 elementos, com divisores
   internos) virou 3 quadrados SEPARADOS (26x26, borda propria clara,
   "--border-input"), com espaco entre eles em vez de divisores. O numero
   deixou de ter borda propria (so' o texto, sem caixa em volta). */
body.woocommerce-cart td.product-quantity .quantity{
	display:inline-flex;
	align-items:center;
	gap:6px;
	flex-shrink:0;
}
body.woocommerce-cart td.product-quantity .quantity .laluce-qty-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	box-sizing:border-box;
	width:26px;
	height:26px;
	padding:0;
	border:1px solid var(--border-input);
	border-radius:5px;
	background:none;
	box-shadow:none;
	font-size:.85rem;
	line-height:1;
	color:var(--petrol-light);
	cursor:pointer;
}
body.woocommerce-cart td.product-quantity .quantity .laluce-qty-btn:hover{
	color:var(--orange);
	border-color:var(--orange);
}
/* GOTCHA (2026-08-06, 4a rodada, "o numero esta desalinhado - alinhe ao
   centro na vertical e na horizontal"): "text-align:center" ja centralizava
   na HORIZONTAL, mas so' isso nao basta pra centralizar na VERTICAL num
   "<input>" - ao contrario do botao ao lado (".laluce-qty-btn", um elemento
   normal, onde "display:flex;align-items:center" centraliza o proprio
   texto), um "<input>" e' um elemento SUBSTITUIDO cujo conteudo interno NAO
   responde a "align-items"/"display:flex" aplicados NELE MESMO - o unico
   jeito confiavel entre navegadores de centralizar o texto na vertical e'
   "line-height" igual a' altura real do elemento. Altura real: o pai
   ".quantity" tem 32px com "box-sizing:border-box" + borda de 1.5px dos 2
   lados, sobra 29px de altura de CONTEUDO pros filhos esticados
   ("align-items:stretch") - "height"/"line-height" citados aqui com esse
   mesmo valor (29px) em vez de "height:auto" (que so' fazia caber o texto,
   sem garantir a posicao dele dentro do espaco extra que o "stretch" do pai
   ja dava).
   REFORCO (2026-08-06, 5a rodada - "continua alinhado a base", a 1a
   tentativa nao resolveu de verdade): reforcado com "!important" em
   "line-height"/"padding", "box-sizing:border-box" explicito.
   CAUSA REAL, achada so' na 6a rodada inspecionando o CSS INLINE de
   verdade servido na pagina (nao so' os arquivos estaticos do tema): o
   Astra tem uma regra por ATRIBUTO, "input[type=\"number\"]{line-
   height:24px;padding:12px 16px;height:40px;...}" - ela FICA MAIS
   ESPECIFICA do que parecia numa 1a inspecao, e o Chrome ainda renderiza
   "<input type=number>" com um layout interno PROPRIO (shadow DOM do
   navegador, reservado pro spinner, mesmo escondido via CSS) que pode nao
   centralizar o texto do mesmo jeito que um campo de texto comum. Resolvido
   DE VERDADE trocando o "type" do campo pra "text" (inc/cart.php,
   "laluce_cart_qty_input_type()", filtro publico "woocommerce_quantity_
   input_type") - isso tira o campo do alcance da regra do Astra (que so'
   mira "[type=number]") E do layout interno especifico de numero do
   Chrome, de uma vez. As declaracoes de "!important"/"appearance" aqui
   continuam como blindagem redundante (nao atrapalham um "type=text"),
   mas quem resolve o problema de verdade agora e' o PHP. */
body.woocommerce-cart td.product-quantity .quantity .laluce-qty-input{
	box-sizing:border-box;
	width:32px;
	height:26px;
	line-height:26px !important;
	padding:0 !important;
	margin:0;
	border:none;
	border-radius:0;
	box-shadow:none;
	text-align:center;
	vertical-align:middle;
	font-family:inherit;
	font-size:.85rem;
	color:var(--petrol);
	-moz-appearance:textfield;
	-webkit-appearance:textfield;
	appearance:textfield;
}
body.woocommerce-cart td.product-quantity .quantity .laluce-qty-input::-webkit-outer-spin-button,
body.woocommerce-cart td.product-quantity .quantity .laluce-qty-input::-webkit-inner-spin-button{
	-webkit-appearance:none;
	margin:0;
}

/* Caixas "Frete e Envio" + "Total no carrinho" (woocommerce/cart/cart-
   totals.php, override) - mesmos conceitos de design da tabela de produtos
   acima (radius 5px, borda marrom). O wrapper externo ".cart_totals" foi
   MANTIDO pelo override (ver comentario grande no topo daquele arquivo -
   e' o elemento que o AJAX do carrinho substitui inteiro a cada
   atualizacao), so' neutralizado visualmente aqui (sem borda/padding
   propria); quem VIRA as 2 caixas de verdade sao as 2 divs internas. Cada
   uma reconstroi o mesmo efeito "cabecalho com fundo" que o Astra dava
   nativamente a ".cart_totals>h2" (nao dava pra reaproveitar aquela regra
   aqui - os h2 agora sao filhos das divs internas, nao mais filho direto de
   ".cart_totals"), com "overflow:hidden" (mesmo motivo do GOTCHA da tabela
   de produtos acima - sem isso, o fundo do cabecalho vazaria por cima do
   canto arredondado) e um tom de fundo levemente amarronzado (8% de
   "--brown" sobre branco) em vez do cinza generico do tema, pra reforcar a
   moldura como uma coisa so'. Tabela interna de cada caixa mantida SEM
   moldura propria (so' os divisores internos em marrom suave), pra nao
   virar caixa-dentro-de-caixa. */
/* Espaco entre a tabela de produtos e a caixa "Frete e Envio", e entre
   "Frete e Envio" e "Total da Compra" (a pedido do Ronaldo) - mesmo valor
   nos 2 lugares. Reduzido na 7a rodada (2026-08-06, "reduza a distancia
   entre as tabelas") de 1.5em (24px) pra .75em (12px); o espaco entre
   "Total da Compra" e os botoes finais e' tratado A PARTE, ver
   ".laluce-order-summary-box{margin-bottom:10px}" mais abaixo - pedido
   EXPLICITO por um valor proprio e' so' pra aquele ultimo gap. */
body.woocommerce-cart .cart-collaterals{
	margin-top:.75em;
}

/* GOTCHA (2026-08-06, "alinhe a tabela Frete e Envio a esquerda e faca ela
   ter a mesma largura da tabela de itens"): o WooCommerce nativo poe
   ".cart_totals{float:right;width:48%}" (woocommerce-layout.css/Astra,
   MESMO valor duplicado nos 2) - e' o que empurrava as caixas pra direita,
   estreitas, numa "barra lateral". Como a pagina do carrinho nao tem
   sidebar de widgets (".ast-no-sidebar" no body), a tabela de produtos
   acima ja ocupa 100% dessa MESMA coluna de conteudo - zerar o float/width
   aqui faz as 2 caixas baterem a largura da tabela automaticamente, sem
   precisar calcular nada (mesma coluna, mesmo container-pai). */
body.woocommerce-cart .cart-collaterals .cart_totals{
	padding:0;
	border:none;
	border-radius:0;
	float:none;
	width:100%;
}
/* "background-color:#fff" (2026-08-07, mesma correcao/motivo do wrapper da
   tabela de produtos acima - ver comentario la'): nenhuma das 2 caixas
   tinha fundo proprio, so' "parecia" branco por a pagina toda ser branca
   antes da correcao do "--bg-site". Na caixa "Frete e Envio" fica so' a
   BASE (o "<h2>" por cima ja tem seu proprio fundo "--bg-grid", ver
   regra mais abaixo); na "Total da Compra", no caso comum (sem cupom/
   taxa), o "<h2>" ocupa a caixa INTEIRA (sem margem/borda, ver correcao
   da 8a/9a rodada mais abaixo) - entao esse branco fica 100% encoberto,
   e a caixa aparece toda no tom "--bg-grid" do cabecalho, batendo com o
   mockup. */
body.woocommerce-cart .cart-collaterals .laluce-shipping-box,
body.woocommerce-cart .cart-collaterals .laluce-order-summary-box{
	background-color:#fff;
	padding:0 20px;
	border:1px solid var(--border-light);
	border-radius:5px;
	overflow:hidden;
}
body.woocommerce-cart .cart-collaterals .laluce-shipping-box{
	margin-bottom:.75em;
}
/* "Total da Compra" -> botoes finais: fonte UNICA do espaco (so' esta
   margem - ver logo abaixo, ".wc-proceed-to-checkout{padding-top:0}" zera a
   outra fonte que existia, o padding nativo do WooCommerce), pra o valor
   pedido ficar exato e facil de conferir. 7a rodada: 6px ("reduza a
   distancia dos botoes... para 6px da borda inferior"). 8a rodada (mesmo
   pedido, "aumente para 10px"): 10px. */
body.woocommerce-cart .cart-collaterals .laluce-order-summary-box{
	margin-bottom:10px;
}
/* Titulo de cada caixa ("Frete e Envio"/"Total da Compra") reduzido pra
   "algo como um H3" (4a rodada, 2026-08-06, a pedido do Ronaldo) - o "<h2>"
   nativo (semantica de titulo de secao mantida) vinha sem "font-size"
   proprio, entao caia no padrao do navegador pra H2 (~1.5em, bem maior que
   os subtitulos "Dados da entrega"/"Opções de envio" logo abaixo dele,
   ".9rem" - ver mais abaixo). 1.05rem fica visualmente entre os dois - ainda maior
   que os subtitulos internos (mantem a hierarquia: caixa > subtitulo), mas
   proximo da escala tipica de um H3. */
body.woocommerce-cart .cart-collaterals .laluce-shipping-box>h2,
body.woocommerce-cart .cart-collaterals .laluce-order-summary-box>h2{
	margin:0 -20px 20px;
	padding:.7em 20px;
	background-color:var(--bg-grid);
	border-bottom:1px solid var(--border-light);
	font-size:1.05rem;
	font-weight:700;
}
/* Valor DENTRO do cabecalho das 2 caixas (6a rodada, "Total da Compra": "deve
   ter apenas o cabecalho... traga o valor total pra dentro da celula do
   cabecalho, alinhado a direita, em negrito" - ver woocommerce/cart/cart-
   totals.php, a antiga linha "order-total" da tabela foi removida, o valor
   entrou aqui; 7a rodada, "Frete e Envio": mesmo tratamento, "passe so' o
   valor do frete pro cabecalho... descarte" a antiga linha "Subtotal" -
   ver woocommerce/cart/cart-totals.php + cart-shipping.php). "<h2>" virou um
   flex container com 2 filhos (titulo + valor) - "justify-content:space-
   between" ja' empurra o valor pro lado direito sozinho, sem precisar de
   "margin-left:auto" nem nada a mais. Negrito ja' vem de graca (o "<h2>"
   inteiro ja' e' "font-weight:700" na regra acima, os 2 "<span>" filhos
   herdam), citado aqui de novo so' por clareza/robustez. */
body.woocommerce-cart .cart-collaterals .laluce-shipping-box>h2,
body.woocommerce-cart .cart-collaterals .laluce-order-summary-box>h2{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:12px;
}
body.woocommerce-cart .laluce-shipping-box-total,
body.woocommerce-cart .laluce-order-summary-total{
	font-weight:700;
	white-space:nowrap;
}
/* GOTCHA (2026-08-06, 7a/8a rodada, "ainda ficou essa linha em branco" - box
   laranja no print do Ronaldo, 7a; "a borda ficou" - box roxo, 8a): o
   "margin-bottom:20px" do "<h2>" (regra acima) existe pra abrir espaco ANTES
   da tabela que normalmente vem depois dele dentro da caixa - mas a caixa
   "Total da Compra" so' RENDERIZA essa tabela quando ha' cupom/taxa aplicado
   ("$laluce_has_summary_rows", ver cart-totals.php); no caso comum (nenhum
   dos dois), nao sobra NADA depois do "<h2>" pra preencher aquele espaco
   reservado. A 1a correcao (7a rodada) zerou so' a margem, mas o "<h2>"
   TAMBEM tem "border-bottom:1px solid var(--brown)" (regra acima, pensada
   pra separar o cabecalho da tabela) - sem tabela nenhuma depois, essa borda
   sobra colada bem em cima da borda INFERIOR da propria caixa (";overflow:
   hidden" mais a distancia zerada), as 2 linhas quase coincidindo - dava a
   impressao de "sobrou uma borda fantasma da linha removida" (relatado pelo
   Ronaldo). Zerados aqui os DOIS (margem E borda) SO' pra esta caixa (a
   "Frete e Envio" continua com os 20px + borda do "<h2>" - a tabela dela
   SEMPRE existe, tem a linha "Dados da entrega"/"Opções de envio"); o espaco
   E a linha divisoria antes da tabela de cupom/taxa, quando ela existir de
   verdade, passam a vir da propria tabela (regras abaixo, "margin-top"/
   "border-top"), nao mais do "<h2>". */
body.woocommerce-cart .cart-collaterals .laluce-order-summary-box>h2{
	margin-bottom:0;
	border-bottom:none;
}
body.woocommerce-cart .cart-collaterals .laluce-shipping-box table,
body.woocommerce-cart .cart-collaterals .laluce-order-summary-box table{
	border:none;
	border-radius:0;
	border-collapse:separate;
	margin:0 0 6px;
	padding:0;
	width:100%;
}
/* Espaco E linha divisoria antes da tabela de cupom/taxa da caixa "Total da
   Compra", quando ela existir de verdade (a regra do "<h2>" acima zerou os 2
   que cuidavam disso antes) - so' nesta caixa, ficam DEPOIS da regra
   generica acima (mesma especificidade, o que vem depois no arquivo vence o
   empate) pra conseguir sobrescrever so' essas 2 propriedades sem repetir as
   outras. */
body.woocommerce-cart .cart-collaterals .laluce-order-summary-box table{
	margin-top:20px;
	border-top:1px solid var(--border-light);
}
body.woocommerce-cart .cart-collaterals .laluce-shipping-box table tr:first-child th,
body.woocommerce-cart .cart-collaterals .laluce-order-summary-box table tr:first-child th{
	border-top:0;
}
body.woocommerce-cart .cart-collaterals .laluce-shipping-box table th,
body.woocommerce-cart .cart-collaterals .laluce-order-summary-box table th{
	width:40%;
	vertical-align:top;
	border-left:0;
	border-right:0;
	line-height:1.5em;
}
body.woocommerce-cart .cart-collaterals .laluce-shipping-box table td,
body.woocommerce-cart .cart-collaterals .laluce-shipping-box table th,
body.woocommerce-cart .cart-collaterals .laluce-order-summary-box table td,
body.woocommerce-cart .cart-collaterals .laluce-order-summary-box table th{
	border-top-color:var(--border-light);
}

/* Linha de frete dividida em 2 colunas (woocommerce/cart/cart-shipping.php,
   override) - "Endereco" (CEP/endereco resolvido + calculadora) e "Opcoes de
   Envio" (lista de metodos), a pedido do Ronaldo. Sem "<th>" nessa linha
   (trocado por subtitulos "<h3>" dentro de cada "<td>"), entao a regra
   "table th{width:40%}" acima nao se aplica mais aqui - a largura das 2
   colunas vem daqui, 50/50. */
/* Padding superior reduzido (5a/6a rodada, 2026-08-06, "reduza o espaco
   entre a linha... e a borda superior da celula", usando o titulo "Frete e
   Envio" como referencia de distancia). 1a tentativa: 12px (referencia
   direta do padding do h2, ".7em"~11.8px). 2a tentativa: 6px - metade do
   valor anterior. 3a tentativa (7a rodada, mesmo pedido de novo, "reduza
   mais ainda"): 4px - o h2 continua sendo so' um PONTO DE PARTIDA, nao um
   teto. */
body.woocommerce-cart .laluce-shipping-box td.laluce-shipping-address-col,
body.woocommerce-cart .laluce-shipping-box td.laluce-shipping-options-col{
	width:50%;
	vertical-align:top;
	padding:4px 16px 14px;
	border-top:0;
}
/* GOTCHA (2026-08-06, 7a rodada, "alinhe o conteudo da coluna esquerda com o
   conteudo da tabela de itens e com o titulo Total da Compra" - box roxo no
   print do Ronaldo): a coluna herdava 16px de "padding-left" PROPRIO em CIMA
   dos 20px que a caixa "Frete e Envio" (".laluce-shipping-box{padding:0
   20px}") ja da' a qualquer filho direto - 36px ao todo, bem mais recuado
   que o titulo "Frete e Envio"/"Total da Compra" (que fica exatamente nos
   20px da caixa: o "<h2>" cancela o padding da caixa com margem negativa e
   reaplica so' 20px, ver regra do "<h2>" mais acima). Zerado aqui SO' o
   "padding-left" desta coluna (mantendo o padding das outras 3 bordas) - o
   conteudo passa a comecar exatamente nos mesmos 20px da caixa, alinhado
   com os titulos. A coluna "Opcoes de envio" nao foi tocada (nao foi pedido,
   e' a coluna da DIREITA, sem nenhuma referencia de alinhamento a esquerda
   em jogo). */
body.woocommerce-cart .laluce-shipping-box td.laluce-shipping-address-col{
	padding-left:0;
	border-right:1px solid var(--border-light);
}
body.woocommerce-cart .laluce-shipping-box h3{
	margin:0 0 8px;
	font-family:'Lato';
	font-size:.9rem;
	font-weight:700;
	color:var(--petrol);
}
/* Texto "Entrega para: {endereço}" dividido em 2 linhas (5a rodada, a
   pedido do Ronaldo) - rotulo "Entrega para:" no MESMO estilo do rotulo
   "CEP:" ao lado (".form-row label" nativo do Astra: negrito, .9rem, ver
   woocommerce.min.css - replicado aqui explicitamente porque esta "<p>" nao
   e' um ".form-row", a regra nativa nao alcanca ela sozinha), endereço
   embaixo em texto normal. Ver woocommerce/cart/cart-shipping.php pro
   HTML/logica de montagem do endereço (campos crus de "$package
   ['destination']" + bairro da sessao, nao mais "get_formatted_address()"). */
body.woocommerce-cart .laluce-shipping-destination{
	margin:0 0 14px;
}
body.woocommerce-cart .laluce-shipping-destination-label{
	display:block;
	font-weight:700;
	font-size:.9rem;
	line-height:1.4;
	color:var(--petrol);
}
body.woocommerce-cart .laluce-shipping-destination-address{
	display:block;
	font-size:.9rem;
	line-height:1.4;
	color:var(--petrol);
}
body.woocommerce-cart .laluce-shipping-options-empty{
	margin:0;
	font-size:.85rem;
	color:rgba(0,59,70,.6);
}
/* Empilha as 2 colunas no mobile (largura insuficiente pra 2 colunas lado a
   lado sem espremer o formulario de CEP nem a lista de opcoes).
   PONTO DE CORTE trocado de 600px pra 921px em 2026-08-11, igualando ao do
   redesenho dos itens em card (mais abaixo).

   A 1a tentativa foi 719px, pra' bater com o mockup ("isMobile:
   window.innerWidth < 720"), PARTINDO DE UMA PREMISSA ERRADA: a de que ate'
   la' a caixa continuava em 2 colunas de verdade. Nao continua. O Astra
   desmonta QUALQUER "shop_table_responsive" ja' em 921px
   ("woocommerce-smallscreen-grid.min.css": "td{display:block}"), e esta caixa
   e' uma dessas tabelas. Resultado visto ao vivo a 800px: as 2 celulas ja'
   empilhavam sozinhas, mas sem estas regras a divisoria continuava sendo o
   "border-right" da coluna da esquerda - sobrava um risco vertical no meio e
   uma coluna direita vazia do lado do conteudo empilhado. Com 921px a
   divisoria vira "border-bottom" no mesmo ponto em que o empilhamento
   comeca. */
@media (max-width:921px){
	body.woocommerce-cart .laluce-shipping-box td.laluce-shipping-address-col,
	body.woocommerce-cart .laluce-shipping-box td.laluce-shipping-options-col{
		display:block;
		width:100%;
	}
	body.woocommerce-cart .laluce-shipping-box td.laluce-shipping-address-col{
		border-right:0;
		border-bottom:1px solid var(--border-light);
	}
}

/* Campo de CEP sempre visivel dentro de "Frete e Envio", sem precisar clicar
   em "Calcular entrega" primeiro - o proprio motivo de existir essa caixa e'
   deixar o CEP a mostra logo de cara. O nativo esconde o formulario via
   "style=\"display:none\"" INLINE (gerado pelo template a cada carregamento,
   inclusive apos o AJAX de atualizacao do carrinho) - "!important" e'
   necessario aqui pra vencer o inline, unica forma sem duplicar o template
   so' pra tirar esse atributo. */
body.woocommerce-cart .laluce-shipping-box .shipping-calculator-button{
	display:none;
}
body.woocommerce-cart .laluce-shipping-box .shipping-calculator-form{
	display:block !important;
}

/* Campo de CEP + botao "Atualizar CEP" lado a lado (4a rodada, 2026-08-06, a
   pedido do Ronaldo - ver woocommerce/cart/shipping-calculator.php,
   override: o botao de submeter saiu do paragrafo solto no fim do
   formulario e entrou aqui, ao lado do input). Largura do campo: a 1a
   tentativa (90px) cortava o conteudo ("o campo ficou muito estreito",
   feedback do Ronaldo) - 130px cobre com folga o formato "00000-000" (9
   caracteres) com "box-sizing:border-box" (padding entra DENTRO da
   largura, nao soma por cima). Seletor por ID (junto da classe do body)
   pra vencer o "width:100%" nativo do ".input-text" sem precisar de
   "!important".
   Altura do campo E do botao IGUALADAS explicitamente (2a correcao, mesmo
   pedido): so' "align-items:stretch" no container flex nao bastava - a
   ALTURA da caixa ate' igualava, mas o texto do botao nao ficava
   centralizado dentro dela (o botao e' um elemento normal, "display:flex"
   nele funciona pra centralizar o proprio texto; ja o campo de CEP e' um
   "<input>", elemento SUBSTITUIDO cujo texto interno NAO responde a
   "align-items" do proprio elemento - so' "height" explicita garante o
   mesmo tamanho de caixa, o texto do input e' centralizado pelo proprio
   navegador dentro dela). */
body.woocommerce-cart .laluce-shipping-box .laluce-postcode-update{
	display:flex;
	align-items:stretch;
	gap:8px;
}
body.woocommerce-cart .laluce-shipping-box #calc_shipping_postcode{
	box-sizing:border-box;
	width:130px;
	height:40px;
	padding:0 10px;
	border-radius:5px;
	flex:0 0 auto;
}
body.woocommerce-cart .laluce-shipping-box .laluce-postcode-submit{
	box-sizing:border-box;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:40px;
	margin:0;
	padding:0 14px;
	flex:0 0 auto;
	white-space:nowrap;
}

/* Botoes de acao no fim da caixa "Total da Compra" (4a rodada, 2026-08-06, a
   pedido do Ronaldo: label do botao de finalizar trocado pra "Ir para o
   Pagamento" + novo botao "Continuar Comprando" ao lado, link pra Shop - ver
   woocommerce/cart/proceed-to-checkout-button.php, override). "Continuar
   Comprando" e' uma classe PROPRIA (nao usa ".button" nativo) de proposito -
   mesma tecnica ja usada em ".laluce-filter-toggle" (vitrine) pra fugir do
   CSS dinamico de cor de botao do Astra (aplicado com alta especificidade/
   "!important" em cima de ".button"), que brigaria com o visual OUTLINE
   (fundo transparente) que se quer aqui - o botao "Ir para o Pagamento"
   continua ".button.alt" nativo (visual solido/principal, sem mudanca).
   "padding-top:0" (7a/8a rodada, "reduza/aumente a distancia dos botoes...
   para 6px/10px da borda inferior" - ver ".laluce-order-summary-box{margin-
   bottom:10px}" mais acima): o WooCommerce nativo da' "padding:1em 0" a este
   wrapper (woocommerce.scss, ".woocommerce-cart .wc-proceed-to-checkout") -
   essa metade de CIMA do padding somava com a margem da caixa acima,
   empurrando os botoes bem mais que o valor pedido; zerada aqui, sobrando
   so' a margem da caixa como fonte do espaco (exata, facil de ajustar so'
   num lugar quando o valor pedido mudar de novo). A metade de BAIXO do
   padding (1em) foi mantida (nao foi pedido mexer no espaco depois dos
   botoes). */
body.woocommerce-cart .wc-proceed-to-checkout{
	padding-top:0;
}
body.woocommerce-cart .wc-proceed-to-checkout .laluce-cart-actions{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	flex-wrap:wrap;
	gap:12px;
}
body.woocommerce-cart .wc-proceed-to-checkout .laluce-continue-shopping{
	box-sizing:border-box;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:44px;
	padding:0 1.5em;
	border:1.5px solid var(--petrol);
	border-radius:5px;
	background:transparent;
	color:var(--petrol);
	font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	font-weight:600;
	font-size:1em;
	line-height:normal;
	text-decoration:none;
	text-align:center;
}
body.woocommerce-cart .wc-proceed-to-checkout .laluce-continue-shopping:hover{
	background:var(--petrol);
	color:var(--cream);
}
/* "Ir para o Pagamento" recebe cor PROPRIA (2026-08-07, mockup aprovado):
   antes herdava a cor da paleta global do Astra (--ast-global-color-0/1,
   petroleo/petroleo-claro, ver design.md - "Paginas nativas do
   WooCommerce", 2026-07-29), igual a QUALQUER botao nativo do site
   (cupom, atualizar carrinho, acessar conta etc.). O mockup usa laranja
   (--orange) so' neste botao especifico - o CTA principal da pagina -
   coerente com o papel do laranja na paleta canonica ("Destaque/CTA: usar
   com parcimonia", ver design.md); os botoes utilitarios (cupom/
   atualizar carrinho) continuam no petroleo herdado da paleta global,
   sem mudanca. "!important" necessario pra vencer a cor que a paleta
   global do Astra ja aplica com a mesma especificidade. */
body.woocommerce-cart .wc-proceed-to-checkout .laluce-cart-actions .checkout-button{
	background-color:var(--orange) !important;
	border-color:var(--orange) !important;
	color:var(--petrol) !important;
}
body.woocommerce-cart .wc-proceed-to-checkout .laluce-cart-actions .checkout-button:hover{
	filter:brightness(1.05);
}
/* GOTCHA (2026-08-06, 5a rodada, "os 2 botoes ainda estao com alturas
   diferentes"): os 2 ja usavam "display:inline-flex;align-items:center"
   pra centralizar o PROPRIO texto (sao "<a>", nao "<input>" - flex
   funciona neles, ao contrario do gotcha do campo de CEP/seletor de
   quantidade), mas so' "Continuar Comprando" tinha ALTURA explicita
   (44px) - "Ir para o Pagamento" continuava com o padding nativo do
   ".button.alt" do Astra (em "em", tipicamente MAIOR que 44px), entao a
   altura de cada um vinha de uma fonte diferente. Corrigido dando a MESMA
   altura explicita (44px, a que "Continuar Comprando" ja tinha) ao
   "Ir para o Pagamento" tambem, sem tirar as classes nativas dele
   (".button.alt" continua garantindo a cor/visual solido de botao
   principal - so' a altura foi igualada). */
body.woocommerce-cart .wc-proceed-to-checkout .laluce-cart-actions .checkout-button{
	box-sizing:border-box;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:44px;
	padding:0 1.5em;
	margin:0;
	line-height:normal;
}

/* Botoes "Aplicar cupom" e "Atualizar carrinho" (linha de acoes no fim da
   tabela de produtos) com a MESMA altura (4a rodada, 2026-08-06, a pedido
   do Ronaldo). Os 2 ja usam a mesma classe nativa ".button" e a mesma regra
   do Astra (".actions .button{padding:.5em 1em;line-height:1.5}") deveria
   deixar os 2 iguais, mas o "Aplicar cupom" mora DENTRO de
   ".coupon{display:flex;align-items:center}" (que estica/alinha ele contra
   o campo de texto do cupom do lado) enquanto o "Atualizar carrinho" e' um
   elemento solto, fora de qualquer flex container, sem nada equivalente -
   qualquer diferenca de renderizacao entre os dois contextos vira diferenca
   de altura visivel. Corrigido citando altura/padding/box-sizing explicitos
   nos 2 (mesmo seletor, ".actions .button", cobre os 2 de uma vez), em vez
   de depender do contexto flex de cada um pra ficarem iguais. */
body.woocommerce-cart .woocommerce-cart-form .actions .button{
	box-sizing:border-box;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:40px;
	margin:0;
	padding:0 16px;
	line-height:normal;
}

/* Largura do campo de cupom limitada (2026-08-07, mockup aprovado) - antes
   esticava livre (herdava "width:100%" nativo do ".input-text" dentro do
   flex ".coupon"), mais largo do que o texto "Coupon code" precisa. Mesma
   tecnica de seletor por ID + classe do body ja usada em
   "#calc_shipping_postcode" pra vencer o nativo sem "!important".
   Radius 5px (padrao do site) + MESMA altura do botao "Aplicar cupom"
   (2026-09-03, a pedido do Ronaldo): o botao ja tem "height:40px" explicito
   (".actions .button" acima) - "box-sizing:border-box" garante que o
   padding do campo entre DENTRO desses 40px em vez de somar por cima, a
   mesma tecnica ja usada no "#calc_shipping_postcode". Regra unica (sem
   media query) porque vale IGUAL no mobile: nao ha' segunda declaracao de
   altura/radius para "#coupon_code" na secao "@media (max-width:921px)"
   mais abaixo, entao esta base ja cobre os 2 tamanhos de tela.
   GOTCHA REAL (2026-09-03, achado lendo o CSS do Astra depois do Ronaldo
   reportar "nao ficou da mesma altura" mesmo com "height:40px" aqui): o
   Astra tem, em "woocommerce-grid.min.css", a regra
   ".woocommerce-js #content table.cart [name=coupon_code]{max-height:35px}"
   - seletor por ATRIBUTO (nao por ID), especificidade EMPATADA com a nossa
   (1 id + 3 classes-equivalentes + 1 elemento dos 2 lados: "#content" conta
   como o ID de ambas), carregada ANTES do nosso arquivo. Empate de
   especificidade e' resolvido por ORDEM (o Astra perderia, ja que carrega
   primeiro) MAS "max-height" e' uma propriedade DIFERENTE de "height" - a
   nossa regra nunca declarava "max-height", entao nao havia disputa
   nenhuma: o teto de 35px do Astra valia sozinho e cravava o campo em
   35px mesmo com "height:40px" dito aqui. Corrigido citando "max-height"
   explicitamente (mesma logica do gotcha do "height" documentado acima em
   "body.woocommerce-checkout input[type='text']"). */
body.woocommerce-cart .woocommerce-cart-form .coupon #coupon_code{
	max-width:220px;
	box-sizing:border-box;
	height:40px;
	max-height:none;
	padding:0 10px;
	border-radius:5px;
}

/* "Atualizar carrinho" (2026-08-07, decisao do Ronaldo): o mockup aprovado
   so' mostra "Aplicar cupom" nesta linha - o carrinho ja atualiza sozinho
   via AJAX quando a quantidade muda ("wc_update_cart", ver inc/cart.php).
   Optou-se por MANTER o botao (fallback pra quando o JS falha/esta
   desligado - sem ele, mudar quantidade sem JS nao teria como ser
   enviado ao servidor), mas discreto - vira um LINK de texto (sem fundo/
   borda propria), reaproveitando o padrao ja estabelecido de link do site
   (design.md: base petroleo-claro, hover marrom) em vez do visual de
   botao solido que tinha antes. Ainda e' o MESMO elemento "<button
   type=submit>" nativo do WooCommerce - so' a aparencia mudou, a funcao
   de submeter o formulario continua identica.
   GOTCHA REAL (2026-08-07, achado pelo Ronaldo ao vivo - "a linha acima
   ficou cortada, indo so ate a metade da largura da tabela"): a 1a versao
   deste layout usava "display:flex" DIRETO no "<td class=\"actions\">" pra
   por cupom e link lado a lado. Um "<td>" tem "display:table-cell"
   IMPLICITO - sobrescrever com "display:flex" tira a celula do algoritmo
   de layout de TABELA (vira uma caixa block-level com flex por dentro,
   fora do calculo normal de largura de coluna que o "<tr>"/"<table>"
   fazem) - o mesmo tipo de armadilha ja documentada acima neste arquivo
   pra "overflow:hidden" em "<table>" (nunca mudar o "display" nativo de
   um elemento de tabela). Resultado: a linha encolhia pra' uma fracao da
   largura real, cortando a borda superior dela pela metade. Corrigido com
   FLOAT (nao muda o "display" da celula) + "overflow:hidden" no PAI como
   clearfix (contem a altura dos filhos flutuantes sem precisar de um
   elemento extra so' pra isso). */
body.woocommerce-cart .woocommerce-cart-form .actions{
	overflow:hidden;
}
body.woocommerce-cart .woocommerce-cart-form .actions .coupon{
	float:left;
	margin:0;
}
body.woocommerce-cart .woocommerce-cart-form .actions .button[name="update_cart"]{
	float:right;
	display:inline-block;
	height:auto;
	line-height:40px;
	margin:0;
	padding:0;
	background:none !important;
	border:none !important;
	box-shadow:none !important;
	color:var(--petrol-light) !important;
	font-weight:400;
	font-size:.85rem;
	text-decoration:underline;
}
body.woocommerce-cart .woocommerce-cart-form .actions .button[name="update_cart"]:hover{
	color:var(--brown) !important;
}

/* -------------------------------------------------------------------------
 * CARRINHO NO MOBILE: cada item vira um CARD empilhado
 * (2026-08-11, a pedido do Ronaldo, com print do mockup como referencia -
 * identidade-visual/claude-design/Carrinho-Checkout.html, ramo "isMobile".)
 *
 * PEDIDO EXPLICITO: mexer SO' no mobile. Por isso tudo aqui esta' dentro da
 * media query - acima do corte, o desktop segue exatamente como estava.
 *
 * O DESENHO: cada item deixa de ser uma linha de tabela e vira um card com
 * 2 faixas - em cima foto + nome + categoria + lixeira ocupando a largura
 * toda; embaixo Preco | Quantidade | Subtotal em 3 colunas iguais, cada uma
 * com o rotulo em maiusculas por cima do valor.
 *
 * DE ONDE VEM O ROTULO: do atributo "data-title" que o WooCommerce ja' poe em
 * cada "<td>" ("Produto", "Preco", "Quantidade", "Subtotal" - ja' traduzidos
 * pelo pt_BR). Nenhum texto novo precisou ser inventado, e nenhum template
 * PHP foi tocado: a tabela do desktop e a dos cards sao o MESMO HTML.
 *
 * PONTO DE CORTE = 921px, e nao os 720px do mockup. O motivo e' concreto: o
 * Astra carrega "woocommerce-smallscreen-grid.min.css" com
 * media="only screen and (max-width:921px)", e esse arquivo JA' desmonta a
 * tabela em toda essa faixa ("tr{display:block}", "td{display:block;
 * text-align:right!important}", "thead{display:none}"). Ou seja, entre 720 e
 * 921px a tabela do desktop nem existe mais - adotar 720px deixaria essa
 * faixa com o empilhamento cru do WooCommerce ("Preco: R$ 65,00" alinhado a'
 * direita, que e' exatamente o estado que o Ronaldo mandou corrigir). Nosso
 * corte acompanha o de quem desmonta a tabela.
 *
 * BRIGA COM O CSS DO ASTRA (por isso os "!important" desta secao, e so' deles
 * - nao ha' "!important" decorativo aqui):
 *   - "td{text-align:right!important}" -> so' "!important" centraliza;
 *   - "td::before{content:attr(data-title) ': '; font-weight:700; float:left}"
 *     -> o rotulo vinha com dois-pontos, em negrito e flutuando a' esquerda
 *     do valor; aqui ele volta pro fluxo, acima do valor, em caixa alta;
 *   - "tbody th{display:none}" -> escondia o rotulo "Subtotal" da linha de
 *     fecho, deixando na tela um ":" solto seguido do valor (visivel no print
 *     do estado anterior). Devolvido mais abaixo.
 * ------------------------------------------------------------------------- */
@media (max-width:921px){
	/* --- O card do item --- */
	body.woocommerce-cart table.shop_table.cart tr.cart_item{
		display:grid;
		grid-template-columns:repeat(3,1fr);
		/* SEM "align-items" (fica no "stretch" padrao), e isso importa: com
		   "end" - que foi a 1a versao - as 3 celulas encostavam pela BASE, e
		   como a do seletor de quantidade e' mais alta que as outras duas, o
		   "border-top" de cada uma comecava numa altura diferente. Em vez de
		   uma linha continua separando as 2 faixas do card, saiam 3 tracinhos
		   em degrau (visivel a 800px, onde a diferenca de altura e' maior).
		   Com "stretch" as 3 tem a mesma altura, as bordas se encontram e os
		   rotulos ficam alinhados entre si. */
		padding:14px 16px;
	}
	/* Faixa de cima: o produto inteiro, atravessando as 3 colunas. */
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name{
		grid-column:1 / -1;
		padding:0 0 10px;
		text-align:left !important;
	}
	/* "Produto:" nao aparece no card - quem identifica o item e' a propria
	   foto com o nome ao lado. */
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-name::before{
		content:none;
	}

	/* Faixa de baixo: as 3 medidas, com o rotulo por cima. A borda de cima
	   em cada uma das 3 celulas forma UMA linha continua separando as
	   faixas (elas sao vizinhas na mesma linha do grid). */
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal{
		padding:8px 4px 0;
		border-top:1px solid var(--border-light);
		text-align:center !important;
		font-size:13px;
		/* "width:auto" e' obrigatorio: a coluna de quantidade tem largura fixa
		   de 80px pro desktop, e item de grid RESPEITA "width" - ela ocupava
		   80px dentro de uma faixa de 242px, entao a borda de cima dela
		   cobria so' um terco da coluna e a linha divisoria do card saia
		   picotada (medido a 800px: 242 / 80 / 242 em 3 faixas de 242). */
		width:auto;
	}
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price::before,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity::before,
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal::before{
		content:attr(data-title);
		display:block;
		float:none;
		margin-bottom:2px;
		font-size:10px;
		font-weight:400;
		text-transform:uppercase;
		letter-spacing:.03em;
		color:#7a7a70;
	}
	/* O seletor de quantidade e' um flex proprio (ver ".laluce-qty-btn"):
	   centralizado na coluna e um pouco menor, como no mockup. */
	body.woocommerce-cart table.shop_table.cart tr.cart_item td.product-quantity .quantity{
		justify-content:center;
	}

	/* --- Linha de fecho "Subtotal" --- */
	/* O "<th>" com o rotulo volta a aparecer (o Astra esconde TODO "tbody th"
	   no small screen). Vira uma linha de 2 lados: rotulo a' esquerda, valor
	   a' direita - mesmo desenho da caixa "Total da Compra" logo abaixo. */
	body.woocommerce-cart table.shop_table.cart tr.laluce-cart-subtotal-row{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:12px;
		padding:12px 16px;
		/* A borda que separa esta linha do ultimo item passa pro "<tr>". No
		   desktop ela mora nas 2 celulas, o que ali forma uma linha continua
		   de ponta a ponta; aqui, com a linha virando flex, as celulas
		   encolhem ate' o conteudo e as 2 bordas viravam dois tracinhos
		   soltos (um sobre o rotulo, outro sobre o valor). */
		border-top:1.5px solid var(--border-light);
	}
	body.woocommerce-cart table.shop_table.cart tr.laluce-cart-subtotal-row th,
	body.woocommerce-cart table.shop_table.cart tr.laluce-cart-subtotal-row td{
		border-top:none;
	}
	body.woocommerce-cart table.shop_table.cart tr.laluce-cart-subtotal-row th{
		display:block;
		padding:0;
		text-align:left !important;
	}
	body.woocommerce-cart table.shop_table.cart tr.laluce-cart-subtotal-row td{
		padding:0;
		text-align:right !important;
	}
	/* Sem isto sobra o ":" solto que aparecia antes do valor: a celula do
	   valor nao tem "data-title", entao o "::before" do Astra imprimia so' a
	   pontuacao. */
	body.woocommerce-cart table.shop_table.cart tr.laluce-cart-subtotal-row td::before{
		content:none;
	}

	/* --- Cupom e "Atualizar carrinho" --- */
	body.woocommerce-cart table.shop_table.cart td.actions{
		padding:14px 16px;
	}
	body.woocommerce-cart table.shop_table.cart td.actions .coupon{
		display:flex;
		gap:8px;
		align-items:center;
	}
	body.woocommerce-cart table.shop_table.cart td.actions .coupon #coupon_code{
		flex:1 1 auto;
		min-width:0;
	}
	body.woocommerce-cart table.shop_table.cart td.actions .coupon .button{
		flex:0 0 auto;
		white-space:nowrap;
	}

	/* --- Caixa "Frete e Envio" ---
	   Ela tambem e' uma tabela, entao cai nas MESMAS regras do Astra. Duas
	   consequencias, as duas visiveis no print do estado anterior:
	   1) o "::before" imprimia "Dados da entrega:" e "Opcoes de envio:" a
	      partir do "data-title" das celulas - textos que JA' existem ali
	      dentro como "<h3>", entao apareciam DUPLICADOS, um de cada lado;
	   2) o "text-align:right!important" jogava CEP, endereco e a lista de
	      opcoes de entrega para a direita. */
	/* GOTCHA DE ESPECIFICIDADE (a 1a versao destas 2 regras nao pegou em
	   nada): o seletor do Astra e' ".woocommerce table.shop_table_responsive
	   tr td::before" - 2 classes e 4 ELEMENTOS (o pseudo-elemento conta como
	   elemento). A minha era "body.woocommerce-cart .laluce-shipping-box
	   td::before": empatava em classes (2) e perdia em elementos (3 contra 4).
	   Empate em classe e' desempatado pela contagem de ELEMENTOS, e nao por
	   quem parece "mais especifico" de olho. Citar "table...tr" no caminho
	   resolve sem "!important" no "content". */
	body.woocommerce-cart .laluce-shipping-box table.shop_table_responsive tr td::before{
		content:none;
	}
	body.woocommerce-cart .laluce-shipping-box table.shop_table_responsive tr td{
		text-align:left !important;
	}
	/* O botao "Atualizar CEP" saia pela direita da propria caixa (medido:
	   271px de largura dentro de um container de 271px, comecando no meio
	   dele). Causa: ele e' "flex:0 0 auto", e nesse caso a base do item vem da
	   propria largura - que estava em 100% por uma regra de botao do tema.
	   100% do container, colocado DEPOIS do campo de CEP, so' podia vazar.
	   Com "width:auto" a base volta a ser o tamanho do texto. */
	body.woocommerce-cart .laluce-shipping-box .laluce-postcode-submit{
		width:auto;
	}

	/* --- Botoes do rodape: largura total e empilhados (mockup:
	   "btnFlex: 1 1 100%"). O alvo e' ".laluce-cart-actions", que e' o flex
	   que de fato embrulha os 2 botoes - ".wc-proceed-to-checkout" tem um
	   filho unico (ele), entao mexer no pai nao chegava nos botoes. --- */
	body.woocommerce-cart .wc-proceed-to-checkout .laluce-cart-actions{
		flex-direction:column;
		align-items:stretch;
		gap:10px;
	}
	body.woocommerce-cart .wc-proceed-to-checkout .laluce-cart-actions > *{
		width:100%;
		justify-content:center;
		text-align:center;
	}
}

/* -------------------------------------------------------------------------
   CARRINHO VAZIO (12a rodada, 2026-08-12, a pedido do Ronaldo, com print de
   referencia do mockup - estado "isCartEmpty" em
   identidade-visual/claude-design/Carrinho-Checkout.html). O HTML e' um
   override novo, woocommerce/cart/cart-empty.php - o nativo nao tinha nem o
   icone nem o subtitulo, e o botao nascia FORA da caixa (ver o cabecalho do
   override pro detalhe).

   Sem "@media": o mockup usa os MESMOS valores nas duas larguras (o estado
   vazio e' o unico bloco dele que nao muda em "isMobile"), e como o card e'
   uma coluna centralizada de conteudo estreito, ele ja se vira sozinho ate'
   os 320px de largura de tela.

   Numeros direto do mockup: card 56px/24px de padding, gap 18px, circulo de
   76px, titulo 18px/700, subtitulo 14px com no maximo 320px de largura, CTA
   12px/28px de padding.
   ------------------------------------------------------------------------- */
body.woocommerce-cart .laluce-cart-empty{
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:18px;
	padding:56px 24px;
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	text-align:center;
}
body.woocommerce-cart .laluce-cart-empty-icone{
	display:flex;
	align-items:center;
	justify-content:center;
	width:76px;
	height:76px;
	border-radius:50%;
	background:var(--bg-grid);
	/* O SVG do override usa "stroke=currentColor", entao a cor do traco sai
	   daqui - marrom da paleta, como no mockup. */
	color:var(--brown);
}
/* Os dois textos sao "<p>", e "<p>" no conteudo da pagina chega com margem
   de sobra do Astra/WordPress. Zeradas: o respiro entre os blocos ja vem do
   "gap:18px" do card, e o unico espaco proprio e' os 6px entre titulo e
   subtitulo. */
body.woocommerce-cart .laluce-cart-empty-titulo{
	margin:0 0 6px;
	font-size:18px;
	font-weight:700;
	line-height:1.3;
	color:var(--petrol);
}
body.woocommerce-cart .laluce-cart-empty-sub{
	max-width:320px;
	margin:0 auto;
	font-size:14px;
	line-height:1.5;
	color:#7a7a70;
}
/* O CTA nao usa ".button" nativo (ver o motivo no override): aqui ele e' um
   "<a>" cru, entao TODO o visual de botao precisa ser declarado - inclusive
   "display", altura via padding e "text-decoration". Em troca, o laranja
   entra sem nenhum "!important" (compare com ".checkout-button" do carrinho
   cheio, que precisou de tres pra vencer a paleta global do Astra). */
body.woocommerce-cart .laluce-cart-empty-cta{
	box-sizing:border-box;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:12px 28px;
	border-radius:5px;
	background:var(--orange);
	color:var(--petrol);
	font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size:14px;
	font-weight:700;
	line-height:normal;
	text-decoration:none;
}
body.woocommerce-cart .laluce-cart-empty-cta:hover,
body.woocommerce-cart .laluce-cart-empty-cta:focus{
	/* Mesmo hover do "Ir para o Pagamento" (carrinho cheio), pra que os dois
	   CTAs laranja do fluxo reajam igual. A cor do texto e' repetida porque
	   o Astra troca a cor de QUALQUER "<a>" no hover. */
	background:var(--orange);
	color:var(--petrol);
	text-decoration:none;
	filter:brightness(1.05);
}

/* =========================================================================
 * Pagina do Checkout (/checkout/)
 * Redesenho a partir do mesmo mockup aprovado do Carrinho (2026-08-07,
 * identidade-visual/claude-design/ - ver memory/pagina-carrinho.md pro
 * historico completo da decisao). Diferente do Carrinho (9 rodadas de
 * OVERRIDES DE TEMPLATE ate' aqui), o Checkout nunca tinha recebido nenhum
 * tratamento - roda 100% nos templates nativos do WooCommerce/Astra/plugins.
 * Por isso, quase tudo aqui e' CSS puro: os campos nativos (billing/shipping)
 * sao reagrupados visualmente via CSS GRID com "grid-template-areas" (que
 * NAO depende da ordem no DOM - cada campo so' precisa receber um
 * "grid-area" pelo proprio "id"), sem precisar duplicar nenhum template do
 * WooCommerce/dos plugins so' pra mudar a ORDEM VISUAL dos campos. A UNICA
 * excecao de PHP e' "inc/checkout.php" (2 hooks so' pra embrulhar o titulo +
 * a caixa de "Seu pedido" numa unica <div>, pra' poder tratar os 2 como um
 * bloco "sticky" so').
 *
 * Decisoes tomadas com o Ronaldo ANTES de implementar (divergencias de
 * COMPORTAMENTO entre o mockup e o checkout real, nao so' visual - ver
 * inc/checkout.php pro detalhe de cada uma):
 * 1) Mockup mostra 4 formas de pagamento; a loja tem uma 5a REAL e ativa
 *    ("Transferencia bancaria"). Decisao: manter as 5, estilizadas iguais.
 * 2) Mockup so' mostra CPF fixo (sem seletor Pessoa Fisica/Juridica); a
 *    config real do plugin brasileiro JA' estava em "Pessoa Fisica apenas"
 *    (confirmado ao vivo antes de mexer em qualquer coisa) - nenhuma config
 *    mudou, so' escondidos os campos "fantasma" que o plugin sempre deixa
 *    no HTML mesmo com PF-apenas configurado.
 *
 * GOTCHA/ACHADO (2026-08-07): o override do Carrinho pro override do frete
 * ("woocommerce/cart/cart-shipping.php", a divisao "Dados da entrega"/
 * "Opções de envio") e' REAPROVEITADO automaticamente pelo Checkout - as 2
 * paginas chamam a MESMA funcao nativa por baixo ("wc_cart_totals_shipping_
 * html()"), entao o HTML do Checkout ja' sai com os MESMOS rotulos/classes
 * em portugues (".laluce-shipping-address-col" etc.) sem eu ter escrito
 * nada de PHP novo pra isso - so' precisei de CSS proprio aqui embaixo
 * (as regras do Carrinho estao todas prefixadas "body.woocommerce-cart",
 * nao alcancam o Checkout). Ver "cart-shipping.php": a coluna "Dados da
 * entrega" so' mostra calculadora de CEP/endereco resolvido quando
 * "is_cart()" e' verdadeiro - no Checkout ela fica so' com o titulo (o
 * endereco ja' esta' sendo preenchido no formulario da mesma pagina, uma
 * calculadora separada seria redundante) - por isso as 2 colunas aqui
 * empilham em vez de ficar lado a lado (diferente do Carrinho): a coluna
 * "Dados da entrega" quase sempre fica "vazia" (so' o titulo) no Checkout,
 * lado a lado ficaria desbalanceado.
 * ========================================================================= */

/* Layout geral: grid de 2 colunas (formulario + resumo), 380px fixos pro
 * resumo - mesma proporcao do mockup ("1fr 380px"). Zera o float/width que o
 * Astra da' nativamente a "#customer_details"/"#order_review(_heading)"
 * (CSS dinamico, min-width:922px) - mesmo principio ja' usado no Carrinho
 * pra' ".cart_totals" (zerar o float nativo e deixar o grid mandar).
 * GOTCHA REAL (2026-08-07, achado pelo Ronaldo ao vivo com print - "a
 * coluna Seu pedido esta quebrada"): a 1a versao deste reset perdia a
 * corrida de ESPECIFICIDADE contra o proprio CSS dinamico do Astra. O
 * seletor do Astra e' ".woocommerce.woocommerce-checkout form #customer_
 * details.col2-set" (3 classes: "woocommerce" E "woocommerce-checkout" -
 * as 2 SEMPRE coexistem no body do WooCommerce - MAIS "col2-set" - do lado
 * do elemento, 1 elemento "form"), enquanto o reset daqui usava so'
 * "body.woocommerce-checkout #customer_details.col2-set" (2 classes: so'
 * "woocommerce-checkout" MAIS "col2-set"). Especificidade e' comparada por
 * CONTAGEM de cada categoria (IDs, depois classes, depois elementos) - com
 * o mesmo numero de IDs (1: "#customer_details" nos 2), quem tem MAIS
 * classes vence, INDEPENDENTE de quantos elementos o outro lado tenha -
 * 3 classes do Astra bateram as 2 daqui, sobrando "width:55%;float:left"
 * de verdade (55% de um espaco JA' encolhido pelo grid = a caixa inteira
 * saindo torta, e arrastando a tabela de "Seu pedido" - table:width:100%
 * dentro dela - junto). "!important" aqui, em vez de tentar igualar a
 * especificidade exata (fragil - quebraria nas prox de novo se o Astra
 * mudar o proprio seletor), garante que este reset SEMPRE vence,
 * independente de como o Astra formatar a regra dele no futuro. */
body.woocommerce-checkout form.checkout.woocommerce-checkout{
	display:grid;
	grid-template-columns:1fr 380px;
	gap:24px;
	align-items:start;
}
body.woocommerce-checkout #customer_details.col2-set,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout #order_review{
	float:none !important;
	width:auto !important;
	margin:0 !important;
	clear:none !important;
}
body.woocommerce-checkout #customer_details.col2-set{
	grid-column:1;
}
body.woocommerce-checkout .laluce-order-review-wrap{
	grid-column:2;
	position:sticky;
	top:20px;
}
body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2{
	float:none;
	width:auto;
}
/* ".col-2" nunca tem conteudo visivel de verdade (o hook "woocommerce_
 * checkout_shipping" nao tem callback padrao no WooCommerce atual - so'
 * carrega um custom element invisivel de rastreamento de pedido,
 * confirmado lendo o HTML real da pagina) - escondido por robustez. */
body.woocommerce-checkout #customer_details .col-2{
	display:none;
}

/* Cartao "Detalhes de cobranca": branco, borda clara, cantos arredondados -
 * mesma linguagem visual das caixas do Carrinho (--border-light, ja'
 * definida no :root pro redesenho do Carrinho). */
body.woocommerce-checkout #customer_details.col2-set{
	background-color:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:24px 28px;
}
/* Cartao "Seu pedido": titulo + caixa uma UNICA moldura visual, apesar de
 * serem 2 elementos separados no DOM ("laluce-order-review-wrap" so'
 * embrulha os 2 pra sticky - ver inc/checkout.php) - borda/fundo/raio
 * distribuidos entre os 2 (topo no titulo, base na caixa, sem borda entre
 * eles) pra parecer uma peca so', mesma tecnica ja' usada no Carrinho pras
 * caixas "Frete e Envio"/"Total da Compra" (titulo + tabela sem costura
 * visivel).
 * GOTCHA REAL (2026-08-07, mesma familia do bug do "<h3>" de "Detalhes de
 * cobranca" acima - achado na MESMA auditoria pixel a pixel): o Astra tem
 * "form #order_review_heading:not(...){border-width:2px 2px 0
 * 2px;padding:1.5em 1.5em 1em}" e "form #order_review:not(...){padding:0
 * 2em;border-width:0 2px 2px}" - os DOIS com seletor por ID
 * ("#order_review_heading"/"#order_review"), que vence classes sozinho
 * (ver explicacao completa na regra do "<h3>" logo abaixo). "padding"/
 * "border" aqui SEM "!important" perdiam nessas 2 propriedades especificas
 * (medido ao vivo: padding real batendo em "22.5px 1.5em 15px" e borda
 * cinza do Astra, 2px, em vez dos 22px/1px daqui).
 * AJUSTE (a pedido do Ronaldo): "padding-bottom" tinha ficado 0 (so' os 3
 * outros lados com 22px) - o divisor (border-bottom do proprio "<h3>", ver
 * regra mais abaixo) colava direto no texto "Seu pedido", sem nenhum
 * respiro, enquanto o espaco DO TOPO do card ate' o texto era 22px cheios -
 * pedido pra' igualar os 2. Padding uniforme nos 4 lados agora. */
body.woocommerce-checkout #order_review_heading{
	background-color:#fff;
	border:1px solid var(--border-light) !important;
	border-bottom:none !important;
	border-radius:5px 5px 0 0;
	margin:0;
	padding:22px !important;
}
body.woocommerce-checkout #order_review{
	background-color:#fff;
	border:1px solid var(--border-light) !important;
	border-top:none !important;
	border-radius:0 0 5px 5px;
	padding:0 22px 22px !important;
}

/* Titulos das 2 caixas ("Detalhes de cobranca"/"Seu pedido") - mesmo
 * tratamento nos 2 (bold, petroleo, linha fina embaixo), como no mockup. O
 * "<h3>" de "Detalhes de cobranca" fica DENTRO da caixa (".woocommerce-
 * billing-fields h3"); o de "Seu pedido" E' a propria caixa-titulo de cima
 * (regra separada, sem o padding-bottom/border por ja' ter o dele proprio
 * na moldura).
 * GOTCHA REAL (2026-08-07, achado auditando pixel a pixel contra o mockup a
 * pedido do Ronaldo - "ainda ha diferencas de distancia que eu nao consigo
 * precisar"): o Astra tem uma regra propria pra' "<h3>" dentro de
 * "#customer_details" - "#customer_details h3:not(...){padding:20px 0
 * 14px;margin:0 0 20px;border-bottom:1px solid var(--ast-border-color)}" -
 * usando um seletor com ID ("#customer_details"). Um ID vence QUALQUER
 * quantidade de CLASSES (especificidade e' comparada por categoria: IDs
 * primeiro, so' depois classes - nao importa ter 2, 5 ou 20 classes, nunca
 * empata/vence um seletor com 1 ID a mais), entao a regra abaixo (so'
 * classes) perdia silenciosamente em 3 propriedades (padding, margin,
 * cor da borda) - medido ao vivo: 20px+14px de padding + 20px de margem
 * (34px + 20px = 54px so' neste titulo) contra os 12px+16px pretendidos -
 * uns 26px de sobra so' aqui. "!important" nas 3 propriedades que colidem
 * com a regra do Astra (nao precisa nas outras, que o Astra nem define
 * pra esse elemento). */
body.woocommerce-checkout .woocommerce-billing-fields h3{
	margin:0 0 16px !important;
	padding:0 0 12px !important;
	border-bottom:1px solid var(--border-light) !important;
	font-size:15px;
	font-weight:700;
	color:var(--petrol);
}
body.woocommerce-checkout #order_review_heading{
	font-size:15px;
	font-weight:700;
	color:var(--petrol);
	border-bottom:1px solid var(--border-light) !important;
}

/* Estilo global de campo (input/select/textarea) - o MESMO em toda a
 * pagina (formulario de cobranca, entrega, observacoes, subformularios de
 * pagamento), reproduzindo a regra unica e global do mockup em vez de
 * repetir por campo.
 *
 * COMPACTACAO (2026-08-10, a pedido do Ronaldo): fonte 14px -> 12px, padding
 * 9px -> 7px e raio 6px -> 5px, o que leva a altura do campo de ~37px pra
 * ~30px. O objetivo declarado dele e' abrir margem pra' compactar mais a tela
 * numa proxima rodada.
 *
 * RESSALVA REGISTRADA (avisada antes de implementar, e ele decidiu seguir
 * assim mesmo, pedindo pra' aplicar TAMBEM no mobile): ~30px fica bem abaixo
 * dos ~44px recomendados pra' alvo de toque em tela pequena, o que tende a
 * aumentar erro de digitacao justamente nos campos de endereco - onde errar
 * custa uma entrega. Combinado: se incomodar no uso real, e' so' pedir pra
 * reverter (basta o padding/fonte voltarem aqui, e no bloco "min-width:922px"
 * nada muda - a compactacao NAO esta' escopada por largura). */
body.woocommerce-checkout input[type="text"],
body.woocommerce-checkout input[type="tel"],
body.woocommerce-checkout input[type="email"],
body.woocommerce-checkout input[type="number"],
body.woocommerce-checkout input[type="password"],
body.woocommerce-checkout select,
body.woocommerce-checkout textarea{
	border:1px solid var(--border-input);
	/* "!important" so' no raio (2026-09-03, achado medindo ao vivo em
	 * producao com Playwright - o Ronaldo reportou que "Observacoes do
	 * pedido" nao saia com o mesmo raio 5px do resto): o Astra tem, em
	 * "woocommerce-grid.min.css", ".woocommerce form .form-row textarea"
	 * E ".woocommerce-page form .form-row textarea" (2 classes + 2
	 * elementos cada = mesma especificidade de classe que a nossa aqui,
	 * "body.woocommerce-checkout" + "textarea" - so' que ELES tem uma
	 * classe A MAIS, ".form-row", entao vencem por especificidade mesmo
	 * com menos elementos). So' afeta "textarea": os outros tipos de
	 * campo desta lista ja' venciam sem "!important" (a variante do Astra
	 * pra eles nao tem ".form-row" no meio). */
	border-radius:5px !important;
	padding:7px 10px;
	font-size:12px;
	/* GOTCHA (medido ao vivo): so' reduzir fonte e padding NAO compactava
	 * nada - o campo continuava em 40px cravados. O Astra escreve, no CSS
	 * dinamico da propria pagina, "input[type=text],...{line-height:24px;
	 * height:40px}". Como a gente nunca declarava "height" nem "line-height",
	 * nao havia disputa nenhuma: os 40px do Astra simplesmente valiam. Note
	 * que a altura era FIXA, entao mexer no padding so' espremia o texto
	 * dentro dela. Sem "!important": o seletor do Astra e' "input[type=text]"
	 * (1 classe-equivalente + 1 elemento) e o nosso tem "body.woocommerce-
	 * checkout" na frente, entao vencemos por especificidade. */
	height:auto;
	line-height:1.4;
	background-color:#fff;
	color:#1c1c1c;
	width:100%;
	box-sizing:border-box;
	box-shadow:none;
}
/* O "height:auto" acima e' o certo pros inputs de 1 linha, mas deixaria a
 * caixa de "Observacoes do pedido" com a altura de um textarea vazio. */
body.woocommerce-checkout textarea{
	min-height:76px;
}
body.woocommerce-checkout input[type="text"]:focus,
body.woocommerce-checkout input[type="tel"]:focus,
body.woocommerce-checkout input[type="email"]:focus,
body.woocommerce-checkout input[type="number"]:focus,
body.woocommerce-checkout select:focus,
body.woocommerce-checkout textarea:focus{
	outline:2px solid var(--petrol-light);
	outline-offset:1px;
}
/* Select2 (usado no seletor de Pais/Estado) troca o "<select>" nativo por
 * um widget proprio - a regra acima nao alcanca ele, precisa da SUA PROPRIA
 * classe pra bater com o mesmo visual. */
body.woocommerce-checkout .select2-container .select2-selection--single{
	height:auto;
	border:1px solid var(--border-input) !important;
	border-radius:5px !important;
	padding:7px 10px;
}
body.woocommerce-checkout .select2-container .select2-selection__rendered{
	padding:0;
	line-height:1.4;
	font-size:12px;
	color:#1c1c1c;
}
body.woocommerce-checkout .select2-container .select2-selection__arrow{
	height:100%;
}
body.woocommerce-checkout .form-row label{
	display:block;
	/* 6px -> 4px na 2a compactacao (2026-08-10) - ver o "row-gap" do wrapper
	 * dos campos, onde a conta da altura da linha esta' registrada. */
	margin:0 0 4px;
	font-size:12px;
	line-height:1.3;
	font-weight:700;
	color:var(--petrol-light);
}
/* GOTCHA (2026-08-07, "o espacamento entre as linhas parece maior que o
 * mockup"): 2 fontes de espaco extra que nao existem no mockup, nenhuma das
 * 2 causada pelo grid (o "gap:14px" do wrapper ja' batia certinho, medido
 * ao vivo). 1) "line-height" do rotulo estava herdando o valor GLOBAL do
 * Astra (~24px, quase o DOBRO da fonte de 12px) por nao ter sido citado
 * aqui - corrigido acima (1.3, relativo ao proprio tamanho da fonte). 2) o
 * WooCommerce nativo da' "padding:3px" a TODO ".form-row" (independente do
 * tema) - o mockup nao usa padding nenhum nas linhas (so' o "gap" entre
 * elas) - zerado aqui. Os 2 juntos inflavam cada linha do formulario em
 * uns 15-16px (medido: 76px por linha antes da correcao). */
body.woocommerce-checkout .form-row{
	margin:0;
	padding:0;
}
/* GOTCHA REAL (2026-08-08, "nada funcionou" - o Ronaldo pediu 2x pra' Nome/
 * Sobrenome ocuparem o espaco todo da linha e as 2 tentativas anteriores
 * mexeram so' no GRID, sem efeito visivel). A causa nunca esteve no grid: o
 * Astra carrega uma copia do layout do WooCommerce ("assets/css/minified/
 * compatibility/woocommerce/woocommerce-layout.min.css") com
 * ".woocommerce form .form-row-first,.woocommerce form .form-row-last
 * {width:47%;overflow:visible}" - e o WooCommerce da' JUSTAMENTE essas 2
 * classes a "Nome" ("form-row-first") e "Sobrenome" ("form-row-last"). Como
 * a celula do grid e' o CONTAINER do campo, esse "width:47%" fazia o campo
 * ocupar so' 47% DA CELULA - o grid sempre esteve certo, o conteudo dele e'
 * que encolhia sozinho (media no print do Ronaldo: celula de 241px com
 * input de 113px = exatamente 47%). Por isso "CPF" (classe "form-row-wide",
 * sem essa regra) parecia o unico campo "grande" da linha. Aqui o width e'
 * devolvido pro grid mandar. Sem "!important": 3 classes daqui vencem as 2
 * do Astra por especificidade (a contagem de classes decide antes da de
 * elementos). "float" tambem zerado - e' ignorado em item de grid, mas fica
 * explicito pra' nao confundir quem ler depois. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper .form-row{
	width:auto;
	float:none;
}
/* Rede de seguranca pro campo "Telefone". Hoje ela nao pega em nada: o
 * widget "intl-tel-input" (que criava o ".iti") foi desligado - ver
 * "BANDEIRINHA/SELETOR DE PAIS DO TELEFONE" mais abaixo. Fica registrada
 * porque o CSS proprio do widget declara ".iti{display:inline-block}", que
 * encolhe ate' o conteudo e faz o campo NAO preencher a celula do grid (foi
 * assim que o telefone da secao de entrega apareceu como uma caixa de ~48px
 * num print). Se um dia o widget for religado, esta regra evita reabrir o
 * mesmo bug. */
body.woocommerce-checkout .form-row .iti{
	display:block;
	width:100%;
}

/* Reagrupamento dos campos de cobranca e de entrega em linhas:
 *   1) Nome | Sobrenome | CPF        (na entrega, Telefone no lugar do CPF)
 *   2) CEP | Endereco | Numero | Complemento
 *   3) Bairro | Cidade | Estado
 *   4) Telefone | E-mail             (so' na cobranca)
 *
 * POR QUE FLEXBOX COM QUEBRA, E NAO CSS GRID (troca feita em 2026-08-08,
 * depois de 4 rodadas de ajuste de largura): num grid, TODAS as linhas
 * dividem o MESMO conjunto de colunas. Cada largura fixa nova (CPF, depois
 * CEP, depois Estado e Numero) obrigava a inventar mais uma fronteira de
 * coluna, e cada fronteira nova tinha que conviver com as das outras linhas -
 * a conta virou um sistema de 9 tracks encadeadas em que uma delas media 4px
 * e ficava NEGATIVA (quebrando o layout inteiro) se o Estado passasse de uma
 * certa largura. Ou seja: mexer numa linha arriscava quebrar outra.
 *
 * Com "flex-wrap", cada linha e' independente: os campos se acomodam sozinhos
 * e "quebram" quando a largura da linha se esgota. A unica conta necessaria
 * e' POR LINHA - as larguras de uma linha somam 100% do container - e nenhuma
 * linha sabe da existencia das outras. Trocar a largura do Estado hoje mexe
 * so' em Bairro/Cidade, e em mais nada.
 *
 * O "order" faz o papel que o "grid-template-areas" fazia: a ORDEM NO DOM
 * continua a nativa do WooCommerce/plugin (que segue as "priority" de cada
 * campo), e so' a posicao VISUAL muda. Como antes, nenhum template PHP e'
 * duplicado so' pra reordenar campo.
 *
 * COMO AS CONTAS FUNCIONAM: campo de conteudo previsivel (CPF, CEP, Numero,
 * Estado) recebe largura FIXA em px; o resto da linha e' dividido entre os
 * campos de conteudo livre. O "- 0.5px" que aparece nas larguras flexiveis e'
 * margem de seguranca contra arredondamento de subpixel: sem ela, uma linha
 * que soma exatamente 100% pode estourar por uma fracao de pixel e jogar o
 * ultimo campo pra' linha seguinte. Sobra 1px por linha, que o "flex-grow:1"
 * devolve aos campos flexiveis.
 *
 * Os "min(px, %)" existem por robustez: perto do corte de 921px (onde a
 * pagina ainda esta' em 2 colunas) o container fica estreito, e larguras
 * fixas grandes demais nao caberiam. O "min()" encolhe os campos fixos junto.
 * Em qualquer largura util valem os px cheios. Larguras em W=666px (a real,
 * medida no print do Ronaldo): 253+253+132 / 110+230+130+154 / 271+271+96 /
 * 326+326. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper{
	/* 3a coluna da 1a linha: CPF na cobranca, Telefone na entrega - o mesmo
	 * valor nas 2, pra' Nome/Sobrenome cairem na mesma posicao e largura nas
	 * duas secoes (consistencia pedida pelo Ronaldo). Cabe a mascara do CPF
	 * ("000.000.000-00", ~115px com padding) e a do telefone ("(00) 00000-
	 * 0000", ~128px). */
	--laluce-doc-w:min(132px, 22%);
	--laluce-cep-w:min(110px, 18%);
	/* "Numero" nao pode encolher ate' o texto: o plugin brasileiro injeta o
	 * "S/N" como um <span> ABSOLUTO sobreposto ao input ("right:12px"), que
	 * come' uns 45px da area util. 130px = "Ex: 123a" + padding + o S/N. */
	--laluce-num-w:min(130px, 21%);
	/* "Estado" agora mostra so' a sigla ("RJ", ver inc/checkout.php), entao
	 * cabe em pouco: ~20px de texto + padding + a seta do seletor. */
	--laluce-uf-w:min(96px, 16%);
	/* Sobra da 2a linha, dividida entre Endereco e Complemento (60/40 - nome
	 * de rua e' mais comprido que "Apto 302"). */
	--laluce-addr-row:calc(100% - var(--laluce-cep-w) - var(--laluce-num-w) - 42px);

	display:flex;
	flex-wrap:wrap;
	/* COLUNA e LINHA com valores DIFERENTES de proposito (2026-08-10, 2a
	 * compactacao pedida pelo Ronaldo: "ainda ficou um espaco entre as linhas
	 * que pode ser reduzido"). Antes era um "gap:14px" unico pros dois eixos.
	 *
	 * So' o vertical encolheu (14px -> 10px). O horizontal TEM QUE CONTINUAR
	 * em 14px: todas as larguras do bloco "min-width:922px" mais abaixo sao
	 * calculadas descontando o gap entre colunas ("- 14px" numa dupla, "- 28px"
	 * numa trinca, "- 42px" numa quadra). Mexer no gap horizontal sem refazer
	 * as 4 contas deixaria cada linha somando menos que o container, e a folga
	 * cairia toda no ultimo campo - por isso a separacao em 2 propriedades, e
	 * nao um "gap" so'.
	 *
	 * Efeito medido: a altura de cada linha (rotulo 15,6 + 6 de respiro +
	 * campo 32 + 14 de gap = 67,6px) cai pra 61,6px, contando tambem o
	 * "margin-bottom" do rotulo, reduzido de 6px pra 4px logo abaixo. */
	column-gap:14px;
	row-gap:10px;
}
/* PADRAO = EMPILHADO (um campo por linha). As larguras de varias colunas
 * ficam num "@media (min-width:922px)" mais abaixo, e nao o contrario.
 *
 * GOTCHA REAL (2026-08-08, print do Ronaldo no celular): a 1a versao fazia o
 * inverso - larguras de desktop como padrao e um "@media (max-width:921px)"
 * pra' empilhar - e o empilhamento NUNCA funcionou. Motivo: as regras de
 * largura miram cada campo pelo ID ("#billing_first_name_field", peso 1 ID),
 * enquanto a regra de empilhar mirava por classe (".woocommerce-billing-
 * fields__field-wrapper > .form-row", 3 classes). UM ID VENCE QUALQUER
 * QUANTIDADE DE CLASSES, entao a largura de desktop continuava valendo no
 * celular - o mesmo padrao de bug que ja' apareceu varias vezes neste
 * arquivo com o Astra, agora causado por regra NOSSA. Inverter a media query
 * resolve na raiz em vez de sair distribuindo "!important": abaixo de 922px
 * as regras de largura simplesmente NAO EXISTEM, entao nao ha' disputa.
 *
 * "min-width:0" e' obrigatorio em item de flex: o padrao ("auto") impede o
 * campo de encolher abaixo do tamanho natural do conteudo dele, o que faria
 * uma linha cheia estourar e quebrar no lugar errado. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper > .form-row{
	min-width:0;
	flex:1 1 100%;
}

/* As 2 unicas duplas que continuam lado a lado no celular. Criterio: campos
 * de conteudo curto, que ja' andam juntos em qualquer checkout brasileiro, e
 * que somados ainda cabem numa tela pequena. Note que a base e' um MINIMO
 * (nao "100%") com "flex-grow" - se a tela for estreita demais pra' dupla,
 * o proprio "flex-wrap" desmancha ela e cada campo volta pra' sua linha,
 * sem precisar de mais um ponto de corte.
 *
 * "Numero" tem piso de 115px e nao dos ~80px que "Ex: 123a" sugeriria: o
 * "S/N" e' um <span> ABSOLUTO sobreposto ao input, que come' ~45px.
 * "Estado" usa 96px cravado (e nao a variavel "--laluce-uf-w", que tem um
 * "min(...,16%)" calibrado pro card do desktop): no celular 16% daria uns
 * 40px, estreito demais ate' pra' sigla + seta. */
body.woocommerce-checkout #billing_number_field,
body.woocommerce-checkout #shipping_number_field{
	flex:1 1 115px;
}
body.woocommerce-checkout #billing_address_2_field,
body.woocommerce-checkout #shipping_address_2_field{
	flex:1 1 120px;
}
body.woocommerce-checkout #billing_city_field,
body.woocommerce-checkout #shipping_city_field{
	flex:1 1 130px;
}
body.woocommerce-checkout #billing_state_field,
body.woocommerce-checkout #shipping_state_field{
	flex:0 0 96px;
}

/* --- Ordem visual dos campos. Fica FORA de media query de proposito: e' a
 * mesma sequencia no desktop e no celular, so' a quantidade de campos por
 * linha e' que muda. --- */
body.woocommerce-checkout #billing_first_name_field{ order:1; }
body.woocommerce-checkout #billing_last_name_field{ order:2; }
body.woocommerce-checkout #billing_document_field{ order:3; }
body.woocommerce-checkout #billing_postcode_field{ order:4; }
body.woocommerce-checkout #billing_address_1_field{ order:5; }
body.woocommerce-checkout #billing_number_field{ order:6; }
body.woocommerce-checkout #billing_address_2_field{ order:7; }
body.woocommerce-checkout #billing_neighborhood_field{ order:8; }
body.woocommerce-checkout #billing_city_field{ order:9; }
body.woocommerce-checkout #billing_state_field{ order:10; }
body.woocommerce-checkout #billing_phone_field{ order:11; }
body.woocommerce-checkout #billing_email_field{ order:12; }
/* GOTCHA (2026-08-07, auditoria pixel a pixel): o WooCommerce nativo da'
 * "Complemento" um rotulo "screen-reader-text" (visivel so' pra leitor de
 * tela, ".screen-reader-text{position:absolute!important;...}" do core do
 * WordPress) - o mockup MOSTRA esse rotulo normalmente. So' um ajuste
 * visual (a alternativa acessivel ja' existia, isso so' TAMBEM mostra pra
 * quem enxerga) - reposicionado de volta ao fluxo normal so' pra este
 * campo (nao globalmente, pra nao alterar nenhum outro uso legitimo de
 * "screen-reader-text" no resto do site). */
body.woocommerce-checkout #billing_address_2_field label.screen-reader-text,
body.woocommerce-checkout #shipping_address_2_field label.screen-reader-text{
	position:static !important;
	clip:auto !important;
	clip-path:none !important;
	width:auto !important;
	height:auto !important;
	margin:0 0 4px !important;
	overflow:visible !important;
}
/* Campos "fantasma" (inputs ocultos usados pelo proprio JS do plugin
 * brasileiro pra' guardar Pessoa Fisica/Juridica/CPF/CNPJ) + "Nome da
 * Empresa" (campo real, mas so' aparece se PJ fosse escolhido - decisao
 * tomada com o Ronaldo foi NAO oferecer esse caminho, ver topo do arquivo)
 * + o DDI do telefone (tambem oculto) - escondidos pra nao sobrar espaco
 * vazio no grid. */
body.woocommerce-checkout #billing_persontype_field,
body.woocommerce-checkout #billing_cpf_field,
body.woocommerce-checkout #billing_cnpj_field,
body.woocommerce-checkout #billing_company_field,
body.woocommerce-checkout #billing_phone_country_field,
body.woocommerce-checkout #shipping_phone_country_field{
	display:none;
}

/* PAIS TRAVADO EM BRASIL (2026-08-08, a pedido do Ronaldo - "nunca
 * permitiremos cadastro de outros paises"). A parte que TRAVA nao esta'
 * aqui: e' uma configuracao da loja ("Vender para paises especificos" =
 * apenas BR), aplicada via WP-CLI - "woocommerce_allowed_countries" =
 * "specific" e "woocommerce_specific_allowed_countries" = ["BR"].
 * "woocommerce_ship_to_countries" ficou vazio de proposito, que no
 * WooCommerce significa "entregar nos mesmos paises pra' quem eu vendo" -
 * entao a entrega seguiu junto sozinha (conferido: "get_allowed_countries()"
 * e "get_shipping_countries()" retornam os 2 apenas {"BR":"Brasil"}).
 *
 * POR QUE ESCONDER POR CSS NAO QUEBRA O ENVIO DOS DADOS (duvida levantada
 * pelo Ronaldo, e ele estava certo): quando existe UM SO' pais permitido, o
 * proprio WooCommerce ja' renderiza o campo como um "<select>" travado com
 * uma unica "<option value=\"BR\" selected>" (ver "case 'country'" em
 * "wc-template-functions.php" - o codigo tem um ramo especifico pra' esse
 * caso). Continua sendo um controle de formulario normal, com "name=
 * billing_country" - e um campo escondido por CSS CONTINUA sendo enviado no
 * POST (so' "disabled" deixaria de enviar, e nao e' o caso aqui). Alem
 * disso o "<select>" segue no DOM com a classe "country_to_state", que e'
 * como o JS do WooCommerce descobre quais Estados listar - esconder o
 * INVOLUCRO (".form-row") preserva os 2 comportamentos. Com o pais travado
 * na configuracao, o servidor tambem passa a REJEITAR qualquer outro valor,
 * entao nao da' pra burlar por fora do formulario. */
/* GOTCHA REAL (2026-08-08, "o campo pais continua visivel"): a 1a versao
 * desta regra era "display:none" sem "!important" e NAO funcionava - o campo
 * reaparecia, e ainda por cima no FIM do formulario (sem "grid-area", o CSS
 * Grid auto-posiciona o item numa linha implicita no fim, que foi exatamente
 * o sintoma do print). Causa: "address-i18n.js" do proprio WooCommerce
 * percorre os campos do locale a cada carga/troca de pais e chama
 * "field.show()" do jQuery - e ".show()" escreve ESTILO INLINE
 * ("style=display:block"), que ganha de qualquer regra de folha de estilo
 * sem "!important". Vale so' pros campos do locale (address_1, city, state,
 * postcode, country...); os campos "fantasma" do plugin logo acima nunca
 * entraram nessa lista, por isso aqueles ja' sumiam sem "!important". */
body.woocommerce-checkout #billing_country_field,
body.woocommerce-checkout #shipping_country_field{
	display:none !important;
}

/* BANDEIRINHA/SELETOR DE PAIS DO TELEFONE: nao ha' CSS aqui de proposito.
 *
 * A 1a tentativa foi esconder so' o botao da bandeira
 * (".iti__country-container{display:none}") mantendo o widget
 * "intl-tel-input" ligado, pra' nao perder a mascara que ele traz junto. A
 * bandeira sumiu, mas sobrou um vao de ~44px na frente do campo, e esse vao
 * E' IMPOSSIVEL de remover por CSS: o plugin brasileiro le' o recuo que o
 * widget calculou e o reescreve como ESTILO INLINE COM "!important"
 * ("d.style.setProperty('padding-left', n+'px', 'important')"). Inline
 * "!important" e' o unico caso que vence ate' um "!important" nosso - a
 * cascata nao tem resposta pra isso.
 *
 * Solucao: desligar o widget na propria opcao dele
 * ("woo_better_calc_apply_phone_mask" = "no", ver bin/setup-checkout-
 * brasil.php) em vez de brigar com script de terceiro. Ele e' a ferramenta
 * errada pra' uma loja que so' aceita "+55" de qualquer forma. Sem widget,
 * o telefone volta a ser um "<input type=tel>" comum, que ja' cai no estilo
 * global de campo desta pagina - nenhuma regra especifica necessaria. A
 * formatacao automatica que se perdeu foi reposta em assets/js/checkout.js
 * (mascara nossa). */

/* Checkbox "Entregar em um endereco diferente?" - linha simples, sem caixa
 * propria (como no mockup).
 * GOTCHA REAL (2026-08-07, mesma auditoria pixel a pixel): este elemento
 * TAMBEM e' um "<h3>" (ver checkout/form-shipping.php do WooCommerce -
 * "<h3 id=\"ship-to-different-address\">"), entao cai na MESMA regra do
 * Astra com ID ja documentada acima ("#customer_details h3{padding:20px 0
 * 14px;margin:0 0 20px;border-bottom:...}") - sem "!important" ficava com
 * margem EMBAIXO (20px) em vez de EM CIMA, alem de padding/borda que o
 * mockup nao pede aqui. Valor tambem ajustado de 20px pra 14px - o mockup
 * usa o MESMO ritmo de 14px entre TODOS os blocos desta caixa, sem
 * excecao (nao ha' motivo pra este espaco especifico ser maior). */
body.woocommerce-checkout #ship-to-different-address{
	margin:14px 0 0 !important;
	padding:0 !important;
	border-bottom:none !important;
	font-size:0;
}
body.woocommerce-checkout #ship-to-different-address label{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	font-weight:700;
	color:var(--petrol);
	cursor:pointer;
}
body.woocommerce-checkout #ship-to-different-address input[type="checkbox"]{
	width:auto;
	margin:0;
}
body.woocommerce-checkout .woocommerce-shipping-fields .shipping_address{
	margin-top:16px;
	padding-top:16px;
	border-top:1px solid var(--border-light);
}
/* --- Entrega ("Entregar em um endereco diferente?"): MESMAS larguras e
 * MESMAS posicoes da cobranca, campo a campo (consistencia pedida pelo
 * Ronaldo). As variaveis de largura vem da mesma regra la' de cima, que
 * declara os 2 wrappers juntos - entao os dois formularios nao tem como
 * divergir por descuido.
 *
 * Diferencas inevitaveis, so' porque os campos nao existem aqui: nao ha' CPF
 * (o "billing_document" e' so' de cobranca, confirmado no codigo do plugin),
 * entao a 3a vaga da 1a linha fica com o Telefone da entrega, com a MESMA
 * largura que o CPF tem na cobranca; e nao ha' e-mail de entrega, entao a
 * ultima linha da cobranca (Telefone|E-mail) simplesmente nao existe. */
body.woocommerce-checkout #shipping_first_name_field{ order:1; }
body.woocommerce-checkout #shipping_last_name_field{ order:2; }
body.woocommerce-checkout #shipping_phone_field{ order:3; }
body.woocommerce-checkout #shipping_postcode_field{ order:4; }
body.woocommerce-checkout #shipping_address_1_field{ order:5; }
body.woocommerce-checkout #shipping_number_field{ order:6; }
body.woocommerce-checkout #shipping_address_2_field{ order:7; }
body.woocommerce-checkout #shipping_neighborhood_field{ order:8; }
body.woocommerce-checkout #shipping_city_field{ order:9; }
body.woocommerce-checkout #shipping_state_field{ order:10; }

/* --- Larguras de varias colunas: SO' no desktop. Abaixo de 922px estas
 * regras nao existem, e o padrao (um campo por linha, mais as 2 duplas)
 * assume sozinho - ver o GOTCHA de especificidade la' em cima. As duas
 * secoes sao declaradas juntas, campo a campo, pra' que "Detalhes de
 * cobranca" e "Entregar em um endereco diferente?" nao tenham como
 * divergir. --- */
@media (min-width:922px){
	/* Linha 1: Nome | Sobrenome | CPF (na entrega, Telefone no lugar do CPF) */
	body.woocommerce-checkout #billing_first_name_field,
	body.woocommerce-checkout #billing_last_name_field,
	body.woocommerce-checkout #shipping_first_name_field,
	body.woocommerce-checkout #shipping_last_name_field{
		flex:1 1 calc((100% - var(--laluce-doc-w) - 28px) / 2 - 0.5px);
	}
	body.woocommerce-checkout #billing_document_field,
	body.woocommerce-checkout #shipping_phone_field{
		flex:0 0 var(--laluce-doc-w);
	}

	/* Linha 2: CEP | Endereco | Numero | Complemento */
	body.woocommerce-checkout #billing_postcode_field,
	body.woocommerce-checkout #shipping_postcode_field{
		flex:0 0 var(--laluce-cep-w);
	}
	body.woocommerce-checkout #billing_address_1_field,
	body.woocommerce-checkout #shipping_address_1_field{
		flex:1 1 calc(var(--laluce-addr-row) * 0.6 - 0.5px);
	}
	body.woocommerce-checkout #billing_number_field,
	body.woocommerce-checkout #shipping_number_field{
		flex:0 0 var(--laluce-num-w);
	}
	body.woocommerce-checkout #billing_address_2_field,
	body.woocommerce-checkout #shipping_address_2_field{
		flex:1 1 calc(var(--laluce-addr-row) * 0.4 - 0.5px);
	}

	/* Linha 3: Bairro | Cidade | Estado */
	body.woocommerce-checkout #billing_neighborhood_field,
	body.woocommerce-checkout #billing_city_field,
	body.woocommerce-checkout #shipping_neighborhood_field,
	body.woocommerce-checkout #shipping_city_field{
		flex:1 1 calc((100% - var(--laluce-uf-w) - 28px) / 2 - 0.5px);
	}
	body.woocommerce-checkout #billing_state_field,
	body.woocommerce-checkout #shipping_state_field{
		flex:0 0 var(--laluce-uf-w);
	}

	/* Linha 4 (so' cobranca): Telefone | E-mail */
	body.woocommerce-checkout #billing_phone_field,
	body.woocommerce-checkout #billing_email_field{
		flex:1 1 calc((100% - 14px) / 2 - 0.5px);
	}
}

/* "Observacoes do pedido" - auditado pixel a pixel (2026-08-07): o mockup
 * NAO tem divisor nenhum aqui (nem borda, nem padding extra) - so' o
 * mesmo ritmo de 14px de margem que separa todos os outros blocos da
 * caixa. A borda/padding de 20px de uma versao anterior era um reforco
 * visual proprio, nao pedido pelo mockup - removido pra bater exato. */
body.woocommerce-checkout .woocommerce-additional-fields{
	margin-top:14px;
}

/* Tabela "Seu pedido": cabecalho nativo ("Produto"/"Subtotal") escondido -
 * o mockup lista os itens direto, sem cabecalho de coluna (a caixa ja' tem
 * o titulo "Seu pedido" cumprindo esse papel). Divergencia so' VISUAL
 * (nenhuma informacao e' removida, so' o rotulo de coluna). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table{
	width:100%;
	margin:0 0 8px;
	border:none;
	border-collapse:collapse;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead{
	display:none;
}
/* GOTCHA REAL (2026-08-07, mesma auditoria pixel a pixel): o Astra tem
 * ".woocommerce.woocommerce-checkout table.shop_table td{padding:10px 10px
 * 10px 0}" (3 classes: "woocommerce", "woocommerce-checkout",
 * "shop_table" - esta tabela tem AS DUAS classes, "shop_table" E
 * "woocommerce-checkout-review-order-table") - 3 classes vencem as 2
 * daqui, sobrando o padding/borda do Astra em vez dos declarados abaixo.
 * "!important" no padding e na borda (as 2 propriedades realmente
 * disputadas - fonte/cor nao tem regra concorrente do Astra pra essa
 * tabela). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th{
	padding:8px 0 !important;
	border:none !important;
	border-top:1px solid var(--border-light) !important;
	font-size:13px;
	color:#333;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr:first-child td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tbody tr:first-child th{
	border-top:none !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-total,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart-subtotal td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total td{
	text-align:right;
	white-space:nowrap;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart-subtotal th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart-subtotal td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total td{
	font-weight:700;
}
/* Padding proprio pra "Subtotal"/"Total" (mockup: 10px/14px, diferente dos
 * 8px genericos das linhas de item) - auditado pixel a pixel (2026-08-07). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart-subtotal th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart-subtotal td{
	padding:10px 0 !important;
	color:var(--petrol);
}
/* Fonte de "Subtotal" (rotulo + valor) 2px maior que o resto da caixa, a
 * pedido do Ronaldo (13px -> 15px). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart-subtotal th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart-subtotal td{
	font-size:15px;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total td{
	padding:14px 0 !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total td{
	font-size:18px;
	color:var(--petrol);
}
/* GOTCHA REAL (a pedido do Ronaldo, "os precos continuam sem negrito"):
 * "font-weight:700" nas 3 regras acima (item/".product-total", "Subtotal",
 * "Total") esta' no "<td>"/"<th>", mas o TEXTO visivel do preco fica dentro
 * de "<span class="woocommerce-Price-amount">" (montado por "wc_price()",
 * ver "wc-formatting-functions.php" do WooCommerce) - e o Astra tem
 * ".woocommerce-page table.shop_table .woocommerce-Price-amount{font-
 * weight:400}", que bate DIRETO nesse span. Um "<span>" sem nenhuma regra
 * PROPRIA de "font-weight" herdaria os 700 do "<td>" pai sem problema -
 * mas como o Astra tem uma regra que ACERTA o span diretamente, herdanca
 * perde (regra direta sempre vence heranca, nao importa especificidade).
 * Precisa mirar o span tambem, nao so' a celula. Achado via
 * "element.matches()" em todos os stylesheets carregados, nao adivinhado -
 * mesmo raciocinio ja' usado achando os bugs de ID desta auditoria. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-total .woocommerce-Price-amount,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .cart-subtotal .woocommerce-Price-amount,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount{
	font-weight:700;
}

/* Formatacao de cada item ("Mini Vela x 3   R$ 24,00"), a pedido do
 * Ronaldo apos comparar com o arquivo de handoff (design_handoff_la_luce/
 * Checkout Redesign.dc.html, linhas ~267-271): a regra generica de
 * "td,th{color:#333}" la' em cima nao cobria os 2 elementos que o mockup
 * estiliza DIFERENTE do resto da linha - a quantidade ("<strong
 * class="product-quantity">"), que o WooCommerce deixa preta e em negrito
 * por padrao (heranca do proprio "<strong>"), tinha que ficar cinza e sem
 * negrito (span secundario no mockup); e o subtotal do item
 * (".product-total") nunca tinha entrado na regra que deixa "Subtotal"/
 * "Total" em negrito (essa so' cobria ".cart-subtotal"/".order-total") -
 * cada preco de item ficava no peso normal, quando o mockup pede negrito +
 * cor petroleo em TODOS os precos da caixa, nao so' nos 2 de fechamento. */
/* GOTCHA REAL (a pedido do Ronaldo, "o contador nunca deve quebrar pra uma
 * linha sozinho"): o Astra tem uma regra GLOBAL, so' de classe (sem ID
 * dessa vez) - ".product-name{display:flex;align-items:center;flex-wrap:
 * wrap}" (ver "woocommerce-grid.min.css"/"woocommerce.min.css" do proprio
 * tema pai) - pensada pra' alinhar miniatura+texto lado a lado no carrinho
 * NATIVO do Astra (que tem thumbnail nessa celula). O review-order.php do
 * Checkout NAO tem thumbnail nessa celula, so' texto solto + o "<strong
 * class="product-quantity">" - com "display:flex", esse "<strong>" vira um
 * FLEX ITEM inteiro, nao mais texto inline comum: o navegador decide se ELE
 * INTEIRO cabe do lado do nome ou quebra pra' PROPRIA linha (flex-wrap),
 * differente do reflow natural de texto (que quebraria PALAVRA a palavra,
 * mantendo o "×4" grudado na ultima palavra que coubesse). Resultado visto
 * ao vivo: nome longo ocupava 2 linhas e o "×4" sobrava sozinho numa 3a,
 * mesmo com espaco de sobra na 2a.
 * 1a tentativa (so' "display:table-cell", sem "!important") NAO resolveu de
 * verdade - o Ronaldo confirmou ao vivo que continuava quebrando. Causa:
 * tem uma SEGUNDA regra do Astra, essa com ID (mesmo padrao ja' documentado
 * varias vezes nesta auditoria) - ".woocommerce.woocommerce-checkout form
 * #order_review td.product-name{display:flex}" - o ID "#order_review" vence
 * QUALQUER quantidade de classes, entao a 1a correcao (so' classes, mesmo
 * com "table" + "td" a mais no seletor) nunca tinha chance. "!important"
 * agora, confirmado via "element.matches()" que era essa a regra
 * concorrente antes de escrever a correcao (nao adivinhado). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name{
	display:table-cell !important;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-name .product-quantity{
	font-weight:400;
	color:#9a9a8f;
	white-space:nowrap;
}
body.woocommerce-checkout table.woocommerce-checkout-review-order-table .product-total{
	font-weight:700;
	color:var(--petrol);
}

/* Linha de frete reaproveitada do Carrinho (ver GOTCHA no topo da secao) -
 * empilhada (nao lado a lado como no Carrinho: a coluna "Dados da entrega"
 * fica sem conteudo de verdade no Checkout, lado a lado ficaria
 * desbalanceado - ver explicacao no topo). Desde a 6a rodada do template
 * (cart-shipping.php), o Checkout usa 1 unico "<td colspan="2">" com 2
 * "<div>" dentro (nao mais 2 "<td>" forcados a "display:block" - ver
 * comentario no PHP pro motivo: essa tecnica antiga causava 2 bugs reais
 * (divisor cortado abaixo de "Subtotal" e um divisor sobrando entre "Dados
 * da entrega"/"Opções de envio"), ambos resolvidos so' pela troca de
 * estrutura, sem precisar de CSS extra pra disfarcar.
 *
 * GOTCHA REAL (mesma familia de bug do resto da auditoria pixel a pixel -
 * Astra vencendo via ID): o Astra tem ".woocommerce.woocommerce-checkout
 * form #order_review td:last-child{text-align:right}" (ID "#order_review"
 * bate qualquer quantidade de classes) - o "<td>" novo e' o ULTIMO da sua
 * linha, entao herdava "text-align:right" (pensado pelo Astra pra' coluna
 * de preco) mesmo com "text-align:left" daqui. So' apareceu ao vivo com CEP
 * preenchido (sem isso a lista de opcoes nem renderiza). "!important" so'
 * nessa propriedade. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.laluce-shipping-stacked-col{
	padding:12px 0 !important;
	text-align:left !important;
	font-weight:400;
}
/* Respiro entre os 2 blocos empilhados ("Dados da entrega"/"Opções de
 * envio") - sem borda entre eles (o pedido do Ronaldo era remover esse
 * divisor; como agora sao só 2 "<div>" comuns, nenhum dos 2 pega o
 * "border-top" generico de linha de tabela - so' precisa do respiro). */
body.woocommerce-checkout .laluce-shipping-address-col{
	margin-bottom:12px;
}
/* 2 titulos dentro do mesmo bloco de frete ("Dados da entrega" por fora,
 * "Opções de envio" por dentro) - o handoff (Checkout Redesign.dc.html,
 * linhas 266/277/278) usa cores E margens DIFERENTES pros 2, nao o mesmo
 * estilo repetido: o externo fica petroleo/10px, o interno (sub-titulo)
 * fica petroleo-claro/8px. Auditoria pixel a pixel anterior tinha
 * simplificado os 2 pra' um "h3" so' - corrigido aqui, cada coluna com a
 * sua regra. */
body.woocommerce-checkout .laluce-shipping-address-col h3{
	margin:0 0 10px;
	font-size:13px;
	font-weight:700;
	color:var(--petrol);
}
body.woocommerce-checkout .laluce-shipping-options-col h3{
	margin:0 0 8px;
	font-size:13px;
	font-weight:700;
	color:var(--petrol-light);
}
body.woocommerce-checkout .laluce-shipping-options-empty{
	margin:0;
	font-size:13px;
	font-weight:400;
	color:#7a7a70;
}
body.woocommerce-checkout #shipping_method{
	list-style:none;
	margin:0;
	padding:0;
}
body.woocommerce-checkout #shipping_method li{
	margin:0 0 8px;
	padding:0;
	text-indent:0;
	font-size:13px;
	color:#333;
}
/* GOTCHA REAL (2026-08-11, a pedido do Ronaldo: "iguale a fonte das opcoes de
 * envio a' dos titulos de produto do Seu pedido"). A regra do "<li>" logo
 * acima JA' pedia 13px/#333 - e nao adiantava nada, porque o texto visivel
 * ("Jadlog Package (Economico)...") nao esta' no "<li>": ele esta' num
 * "<label>" filho, e o Astra tem um "label,legend{font-size:14px;
 * font-weight:500;color:var(--ast-global-color-2,#111827);line-height:20px}"
 * que bate DIRETO nele. Regra direta sempre vence heranca, nao importa a
 * especificidade - o mesmo principio que ja' apareceu neste arquivo com o
 * "<span>" do preco na tabela do pedido. Ou seja: o "<li>" obedecia, o
 * "<label>" dentro dele nao.
 *
 * Medido antes: opcao de envio 14px / peso 500 / #1e293b / linha 20px, contra
 * titulo de produto 13px / peso 500 / #333 / linha 21,45px. Ou seja 1px maior
 * e num cinza-azulado diferente.
 *
 * O alvo e' o titulo de produto de "Seu pedido"
 * (".woocommerce-checkout-review-order-table td.product-name"): peso 500 e
 * familia Lato ja' batiam, entao so' tamanho, cor e altura de linha mudam.
 *
 * "line-height:inherit" em vez de 21,45px cravado: assim o valor vem do
 * "<li>", que por sua vez herda o global do site - exatamente a mesma origem
 * de onde o titulo de produto tira o dele. Se o global mudar um dia, os dois
 * andam juntos sozinhos, em vez de um numero magico envelhecer aqui.
 *
 * Vale nos 2 modos: nao ha' media query nenhuma nesta regra, e nem no bloco de
 * "Seu pedido" - os dois lados ja' eram do mesmo tamanho no desktop e no
 * celular, e continuam.
 *
 * O PRECO CONTINUA EM NEGRITO: "#shipping_method li .woocommerce-Price-amount"
 * (logo abaixo) mira o "<span>" do valor e segue valendo por cima desta regra
 * - o negrito do preco e' pedido do mockup, nao efeito colateral. */
body.woocommerce-checkout #shipping_method li label{
	font-size:13px;
	font-weight:500;
	line-height:inherit;
	color:#333;
}
/* Preco de cada opcao de frete ("R$ 138,60") em negrito, como no mockup
 * (".../Checkout Redesign.dc.html", linha 283, "<span style=font-weight:
 * 700>{{ opt.priceFmt }}</span>") - e sem quebra de linha NO MEIO do valor
 * (visto ao vivo: o texto da opcao e' longo o bastante pra' quebrar, e sem
 * "white-space:nowrap" a quebra podia cair entre o "R$" e o numero, feio -
 * so' o preco fica protegido, o resto do texto continua livre pra' quebrar
 * normalmente se precisar). */
body.woocommerce-checkout #shipping_method li .woocommerce-Price-amount{
	font-weight:700;
	white-space:nowrap;
}
body.woocommerce-checkout #shipping_method li input{
	width:auto;
	margin:0 6px 0 0;
}

/* Lista de formas de pagamento: cada metodo vira um "card" clicavel (radio +
 * nome + icone numa linha, subformulario expandido logo abaixo, quando
 * selecionado) - mesmo padrao visual do mockup. "<li>" e' o UNICO elemento
 * que embrulha radio+label+subformulario nativamente (ver HTML real gerado
 * pelo WooCommerce/Mercado Pago) - a propria borda/raio/overflow:hidden vao
 * nele, sem precisar de nenhum wrapper novo. */
body.woocommerce-checkout ul.wc_payment_methods{
	list-style:none;
	margin:0 0 18px;
	padding:0;
	display:flex;
	flex-direction:column;
	gap:8px;
}
body.woocommerce-checkout li.wc_payment_method{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
	background-color:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:10px 12px;
	overflow:hidden;
}
/* GOTCHA REAL (2026-08-10, os ultimos 10px do vao que o Ronaldo apontou
 * embaixo do card do Cartao): o WooCommerce poe um CLEARFIX neste "<li>"
 * (".woocommerce-checkout #payment ul.payment_methods li:not(.woocommerce-
 * notice)::before/::after{content:' ';display:table}", woocommerce.css /
 * woocommerce-grid.min.css do Astra). Num container FLEX - que e' o que este
 * "<li>" virou no redesenho - PSEUDO-ELEMENTO TAMBEM E' ITEM DE FLEX. O
 * "::after" nao cabe na linha do ".payment_box" (que e' "flex:0 0 100%"),
 * entao ele abre uma 3a LINHA so' pra ele: altura 0, mas com o "row-gap:10px"
 * do container aplicado ANTES dela. Ou seja, 10px reservados pra um elemento
 * invisivel que nem funcao tem mais aqui - clearfix so' serve pra' conter
 * float, e nao ha' float nenhum neste layout.
 *
 * "content:none" (e nao "display:none"): impede o pseudo-elemento de ser
 * GERADO, em vez de gerar e esconder - nao sobra item de flex nenhum pro
 * container contar.
 *
 * O seletor precisa dos 3 elementos ("body ul li") pra vencer: o do
 * WooCommerce tem 1 ID + 3 classes + 2 elementos (o ":not(.x)" conta como
 * classe), entao empatamos em ID e em classes e ganhamos na contagem de
 * elementos - sem "!important". */
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::before,
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method::after{
	content:none;
}

/* Realce do metodo SELECIONADO (borda petroleo, como no mockup) - ":has()"
 * detecta o radio MARCADO dentro do proprio "<li>" (suporte amplo nos
 * navegadores modernos; sem isso precisaria de JS so' pra trocar uma cor de
 * borda). */
body.woocommerce-checkout li.wc_payment_method:has(input.input-radio:checked){
	border-color:var(--petrol);
}
body.woocommerce-checkout li.wc_payment_method input.input-radio{
	flex:0 0 auto;
	width:auto;
	margin:0;
}
body.woocommerce-checkout li.wc_payment_method > label{
	flex:1 1 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	margin:0;
	font-size:13px;
	font-weight:400;
	color:#333;
	cursor:pointer;
}
body.woocommerce-checkout li.wc_payment_method > label img{
	max-height:22px;
	width:auto;
}
/* GOTCHA REAL (2026-08-10, achado medindo o vao que o Ronaldo apontou entre o
 * ultimo campo e a borda de baixo do card): esta regra tinha "#payment"
 * ACRESCENTADO ao seletor nesta rodada, e nao por capricho - sem ele, NADA de
 * margem/padding daqui valia, desde a 1a versao. Sao 2 concorrentes, os dois
 * achados varrendo os 32 stylesheets carregados:
 *
 *   1) ".woocommerce-checkout #payment div.payment_box{margin:1em 0;
 *      padding:1em}" (woocommerce-grid.min.css). Tem "#payment" - 1 ID vence
 *      qualquer quantidade de classe, o mesmo padrao que ja' mordeu este
 *      arquivo com o Astra e com o Mercado Pago. Era dali que vinham os
 *      14,72px (1em) presos embaixo do card, e tambem 14,72px em cima no
 *      lugar dos 12px pedidos aqui - diferenca pequena demais pra' alguem
 *      notar a olho, que e' justamente por que passou batido ate' agora.
 *
 *   2) ":has(> .mp-checkout-custom-load){padding:0!important}" (CSS do
 *      Mercado Pago). So' pega no quadro do Cartao (e' o unico que tem esse
 *      <div> de carregamento dentro), e e' o motivo de o "padding-top:14px"
 *      valer nos outros 4 metodos e ser ignorado justamente no Cartao - o
 *      divisor colava no conteudo so' ali. Vencido com "!important" + a
 *      especificidade maior do seletor com "#payment", pra' que os 5 metodos
 *      fiquem com o mesmo respiro depois do divisor.
 *
 * Com "#payment" o seletor fica em 1 ID + 3 classes, contra 1 ID + 2 classes
 * do WooCommerce - empate no que conta primeiro (ID) e vitoria na contagem
 * de classes, sem precisar de "!important" pro caso (1). */
body.woocommerce-checkout #payment li.wc_payment_method .payment_box{
	flex:0 0 100%;
	width:100%;
	margin-top:12px;
	/* O "margin:1em 0" nativo deixava ~15px entre o ultimo campo e a borda de
	 * baixo do card. Junto com o "padding:20px 24px 40px" do container do
	 * Mercado Pago (zerado mais abaixo), era o vao que o Ronaldo apontou. */
	margin-bottom:0;
	padding-top:14px !important;
	border-top:1px solid var(--border-light);
	background:none;
	font-size:13px;
}
body.woocommerce-checkout li.wc_payment_method .payment_box p{
	margin:0 0 12px;
}
body.woocommerce-checkout li.wc_payment_method .payment_box .form-row{
	margin:0 0 12px;
}

/* PIX SEM ACORDEON (2026-08-17, a pedido do Ronaldo): clicar em "Pix" deve
 * apenas SELECIONAR a forma de pagamento. O painel que o plugin do Mercado
 * Pago abre embaixo do radio (logo do Pix, "Pague de forma segura e
 * instantanea" e o link de termos e condicoes) nao aparece mais - nem no
 * desktop nem no mobile, por isso a regra fica fora de qualquer media query.
 *
 * POR QUE DA' PRA ESCONDER SEM RISCO: o painel do Pix e' 100% informativo. O
 * template do plugin ("templates/public/checkouts/pix-checkout.php", em
 * laluce-shop-terceiros/) so' tem os custom elements "<pix-template>" e
 * "<terms-and-conditions>" - NENHUM campo de formulario, nem escondido. Nada
 * do que o gateway precisa pra cobrar sai daqui (o valor vem do carrinho, no
 * servidor - ver "PixGateway::payment_fields()"), entao esconder o bloco nao
 * muda o pedido em nada. O mesmo NAO valeria pro Cartao, cujo painel tem
 * campos de verdade (numero, vencimento, CVC) - la' esconder quebraria a
 * compra.
 *
 * "display:none" ESCONDE em vez de remover o no' do DOM de proposito: o
 * checkout.js do WooCommerce chama "slideDown()" nesse elemento a cada clique
 * no radio (ver "payment_method_selected" em woocommerce/assets/js/frontend/
 * checkout.js) e o proprio plugin do MP registra os custom elements de
 * dentro - arrancar o no' seria mexer em codigo de terceiro sem necessidade.
 *
 * O "!important" NAO e' preguica de especificidade: e' o unico jeito. O
 * "slideDown()" citado acima escreve "display:block" INLINE no elemento, e
 * estilo inline vence qualquer seletor de folha de estilo - so' "!important"
 * passa por cima. */
body.woocommerce-checkout #payment li.wc_payment_method.payment_method_woo-mercado-pago-pix .payment_box{
	display:none !important;
}

/* --- Formulario de cartao do Mercado Pago (2026-08-10, a pedido do Ronaldo:
 * campos mais compactos e ocupando mais largura) ---
 *
 * Este formulario nao e' nosso: o SDK do Mercado Pago monta ele em tempo de
 * execucao, e os campos sensiveis (numero do cartao, vencimento, CVC) sao
 * IFRAMES do dominio deles - exigencia de PCI, pra' que o numero do cartao
 * nunca passe pelo nosso HTML. Consequencia pratica: daqui da' pra controlar
 * a MOLDURA (altura, largura, raio, espacamento), mas NAO o texto de dentro.
 * So' "Nome do titular" e' um <input> de verdade.
 *
 * CORRECAO DE 2026-08-10: o "nao da' pra mexer no texto de dentro" que estava
 * escrito aqui valia pra' CSS, e so'. Existe uma porta: o SDK recebe um
 * objeto de estilo do proprio plugin, e da' pra' trocar esse objeto antes do
 * formulario ser montado - e' assim que a fonte de 12px e a altura chegam
 * dentro do iframe (ver assets/js/checkout.js). CSS continua sem alcance
 * la' dentro; o que mudou foi o caminho, nao o limite do CSS.
 *
 * Larguras medidas ao vivo antes de escrever: o formulario tinha 260px dentro
 * de uma coluna de 380px. A perda estava num "padding:24px" que o proprio MP
 * poe no ".mp-checkout-custom-container" - 48px comidos so' nisso. Zerado
 * abaixo, o formulario passa a 308px (os mesmos 308 do bloco de pagamento em
 * volta), ou seja +48px de campo util sem mexer em mais nada.
 *
 * O "!important" e' obrigatorio: praticamente toda regra do CSS do MP ja' vem
 * com "!important" (padrao do design system deles), entao especificidade
 * sozinha nao vence.
 *
 * Sobre o alinhamento Vencimento/CVC que o Ronaldo apontou: NAO precisou de
 * CSS. A causa era o rotulo "Codigo de seguranca" quebrando em 2 linhas na
 * coluna estreita, o que empurrava o campo dele pra baixo do vizinho.
 * Encurtar pra "CVC" (ver o filtro em inc/checkout.php) resolveu sozinho -
 * confirmado medindo: os 2 campos agora comecam exatamente no mesmo topo.
 *
 * GOTCHA DE ESPECIFICIDADE (medido: a 1a versao destas regras nao pegou em
 * nada): nao basta "!important" aqui. O CSS do MP mira estes elementos com
 * seletores que tem ID - "#mp-checkout-custom-root .mp-checkout-custom-
 * container" pro padding, e "#mp-checkout-custom-root #mp-custom-checkout-
 * form-container ..." (DOIS IDs) pra altura do campo. ID vence qualquer
 * quantidade de classe, entao as nossas regras so' de classe perdiam mesmo
 * com "!important" dos dois lados. Os seletores abaixo repetem os MESMOS IDs
 * pra empatar, e o "body.woocommerce-checkout" na frente desempata.
 *
 * O CVC tem classe PROPRIA ("mp-checkout-custom-security-code-input", nao
 * "-card-input" como os outros) e um seletor ainda mais longo no CSS do MP,
 * por isso precisa da propria regra abaixo - sem ela ele ficava com 48px ao
 * lado de um "Vencimento" de 38px, desalinhando a dupla de novo. */
/* --- 2a rodada (2026-08-10): "ainda ha' muito espaco entre os campos e entre
 * o ultimo campo e a borda de baixo do card; reduza a altura; use fonte 12px;
 * o texto dos campos esta' alinhado pela BASE, so' o Nome do titular esta'
 * centrado". As 4 fontes de espaco, todas medidas ao vivo antes de escrever:
 *
 *   1) ".mp-checkout-custom-container{padding:20px 24px 40px}" - os 24px
 *      laterais ja' tinham sido zerados na 1a rodada; sobravam 20px em cima e
 *      40px EMBAIXO, que eram exatamente o vao ate' a borda do card.
 *   2) ".mp-checkout-custom-card-form{gap:32px}" - o espaco entre as 3 linhas
 *      do formulario (numero / titular / vencimento+CVC).
 *   3) ".mp-checkout-custom-card-flags{margin-bottom:32px}" - a faixa de
 *      bandeiras de cartao acima do 1o campo.
 *   4) ".mp-input-label{font-size:14px;padding:0 0 4px 6px}" - rotulos 2px
 *      maiores que os nossos e recuados 6px, desalinhados da borda do campo.
 *
 * Resultado medido no bloco inteiro do Cartao: 484px -> 342px.
 *
 * O ALINHAMENTO VERTICAL NAO E' CSS (e por isso o "Nome do titular" era o
 * unico certo): os 3 campos sensiveis sao iframes com "height=100%", entao a
 * MOLDURA obedece o CSS daqui - mas o <input> DE DENTRO e' montado pelo SDK
 * a partir de um objeto de estilo fixo do plugin ("{fontSize:'16px',
 * height:'48px',padding:'14px',...}" em getCardFormConfig(), assets/js/
 * checkouts/custom/entities/card-form.min.js). Um input de 48px dentro de uma
 * janela de 36px mostra so' os 36 de cima: o texto, centrado nos 48px
 * originais, cai perto do rodape do que se ve'. Encolher a moldura por CSS
 * SO' PIORAVA isso. A correcao (altura e fonte de dentro) esta' em
 * assets/js/checkout.js; "Nome do titular" escapava porque e' um <input>
 * de verdade, nao um iframe. */
body.woocommerce-checkout #mp-checkout-custom-root .mp-checkout-custom-container{
	padding:0 !important;
}
body.woocommerce-checkout #mp-checkout-custom-root .mp-checkout-custom-container .mp-checkout-custom-card-flags{
	margin-bottom:12px !important;
}
body.woocommerce-checkout #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-form{
	gap:12px !important;
}
/* Mesma dupla Vencimento|CVC: no desktop o "gap" separa as 2 colunas; no
 * celular o CSS do MP troca a linha pra' coluna e o mesmo "gap" vira o
 * espaco vertical entre elas (la' o padrao dele tambem era 32px). */
body.woocommerce-checkout #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-row.mp-checkout-custom-dual-column-row{
	gap:12px !important;
}
/* "Vencimento" nasce com "margin-right:16px" no CSS do MP - era assim que
 * eles separavam as 2 colunas, ja' que a linha nao tinha "gap" nenhum. Com o
 * "gap:12px" acima, esse recuo virou espaco DUPLICADO, e ainda por cima so'
 * de um lado: o campo ficava 16px mais estreito que o CVC ao lado (medido:
 * 132px contra 148px, nas duas colunas de 148px). Zerado, os 2 voltam a ter
 * a mesma largura - que e' a consistencia que o Ronaldo pediu na dupla. */
body.woocommerce-checkout #mp-checkout-custom-root #mp-custom-checkout-form-container #form-checkout__expirationDate-container{
	margin-right:0 !important;
}
/* Rotulos do formulario do cartao no mesmo desenho dos nossos (12px, colados
 * na borda esquerda do campo). O recuo de 6px do MP deixava o rotulo
 * desalinhado da caixa logo abaixo dele. */
body.woocommerce-checkout #mp-checkout-custom-root .mp-input-label{
	font-size:12px !important;
	line-height:1.3 !important;
	padding:0 0 4px 0 !important;
}
body.woocommerce-checkout #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-form input-helper #mp-card-holder-name-helper-info{
	font-size:12px !important;
	line-height:1.3 !important;
}
/* "Nome do titular" e' o unico <input> real do formulario - a fonte de 12px
 * chega nele por CSS. Nos outros 3 ela vai pelo SDK (ver checkout.js). O
 * recuo de 14px do MP tambem foi igualado aos 10px dos nossos campos. */
body.woocommerce-checkout #mp-checkout-custom-root #mp-custom-checkout-form-container #mp-card-holder-div input.mp-checkout-custom-card-input.mp-card-holder-name{
	font-size:12px !important;
	padding-left:10px !important;
}
/* 38px -> 32px: a MESMA altura dos nossos campos (ver "Estilo global de
 * campo" mais acima), pra' que o formulario do cartao nao pareca de outra
 * pagina. Precisa andar junto com a altura passada ao SDK em checkout.js. */
body.woocommerce-checkout #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-input,
body.woocommerce-checkout #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,
body.woocommerce-checkout #mp-checkout-custom-root .mp-input-select-input{
	height:32px !important;
}
body.woocommerce-checkout #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-input,
body.woocommerce-checkout #mp-checkout-custom-root #mp-custom-checkout-form-container .mp-checkout-custom-card-input iframe,
body.woocommerce-checkout #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,
body.woocommerce-checkout #mp-checkout-custom-root .mp-input-select-select,
body.woocommerce-checkout #mp-checkout-custom-root .mp-input-document{
	border-radius:5px !important;
}
/* Aviso nativo do plugin Mercado Pago ("Meios offline em Modo Teste" no
 * Boleto, "Checkout Custom in Test Mode" no Cartao) - custom element
 * "<test-mode>" que o proprio plugin injeta dentro do subformulario quando
 * as credenciais configuradas sao de sandbox/teste (ver "src/Translations/
 * StoreTranslations.php" e "templates/public/checkouts/*.php" do plugin,
 * fora deste repositorio - laluce-shop-terceiros/wp-content/plugins/
 * woocommerce-mercadopago/). Nao faz parte do mockup - a pedido do Ronaldo,
 * escondido em toda forma de pagamento (nao so' a que aparece nos prints,
 * o mesmo elemento existe no Cartao, Boleto e Pix). */
body.woocommerce-checkout test-mode{
	display:none !important;
}

/* --- Formulario de cartao do Stripe (2026-09-01, a pedido do Ronaldo: mesmo
 * tratamento ja' dado ao formulario do Mercado Pago acima - tirar o "box
 * dentro do box" e deixar os campos ocuparem a largura toda) ---
 *
 * A CAUSA NAO E' DO STRIPE: o plugin ("woocommerce-gateway-stripe") envolve
 * os campos do cartao (numero/validade/CVC, iframe deles) num
 * "<fieldset id="wc-stripe-upe-form">" comum, sem nenhum estilo proprio no
 * checkout classico (conferido em "build/upe-classic.css" do plugin - o
 * unico reset de fieldset que ele tem so' vale pra "Optimized Checkout",
 * feature que esta loja nao usa). Quem desenha a caixa e' o CSS GLOBAL do
 * Astra ("fieldset{border:1px solid var(--ast-border-color);padding:.35em
 * .625em .75em}", assets/css/minified/style.min.css do tema) - a mesma regra
 * que qualquer "<fieldset>" nativo do WordPress herda em qualquer pagina.
 * Removendo border/padding daqui, o iframe do Stripe passa a ocupar sozinho
 * a largura inteira do card de pagamento - era so' o padding do fieldset
 * comendo espaco dos 2 lados, igual o "padding:24px" do Mercado Pago acima. */
body.woocommerce-checkout #wc-stripe-upe-form{
	border:0;
	margin:0;
	padding:0;
}

/* Botao "Finalizar pedido": laranja, mesmo tratamento ja' dado ao "Ir para
 * o Pagamento" do Carrinho (cor propria so' no CTA principal da pagina,
 * "!important" pra vencer a cor que a paleta global do Astra ja' aplica a
 * qualquer ".button"). */
body.woocommerce-checkout #place_order{
	background-color:var(--orange) !important;
	border-color:var(--orange) !important;
	color:var(--petrol) !important;
	width:100%;
	padding:13px;
	font-size:15px;
	font-weight:700;
	border-radius:5px;
}
body.woocommerce-checkout #place_order:hover{
	filter:brightness(1.05);
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper{
	margin-bottom:12px;
	font-size:12px;
	color:#7a7a70;
}

/* Prompt nativo "Tem um cupom?" removido de verdade via "remove_action()"
 * (ver inc/checkout.php, a pedido do Ronaldo - fora do escopo do mockup) -
 * sem markup nenhum sobrando, nao precisa de CSS aqui. */

/* Empilha em 1 coluna abaixo de 921px - mesmo ponto de corte que o Astra ja'
 * usava nativamente pra' esta pagina (min-width:922px e' quando ELE troca
 * pra' 2 colunas via float, ver CSS dinamico do tema). */
@media (max-width:921px){
	body.woocommerce-checkout form.checkout.woocommerce-checkout{
		grid-template-columns:1fr;
	}
	/* GOTCHA REAL (2026-08-08, print do Ronaldo no celular: "Detalhes de
	 * cobranca" e "Seu pedido" lado a lado, vazando pra' fora da tela).
	 * Zerar "grid-template-columns" pra' "1fr" NAO bastava: a caixa do
	 * resumo continuava com "grid-column:2" da regra de desktop, e pedir a
	 * COLUNA 2 num grid que so' declara UMA faz o CSS Grid criar uma
	 * segunda coluna IMPLICITA pra' atender o pedido - dimensionada pelo
	 * conteudo (~380px), que e' de onde vinha o vazamento horizontal. Nao
	 * adianta so' declarar menos colunas; e' preciso parar de PEDIR a
	 * coluna 2. Com as duas caixas na coluna 1, elas empilham na ordem do
	 * DOM: "Detalhes de cobranca" e depois "Seu pedido" (a ordem que o
	 * Ronaldo pediu), sem precisar de "order". */
	body.woocommerce-checkout #customer_details.col2-set,
	body.woocommerce-checkout .laluce-order-review-wrap{
		grid-column:1;
	}
	body.woocommerce-checkout .laluce-order-review-wrap{
		position:static;
	}
	/* O empilhamento dos CAMPOS nao mora aqui: e' o comportamento padrao,
	 * declarado fora de media query (ver o GOTCHA de especificidade na
	 * secao dos campos). */
}

/* =========================================================================
 * Pagina "Pagar pedido" (/checkout/order-pay/) - 2026-09-10, 2a rodada
 * (redesenho pra' ficar "precisamente igual" ao Checkout normal, a pedido do
 * Ronaldo depois de ver a 1a versao ao vivo).
 *
 * O template ("checkout/form-pay.php", override do tema - ver PHP) reusa os
 * MESMOS "id"/classes que o Checkout normal ja' usa ("#order_review_heading",
 * "table.woocommerce-checkout-review-order-table", "#payment", "ul.wc_
 * payment_methods"...), entao quase todo o visual desta pagina vem GRATIS
 * das regras la' em cima, sem nenhuma linha nova aqui. So' falta o card
 * novo, que nao existe no Checkout normal: "Seus dados" (nome/e-mail/
 * telefone, quando o pedido nao tem - ver "laluce_pay_render_form_contato()"
 * em inc/checkout.php pro raciocinio completo) - o equivalente, reduzido,
 * do card "Detalhes de cobranca".
 *
 * ORDEM (pedido do Ronaldo, "precisa comecar pelos Detalhes de cobranca, e
 * nao pelo Seu pedido"): "Seus dados" agora vem ANTES de "Seu pedido" no
 * DOM (ver PHP) - o mesmo que o Checkout normal faz (cobranca primeiro,
 * resumo depois).
 *
 * SEM CARD DENTRO DE CARD (2a queixa do Ronaldo, com print): a 1a versao
 * dava a "Seus dados" a MESMA moldura de 2 pecas que "#order_review_heading"/
 * "#order_review" usa (titulo com o topo arredondado + caixa com a base
 * arredondada, encostados) - so' que, como os 4 campos moram DENTRO do MESMO
 * "<form id=order_review>" que da' a moldura externa da caixa "Seu pedido"
 * (ver "Decisao tecnica" no PHP - o "id" nao pode mudar, o JS nativo do
 * WooCommerce liga o "submit" direto nele), o resultado era uma caixa com
 * borda propria ENCAIXADA dentro de outra caixa com borda - "card dentro de
 * card". A moldura certa pra' "Seus dados" nao e' a de "Seu pedido" - e' a
 * de "Detalhes de cobranca" (que no Checkout normal e' UMA caixa so',
 * "#customer_details", com o titulo POR DENTRO dela, nao 2 pecas separadas).
 * Os valores abaixo sao a MESMA receita de "#customer_details.col2-set" +
 * ".woocommerce-billing-fields h3" (ver secao do Checkout, mais acima neste
 * arquivo) - copiados porque os IDs originais ja' pertencem aos elementos do
 * Checkout normal, mas pixel a pixel iguais.
 *
 * OS 4 CAMPOS FICAM FORA DO "<form id=order_review>" DE PROPOSITO (ver
 * "custom_attributes['form']" em "laluce_pay_render_form_contato()", inc/
 * checkout.php): e' o que permite "Seus dados" ser uma caixa SIBLING (nao
 * aninhada) antes do "<form>", sem deixar de ser enviada junto no POST - o
 * atributo HTML5 "form" associa um campo a um "<form>" em qualquer lugar do
 * DOM, nao so' aos descendentes dele. */
body.woocommerce-order-pay #laluce-pay-contato{
	background-color:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:24px 28px;
	margin:0 0 24px;
}
body.woocommerce-order-pay #laluce-pay-contato-heading{
	margin:0 0 16px;
	padding:0 0 12px;
	border-bottom:1px solid var(--border-light);
	font-size:15px;
	font-weight:700;
	color:var(--petrol);
}
body.woocommerce-order-pay .laluce-pay-contato-intro{
	margin:0 0 14px;
	font-size:13px;
	color:#7a7a70;
}
/* Espacamento vertical entre os 4 campos: o reset generico ".form-row{
 * margin:0}" (ver secao do Checkout, acima) zera a margem nativa - no
 * Checkout normal quem da' o respiro e' o "gap" do CSS Grid; aqui os campos
 * ficam em fluxo normal (sem grid, 1 por linha - so' 4 campos, nao precisa
 * de colunas), entao o respiro volta como margem propria. */
body.woocommerce-order-pay #laluce-pay-contato .form-row{
	margin:0 0 14px;
}
body.woocommerce-order-pay #laluce-pay-contato .form-row:last-child{
	margin-bottom:0;
}
/* Asterisco de campo obrigatorio em vermelho (2026-09-10, relatado pelo
 * Ronaldo com print - saia na cor padrao/preta). A receita vermelha
 * ("color:red;font-weight:700;border:0") ja' existe nativamente no Astra
 * ("woocommerce.min.css": ".woocommerce-js form .form-row .required{...}"),
 * mas o seletor dele exige o ".form-row" ser DESCENDENTE de um "<form>" -
 * e os 4 campos de "Seus dados" ficaram de proposito FORA do "<form
 * id=order_review>" nesta mesma rodada (ver "custom_attributes['form']" em
 * "laluce_pay_render_form_contato()", inc/checkout.php), pra' resolver o
 * "card dentro de card". O atributo HTML5 "form" resolve o ENVIO do campo,
 * mas nao muda a arvore do DOM pra fins de CSS - o seletor do Astra parou
 * de casar. Regra propria, com os MESMOS valores, sem depender de estar
 * dentro de "<form>" nenhum. */
body.woocommerce-order-pay #laluce-pay-contato .required{
	color:red;
	font-weight:700;
	border:0;
}

/* =========================================================================
 * Pagina da Minha Conta (/minha-conta/), tela deslogada (login/cadastro)
 * Redesenho a partir do handoff aprovado pelo Ronaldo (2026-08-07,
 * identidade-visual/claude-design/design_handoff_la_luce/, arquivo
 * "Minha Conta Redesign.dc.html" + README.md). Mesma familia visual do
 * Carrinho/Checkout (cards brancos, borda "--border-light", campos com
 * "--border-input") - ver historico completo em memory/pagina-minha-conta.md.
 *
 * 100% CSS + 1 arquivo JS pontual (assets/js/my-account.js, toggle de
 * mostrar/ocultar senha - unico comportamento NOVO documentado no README do
 * handoff, o resto e' so reskin visual). NENHUM template PHP sobrescrito:
 * "#customer_login"/".col-1"/".col-2"/"h2"/"form" nativos do WooCommerce
 * (myaccount/form-login.php) ja' sao exatamente os hooks certos pra' virar
 * a moldura do card - sem precisar duplicar nenhum template so' pra mudar
 * a ORDEM/aparencia visual (mesmo principio ja' usado no Checkout).
 * ========================================================================= */

/* Layout: grid 2 colunas iguais, mesma altura (o mockup usa "align-items:
 * stretch" de proposito pro card "Cadastre-se", com menos campos, IGUALAR
 * a altura do card "Entrar"). Zera o float/width nativo do WooCommerce
 * (".col2-set .col-1"/"col-2", 48%/48%) - "#customer_login" tem ID proprio,
 * entao o reset (ID+classes) vence por especificidade sem precisar de
 * "!important", mesmo padrao ja' usado no Checkout pra' "#customer_details". */
body.woocommerce-account #customer_login.col2-set{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px;
	align-items:stretch;
}
body.woocommerce-account #customer_login .col-1,
body.woocommerce-account #customer_login .col-2{
	float:none;
	width:auto;
}
/* GOTCHA REAL (2026-08-07, achado ao vivo via Playwright - "Entrar" caindo
 * na coluna 2 e empurrando "Cadastre-se" pra' linha 2): o WooCommerce/Astra
 * ("woocommerce-layout-grid.min.css") da' um CLEARFIX nativo a QUALQUER
 * ".col2-set" pro layout antigo de FLOAT - ".col2-set::before,
 * .col2-set::after{content:" ";display:table}". "display:table" nao e'
 * "display:none": o pseudo-elemento gerado continua "em fluxo", e vira um
 * GRID ITEM DE VERDADE assim que o pai vira "display:grid" (nao existe
 * excecao pra pseudo-elemento gerado no algoritmo de auto-placement). Com
 * isso, a ordem real de auto-flow passava a ser [::before, .col-1, .col-2,
 * ::after] em vez de so' [.col-1, .col-2] - o "::before" invisivel ocupava
 * sozinho a celula (linha1/coluna1), empurrando "Entrar" (.col-1) pra'
 * (linha1/coluna2) e estourando "Cadastre-se" (.col-2) pra' uma 2a linha
 * inteira. Confirmado ao vivo (Playwright): "getComputedStyle(container,
 * '::before').display" retornava "table" antes desta correcao. O clearfix
 * so' fazia sentido no layout de FLOAT original (que este redesenho
 * substitui por grid) - neutralizado aqui, so' pra' esta pagina. */
body.woocommerce-account #customer_login.col2-set::before,
body.woocommerce-account #customer_login.col2-set::after{
	content:none;
	display:none;
}

/* Cartao branco, borda clara, cantos arredondados - mesma linguagem visual
 * das caixas do Carrinho/Checkout ("--border-light").
 *
 * "display:flex;flex-direction:column" nos DOIS cards. Ate' 2026-08-12 estava
 * so' no ".col-2" ("Cadastre-se"), que era o card com MENOS conteudo e
 * precisava que o form de dentro crescesse ("flex:1" abaixo) pra' preencher a
 * altura extra que o grid da'. Passou pros dois quando os botoes precisaram
 * ficar alinhados entre si (ver o bloco "Alinhamento vertical dos 2 botoes",
 * no fim desta secao): com os dois forms colados no pe' do card, os dois
 * cards passam a ter o MESMO ponto de referencia de baixo pra' cima,
 * independente de qual dos dois esteja mais alto no momento. */
body.woocommerce-account #customer_login .col-1,
body.woocommerce-account #customer_login .col-2{
	background-color:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:20px 24px;
	display:flex;
	flex-direction:column;
}

/* Titulos "Entrar"/"Cadastre-se" (h2 nativo do WooCommerce, unico heading
 * dentro de cada coluna) - bold, petroleo, linha fina embaixo (tom proprio
 * de divisoria, mais claro que a borda externa do card - ver "--border-
 * divider" no :root). */
body.woocommerce-account #customer_login h2{
	margin:0 0 14px;
	padding-bottom:10px;
	border-bottom:1px solid var(--border-divider);
	font-size:15px;
	font-weight:700;
	color:var(--petrol);
}

/* GOTCHA REAL (2026-08-07, achado ao vivo via Playwright - "box interno"
 * sobrando dentro dos 2 cards): o Astra da' um estilo NATIVO "encaixotado"
 * a QUALQUER "form.login"/"form.register"/"form.checkout_coupon" - regra
 * dinamica do Customizer (inline no <head>, por isso nao aparecia num grep
 * de arquivo .css): "body .woocommerce form.login, ...{border:1px solid
 * var(--ast-border-color);padding:20px;margin:2em 0;border-radius:5px}".
 * Nao achei via "curl" porque a cor vem de uma VARIAVEL CSS (nao um hex
 * literal pra' procurar) - so' apareceu inspecionando "getComputedStyle"
 * ao vivo. Essa regra tem 1 ELEMENTO a mais que a minha original ("body
 * .woocommerce form.login" = 2 elementos+2 classes; a minha era so' 1
 * elemento+2 classes) - com IDs e classes empatados, quem tem mais
 * elementos vence, entao ela levava a melhor nas propriedades que eu ainda
 * nao tinha sobrescrito (border/padding/margin). Selector daqui pra baixo
 * ganhou o prefixo "#customer_login" (ID, vence de goleada) pra' garantir. */
body.woocommerce-account #customer_login .woocommerce-form-login,
body.woocommerce-account #customer_login .woocommerce-form-register{
	border:none;
	margin:0;
	padding:0;
	text-align:left;
}

/* Os 2 formularios nativos (".woocommerce-form-login"/"-register") viram
 * colunas flex com "gap:12px" entre os campos/linhas - reproduz o
 * espacamento vertical do mockup (originalmente 14px, reduzido um pouco a
 * pedido do Ronaldo pra' encolher a altura dos 2 cards, ver comentario do
 * card acima) sem precisar de nenhum wrapper novo (os filhos diretos do
 * <form> ja' sao exatamente os blocos certos: cada ".form-row", o link
 * "Perdeu sua senha?", etc.). Os dois ganham "flex:1" pra' esticar e ocupar a
 * altura extra da coluna quando o card fica mais alto que o conteudo do form
 * (era so' o de cadastro ate' 2026-08-12, ver comentario do card acima). */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register{
	display:flex;
	flex-direction:column;
	gap:12px;
}
body.woocommerce-account #customer_login .woocommerce-form-login,
body.woocommerce-account #customer_login .woocommerce-form-register{
	flex:1;
}
/* Rastreamento de atribuicao de pedido (elemento nativo do WooCommerce,
 * sem conteudo visivel) escondido explicitamente - sem isso ele ainda
 * conta como um item flex vazio e rouba um "gap:14px" extra no meio do
 * formulario de cadastro, mesmo sem ocupar espaco proprio. */
body.woocommerce-account wc-order-attribution-inputs{
	display:none;
}

/* Estilo global de campo (mesma receita do Checkout: borda "--border-
 * input", raio 5px). O WooCommerce nativo da' "padding:3px" a TODO
 * ".form-row" independente do tema (gotcha ja' documentado no Checkout) -
 * zerado aqui tambem.
 * RAIO PADRONIZADO EM 5px (2026-08-10, a pedido do Ronaldo): era 6px aqui e
 * 7px em 2 pontos do Checkout, contra 5px em todo o resto do site. Ver o
 * comentario "RAIO PADRAO DAS CAIXAS" no topo da secao do Checkout.
 * "tel" ENTROU EM 2026-08-17: o campo Telefone dos enderecos e' "type=tel"
 * (WooCommerce, "get_address_fields()"), entao ficava de fora desta receita
 * e so' parecia igual aos outros por causa do CSS dinamico do Astra. Como o
 * dimensionamento do Telefone na Minha Conta agora depende do padding ser
 * exatamente 12px de cada lado (ver "Editar endereco" adiante), ele passa a
 * ser declarado aqui. O Checkout ja' fazia isso desde sempre. */
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="tel"],
body.woocommerce-account input[type="password"]{
	border:1px solid var(--border-input);
	border-radius:5px;
	padding:10px 12px;
	font-size:14px;
	background-color:#fff;
	color:#1c1c1c;
	width:100%;
	box-sizing:border-box;
	box-shadow:none;
}
body.woocommerce-account input[type="text"]:focus,
body.woocommerce-account input[type="email"]:focus,
body.woocommerce-account input[type="tel"]:focus,
body.woocommerce-account input[type="password"]:focus{
	outline:2px solid var(--petrol-light);
	outline-offset:1px;
}
body.woocommerce-account .form-row label{
	display:block;
	margin:0 0 6px;
	font-size:12px;
	line-height:1.3;
	font-weight:700;
	color:var(--petrol-light);
}
body.woocommerce-account .form-row{
	margin:0;
	padding:0;
}

/* Campo "Senha": wrapper relativo em volta SO' do input (criado pelo JS,
 * assets/js/my-account.js - o <label> fica FORA dele, como no mockup) pra'
 * o icone de olho poder se posicionar por cima do input sem invadir a
 * altura do rotulo. */
body.woocommerce-account .laluce-pw-wrap{
	position:relative;
	display:block;
}
body.woocommerce-account .laluce-pw-wrap input{
	padding-right:40px;
}
body.woocommerce-account .laluce-pw-toggle{
	position:absolute;
	top:0;
	bottom:0;
	right:10px;
	display:flex;
	align-items:center;
	padding:0;
	border:none;
	background:none;
	font-size:15px;
	line-height:1;
	color:var(--petrol-light);
	cursor:pointer;
}

/* Linha "Lembre-me" + botao "Acessar": no HTML nativo os dois (mais os
 * nonces ocultos) sao IRMAOS dentro do MESMO "<p class="form-row">" (o
 * WooCommerce nao separa em 2 linhas) - vira uma mini-coluna flex propria
 * (mesmo "gap:12px" do formulario) pra' empilhar checkbox e botao como no
 * mockup. Seletor exclui ":not(.woocommerce-form-row)" pra' nao bater
 * tambem nas linhas de campo (usuario/senha), que tem "form-row" JUNTO
 * com "woocommerce-form-row" na lista de classes. */
body.woocommerce-account .woocommerce-form-login p.form-row:not(.woocommerce-form-row){
	display:flex;
	flex-direction:column;
	gap:12px;
}
/* O "#customer_login" no meio NAO e' decoracao: sem ele esta regra perde de
 * "body.woocommerce-account .form-row label" (o estilo de rotulo de campo,
 * mais acima nesta mesma seccao) por especificidade - 0-2-2 contra 0-2-1,
 * porque o "Lembre-me" tambem e' um <label> dentro de um ".form-row". O
 * "display:block" daquele rotulo vencia o "display:flex" daqui, o <input>
 * voltava a ser inline (alinhado pela BASELINE do texto, dai o checkbox
 * aparecer desencaixado do "Lembre-me") e o "gap:8px" era ignorado - o
 * respiro entre os dois vinha so' do espaco em branco do HTML. Com o ID no
 * selector a regra ganha e os dois voltam a alinhar pelo centro. Mesmo
 * remedio do gotcha ja' documentado no topo desta seccao. */
body.woocommerce-account #customer_login .woocommerce-form-login__rememberme{
	display:flex;
	align-items:center;
	gap:8px;
	margin:0;
	font-size:13px;
	font-weight:400;
	color:#333;
	cursor:pointer;
}
body.woocommerce-account #customer_login .woocommerce-form-login__rememberme input[type="checkbox"]{
	width:auto;
	margin:0;
	flex:none;
}

/* Botoes "Acessar"/"Cadastre-se": cor ja' vem petroleo de graca (paleta
 * global do Astra redefinida no :root, ver "--ast-global-color-0" no topo
 * deste arquivo - cobre qualquer ".button" nativo, sem selector proprio) -
 * so' formato/tamanho precisam de ajuste (largura do conteudo, nao 100%). */
body.woocommerce-account .woocommerce-form-login__submit,
body.woocommerce-account .woocommerce-form-register__submit{
	width:fit-content;
	padding:11px 26px;
	border-radius:5px;
	font-size:14px;
	font-weight:700;
}

/* "Perdeu sua senha?" - link simples, ja' herda a cor padrao de link do
 * site (petroleo claro / hover marrom, regra global "a{}" no topo deste
 * arquivo); so' o tamanho precisa bater com o mockup.
 *
 * O "line-height" NAO e' decorativo: ele e' a metade da conta que alinha o
 * botao "Cadastre-se" com o "Acessar" (ver "Alinhamento vertical dos 2
 * botoes", logo abaixo). Fixado em 20px pra' a altura desta linha ser um
 * numero conhecido, e nao o que sobrar da entrelinha herdada do Astra.
 * Mexer aqui obriga a mexer la'. */
body.woocommerce-account .woocommerce-LostPassword{
	margin:0;
	font-size:13px;
	line-height:20px;
}

/* Paragrafo "Um link para definir uma nova senha..." (sem classe propria no
 * HTML nativo - selector por exclusao, unico <p> filho direto do form sem
 * NENHUMA classe, pra' nao bater nos ".form-row" que tem classe). */
body.woocommerce-account .woocommerce-form-register > p:not([class]){
	margin:0;
	font-size:13px;
	color:#555;
	line-height:1.5;
}

/* Aviso de privacidade ("Seus dados pessoais serao usados..."). O <p>
 * interno tem margem padrao do navegador (mesmo gotcha ja' documentado em
 * blueprints.md) - zerada pra' nao somar com o "gap:14px" do form. */
body.woocommerce-account .woocommerce-privacy-policy-text{
	font-size:12px;
	color:#7a7a70;
	line-height:1.5;
}
body.woocommerce-account .woocommerce-privacy-policy-text p{
	margin:0;
}

/* --- Alinhamento vertical dos 2 botoes (2026-08-12, pedido do Ronaldo:
 * "mesmo estando em cards diferentes, quero eles visualmente alinhados").
 *
 * Nao existe em CSS "alinhe este elemento por aquele ali": "Acessar" e
 * "Cadastre-se" estao em subarvores irmas, sem relacao nenhuma entre si. O que
 * da' pra' fazer e' ancorar os DOIS no mesmo ponto de referencia, e o unico
 * ponto que os dois cards ja' compartilham e' o RODAPE: o grid estica as duas
 * colunas pra' mesma altura ("align-items:stretch") e os dois forms encostam
 * no fundo do card ("display:flex" no card + "flex:1" no form, la' em cima).
 *
 * Do rodape pra' cima, o card "Entrar" tem uma CAUDA que o "Cadastre-se" nao
 * tem: o "Perdeu sua senha?" (20px de linha, fixados na regra acima) mais o
 * "gap:12px" do formulario = 32px. Entao:
 *   - "margin-top:auto" nos dois: come toda a folga da coluna flex e joga o
 *     bloco final de cada form pro fundo do proprio card;
 *   - "margin-bottom:32px" so' no de cadastro: recua o botao exatamente o
 *     tamanho da cauda que existe do outro lado.
 * Resultado: as bordas de BAIXO dos dois botoes caem na mesma altura e, como
 * os dois tem o mesmo padding/font-size (regra unica mais acima), as de cima
 * tambem. Vale nos dois sentidos - se um dia o card de cadastro ficar mais
 * alto que o de login (ex.: aviso de privacidade quebrando em mais linhas num
 * desktop estreito), quem ganha a folga e' o outro lado e o alinhamento
 * continua de pe'.
 *
 * SO' NO DESKTOP: abaixo de 922px os cards empilham (media query logo abaixo),
 * cada um vira uma linha propria do grid e nao ha' mais o que alinhar - o
 * "margin-bottom" ali seria so' um buraco de 32px no pe' do card de cadastro.
 *
 * OS DOIS ":not()" isolam a linha do BOTAO em cada form, e sao diferentes
 * porque o HTML nativo do WooCommerce e' diferente nos dois (mesma tecnica de
 * exclusao ja' usada na linha do "Lembre-me", mais acima):
 *   - login:    campos = "...form-row", botao = "form-row" seco;
 *   - cadastro: campos = "...form-row form-row-wide", botao = "woocommerce-
 *               form-row form-row" (sem o "-wide"). */
@media (min-width:922px){
	body.woocommerce-account #customer_login .woocommerce-form-login p.form-row:not(.woocommerce-form-row){
		margin-top:auto;
	}
	body.woocommerce-account #customer_login .woocommerce-form-register p.form-row:not(.form-row-wide){
		margin-top:auto;
		margin-bottom:32px;
	}
}

/* Empilha em 1 coluna abaixo de 921px - mesmo ponto de corte que o resto do
 * site (Carrinho/Checkout) ja' usa, e o mesmo breakpoint em que a propria
 * folha de compatibilidade do Astra pro WooCommerce (["woocommerce-
 * smallscreen-grid.min.css"]) ja empilha nativamente ".col2-set .col-1"/
 * "col-2" pra' "width:100%" - o handoff de design cita 720px como
 * breakpoint do sistema, mas reaproveitar o ponto de corte NATIVO do tema
 * evita um 2o breakpoint so' pra' esta pagina (mesmo raciocinio ja' usado
 * e documentado no Checkout). */
@media (max-width:921px){
	body.woocommerce-account #customer_login.col2-set{
		grid-template-columns:1fr;
	}
}

/* =========================================================================
 * Pagina de "Senha Perdida" (/minha-conta/lost-password/), endpoint de
 * recuperacao de senha da Minha Conta
 * Redesenho a partir do handoff aprovado pelo Ronaldo (2026-08-07,
 * identidade-visual/claude-design/design_handoff_la_luce/, arquivo
 * "Senha Perdida Redesign.dc.html" + README.md). Mesma familia visual da
 * Minha Conta/Carrinho/Checkout (cards, "--border-input", label 12px/700).
 * Ver historico completo em memory/pagina-senha-perdida.md.
 *
 * 100% CSS + 1 arquivo JS pontual (assets/js/lost-password.js): so' ele
 * realoca a notice do WooCommerce (erro ou confirmacao, impressa pelo
 * wc_print_notices() no TOPO do conteudo) pra' logo abaixo do campo como
 * no mockup; o resto e' reskin visual. NENHUM template PHP sobrescrito:
 * os textos em portugues ("Perdeu sua senha? Digite seu nome de usuario
 * ou endereco de e-mail...", "Redefinir senha", label "Nome de usuario
 * ou e-mail *") JA' vêm traduzidos pelo proprio WooCommerce pt_BR
 * (confirmado no HTML servido antes de qualquer mudanca) e o form nativo
 * ("woocommerce-ResetPassword lost_reset_password") ja' tem a estrutura
 * certa (label > input, botao) - so' o desenho/tamanho precisa de ajuste,
 * mesmo principio ja' usado na Minha Conta (#customer_login).
 *
 * A classe "laluce-lost-password" no <body> vem de inc/lost-password.php
 * (is_wc_endpoint_url('lost-password')). Ela e' necessaria porque este
 * endpoint tem DUAS views com classes de form identicas: a de PEDIDO de
 * reset (este redesenho, mockup) e a de DEFINICAO de nova senha com a
 * chave do e-mail (form-reset-password.php, fora do escopo do handoff) -
 * escopar so' por "body.woocommerce-account" (como a Minha Conta) pintaria
 * as duas.
 * ========================================================================= */

/* Titulo "Senha perdida": e' o h1 .entry-title nativo do Astra, Ja'
 * estilizado globalmente com o tamanho/tom das demais paginas (22/24px
 * 700 petroleo - conferido no HTML servido, "Senha perdida"). Nada a
 * fazer aqui. */

/* Texto explicativo: "Perdeu sua senha? Digite seu nome de usuario ou
 * endereco de e-mail. Voce recebera um link..." - o unico <p> solto do
 * form (sem NENHUMA classe, pra' nao bater nos ".form-row" que tem
 * classe; mesmo selector por exclusao ja' usado no form de cadastro da
 * Minha Conta). max-width 640 do mockup, cor #333 do mockup. */
body.laluce-lost-password .woocommerce-ResetPassword > p:not(.form-row){
	max-width:640px;
	margin:0 0 20px;
	font-size:14px;
	color:#333;
}

/* Formulario: coluna estreita (mockup: max-width:420px, coluna flex com
 * gap:6px entre label e input). O campo e' um "woocommerce-form-row"
 * com label > input; a linha do botao e' outro ".form-row" com um hidden
 * + o botao (o hidden nao ocupa espaco, display:none nativo de
 * "input[type=hidden]" dentro de coluna flex). */
body.laluce-lost-password .woocommerce-ResetPassword{
	max-width:420px;
	margin:0;
}
body.laluce-lost-password .woocommerce-ResetPassword p.woocommerce-form-row{
	display:flex;
	flex-direction:column;
	gap:6px;
	margin:0;
	padding:0;
}
body.laluce-lost-password .woocommerce-ResetPassword p.woocommerce-form-row--first,
body.laluce-lost-password .woocommerce-ResetPassword p.woocommerce-form-row--last{
	margin-bottom:0;
	/* O Astra tem uma regra generica pro layout de 2 colunas do checkout
	 * ("woocommerce-layout-grid.min.css": ".form-row-first,.form-row-last{
	 * width:47%}" + "form-row-first{float:left}"/"form-row-last{float:
	 * right}") que tambem bate aqui (mesma classe nativa). Na vista de
	 * PEDIDO de reset (1 campo, so' "--first") ja' tinha sido corrigido -
	 * confirmado ao vivo via Playwright (getBoundingClientRect batendo
	 * exatamente com 47% de 420px). O float tira a linha do fluxo normal.
	 * Na vista de DEFINICAO de nova senha (form-reset-password.php, campos
	 * "password_1"/"password_2", esta e' a "--last") faltava o mesmo
	 * reset: o 2o campo ("Digite sua senha novamente") flutuava a direita
	 * e mais estreito que o 1o, desalinhado (reportado pelo Ronaldo em
	 * 2026-09-03). O proprio Astra ja' neutraliza isso pra esta view
	 * especifica (".lost_reset_password .form-row-first,.form-row-last{
	 * width:100%;float:none}"), mas SO' dentro do media query mobile
	 * (max-width:921px) - no desktop ninguem resetava nenhum dos dois.
	 * Repete a mesma correcao aqui, sem media query, pros dois campos. */
	width:100%;
	float:none;
}
/* Espaco vertical entre os 2 campos empilhados (so' existe na vista de
 * DEFINICAO de nova senha, que tem os 2 campos - a vista de PEDIDO de
 * reset so' tem "--first", entao este seletor de irmao adjacente nunca
 * casa la, sem impacto no espacamento ja' aprovado daquela vista). Mesmo
 * valor (16px) ja' usado abaixo, entre o ultimo campo e o botao. */
body.laluce-lost-password .woocommerce-ResetPassword p.woocommerce-form-row--first + p.woocommerce-form-row--last{
	margin-top:16px;
}
body.laluce-lost-password .woocommerce-ResetPassword p.woocommerce-form-row label{
	margin:0;
}

/* Botao "Redefinir senha" (o ".woocommerce-Button.button" nativo): cores
 * ja' vem petroleo de graca (paleta global do Astra, "--ast-global-color-0"
 * cobre qualquer ".button", ver seccao "Paginas nativas do WooCommerce" no
 * topo) - so' formato/tamanho (largura do conteudo, nao 100%, e o espaco
 * de 16px abaixo do campo/erro, como no mockup: "margin-top:16px"). */
body.laluce-lost-password .woocommerce-ResetPassword p.woocommerce-form-row:last-of-type{
	margin-top:16px;
}
body.laluce-lost-password .woocommerce-ResetPassword .woocommerce-Button.button{
	width:fit-content;
	padding:11px 26px;
	border-radius:5px;
	font-size:14px;
	font-weight:700;
}
/* Mobile (<=921px, mesmo breakpoint nativo do Astra ja' usado nesta pagina/
 * projeto): o botao deixa de ser "width:fit-content" (pill estreita,
 * alinhada a esquerda dentro do flex column) e passa a ocupar a mesma
 * largura dos campos de senha, que ja' sao 100% do container no mobile
 * (reset nativo do Astra pra' "lost_reset_password" no mobile,
 * woocommerce-smallscreen-grid.min.css) - preencher a linha toda ja'
 * resulta em centralizacao. Pedido do Ronaldo em 2026-09-03. */
@media (max-width:921px){
	body.laluce-lost-password .woocommerce-ResetPassword .woocommerce-Button.button{
		width:100%;
	}
}

/* Evita o "flash" da notice nativa (posicao original, no topo da pagina
 * ANTES do form, com o visual de fabrica do WooCommerce/Astra) entre o
 * primeiro paint e o JS rodar. O script (assets/js/lost-password.js) fica
 * no rodape da pagina (enqueue com "in_footer"), entao so' executa DEPOIS
 * do form/notice ja' terem sido parseados e pintados pelo navegador - sem
 * isto, o Ronaldo via a notice feia por uma fracao de segundo antes dela
 * ser movida/restilizada (reportado ao vivo em 2026-08-08, mobile e
 * desktop). Escondida por padrao aqui (CSS carrega no <head>, antes de
 * qualquer pintura do <body>); o JS adiciona a classe ".laluce-lost-
 * notices" no MESMO passo em que reposiciona o bloco (ver JS), entao ela
 * so' aparece ja' no lugar/estilo certos - nunca no formato nativo.
 * Contrapartida aceita (Ronaldo topou excluir o formato antigo se
 * necessario): sem JavaScript, a notice fica invisivel - mas esta pagina
 * ja' depende de JS pra' funcionar do jeito do mockup (mesmo principio das
 * outras paginas redesenhadas do projeto, nenhuma delas tem fallback
 * sem JS). */
body.laluce-lost-password .woocommerce-notices-wrapper:not(.laluce-lost-notices){
	display:none;
}

/* Aviso de erro realocado (JS, assets/js/lost-password.js): o bloco
 * ".woocommerce-notices-wrapper" move pra' logo abaixo do campo e vira
 * ".laluce-lost-notices". O <ul class="woocommerce-error"> nativo (erro)
 * perde o visual de fabrica (lista com borda superior colorida) e ganha o
 * do mockup: fundo #fdeceb, borda #f0c8c4 (raio 6px), icone ⚠ (#c0453a),
 * texto #7a2b23, margin-top:4px. Especificidade (body + 2 classes +
 * elementos) vence o ".woocommerce .woocommerce-error" nativo e o do
 * Astra sem "!important". A mensagem de sucesso (".woocommerce-message")
 * tambem pode cair aqui - mantem o visual de aviso verde do WooCommerce,
 * so' ganha a margin propria. */
body.laluce-lost-password .laluce-lost-notices{
	margin:0;
}
body.laluce-lost-password .laluce-lost-notices ul.woocommerce-error{
	list-style:none;
	margin:4px 0 0;
	padding:9px 12px;
	background:#fdeceb;
	border:1px solid #f0c8c4;
	border-radius:5px;
}
/* O Astra injeta o proprio icone de erro (fonte de icones "WooCommerce",
 * glyph vermelho, position:absolute) direto no "::before" do <ul> nativo
 * ("woocommerce-grid.min.css": ".woocommerce-error::before{font-family:
 * WooCommerce;content:"\e016";...}") - confirmado ao vivo via Playwright.
 * Sem isto, ele aparece competindo com o icone ⚠ do mockup (".li::before"
 * abaixo), como um circulo vermelho duplicado. Neutralizado aqui. */
body.laluce-lost-password .laluce-lost-notices ul.woocommerce-error::before{
	content:none;
}
body.laluce-lost-password .laluce-lost-notices ul.woocommerce-error li{
	display:flex;
	align-items:center;
	gap:8px;
	margin:0;
	padding:0;
	font-size:13px;
	color:#7a2b23;
}
body.laluce-lost-password .laluce-lost-notices ul.woocommerce-error li::before{
	content:"⚠";
	font-size:14px;
	color:#c0453a;
}
body.laluce-lost-password .laluce-lost-notices ul.woocommerce-message{
	margin:4px 0 0;
}

/* Input com erro (borda vermelha #c0453a, aplicada pelo JS quando a
 * notice e' de erro) - vence a regra base "body.woocommerce-account
 * input[type=text]" por somar uma classe a mais. */
body.woocommerce-account input.laluce-lost-input-error,
body.woocommerce-account input.laluce-lost-input-error:focus{
	border-color:#c0453a;
	outline-color:#c0453a;
}

/* Card de confirmacao ("/lost-password/?reset-link-sent=true", quando o
 * e-mail de redefinicao foi enviado) - mesma receita visual do card
 * "Obrigado" da confirmacao de pedido (".laluce-thankyou-card", ver
 * woocommerce/checkout/thankyou.php): cartao branco com borda/raio 5px +
 * circulo verde de "sucesso" com o MESMO icone de check, a pedido do
 * Ronaldo (2026-09-03). Marcacao em woocommerce/myaccount/lost-password-
 * confirmation.php (override do template nativo).
 *
 * Desktop (base): icone + titulo na mesma linha (esquerda), paragrafo
 * embaixo, tambem a esquerda - cartao ocupa a largura toda da pagina (sem
 * "max-width", ao contrario da 1a versao). Botao "Minha conta" centralizado
 * em relacao ao cartao, largura de conteudo (nao 100%).
 * Mobile (<=720px, mesmo breakpoint da familia Minha Conta - Pedidos/
 * Downloads/Lista de Desejos): tudo empilhado e centralizado (icone, depois
 * titulo, depois paragrafo) e o botao vira largura total, igual ao cartao -
 * pedido do Ronaldo (2026-09-03), com print comparando as 2 versoes. */
body.laluce-lost-password .laluce-lost-success-card{
	display:flex;
	align-items:flex-start;
	gap:12px;
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:20px 22px;
	margin:0 0 20px;
}
body.laluce-lost-password .laluce-lost-success-card__icon{
	width:40px;
	height:40px;
	border-radius:50%;
	background:#e8f4ef;
	color:#2f8f6b;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}
body.laluce-lost-password .laluce-lost-success-card__body{
	flex:1;
	min-width:0;
}
body.laluce-lost-password .laluce-lost-success-card__title{
	margin:0 0 4px;
	font-size:15px;
	font-weight:700;
	color:var(--petrol);
}
body.laluce-lost-password .laluce-lost-success-card__body p:last-child{
	margin:0;
	font-size:14px;
	color:#333;
}
/* Botao "Minha conta": muda "display" (base ".laluce-ma-btn" e' inline-
 * flex) pra' "flex" (block-level) so' nesta pagina, o que permite centralizar
 * com "margin:0 auto" sem esticar a largura - "width:fit-content" preserva o
 * tamanho de conteudo (o "justify-content:center" ja' vem da regra base). */
body.laluce-lost-password a.laluce-ma-btn{
	display:flex;
	width:fit-content;
	margin:0 auto;
}
@media (max-width:720px){
	body.laluce-lost-password .laluce-lost-success-card{
		flex-direction:column;
		align-items:center;
		text-align:center;
	}
	body.laluce-lost-password .laluce-lost-success-card__body{
		width:100%;
	}
	body.laluce-lost-password a.laluce-ma-btn{
		width:100%;
	}
}

/* =========================================================================
 * Mensagens do WooCommerce em card modal (2026-08-10, a pedido do Ronaldo)
 *
 * Substitui a faixa nativa do topo da pagina ("Produto X foi adicionado ao
 * seu carrinho", "Cupom aplicado", etc.) por um card modal na linguagem
 * visual do resto do site. Vale no site INTEIRO, inclusive pras mensagens
 * que ainda nao apareceram - a conversao e' feita pelo involucro, nao
 * mensagem por mensagem.
 *
 * Toda a explicacao de escopo (por que so' sucesso/informacao, por que o
 * seletor usa ">" e por que o script vai no <head>) esta' em
 * assets/js/notices.js e inc/notices.php. Aqui e' so' o desenho.
 * ========================================================================= */

/* ANTI-PISCA. A marca "laluce-notices-js" e' escrita no <html> pela primeira
 * linha do notices.js, que roda no <head> - ou seja, ANTES do <body> ser
 * parseado. Quando o navegador chega na mensagem, esta regra ja' existe e ja'
 * vale: ela nunca chega a ser pintada no topo.
 *
 * O ">" (filho direto do wrapper) e' o que separa AVISO de CONTEUDO: o
 * "Tem um cupom?" tambem usa ".woocommerce-info", mas nao fica dentro do
 * wrapper. Um seletor solto aqui apagaria o link de cupom do Checkout.
 * (O "Seu carrinho esta' vazio" era o segundo caso e saiu da lista em
 * 2026-08-12 - virou card proprio, ver woocommerce/cart/cart-empty.php.)
 *
 * ".woocommerce-error" NAO entra: erro continua na pagina (decisao do
 * Ronaldo - no Checkout/Carrinho/Minha Conta o erro E' a instrucao do que
 * corrigir, e num modal ele some junto com o modal).
 *
 * Ao mover a mensagem pra' dentro do card, o JS a tira de dentro do wrapper -
 * ela deixa de casar com este seletor e reaparece sozinha la' dentro, sem
 * precisar de nenhuma regra pra' "desesconder". */
html.laluce-notices-js .woocommerce-notices-wrapper > .woocommerce-message,
html.laluce-notices-js .woocommerce-notices-wrapper > .woocommerce-info{
	display:none;
}
/* O involucro fica no DOM mesmo depois de esvaziado (o WooCommerce injeta os
 * avisos de AJAX procurando por ele, e o nosso observador esta' preso nele -
 * ver notices.js). Esta classe, posta pelo JS, so' tira ele da tela. O
 * ":empty" que o proprio WooCommerce ja' usa nao serve aqui: sobram nos de
 * texto em branco depois da mudanca, e ":empty" nao casa com eles. */
html.laluce-notices-js .woocommerce-notices-wrapper.laluce-notices-vazio{
	display:none;
}

/* --- Erros de validacao do Checkout: as DUAS exibicoes antigas saem da tela
 * (2026-08-14, a pedido do Ronaldo: "nao quero nenhum desses formatos porque
 * eles estao quebrando o design que implementamos na pagina"). Elas viram o
 * card modal; ver inc/checkout.php pra' quais erros entram e assets/js/
 * notices.js pra' a conversao.
 *
 * 1) A CAIXA DO TOPO. Mesmo raciocinio anti-pisca do wrapper acima: os itens
 * carimbados somem enquanto ainda estao dentro do grupo de avisos, e reaparecem
 * sozinhos quando o JS move a lista pro card (la' dentro o seletor nao casa
 * mais). Item NAO carimbado - validacao da forma de pagamento, falta de
 * estoque - nao casa aqui e continua visivel na pagina, como hoje. */
html.laluce-notices-js .woocommerce-NoticeGroup ul.woocommerce-error > li[data-laluce-erro-checkout],
/* A segunda caixa (2026-08-18): no "/checkout/order-pay/" o envio e' de
 * formulario comum, nao AJAX, entao a lista ja' vem no HTML da pagina e dentro
 * do wrapper de sempre - nao ha' ".woocommerce-NoticeGroup" ali. Sem esta
 * linha o erro apareceria pintado no topo por um instante, antes de o JS
 * move-lo pro card. */
html.laluce-notices-js .woocommerce-notices-wrapper ul.woocommerce-error > li[data-laluce-erro-checkout]{
	display:none;
}
/* A casca que sobra quando TODOS os itens foram pro card. O WooCommerce recria
 * esse grupo a cada envio, entao esconder nao atrapalha o proximo erro. */
html.laluce-notices-js .woocommerce-NoticeGroup.laluce-notices-vazio{
	display:none;
}
/* 2) A MENSAGEM SOB O CAMPO. E' o "<p>" que o "show_inline_errors()" do
 * checkout.js do WooCommerce pendura dentro do ".form-row" de cada campo com
 * erro. Escondida por CSS (e nao removida por JS) porque o core a recria a
 * cada envio - regra fixa nao depende de rodar de novo no momento certo.
 * A BORDA VERMELHA NAO SAI: ela vem da classe ".woocommerce-invalid" no
 * ".form-row", que e' outra coisa e continua intocada, como o Ronaldo pediu.
 * So' o Checkout tem esse elemento, mas o escopo por classe de body deixa
 * explicito que nada fora dali e' afetado - inclusive as mensagens proprias
 * do formulario de cartao, que usam outras classes. */
body.woocommerce-checkout .checkout-inline-error-message{
	display:none;
}

/* Trava o scroll do fundo enquanto o card esta' aberto. */
html.laluce-modal-aberto,
html.laluce-modal-aberto body{
	overflow:hidden;
}

.laluce-modal-fundo{
	position:fixed;
	inset:0;
	z-index:100000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	background:rgba(0,59,70,.55);
	animation:laluce-modal-fade .18s ease-out;
}
@keyframes laluce-modal-fade{
	from{opacity:0}
	to{opacity:1}
}

.laluce-modal{
	position:relative;
	width:100%;
	max-width:420px;
	max-height:calc(100vh - 40px);
	overflow-y:auto;
	box-sizing:border-box;
	padding:28px 26px 24px;
	background:#fff;
	border:1px solid var(--border-light);
	/* Mesmo raio das demais caixas do site (padronizado em 5px na mesma
	 * rodada em que este card nasceu). */
	border-radius:5px;
	box-shadow:0 18px 48px rgba(0,59,70,.22);
	text-align:center;
	animation:laluce-modal-subir .2s ease-out;
}
@keyframes laluce-modal-subir{
	from{opacity:0;transform:translateY(10px)}
	to{opacity:1;transform:none}
}

/* Botao X, canto superior direito (pedido explicito do Ronaldo). 32x32 e'
 * o minimo confortavel de alvo de clique num canto. */
.laluce-modal-fechar{
	position:absolute;
	top:10px;
	right:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	padding:0;
	background:none;
	border:none;
	border-radius:5px;
	color:var(--petrol-light);
	cursor:pointer;
	line-height:0;
}
.laluce-modal-fechar:hover,
.laluce-modal-fechar:focus-visible{
	background:var(--bg-grid);
	color:var(--petrol);
}

.laluce-modal-icone{
	display:flex;
	justify-content:center;
	margin:0 0 12px;
	line-height:0;
}
/* Icone em MARROM nos dois tipos (2026-08-14, a pedido do Ronaldo - o de
 * informacao ja' era marrom; o de sucesso era petroleo e passou a acompanhar).
 * O TEXTO do card (titulo) continua em petroleo, tambem por pedido dele: e' o
 * icone que carrega a cor, nao a tipografia. */
.laluce-modal--sucesso .laluce-modal-icone,
.laluce-modal--info .laluce-modal-icone{
	color:var(--brown);
}
/* O card de ERRO foge do marrom de proposito: e' o mesmo vermelho da caixa de
 * erro da pagina e da borda do campo invalido, que e' a cor que o cliente
 * acabou de ver na tela. */
.laluce-modal--erro .laluce-modal-icone{
	color:#c0453a;
}

.laluce-modal-titulo{
	margin:0 0 8px;
	font-size:18px;
	font-weight:700;
	line-height:1.3;
	color:var(--petrol);
}

/* O conteudo do corpo e' o HTML NATIVO da mensagem, movido pra' ca' pelo JS.
 * O Astra pinta ".woocommerce-message"/".woocommerce-info" como faixa (fundo
 * cinza, borda esquerda colorida, um ::before com a fonte de icones dele) -
 * tudo isso e' desfeito aqui, porque o card ja' tem moldura e icone
 * proprios. O icone do Astra em particular so' sai com "content:none": e' um
 * pseudo-elemento, nao da' pra' alcancar de outro jeito. */
.laluce-modal-corpo .woocommerce-message,
.laluce-modal-corpo .woocommerce-info{
	display:block;
	margin:0;
	padding:0;
	background:none;
	border:none;
	font-size:14px;
	line-height:1.5;
	color:#333;
}
.laluce-modal-corpo .woocommerce-message::before,
.laluce-modal-corpo .woocommerce-info::before{
	content:none;
}
/* GOTCHA REAL (2026-08-10, visto no 1o teste ao vivo: um retangulo escuro em
 * volta do texto dentro do card): o proprio WooCommerce marca a mensagem com
 * "tabindex=-1" e joga o FOCO nela quando ela aparece - e' o mecanismo dele
 * pra' leitor de tela anunciar o aviso. Como e' foco de verdade, o navegador
 * desenha o anel de foco padrao. Aqui isso e' so' ruido: o elemento nao e'
 * interativo e nao da' pra' chegar nele pelo Tab (tabindex negativo), entao o
 * anel nao esta' orientando ninguem. O foco em si CONTINUA valendo (e ainda
 * cai dentro do modal, que e' o comportamento correto pra' um dialogo) - o
 * que sai e' so' o desenho. */
.laluce-modal-corpo .woocommerce-message:focus,
.laluce-modal-corpo .woocommerce-info:focus{
	outline:none;
}
.laluce-modal-corpo .woocommerce-message + .woocommerce-message,
.laluce-modal-corpo .woocommerce-message + .woocommerce-info,
.laluce-modal-corpo .woocommerce-info + .woocommerce-info,
.laluce-modal-corpo .woocommerce-info + .woocommerce-message{
	margin-top:8px;
}

/* --- Card de ERRO (2026-08-14, erros de validacao do Checkout) ---
 * Frase de abertura ditada pela pagina ("Antes de finalizar seu pedido...") e
 * a lista de erros logo abaixo. Os dois sao alinhados a' ESQUERDA, ao
 * contrario do resto do card: sao varias linhas pra ler item a item, e texto
 * centralizado em lista fica ilegivel. */
.laluce-modal-intro{
	margin:0 0 10px;
	font-size:14px;
	line-height:1.5;
	color:#333;
	text-align:left;
}
/* A lista e' o "<ul class=woocommerce-error>" NATIVO, movido pra' ca' inteiro
 * (mesmo principio dos avisos de sucesso: mover, nao remontar). Por isso todo
 * o desenho de "faixa de erro" que o WooCommerce/Astra dao a ela precisa ser
 * desfeito - o card ja' tem moldura e icone proprios. O ::before e' o icone da
 * fonte do Astra, que so' sai com "content:none". */
.laluce-modal-corpo ul.woocommerce-error{
	margin:0;
	padding:0 0 0 18px;
	background:none;
	border:none;
	list-style:disc;
	font-size:14px;
	line-height:1.5;
	color:#333;
	text-align:left;
}
.laluce-modal-corpo ul.woocommerce-error::before{
	content:none;
}
.laluce-modal-corpo ul.woocommerce-error li{
	margin:0 0 6px;
	padding:0;
	list-style:disc;
}
.laluce-modal-corpo ul.woocommerce-error li:last-child{
	margin-bottom:0;
}
/* O WooCommerce embrulha o texto de cada erro num link pro campo
 * ("wrapMessagesInsideLink"). Com o card aberto por cima da pagina, esse link
 * nao leva a lugar nenhum que de' pra ver - fica com cara de texto simples,
 * mas continua clicavel pra quem fechar o card e usar o teclado. */
.laluce-modal-corpo ul.woocommerce-error a{
	color:inherit;
	text-decoration:none;
}
/* Mesmo motivo do foco na mensagem de sucesso: o WooCommerce joga o foco na
 * lista de erros (role="alert" + tabindex) e o navegador desenha o anel. */
.laluce-modal-corpo ul.woocommerce-error:focus{
	outline:none;
}

/* --- Protocolo de atendimento na falha de pagamento (2026-08-18) ---
 * O numero do pedido, acrescentado ao FIM do texto do aviso pelo PHP (ver
 * "laluce_checkout_protocolo" em inc/checkout.php). Vem dentro do proprio
 * "<li>", entao herda o alinhamento e o tamanho da lista - o "display:block"
 * e' o que o descola numa linha propria, e o resto so' o afasta e apaga um
 * pouco, pra' ele ler como nota de rodape e nao competir com a mensagem do
 * gateway, que e' a informacao principal. */
.laluce-modal-corpo .laluce-protocolo{
	display:block;
	margin-top:10px;
	font-size:13px;
	line-height:1.5;
	color:#666;
}

/* Rodape: o CTA que veio DENTRO da mensagem ("Ver carrinho", "Ver pedido"...),
 * movido pra' ca' pelo JS, mais o botao "Ok" que o JS sempre acrescenta por
 * ultimo (2026-08-14). O ":empty" abaixo virou rede de seguranca - com o "Ok"
 * sempre presente o rodape nao fica mais vazio na pratica, mas a regra fica
 * caso o botao deixe de ser criado por algum motivo. */
.laluce-modal-acoes{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:18px 0 0;
}
.laluce-modal-acoes:empty{
	display:none;
}
/* Mesmo tratamento do CTA principal do Carrinho/Checkout (laranja + petroleo).
 * "!important" pelo mesmo motivo de la': a paleta global do Astra pinta
 * qualquer ".button" sozinha. */
.laluce-modal-acoes .laluce-modal-cta{
	flex:1 1 auto;
	padding:11px 20px;
	background-color:var(--orange) !important;
	border-color:var(--orange) !important;
	color:var(--petrol) !important;
	border-radius:5px;
	font-size:14px;
	font-weight:700;
	text-align:center;
	text-decoration:none;
}
.laluce-modal-acoes .laluce-modal-cta:hover{
	filter:brightness(1.05);
}
/* O "Ok" e' um <button> (a acao dele e' fechar o dialogo, nao navegar), entao
 * precisa das reposicoes que um <a> nao precisa: o navegador da' borda, fonte
 * e cursor proprios a botao. A COR da borda continua vindo da regra do CTA
 * acima, que usa "!important" pra' vencer a paleta global do Astra. */
.laluce-modal-acoes button.laluce-modal-cta{
	border-width:1px;
	border-style:solid;
	font-family:inherit;
	line-height:1.2;
	cursor:pointer;
}

@media (max-width:600px){
	.laluce-modal{
		padding:24px 20px 20px;
	}
	.laluce-modal-titulo{
		font-size:16px;
	}
}

/* --- Mensagens de ERRO: continuam na pagina, mas na nossa linguagem visual.
 *
 * Decisao do Ronaldo nesta mesma rodada, depois de eu levantar o ponto: erro
 * nao vira modal porque, no Checkout / Carrinho / Minha Conta, a mensagem de
 * erro E' A INSTRUCAO do que corrigir ("Sobrenome e' um campo obrigatorio") -
 * dentro de um modal, ela sai da tela junto com o modal e o cliente fica
 * olhando pro formulario sem saber o que fazer. Fica na pagina, entao, mas
 * redesenhada: mesma receita ja' aprovada na Senha Perdida (vermelho suave,
 * borda fina, raio 5px, icone de aviso por item).
 *
 * DOIS ALVOS, e nao um: ".woocommerce-notices-wrapper" e' onde caem os erros
 * de uma pagina RECARREGADA; ".woocommerce-NoticeGroup" e' onde o Checkout e
 * o Carrinho injetam os erros que voltam por AJAX (validacao do formulario,
 * cupom invalido) - dois caminhos diferentes pro mesmo tipo de mensagem.
 *
 * E OS DOIS USAM COMBINADOR DIFERENTE, de proposito (achado testando ao vivo
 * uma validacao de Checkout com os campos vazios, depois de a 1a versao usar
 * ">" nos dois e nao pegar):
 *   - no wrapper, ">" (filho direto), pelo mesmo motivo do resto desta secao:
 *     so' o erro que E' aviso, e nao um ".woocommerce-error" que algum
 *     template use como conteudo de pagina;
 *   - no NoticeGroup, descendente, porque o WooCommerce embrulha o <ul> num
 *     <div> SEM CLASSE antes de injetar (form.checkout > .woocommerce-
 *     NoticeGroup > div > ul.woocommerce-error). Aqui nao ha' risco de pegar
 *     conteudo por engano: esse container so' existe pra' carregar avisos.
 *
 * O "::before" do <ul> e' zerado porque o Astra injeta ali o icone da fonte
 * dele ("woocommerce-grid.min.css": ".woocommerce-error::before{font-family:
 * WooCommerce;content:'\e016'}") - sem isso ele aparece junto com o nosso,
 * duplicado. Mesmo achado ja' documentado na Senha Perdida. */
.woocommerce-notices-wrapper > ul.woocommerce-error,
.woocommerce-NoticeGroup ul.woocommerce-error{
	list-style:none;
	margin:0 0 20px;
	padding:12px 14px;
	background:#fdeceb;
	border:1px solid #f0c8c4;
	border-radius:5px;
	font-size:13px;
	line-height:1.5;
	color:#7a2b23;
}
.woocommerce-notices-wrapper > ul.woocommerce-error::before,
.woocommerce-NoticeGroup ul.woocommerce-error::before{
	content:none;
}
/* Mesmo motivo do "outline:none" no modal: o WooCommerce foca a notice
 * (tabindex=-1) pra' leitor de tela, e o anel de foco padrao vira um
 * retangulo escuro em volta da caixa. */
.woocommerce-notices-wrapper > ul.woocommerce-error:focus,
.woocommerce-NoticeGroup ul.woocommerce-error:focus{
	outline:none;
}
.woocommerce-notices-wrapper > ul.woocommerce-error li,
.woocommerce-NoticeGroup ul.woocommerce-error li{
	display:flex;
	align-items:flex-start;
	gap:8px;
	margin:0;
	padding:0;
	text-indent:0;
	list-style:none;
}
.woocommerce-notices-wrapper > ul.woocommerce-error li + li,
.woocommerce-NoticeGroup ul.woocommerce-error li + li{
	margin-top:6px;
}
.woocommerce-notices-wrapper > ul.woocommerce-error li::before,
.woocommerce-NoticeGroup ul.woocommerce-error li::before{
	content:"⚠";
	flex:0 0 auto;
	font-size:14px;
	line-height:1.4;
	color:#c0453a;
}
/* Se um erro trouxer botao junto (raro, mas o WooCommerce faz isso em alguns
 * casos), ele nao pode ficar com a cara de link solto no meio do texto. */
.woocommerce-notices-wrapper > ul.woocommerce-error .button,
.woocommerce-NoticeGroup ul.woocommerce-error .button{
	margin-left:auto;
	border-radius:5px;
	font-size:13px;
}

/* --- "Pagar pedido": erro que substitui a PAGINA INTEIRA (nao aviso de
 * formulario), 2026-09-10 - print do Ronaldo mostrando "Este pedido tem o
 * status como 'Concluido'-nao pode ser pago" no visual padrao do WooCommerce.
 *
 * POR QUE OS DOIS SELETORES DE CIMA NAO PEGAM ESTE CASO: "order_pay()"
 * (class-wc-shortcode-checkout.php do proprio WooCommerce) usa
 * "wc_print_notice()" - singular, impressao IMEDIATA - pra' avisos como este
 * (pedido ja pago/concluido/cancelado, link invalido, sem permissao, etc.).
 * Diferente do "wc_print_notices()" (plural, fila da sessao) que injeta erro
 * dentro de ".woocommerce-notices-wrapper", o singular chama o TEMPLATE
 * direto, sem embrulho nenhum - o "<ul class=woocommerce-error>" nasce
 * IRMAO do wrapper (que fica vazio), os dois filhos diretos da mesma
 * "<div class=woocommerce">" que o shortcode sempre desenha. Confirmado ao
 * vivo (Docker local, pedido de teste com status "completed"):
 *   <div class="woocommerce"><div class="woocommerce-notices-wrapper"></div>
 *   <ul class="woocommerce-error" role="alert">...
 *
 * POR ISSO O ALVO E' O ".woocommerce" DA PAGINA, e nao os dois de cima. Raio
 * de acao restrito a esta tela por "body.woocommerce-order-pay" de proposito:
 * nao ha' garantia de que ".woocommerce > ul.woocommerce-error" solto seja
 * sempre aviso (e nao conteudo de template) em toda pagina do site - so' aqui
 * ja' foi confirmado que e'.
 *
 * MESMA RECEITA do bloco "erro na pagina" logo acima (fundo #fdeceb, borda
 * #f0c8c4, raio 5px, icone vermelho ⚠, texto #7a2b23 13px) - o pedido do
 * Ronaldo foi so' "formatar com o nosso design", nao mudar cor/tom. Regras
 * repetidas (e nao um terceiro seletor na lista de cima) porque aqui falta o
 * "::before" do Astra pra' zerar (o "woocommerce-grid.min.css" so' estiliza
 * ".woocommerce-error" fora do "entry-content"; ver "1em/3.5em/2em" que o
 * proprio Astra aplica em "entry-content .woocommerce-error" - precisa dos
 * mesmos resets de padding que os outros dois blocos ja' fazem). */
body.woocommerce-order-pay .woocommerce > ul.woocommerce-error{
	list-style:none;
	margin:0 0 20px;
	padding:12px 14px;
	background:#fdeceb;
	border:1px solid #f0c8c4;
	border-radius:5px;
	font-size:13px;
	line-height:1.5;
	color:#7a2b23;
}
body.woocommerce-order-pay .woocommerce > ul.woocommerce-error::before{
	content:none;
}
body.woocommerce-order-pay .woocommerce > ul.woocommerce-error:focus{
	outline:none;
}
body.woocommerce-order-pay .woocommerce > ul.woocommerce-error li{
	display:flex;
	align-items:flex-start;
	gap:8px;
	margin:0;
	padding:0;
	text-indent:0;
	list-style:none;
}
body.woocommerce-order-pay .woocommerce > ul.woocommerce-error li + li{
	margin-top:6px;
}
body.woocommerce-order-pay .woocommerce > ul.woocommerce-error li::before{
	content:"⚠";
	flex:0 0 auto;
	font-size:14px;
	line-height:1.4;
	color:#c0453a;
}

/* =========================================================================
 * Checkout: card "Sem meios de pagamento disponiveis" (2026-09-03, a
 * partir de um print tirado pelo Ronaldo em PRODUCAO - so acontece la',
 * quando nenhum gateway fica disponivel para o pedido; o ambiente local
 * sempre tem gateway ativo, entao nao da' pra reproduzir na tela aqui).
 *
 * O WooCommerce imprime essa mensagem (".woocommerce-info" nativo: fundo
 * cinza #f6f5f8, borda superior e icone recolorido pro nosso petroleo via
 * "$link_color" do Astra) direto dentro de UM <li> da lista de metodos de
 * pagamento (plugins/woocommerce/templates/checkout/payment.php, ramo
 * "else" quando "get_available_payment_gateways()" volta vazio). Esse <li>
 * NAO fica dentro do ".woocommerce-notices-wrapper" - e' conteudo de
 * template, nao um aviso da fila -, entao a maquina de cards documentada
 * em memory/mensagens-modal.md nunca alcanca este elemento.
 *
 * Escopo pelo <li> desta lista especifica, e nao ".woocommerce-info" solto:
 * o MESMO involucro tambem imprime "Preencha os dados acima para ver as
 * formas de pagamento" quando o pais de cobranca ainda esta' vazio - ganha
 * o mesmo tratamento de graca, mesma causa. Um seletor solto pegaria
 * TAMBEM o aviso "Ja tem uma conta? Faca login" do formulario de login do
 * Checkout, que usa a mesma classe ".woocommerce-info" mas fica fora
 * desta lista e nao deve mudar.
 *
 * Desenho: mesma receita ja' aprovada do "erro na pagina" (Senha Perdida/
 * Checkout, ver bloco acima neste arquivo - borda #f0c8c4, raio 5px, icone
 * vermelho #c0453a, texto #7a2b23 13px), so' com fundo BRANCO em vez do
 * rosa #fdeceb - pedido explicito da 1a rodada ("card branco").
 *
 * Sem nenhum "!important": o Astra so' colore ".woocommerce-info" por
 * classe (border-top-color/icone via "$link_color"); o seletor abaixo (1
 * ID + 2 classes + 2 elementos) ja' vence por especificidade.
 *
 * REDESENHO DO ICONE (2a rodada, mesmo dia): a 1a versao colocava o icone
 * como item de "display:flex" ao lado do texto (mesma tecnica do
 * "ul.woocommerce-error li" logo acima) - o Ronaldo achou o icone "sem
 * graca" e pediu 2 coisas: linhas mais marcantes e centralizado no card,
 * ja' que o texto (mensagem mais longa que o card) sempre cai pra' linha
 * seguinte de qualquer forma. Trocado por "display:block" simples: o
 * "::before" vira uma linha PROPRIA (bloco), centralizada por
 * "text-align:center", maior (24px, contra 14px antes) e com
 * "-webkit-text-stroke" pra' engrossar o tracado do glifo "⚠" sem
 * depender de "font-weight" (fontes de simbolo Unicode raramente tem
 * variante bold de verdade) - o texto da mensagem segue como conteudo
 * normal do elemento, fluindo por baixo em bloco, alinhado a esquerda de
 * sempre. */
#payment ul.wc_payment_methods > li > .woocommerce-info{
	/* "display:block" precisa ser DITO, nao so' assumido (2026-09-03,
	 * achado medindo ao vivo em producao com Playwright - o Ronaldo
	 * reportou que o icone continuava sem centralizar mesmo depois do
	 * redesenho anterior). O WooCommerce/Astra tem, em
	 * "woocommerce-grid.min.css", ".woocommerce-info{display:flex;flex-
	 * wrap:wrap}" (especificidade 1 classe, bem mais baixa que o nosso
	 * seletor aqui) - so' que a CASCATA e' resolvida PROPRIEDADE POR
	 * PROPRIEDADE, nao regra inteira contra regra inteira: como esta
	 * regra nunca declarava "display" nenhum, o "flex" deles vencia por
	 * NAO TER CONCORRENTE, apesar da nossa especificidade mais alta pra'
	 * tudo mais. Com o pai virando "flex-wrap:wrap", o "::before" do
	 * icone (que E' "display:block" la' embaixo) virava um FLEX ITEM
	 * encolhido ao tamanho do proprio glifo - "text-align:center" nao
	 * tem efeito nenhum numa caixa do tamanho do proprio conteudo, e o
	 * texto (2o item do flex) sobrava pra' segunda linha do wrap. */
	display:block;
	background:#fff;
	border:1px solid #f0c8c4;
	border-radius:5px;
	padding:16px 14px;
	margin:0;
	font-size:13px;
	line-height:1.5;
	color:#7a2b23;
}
#payment ul.wc_payment_methods > li > .woocommerce-info::before{
	font-family:inherit;
	content:"⚠";
	display:block;
	position:static;
	text-align:center;
	font-size:24px;
	line-height:1;
	margin:0 0 8px;
	color:#c0453a;
	-webkit-text-stroke:0.6px #c0453a;
}
#payment ul.wc_payment_methods > li > .woocommerce-info::after{
	content:none;
}

/* =========================================================================
 * Pagina de Confirmacao do Pedido (/checkout/order-received/), 2026-08-18.
 * Mockup: identidade-visual/claude-design/Checkout-PIX.html. Ver
 * memory/pagina-order-received.md pro raciocinio completo.
 *
 * Escopo: so' o CORPO da pagina (card "Obrigado", card do Pix, "Detalhes do
 * pedido", Enderecos) - cabecalho/menu/rodape ficam intocados, mesmo escopo
 * ja' combinado pro Carrinho/Checkout/Minha Conta.
 *
 * Redesenho vale pra QUALQUER forma de pagamento (decisao com o Ronaldo,
 * 2026-08-18): so' o card do meio ("como pagar") muda por gateway - o card
 * "Obrigado", "Detalhes do pedido" e Enderecos sao os MESMOS elementos
 * nativos do WooCommerce em qualquer pedido, entao o novo visual se aplica
 * sempre, nao so' quando o metodo e' Pix.
 *
 * Precisou de 2 overrides de TEMPLATE (nao so' CSS, diferente do Checkout):
 * - woocommerce/checkout/thankyou.php: o nativo entrega o card "Obrigado"
 *   sem NENHUM icone (nao existe no HTML nativo) e a lista de metadados
 *   ("Numero do pedido: 570") como texto solto, sem <span> proprio pra'
 *   separar rotulo de valor visualmente - CSS sozinho nao alcanca.
 * - woocommerce/public/order/pix-order-received.php: OVERRIDE de template de
 *   PLUGIN (Mercado Pago), no mesmo espirito do "woocommerce/cart/cart-
 *   shipping.php" ja' feito pro Carrinho/Checkout - o template nativo vem
 *   sem nenhum estilo nosso e numa estrutura de colunas fixa diferente da
 *   pedida (3 colunas iguais no desktop + selo "Pix" so' no mobile).
 *
 * Breakpoint mobile: 860px - o unico valor que o proprio mockup usa
 * (window.innerWidth<860 no protototipo Claude Design), DIFERENTE dos
 * 921/922px do Carrinho/Checkout e dos 720px da Minha Conta - nao e'
 * inconsistencia, e' o valor que ESTE mockup especifico documenta.
 *
 * Cronometro do Pix ("Codigo valido por 30 minutos"): o mockup mostra um
 * relogio regressivo que fica vermelho perto de zerar, mas isso e'
 * interatividade do PROPRIO Claude Design (simulacao no sandbox) - o plugin
 * do Mercado Pago so' entrega um TEXTO fixo (ex.: "30 minutos"), sem
 * horario exato de expiracao pronto pra' um cronometro real. Decisao com o
 * Ronaldo (2026-08-18): manter o texto estatico, so' redesenhado - sem
 * cronometro de verdade.
 * ========================================================================= */

body.woocommerce-order-received .woocommerce-order{
	display:flex;
	flex-direction:column;
	gap:20px;
}

/* --- Card "Obrigado, pedido recebido" --- */
body.woocommerce-order-received .laluce-thankyou-card{
	display:flex;
	align-items:flex-start;
	gap:12px;
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:20px 22px;
}
/* Verde de "sucesso" - fora da paleta canonica de proposito (mesma logica
 * ja' registrada pro "--heart-red" da Lista de Desejos): convencao
 * universal de UX pra' "confirmado", nao um tom de marca. Primeiro uso no
 * site; se aparecer em mais paginas no futuro, promover pro :root do topo
 * do arquivo. */
body.woocommerce-order-received .laluce-thankyou-card__icon{
	width:40px;
	height:40px;
	border-radius:50%;
	background:#e8f4ef;
	color:#2f8f6b;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}
body.woocommerce-order-received .laluce-thankyou-card__body{
	flex:1;
	min-width:0;
}
/* O "Obrigado. Seu pedido foi recebido." nativo carrega as classes
 * ".woocommerce-notice.woocommerce-notice--success" (herdadas do
 * WooCommerce) so' por convencao de markup - NAO e' um aviso de verdade
 * (nao vive dentro do ".woocommerce-notices-wrapper" que o "notices.js" do
 * site converte em modal, ver memory/mensagens-modal.md), e' conteudo fixo
 * da pagina. Por isso a caixa/borda colorida nativa de aviso e' zerada
 * aqui, virando so' o titulo do card. */
body.woocommerce-order-received .laluce-thankyou-card__body .woocommerce-notice{
	display:block;
	background:none;
	border:none;
	box-shadow:none;
	margin:0 0 4px;
	padding:0;
	font-size:15px;
	font-weight:700;
	color:var(--petrol);
}
/* "margin" com "!important" pelo mesmo motivo dos titulos dos cards mais
 * abaixo: o Astra tem uma regra de 4 classes so' pra' esta pagina
 * (".woocommerce-page.woocommerce-checkout .woocommerce-order
 * ul.order_details{margin-bottom:2em}") que vence as 2 classes daqui e
 * pendura 32px de sobra DENTRO do card "Obrigado", abaixo da grade. */
body.woocommerce-order-received .laluce-order-overview{
	list-style:none;
	margin:10px 0 0 !important;
	padding:0;
	display:grid !important;
	grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
	gap:20px 32px;
}
/* GOTCHA REAL (2026-08-18, achado lendo "woocommerce-grid.min.css" do Astra,
 * carregado nesta pagina): o Astra tem "ul.order_details{zoom:1}" +
 * "ul.order_details::before,::after{content:" ";display:table}" - o
 * clearfix classico do WooCommerce nativo. Como o "<ul>" virou grid
 * ("display:grid !important" acima), esses 2 pseudo-elementos GERADOS
 * (mesmo vazios) passam a contar como ITENS DE GRID de verdade - um antes
 * de "Numero do pedido" (a "caixa vazia" reportada pelo Ronaldo, empurrando
 * cada campo real uma coluna a frente) e outro depois de "Metodo de
 * pagamento" (empurrando ele pra' uma 6a posicao, que so' cabe numa 2a
 * linha do grid de 5 colunas). "content:none" remove os pseudo-elementos
 * de vez, sem tirar o "zoom:1" (inofensivo, e' so' o hack antigo de hasLayout
 * do IE, sem efeito em navegadores atuais). */
body.woocommerce-order-received .laluce-order-overview::before,
body.woocommerce-order-received .laluce-order-overview::after{
	content:none;
}
/* MESMO ARQUIVO: "ul.order_details li{float:left;margin-right:2em;text-
 * transform:uppercase;border-right:1px dashed ...;padding-right:2em;...}"
 * - nunca resetado antes (so' "min-width:0" existia aqui). "float" e'
 * ignorado pela spec num item de grid (nao e' isso que quebrava o layout),
 * mas "text-transform:uppercase" HERDA pros "<span>" de valor (explicava o
 * "RONSJR@GMAIL.COM"/"AGOSTO 18, 2026" em caixa alta - pedido do Ronaldo
 * pra' o campo de e-mail NAO forcar maiusculas), o "border-right:dashed"
 * criava as linhas verticais "|" entre os campos, e o "padding-
 * right"+"margin-right:2em" somavam por cima do "gap" do grid, distorcendo
 * o espacamento.
 *
 * CORRECAO DA CORRECAO (2026-08-18, 4a rodada - o Ronaldo reportou o e-mail
 * AINDA em caixa alta): o seletor deste reset era
 * "body.woocommerce-order-received .laluce-order-overview__item", que eu tinha
 * contado como mais especifico que o do Astra - errado. As duas contas
 * empatam em 2 CLASSES ("woocommerce-order-received"+"laluce-order-overview__
 * item" contra "woocommerce-js"+"order_details") e o desempate vai pros
 * ELEMENTOS, onde o Astra tem 2 ("ul" e "li") contra 1 ("body") - ou seja, a
 * regra do Astra vencia, e NENHUMA linha deste reset estava valendo (nem o
 * "text-transform", nem as bordas tracejadas, nem os 2em de margem). Seletor
 * refeito com o "<ul>"/"<li>" na frente: sao marcacao do NOSSO override
 * ("woocommerce/checkout/thankyou.php"), nao do tema pai, entao amarrar o
 * seletor a eles nao cria dependencia de HTML de terceiro (foi por isso que
 * aqui a saida foi especificidade, e nao "!important" como nos titulos). */
body.woocommerce-order-received ul.laluce-order-overview li.laluce-order-overview__item{
	min-width:0;
	float:none;
	margin:0;
	padding:0;
	border-right:none;
	text-transform:none;
	line-height:normal;
	list-style-type:none;
}
body.woocommerce-order-received .laluce-order-overview__label{
	display:block;
	font-size:11px;
	font-weight:700;
	color:#7a7a70;
	text-transform:uppercase;
	letter-spacing:.02em;
	white-space:nowrap;
}
body.woocommerce-order-received .laluce-order-overview__value{
	display:block;
	font-size:14px;
	font-weight:700;
	color:var(--petrol);
	margin-top:4px;
	word-break:break-word;
}
/* DIVERGENCIA DELIBERADA DO MOCKUP (2026-08-18, a pedido do Ronaldo depois
 * de ver ao vivo no celular): o mockup empilha os campos em 2 COLUNAS no
 * mobile ("metaCols: repeat(2, minmax(140px, 1fr))"), mas na tela real o
 * e-mail nao cabe em meia largura e quebra no meio da palavra
 * ("RONSJR@G / MAIL.COM"). Coluna unica aqui. */
@media (max-width:859px){
	body.woocommerce-order-received .laluce-order-overview{
		grid-template-columns:1fr !important;
		gap:14px;
	}
}

/* --- Card do Pix (woocommerce/public/order/pix-order-received.php) --- */
body.woocommerce-order-received .laluce-pix-card{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:24px;
}
body.woocommerce-order-received .laluce-pix-card__mobile-badge{
	display:none;
	align-items:center;
	gap:8px;
	margin-bottom:16px;
	color:var(--petrol-light);
}
body.woocommerce-order-received .laluce-pix-card__mobile-badge span{
	font-size:20px;
	font-weight:700;
	color:var(--petrol);
}
body.woocommerce-order-received .laluce-pix-card__title{
	font-size:17px;
	font-weight:700;
	color:var(--petrol);
	margin:0 0 16px;
}
body.woocommerce-order-received .laluce-pix-grid{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:24px;
}
body.woocommerce-order-received .laluce-pix-col__heading{
	font-size:13px;
	font-weight:700;
	color:var(--petrol);
	margin:0 0 10px;
}
body.woocommerce-order-received .laluce-pix-steps{
	list-style:none;
	margin:0;
	padding:0;
}
body.woocommerce-order-received .laluce-pix-steps__item{
	display:flex;
	align-items:flex-start;
	gap:8px;
	margin-bottom:8px;
}
body.woocommerce-order-received .laluce-pix-steps__item:last-child{
	margin-bottom:0;
}
body.woocommerce-order-received .laluce-pix-steps__number{
	width:20px;
	height:20px;
	border-radius:50%;
	border:1.5px solid var(--petrol-light);
	color:var(--petrol-light);
	font-size:11px;
	font-weight:700;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}
body.woocommerce-order-received .laluce-pix-steps__text{
	font-size:13px;
	color:#333;
	line-height:1.4;
}
body.woocommerce-order-received .laluce-pix-col--qr{
	text-align:center;
}
body.woocommerce-order-received .laluce-pix-col__amount{
	font-size:13px;
	color:#333;
	margin:0 0 14px;
}
body.woocommerce-order-received .laluce-pix-col__amount strong{
	color:var(--petrol);
}
body.woocommerce-order-received .laluce-pix-qr-frame{
	width:140px;
	height:140px;
	margin:0 auto;
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:8px;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
}
body.woocommerce-order-received .laluce-pix-qr-frame__img{
	width:100%;
	height:100%;
	object-fit:contain;
}
body.woocommerce-order-received .laluce-pix-col--qr .laluce-pix-col__caption{
	font-size:12px;
	color:#7a7a70;
	font-weight:600;
	margin:10px 0 0;
}
body.woocommerce-order-received .laluce-pix-col--copy .laluce-pix-col__caption{
	font-size:12px;
	color:#333;
	font-weight:400;
	margin:0 0 8px;
	text-align:center;
}
body.woocommerce-order-received .laluce-pix-copy-field{
	display:block;
	width:100%;
	box-sizing:border-box;
	border:1px solid var(--border-input);
	border-radius:6px;
	padding:10px 12px;
	font-size:13px;
	line-height:1.4;
	color:#555;
	background:var(--bg-grid);
	font-family:monospace;
	resize:none;
	margin:0 0 8px;
}
body.woocommerce-order-received .laluce-pix-copy-button{
	display:block;
	width:100%;
	background:var(--orange);
	color:var(--petrol);
	font-size:13px;
	font-weight:700;
	padding:10px 20px;
	border:none;
	border-radius:6px;
	cursor:pointer;
	text-align:center;
}
body.woocommerce-order-received .laluce-pix-copy-button:hover{
	opacity:.9;
}
@media (max-width:859px){
	body.woocommerce-order-received .laluce-pix-card__mobile-badge{
		display:flex;
	}
	body.woocommerce-order-received .laluce-pix-grid{
		grid-template-columns:1fr;
		gap:24px;
	}
	body.woocommerce-order-received .laluce-pix-qr-frame{
		width:180px;
		height:180px;
	}
}

/* --- Card "Pagamento aprovado" (woocommerce/public/order/pix-payment-approved.php)
   - substitui o card do Pix acima, na MESMA posicao, quando o script de
   polling do plugin detecta aprovacao e recarrega a pagina sozinho. Reaproveita
   de proposito o mesmo icone/paleta de "sucesso" do card "Obrigado" (verde
   fora da paleta canonica, ja' registrado la' em cima) - os 3 cards desta
   pagina falam a mesma lingua visual. --- */
body.woocommerce-order-received .laluce-pix-approved-card{
	display:flex;
	align-items:flex-start;
	gap:12px;
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:20px 22px;
}
body.woocommerce-order-received .laluce-pix-approved-card__icon{
	width:40px;
	height:40px;
	border-radius:50%;
	background:#e8f4ef;
	color:#2f8f6b;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}
body.woocommerce-order-received .laluce-pix-approved-card__body{
	flex:1;
	min-width:0;
}
body.woocommerce-order-received .laluce-pix-approved-card__title{
	margin:0 0 4px;
	font-size:15px;
	font-weight:700;
	color:var(--petrol);
}
body.woocommerce-order-received .laluce-pix-approved-card__subtitle{
	margin:0;
	font-size:13px;
	color:#555;
	line-height:1.4;
}

/* --- Cards do InfinitePay (woocommerce/public/order/infinitepay-thankyou.php)
   - mesma posicao/linguagem visual do card "Pagamento aprovado" do Pix acima
   (decisao do Ronaldo: os 2 meios assincronos da loja devem parecer a mesma
   coisa pro cliente), com classes proprias porque nunca renderizam ao mesmo
   tempo mas nao devem depender uma da outra. --- */
body.woocommerce-order-received .laluce-infinitepay-approved-card{
	display:flex;
	align-items:flex-start;
	gap:12px;
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:20px 22px;
}
body.woocommerce-order-received .laluce-infinitepay-approved-card__icon{
	width:40px;
	height:40px;
	border-radius:50%;
	background:#e8f4ef;
	color:#2f8f6b;
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}
body.woocommerce-order-received .laluce-infinitepay-approved-card__body{
	flex:1;
	min-width:0;
}
body.woocommerce-order-received .laluce-infinitepay-approved-card__title{
	margin:0 0 4px;
	font-size:15px;
	font-weight:700;
	color:var(--petrol);
}
body.woocommerce-order-received .laluce-infinitepay-approved-card__subtitle{
	margin:0;
	font-size:13px;
	color:#555;
	line-height:1.4;
}

/* Estado "aguardando confirmacao" (webhook ainda nao chegou quando o cliente
   volta do link de pagamento) - mesma moldura do card de aprovado, icone
   trocado por um spinner simples em vez do check verde. */
body.woocommerce-order-received .laluce-infinitepay-pending-card{
	display:flex;
	align-items:flex-start;
	gap:12px;
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:20px 22px;
}
body.woocommerce-order-received .laluce-infinitepay-pending-card__icon{
	width:40px;
	height:40px;
	border-radius:50%;
	border:3px solid #e6e6e0;
	border-top-color:var(--petrol);
	flex-shrink:0;
	animation:laluce-infinitepay-spin 0.8s linear infinite;
}
@keyframes laluce-infinitepay-spin{
	to{ transform:rotate(360deg); }
}
body.woocommerce-order-received .laluce-infinitepay-pending-card__body{
	flex:1;
	min-width:0;
}
body.woocommerce-order-received .laluce-infinitepay-pending-card__title{
	margin:0 0 4px;
	font-size:15px;
	font-weight:700;
	color:var(--petrol);
}
body.woocommerce-order-received .laluce-infinitepay-pending-card__subtitle{
	margin:0;
	font-size:13px;
	color:#555;
	line-height:1.4;
}

/* --- "Detalhes do pedido" (woocommerce/order/order-details.php, NATIVO -
   nao reaproveita o CSS da tabela "Seu pedido" do Checkout, que mira outra
   classe de tabela: ".woocommerce-checkout-review-order-table"; esta aqui
   e' ".shop_table.order_details") --- */
/* "margin:0" NAO e' cosmetico: o espacamento ENTRE os cards da pagina vem
 * todo do "gap:20px" do ".woocommerce-order" (flex, no topo desta secao), e
 * tanto o WooCommerce ("woocommerce.css": ".woocommerce .woocommerce-order-
 * details{margin-bottom:2em}") quanto o Astra ("woocommerce-grid.min.css":
 * ".woocommerce-js .woocommerce-order-details{margin-bottom:2em}") penduram
 * 2em (32px) DE MARGEM neste bloco - que SOMA ao gap em vez de substitui-lo.
 * Resultado: 20px entre o card do Pix e "Detalhes do pedido" (o card do Pix
 * e' template proprio, sem essa classe, logo sem a margem) contra 52px entre
 * "Detalhes do pedido" e os Enderecos - a diferenca reportada pelo Ronaldo em
 * 2026-08-18. Zerado aqui pra' que o gap do flex seja a UNICA fonte de
 * espacamento vertical da pagina. */
body.woocommerce-order-received .woocommerce-order-details{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	overflow:hidden;
	margin:0;
}
/* GOTCHA REAL (2026-08-18, 3a rodada de correcao - achado lendo
 * "woocommerce-grid.min.css" do Astra): existe uma regra do Astra mirando
 * EXATAMENTE estes 2 titulos, e com 4 classes + 1 elemento
 * (".woocommerce-page.woocommerce-checkout .woocommerce-order
 * h2.woocommerce-order-details__title", e a mesma coisa pro
 * ".woocommerce-column__title") - contra as 2 classes + 1 elemento daqui.
 * Ela vence e devolve o visual de fabrica do Astra: fundo "#fbfbfb", padding
 * "1em" (16px, desalinhando o titulo das linhas da tabela, que usam 20px),
 * "font-size:1.3rem" (~21px, no lugar dos 15px do mockup) e - o mais visivel -
 * "border-width:1px 1px 0 1px" desenhando uma CAIXA propria em volta do
 * cabecalho, dentro do card. Dai o "cabecalho fora do mockup" reportado pelo
 * Ronaldo nos 3 titulos ("Detalhes do pedido", "Endereco de cobranca",
 * "Endereco de entrega").
 *
 * "!important" nas propriedades disputadas (mesma logica ja' usada varias
 * vezes neste arquivo pra' regras do Astra com mais classes) - subir a
 * especificidade "na mao" exigiria repetir as 4 classes do Astra, o que
 * amarraria o seletor daqui ao HTML interno do tema pai. */
body.woocommerce-order-received .woocommerce-order-details__title{
	margin:0 !important;
	padding:14px 20px !important;
	background:var(--bg-grid) !important;
	border:none !important;
	font-size:15px !important;
	font-weight:700;
	color:var(--petrol);
}
/* GOTCHA REAL (2026-08-18, achado lendo "woocommerce-grid.min.css" do
 * Astra): a tabela "shop_table" ganha, de fabrica, SUA PROPRIA borda +
 * raio + margem ("table.shop_table{border:1px solid var(--ast-border-
 * color);margin:0 -1px 24px 0;border-radius:5px}", depois sobrescrito por
 * OUTRA regra do mesmo arquivo pra' "border-radius:0") - uma caixa
 * quadrada DENTRO da caixa arredondada que a ".woocommerce-order-details"
 * ja' desenha (acima), sobrando um "card dentro do card" - o efeito
 * "quebrado" reportado pelo Ronaldo. So' a caixa DE FORA (".woocommerce-
 * order-details") deve ter borda/raio; a tabela em si fica sem nenhuma. */
body.woocommerce-order-received table.shop_table.order_details{
	border:none !important;
	border-radius:0 !important;
	margin:0 !important;
	width:100%;
}
/* Cabecalho nativo "Product"/"Total" escondido - divergencia so' visual
 * (nenhuma informacao removida, os itens continuam listados direto). */
body.woocommerce-order-received table.shop_table.order_details thead{
	display:none;
}
/* GOTCHA JA' CONHECIDO (mesma auditoria do Checkout, ver style.css secao
 * "Pagina do Checkout" e memory/pagina-checkout.md): o Astra tem
 * ".woocommerce.woocommerce-checkout table.shop_table td{padding:10px 10px
 * 10px 0}" (3 classes - "woocommerce"+"woocommerce-checkout"+"shop_table" -
 * e esta pagina AINDA carrega "woocommerce-checkout" no body, e' a mesma
 * pagina do Checkout so' que no endpoint "order-received"). "!important"
 * aqui pelo mesmo motivo de la': garantir que o reset vence independente de
 * como o Astra formatar a regra dele no futuro. */
body.woocommerce-order-received table.shop_table.order_details td,
body.woocommerce-order-received table.shop_table.order_details th{
	padding:12px 20px !important;
	border:none !important;
	border-bottom:1px solid var(--border-divider) !important;
	font-size:13px;
	font-weight:400;
	color:#333;
	text-align:left;
}
body.woocommerce-order-received table.shop_table.order_details tfoot tr:last-child td,
body.woocommerce-order-received table.shop_table.order_details tfoot tr:last-child th{
	border-bottom:none !important;
	font-size:15px;
	font-weight:700;
	color:var(--petrol);
}
/* So' a coluna de VALOR alinha a direita (a de rotulo/nome do produto fica
 * a esquerda, no alinhamento padrao) - sem "white-space:nowrap" aqui: o
 * texto da opcao de frete e' longo ("R$ 19,75 via Jadlog Package
 * (Economico) (4 a 6 dias uteis)") e precisa poder quebrar linha no mobile
 * (mesmo cuidado ja' registrado pro Checkout, pagina-checkout.md item 3). */
body.woocommerce-order-received table.shop_table.order_details td:last-child,
body.woocommerce-order-received table.shop_table.order_details th:last-child{
	text-align:right;
}
/* MESMO GOTCHA do Checkout (Astra: ".product-name{display:flex;align-
 * items:center;flex-wrap:wrap}", regra GLOBAL do tema pai pensada pro
 * carrinho nativo com miniatura - sem miniatura aqui, vira flex-item o
 * "<strong class=product-quantity>" e quebra pra' linha propria sozinho). */
body.woocommerce-order-received table.shop_table.order_details td.product-name{
	display:table-cell !important;
}
body.woocommerce-order-received table.shop_table.order_details .product-name .product-quantity{
	font-weight:400;
	color:#9a9a8f;
	white-space:nowrap;
}
/* Preco de cada item: negrito + petroleo (o nome do produto e' um <a>, ja'
 * herda a cor de link do site - nao precisa de regra propria). O
 * ".woocommerce-Price-amount" precisa ser mirado direto (nao so' o "<td>"
 * pai) por causa do MESMO gotcha do Checkout: o Astra tem ".woocommerce-
 * page table.shop_table .woocommerce-Price-amount{font-weight:400}", que
 * bate direto no span e vence heranca do "<td>". */
body.woocommerce-order-received table.shop_table.order_details .product-total,
body.woocommerce-order-received table.shop_table.order_details .product-total .woocommerce-Price-amount{
	font-weight:700;
	color:var(--petrol);
}
/* "Total" (sempre a ULTIMA linha do rodape, "get_order_item_totals()" do
 * WooCommerce) tambem precisa mirar o span do preco pelo mesmo motivo. Os
 * "<th>" de rotulo do rodape ("Subtotal"/"Entrega") sao <th> nativos (peso
 * negrito de fabrica do navegador) - resetados pro peso normal, igual ao
 * mockup (so' "Total" fica em destaque). */
body.woocommerce-order-received table.shop_table.order_details tfoot th{
	font-weight:400;
	text-align:left;
}
body.woocommerce-order-received table.shop_table.order_details tfoot tr:last-child th,
body.woocommerce-order-received table.shop_table.order_details tfoot tr:last-child .woocommerce-Price-amount{
	font-weight:700;
	color:var(--petrol);
}
/* ACHADO (2026-08-18, verificado ao vivo no pedido #570): o plugin Mercado
 * Pago pendura um SEGUNDO bloco de QR code - sem estilo nenhum, imagem +
 * codigo Pix em texto corrido - logo apos a tabela ("woocommerce_order_
 * details_after_order_table", "PixGateway::renderOrderReceivedTemplate()",
 * template "pix-order-received-image.php"). Ele so' aparece quando a meta
 * "pix_on" do pedido esta' marcada (achado direto no banco, nao documentado
 * em nenhum lugar do plugin) - o pedido de teste usado no mockup tinha essa
 * meta, entao o bloco (redundante: o MESMO QR/codigo ja' aparece no card do
 * Pix, com estilo, mais acima) sempre esteve la', so' passou despercebido
 * antes do redesenho. Escondido por CSS (nao "remove_action": o callback e'
 * um metodo de INSTANCIA do proprio plugin, sem referencia estavel pra'
 * remover com seguranca) - nenhuma informacao se perde, o mesmo QR/codigo
 * continua visivel no card de cima. */
body.woocommerce-order-received .mp-pix-image-container{
	display:none;
}

/* --- Enderecos (woocommerce/order/order-details-customer.php, NATIVO) --- */
body.woocommerce-order-received .woocommerce-customer-details{
	margin-top:0;
}
/* Reset do float/clearfix nativo do ".col2-set" - MESMO gotcha ja'
 * documentado na Minha Conta (memory/pagina-minha-conta.md: "clearfix do
 * .col2-set virando grid item"). "!important" por seguranca (mesma familia
 * de bug que ja' apareceu com ID em varios lugares deste arquivo). */
body.woocommerce-order-received .woocommerce-columns--addresses.col2-set{
	display:grid !important;
	grid-template-columns:1fr 1fr !important;
	gap:16px;
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:20px;
	margin:0;
}
/* GOTCHA REAL (2026-08-18, mesma causa do "caixa vazia" da grade de
 * metadados acima): o WooCommerce nativo tem ".col2-set{zoom:1}" +
 * ".col2-set::before,::after{content:" ";display:table}" (clearfix
 * classico) - virando o container "display:grid" (!important acima), os 2
 * pseudo-elementos GERADOS passam a contar como 2 ITENS DE GRID reais (um
 * antes de "Endereco de cobranca", outro depois de "Endereco de entrega"),
 * empurrando os 2 enderecos de verdade pra' diagonal em vez de lado a
 * lado - o "quebra de linha" reportado pelo Ronaldo. "content:none" tira
 * os pseudo-elementos do fluxo de vez. */
body.woocommerce-order-received .woocommerce-columns--addresses.col2-set::before,
body.woocommerce-order-received .woocommerce-columns--addresses.col2-set::after{
	content:none;
}
body.woocommerce-order-received .woocommerce-columns--addresses .col-1,
body.woocommerce-order-received .woocommerce-columns--addresses .col-2{
	float:none !important;
	width:auto !important;
	margin:0;
}
body.woocommerce-order-received .woocommerce-columns--addresses .col-2{
	border-left:1px solid var(--border-divider);
	padding-left:16px;
}
/* MESMO gotcha do "woocommerce-order-details__title" acima (a regra de 4
 * classes do Astra mira os 2 titulos na mesma lista de seletores) + uma
 * SEGUNDA regra, generica, so' pro ".woocommerce-column__title"
 * ("background:#fbfbfb;padding:.5em;border-width:1px 1px 0 1px"). Aqui os 2
 * titulos de endereco sao texto puro no mockup - sem fundo, sem caixa, sem
 * padding - entao o reset zera as 3 coisas. */
body.woocommerce-order-received .woocommerce-column__title{
	background:none !important;
	padding:0 !important;
	border:none !important;
	font-size:14px !important;
	font-weight:700;
	color:var(--petrol);
	margin:0 0 10px !important;
}
/* "border:none;padding:0;width:auto" NAO sao decoracao: o WooCommerce
 * ("woocommerce.css") tem um seletor GENERICO pra' QUALQUER "<address>" da
 * pagina ("address{border:1px solid rgba(0,0,0,.1);...}") - mesmo "frame
 * interno" ja' documentado e corrigido na Minha Conta (memory/pagina-
 * minha-conta-logada.md). GOTCHA A MAIS aqui (achado lendo "woocommerce-
 * grid.min.css" do Astra): existe uma SEGUNDA regra, so' pra esta pagina
 * (".woocommerce-page.woocommerce-checkout .woocommerce-customer-details
 * address", 3 classes - e esta pagina carrega "woocommerce-page" E
 * "woocommerce-checkout" no body) que reintroduz "border-right-width:1px;
 * border-bottom-width:1px" por cima - 3 classes vencem as 2 daqui, sobrando
 * uma borda "pela metade" (so embaixo/direita) mesmo com "border:none"
 * aqui. "!important" agora, mesma logica ja' usada varias vezes neste
 * arquivo pra' regras do Astra com mais classes/ID. */
body.woocommerce-order-received .woocommerce-customer-details address{
	font-size:13px;
	color:#555;
	line-height:1.6;
	font-style:normal;
	border:none !important;
	padding:0;
	width:auto;
	margin:0;
}
/* Primeira linha do endereco formatado (o nome do cliente) em destaque -
 * "get_formatted_billing_address()" devolve tudo como texto corrido
 * separado por "<br>" (sem elemento proprio por linha pra' isolar so' o
 * nome), entao "::first-line" e' a unica via 100% CSS pra' isso. */
body.woocommerce-order-received .woocommerce-customer-details address::first-line{
	color:#333;
	font-weight:700;
}
body.woocommerce-order-received .woocommerce-customer-details--phone,
body.woocommerce-order-received .woocommerce-customer-details--email{
	margin:6px 0 0;
}
body.woocommerce-order-received .woocommerce-customer-details--phone::before{
	content:"📞 ";
}
body.woocommerce-order-received .woocommerce-customer-details--email::before{
	content:"✉️ ";
}
@media (max-width:859px){
	body.woocommerce-order-received .woocommerce-columns--addresses.col2-set{
		display:flex !important;
		flex-direction:column;
		gap:16px;
	}
	body.woocommerce-order-received .woocommerce-columns--addresses .col-2{
		border-left:none;
		border-top:1px solid var(--border-divider);
		padding-left:0;
		padding-top:16px;
	}
}

/* =========================================================================
 * Minha Conta - AREA LOGADA (Painel, Pedidos, Detalhes do pedido, Downloads,
 * Enderecos, Editar endereco, Detalhes da conta), 2026-08-14.
 * Handoff: identidade-visual/claude-design/minha-conta-area-logada/.
 * Ver memory/pagina-minha-conta-logada.md pro raciocinio completo (por que
 * cada tela virou template PHP proprio, gotchas do Astra/plugin brasileiro,
 * decisoes tomadas com o Ronaldo).
 *
 * Ponto de corte mobile: 720px (o handoff usa esse valor especificamente
 * pra essa area - DIFERENTE dos 921/922px do Carrinho/Checkout, telas mais
 * densas em tabela/formulario. Nao e' inconsistencia, e' o breakpoint que o
 * proprio handoff documenta pra essa area).
 *
 * Todo o escopo abaixo fica de fora do cabecalho/barra de categorias/
 * rodape (inalterados, confirmado com o Ronaldo) - so' a area de conteudo
 * da Minha Conta.
 * ========================================================================= */

/* --- Casca: sidebar (desktop) / pill-nav (mobile) + conteudo, grade 220px+1fr --- */
body.woocommerce-account .laluce-ma-shell{
	display:grid;
	grid-template-columns:220px 1fr;
	gap:24px;
	align-items:start;
}
body.woocommerce-account .laluce-ma-navcol{
	min-width:0;
}
/* "width:100%;float:none" NAO sao decoracao: o WooCommerce (woocommerce-
   layout.css) E o Astra (compatibility/woocommerce/woocommerce-layout.min.
   css, copia propria do mesmo arquivo) tem AMBOS uma regra nativa
   ".woocommerce-MyAccount-content{float:right;width:68%}" pensada pro
   layout de 2 colunas SEM tema (nav 30% + conteudo 68%, lado a lado por
   float). Nosso "<div>" de conteudo MANTEM essa classe nativa (compat com
   qualquer hook/plugin que dependa dela) mas fica DENTRO de uma grade
   propria (".laluce-ma-shell") - sem essa regra aqui, os 68% eram
   calculados em cima da coluna "1fr" (~996px numa tela de 1240px), deixando
   a caixa de conteudo (tabela de Pedidos, cartoes de Endereco etc.) bem
   mais estreita que o previsto no handoff, com um vao vazio a direita -
   reportado pelo Ronaldo em TODAS as telas (2026-08-14, mesmo elemento
   compartilhado por todas). "float" nao tem efeito num item de grid (a
   spec ignora), mas "width" continua valendo - por isso so' o "width"
   precisava de fato ser resetado; "float:none" fica so' por clareza/
   robustez. */
body.woocommerce-account .laluce-ma-content{
	display:flex;
	flex-direction:column;
	gap:16px;
	min-width:0;
	width:100%;
	float:none;
}
@media (max-width:720px){
	body.woocommerce-account .laluce-ma-shell{
		display:flex;
		flex-direction:column;
		/* "align-items:stretch" (2026-08-15) CORRIGE o layout quebrado do mobile
		   reportado pelo Ronaldo com print. A regra base acima (grade do
		   desktop) traz "align-items:start" pra alinhar sidebar e conteudo pelo
		   topo; este bloco so' trocava "display"/"flex-direction", entao o
		   "start" continuava valendo depois da virada - e em "flex-direction:
		   column" o alinhamento manda na LARGURA (eixo cruzado), nao na altura:
		   cada filho passava a ter a largura do proprio conteudo em vez da
		   largura do container.
		   Medido ao vivo (Playwright, autorizado pelo Ronaldo, 2026-08-15) em
		   390px de tela: ".laluce-ma-navcol" ficava com 579px (a soma natural
		   das 6 pills) dentro de um pai de 350px, jogando o documento pra 599px
		   de largura - 209px de estouro. Efeitos que o Ronaldo viu: cartao de
		   pedido e rodape cortados na direita, e faixa creme onde cabecalho/
		   menu/rodape (largura da TELA) nao alcancam a largura do DOCUMENTO.
		   O ".laluce-ma-content" escapava por acidente: tem "width:100%" proprio
		   (posto por outro motivo, o reset dos 68% do WooCommerce, ver acima) -
		   por isso so' a coluna de navegacao estourava.
		   Com "stretch", ".laluce-ma-pills" volta a caber na tela e as pills
		   rolam dentro do proprio "overflow-x:auto" (que ja existia e nunca
		   chegava a ser usado, porque a fileira nunca era espremida - as setas
		   de rolagem de assets/js/my-account.js dependem disso pra aparecer). */
		align-items:stretch;
	}
}

/* --- Sidebar (desktop) --- */
body.woocommerce-account .laluce-ma-sidebar{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	overflow:hidden;
}
body.woocommerce-account .laluce-ma-sidebar-item{
	display:block;
	padding:13px 18px;
	font-size:14px;
	line-height:1.4;
	font-weight:400;
	color:var(--petrol-light);
	background:#fff;
	border-bottom:1px solid var(--border-divider);
	text-decoration:none;
}
body.woocommerce-account .laluce-ma-sidebar-item:last-child{
	border-bottom:none;
}
body.woocommerce-account .laluce-ma-sidebar-item:hover{
	color:var(--brown);
}
body.woocommerce-account .laluce-ma-sidebar-item.is-active{
	color:var(--petrol);
	background:var(--bg-grid);
	font-weight:700;
}
body.woocommerce-account .laluce-ma-sidebar-item--logout{
	color:#c0453a;
}
body.woocommerce-account .laluce-ma-sidebar-item--logout:hover{
	color:#c0453a;
	opacity:.8;
}

/* --- Pill-nav (mobile): escondida no desktop, "sticky" via CSS puro (o
   prototipo simulava isso com JS porque o sandbox dele nao suporta
   "position:sticky" direito - producao nao precisa). Confirmado que o Astra
   nao usa cabecalho fixo/sticky nesta loja, entao "top:0" e' seguro (nao ha'
   cabecalho por cima pra sobrepor). --- */
body.woocommerce-account .laluce-ma-subnav-sticky{
	display:none;
}
@media (max-width:720px){
	body.woocommerce-account .laluce-ma-sidebar{
		display:none;
	}
	body.woocommerce-account .laluce-ma-subnav-sticky{
		display:block;
		position:sticky;
		top:0;
		z-index:50;
		background:var(--bg-site);
		padding:10px 0 12px;
	}
}
body.woocommerce-account .laluce-ma-pills-wrap{
	position:relative;
}
body.woocommerce-account .laluce-ma-pills{
	display:flex;
	gap:8px;
	overflow-x:auto;
	scroll-behavior:smooth;
	scrollbar-width:none;
	-ms-overflow-style:none;
}
body.woocommerce-account .laluce-ma-pills::-webkit-scrollbar{
	display:none;
}
body.woocommerce-account .laluce-ma-pill{
	padding:9px 16px;
	font-size:13px;
	font-weight:700;
	border-radius:5px;
	white-space:nowrap;
	flex-shrink:0;
	border:1px solid var(--border-light);
	background:#fff;
	color:var(--petrol-light);
	text-decoration:none;
}
body.woocommerce-account .laluce-ma-pill.is-active{
	background:var(--petrol);
	color:var(--cream);
	border-color:var(--petrol);
}
body.woocommerce-account .laluce-ma-pill--logout{
	color:#c0453a;
}
body.woocommerce-account .laluce-ma-pill--logout.is-active{
	color:var(--cream);
}
body.woocommerce-account .laluce-ma-pill-arrow{
	position:absolute;
	top:0;
	bottom:0;
	width:26px;
	display:none;
	align-items:center;
	border:none;
	background:none;
	padding:0;
	cursor:pointer;
	opacity:0;
	transition:opacity .15s;
}
body.woocommerce-account .laluce-ma-pill-arrow.is-visible{
	display:flex;
	opacity:1;
}
body.woocommerce-account .laluce-ma-pill-arrow--left{
	left:0;
	justify-content:flex-start;
	background:linear-gradient(to right, var(--bg-site) 45%, transparent);
}
body.woocommerce-account .laluce-ma-pill-arrow--right{
	right:0;
	justify-content:flex-end;
	background:linear-gradient(to left, var(--bg-site) 45%, transparent);
}

/* --- Elementos compartilhados entre varias telas: tile de icone, cartao,
   titulo de secao, badge de status, botao --- */
body.woocommerce-account .laluce-ma-tile{
	border-radius:5px;
	flex-shrink:0;
	display:flex;
	align-items:center;
	justify-content:center;
}
body.woocommerce-account .laluce-ma-card{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:22px 24px;
}
body.woocommerce-account .laluce-ma-card-header{
	display:flex;
	align-items:center;
	gap:12px;
	padding-bottom:14px;
	margin-bottom:16px;
	border-bottom:1px solid var(--border-divider);
}
body.woocommerce-account .laluce-ma-card-header-title{
	font-size:16px;
	font-weight:700;
	color:var(--petrol);
}
body.woocommerce-account .laluce-ma-section-title{
	font-size:15px;
	font-weight:700;
	color:var(--petrol);
	margin:0 0 10px;
}
body.woocommerce-account .laluce-ma-section-title--flush{
	margin-bottom:0;
}
body.woocommerce-account .laluce-ma-badge{
	display:inline-block;
	font-size:12px;
	font-weight:700;
	padding:5px 10px;
	border-radius:5px;
	border:1px solid;
	white-space:nowrap;
	line-height:1.3;
}
body.woocommerce-account .laluce-ma-badge--lg{
	padding:6px 12px;
}
body.woocommerce-account .laluce-ma-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	font-size:13px;
	font-weight:700;
	padding:9px 16px;
	border-radius:6px;
	border:1px solid transparent;
	cursor:pointer;
	text-decoration:none;
	box-sizing:border-box;
	white-space:nowrap;
	line-height:1.3;
}
body.woocommerce-account a.laluce-ma-btn:hover{
	opacity:.9;
}
body.woocommerce-account .laluce-ma-btn--primary{
	background:var(--brown);
	color:var(--cream);
}
body.woocommerce-account .laluce-ma-btn--outline{
	background:#fff;
	color:var(--petrol-light);
	border-color:var(--border-light);
}
body.woocommerce-account .laluce-ma-btn--fixed{
	width:150px;
}
body.woocommerce-account .laluce-ma-btn--block{
	width:100%;
}

/* --- Painel --- */
body.woocommerce-account .laluce-ma-greet-title{
	font-size:20px;
	font-weight:700;
	color:var(--petrol);
}
body.woocommerce-account .laluce-ma-greet-text{
	margin-top:10px;
	font-size:14px;
	color:#333;
	line-height:1.6;
}
body.woocommerce-account .laluce-ma-greet-hint{
	display:none;
	margin-top:8px;
	font-size:12px;
	color:#7a7a70;
	font-style:italic;
}
@media (max-width:720px){
	body.woocommerce-account .laluce-ma-greet-hint{
		display:block;
	}
}
body.woocommerce-account .laluce-ma-panel-grid{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:16px;
}
body.woocommerce-account .laluce-ma-panel-card{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:20px 22px;
	display:flex;
	align-items:center;
	gap:14px;
	text-decoration:none;
}
body.woocommerce-account .laluce-ma-panel-card .laluce-ma-tile{
	width:38px;
	height:38px;
}
body.woocommerce-account .laluce-ma-panel-card-title{
	font-size:15px;
	font-weight:700;
	color:var(--petrol);
}
body.woocommerce-account .laluce-ma-panel-card-desc{
	font-size:13px;
	color:#7a7a70;
	margin-top:2px;
}
@media (max-width:720px){
	body.woocommerce-account .laluce-ma-panel-grid{
		display:flex;
		flex-direction:column;
	}
}

/* --- Pedidos: tabela (desktop) / cartoes (mobile) - as 2 marcacoes sempre
   saem juntas do PHP (ver orders.php), so' o CSS decide qual aparece. --- */
body.woocommerce-account .laluce-ma-orders-table{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	overflow:hidden;
}
body.woocommerce-account .laluce-ma-orders-head{
	display:grid;
	grid-template-columns:52px 84px 150px 0.9fr 1fr 76px;
	gap:8px;
	padding:12px 14px;
	background:var(--bg-grid);
	font-size:12px;
	font-weight:700;
	color:var(--petrol);
	letter-spacing:.03em;
	text-transform:uppercase;
}
body.woocommerce-account .laluce-ma-orders-head-actions{
	text-align:right;
}
body.woocommerce-account .laluce-ma-orders-row{
	display:grid;
	grid-template-columns:52px 84px 150px 0.9fr 1fr 76px;
	gap:8px;
	padding:14px;
	align-items:center;
	border-top:1px solid var(--border-divider);
	font-size:13px;
}
body.woocommerce-account .laluce-ma-orders-cell-id{
	font-weight:700;
	color:var(--petrol-light);
}
body.woocommerce-account .laluce-ma-orders-cell-date{
	color:#333;
}
body.woocommerce-account .laluce-ma-orders-cell-tracking{
	color:#7a7a70;
}
body.woocommerce-account .laluce-ma-orders-cell-tracking a{
	color:#7a7a70;
	text-decoration:underline;
}
body.woocommerce-account .laluce-ma-orders-cell-total{
	color:#333;
}
body.woocommerce-account .laluce-ma-orders-cell-actions{
	display:flex;
	justify-content:flex-end;
	align-items:center;
	gap:10px;
}
body.woocommerce-account .laluce-ma-orders-action{
	display:flex;
	align-items:center;
	text-decoration:none;
}
body.woocommerce-account .laluce-ma-orders-card{
	display:none;
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:16px;
	flex-direction:column;
	gap:8px;
	margin-top:12px;
}
body.woocommerce-account .laluce-ma-orders-table > .laluce-ma-orders-card:first-child{
	margin-top:0;
}
body.woocommerce-account .laluce-ma-orders-card-top{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:8px;
}
body.woocommerce-account .laluce-ma-orders-card-id{
	font-weight:700;
	color:var(--petrol-light);
	font-size:14px;
	min-width:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
body.woocommerce-account .laluce-ma-orders-card-meta{
	font-size:12px;
	color:#7a7a70;
	line-height:1.5;
}
body.woocommerce-account .laluce-ma-orders-card-meta a{
	color:#7a7a70;
}
body.woocommerce-account .laluce-ma-orders-card-total{
	font-size:13px;
	color:#333;
}
body.woocommerce-account .laluce-ma-orders-card-actions{
	display:flex;
	gap:8px;
	margin-top:2px;
}
body.woocommerce-account .laluce-ma-orders-card-actions .laluce-ma-btn{
	flex:1;
	font-size:13px;
	padding:9px;
}
body.woocommerce-account .laluce-ma-orders-card-wa{
	width:42px;
	flex-shrink:0;
	background:#fff;
	border:1px solid var(--border-light);
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:6px;
}
@media (max-width:720px){
	body.woocommerce-account .laluce-ma-orders-table{
		background:transparent;
		border:none;
		border-radius:0;
		overflow:visible;
	}
	body.woocommerce-account .laluce-ma-orders-head,
	body.woocommerce-account .laluce-ma-orders-row{
		display:none;
	}
	body.woocommerce-account .laluce-ma-orders-card{
		display:flex;
	}
}
body.woocommerce-account .laluce-ma-pagination{
	display:flex;
	gap:12px;
	justify-content:flex-end;
	margin-top:4px;
}
body.woocommerce-account .laluce-ma-pagination .laluce-ma-btn{
	font-size:14px;
	padding:11px 22px;
}

/* Estado vazio (sem pedidos) - mesmo cartao branco com borda/raio 5px da
   Lista de Desejos (".laluce-wl-empty", ver style.css), em vez da caixa
   cinza padrao do WooCommerce/Astra (".woocommerce-info"). */
body.woocommerce-account .laluce-ma-empty{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:32px 16px;
	text-align:center;
}
body.woocommerce-account .laluce-ma-empty p{
	margin:0 0 16px;
	font-size:14px;
	color:#7a7a70;
}

/* --- Downloads: mesma tecnica de tabela/cartao duplos --- */
body.woocommerce-account .laluce-ma-downloads-table{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	overflow:hidden;
}
body.woocommerce-account .laluce-ma-downloads-head{
	display:grid;
	grid-template-columns:1fr 130px 100px 150px;
	gap:10px;
	padding:12px 16px;
	background:var(--bg-grid);
	font-size:12px;
	font-weight:700;
	color:var(--petrol);
	letter-spacing:.03em;
	text-transform:uppercase;
}
body.woocommerce-account .laluce-ma-downloads-head-center{
	text-align:center;
}
body.woocommerce-account .laluce-ma-downloads-row{
	display:grid;
	grid-template-columns:1fr 130px 100px 150px;
	gap:10px;
	padding:10px 16px;
	align-items:center;
	border-top:1px solid var(--border-divider);
	font-size:13px;
}
body.woocommerce-account .laluce-ma-downloads-name{
	color:var(--petrol-light);
	font-weight:700;
}
body.woocommerce-account .laluce-ma-downloads-remaining{
	font-size:18px;
	text-align:center;
	color:#333;
}
body.woocommerce-account .laluce-ma-downloads-expires{
	text-align:center;
	color:#333;
}
body.woocommerce-account .laluce-ma-downloads-action{
	display:flex;
	justify-content:center;
}
body.woocommerce-account .laluce-ma-downloads-card{
	display:none;
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:16px;
	flex-direction:column;
	gap:8px;
	margin-top:12px;
}
body.woocommerce-account .laluce-ma-downloads-table > .laluce-ma-downloads-card:first-child{
	margin-top:0;
}
body.woocommerce-account .laluce-ma-downloads-card-meta{
	font-size:12px;
	color:#7a7a70;
}
body.woocommerce-account .laluce-ma-downloads-card-remaining{
	font-size:16px;
}
@media (max-width:720px){
	body.woocommerce-account .laluce-ma-downloads-table{
		background:transparent;
		border:none;
		overflow:visible;
	}
	body.woocommerce-account .laluce-ma-downloads-head,
	body.woocommerce-account .laluce-ma-downloads-row{
		display:none;
	}
	body.woocommerce-account .laluce-ma-downloads-card{
		display:flex;
	}
}

/* --- Detalhes do pedido --- */
body.woocommerce-account .laluce-ma-order-header{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:18px 22px;
	display:flex;
	align-items:center;
	gap:16px;
	flex-wrap:wrap;
}
body.woocommerce-account .laluce-ma-order-header .laluce-ma-tile{
	width:44px;
	height:44px;
}
body.woocommerce-account .laluce-ma-order-header-text{
	flex:1;
	min-width:180px;
}
body.woocommerce-account .laluce-ma-order-header-eyebrow{
	font-size:12px;
	color:#7a7a70;
	text-transform:uppercase;
	letter-spacing:.03em;
	margin-bottom:2px;
}
body.woocommerce-account .laluce-ma-order-header-title{
	font-size:17px;
	font-weight:700;
	color:var(--petrol);
}
body.woocommerce-account .laluce-ma-order-body{
	display:flex;
	flex-direction:column;
	gap:16px;
}
body.woocommerce-account .laluce-ma-order-notes-list{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	margin:0;
	padding:0;
	list-style:none;
}
body.woocommerce-account .laluce-ma-order-notes-list li{
	padding:14px 16px;
	border-top:1px solid var(--border-divider);
}
body.woocommerce-account .laluce-ma-order-notes-list li:first-child{
	border-top:none;
}
body.woocommerce-account .laluce-ma-order-notes-meta{
	font-size:12px;
	color:#7a7a70;
	margin-bottom:4px;
}
body.woocommerce-account .laluce-ma-order-notes-text{
	font-size:13px;
	color:#333;
}
body.woocommerce-account .laluce-ma-order-notes-text p{
	margin:0;
}
body.woocommerce-account .laluce-ma-order-downloads{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	overflow:hidden;
}
body.woocommerce-account .laluce-ma-order-downloads-row{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:10px;
	padding:14px 16px;
	border-top:1px solid var(--border-divider);
	font-size:13px;
}
body.woocommerce-account .laluce-ma-order-downloads:first-child .laluce-ma-order-downloads-row:first-child{
	border-top:none;
}
body.woocommerce-account .laluce-ma-order-downloads-info{
	flex:1;
	min-width:120px;
}
body.woocommerce-account .laluce-ma-order-downloads-name{
	color:var(--petrol-light);
	font-weight:700;
}
body.woocommerce-account .laluce-ma-order-downloads-meta{
	color:#7a7a70;
	font-size:12px;
	margin-top:2px;
}
body.woocommerce-account .laluce-ma-order-items{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:4px 20px;
}
body.woocommerce-account .laluce-ma-order-item{
	display:flex;
	align-items:center;
	gap:12px;
	padding:14px 0;
	border-bottom:1px solid var(--border-divider);
}
body.woocommerce-account .laluce-ma-order-item--last{
	border-bottom:none;
}
body.woocommerce-account .laluce-ma-order-item-thumb{
	width:44px;
	height:44px;
	border-radius:5px;
	background:var(--bg-grid);
	flex-shrink:0;
	overflow:hidden;
}
body.woocommerce-account .laluce-ma-order-item-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
body.woocommerce-account .laluce-ma-order-item-info{
	flex:1;
	min-width:0;
}
body.woocommerce-account .laluce-ma-order-item-name{
	font-size:13px;
	font-weight:700;
	color:var(--petrol-light);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
body.woocommerce-account .laluce-ma-order-item-qty{
	font-size:12px;
	color:#7a7a70;
}
body.woocommerce-account .laluce-ma-order-item-total{
	font-size:13px;
	font-weight:700;
	color:#333;
	white-space:nowrap;
}
body.woocommerce-account .laluce-ma-order-summary{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:20px;
}
body.woocommerce-account .laluce-ma-order-summary-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:14px;
	padding-bottom:12px;
	border-bottom:1px solid var(--border-divider);
}
body.woocommerce-account .laluce-ma-order-again--top{
	display:inline-flex;
}
body.woocommerce-account .laluce-ma-order-again--bottom{
	display:none;
}
body.woocommerce-account .laluce-ma-order-summary-row{
	display:flex;
	justify-content:space-between;
	gap:8px;
	font-size:13px;
	color:#333;
	padding:6px 0;
}
body.woocommerce-account .laluce-ma-order-summary-sub{
	color:#7a7a70;
	font-size:12px;
}
body.woocommerce-account .laluce-ma-order-summary-total{
	font-size:18px;
	font-weight:700;
	color:var(--petrol);
	padding:12px 0;
	border-top:1px solid var(--border-divider);
	margin-top:4px;
}
body.woocommerce-account .laluce-ma-order-summary-payment{
	align-items:center;
	padding:12px 0;
	border-top:1px solid var(--border-divider);
	margin-top:4px;
}
body.woocommerce-account .laluce-ma-order-summary-payment > div:last-child{
	font-weight:700;
	color:var(--petrol-light);
	text-align:right;
}
@media (max-width:720px){
	body.woocommerce-account .laluce-ma-order-again--top{
		display:none;
	}
	body.woocommerce-account .laluce-ma-order-again--bottom{
		display:flex;
		margin-top:16px;
		width:100%;
		font-size:14px;
		padding:12px;
	}
}

/* --- Enderecos (lista) e cartoes de endereco reaproveitados em Detalhes do
   pedido (variante "--plain", sem tile/botao) --- */
body.woocommerce-account .laluce-ma-address-intro{
	font-size:14px;
	color:#333;
	margin:0 0 4px;
}
body.woocommerce-account .laluce-ma-address-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
}
@media (max-width:720px){
	body.woocommerce-account .laluce-ma-address-grid{
		display:flex;
		flex-direction:column;
	}
}
body.woocommerce-account .laluce-ma-address-card{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	padding:20px 22px;
	display:flex;
	flex-direction:column;
}
/* Sem "border-bottom": o divisor curto (nao esticava ate a borda direita do
   cartao, virando um "quadro" solto em volta so' do icone+titulo) foi
   removido a pedido do Ronaldo (2026-08-14, print da tela Enderecos). */
body.woocommerce-account .laluce-ma-address-card-header{
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:16px;
}
body.woocommerce-account .laluce-ma-address-card-header .laluce-ma-tile{
	width:38px;
	height:38px;
}
body.woocommerce-account .laluce-ma-address-card-title{
	font-size:16px;
	font-weight:700;
	color:var(--petrol);
}
/* "border:none;padding:0;width:auto" NAO sao decoracao: o WooCommerce
   ("woocommerce.css") tem um seletor GENERICO pra' QUALQUER "<address>" da
   pagina - "address{border:1px solid rgba(0,0,0,.1);border-bottom-
   width:2px;border-right-width:2px;padding:6px 12px;width:100%;border-
   radius:5px}" - pensado pro proprio bloco nativo de endereco do
   WooCommerce. Usamos a tag semantica "<address>" aqui (apropriada pro
   conteudo), mas isso trazia de gracas uma caixa com borda em volta so' do
   texto do endereco - o "frame interno" reportado pelo Ronaldo
   (2026-08-14, print da tela Enderecos). Nossa classe ja' tem
   especificidade maior que o seletor generico, mas isso so' importa
   propriedade por propriedade - como nunca declaravamos "border"/"padding"/
   "width" aqui, a regra do WooCommerce continuava valendo pra essas 3.
   Corrigido resetando as 3 explicitamente. */
body.woocommerce-account .laluce-ma-address-text{
	font-size:14px;
	color:#333;
	line-height:1.75;
	flex:1;
	font-style:normal;
	border:none;
	padding:0;
	width:auto;
}
body.woocommerce-account .laluce-ma-address-card .laluce-ma-btn{
	align-self:flex-start;
	margin-top:16px;
}
body.woocommerce-account .laluce-ma-address-card--plain{
	padding:18px 20px;
}
body.woocommerce-account .laluce-ma-address-card--plain .laluce-ma-address-text{
	font-size:13px;
	line-height:1.7;
}
body.woocommerce-account .laluce-ma-address-extra{
	margin-top:8px;
}

/* --- Editar endereco: mesmo form nativo, campos reagrupados em "linhas"
   100% por CSS, container FLAT. Feito com CSS GRID.

   NAO USAR "<div>" por linha aqui (gotcha real, 2026-08-14, reproduzido com
   Playwright): "address-i18n.js" do proprio WooCommerce acha TODOS os
   ".form-row" do wrapper (em qualquer profundidade) e reagrupa todos no pai
   do PRIMEIRO campo em ordem de DOM - com wrapper por linha, isso jogava
   TODOS os campos (inclusive Pais/fantasmas escondidos) dentro da 1a linha.
   Por isso o container e' FLAT (".laluce-ma-address-form" e' o unico grid)
   e cada campo declara em que LINHA e em que COLUNAS ele fica ("grid-row" +
   "grid-column" por ID) - posicao explicita de grid ignora ordem de
   documento, entao a bagunca que aquele script faz no DOM deixa de importar
   por completo. Ver form-edit-address.php pro resto do raciocinio.

   POR QUE GRID E NAO O FLEXBOX DE ANTES (2026-08-14, 2o reporte do Ronaldo:
   "o card tem que ocupar toda a largura util do container" + captura com os
   campos fora de lugar): a versao anterior dava "flex-basis" em PIXEIS
   CRAVADOS (269/140/120/272...), calculados pra' somar exatamente os 710px
   de area util de um card preso em "max-width:760px". Isso so' fecha nessa
   largura EXATA - em qualquer outra, a soma da linha passa do container e o
   navegador quebra a linha no meio, empurrando campo por campo pra' linha
   seguinte em cascata (CPF caindo na linha do CEP, Complemento na do Bairro,
   Telefone e E-mail sozinhos no fim - exatamente a captura recebida). Com
   grid as colunas sao fracoes ("1fr") e se recalculam sozinhas: a linha
   fecha certinho em QUALQUER largura, sem quebra em cascata, e por isso o
   card pode enfim ocupar a coluna inteira (o "max-width:760px" saiu). */
body.woocommerce-account .laluce-ma-page-title{
	font-size:20px;
	font-weight:700;
	color:var(--petrol);
	margin-bottom:12px;
}
body.woocommerce-account .laluce-ma-edit-address-card{
	padding:24px;
}
/* Base = telas medias (721px ate' 1119px): 2 colunas, SEM posicao explicita
   - os campos entram na ordem do "order" logo abaixo (o auto-placement do
   grid respeita "order", igual ao flexbox). Abaixo de ~1120px nao ha'
   largura pra' montar a linha de 4 campos do handoff sem espremer o
   "Numero": o plugin brasileiro sobrepoe um "S/N" ABSOLUTO dentro do input,
   que come' uns 45px de area util (mesma restricao ja' documentada no
   Checkout, regra "body.woocommerce-checkout #billing_number_field").
   DESDE 2026-08-17 esta base so' vale INTEIRA de 721px a 799px: de 800px a
   1119px um "@media" proprio (mais abaixo) reescreve a grade pra' caber a
   linha de 3 campos da entrega, sem mexer em nenhuma outra linha nem no
   formulario de cobranca. */
body.woocommerce-account .laluce-ma-address-form{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:16px;
}
/* Astra da' "width:47%" pra' QUALQUER ".form-row-first"/".form-row-last" do
   site inteiro (woocommerce-layout.min.css) - a celula do grid e' quem deve
   decidir a largura aqui, nao o campo encolhendo sozinho dentro dela (mesmo
   gotcha ja documentado no Checkout, pagina-checkout.md item 8). O
   "min-width:0" tambem e' obrigatorio em grid: o tamanho minimo automatico
   de um item e' o conteudo dele, o que faria uma mascara/placeholder longa
   estourar a coluna em vez de encolher junto. */
body.woocommerce-account .laluce-ma-address-form .form-row{
	width:auto;
	min-width:0;
	margin:0;
	padding:0;
}
body.woocommerce-account .laluce-ma-address-form .form-row.form-row-first,
body.woocommerce-account .laluce-ma-address-form .form-row.form-row-last{
	width:auto;
}

/* Sequencia dos campos. No desktop largo ela vem da posicao explicita de
   grid (bloco seguinte) e este "order" nao tem efeito nenhum; nas telas
   media e pequena, onde nao ha' posicao explicita, e' ele que manda no
   auto-placement - e e' ele que neutraliza a bagunca de DOM feita pelo
   "address-i18n.js". Billing e shipping compartilham os numeros: os campos
   que so' existem na cobranca (CPF, e-mail) apenas nao aparecem no outro
   formulario, sem furo na sequencia. */
body.woocommerce-account #billing_first_name_field,
body.woocommerce-account #shipping_first_name_field{ order:10; }
body.woocommerce-account #billing_last_name_field,
body.woocommerce-account #shipping_last_name_field{ order:11; }
body.woocommerce-account #billing_document_field{ order:12; }
/* ENTREGA (2026-08-17, pedido do Ronaldo): o Telefone sobe pra logo depois do
   Sobrenome. Repetir o numero 12 do CPF nao cria conflito - CPF so' existe no
   formulario de cobranca e este Telefone so' no de entrega, os dois nunca
   aparecem juntos. O Telefone da COBRANCA continua no fim (order:40). */
body.woocommerce-account #shipping_phone_field{ order:12; }
body.woocommerce-account #billing_postcode_field,
body.woocommerce-account #shipping_postcode_field{ order:20; }
body.woocommerce-account #billing_address_1_field,
body.woocommerce-account #shipping_address_1_field{ order:21; }
body.woocommerce-account #billing_number_field,
body.woocommerce-account #shipping_number_field{ order:22; }
body.woocommerce-account #billing_address_2_field,
body.woocommerce-account #shipping_address_2_field{ order:23; }
body.woocommerce-account #billing_neighborhood_field,
body.woocommerce-account #shipping_neighborhood_field{ order:30; }
body.woocommerce-account #billing_city_field,
body.woocommerce-account #shipping_city_field{ order:31; }
body.woocommerce-account #billing_state_field,
body.woocommerce-account #shipping_state_field{ order:32; }
body.woocommerce-account #billing_phone_field{ order:40; }
body.woocommerce-account #billing_email_field{ order:41; }

/* Desktop largo: as 4 linhas do handoff, em 12 colunas fracionarias. As
   larguras (em colunas de 12) reproduzem as proporcoes do mockup
   (identidade-visual/claude-design/minha-conta-area-logada/):

     linha 1   Nome 4    | Sobrenome 4 | CPF 4              (mockup: 1fr 1fr 1fr)
     linha 2   CEP 2     | Endereco 5  | Numero 2 | Compl. 3
                                              (mockup: 120px 1.6fr 110px 1fr)
     linha 3   Bairro 5  | Cidade 5    | Estado 2      (mockup: 1fr 1fr 110px)
     linha 4   Telefone 6| E-mail 6                        (mockup: 1fr 1fr)

   Entrega nao tem CPF nem e-mail, e desde 2026-08-17 (pedido do Ronaldo) o
   Telefone dela nao fica mais numa linha propria no fim: sobe pro lugar que
   o CPF ocupa na cobranca, fechando a linha 1 como

     linha 1   Nome 5    | Sobrenome 4 | Telefone 3

   e deixando a entrega com 3 linhas em vez de 4.

   O corte em 1120px nao e' estetico: e' a largura de tela a partir da qual a
   coluna de conteudo (tela - ~22px de gutter do ".ast-container" - 220px de
   sidebar - 24px de vao) deixa 2/12 de card valerem ~120px, o piso do campo
   "Numero" por causa do "S/N" sobreposto. Abaixo disso a linha de 4 campos
   nao cabe mais; de 800px a 1119px um "@media" proprio (logo apos este
   bloco) mantem a linha de 3 campos da entrega com as demais em 2, e abaixo
   de 800px vale o grid de 2 colunas do bloco base. */
@media (min-width:1120px){
	body.woocommerce-account .laluce-ma-address-form{
		grid-template-columns:repeat(12, minmax(0, 1fr));
	}
	/* Linha 1 (cobranca): Nome / Sobrenome / CPF */
	body.woocommerce-account #billing_first_name_field{ grid-row:1; grid-column:1 / span 4; }
	body.woocommerce-account #billing_last_name_field{ grid-row:1; grid-column:5 / span 4; }
	body.woocommerce-account #billing_document_field{ grid-row:1; grid-column:9 / span 4; }
	/* Linha 1 (entrega): Nome / Sobrenome / Telefone (2026-08-17). O Telefone
	   e' o campo mais curto da linha porque o conteudo dele tem tamanho FIXO:
	   "(00) 00000-0000" mede ~105px em Lato 14px, mascara e valor real dao o
	   mesmo numero de caracteres. 3/12 e' o MENOR vao inteiro que ainda garante
	   folga - da' ~189px de campo numa tela de 1120px e ~215px no container
	   padrao do Astra (1200px), ou seja, no minimo ~60px sobrando depois do
	   texto, alem dos 12px de "padding-right" do proprio campo. Com 2/12 o
	   campo cairia pra ~121px e o texto encostaria na borda direita / seria
	   cortado. O espaco que o Telefone deixa de usar vai pro Nome (5/12) e pro
	   Sobrenome (4/12), nao vira vao morto.

	   NAO PONHA "justify-self:start" NEM "max-width" AQUI (erro real cometido e
	   corrigido em 2026-08-17, reportado pelo Ronaldo com print): a borda
	   direita do Telefone ficava ANTES da borda direita do "Complemento" (a
	   coluna 12 da grade), com um vao morto no meio. Causa: "justify-self"
	   diferente de "stretch" tira o esticamento do item de grid, e um item de
	   grid nao esticado tem largura SHRINK-TO-FIT. Com isso o "width:100%" do
	   input passa a ser resolvido contra essa largura encolhida - circular - e
	   o campo cai pra largura INTRINSECA padrao de um "<input>" (~169px na
	   pratica), ignorando a celula de grid inteira. A largura minima do
	   Telefone tem que vir do VAO (3/12), nunca de limite no proprio campo:
	   assim a borda direita sempre cai numa linha da grade, alinhada com os
	   campos das outras linhas. */
	body.woocommerce-account #shipping_first_name_field{ grid-row:1; grid-column:1 / span 5; }
	body.woocommerce-account #shipping_last_name_field{ grid-row:1; grid-column:6 / span 4; }
	body.woocommerce-account #shipping_phone_field{ grid-row:1; grid-column:10 / span 3; }
	/* Linha 2 (identica nos 2 formularios) */
	body.woocommerce-account #billing_postcode_field,
	body.woocommerce-account #shipping_postcode_field{ grid-row:2; grid-column:1 / span 2; }
	body.woocommerce-account #billing_address_1_field,
	body.woocommerce-account #shipping_address_1_field{ grid-row:2; grid-column:3 / span 5; }
	body.woocommerce-account #billing_number_field,
	body.woocommerce-account #shipping_number_field{ grid-row:2; grid-column:8 / span 2; }
	body.woocommerce-account #billing_address_2_field,
	body.woocommerce-account #shipping_address_2_field{ grid-row:2; grid-column:10 / span 3; }
	/* Linha 3 (identica nos 2 formularios) */
	body.woocommerce-account #billing_neighborhood_field,
	body.woocommerce-account #shipping_neighborhood_field{ grid-row:3; grid-column:1 / span 5; }
	body.woocommerce-account #billing_city_field,
	body.woocommerce-account #shipping_city_field{ grid-row:3; grid-column:6 / span 5; }
	body.woocommerce-account #billing_state_field,
	body.woocommerce-account #shipping_state_field{ grid-row:3; grid-column:11 / span 2; }
	/* Linha 4 (so' cobranca): Telefone / E-mail. A entrega nao tem linha 4
	   desde 2026-08-17 (o Telefone dela subiu pra linha 1) - uma linha de grid
	   sem nenhum item simplesmente nao existe, entao nao sobra vao nenhum. */
	body.woocommerce-account #billing_phone_field{ grid-row:4; grid-column:1 / span 6; }
	body.woocommerce-account #billing_email_field{ grid-row:4; grid-column:7 / span 6; }
}
/* ENTREGA, faixa intermediaria LARGA (800px a 1119px, 2026-08-17): a linha
   1 (Nome / Sobrenome / Telefone) ainda cabe aqui, mas as OUTRAS linhas
   continuam com 2 campos - abaixo de 1120px nao ha' largura pra' linha de 4
   campos por causa do "S/N" sobreposto no "Numero" (ver o bloco de 1120px
   acima).
   Pra' ter 3 campos numa linha E 2 nas demais, a grade vira de 12 colunas
   tambem nesta faixa e o padrao de cada campo passa a ser "span 6" - que e'
   exatamente a metade de antes, ou seja, layout IDENTICO ao atual pra' todo
   campo que nao seja um dos 3 da linha 1, inclusive o formulario de cobranca
   inteiro, que nao muda em nada. Os 3 da linha 1 tem posicao explicita e por
   isso o algoritmo do grid coloca eles PRIMEIRO; o resto flui sozinho a
   partir da linha 2, na sequencia do "order", sem buraco.
   O corte em 800px nao e' estetico: com 220px de barra lateral fixa + vaos +
   padding do cartao, 800px de tela e' onde 4/12 de card ainda valem ~155px -
   o piso do Telefone (105px de texto + 24px de padding + folga). */
@media (min-width:800px) and (max-width:1119px){
	body.woocommerce-account .laluce-ma-address-form{
		grid-template-columns:repeat(12, minmax(0, 1fr));
	}
	body.woocommerce-account .laluce-ma-address-form .form-row{
		grid-column:span 6;
	}
	body.woocommerce-account #shipping_first_name_field{ grid-row:1; grid-column:1 / span 4; }
	body.woocommerce-account #shipping_last_name_field{ grid-row:1; grid-column:5 / span 4; }
	/* Sem "justify-self"/"max-width", pelo mesmo motivo do bloco de 1120px
	   acima: a largura vem do vao (4/12) pra' borda direita cair na linha 12
	   da grade, alinhada com o "Complemento" da linha de baixo. */
	body.woocommerce-account #shipping_phone_field{ grid-row:1; grid-column:9 / span 4; }
}
/* ENTREGA, faixa intermediaria ESTREITA (721px a 799px - iPad em retrato,
   768px, cai aqui): com a barra lateral de 220px sobram so' ~410px uteis de
   cartao. Nessa largura, 3 campos na mesma linha espremeriam o Telefone pra'
   baixo do minimo e o texto seria cortado - o que o proprio pedido proibe.
   Saida: o Telefone fica na linha 2 INTEIRA, em largura cheia. Ele segue
   vindo logo depois do Sobrenome na leitura e os demais campos mantem o
   agrupamento de 2 em 2 sem embaralhar (o algoritmo do grid posiciona
   primeiro quem tem lugar definido e so' depois preenche o resto, que comeca
   entao na linha 3).
   Largura CHEIA e nao um campo curto com vao ao lado: campo estreito aqui
   so' daria certo com "max-width", que e' exatamente o que quebrou o
   alinhamento no desktop (ver o bloco de 1120px). Numa faixa em que o cartao
   tem ~410px, campo cheio e' o comportamento certo de qualquer jeito - o
   mesmo que ja' vale no mobile. */
@media (min-width:721px) and (max-width:799px){
	body.woocommerce-account #shipping_phone_field{
		grid-row:2;
		grid-column:1 / -1;
	}
}
/* Mobile (720px, mesmo ponto de corte do resto desta area): tudo empilha,
   um campo por linha, na sequencia do "order" - inclusive o Telefone da
   entrega, que pelo "order:12" vem logo depois do Sobrenome e ocupa a
   largura toda, igual a todos os outros campos empilhados (decidido com o
   Ronaldo em 2026-08-17: campo curto com vao vazio ao lado ficaria estranho
   no celular, onde o padrao e' campo cheio). Nao precisa de "!important" nem
   de reset de posicao: TODAS as regras de "grid-row"/"grid-column"/
   "max-width" desta area vivem em blocos de "min-width" a partir de 721px,
   que nunca casam junto com este. */
@media (max-width:720px){
	body.woocommerce-account .laluce-ma-address-form{
		grid-template-columns:minmax(0, 1fr);
	}
}
/* Mesmo gotcha ja' corrigido no Checkout (2026-08-07, ver regra
   "body.woocommerce-checkout #billing_address_2_field label.screen-reader-
   text" acima): o WooCommerce esconde o rotulo "Complemento" so' pra
   leitor de tela; o handoff desta area mostra ele normal, igual aos
   outros campos. Replicado aqui (nao era coberto pela regra do Checkout,
   escopada so' a "body.woocommerce-checkout"). */
body.woocommerce-account #billing_address_2_field label.screen-reader-text,
body.woocommerce-account #shipping_address_2_field label.screen-reader-text{
	position:static !important;
	clip:auto !important;
	clip-path:none !important;
	width:auto !important;
	height:auto !important;
	margin:0 0 6px !important;
	overflow:visible !important;
}
/* Pais + campos "fantasma" de PF/PJ do plugin brasileiro (quando existem):
   escondidos, mas continuam no DOM (ver form-edit-address.php pro porque).
   "!important" so' e' realmente necessario no Pais (o "address-i18n.js" do
   WooCommerce chama "field.show()" nele ao inicializar, escrevendo
   "display:block" como estilo inline) - mantido nos 2 seletores pra'
   robustez/clareza, sem custo. */
body.woocommerce-account .laluce-ma-hidden-field,
body.woocommerce-account #billing_country_field,
body.woocommerce-account #shipping_country_field{
	display:none !important;
}
body.woocommerce-account .laluce-ma-address-form select{
	width:100%;
	box-sizing:border-box;
	padding:10px 12px;
	border:1px solid var(--border-input);
	border-radius:5px;
	font-size:14px;
	font-family:inherit;
	background:#fff;
	color:#1c1c1c;
}
body.woocommerce-account .laluce-ma-form-actions{
	display:flex;
	justify-content:flex-end;
	gap:12px;
	margin-top:6px;
}
body.woocommerce-account .laluce-ma-form-actions .laluce-ma-btn{
	font-size:14px;
	padding:11px 22px;
}
/* Respiro entre o ULTIMO CAMPO e a dupla Salvar/Voltar (2026-08-17, pedido do
   Ronaldo). O "margin-top:6px" da regra base veio do mockup
   (identidade-visual/claude-design/minha-conta-area-logada/, linha do
   "saveRowJustify") e na tela real deixa os botoes quase colados no campo de
   cima - o Ronaldo apontou isso nos 2 formularios de endereco e tambem no
   mobile. 28px = ~1,75x o vao de 16px entre as linhas de campo, o bastante
   pro bloco de acao ler como zona separada do formulario.
   Escopado ao cartao de endereco DE PROPOSITO: "Detalhes da conta" usa a
   mesma classe base ("laluce-ma-form-actions--account") e nao entrou no
   pedido - mexer nele seria efeito colateral nao solicitado. */
body.woocommerce-account .laluce-ma-edit-address-card .laluce-ma-form-actions{
	margin-top:28px;
}
@media (max-width:720px){
	body.woocommerce-account .laluce-ma-form-actions{
		flex-direction:column;
		align-items:stretch;
	}
}

/* --- Detalhes da conta --- */
body.woocommerce-account .laluce-ma-account-form{
	display:flex;
	flex-direction:column;
	gap:16px;
}
body.woocommerce-account .laluce-ma-form-row{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
}
body.woocommerce-account .laluce-ma-form-row + .laluce-ma-form-row{
	margin-top:16px;
}
body.woocommerce-account .laluce-ma-form-row--2 > .laluce-ma-field{
	flex:1 1 220px;
}
body.woocommerce-account .laluce-ma-form-row--3 > .laluce-ma-field{
	flex:1 1 180px;
}
body.woocommerce-account .laluce-ma-field label{
	display:block;
	font-size:12px;
	font-weight:700;
	color:var(--petrol-light);
	margin-bottom:6px;
}
body.woocommerce-account .laluce-ma-required{
	color:#c0453a;
}
@media (max-width:720px){
	body.woocommerce-account .laluce-ma-required{
		display:none;
	}
}
body.woocommerce-account .laluce-ma-field-hint{
	font-size:12px;
	color:#7a7a70;
	font-style:italic;
	margin-top:6px;
}
body.woocommerce-account .laluce-ma-pw-wrap{
	position:relative;
}
body.woocommerce-account .laluce-ma-pw-wrap input{
	padding-right:40px;
}
body.woocommerce-account .laluce-ma-pw-toggle{
	position:absolute;
	right:12px;
	top:50%;
	transform:translateY(-50%);
	border:none;
	background:none;
	padding:0;
	display:flex;
	align-items:center;
	cursor:pointer;
	color:#7a7a70;
}
/* 2 SVGs (olho/olho riscado) sempre no DOM, so' um visivel por vez - o JS
   (assets/js/my-account.js) so' alterna a classe "is-hidden-state" no botao
   e o "type" do input, sem precisar montar/trocar markup de icone na mao. */
body.woocommerce-account .laluce-ma-pw-icon--hide{
	display:none;
}
body.woocommerce-account .laluce-ma-pw-toggle.is-hidden-state .laluce-ma-pw-icon--show{
	display:none;
}
body.woocommerce-account .laluce-ma-pw-toggle.is-hidden-state .laluce-ma-pw-icon--hide{
	display:flex;
}
body.woocommerce-account .laluce-ma-form-actions--account{
	display:flex;
	justify-content:flex-end;
}
@media (max-width:720px){
	body.woocommerce-account .laluce-ma-form-actions--account .laluce-ma-btn--fixed{
		width:100%;
	}
}

/* =========================================================================
   PAGINA LISTA DE DESEJOS (YITH Wishlist)
   Redesenho de 2026-08-14, a partir do mockup
   identidade-visual/claude-design/desejos.html. Marcacao em
   woocommerce/wishlist-view.php (override do template do plugin), fiacao em
   inc/wishlist.php.

   A MESMA marcacao serve os dois layouts do mockup - nao ha' versao "de
   desktop" e "de mobile" no HTML (ver o cabecalho do template pro porque).
   Cada celula ganha um nome de area e as duas grades abaixo so' mudam ONDE
   cada area cai:

     desktop  "thumb info remove price stock actions"   (uma linha)
     mobile   "thumb info    info    info"              (cartao)
              "thumb price   stock   stock"
              "thumb actions actions remove"

   Corte em 720px, o mesmo do mockup (e o mesmo ja' usado nas tabelas da
   Minha Conta).
   ========================================================================= */

.laluce-wl{
	background:#fff;
	border:1px solid var(--border-light);
	border-radius:5px;
	overflow:hidden;
}

/* Cabecalho e linhas compartilham a MESMA grade de colunas pra que os titulos
   fiquem alinhados com o conteudo. As 3 primeiras colunas (foto, texto,
   lixeira) sao a coluna "Produto" do mockup; por isso o titulo dela ocupa as
   3 (grid-column abaixo). A do texto e' a unica flexivel de verdade - assim a
   lixeira fica sempre na mesma posicao, independente do tamanho do nome. */
.laluce-wl-head,
.laluce-wl-row{
	display:grid;
	grid-template-columns:44px minmax(0,1.6fr) 22px minmax(0,1fr) minmax(0,1fr) 130px;
	gap:12px;
	align-items:center;
}
.laluce-wl-head{
	padding:12px 16px;
	background:var(--bg-grid);
	font-size:12px;
	font-weight:700;
	color:var(--petrol);
	letter-spacing:.03em;
	text-transform:uppercase;
}
/* Posicao explicita (em vez de deixar o navegador auto-posicionar depois de
   um item que ja' ocupa 3 colunas): as celulas do cabecalho sao opcionais -
   somem se o lojista desligar preco/estoque nas opcoes do YITH - e sem
   coordenada fixa elas escorregariam de coluna. */
.laluce-wl-head-product{
	grid-column:1 / 4;
}
.laluce-wl-head-price{
	grid-column:4;
	text-align:center;
}
.laluce-wl-head-stock{
	grid-column:5;
	text-align:center;
}

.laluce-wl-row{
	grid-template-areas:"thumb info remove price stock actions";
	padding:9px 16px;
	border-top:1px solid var(--border-divider);
	font-size:13px;
}

.laluce-wl-thumb{
	grid-area:thumb;
	display:block;
	width:44px;
	height:44px;
	border-radius:5px;
	overflow:hidden;
	background:var(--bg-grid);
}
.laluce-wl-thumb img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:5px;
}

.laluce-wl-info{
	grid-area:info;
	min-width:0;
}
.laluce-wl-name{
	font-weight:700;
	color:var(--petrol-light);
	line-height:1.3;
	text-decoration:none;
}
.laluce-wl-name:hover{
	color:var(--brown);
}
.laluce-wl-meta{
	font-size:12px;
	line-height:1.4;
	color:#7a7a70;
}
.laluce-wl-info > .laluce-wl-meta:first-of-type{
	margin-top:2px;
}
.laluce-wl-meta a{
	color:var(--petrol-light);
	text-decoration:none;
}
.laluce-wl-meta a:hover{
	text-decoration:underline;
}

/* Lixeira: EXATAMENTE a mesma do Carrinho (2026-08-14, a pedido do Ronaldo) -
   mesmo icone solido (".ic-trash", assets/icons/trash-pb.svg), mesmo vermelho
   ("--heart-red", a excecao "fora da paleta de proposito" ja usada no coracao
   de favoritos - convencao universal de UX pra acao destrutiva), mesmos 22px
   e o mesmo hover por opacidade. Ver "body.woocommerce-cart
   .laluce-cart-remove" mais acima neste arquivo.
   Aqui NAO e' preciso neutralizar a moldura redonda do WooCommerce/Astra que
   o Carrinho teve que desmontar: o link desta pagina nao leva a classe
   "remove" (ver o porque no template, woocommerce/wishlist-view.php). */
.laluce-wl-remove{
	grid-area:remove;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--heart-red);
	text-decoration:none;
}
.laluce-wl-remove:hover,
.laluce-wl-remove:focus{
	color:var(--heart-red);
	opacity:.7;
}
.laluce-wl-remove .ic{
	width:22px;
	height:22px;
}

.laluce-wl-price{
	grid-area:price;
	text-align:center;
	line-height:1.4;
	color:#333;
}
/* Preco promocional: o WooCommerce entrega "<del>de</del> <ins>por</ins>".
   No desktop o valor antigo vai pra CIMA (bloco proprio, menor e cinza); no
   mobile os dois voltam pra mesma linha (ver media query). */
.laluce-wl-price del{
	display:block;
	font-size:12px;
	color:#7a7a70;
	text-decoration:line-through;
}
.laluce-wl-price ins{
	background:none;
	color:#333;
	text-decoration:none;
}

.laluce-wl-stock{
	grid-area:stock;
	text-align:center;
	font-weight:700;
	color:#1f6b46;
}
.laluce-wl-stock--out{
	color:#c0453a;
}

.laluce-wl-actions{
	grid-area:actions;
	display:flex;
}
.laluce-wl a.laluce-wl-add{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	width:100%;
	margin:0;
	padding:9px 14px;
	border-radius:6px;
	background:var(--brown);
	color:var(--cream);
	font-size:12px;
	font-weight:700;
	line-height:1.2;
	white-space:nowrap;
	text-align:center;
	text-decoration:none;
	transition:filter .15s ease;
}
.laluce-wl a.laluce-wl-add:hover{
	filter:brightness(1.08);
	color:var(--cream);
}
.laluce-wl a.laluce-wl-add .ic{
	width:14px;
	height:14px;
}
/* Complemento do rotulo: so' no mobile (ver media query). */
.laluce-wl-add-label-extra{
	display:none;
}
/* "Ver carrinho" que o WooCommerce pendura ao lado do botao depois do AJAX.
   O proprio YITH remove esse link em seguida (e tira a linha da lista, porque
   a opcao "remover da lista apos adicionar ao carrinho" esta' ligada); esconder
   evita o pisca-pisca no meio do caminho. */
.laluce-wl .added_to_cart{
	display:none;
}

.laluce-wl-empty{
	padding:24px 16px;
	font-size:14px;
	color:#7a7a70;
	text-align:center;
}
.laluce-wl-pagination{
	padding:12px 16px;
	border-top:1px solid var(--border-divider);
	text-align:center;
}

/* --- Rodape do shortcode ("Compartilhar em:" + icones) ---
   Os ICONES em si nao sao tocados (pedido do Ronaldo): so' o espaco antes do
   bloco e o tamanho do rotulo.

   BUG DE VERDADE achado aqui (2026-08-14): o CSS do plugin poe
   ".yith_wcwl_wishlist_footer .yith-wcwl-share{float:left;clear:both}" e o
   ".yith_wcwl_wishlist_footer" NAO tem clearfix nenhum. Como elemento
   flutuante nao conta pra altura do pai, o rodape do shortcote colapsa pra
   ALTURA ZERO e o bloco de compartilhar fica pendurado FORA do fluxo, por
   cima do que vier depois (o rodape do site). Efeitos colaterais: nao havia
   como criar espaco entre a tabela e o "Compartilhar em:" (uma margem no
   flutuante nao empurra nada), e o fim da pagina ficava encoberto.

   "display:flow-root" faz o rodape criar um contexto de formatacao proprio,
   que CONTEM o flutuante e devolve a altura real ao bloco - e' a versao
   moderna do velho clearfix, sem pseudo-elemento. O "float:none" logo abaixo
   ja' resolveria o caso de hoje (o rodape so' tem o bloco de compartilhar),
   mas o "flow-root" fica como rede: se algum dia as acoes em lote/o botao
   "Atualizar" forem ligados nas opcoes do YITH, eles TAMBEM sao flutuantes e
   voltariam a colapsar o bloco. */
.yith-wcwl-form .yith_wcwl_wishlist_footer{
	display:flow-root;
	margin-top:24px;
}
.yith-wcwl-form .yith_wcwl_wishlist_footer .yith-wcwl-share{
	float:none;
}
/* Rotulo menor (13px, o valor do mockup) e no tom de texto secundario, em vez
   do tamanho de titulo que o <h4> herda do Astra. Especificidade calculada pra
   vencer ".yith-wcwl-share h4.yith-wcwl-share-title" do plugin, que fixa a
   margem - por isso o "h4" tambem aparece aqui. */
.yith-wcwl-form .yith-wcwl-share h4.yith-wcwl-share-title{
	margin:0 0 10px;
	font-family:'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
	font-size:13px;
	font-weight:400;
	line-height:1.4;
	color:#333;
}

@media (max-width:720px){
	/* A casca branca da tabela some: cada item vira um cartao. */
	.laluce-wl{
		display:flex;
		flex-direction:column;
		gap:12px;
		background:transparent;
		border:none;
		border-radius:0;
		overflow:visible;
	}
	.laluce-wl-head{
		display:none;
	}
	/* A foto ocupa so' as 2 primeiras linhas: na 3a, o botao "Adicionar ao
	   carrinho" comeca na BORDA ESQUERDA do cartao e passa por baixo dela
	   (2026-08-14, a pedido do Ronaldo). A lixeira fica onde estava, na
	   coluna fixa de 38px a direita. */
	.laluce-wl-row{
		grid-template-columns:52px auto minmax(0,1fr) 38px;
		grid-template-areas:
			"thumb   info    info    info"
			"thumb   price   stock   stock"
			"actions actions actions remove";
		gap:6px 8px;
		padding:11px 14px;
		background:#fff;
		border:1px solid var(--border-light);
		border-radius:5px;
	}
	.laluce-wl-thumb{
		width:52px;
		height:52px;
		align-self:start;
	}
	/* O cartao mobile do mockup mostra so' nome, preco, status e acoes. */
	.laluce-wl-meta{
		display:none;
	}
	.laluce-wl-price{
		text-align:left;
		font-weight:700;
	}
	.laluce-wl-price del{
		display:inline;
		margin-right:5px;
		font-weight:400;
	}
	.laluce-wl-stock{
		text-align:left;
		font-size:12px;
	}
	/* Unica diferenca da lixeira do Carrinho, e' o que o mockup pede: no
	   mobile ela ganha uma moldura (raio 5px, o padrao do site) pra virar um
	   botao ao lado do "Adicionar ao carrinho". Icone e cor seguem os mesmos. */
	.laluce-wl-remove{
		align-self:stretch;
		border:1px solid var(--heart-red);
		border-radius:5px;
	}
	.laluce-wl a.laluce-wl-add{
		padding:9px;
		font-size:13px;
	}
	.laluce-wl-add-label-extra{
		display:inline;
	}
	.laluce-wl-empty{
		background:#fff;
		border:1px solid var(--border-light);
		border-radius:5px;
	}
}