/*
Theme Name: Loja de Adesivos (Fabrica dos Adesivos / Grafica Sublima)
Theme URI: https://fabricadosadesivos.com.br
Description: Tema filho do Twenty Twenty-Five, o mesmo nas duas lojas.
             A marca de cada site vem de fora do codigo: cores pela variacao de
             estilo (Aparencia > Editor > Estilos), nome e logo do WordPress, e
             contatos/textos da aba WooCommerce > Configuracoes > Identidade.
Author: Fabrica dos Adesivos
Template: twentytwentyfive
Version: 0.5.1
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: fabrica-adesivos
*/

/* Visual da loja, desenhado no prototipo aprovado em 23/09/2026.

   Cor sempre pelo token da paleta (var(--wp--preset--color--<slug>)): e' a
   variacao de estilo de cada site que troca os valores. Os tokens que mudam de
   papel de uma marca para a outra se chamam pelo PAPEL, nao pela cor:
   `acento` (botao de compra), `acento-tinta` (texto sobre ele), `acento-hover`,
   `acento-suave` (fundos) e `apoio` (segunda cor). Na Fabrica o acento e'
   amarelo; na Sublima, magenta. */

:root {
	--loja-acento: var(--wp--preset--color--acento);
	--loja-acento-tinta: var(--wp--preset--color--acento-tinta);
	--loja-acento-hover: var(--wp--preset--color--acento-hover);
	--loja-acento-suave: var(--wp--preset--color--acento-suave);
	--loja-apoio: var(--wp--preset--color--apoio);
	--loja-tinta: var(--wp--preset--color--grafite);
	--loja-tinta-2: var(--wp--preset--color--grafite-suave);
	--loja-tinta-3: var(--wp--preset--color--grafite-claro);
	--loja-linha: var(--wp--preset--color--borda);
	--loja-papel-2: var(--wp--preset--color--cinza-fundo);
	--loja-papel-3: var(--wp--preset--color--cinza-fundo-2);
	--loja-corte: var(--wp--preset--color--corte);
	--loja-display: var(--wp--preset--font-family--bricolage);
	--loja-sombra: 0 1px 2px rgba(38, 37, 35, 0.06), 0 8px 24px -12px rgba(38, 37, 35, 0.18);
	/* Altura da faixa escura do topo: e' ela que fica para tras na rolagem. */
	--faixa-aviso: 46px;
}

body {
	-webkit-font-smoothing: antialiased;
}

/* Blocos de conteudo sem o espacamento vertical que o tema pai poe entre
   tudo; cada secao da loja cuida do proprio respiro. */
.inicio > .wp-block-post-content > * + *,
.catalogo > * + * {
	margin-block-start: 0;
}

/* ======================================================================
   CABECALHO
   ====================================================================== */

/* Quem gruda e' a PARTE inteira (elemento grudado so' viaja dentro do pai).
   O `top` negativo deixa a faixa escura para tras: ela e' lida uma vez, e
   repeti-la em toda rolagem roubaria altura da tela a toa. A calculadora
   mede a barra `.cabecalho-loja` para se afastar dela — nao renomear. */
header.wp-block-template-part:has( .topo-loja ) {
	position: sticky;
	top: calc( var(--wp-admin--admin-bar--height, 0px) - var(--faixa-aviso) );
	z-index: 100;
}

.faixa-aviso {
	height: var(--faixa-aviso);
	display: flex;
	align-items: center;
	overflow: hidden;
}

.faixa-aviso p {
	margin: 0;
	width: 100%;
	/* 20 px (+50%, pedido do Andre 30/09/2026); no celular encolhe o bastante
	   para a frase caber inteira na largura, em vez de ser cortada com "…" */
	font-size: clamp(13px, 4.2vw, 20px);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 600px) {
	.faixa-aviso.faixa-aviso {
		padding-left: 12px;
		padding-right: 12px;
	}
}

.topo-loja {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--loja-linha);
	box-shadow: 0 1px 12px rgba(38, 37, 35, 0.06);
	position: relative;
}

.topo-linha {
	padding-inline: 20px;
}

.topo-in {
	min-height: 70px;
	gap: 20px;
}

/* No computador, o mesmo respiro (20 px) da faixa do topo ate' a busca, da
   busca ate' a linha das categorias, das categorias ate' o carrossel e do
   carrossel ate' os beneficios — pedido do Andre (24/09/2026). A margem
   automatica do bloco (19 px) somava por cima da linha das categorias. */
/* (no celular o mesmo vale com 10 px: a margem sai nos dois) */
.topo-loja > .menu-cats {
	margin-block-start: 0;
}

@media (min-width: 961px) {
	.topo-in {
		min-height: 0;
		padding-block: 20px;
	}

	.cab-espaco + .inicio {
		margin-block-start: 20px;
	}
}

.marca {
	gap: 10px;
	flex-shrink: 0;
}

.marca .wp-block-site-logo img {
	height: 40px;
	width: auto;
}

