/* Tema s27. Cores e fontes vêm do theme.json (variação do kit + identidade). */

:root {
	--s27-primaria: var(--wp--preset--color--primaria);
	--s27-destaque: var(--wp--preset--color--destaque);
	--s27-linha: var(--wp--preset--color--linha);
	--s27-superficie: var(--wp--preset--color--superficie);
	--s27-suave: var(--wp--preset--color--suave);
	--s27-raio: var(--wp--custom--raio, 10px);
}

img { max-width: 100%; height: auto; }

/* ---------- Barra de anúncio e cabeçalhos ---------- */

.s27-anuncio {
	background: var(--s27-primaria);
	color: #fff;
	text-align: center;
	font-size: var(--wp--preset--font-size--pequeno);
	letter-spacing: 0.03em;
	padding: 0.5rem 1rem;
}
.s27-anuncio p { margin: 0; }

.s27-cabecalho { background: var(--wp--preset--color--fundo); border-bottom: 1px solid var(--s27-linha); }
.s27-cabecalho-fixo header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar.s27-cabecalho-fixo header.wp-block-template-part { top: 32px; }
.s27-cabecalho .wp-block-site-title { margin: 0; font-family: var(--wp--preset--font-family--titulos); font-weight: 600; font-size: var(--wp--preset--font-size--medio); white-space: nowrap; }
.s27-cabecalho-centralizado .wp-block-site-title { font-size: var(--wp--preset--font-size--grande); }
.s27-cabecalho .wp-block-site-title a { text-decoration: none; }
.s27-cabecalho .wp-block-navigation { font-size: 0.9375rem; }
.s27-cabecalho .wp-block-navigation a { text-decoration: none; }
.s27-acoes { gap: 0.75rem; }

.s27-cabecalho-centralizado .s27-marca { gap: 0.25rem; }
.s27-cabecalho-centralizado .s27-menu-linha { border-top: 1px solid var(--s27-linha); }
.s27-cabecalho-centralizado .wp-block-navigation { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8125rem; }
.s27-cabecalho-centralizado .s27-busca-esquerda { justify-self: start; }

.s27-cabecalho-busca .s27-busca-larga { flex: 1; max-width: 640px; }
.s27-cabecalho-busca .s27-busca-larga .wp-block-search__inside-wrapper { border-radius: var(--wp--custom--raio-botao); border: 1px solid var(--s27-linha); background: var(--s27-superficie); padding: 0.25rem 0.25rem 0.25rem 1rem; }
.s27-cabecalho-busca .s27-busca-larga input { border: 0; background: transparent; }
.s27-cabecalho-busca .s27-menu-linha { background: var(--s27-superficie); gap: 1.5rem; }

.s27-todas-categorias { position: relative; font-weight: 600; }
.s27-todas-categorias summary { cursor: pointer; list-style: none; }
.s27-todas-categorias summary::before { content: "☰ "; }
.s27-todas-categorias ul { position: absolute; z-index: 60; background: #fff; border: 1px solid var(--s27-linha); border-radius: var(--s27-raio); list-style: none; margin: 0.5rem 0 0; padding: 0.5rem 0; min-width: 220px; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.s27-todas-categorias li a { display: block; padding: 0.4rem 1rem; text-decoration: none; font-weight: 400; }

@media (max-width: 781px) {
	.s27-cabecalho-centralizado .s27-busca-esquerda { display: none; }
	.s27-cabecalho-busca .s27-busca-larga { order: 3; flex-basis: 100%; max-width: none; }
	.s27-cabecalho-busca > .wp-block-group:first-child { flex-wrap: wrap !important; }
}

/* ---------- Home ---------- */

.s27-secao { margin-block: var(--wp--preset--spacing--50); }
.s27-secao h2 { text-align: center; margin-bottom: var(--wp--preset--spacing--30); }

.s27-hero {
	margin-top: 0;
	min-height: clamp(360px, 62vh, 640px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: linear-gradient(135deg, var(--s27-superficie), color-mix(in srgb, var(--s27-destaque) 35%, var(--s27-superficie)));
	background-size: cover;
	background-position: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
}
.s27-hero-com-foto { color: #fff; position: relative; }
.s27-hero-com-foto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.1)); }
.s27-hero-texto { position: relative; max-width: 640px; }
.s27-hero h1 { margin: 0 0 1rem; }
.s27-hero p { font-size: var(--wp--preset--font-size--medio); margin: 0 0 1.75rem; }