/* Logo horizontal (opcao em Identidade): o nome some e a logo ocupa o espaco
   de logo + nome (~175 px). So' a altura e' fixa — a largura acompanha a
   proporcao da imagem, nunca achata. 50 px = a altura da busca: mais alta, a
   logo empurraria a linha e o respiro de 20 px em volta da busca desigualava. */
.logo-horizontal .marca .wp-block-site-logo img {
	height: 50px;
	width: auto;
	max-width: none;
}

.nome-loja {
	margin: 0;
	font-family: var(--loja-display);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

.nome-loja a {
	color: var(--loja-tinta);
	text-decoration: none;
}

/* busca */
.busca-loja {
	flex: 1;
	max-width: 560px;
	margin: 0;
}

.busca-loja .wp-block-search__inside-wrapper {
	border: 1.5px solid var(--loja-linha);
	border-radius: 999px;
	background: var(--loja-papel-2);
	padding: 4px 4px 4px 16px;
	transition: border-color 0.15s, background 0.15s;
}

.busca-loja .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--loja-tinta);
	background: #fff;
}

.busca-loja .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 8px 0;
	font-size: 15px;
	min-width: 0;
}

.busca-loja .wp-block-search__input:focus {
	outline: none;
}

.busca-loja .wp-block-search__button {
	border-radius: 999px;
	background: var(--loja-acento);
	color: var(--loja-acento-tinta);
	font-weight: 800;
	font-size: 14px;
	padding: 8px 18px;
	margin: 0;
	border: 0;
}

.busca-loja .wp-block-search__button:hover {
	background: var(--loja-acento-hover);
}

.acoes {
	gap: 4px;
	flex-shrink: 0;
}

.acoes .wc-block-customer-account a,
.acoes .wc-block-mini-cart__button {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	padding: 0;
	color: var(--loja-tinta);
}

.acoes .wc-block-customer-account a:hover,
.acoes .wc-block-mini-cart__button:hover {
	background: var(--loja-papel-2);
}

.acoes .wc-block-mini-cart__badge {
	background: var(--loja-acento);
	color: var(--loja-acento-tinta);
	font-weight: 800;
}

.acoes .wc-block-mini-cart__amount {
	display: none;
}

/* barra de categorias + menu grande */
.menu-cats {
	border-top: 1px solid var(--loja-linha);
	background: #fff;
}

.menu-cats-in {
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: 20px;
	display: flex;
	align-items: stretch;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}

.menu-cats-in::-webkit-scrollbar {
	display: none;
}

.cat-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	border: 0;
	background: transparent;
	font: inherit;
	font-weight: 700;
	font-size: 14.5px;
	padding: 13px 14px;
	cursor: pointer;
	color: var(--loja-tinta);
	border-bottom: 2.5px solid transparent;
	text-decoration: none;
}

/* O wpautop do shortcode deixa um <p></p> entre o botao e o painel, com
   margem de 16 px em cima e embaixo — a barra ficava com 67 px de altura. */
.menu-cats p:empty {
	display: none;
}

@media (max-width: 960px) {
	.cat-btn {
		padding: 11px 12px;
	}
}

.cat-btn:hover,
.cat-item.aberto > .cat-btn {
	border-bottom-color: var(--loja-acento);
	color: var(--loja-tinta);
}

.cat-btn svg {
	width: 12px;
	height: 12px;
	transition: transform 0.2s;
}

.cat-item.aberto > .cat-btn svg {
	transform: rotate(180deg);
}

.cat-btn.cat-todas {
	background: var(--loja-tinta);
	color: #fff;
	border-radius: 8px;
	margin: 6px 8px 6px 0;
	padding: 7px 14px;
	border-bottom: 0;
}

/* Aberto/hover herdavam a cor de texto dos outros botoes (tinta) e o texto
   sumia no fundo tinta. Seletor mais forte que ".cat-item.aberto > .cat-btn". */
.cat-item > .cat-btn.cat-todas:hover,
.cat-item > .cat-btn.cat-todas:focus,
.cat-item.aberto > .cat-btn.cat-todas {
	background: var(--loja-tinta);
	color: #fff;
	opacity: 0.88;
}

.cat-btn.cat-todas svg {
	width: 16px;
	height: 16px;
	transform: none !important;
}

.mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border-top: 1px solid var(--loja-linha);
	box-shadow: 0 30px 50px -30px rgba(38, 37, 35, 0.35);
	display: none;
}

.cat-item.aberto .mega {
	display: block;
}

.mega-in {
	max-width: 1240px;
	margin: 0 auto;
	padding: 24px 20px 28px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px 28px;
}

.mega h4 {
	font-family: var(--loja-display);
	font-size: 16px;
	margin: 0 0 8px;
}

.mega h4 a {
	text-decoration: none;
	color: inherit;
}

.mega ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.mega li a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	padding: 6px 8px;
	margin-left: -8px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--loja-tinta-2);
}