.s27-vantagens { background: var(--s27-superficie); margin-top: 0; }
.s27-vantagens ul { list-style: none; margin: 0 auto; padding: 1.1rem 1rem; max-width: 1240px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; font-size: var(--wp--preset--font-size--pequeno); letter-spacing: 0.02em; }
.s27-vantagens li::before { content: "✓ "; color: var(--s27-primaria); font-weight: 700; }
@media (max-width: 781px) { .s27-vantagens ul { grid-template-columns: repeat(2, 1fr); } }

.s27-categorias-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.25rem; }
.s27-categoria-card { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-decoration: none; text-align: center; }
.s27-categoria-card img, .s27-inicial { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--s27-superficie); }
.s27-inicial { display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--titulos); font-size: 3rem; color: var(--s27-primaria); border: 1px solid var(--s27-linha); }
.s27-categoria-card span:last-child { font-weight: 600; letter-spacing: 0.02em; }

.s27-colecao { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--wp--preset--spacing--40); align-items: center; }
.s27-colecao-foto { aspect-ratio: 4/3; background: linear-gradient(135deg, var(--s27-superficie), color-mix(in srgb, var(--s27-destaque) 30%, #fff)); border-radius: var(--s27-raio); overflow: hidden; }
.s27-colecao-foto img { width: 100%; height: 100%; object-fit: cover; }
.s27-colecao h2 { text-align: left; }
@media (max-width: 781px) { .s27-colecao { grid-template-columns: 1fr; } }

.s27-depoimentos-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.s27-depoimentos blockquote { margin: 0; padding: 1.5rem; background: var(--s27-superficie); border-radius: var(--s27-raio); }
.s27-depoimentos cite { display: block; margin-top: 0.75rem; font-size: var(--wp--preset--font-size--pequeno); color: var(--s27-suave); font-style: normal; }
.s27-instagram-grade { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem; }
.s27-instagram-grade img { aspect-ratio: 1; object-fit: cover; }

.s27-newsletter-faixa { background: var(--s27-superficie); padding: var(--wp--preset--spacing--40) 1rem; text-align: center; }
.s27-newsletter-faixa form { max-width: 520px; margin: 0 auto; }

/* ---------- Newsletter e rodapé ---------- */

.s27-newsletter p { margin: 0 0 0.5rem; }
.s27-newsletter-linha { display: flex; gap: 0.5rem; }
.s27-newsletter-linha input { flex: 1; min-width: 0; padding: 0.7rem 0.9rem; border: 1px solid var(--s27-linha); border-radius: var(--s27-raio); font: inherit; }
.s27-consentimento { display: block; margin-top: 0.5rem; font-size: var(--wp--preset--font-size--pequeno); color: var(--s27-suave); }
.s27-links-rodape { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.s27-links-rodape a, .s27-copyright a { text-decoration: none; color: var(--s27-suave); }
.s27-copyright { margin: 0; font-size: var(--wp--preset--font-size--pequeno); color: var(--s27-suave); }

/* ---------- Grade e cartão de produto ---------- */

.s27-grade .wc-block-product-template { gap: 1.5rem 1.25rem; }
.s27-grade .wc-block-components-product-image img { aspect-ratio: 4/5; object-fit: cover; border-radius: var(--s27-raio); background: var(--s27-superficie); }
.s27-cartao-nome { margin: 0.75rem 0 0.25rem; font-family: var(--wp--preset--font-family--textos); font-weight: 400; }
.s27-cartao-nome a { text-decoration: none; }
.s27-cartao-cores { display: flex; gap: 0.3rem; margin-bottom: 0.25rem; }
.s27-grade .wc-block-components-product-price { font-weight: 600; }
.wc-block-components-product-sale-badge { border-radius: 2px; background: var(--s27-primaria); color: #fff; border: 0; font-size: 0.6875rem; letter-spacing: 0.08em; }

/* ---------- Bolinhas de cor (1 ou 2 cores na diagonal) ---------- */

.s27-bolinha { display: inline-block; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); flex: none; vertical-align: middle; }
.s27-bolinha-mini { width: 12px; height: 12px; }

/* ---------- Página do produto ---------- */

.s27-produto { margin-top: var(--wp--preset--spacing--30); }
.s27-coluna-compra .wp-block-post-title { margin-top: 0; }
.s27-coluna-compra .wc-block-components-product-price { font-weight: 600; }
.s27-pagamento-resumo { font-size: 0.9375rem; color: var(--s27-suave); line-height: 1.5; }
.s27-pagamento-resumo strong { color: var(--wp--preset--color--sucesso); }
.s27-a-partir { font-size: var(--wp--preset--font-size--pequeno); text-transform: uppercase; letter-spacing: 0.06em; }
.s27-estoque-baixo { color: var(--wp--preset--color--alerta); font-weight: 600; font-size: 0.9375rem; }

.s27-produto-editorial .s27-coluna-compra { position: sticky; top: 110px; align-self: flex-start; }
.s27-galeria-empilhada { display: grid; gap: 0.75rem; }
.s27-galeria-empilhada img { width: 100%; border-radius: var(--s27-raio); background: var(--s27-superficie); }
.s27-historia { margin-top: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); }

.s27-produto-compacto .woocommerce-product-gallery img { aspect-ratio: 1; object-fit: cover; }
.s27-produto-compacto .s27-detalhes-compactos { margin-top: 1rem; font-size: 0.9375rem; }

/* Formulário de variação */
.variations_form table.variations { border: 0; margin-bottom: 1rem; }
.variations_form table.variations th, .variations_form table.variations td { display: block; padding: 0; border: 0; text-align: left; }
.variations_form table.variations th label { font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; }
.variations_form table.variations tr { display: block; margin-bottom: 1rem; }
.variations_form .reset_variations { font-size: var(--wp--preset--font-size--pequeno); }
select[data-s27-escondido] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.s27-seletor { position: relative; }
.s27-opcoes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.s27-opcao { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 46px; justify-content: center; padding: 0.55rem 0.9rem; border: 1px solid var(--s27-linha); border-radius: var(--s27-raio); background: #fff; color: inherit; font: inherit; font-size: 0.9375rem; cursor: pointer; transition: border-color .15s; }
.s27-opcao:hover { border-color: var(--wp--preset--color--texto); }
.s27-opcao[aria-pressed="true"] { border-color: var(--s27-primaria); box-shadow: inset 0 0 0 1px var(--s27-primaria); }
.s27-opcao-esgotada { opacity: 0.45; text-decoration: line-through; }
.s27-opcao-cor { padding: 0.35rem; border-radius: 50%; min-width: 0; }
.s27-opcao-cor .s27-bolinha { width: 30px; height: 30px; }
.s27-opcao-cor .s27-opcao-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.s27-escolhido { display: block; margin-top: 0.35rem; font-size: var(--wp--preset--font-size--pequeno); color: var(--s27-suave); }
.s27-escolhido:empty { display: none; }
.variations_form table.variations tr:last-child { margin-bottom: 0.25rem; }
.s27-produto-compacto .s27-coluna-compra .wp-block-post-title { font-size: var(--wp--preset--font-size--grande) !important; }
.single_add_to_cart_button { width: 100%; }
.woocommerce-variation-add-to-cart, form.cart:not(.variations_form) { display: flex; gap: 0.75rem; align-items: stretch; }

/* ---------- Categoria com filtros ---------- */

.s27-filtros-painel summary { font-weight: 600; cursor: pointer; margin-bottom: 1rem; }
.s27-filtro h3 { font-family: var(--wp--preset--font-family--textos); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 1.25rem 0 0.5rem; }
.s27-filtro ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.s27-filtro a { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; font-size: 0.9375rem; }
.s27-filtro small { color: var(--s27-suave); }
.s27-filtro-ativo { font-weight: 700; color: var(--s27-primaria); }
.s27-filtro-ativo::before { content: "✕"; font-size: 0.75rem; }
@media (min-width: 782px) { .s27-filtros-painel summary { pointer-events: none; list-style: none; } }