.mega li a:hover {
	background: var(--loja-papel-2);
	color: var(--loja-tinta);
}

.mega .mini {
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: 7px;
	background: var(--loja-papel-2);
	overflow: hidden;
	display: grid;
	place-items: center;
}

.mega .mini img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.mega .ver-tudo {
	display: inline-block;
	margin-top: 8px;
	font-weight: 800;
	font-size: 14.5px;
	color: var(--loja-tinta);
	text-decoration: none;
}

.mega-promo {
	border-radius: 14px;
	background: var(--loja-acento-suave);
	padding: 18px;
	display: grid;
	gap: 8px;
	align-content: start;
}

.mega-promo b {
	font-family: var(--loja-display);
	font-size: 18px;
	line-height: 1.15;
}

.mega-promo span {
	font-size: 14px;
	color: var(--loja-tinta-2);
}

.mega-promo .wp-element-button {
	justify-self: start;
	margin-top: 6px;
	padding: 10px 16px;
	font-size: 14px;
	text-decoration: none;
}

/* ======================================================================
   PAGINA INICIAL (a vitrine)
   ====================================================================== */

.inicio {
	padding-inline: 20px;
	padding-bottom: 24px;
}

.secao-cab {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 8px 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.secao-cab h2 {
	font-size: clamp(26px, 3vw, 34px);
	font-weight: 800;
	margin: 0;
}

.secao-cab p {
	margin: 0;
	color: var(--loja-tinta-2);
	max-width: 34em;
}

.secao-cab a {
	font-weight: 800;
	color: var(--loja-tinta);
	text-decoration: none;
	white-space: nowrap;
}

.secao-cab a:hover {
	text-decoration: underline;
}

.secao-loja {
	padding-block: 40px 16px;
}

/* selo com o tracinho da linha de corte */
.selo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--loja-tinta-2);
}

.selo::before {
	content: "";
	width: 22px;
	border-top: 2px dashed var(--loja-corte);
}

/* Vitrine de 4 categorias no topo da inicial (no lugar do carrossel, Andre
   28/09/2026): foto, nome, texto curto e link. Blocos comuns do editor, entao
   a foto e o texto mudam pela propria pagina. */
.vitrine4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 0;
}

.v4-cartao {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	border-radius: 18px;
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--loja-linha);
	overflow: hidden;
	transition: transform 0.15s, box-shadow 0.15s;
}

.v4-cartao:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1px var(--loja-linha), 0 8px 24px rgba(0, 0, 0, 0.08);
}

.v4-cartao > * {
	margin: 0 !important;
}

.v4-foto,
.v4-foto a {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--loja-papel-2);
}

.v4-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* desenho PNG (sem foto ainda): inteiro, solto no fundo */
.v4-foto img[src*=".png"] {
	object-fit: contain;
	padding: 8%;
}

.v4-nome {
	padding: 16px 18px 0;
	font-size: 1.25rem !important;
	line-height: 1.2;
}

.v4-nome a {
	color: inherit;
	text-decoration: none;
}

.v4-texto {
	flex: 1;
	padding: 6px 18px 0;
	font-size: 0.9375rem;
	color: var(--loja-tinta-2);
}

.v4-link {
	padding: 12px 18px 18px;
	font-weight: 700;
}

.v4-link a {
	color: var(--wp--preset--color--dourado, var(--loja-tinta));
	text-decoration: none;
}

@media (max-width: 960px) {
	.vitrine4 {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

@media (max-width: 600px) {
	.v4-nome {
		padding: 10px 12px 0;
		font-size: 1rem !important;
	}
	.v4-texto {
		padding: 4px 12px 0;
		font-size: 0.8125rem;
		line-height: 1.4;
	}
	.v4-link {
		padding: 8px 12px 12px;
		font-size: 0.875rem;
	}
}

/* carrossel de campanhas */
.carrossel {
	position: relative;
	margin-top: 24px;
	border-radius: 22px;
	overflow: hidden;
	background: var(--loja-acento-suave);
}

.carrossel > .slide {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	align-items: center;
	gap: 24px;
	padding: 44px 52px 56px;
	min-height: 340px;
	margin: 0;
}

/* Sem o script, todos os slides ficam empilhados e legiveis. Com ele, so' o
   ativo aparece. */
.carrossel.pronto > .slide:not(.ativo) {
	display: none;
}

.slide-texto {
	display: grid;
	gap: 14px;
	justify-items: start;
}

.slide-texto > * {
	margin: 0;
}

.slide h1,
.slide h2 {
	font-size: clamp(32px, 4.2vw, 52px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.slide-texto p:not(.selo) {
	font-size: 18px;
	color: var(--loja-tinta-2);
	max-width: 30em;
}

.slide-texto .wp-block-buttons {
	margin-top: 10px;
}

.slide-arte {
	margin: 0;
	display: grid;
	place-items: center;
}

.slide-arte img {
	width: 100%;
	max-height: 300px;
	object-fit: contain;
}

.slide-nav {
	position: absolute;
	right: 20px;
	bottom: 18px;
	display: flex;
	gap: 8px;
	align-items: center;
}

.slide-nav button {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	border: 0;
	background: #fff;
	box-shadow: var(--loja-sombra);
	cursor: pointer;
	display: grid;
	place-items: center;
	color: var(--loja-tinta);
}

.slide-nav button svg {
	width: 16px;
	height: 16px;
}

.pontos {
	display: flex;
	gap: 6px;
	margin-right: 6px;
}

.pontos i {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgba(38, 37, 35, 0.2);
	transition: width 0.2s;
}

.pontos i.ativo {
	background: var(--loja-tinta);
	width: 22px;
}

/* beneficios */
.beneficios {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-top: 18px;
}

/* a regra "sem margem entre blocos" do .inicio engolia o margin-top acima */
.inicio > .wp-block-post-content > .beneficios {
	margin-block-start: 20px;
}

.benef {
	display: grid;
	grid-template-columns: 26px 1fr;
	column-gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--loja-papel-2);
	margin: 0;
}

.benef::before {
	content: "";
	grid-row: span 2;
	width: 26px;
	height: 26px;
	background: var(--loja-tinta);
	-webkit-mask: var(--icone) center / contain no-repeat;
	mask: var(--icone) center / contain no-repeat;
}

/* Cartao de uma linha so' (ex.: "Duvida? WhatsApp"): o icone ocupava duas
   linhas da grade e o texto ficava no alto, desalinhado. */
.benef:not(:has(p + p))::before {
	grid-row: auto;
}

.benef p {
	margin: 0;
	font-size: 13px;
	color: var(--loja-tinta-2);
	line-height: 1.35;
}

.benef p:first-child {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--loja-tinta);
}

.benef-arte { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.4 8 8 9 4.6-1 8-4.5 8-9V6Z'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.benef-pagto { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 10h18M7 15h4'/%3E%3C/svg%3E"); }
.benef-entrega { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.benef-zap { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-12.5 7.5L3 21l1.6-5A8.5 8.5 0 1 1 21 12Z'/%3E%3C/svg%3E"); }

/* navegue por categoria */
.tiles {
	display: grid;
	grid-template-columns: repeat(var(--n, 5), 1fr);
	gap: 14px;
}

.tile {
	text-decoration: none;
	display: grid;
	gap: 8px;
	justify-items: center;
	text-align: center;
	color: var(--loja-tinta);
}

.tile-arte {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 18px;
	background: var(--loja-papel-2);
	display: grid;
	place-items: center;
	overflow: hidden;
	transition: background 0.15s, transform 0.15s;
}

.tile-arte img {
	width: 70%;
	height: 70%;
	object-fit: contain;
}

.tile:hover .tile-arte {
	background: var(--loja-acento-suave);
	transform: translateY(-2px);
}

.tile-nome {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.25;
}

.tile small {
	font-weight: 600;
	color: var(--loja-tinta-3);
	font-size: 12.5px;
	margin-top: -4px;
}

/* ======================================================================
   GRADE DE PRODUTOS (vitrines da inicial, categorias, busca)
   ====================================================================== */

.vitrine-grade .wp-block-woocommerce-product-template {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px 20px;
	margin: 0;
	padding: 0;
}

.vitrine-grade .wc-block-product {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 !important;
	text-align: left;
	width: auto !important;
}

.vitrine-grade .wc-block-components-product-image {
	margin: 0 0 4px !important;
	border-radius: 16px;
	background: var(--loja-papel-2);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	display: grid;
	place-items: center;
}

.vitrine-grade .wc-block-components-product-image a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

.vitrine-grade .wc-block-components-product-image img {
	width: 72% !important;
	height: 72% !important;
	object-fit: contain !important;
	transition: transform 0.25s;
}

.vitrine-grade .wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.05) rotate(-2deg);
}

/* Foto de produto (JPG/WebP) ocupa o cartao inteiro; os desenhos da loja sao
   PNG transparente e continuam soltos no fundo cinza, a 72%. */
.vitrine-grade .wc-block-components-product-image img:is([src*=".jpg"], [src*=".jpeg"], [src*=".webp"]) {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.vitrine-grade .wc-block-product:hover .wc-block-components-product-image img:is([src*=".jpg"], [src*=".jpeg"], [src*=".webp"]) {
	transform: scale(1.04);
}

.vitrine-grade .wp-block-post-title {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 16px !important;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
}

.vitrine-grade .wp-block-post-title a {
	text-decoration: none;
	color: var(--loja-tinta);
}

.vitrine-grade .wp-block-post-excerpt {
	margin: 0 !important;
	font-size: 13.5px;
	color: var(--loja-tinta-2);
	line-height: 1.4;
}

.vitrine-grade .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.vitrine-grade .wp-block-post-excerpt__more-text {
	display: none;
}

.vitrine-grade .wp-block-woocommerce-product-price {
	margin: 0 !important;
	text-align: left !important;
	font-family: var(--loja-display);
	font-weight: 800;
	font-size: 18px;
}

.sem-resultado {
	color: var(--loja-tinta-2);
	padding-block: 24px;
}

/* ======================================================================
   FAIXA PROMOCIONAL, COMO FUNCIONA, DUVIDAS
   ====================================================================== */

.faixa-promo {
	margin-block: 24px;
	border-radius: 22px;
	background: var(--loja-tinta);
	color: #fff;
	padding: 36px 40px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.faixa-promo::before {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1.5px dashed rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	pointer-events: none;
}

.faixa-promo h2 {
	font-size: clamp(24px, 2.8vw, 34px);
	font-weight: 800;
	color: #fff;
	margin: 0;
	max-width: 20em;
}

.faixa-promo p {
	color: #CFC9C1;
	margin: 8px 0 0;
}

.faixa-promo .wp-block-buttons {
	position: relative;
	margin: 0;
}

.como-funciona {
	margin-top: 40px;
	padding: 56px 20px;
	background: var(--loja-papel-2);
	border-radius: 22px;
}

.passos {
	gap: 0 !important;
	border-top: 1px solid var(--loja-linha);
	margin: 0 !important;
}

.passo {
	padding: 26px 26px 6px 0;
}

.passo + .passo {
	padding-left: 26px;
	border-left: 1px solid var(--loja-linha);
}

.passo-n {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--loja-acento);
	color: var(--loja-acento-tinta);
	display: grid;
	place-items: center;
	font-family: var(--loja-display);
	font-weight: 800;
	font-size: 15px;
	margin: 0 0 10px !important;
}

.passo h3 {
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 8px;
}

.passo p:not(.passo-n) {
	color: var(--loja-tinta-2);
	margin: 0;
}

.duvidas {
	padding-block: 56px 16px;
	gap: 48px;
}

.duvidas h2 {
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
}

.duvidas details {
	border-bottom: 1px solid var(--loja-linha);
	margin: 0 !important;
}

.duvidas summary {
	list-style: none;
	cursor: pointer;
	padding: 20px 40px 20px 0;
	font-weight: 700;
	font-size: 17.5px;
	position: relative;
}

.duvidas summary::-webkit-details-marker {
	display: none;
}

.duvidas summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 12px;
	height: 12px;
	border-right: 2.5px solid var(--loja-tinta);
	border-bottom: 2.5px solid var(--loja-tinta);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s;
}

.duvidas details[open] summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.duvidas details p {
	padding: 0 0 20px;
	margin: 0;
	color: var(--loja-tinta-2);
	max-width: 60ch;
}

/* ======================================================================
   CATALOGO (loja, categoria, busca)
   ====================================================================== */

.catalogo {
	padding: 8px 20px 48px;
}

.catalogo .migalha {
	font-size: 14px;
	color: var(--loja-tinta-3);
	padding-block: 20px 4px;
	margin: 0;
}

.catalogo .migalha a {
	color: var(--loja-tinta-2);
	text-decoration: none;
}

.catalogo-titulo {
	font-size: clamp(30px, 3.6vw, 44px);
	font-weight: 800;
	margin: 0 0 8px;
}

.catalogo-desc {
	color: var(--loja-tinta-2);
	margin: 0 0 28px;
	max-width: 60ch;
}

.catalogo .vitrine-grade {
	margin-top: 20px;
}

/* ======================================================================
   CRIAR ARTE COM IA (templates/page-criar-arte-ia.html)
   O modelo padrao de pagina do tema pai punha ~190 px de respiro no topo e
   espremia o conteudo em 800 px — a tela da IA tem formulario e artes lado a
   lado e precisa da largura da loja.
   ====================================================================== */

.pagina-ia {
	padding: 24px 20px 56px;
	margin-block-start: 0;
}

.pagina-ia > * + *,
.pagina-ia .wp-block-post-content > * + * {
	margin-block-start: 0;
}

.pagina-ia-titulo {
	font-family: var(--wp--preset--font-family--bricolage, inherit);
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 800;
	letter-spacing: -.02em;
	margin: 0 0 6px;
}

.pagina-ia .wp-block-post-content > p:first-child {
	color: var(--loja-tinta-2);
	margin: 0 0 22px;
	max-width: 70ch;
}

@media (max-width: 600px) {
	.pagina-ia {
		padding: 14px 16px 40px;
	}
}

/* ======================================================================
   RODAPE
   ====================================================================== */

.rodape-loja {
	margin-top: 64px;
	padding: 52px 20px 28px;
	font-size: 14.5px;
	border-top: 1px solid var(--loja-linha);
}

.rodape-loja a {
	color: var(--loja-tinta-2);
	text-decoration: none;
}

.rodape-loja a:hover {
	color: var(--loja-tinta);
	text-decoration: underline;
}

.rodape-colunas {
	gap: 32px;
}

.rodape-apresenta {
	color: var(--loja-tinta-2);
	max-width: 30em;
	margin-top: 12px;
}

.rodape-tit {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--loja-tinta-3);
	margin: 0 0 12px;
}

.lista-limpa {
	padding-left: 0;
	list-style: none;
	margin: 0;
	display: grid;
	gap: 8px;
}

.rodape-loja .has-pequeno-font-size {
	font-size: 14.5px !important;
	color: var(--loja-tinta-2);
}

.rodape-base {
	margin-top: 36px;
	padding-top: 20px;
	border-top: 1px solid var(--loja-linha);
	color: var(--loja-tinta-3);
	font-size: 13.5px;
}

.rodape-base p {
	margin: 0;
}

/* Icones das redes, gerados pelo [fabcfg_contato]. A cor vem da paleta, e nao
   de atributo do bloco, para trocar junto com a variacao de estilo da loja. */
.redes-loja .wp-social-link {
	background-color: var(--loja-acento);
	color: var(--loja-acento-tinta);
}

.redes-loja .wp-social-link a {
	color: inherit;
}

.redes-loja .wp-social-link svg {
	fill: currentColor;
}

.zap-flutua {
	position: fixed;
	right: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: #25D366;
	color: #fff !important;
	display: grid;
	place-items: center;
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.35);
	z-index: 90;
}

.zap-flutua svg {
	width: 28px;
	height: 28px;
}

/* ======================================================================
   PAGINA "EM BREVE" (templates/coming-soon.html)
   Substitui o modelo padrao do WooCommerce, que vinha com titulo em ingles e
   icones de LinkedIn/Instagram/Facebook apontando para lugar nenhum.
   ====================================================================== */

.em-breve {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.25rem;
	padding: var(--wp--preset--spacing--50) 1.25rem;
	text-align: center;
}

.em-breve .em-breve-logo {
	margin-inline: auto;
}

.em-breve .em-breve-titulo {
	font-size: clamp(2rem, 6vw, 3rem);
}

.em-breve .em-breve-texto {
	color: var(--loja-tinta-2);
	font-size: var(--wp--preset--font-size--grande);
}

.em-breve .em-breve-chamada {
	margin-top: var(--wp--preset--spacing--20);
	font-weight: 700;
}

.em-breve .wp-block-social-links {
	justify-content: center;
}

/* ======================================================================
   CELULAR
   ====================================================================== */

@media (max-width: 960px) {
	.topo-in {
		flex-wrap: wrap !important;
		gap: 10px 12px;
		padding-block: 10px;
	}

	.busca-loja {
		order: 3;
		flex-basis: 100%;
		max-width: none;
	}

	.mega,
	.cat-btn.cat-todas {
		display: none !important;
	}

	.cat-btn svg {
		display: none;
	}

	.carrossel > .slide {
		grid-template-columns: 1fr;
		padding: 28px 24px 72px;
		min-height: 0;
	}

	.slide-arte {
		order: -1;
	}

	.slide-arte img {
		max-height: 180px;
	}

	.beneficios {
		grid-template-columns: repeat(2, 1fr);
	}

	.tiles {
		grid-template-columns: repeat(3, 1fr);
	}

	.vitrine-grade .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px 14px;
	}

	.faixa-promo {
		grid-template-columns: 1fr;
		padding: 30px 26px;
	}

	.passos {
		flex-direction: column;
		border-top: 0;
	}

	.passo,
	.passo + .passo {
		padding: 22px 0;
		border-left: 0;
		border-top: 1px solid var(--loja-linha);
	}

	.duvidas {
		flex-direction: column;
		gap: 12px;
	}
}

@media (max-width: 600px) {
	.inicio,
	.catalogo,
	.topo-linha,
	.menu-cats-in {
		padding-inline: 16px;
	}

	.nome-loja {
		font-size: 17px;
	}

	.benef {
		padding: 12px;
	}

	.benef p:not(:first-child) {
		display: none;
	}

	.tiles {
		gap: 10px;
	}

	.tile-nome {
		font-size: 13px;
	}
}

/* ======================================================================
   PAGINA DO PRODUTO (templates/single-product.html)
   A calculadora e' do plugin; aqui so' a moldura em volta dela.
   ====================================================================== */

.produto-pagina {
	padding: 8px 20px 24px;
}

.produto-pagina > .migalha {
	font-size: 14px;
	color: var(--loja-tinta-3);
	padding-block: 20px 8px;
	margin: 0;
}

.produto-pagina > .migalha a {
	color: var(--loja-tinta-2);
	text-decoration: none;
}

.produto-colunas {
	gap: 48px !important;
	margin-block: 8px 0 !important;
}

/* A calculadora move a previa em escala (o "palco") para esta coluna. Quando
   ela esta' la', a foto do produto sai: a previa mostra o adesivo DO CLIENTE,
   na medida que ele digitou, e vale mais que qualquer foto de catalogo. */
.produto-col-arte:has( .fabcfg-palco:not([hidden]) ) .wp-block-woocommerce-product-image-gallery,
.produto-col-arte:has( .fabcfg-palco:not([hidden]) ) .woocommerce-product-gallery,
.produto-col-arte:has( .fcalc-previa:not([hidden]) ) .wp-block-woocommerce-product-image-gallery,
.produto-col-arte:has( .fcalc-previa:not([hidden]) ) .woocommerce-product-gallery {
	display: none;
}

/* No celular a previa NAO vai para esta coluna (fica abaixo do nome, ver
   configurador.js/calc.js): a coluna inteira sai quando a pagina tem
   calculadora, senao a foto de catalogo tomava a primeira tela. */
@media (max-width: 781px) {
	.produto-colunas:has( [data-fabcfg], [data-fcalc] ) > .produto-col-arte:not( :has( .fabcfg-palco, .fcalc-previa ) ) {
		display: none !important;
	}
}

.produto-col-arte .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
	border-radius: 18px;
	background: var(--loja-papel-2);
	overflow: hidden;
}

.produto-col-arte .woocommerce-product-gallery__image img:not(.zoomImg) {
	width: 78% !important;
	margin: 11% auto;
	object-fit: contain;
}

.produto-col-arte .fabcfg-palco-fixo {
	border: 0;
	border-radius: 18px;
	box-shadow: inset 0 0 0 1px var(--loja-linha);
}

.produto-titulo {
	font-size: clamp(32px, 3.6vw, 44px) !important;
	font-weight: 800;
	margin: 0 0 10px !important;
}

.produto-resumo {
	color: var(--loja-tinta-2);
	font-size: 17px;
	margin: 0 0 12px !important;
}

.produto-resumo .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.produto-preco {
	font-family: var(--loja-display);
	font-size: 22px !important;
	font-weight: 800;
	margin: 0 0 8px !important;
}

/* Sem preco ainda: o "Ver opcoes" da vitrine nao faz sentido aqui dentro. */
.produto-preco .preco-consulta {
	display: none;
}

.orcar-zap {
	margin-top: 18px;
	border-radius: 18px;
	background: var(--loja-papel-2);
	padding: 22px;
	display: grid;
	gap: 14px;
}

.orcar-zap p {
	margin: 0;
	color: var(--loja-tinta-2);
}

.orcar-zap strong {
	display: block;
	font-family: var(--loja-display);
	font-size: 20px;
	color: var(--loja-tinta);
	margin-bottom: 4px;
}

.orcar-zap .wp-element-button {
	background: #25D366;
	color: #fff;
	text-align: center;
	text-decoration: none;
}

.orcar-zap .wp-element-button:hover {
	background: #1EB858;
	color: #fff;
}

/* detalhes: abas enxutas, sem o titulo repetido dentro do painel */
.produto-detalhes {
	margin-top: 56px !important;
}

.produto-detalhes .wc-tabs {
	display: flex;
	gap: 4px;
	padding: 0 !important;
	margin: 0 0 18px !important;
	border-bottom: 1px solid var(--loja-linha);
}

.produto-detalhes .wc-tabs::before,
.produto-detalhes .wc-tabs::after,
.produto-detalhes .wc-tabs li::before,
.produto-detalhes .wc-tabs li::after {
	display: none !important;
}

.produto-detalhes .wc-tabs li {
	border: 0 !important;
	background: transparent !important;
	margin: 0 !important;
	padding: 0 !important;
}

.produto-detalhes .wc-tabs li a {
	display: block;
	padding: 12px 16px !important;
	font-weight: 700;
	color: var(--loja-tinta-2) !important;
	text-decoration: none;
	border-bottom: 2.5px solid transparent;
}

.produto-detalhes .wc-tabs li.active a {
	color: var(--loja-tinta) !important;
	border-bottom-color: var(--loja-acento);
}

.produto-detalhes .woocommerce-Tabs-panel > h2:first-child {
	display: none;
}

.produto-detalhes .woocommerce-Tabs-panel {
	color: var(--loja-tinta-2);
	max-width: 70ch;
}

.relacionados-titulo {
	font-size: clamp(24px, 2.8vw, 32px) !important;
	font-weight: 800;
	/* So' o eixo vertical: as margens laterais sao do layout "constrained",
	   que centraliza o titulo na mesma largura do resto da pagina. */
	margin-block: 56px 22px !important;
}

@media (max-width: 781px) {
	.produto-colunas {
		gap: 20px !important;
	}
}

/* No celular a calculadora prende o total na base da tela; o botao do
   WhatsApp sobe para ficar acima dele. A altura vem da propria barra
   (--fab-barra-h, medida pelo configurador/calc.js): com o botao de acao ela
   passou dos 96 px fixos de antes e o WhatsApp tapava o preco. */
@media (max-width: 781px) {
	body:has( [data-fabcfg], [data-fcalc] ) .zap-flutua {
		bottom: calc(var(--fab-barra-h, 96px) + 12px);
		width: 50px;
		height: 50px;
	}
}

/* ----------------------------------------------------------------------
   CABECALHO NO CELULAR
   Grudado, ele tinha logo + busca + categorias: 212 px, mais de um quarto da
   tela, em toda a rolagem. Aqui ele fica FIXO (fora do fluxo, com um espaco
   do mesmo tamanho no lugar — loja.js) e, rolando para baixo, recolhe busca e
   categorias; rolando para cima, elas voltam. Fixo e nao grudado de proposito:
   um elemento grudado que muda de altura empurra a pagina e ela da' um pulo.
   ---------------------------------------------------------------------- */
.cab-espaco {
	display: none;
}

@media (max-width: 960px) {
	header.wp-block-template-part:has( .topo-loja ) {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		transform: translateY( var(--cab-desloc, 0px) );
	}

	.cab-espaco {
		display: block;
		height: var(--cab-h, 0px);
	}

	header.cab-recolhido .busca-loja,
	header.cab-recolhido .menu-cats {
		display: none !important;
	}

	.topo-in {
		min-height: 58px;
	}

	/* O espaco do cabecalho ja' separa; a margem automatica do bloco seguinte
	   so' empurrava o conteudo mais 19 px para baixo. */
	.cab-espaco + * {
		margin-block-start: 0 !important;
	}

	.produto-pagina .migalha {
		padding-top: 6px !important;
	}
}

/* Simulacao do Melhor Envio: cota com peso zero nos produtos sob medida
   (ver functions.php). Sai de onde ha calculadora propria. */
.produto-col-cfg:has( .fabcfg, .fcalc ) #woocommerce-correios-calculo-de-frete-na-pagina-do-produto {
	display: none !important;
}

/* Produto externo (Kit Turminha: preco fixo, quem monta e' a pagina do kit):
   sem simulacao de frete e sem "Peca seu orcamento", que sao do sob medida. */
body.product-type-external .orcar-zap,
body.product-type-external #woocommerce-correios-calculo-de-frete-na-pagina-do-produto {
	display: none !important;
}

/* Foto de produto (kit escolar) ocupa o quadro inteiro: a margem de 11% e' para
   arte de adesivo sobre o fundo cinza; numa foto ela deixava a imagem pequena e
   o zoom do mouse (que mede o quadro) desalinhado. */
:is(body.product-type-external, body.product_cat-etiquetas-escolares) .produto-col-arte .woocommerce-product-gallery {
	background: none;
}

:is(body.product-type-external, body.product_cat-etiquetas-escolares) .produto-col-arte .woocommerce-product-gallery__image img:not(.zoomImg) {
	width: 100% !important;
	margin: 0;
	border-radius: 18px;
}

:is(body.product-type-external, body.product_cat-etiquetas-escolares) .produto-col-arte .flex-control-thumbs {
	margin-top: 10px;
}

/* A imagem do zoom (jQuery zoom) tem que ficar no tamanho real; as regras acima
   encolhiam ela ao tamanho do quadro e o zoom nao aumentava nada. */
.produto-col-arte .woocommerce-product-gallery__image .zoomImg {
	max-width: none !important;
	max-height: none !important;
}

/* Kit Turminha: selo de frete gratis acima do "Personalize e compre"
   (plugin, modelos/kit-botao.php) — em destaque, pedido do Andre 13/10/2026. */
.kit-frete-selo {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 12px;
	margin: 4px 0 22px;
	padding: 10px 16px 10px 12px;
	border-radius: 14px;
	background: #E8F6EC;
	border: 1.5px solid #B8E2C4;
	color: #14532D;
	font-size: 16px;
	line-height: 1.3;
}

.kit-frete-selo svg {
	flex: none;
	width: 34px;
	height: 34px;
	padding: 6px;
	border-radius: 50%;
	background: #1E7B3A;
	color: #fff;
}

.kit-frete-selo strong {
	font-size: 18px;
	font-weight: 800;
	color: #1E7B3A;
}

/* o botao e' um link (inline): sem inline-block o padding dele subia por cima do selo */
.kit-frete-selo + .single_add_to_cart_button {
	display: inline-block;
	margin-top: 0;
}

.kit-frete-selo small {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: #3F6B4E;
}

/* Selo "Frete gratis" na foto do cartao da vitrine (classe frete-gratis vem do
   plugin, FabCfg_Kit_Compra::classe_frete). */
.frete-gratis .wc-block-components-product-image {
	position: relative;
}

.frete-gratis .wc-block-components-product-image::after {
	content: "Frete grátis";
	position: absolute;
	left: 10px;
	top: 10px;
	padding: 5px 11px;
	border-radius: 999px;
	background: #1E7B3A;
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .01em;
	box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .35);
	pointer-events: none;
}