/* ==========================================================================
   Site CF — Identidade visual (servida pelo plugin Sistema CF)
   Tema: hello-cf-child (Hello Elementor)
   ========================================================================== */

:root {
	--cf-primary: #31404b;
	--cf-accent: #d39d45;
	--cf-accent-hover: #b9832f;
	--cf-text: #31404b;
	--cf-container: 1600px;
	--cf-font-title: "Cinzel", Georgia, serif;
	--cf-font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cf-header-h: 60px;
	--cf-header-sticky-h: 50px;
	/* Identidade do modelo "Kimi Site" (home/catálogo/produto/busca) */
	--cf-paper: #f8f7f2;
	--cf-ink: #252525;
	--cf-green: var(--cf-primary);
	--cf-yellow: #fde460;
	--cf-pink: #e2abe2;
	--cf-teal: #00ae99;
	--cf-gold: #b08d2f;
	--cf-font-display: "Cinzel", Georgia, serif;
	--cf-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
	font-family: var(--cf-font-text);
	font-size: 14px;
	color: var(--cf-text);
	/* Suaviza a transição do fundo interpolado pelas seções [data-bg]. */
	transition: background-color .2s linear, color .2s linear;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--cf-font-title);
	font-weight: 400;
	text-transform: uppercase;
	color: var(--cf-text);
}

.cfh-container,
.cff-container {
	width: 100%;
	max-width: var(--cf-container);
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
}

/* WooCommerce — botões na identidade CF */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link {
	background-color: var(--cf-primary);
	color: #fff;
	border-radius: 0;
	font-family: var(--cf-font-title);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wp-block-button__link:hover {
	background-color: var(--cf-accent-hover);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Cabeçalho — barra superior
   -------------------------------------------------------------------------- */

.cfh-header {
	/* Wrapper sticky com ALTURA ZERO no fluxo: a barra (.cfh-main) é absoluta
	   dentro dele, ou seja, uma camada VISUAL sobre o conteúdo. Mudar a
	   altura/barra de estado não desloca nada no documento — elimina o
	   "nado"/piscar causado pelo scroll anchoring durante a transição. */
	position: sticky;
	top: 0;
	height: 0;
	z-index: 900;
	font-family: var(--cf-font-title);
}

body.admin-bar .cfh-header {
	top: 32px;
}

/* Com a admin bar contraída (aba do plugin), o cabeçalho volta ao topo. */
html:not(.cf-adminbar-open) body.admin-bar .cfh-header {
	top: 0;
}

/* Sentinela do estado sticky (ver theme.js): 51px invisíveis fora do fluxo
   no topo do documento. Enquanto qualquer parte dela está na viewport
   (scrollY < ~51), o header está "ao topo"; quando sai, fica preso/reduzido.
   Como não ocupa espaço no fluxo e não se move com o header, o scroll
   anchoring não gera o laço de piscar. */
.cfh-sticky-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	height: 51px;
	width: 100%;
	pointer-events: none;
}

.cfh-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
}

.cfh-menu a {
	text-decoration: none;
	color: var(--cf-text);
	font-weight: 600;
	transition: color .25s ease;
}

/* --------------------------------------------------------------------------
   Cabeçalho — linha principal
   -------------------------------------------------------------------------- */

.cfh-main {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 4px 14px -8px rgba(0, 0, 0, .12);
	transition: background-color .25s ease, box-shadow .25s ease;
}

.cfh-header.cfh-stuck .cfh-main {
	box-shadow: none;
}

/* Espaçador nas páginas internas: empurra o conteúdo para baixo da barra
   (na home o hero passa por baixo do header transparente — sem espaçador). */
.cfh-header-spacer {
	height: 90px;
}

@media (max-width: 1024px) {
	.cfh-header-spacer {
		height: 55px;
	}
}

/* Com a admin bar expandida, a barra desce 32px (46 mobile) e o espaçador
   precisa acompanhar. */
html.cf-adminbar-open body.admin-bar .cfh-header-spacer {
	height: 122px;
}

@media (max-width: 600px) {
	html.cf-adminbar-open body.admin-bar .cfh-header-spacer {
		height: 101px;
	}
}

.cfh-main-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--cf-header-h);
	gap: 24px;
	transition: min-height .25s ease;
}

.cfh-nav-desktop {
	display: none;
	align-items: stretch;
	align-self: stretch;
	flex: 1 1 0;
}

.cfh-menu-main {
	align-items: stretch;
	gap: 28px;
	height: 100%;
}

.cfh-menu-main > li {
	display: flex;
}

.cfh-menu-main > li > a,
.cfh-link-categorias {
	display: inline-flex;
	align-items: center;
	min-height: var(--cf-header-h);
	height: 100%;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--cf-text);
}

.cfh-menu-main > li > a:hover,
.cfh-link-categorias:hover {
	color: var(--cf-accent);
}

/* Espaço entre "Categorias" e os demais itens do menu.
   Sem position aqui: se o li virasse o bloco de contenção, o mega-dropdown
   (left: 50% de 100vw) ficaria ancorado num elemento de ~100px e só a
   última coluna de categorias apareceria na tela. */
.cfh-item-categorias {
	margin-right: 26px;
}

/* Logo centralizado verticalmente na linha principal do cabeçalho.
   Ancorado em .cfh-main-inner (que acompanha o sticky). */
.cfh-logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 5;
	text-align: center;
}

.cfh-logo-img {
	display: block;
	width: 150px;
	max-width: 150px;
	height: auto;
	transform-origin: center center;
	/* Só transform/filtro no estado stuck: tudo animável de forma suave e
	   sem mudar o layout (sem interferência do scroll anchoring). */
	transition: transform .25s ease, filter .25s ease;
}

.cfh-header.cfh-stuck .cfh-logo-img {
	transform: scale(.6);
}

/* Ferramentas (carrinho, favoritos, busca, conta) */

.cfh-tools {
	display: flex;
	align-items: center;
	gap: 28px;
}

.cfh-tools-desktop {
	display: none;
	flex: 1 1 0;
	justify-content: flex-end;
}

/* Reset defensivo para os triggers que sao <button> (fim de estilos herdados) */
button.cfh-tool {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	font: inherit;
	color: var(--cf-text);
	line-height: 1;
}

/* O kit do Elementor força display:block em buttons, quebrando o alinhamento
   do ícone dentro do flex do header; inline-flex garante o comportamento dos
   links, com altura igual ao do ícone. */
.cfh-tools button.cfh-tool {
	display: inline-flex;
}

.cfh-tool {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cf-text);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--cf-font-title);
	text-decoration: none;
}

.cfh-tool:hover {
	color: var(--cf-accent);
}

/* O kit do Elementor pinta o fundo dos <button> no hover — mantém os
   triggers do header (busca, carrinho etc.) sempre transparentes. */
.cfh-tools button.cfh-tool:hover,
.cfh-tools button.cfh-tool:focus {
	background: transparent;
}

/* Hover dos ícones do header não muda a cor (só o leve zoom do svg). */
.cfh-tools .cfh-tool:hover,
.cfh-tools .cfh-tool:focus {
	color: inherit;
}

.cfh-tool-icon {
	position: relative;
	display: inline-flex;
}

.cfh-tool-icon svg {
	width: 26px;
	height: 26px;
	display: block;
	transition: transform .2s ease;
}

.cfh-tool:hover .cfh-tool-icon svg {
	transform: scale(1.1);
}

.cfh-tool-label {
	display: none;
}

/* Tooltips dos ícones (só ícone visível, texto aparece no hover).
   As amostras de cor usam tooltip dinâmica em JS, sem este ::after. */
[data-tip]:not(.cf-color-swatch) {
	position: relative;
}

[data-tip]:not(.cf-color-swatch)::after {
	content: attr(data-tip);
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translate(-50%, 6px);
	background: var(--cf-primary);
	color: #fff;
	font-family: var(--cf-font-title);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 7px 12px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
	pointer-events: none;
	z-index: 60;
}

[data-tip]:not(.cf-color-swatch):hover::after {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.cfh-cart-count {
	position: absolute;
	top: -8px;
	right: -12px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--cf-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	border-radius: 999px;
	white-space: nowrap;
}

.cfh-cart-count > span {
	display: none;
}

.cfh-cart-count.is-empty {
	display: none;
}

/* Dropdown da conta */

.cfh-tool-account {
	position: relative;
}

.cfh-tool-account > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.cfh-account-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	min-width: 220px;
	background: #1d1d1d;
	color: #fff;
	padding: 16px 18px;
	display: none;
	flex-direction: column;
	gap: 10px;
	z-index: 950;
	box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}

.cfh-tool-account:hover .cfh-account-dropdown,
.cfh-tool-account:focus-within .cfh-account-dropdown {
	display: flex;
}

.cfh-account-dropdown a {
	color: #fff;
	text-decoration: none;
	font-size: 13px;
}

.cfh-account-dropdown a:hover {
	color: var(--cf-accent);
}

.cfh-account-title {
	font-family: var(--cf-font-title);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.cfh-account-btn {
	display: inline-block;
	padding: 8px 12px;
	background: var(--cf-accent);
	color: #fff !important;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
}

/* Mega-dropdown Categorias — estilo do modelo: tiles numerados em grade,
   largura total da janela, painel com blur e barra "ver todo o acervo" */

/* O dropdown usa width:100vw; clip (e não hidden) evita a barra de rolagem
   horizontal sem quebrar o position:sticky do header. */
html {
	overflow-x: clip;
}

.cfh-cat-dropdown {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	top: calc(100% - 34px);
	background: rgba(255, 255, 255, .96);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	display: none;
	z-index: 940;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .35);
	border-top: 1px solid rgba(0, 0, 0, .06);
	padding-top: 10px;
	overflow: hidden;
}

/* No estado stuck a barra é mais baixa: sobe menos para não cobrir o link */
.cfh-header.cfh-stuck .cfh-cat-dropdown {
	top: calc(100% - 14px);
}

/* Dentro do header: sem contagem de peças e itens mais compactos */
.cfh-cat-dropdown .cf-cat-count {
	display: none;
}

.cfh-cat-dropdown .cf-cat-tiles a {
	padding-top: 12px;
	padding-bottom: 12px;
}

.cfh-main-inner {
	position: relative;
}

.cfh-item-categorias:hover .cfh-cat-dropdown,
.cfh-item-categorias:focus-within .cfh-cat-dropdown {
	display: block;
}

/* Overlay: embaça e escurece levemente em azul o conteúdo da página.
   z-index -1 de propósito: como o header (z 900) é um stacking context, -1
   deixa o overlay ABAIXO do conteúdo do próprio cabeçalho (logo/menu não
   são cobertos pelo blur) mas ACIMA de toda a página, que fica fora desse
   contexto. Um z-index positivo aqui cobriria o header, que é seu ancestral. */
.cfh-cat-overlay {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: rgba(23, 62, 73, .38);
	-webkit-backdrop-filter: blur(10px) saturate(.85);
	backdrop-filter: blur(10px) saturate(.85);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
	pointer-events: none;
}

.cfh-item-categorias:hover .cfh-cat-overlay,
.cfh-item-categorias:focus-within .cfh-cat-overlay {
	opacity: 1;
	visibility: visible;
}

/* Grade numerada de categorias (compartilhada com a seção Acervo da Home) */
.cf-cat-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: column;
	gap: 1px;
	background: rgba(0, 0, 0, .06);
	border: 1px solid rgba(0, 0, 0, .06);
}

.cf-cat-tiles a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 18px 22px 20px;
	background: rgba(255, 255, 255, .92);
	color: var(--cf-ink, #252525);
	text-decoration: none;
	overflow: hidden;
	transition: background-color .25s ease;
}

.cf-cat-tiles a::after {
	content: "";
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 12px;
	height: 1px;
	background: var(--cf-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}

.cf-cat-tiles a:hover {
	background: #fff;
}

.cf-cat-tiles a:hover::after {
	transform: scaleX(1);
}

.cf-cat-idx {
	position: absolute;
	top: 14px;
	right: 18px;
	font-family: var(--cf-font-title);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .1em;
	color: rgba(37, 37, 37, .38);
}

.cf-cat-name {
	font-family: var(--cf-font-title);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: .01em;
	padding-right: 34px;
}

.cf-cat-count {
	font-size: .78rem;
	font-weight: 500;
	color: rgba(37, 37, 37, .5);
}

/* Barra "ver todo o acervo" */
.cf-cat-all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 17px 24px;
	background: var(--cf-primary);
	color: var(--cf-paper, #f8f7f2);
	text-decoration: none;
	font-family: var(--cf-font-title);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	transition: background-color .25s ease, color .25s ease;
}

.cf-cat-all:hover {
	background: #1d4b58;
	color: #fff;
}

.cfh-cat-dropdown .cf-cat-all,
.cfh-cat-dropdown .cf-cat-all span {
	color: #fff;
}

.cf-cat-all-arrow {
	font-size: 18px;
	line-height: 1;
	transition: transform .25s ease;
}

.cf-cat-all:hover .cf-cat-all-arrow {
	transform: translateX(5px);
}

@media (max-width: 900px) {
	.cf-cat-tiles {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.cf-cat-tiles {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Cabeçalho — mobile
   -------------------------------------------------------------------------- */

.cfh-logo-mobile {
	flex: 0 0 auto;
}

.cfh-logo-mobile img {
	max-width: 44px;
	height: auto;
	display: block;
	transition: filter .25s ease;
}

.cfh-tools-mobile {
	margin-left: auto;
	gap: 24px;
}

.cfh-cart-badge {
	right: -8px;
}

.cfh-search-mobile {
	display: none;
}

.cfh-searchform {
	width: 100%;
}

/* Linha de busca unificada: home, overlay do cabeçalho e barra lateral do
   catálogo compartilham o mesmo visual branco com lupa dentro do campo. */
.cf-busca-line,
.cfh-searchform-line,
.cf-shop-sidebar-field.cf-search-line {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid rgba(37, 37, 37, .18);
	border-radius: 8px;
	box-shadow: 0 4px 18px -8px rgba(37, 37, 37, .18);
	transition: border-color .25s ease, box-shadow .25s ease;
}

.cf-busca-form:focus-within .cf-busca-line,
.cfh-searchform:focus-within .cfh-searchform-line,
.cf-shop-sidebar-search:focus-within .cf-shop-sidebar-field.cf-search-line {
	border-color: #31404b;
	box-shadow: 0 8px 28px -10px rgba(49, 64, 75, .28);
}

.cf-busca-icon,
.cfh-searchform-icon,
.cf-search-icon {
	display: inline-flex;
	color: #31404b;
	opacity: .7;
	transition: opacity .25s ease;
	flex: 0 0 auto;
}

.cf-busca-form:focus-within .cf-busca-icon,
.cfh-searchform:focus-within .cfh-searchform-icon,
.cf-shop-sidebar-search:focus-within .cf-search-icon {
	opacity: 1;
}

.cf-busca-icon svg,
.cfh-searchform-icon svg,
.cf-search-icon svg {
	width: 22px;
	height: 22px;
}

.cf-busca-line input[type="search"],
.cfh-searchform-line input[type="search"],
.cf-shop-sidebar-field.cf-search-line input[type="search"] {
	flex: 1 1 auto;
	width: 100%;
	background: transparent;
	border: 0;
	box-shadow: none;
	font-family: var(--cf-font-display);
	font-size: clamp(1.15rem, 2.4vw, 1.55rem);
	font-weight: 400;
	color: var(--cf-ink);
	padding: 0;
	outline: none;
}

.cf-busca-line input[type="search"]::placeholder,
.cfh-searchform-line input[type="search"]::placeholder,
.cf-shop-sidebar-field.cf-search-line input[type="search"]::placeholder {
	color: rgba(37, 37, 37, .45);
	font-style: italic;
}

/* Ajuste fino do overlay de busca do cabeçalho: mesmo estilo, mas maior. */
.cfh-search-overlay .cfh-searchform-line {
	padding: 18px 24px;
	gap: 18px;
}

.cfh-search-overlay .cfh-searchform-icon svg {
	width: 26px;
	height: 26px;
}

.cfh-search-overlay .cfh-searchform-line input[type="search"] {
	font-size: clamp(1.5rem, 3vw, 2.1rem);
}

/* Campo de busca mobile antigo (oculto): mantém altura mínima. */
.cfh-search-mobile .cfh-searchform-line {
	margin: 10px 0;
}

/* Overlay de busca — tela cheia: papel quente com brilho dourado no topo,
   título em Cinzel, campo com sublinhado que acende no foco e resultados
   ao vivo em grade de cards. */
.cfh-search-overlay {
	position: fixed;
	inset: 0;
	background:
		radial-gradient(1100px 480px at 50% -12%, rgba(211, 157, 69, .16), transparent 62%),
		linear-gradient(#faf9f4, #f2f0e9);
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: clamp(72px, 12vh, 140px) 24px 56px;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
}

.cfh-search-overlay.cfh-open {
	opacity: 1;
	visibility: visible;
}

.cfh-search-overlay-inner {
	width: min(920px, 100%);
	transform: translateY(16px);
	opacity: 0;
	transition: transform .4s cubic-bezier(.2, .7, .3, 1) .05s, opacity .35s ease .05s;
}

.cfh-search-overlay.cfh-open .cfh-search-overlay-inner {
	transform: none;
	opacity: 1;
}

.cfh-search-eyebrow {
	margin: 0 0 10px;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: #d39d45;
}

.cfh-search-title {
	margin: 0 0 36px;
	text-align: center;
	font-family: var(--cf-font-title);
	font-size: clamp(28px, 4.4vw, 46px);
	font-weight: 500;
	line-height: 1.15;
	color: #31404b;
}

.cfh-search-title em {
	font-style: italic;
	color: #d39d45;
}

.cfh-search-overlay .cfh-searchform {
	max-width: 720px;
	margin: 0 auto;
}

/* Resultados ao vivo da busca — grade de cards. */
.cfh-search-results {
	max-width: 920px;
	margin: 34px auto 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	overflow-x: hidden;
}

@media (max-width: 700px) {
	.cfh-search-results {
		grid-template-columns: 1fr;
	}
}

.cfh-search-results:empty {
	display: none;
}

.cfh-search-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid rgba(49, 64, 75, .1);
	text-decoration: none;
	color: var(--cf-text);
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.cfh-search-item:hover {
	border-color: rgba(211, 157, 69, .65);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -14px rgba(49, 64, 75, .35);
}

.cfh-search-item img {
	width: 58px;
	height: 58px;
	object-fit: contain;
	background: #f6f5f0;
	flex: 0 0 auto;
}

.cfh-search-item-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cfh-search-item-body strong {
	font-family: var(--cf-font-title);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	overflow-wrap: break-word;
	word-break: break-word;
}

.cfh-search-item-body small {
	color: rgba(49, 64, 75, .55);
	letter-spacing: .04em;
	overflow-wrap: break-word;
	word-break: break-word;
}

.cfh-search-all {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px;
	border: 1px dashed rgba(49, 64, 75, .28);
	text-align: center;
	overflow-wrap: break-word;
	word-break: break-word;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	color: #31404b;
	transition: border-color .2s ease, color .2s ease;
}

.cfh-search-all:hover {
	border-color: #d39d45;
	color: #d39d45;
}

.cfh-search-all::after {
	content: "\2192";
}

.cfh-search-hint,
.cfh-search-empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: 24px 8px;
	color: rgba(49, 64, 75, .6);
	font-style: italic;
}

/* Buscas populares (ocultas enquanto há resultados). */
.cfh-search-pop {
	max-width: 720px;
	margin: 32px auto 0;
	text-align: center;
}

.cfh-search-overlay.has-results .cfh-search-pop {
	display: none;
}

.cfh-search-pop-label {
	margin: 0 0 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba(49, 64, 75, .45);
}

.cfh-search-pop-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.cfh-search-pop-chip {
	padding: 9px 20px;
	background: #fff;
	border: 1px solid rgba(49, 64, 75, .18);
	border-radius: 999px;
	font-family: var(--cf-font-text);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #31404b;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.cfh-search-pop-chip:hover {
	background: #fff;
	border-color: #d39d45;
	color: #d39d45;
	transform: translateY(-2px);
}

.cfh-search-pop-chip:focus-visible {
	background: #fff;
	border-color: #d39d45;
	color: #d39d45;
	outline: none;
}

.cfh-search-close {
	position: fixed;
	top: 22px;
	right: 26px;
	z-index: 1001;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid rgba(49, 64, 75, .15);
	border-radius: 50%;
	color: #31404b;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease, transform .25s ease;
}

.cfh-search-close:hover,
.cfh-search-close:focus-visible {
	background: #fff;
	border-color: #d39d45;
	color: #d39d45;
	transform: rotate(90deg);
}

.cfh-search-close svg {
	width: 20px;
	height: 20px;
}

@media (max-width: 700px) {
	.cfh-search-title {
		font-size: 26px;
	}
}

/* Painel mobile */

.cfh-mobile-panel {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(320px, 85vw);
	background: #fff;
	z-index: 1001;
	transform: translateX(-100%);
	transition: transform .25s ease;
	overflow-y: auto;
	box-shadow: 4px 0 24px rgba(0, 0, 0, .2);
}

.cfh-mobile-panel.cfh-open {
	transform: translateX(0);
}

.cfh-mobile-panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(49, 64, 75, .2);
	font-family: var(--cf-font-title);
	font-weight: 700;
	text-transform: uppercase;
}

.cfh-mobile-panel-head button {
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--cf-text);
}

.cfh-mobile-panel-head svg {
	width: 22px;
	height: 22px;
}

.cfh-menu-mobile {
	list-style: none;
	margin: 0;
	padding: 8px 20px;
}

.cfh-menu-mobile a {
	display: block;
	padding: 12px 0;
	color: var(--cf-text);
	text-decoration: none;
	font-family: var(--cf-font-title);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	border-bottom: 1px solid rgba(49, 64, 75, .08);
}

.cfh-menu-mobile-secondary {
	border-top: 2px solid rgba(49, 64, 75, .2);
	margin-top: 8px;
}

.cfh-menu-mobile-secondary a {
	font-size: 13px;
	font-weight: 400;
}

.cfh-mobile-cats {
	padding: 8px 20px 0;
}

.cfh-mobile-cats summary {
	cursor: pointer;
	padding: 12px 0;
	font-family: var(--cf-font-title);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	color: var(--cf-text);
	list-style: none;
}

.cfh-mobile-cats summary::after {
	content: "+";
	float: right;
}

.cfh-mobile-cats[open] summary::after {
	content: "–";
}

.cfh-mobile-cats ul {
	list-style: none;
	margin: 0 0 8px;
	padding: 0 0 0 10px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 14px;
}

.cfh-mobile-cats ul a {
	display: block;
	padding: 8px 0;
	color: var(--cf-text);
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
}

.cfh-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	z-index: 1000;
}

/* --------------------------------------------------------------------------
   Rodapé (v3 — fundo cinza claro, fontes escuras, detalhes dourados)
   -------------------------------------------------------------------------- */

.cff-footer {
	background: var(--cf-primary, #31404b);
	color: #f8f7f2;
	margin-top: 0;
	font-family: var(--cf-font-text);
}

.cff-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	padding-top: 60px;
	padding-bottom: 44px;
}

.cff-title {
	font-family: var(--cf-font-title);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #f8f7f2;
	margin: 0 0 18px;
}

.cff-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cff-list li,
.cff-list li a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #f8f7f2;
	text-decoration: none;
	font-size: 14px;
}

.cff-list li a:hover {
	color: var(--cf-accent, #d39d45);
}

.cff-icon {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--cf-accent, #d39d45);
}

.cff-icon svg {
	width: 18px;
	height: 18px;
}

.cff-bottom {
	border-top: 1px solid rgba(248, 247, 242, .15);
	padding: 26px 0;
}

.cff-bottom-inner {
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-items: flex-start;
}

.cff-social {
	display: flex;
	gap: 14px;
}

.cff-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1.5px solid rgba(248, 247, 242, .45);
	border-radius: 50%;
	color: #f8f7f2;
	transition: all .2s ease;
}

.cff-social-icon:hover {
	border-color: var(--cf-accent, #d39d45);
	color: var(--cf-accent, #d39d45);
}

.cff-social-icon svg {
	width: 19px;
	height: 19px;
}

.cff-legal p {
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.6;
	color: rgba(248, 247, 242, .75);
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.cfh-nav-desktop,
	.cfh-tools-desktop {
		display: flex;
	}

	/* A logo tem max-width 150px (~75px de altura); 90px dão respiro */
	.cfh-main-inner {
		min-height: 90px;
	}

	.cfh-header.cfh-stuck .cfh-main-inner {
		min-height: var(--cf-header-h);
	}

	.cfh-logo-mobile,
	.cfh-tools-mobile,
	.cfh-search-mobile {
		display: none;
	}

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

	.cff-bottom-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.cff-legal {
		text-align: right;
	}
}

@media (max-width: 1024px) {
	.cfh-nav-desktop,
	.cfh-tools-desktop,
	.cfh-topbar,
	.cfh-logo {
		display: none;
	}

	.cfh-header {
		top: 0;
	}

	.cfh-main-inner {
		min-height: 55px;
	}
}

/* Botão flutuante do Assistente CF (módulo Moodboard): no mobile só aparece
   depois que a página rola — antes disso ele tamparia o hero. A classe
   cf-scrolled no body é controlada pelo mesmo observador do cabeçalho. */
@media (max-width: 1024px) {
	#cf-express-badge,
	#cf-express-bubble-tooltip,
	#cf-express-bubble-menu {
		transition: opacity .3s ease, transform .3s ease;
	}

	body:not(.cf-scrolled) #cf-express-badge,
	body:not(.cf-scrolled) #cf-express-bubble-tooltip,
	body:not(.cf-scrolled) #cf-express-bubble-menu {
		opacity: 0 !important;
		pointer-events: none !important;
		transform: translateY(20px) !important;
	}
}

@media (max-width: 600px) {
	body.admin-bar .cfh-header {
		top: 46px;
	}

	html:not(.cf-adminbar-open) body.admin-bar .cfh-header {
		top: 0;
	}
}

/* --------------------------------------------------------------------------
   WooCommerce — grade da loja (substitui o layout que o Woodmart fornecia)
   -------------------------------------------------------------------------- */

.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Respeita a classe columns-N do WooCommerce */
.woocommerce ul.products.columns-1 { grid-template-columns: repeat(1, 1fr); }
.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
.woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
.woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }

/* Remove o sistema de float legado do WooCommerce */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	float: none;
	width: auto;
	margin: 0;
	padding: 0 0 14px;
	clear: none;
	text-align: center;
	background: #fff;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	color: var(--cf-text);
	text-decoration: none;
}

.woocommerce ul.products li.product img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* Título do produto (loop) na identidade CF */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .wd-entities-title {
	font-family: var(--cf-font-title);
	font-size: 13px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .03em;
	line-height: 1.5;
	color: var(--cf-text);
	padding: 0 10px;
	margin: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product .wd-entities-title a {
	color: inherit;
	text-decoration: none;
	font-size: inherit;
	font-weight: inherit;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover,
.woocommerce ul.products li.product .wd-entities-title a:hover {
	color: var(--cf-accent);
}

/* SKU/label de categoria injetados pelo plugin */
ul.products li.product .custom-sku-display,
ul.products li.product .label_conjunto {
	display: block;
	font-size: 12px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* Preço (quando visível fora do card de loja) */
.woocommerce ul.products li.product .price {
	font-family: var(--cf-font-title);
	font-size: 15px;
	color: var(--cf-primary);
}

/* Badges do plugin (Novidade / Original CF) e badge nativo de promoção */
ul.products li.product .badge-novidade-woo,
ul.products li.product .badge-exclusivo-woo,
.woocommerce span.onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 20;
	background: var(--cf-primary);
	color: #fff;
	font-family: var(--cf-font-title);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 5px 10px;
	border-radius: 0;
	line-height: 1;
	min-height: 0;
}

ul.products li.product .badge-exclusivo-woo {
	background: var(--cf-accent);
}

/* Barra superior da loja (ordenação) */
.woocommerce .woocommerce-ordering {
	margin-bottom: 24px;
}

.woocommerce .woocommerce-ordering select {
	font-family: var(--cf-font-text);
	font-size: 13px;
	color: var(--cf-text);
	border: 2px solid var(--cf-text);
	border-radius: 0;
	padding: 8px 12px;
	background: #fff;
}

/* Paginação */
.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: flex;
	gap: 6px;
	justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	float: none;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 10px;
	border: 1.5px solid rgba(49, 64, 75, .3);
	background: #fff;
	color: var(--cf-text);
	font-family: var(--cf-font-title);
	font-size: 13px;
	border-radius: 0;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: var(--cf-primary);
	border-color: var(--cf-primary);
	color: #fff;
}

/* Produtos relacionados / carrosséis que usam a mesma grade */
.woocommerce .related ul.products,
.woocommerce .up-sells ul.products,
.woocommerce .cross-sells ul.products {
	grid-template-columns: repeat(4, 1fr);
}

/* Página de produto única — layout básico em 2 colunas */
.woocommerce div.product div.images,
.woocommerce div.product div.summary {
	float: none;
	width: auto;
}

.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}

@media (min-width: 1025px) {
	.woocommerce div.product {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.woocommerce div.product .woocommerce-tabs,
	.woocommerce div.product .related,
	.woocommerce div.product .up-sells {
		grid-column: 1 / -1;
	}
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--cf-font-title);
	font-size: 22px;
	color: var(--cf-primary);
}

.woocommerce div.product .product_title {
	font-size: 26px;
	margin-bottom: 12px;
}

.woocommerce div.product form.cart .button,
.woocommerce div.product button.single_add_to_cart_button {
	padding: 14px 28px;
	font-size: 13px;
}

/* Mensagens do WooCommerce na identidade */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--cf-primary);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--cf-primary);
}

/* Responsivo da grade */
@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce ul.products.columns-6,
	.woocommerce .related ul.products,
	.woocommerce .up-sells ul.products {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px 16px;
	}
}

@media (max-width: 640px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	.woocommerce ul.products.columns-3,
	.woocommerce ul.products.columns-4,
	.woocommerce ul.products.columns-5,
	.woocommerce ul.products.columns-6,
	.woocommerce .related ul.products,
	.woocommerce .up-sells ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 12px;
	}
}

/* ==========================================================================
   Home CF — seções da página inicial (modelo de referência)
   Paleta estendida da identidade CF
   ========================================================================== */

:root {
	--cf-paper: #f8f7f2;
	--cf-ink: #252525;
	--cf-pink: #e2abe2;
	--cf-yellow: #fde460;
	--cf-green: var(--cf-primary);
}

html {
	overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Cabeçalho transparente sobre o hero (somente na página inicial)
   --------------------------------------------------------------------------
   A troca transparente -> branco é segura porque a barra é uma camada
   visual (wrapper de altura zero): a transição não desloca o documento. */

body.cfh-over-hero .cfh-header-spacer {
	display: none;
}

body.cfh-over-hero .cfh-header:not(.cfh-stuck) .cfh-main {
	background: linear-gradient(to bottom, rgba(10, 25, 30, .55), rgba(10, 25, 30, 0));
	box-shadow: none;
}

body.cfh-over-hero .cfh-header:not(.cfh-stuck) .cfh-menu a,
body.cfh-over-hero .cfh-header:not(.cfh-stuck) .cfh-menu-main > li > a,
body.cfh-over-hero .cfh-header:not(.cfh-stuck) .cfh-link-categorias,
body.cfh-over-hero .cfh-header:not(.cfh-stuck) .cfh-tool {
	color: #fff;
}

/* O dropdown de categorias é um painel claro mesmo sobre o hero: sem essa
   regra, o ".cfh-menu a" acima (branco) vence ".cf-cat-tiles a" e os nomes
   das categorias somem. */
body.cfh-over-hero .cfh-header:not(.cfh-stuck) .cfh-cat-dropdown .cf-cat-tiles a {
	color: var(--cf-ink, #252525);
}

body.cfh-over-hero .cfh-header:not(.cfh-stuck) .cfh-logo-img,
body.cfh-over-hero .cfh-header:not(.cfh-stuck) .cfh-logo-mobile img {
	filter: brightness(0) invert(1);
}

/* --------------------------------------------------------------------------
   Base das seções
   -------------------------------------------------------------------------- */

.cf-sec {
	padding: clamp(72px, 9vw, 128px) 0;
	font-family: var(--cf-font-sans);
}

/* Largura elegante do conteúdo das seções da Home (containers Elementor
   full-width): o body aparece nas laterais e nas transições de cor. */
.cf-sec > .cf-container,
.cf-tema-block > .cf-container {
	width: 100%;
	max-width: 1400px;
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
}

.cf-label {
	font-family: var(--cf-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(37, 37, 37, .55);
	margin: 0 0 26px;
}

.cf-label--center {
	text-align: center;
}

.cf-label--dim {
	opacity: .55;
}

.cf-c-green { color: var(--cf-green); }
.cf-c-blue { color: var(--cf-primary); }
.cf-c-pink { color: #b96ba8; }
.cf-c-accent { color: var(--cf-accent); }
.cf-c-yellow { color: var(--cf-yellow); }

.cf-title {
	font-family: var(--cf-font-display);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.02em;
	font-size: clamp(2.4rem, 6vw, 5rem);
	color: var(--cf-ink);
	margin: 0 0 24px;
}

.cf-title em {
	font-style: italic;
	font-weight: 300;
}

/* Acento do título em verde, salvo quando o template escolhe outra cor. */
.cf-title em:not([class*="cf-c-"]) {
	color: var(--cf-green);
}

.cf-title--center {
	text-align: center;
}

.cf-title--narrow {
	max-width: 660px;
}

.cf-title--center.cf-title--narrow {
	margin-left: auto;
	margin-right: auto;
}

.cf-title--xl {
	font-size: clamp(3rem, 9vw, 7.5rem);
	color: var(--cf-paper);
}

/* Sobre o bloco verde de contato o acento itálico continua claro. */
.cf-cta .cf-title em {
	color: rgba(248, 247, 242, .9);
}

.cf-lead {
	font-size: clamp(1rem, 1.3vw, 1.15rem);
	line-height: 1.7;
	color: rgba(37, 37, 37, .72);
	max-width: 640px;
	margin: 0 0 32px;
}

/* Botão com troca de texto no hover */
.cf-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 20px 36px;
	background: var(--cf-paper);
	color: var(--cf-ink);
	font-family: var(--cf-font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease;
}

.cf-btn-text,
.cf-btn-text-alt {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .35s ease;
	white-space: nowrap;
}

.cf-btn-text-alt {
	position: absolute;
	inset: 0;
	transform: translateY(100%);
}

.cf-btn:hover .cf-btn-text {
	transform: translateY(-100%);
}

.cf-btn:hover .cf-btn-text-alt {
	transform: translateY(0);
}

.cf-btn--paper {
	background: var(--cf-paper);
	color: var(--cf-ink);
}

.cf-btn--paper:hover {
	background: var(--cf-accent);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Hero — slideshow full-screen
   -------------------------------------------------------------------------- */

.cf-hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 620px;
	overflow: hidden;
	background: linear-gradient(160deg, var(--cf-primary), #0f2a33);
	color: var(--cf-paper);
}

@media (max-width: 640px) {
	.cf-hero {
		min-height: 100svh;
	}

	.cf-hero-el {
		object-fit: cover;
		object-position: center;
	}
}

.cf-hero-media,
.cf-hero-slide {
	position: absolute;
	inset: 0;
}

.cf-hero-slide {
	opacity: 0;
	transition: opacity 1.1s ease;
}

.cf-hero-slide.is-active {
	opacity: 1;
}

.cf-hero-slide:not(.has-media):nth-child(1) { background: linear-gradient(160deg, #173e49, #0f2a33); }
.cf-hero-slide:not(.has-media):nth-child(2) { background: linear-gradient(160deg, #31404b, #1c262d); }
.cf-hero-slide:not(.has-media):nth-child(3) { background: linear-gradient(160deg, #1d6151, #123c32); }
.cf-hero-slide:not(.has-media):nth-child(4) { background: linear-gradient(160deg, #6b4a2a, #3d2b18); }

.cf-hero-el {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Imagem dentro do <picture> do hero: o <picture> recebe o posicionamento,
   a img interna preenche com o mesmo recorte. */
picture.cf-hero-el img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: inherit;
	display: block;
}

/* Mídia alternativa para mobile (Hero Home): no desktop a variante mobile
   nunca aparece; no mobile, quando o slide tem .has-mobile, a do desktop
   sai de cena. */
.cf-hero-el--mobile {
	display: none;
}

@media (max-width: 1024px) {
	.cf-hero-slide.has-mobile .cf-hero-el--desktop {
		display: none;
	}

	.cf-hero-slide.has-mobile .cf-hero-el--mobile {
		display: block;
	}
}

.cf-hero-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12) 45%, rgba(0, 0, 0, .28));
}

/* Overlay opcional (Hero Home): sombreamento diagonal a 25º vindo do canto
   onde o texto está, leve e de curto alcance, para dar leitura ao texto. */
.cf-hero-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cf-hero-overlay--bl {
	background: linear-gradient(65deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .16) 32%, transparent 58%);
}

.cf-hero-overlay--br {
	background: linear-gradient(295deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .16) 32%, transparent 58%);
}

.cf-hero-overlay--tl {
	background: linear-gradient(115deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .16) 32%, transparent 58%);
}

.cf-hero-overlay--tr {
	background: linear-gradient(245deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .16) 32%, transparent 58%);
}

.cf-hero-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0 max(20px, calc((100vw - var(--cf-container)) / 2)) clamp(130px, 20vh, 200px);
}

.cf-hero-caption {
	display: none;
}

.cf-hero-caption.is-active {
	display: block;
	animation: cf-hero-in .9s ease both;
}

/* Posicionamento do texto por slide (Hero Home): cima/baixo × esquerda/direita.
   A legenda ativa se posiciona absolutamente dentro de .cf-hero-content,
   respeitando a mesma largura de container do site e a altura do header. */
.cf-hero-caption.is-active[class*="cf-hero-caption--"] {
	position: absolute;
	width: max-content;
	max-width: calc(100vw - 40px);
}

.cf-hero-caption--tl {
	top: clamp(120px, 16vh, 165px);
	left: max(20px, calc((100vw - var(--cf-container)) / 2));
}

.cf-hero-caption--tr {
	top: clamp(120px, 16vh, 165px);
	right: max(20px, calc((100vw - var(--cf-container)) / 2));
	text-align: right;
}

.cf-hero-caption--br {
	bottom: clamp(130px, 20vh, 200px);
	right: max(20px, calc((100vw - var(--cf-container)) / 2));
	text-align: right;
}

/* Legenda acompanha o alinhamento do título: à direita nas posições tr/br. */
.cf-hero-caption--tr .cf-hero-text,
.cf-hero-caption--br .cf-hero-text {
	margin-left: auto;
}

.cf-hero-caption--bl {
	bottom: clamp(130px, 20vh, 200px);
	left: max(20px, calc((100vw - var(--cf-container)) / 2));
}

@media (max-width: 1024px) {
	.cf-hero-caption.is-active[class*="cf-hero-caption--"] {
		left: 20px;
		right: 20px;
	}

	.cf-hero-caption--bl,
	.cf-hero-caption--br {
		bottom: 120px;
	}
}

@keyframes cf-hero-in {
	from { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: translateY(0); }
}

.cf-hero-eyebrow {
	font-family: var(--cf-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--cf-yellow);
	margin: 0 0 22px;
}

.cf-hero-title {
	font-family: var(--cf-font-display);
	font-weight: 600;
	font-size: clamp(3rem, 10vw, 6.5rem);
	line-height: .95;
	letter-spacing: -.02em;
	margin: 0;
	color: var(--cf-paper);
	text-shadow: 0px 0px 10px #00000040;
}

.cf-hero-title span {
	display: block;
	/* Cada linha do título (título/subtítulo) fica inteira: se não couber,
	   o JS diminui a fonte em vez de quebrar palavras. */
	white-space: nowrap;
}

.cf-hero-title-bottom {
	font-style: italic;
	font-weight: 400;
}

.cf-hero-text {
	max-width: 440px;
	margin: 26px 0 0;
	font-size: clamp(.92rem, 1.2vw, 1.05rem);
	line-height: 1.65;
	color: rgba(248, 247, 242, .85);
}

.cf-hero-nav {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding: 0 max(20px, calc((100vw - var(--cf-container)) / 2)) 36px;
}

.cf-hero-dots {
	display: flex;
	gap: clamp(20px, 4vw, 44px);
}

.cf-hero .cf-hero-dots .cf-hero-dot {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 6px 0;
	cursor: pointer;
	color: var(--cf-paper);
	text-align: left;
	font: inherit;
}

.cf-hero-num {
	display: block;
	font-family: var(--cf-font-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	opacity: .45;
	margin-bottom: 9px;
	transition: opacity .3s ease;
}

.cf-hero-dot.is-active .cf-hero-num,
.cf-hero-dot:hover .cf-hero-num {
	opacity: 1;
}

.cf-hero-bar {
	display: block;
	width: clamp(56px, 8vw, 96px);
	height: 2px;
	background: rgba(255, 255, 255, .3);
	overflow: hidden;
}

.cf-hero-bar i {
	display: block;
	height: 100%;
	width: 100%;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
}

.cf-hero-dot.is-active .cf-hero-bar i {
	animation: cf-hero-progress var(--slide-dur, 6s) linear forwards;
}

@keyframes cf-hero-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.cf-hero-hint {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-right: 120px;
	font-family: var(--cf-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .75;
}

.cf-hero-hint i {
	width: 1px;
	height: 38px;
	background: currentColor;
	animation: cf-hero-pulse 1.8s ease-in-out infinite;
}

@keyframes cf-hero-pulse {
	0%, 100% { transform: scaleY(.3); opacity: .4; }
	50% { transform: scaleY(1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Marquee — letreiro rolante
   -------------------------------------------------------------------------- */

.cf-marquee {
	overflow: hidden;
	padding: 15px 0;
	/* Fundo azul CF com texto branco e detalhes dourados (faixa escura
	   entre o hero claro e o conteúdo em papel). */
	background: #31404b;
	border-top: 1px solid rgba(37, 37, 37, .12);
	border-bottom: 1px solid rgba(37, 37, 37, .12);
}

.cf-marquee-track {
	display: flex;
	width: max-content;
	animation: cf-marquee 32s linear infinite;
}

.cf-marquee:hover .cf-marquee-track {
	animation-play-state: paused;
}

@keyframes cf-marquee {
	to { transform: translateX(-50%); }
}

.cf-marquee-item {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.cf-marquee-word {
	font-family: var(--cf-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.6rem, 3.4vw, 1.6rem);
	padding: 0 30px;
	color: #ffffff;
	white-space: nowrap;
}

.cf-marquee-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #d39d45;
	flex-shrink: 0;
}

/* Fundo próprio na seção de busca pelo mesmo motivo do marquee: evita que
   a seção herde o azul do hero enquanto o body ainda está interpolando. */
.cf-sec.cf-busca {
	background: #f8f7f2;
}

/* --------------------------------------------------------------------------
   Busca — busca grande + chips + paleta
   -------------------------------------------------------------------------- */

.cf-busca-form {
	position: relative;
	max-width: 860px;
	margin: 56px auto 0;
}

/* Dropdown de resultados ao vivo, logo abaixo do campo. */
.cf-busca-results {
	position: absolute;
	z-index: 40;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 10px;
	max-height: 380px;
	overflow-y: auto;
	overflow-x: hidden;
	background: #fff;
	border: 1px solid rgba(37, 37, 37, .1);
	border-radius: 8px;
	box-shadow: 0 24px 48px -18px rgba(37, 37, 37, .28);
	text-align: left;
}

.cf-busca-results .cf-busca-empty {
	margin: 0;
	padding: 18px 20px;
	font-size: .9rem;
	color: rgba(37, 37, 37, .6);
}

.cf-busca-tip {
	margin: 14px 0 0;
	font-size: 12px;
	text-align: center;
	color: rgba(37, 37, 37, .5);
	font-style: italic;
}

.cf-busca-form:focus-within .cf-busca-tip {
	color: rgba(37, 37, 37, .7);
}

.cf-busca-hit {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-bottom: 1px solid rgba(37, 37, 37, .08);
	text-decoration: none;
	color: var(--cf-ink);
	cursor: pointer;
	transition: background-color .2s ease;
}

.cf-busca-hit:hover {
	background: rgba(29, 97, 81, .06);
}

.cf-busca-hit img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	flex-shrink: 0;
}

.cf-busca-hit-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cf-busca-hit-body strong {
	font-family: var(--cf-font-display);
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
	overflow-wrap: break-word;
	word-break: break-word;
}

.cf-busca-hit-body small {
	font-size: 12px;
	opacity: .55;
	overflow-wrap: break-word;
	word-break: break-word;
}

.cf-busca-hint {
	font-family: var(--cf-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(37, 37, 37, .5);
	margin: 44px 0 16px;
	text-align: center;
}

.cf-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.cf-chip {
	display: inline-block;
	padding: .4rem .95rem;
	border: 1px solid #b9c2ca;
	background: #fff;
	font-family: var(--cf-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #31404b;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.cf-chip:hover {
	background: #d39d45;
	border-color: #d39d45;
	color: #fff;
}

.cf-chip:active {
	background: var(--cf-ink);
	border-color: var(--cf-ink);
	color: var(--cf-paper);
	opacity: 1;
}

.cf-palette {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 26px 14px;
	max-width: 860px;
	margin: 0 auto;
}

.cf-palette-item {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	width: 82px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	text-decoration: none;
	color: var(--cf-ink);
	cursor: pointer;
}

.cf-palette-item i {
	display: block;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .12);
	box-shadow: inset 0 1px 3px rgba(255, 255, 255, .45), 0 1px 2px rgba(37, 37, 37, .12);
	transition: transform .25s ease, box-shadow .25s ease;
}

.cf-palette-item:hover i {
	transform: translateY(-3px) scale(1.08);
	box-shadow: 0 0 0 3px #f8f7f2, 0 0 0 5px #d39d45, 0 6px 14px rgba(37, 37, 37, .18);
}

.cf-palette-item span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	opacity: .55;
	transition: opacity .25s ease, color .25s ease;
}

.cf-palette-item:hover span {
	opacity: 1;
	color: #31404b;
}

.cf-palette-more {
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 6px;
	width: 46px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: pointer;
}

.cf-palette-more i {
	display: block;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #fff;
	border: 1px dashed rgba(37, 37, 37, .35);
	position: relative;
}

.cf-palette-more i::after {
	content: "+";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 300;
	color: #31404b;
}

.cf-palette-more span {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #31404b;
	opacity: .7;
}

/* Modal de cores no mobile */
.cf-palette-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1100;
	align-items: flex-end;
	justify-content: center;
}

.cf-palette-modal[aria-hidden="false"] {
	display: flex;
}

.cf-palette-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(23, 62, 73, .45);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.cf-palette-modal-panel {
	position: relative;
	width: 100%;
	max-height: 82vh;
	background: #f8f7f2;
	border-radius: 18px 18px 0 0;
	padding: 22px 20px 34px;
	overflow-y: auto;
	transform: translateY(100%);
	transition: transform .3s ease;
}

.cf-palette-modal[aria-hidden="false"] .cf-palette-modal-panel {
	transform: translateY(0);
}

.cf-palette-modal-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
}

.cf-palette-modal-head strong {
	font-family: var(--cf-font-display);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #31404b;
}

.cf-palette-modal-head span {
	margin-left: auto;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(37, 37, 37, .45);
}

.cf-palette-modal-close {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 8px;
	border: 1px solid rgba(37, 37, 37, .18);
	border-radius: 50%;
	background: #fff;
	color: #31404b;
	cursor: pointer;
}

.cf-palette-modal-close svg {
	width: 16px;
	height: 16px;
}

.cf-palette-modal-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px 10px;
}

@media (max-width: 640px) {
	.cf-palette {
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: 14px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 4px 4px 10px;
	}

	.cf-palette::-webkit-scrollbar {
		display: none;
	}

	.cf-palette-item {
		width: auto;
		flex: 0 0 auto;
	}

	.cf-palette-item--more {
		display: none;
	}

	.cf-palette-more {
		display: inline-flex;
		flex: 0 0 auto;
	}

	.cf-palette-item span {
		font-size: 10px;
		letter-spacing: .04em;
	}
}

@media (min-width: 641px) {
	.cf-palette-modal {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
   Mesas Temáticas — cabeçalho + blocos full-screen, um por tema
   -------------------------------------------------------------------------- */

.cf-tema-block {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--tema-bg);
	color: var(--tema-fg);
	min-height: 100vh;
	min-height: max(620px, 100svh);
}

/* Número gigante semi-transparente ao fundo do bloco. */
.cf-tema-num {
	position: absolute;
	top: 0;
	right: -2vw;
	font-family: var(--cf-font-display);
	font-weight: 900;
	font-size: 22vw;
	line-height: 1;
	opacity: .08;
	pointer-events: none;
	user-select: none;
}

/* Imagem de fundo opcional do bloco: entra de um lado e vai sumindo
   (máscara em gradiente) até desaparecer na cor de fundo da seção. */
.cf-tema-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	pointer-events: none;
}

.cf-tema-bg--right {
	-webkit-mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .9) 32%, transparent 74%);
	mask-image: linear-gradient(to left, #000 0%, rgba(0, 0, 0, .9) 32%, transparent 74%);
}

.cf-tema-bg--left {
	-webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .9) 32%, transparent 74%);
	mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .9) 32%, transparent 74%);
}

.cf-tema-block .cf-container {
	position: relative;
	z-index: 1;
}

.cf-tema-block--flip .cf-tema-num {
	right: auto;
	left: -2vw;
}

.cf-tema-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
	padding-top: clamp(56px, 8vw, 96px);
	padding-bottom: clamp(56px, 8vw, 96px);
}

.cf-tema-block .cf-label {
	color: var(--tema-fg);
	opacity: .65;
}

.cf-tema-name {
	font-family: var(--cf-font-display);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: .98;
	font-size: clamp(2.8rem, 6.5vw, 5.5rem);
	margin: 0 0 24px;
	color: var(--tema-fg);
}

.cf-tema-name em {
	display: block;
	font-style: italic;
	font-weight: 300;
	font-size: .55em;
	margin-top: 10px;
	opacity: .9;
	color: var(--tema-accent);
}

.cf-tema-media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.cf-tema-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}

.cf-tema-block:hover .cf-tema-media img {
	transform: scale(1.06);
}

.cf-tema-desc {
	font-size: clamp(.95rem, 1.1vw, 1.05rem);
	line-height: 1.75;
	opacity: .85;
	max-width: 560px;
	margin: 0 0 28px;
}

.cf-tema-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.cf-tema-items li {
	font-family: var(--cf-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: .45rem 1rem;
	border: 1px solid color-mix(in srgb, var(--tema-fg) 45%, transparent);
	color: var(--tema-fg);
	opacity: .85;
}

/* Produtos reais do acervo ligados ao tema (SKU/ID no admin): cartões
   brancos no mesmo padrão do catálogo (código, categoria, nome). */
.cf-tema-products {
	list-style: none;
	margin: 34px 0 0;
	padding: 4px 2px 12px;
	display: flex;
	gap: 14px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.cf-tema-products li {
	flex: 0 0 158px;
}

.cf-tema-products a {
	display: block;
	background: #fff;
	border-radius: 10px;
	padding: 12px 12px 14px;
	text-align: center;
	text-decoration: none;
	color: #252525;
	box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
	transition: transform .25s ease, box-shadow .25s ease;
}

.cf-tema-products a:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
}

.cf-tema-prod-img {
	display: block;
	height: 118px;
	margin-bottom: 10px;
}

.cf-tema-prod-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.cf-tema-prod-sku {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8b959c;
}

.cf-tema-prod-cat {
	display: block;
	font-size: 11px;
	color: #de9b41;
	margin-top: 1px;
}

.cf-tema-prod-name {
	display: block;
	font-family: var(--cf-font-display);
	font-size: 13px;
	font-weight: 500;
	margin-top: 3px;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   Acervo — produtos exclusivos (tag "exclusivo") em cards escuros + CTA
   -------------------------------------------------------------------------- */

.cf-exclusivos-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 56px;
}

/* Card escuro no estilo "Categories" do modelo; o clique abre o quick view
   (o link do card continua apontando para a página do produto). */
a.cf-exclusivo-card {
	position: relative;
	display: block;
	overflow: hidden;
	background: #252525;
	color: #f8f7f2;
	text-decoration: none;
	aspect-ratio: 4 / 5;
}

.cf-exclusivo-media,
.cf-exclusivo-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cf-exclusivo-media img {
	transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}

a.cf-exclusivo-card:hover .cf-exclusivo-media img {
	transform: scale(1.06);
}

/* Véu gradiente escuro no rodapé do card. */
.cf-exclusivo-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, .12));
	pointer-events: none;
}

.cf-exclusivo-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	pointer-events: none;
}

.cf-exclusivo-cat {
	font-family: var(--cf-font-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	opacity: .6;
}

.cf-exclusivo-name {
	font-family: var(--cf-font-display);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	color: #f8f7f2;
}

/* Selo "ver rápido" que aparece no hover (igual ao modelo). */
.cf-exclusivo-quick {
	position: absolute;
	top: 12px;
	left: 12px;
	font-family: var(--cf-font-sans);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	background: rgba(248, 247, 242, .9);
	color: #252525;
	padding: 6px 10px;
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
}

a.cf-exclusivo-card:hover .cf-exclusivo-quick {
	opacity: 1;
}

/* Fallback sem produtos exclusivos: card só com o nome da categoria. */
a.cf-exclusivo-card--text {
	display: flex;
	align-items: flex-end;
	aspect-ratio: auto;
	min-height: 180px;
	padding: 16px;
	border: 1px solid rgba(37, 37, 37, .12);
}

.cf-acervo .cf-cat-all {
	margin-top: 40px;
}

/* --------------------------------------------------------------------------
   Studio CF — texto fixo + janela de demonstração
   -------------------------------------------------------------------------- */

.cf-studio-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 56px;
	max-width: 1400px;
}

.cf-studio-bullets {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.cf-studio-bullets li {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	font-size: .98rem;
	line-height: 1.55;
	font-weight: 500;
	color: rgba(37, 37, 37, .82);
}

.cf-studio-num {
	font-family: var(--cf-font-display);
	font-style: italic;
	font-weight: 300;
	font-size: 1.25rem;
	line-height: 1.2;
	color: #b96ba8;
}

.cf-studio-window {
	border: 1px solid rgba(0, 0, 0, .15);
	background: var(--cf-paper);
	padding: 26px;
}

.cf-studio-windowbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
}

.cf-studio-dots {
	display: inline-flex;
	gap: 6px;
}

.cf-studio-dots i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(37, 37, 37, .2);
}

.cf-studio-dots i.on {
	background: var(--cf-pink);
}

.cf-stage {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: rgba(37, 37, 37, .05);
	border: 1px solid rgba(0, 0, 0, .12);
	color: rgba(37, 37, 37, .5);
}

.cf-stage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cf-stage-icon svg {
	width: 42px;
	height: 42px;
}

.cf-stage .cf-label {
	margin: 0;
}

.cf-studio-window .cf-btn {
	width: 100%;
	margin-top: 24px;
	border: 1px solid rgba(0, 0, 0, .15);
}

.cf-studio-note {
	font-size: .78rem;
	color: rgba(37, 37, 37, .45);
	margin: 14px 0 0;
}

/* --------------------------------------------------------------------------
   História — bloco escuro com citação e estatísticas
   -------------------------------------------------------------------------- */

.cf-historia {
	background:
		radial-gradient(1100px 480px at 50% -12%, rgba(211, 157, 69, .16), transparent 62%),
		linear-gradient(#faf9f4, #f2f0e9);
	color: var(--cf-ink);
}

.cf-historia .cf-title,
.cf-historia-quote {
	color: #31404B;
}

.cf-historia-quote {
	font-family: var(--cf-font-display);
	font-weight: 300;
	line-height: 1.18;
	letter-spacing: -.01em;
	font-size: clamp(1.8rem, 4.4vw, 3.8rem);
	max-width: 1100px;
	margin: 0;
}

.cf-historia-quote em {
	font-style: italic;
	color: var(--cf-accent);
}

.cf-historia-sub {
	max-width: 760px;
	margin: 28px 0 0;
	font-family: var(--cf-font-sans);
	font-size: clamp(.95rem, 1.3vw, 1.1rem);
	font-weight: 400;
	line-height: 1.8;
	color: rgba(49, 64, 75, .75);
}

.cf-historia-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1px;
	background: rgba(49, 64, 75, .14);
	border: 1px solid rgba(49, 64, 75, .14);
	margin-top: 72px;
}

.cf-stat {
	background: rgba(255, 255, 255, .65);
	padding: clamp(24px, 3vw, 42px);
}

.cf-stat-value {
	display: block;
	font-family: var(--cf-font-display);
	font-weight: 600;
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 1;
	color: #31404B;
}

.cf-stat-label {
	display: block;
	font-family: var(--cf-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(49, 64, 75, .55);
	margin-top: 14px;
}

/* --------------------------------------------------------------------------
   CTA Contato — bloco verde com orçamento
   -------------------------------------------------------------------------- */

.cf-cta {
	background: #2a6e5c;
	color: var(--cf-paper);
}

.cf-cta .cf-label {
	color: rgba(248, 247, 242, .6);
}

.cf-cta .cf-title {
	color: var(--cf-paper);
}

.cf-cta .cf-title em {
	display: block;
}

.cf-cta .cf-btn {
	margin-top: 40px;
}

.cf-cta-cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 34px;
	margin-top: 88px;
	padding-top: 40px;
	border-top: 1px solid rgba(248, 247, 242, .2);
}

.cf-cta-col .cf-label {
	margin-bottom: 12px;
	color: rgba(248, 247, 242, .6);
}

.cf-cta-lines {
	font-size: .98rem;
	line-height: 1.7;
	font-weight: 500;
	color: rgba(248, 247, 242, .92);
	margin: 0;
}

.cf-cta-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 64px;
	padding-top: 26px;
	border-top: 1px solid rgba(248, 247, 242, .2);
}

.cf-cta-brand {
	font-family: var(--cf-font-display);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--cf-paper);
}

/* --------------------------------------------------------------------------
   Ajustes mobile das seções
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.cf-hero-content {
		padding-bottom: 120px;
	}

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

@media (min-width: 1025px) {
	.cf-historia-stats {
		grid-template-columns: repeat(4, 1fr);
	}

	.cf-tema-grid {
		grid-template-columns: 1fr 1fr;
		gap: clamp(40px, 6vw, 96px);
	}

	.cf-tema-block--flip .cf-tema-info {
		order: 2;
	}

	.cf-tema-block--flip .cf-tema-media {
		order: 1;
	}

	.cf-tema-media {
		aspect-ratio: 5 / 6;
	}

	.cf-exclusivos-grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 22px;
	}

	.cf-studio-grid {
		grid-template-columns: 1fr 1fr;
		gap: 72px;
	}

	.cf-studio-intro {
		position: sticky;
		top: 140px;
		align-self: start;
	}

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

@media (max-width: 640px) {
	.cf-historia-stats {
		grid-template-columns: 1fr 1fr;
	}

	.cf-hero-title {
		font-size: clamp(2.4rem, 13vw, 4rem);
	}
}

/* --------------------------------------------------------------------------
   Admin bar do WordPress contraída, com aba semi-transparente no canto
   superior direito para expandir/recolher.
   -------------------------------------------------------------------------- */

#wpadminbar {
	transform: translateY(-100%);
	transition: transform .3s ease;
}

html.cf-adminbar-open #wpadminbar {
	transform: translateY(0);
}

/* Remove o espaço de 32px que o WP reserva para a barra quando contraída. */
html:not(.cf-adminbar-open) {
	margin-top: 0 !important;
}

/* Specificidade com ID: o kit Elementor usa .elementor-kit-N button
   (0,1,1), que venceria um seletor de classe simples (0,1,0). */
button#cf-adminbar-tab {
	position: fixed;
	top: 0;
	right: 16px;
	z-index: 999999;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	box-shadow: none;
	outline: none;
	cursor: pointer;
	background-color: rgba(44, 44, 44, .5);
	border-radius: 0 0 5px 5px;
	color: #ffffff;
	display: inline-block;
	font-size: .8rem;
	font-weight: 400;
	line-height: 1.2;
	padding: 2px 6px;
	text-align: center;
	transition: background-color .3s;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	white-space: nowrap;
}

button#cf-adminbar-tab:hover,
button#cf-adminbar-tab:focus {
	background-color: rgba(44, 44, 44, .8);
	color: #ffffff;
	outline: none;
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Assistente CF — seleção na home, página do evento e assistente flutuante
   -------------------------------------------------------------------------- */


/* Estado recolhido da seção: só o campo de busca e as amostras de cores
   ficam visíveis até a pessoa focar no campo ou escolher uma cor. */
.cf-busca-collapsed [data-cf-rest],
.cf-busca-collapsed .cf-busca-tip {
	display: none !important;
}

.cf-busca-revealed [data-cf-rest] {
	animation: cf-busca-reveal .45s ease both;
}

@keyframes cf-busca-reveal {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

.cf-busca-hit-body {
	flex: 1;
}

.cf-busca-hit-add {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--cf-ink);
	font-size: 18px;
	line-height: 1;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.cf-busca-hit:hover .cf-busca-hit-add {
	background: var(--cf-ink);
	color: var(--cf-paper);
	transform: scale(1.08);
}

.cf-busca-hit.is-selected {
	background: rgba(29, 97, 81, .08);
}

.cf-busca-hit.is-selected .cf-busca-hit-add {
	background: #1d6151;
	border-color: #1d6151;
	color: #fff;
}

/* Toast de confirmação "Adicionado ao evento" + pulso no item adicionado. */
#cf-assist-toast {
	position: fixed;
	left: 50%;
	bottom: 96px;
	transform: translateX(-50%) translateY(16px);
	z-index: 1000010;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #31404b;
	color: #fff;
	padding: 11px 18px;
	border-radius: 999px;
	font-family: -apple-system, "Urbanist", Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0 10px 30px rgba(49, 64, 75, .35);
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
	white-space: nowrap;
	max-width: calc(100vw - 40px);
}
#cf-assist-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}
#cf-assist-toast .cf-assist-toast-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #D39D45;
	color: #31404b;
	font-size: 12px;
	font-weight: 800;
}
.cf-busca-hit.cf-just-added,
.cfh-search-item--add.cf-just-added,
.cf-sq-add-btn.cf-just-added {
	animation: cfAssistAddedPulse .7s ease;
}
@keyframes cfAssistAddedPulse {
	0% { transform: scale(1); }
	35% { transform: scale(1.03); box-shadow: 0 0 0 3px rgba(49, 64, 75, .18); }
	100% { transform: scale(1); }
}

/* Bandeja de produtos selecionados ("Seu evento"). */
.cf-sel {
	margin-top: 14px;
	padding: 10px 14px 12px;
	border: 1px solid rgba(37, 37, 37, .12);
	border-radius: 6px;
	background: rgba(255, 255, 255, .65);
	text-align: left;
}

.cf-sel-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #31404b;
}

.cf-sel-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 7px;
	border-radius: 999px;
	background: #31404b;
	color: #fff;
	font-size: 12px;
	letter-spacing: 0;
}

.cf-sel-clear {
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: underline;
	color: rgba(37, 37, 37, .55);
	cursor: pointer;
}

.cf-sel-clear:hover {
	color: #31404b;
}

.cf-sel-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cf-sel-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 240px;
	padding: 3px 4px 3px 4px;
	border: 1px solid rgba(37, 37, 37, .12);
	border-radius: 999px;
	background: #fff;
	font-size: 11px;
	line-height: 1.2;
}

.cf-sel-item img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	border-radius: 50%;
	background: #f4f2ec;
}

.cf-sel-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #31404b;
	text-decoration: none;
}

.cf-sel-name:hover {
	text-decoration: underline;
}

.cf-sel-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ececec;
	font-family: var(--cf-font-sans);
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
	color: #6f7c85;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.cf-sel-remove:hover {
	background: #31404b;
	color: #fff;
}

/* Chips de estilo e paleta: estado selecionado bem marcado. */
.cf-chip.is-selected {
	background: #31404b;
	border-color: #31404b;
	color: #fff;
	opacity: 1;
}

.cf-chip.is-selected::before {
	content: "✓";
	margin-right: .5em;
	color: #d39d45;
}

.cf-palette-item.is-selected i {
	box-shadow: 0 0 0 3px #f8f7f2, 0 0 0 6px #31404b, 0 6px 14px rgba(37, 37, 37, .2);
	transform: scale(1.1);
}

.cf-palette-item.is-selected span {
	color: #31404b;
}

.cf-palette-item.is-selected span::before {
	content: "✓ ";
	color: #d39d45;
}

/* Descrição do evento. */
.cf-event {
	max-width: 620px;
	margin: 22px auto 0;
	text-align: left;
}

.cf-event-label {
	display: block;
	margin-bottom: 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(37, 37, 37, .55);
	text-align: center;
}

.cf-event-text {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(37, 37, 37, .2);
	border-radius: 6px;
	background: rgba(255, 255, 255, .8);
	font-family: var(--cf-font-sans);
	font-size: 13px;
	line-height: 1.6;
	color: #252525;
	resize: vertical;
}

.cf-event-text:focus {
	outline: none;
	border-color: #31404b;
	box-shadow: 0 0 0 3px rgba(49, 64, 75, .15);
}

/* Botão "Montar evento". */
.cf-montar {
	margin-top: 22px;
	text-align: center;
}

.cf-montar-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 16px 42px;
	background: #31404b;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.cf-montar-btn:hover {
	background: #d39d45;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -10px rgba(49, 64, 75, .5);
}

.cf-montar-arrow {
	font-size: 16px;
	transition: transform .25s ease;
}

.cf-montar-btn:hover .cf-montar-arrow {
	transform: translateX(4px);
}

.cf-montar-hint {
	margin-top: 12px;
	font-size: 12px;
	color: rgba(37, 37, 37, .5);
}

/* Blindagem da seção contra estilos globais de terceiros (bordas/cores de
   botões que não fazem parte da identidade CF). */
.cf-sec.cf-busca button,
.cf-sec.cf-busca .cf-chip,
.cf-sec.cf-busca .cf-palette-item,
.cf-sec.cf-busca .cf-sel-clear,
.cf-sec.cf-busca .cf-sel-remove,
.cf-sec.cf-busca .cf-montar-btn {
	font-family: var(--cf-font-sans);
}

.cf-sec.cf-busca .cf-chip {
	border: 1px solid #b9c2ca !important;
	background: #fff !important;
	color: #31404b !important;
	opacity: 1;
}

.cf-sec.cf-busca .cf-chip:hover {
	border-color: #d39d45 !important;
	background: #d39d45 !important;
	color: #fff !important;
}

.cf-sec.cf-busca .cf-chip.is-selected {
	border-color: #31404b !important;
	background: #31404b !important;
	color: #fff !important;
}

.cf-sec.cf-busca .cf-sel-clear {
	border: 0 !important;
	background: none !important;
	color: rgba(37, 37, 37, .55) !important;
}

.cf-sec.cf-busca .cf-sel-clear:hover {
	color: #31404b !important;
}

.cf-sec.cf-busca .cf-palette-item {
	border: 0 !important;
	background: none !important;
	color: #252525 !important;
}

.cf-sec.cf-busca .cf-sel-remove {
	border: 0 !important;
}

.cf-sec.cf-busca .cf-montar-btn {
	border: 0 !important;
}

/* --------------------------------------------------------------------------
   Página do Assistente CF
   -------------------------------------------------------------------------- */

.cf-ass-page {
	background: #fff;
	color: #252525;
}

/* Mesma largura e padding lateral do catálogo (main do WooCommerce). */
.cf-ass-page .cf-container {
	max-width: 1680px;
	padding-left: 24px;
	padding-right: 24px;
}

.cf-ass-hero {
	position: relative;
	overflow: hidden;
	background: #1b2530;
}

/* A mídia fica no fluxo: a imagem é exibida por completo (contain), sem
   textos ou véu por cima. O fundo escuro serve de letterbox. */
.cf-ass-hero-media {
	position: relative;
	min-height: 320px;
}

.cf-ass-hero-fallback {
	position: absolute;
	inset: 0;
}

.cf-ass-scene {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
	opacity: 0;
	transform: scale(1.03);
	transition: opacity 1.2s ease, transform 6s ease;
}

.cf-ass-scene.is-ready {
	opacity: 1;
	transform: scale(1);
}

/* Revelação "sendo criada": a imagem aparece com um recorte que varre da
   esquerda para a direita, acompanhado por uma barra de luz. A animação
   toca quando o elemento entra no DOM (carga da página ou geração via JS). */
@keyframes cf-ass-wipe {
	0% { clip-path: inset(0 100% 0 0); }
	100% { clip-path: inset(0 0 0 0); }
}

.cf-ass-scene.is-revealing {
	animation: cf-ass-wipe 2.1s cubic-bezier(.6, 0, .15, 1) both;
}

/* Barra de luz que lidera a revelação. */
.cf-ass-reveal {
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	pointer-events: none;
	animation: cf-ass-reveal-end .35s ease 2.15s forwards;
}

.cf-ass-reveal i {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -160px;
	width: 150px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8) 48%, rgba(211, 157, 69, .4) 60%, transparent);
	filter: blur(1px);
	box-shadow: 0 0 34px rgba(255, 255, 255, .35);
	animation: cf-ass-reveal-sweep 2.1s cubic-bezier(.6, 0, .15, 1) both;
}

@keyframes cf-ass-reveal-sweep {
	0% { left: -160px; }
	100% { left: calc(100% + 20px); }
}

@keyframes cf-ass-reveal-end {
	to { opacity: 0; visibility: hidden; }
}

/* Overlay "gerando" (estética tech): mostrado via .is-rendering no
   [data-cf-scene-wrap] enquanto a IA cria a cena. */
.cf-ass-render {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	padding-bottom: 14%;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .45s ease, visibility .45s ease;
}

.cf-ass-hero-media.is-rendering .cf-ass-render {
	opacity: 1;
	visibility: visible;
}

/* O que já estava no palco (mosaico/imagem antiga) recua e desfoca. */
.cf-ass-hero-media.is-rendering .cf-ass-hero-fallback,
.cf-ass-hero-media.is-rendering .cf-ass-scene {
	opacity: .16;
	filter: blur(3px) saturate(.5);
}

.cf-ass-render-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
	mask-image: radial-gradient(ellipse at center, #000 25%, transparent 78%);
}

/* Faixa de luz que varre a área da esquerda para a direita. */
.cf-ass-render-sweep {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -220px;
	width: 190px;
	background: linear-gradient(90deg, transparent, rgba(211, 157, 69, .28) 42%, rgba(255, 255, 255, .55) 50%, rgba(211, 157, 69, .28) 58%, transparent);
	filter: blur(2px);
	animation: cf-ass-render-sweep 2.6s cubic-bezier(.45, 0, .35, 1) infinite;
}

@keyframes cf-ass-render-sweep {
	0% { left: -220px; }
	100% { left: calc(100% + 30px); }
}

/* Cantos de "mira" nos quatro lados. */
.cf-ass-render-corner {
	position: absolute;
	width: 26px;
	height: 26px;
	border: 0 solid rgba(211, 157, 69, .7);
}

.cf-ass-render-corner.c1 { top: 16px; left: 16px; border-top-width: 2px; border-left-width: 2px; }
.cf-ass-render-corner.c2 { top: 16px; right: 16px; border-top-width: 2px; border-right-width: 2px; }
.cf-ass-render-corner.c3 { bottom: 16px; left: 16px; border-bottom-width: 2px; border-left-width: 2px; }
.cf-ass-render-corner.c4 { bottom: 16px; right: 16px; border-bottom-width: 2px; border-right-width: 2px; }

.cf-ass-render-label {
	position: relative;
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .34em;
	text-transform: uppercase;
	color: #efdfb9;
	text-shadow: 0 0 18px rgba(211, 157, 69, .55);
}

.cf-ass-render-dots i {
	display: inline-block;
	font-style: normal;
	animation: cf-ass-dot 1.2s ease infinite;
}

.cf-ass-render-dots i:nth-child(2) { animation-delay: .2s; }
.cf-ass-render-dots i:nth-child(3) { animation-delay: .4s; }

@keyframes cf-ass-dot {
	0%, 60%, 100% { opacity: .15; }
	30% { opacity: 1; }
}

/* Barra de progresso indeterminada (vai e volta, como um render). */
.cf-ass-render-bar {
	position: relative;
	width: min(420px, 58%);
	height: 2px;
	background: rgba(255, 255, 255, .14);
	overflow: hidden;
}

.cf-ass-render-bar i {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -42%;
	width: 38%;
	background: linear-gradient(90deg, rgba(211, 157, 69, .25), #d39d45 55%, #f7ead0);
	box-shadow: 0 0 16px rgba(211, 157, 69, .85);
	animation: cf-ass-render-load 1.9s cubic-bezier(.5, .05, .3, .95) infinite;
}

@keyframes cf-ass-render-load {
	0% { left: -42%; }
	100% { left: 108%; }
}

.cf-ass-hero-gradient {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 20% 90%, rgba(211, 157, 69, .35), transparent 55%),
		radial-gradient(ellipse at 85% 15%, rgba(49, 64, 75, .9), transparent 60%),
		linear-gradient(160deg, #22303c 0%, #31404b 55%, #1b2530 100%);
}

.cf-ass-hero-mosaic {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3vw;
	padding: 8vw;
}

.cf-ass-hero-mosaic img {
	width: clamp(70px, 12vw, 170px);
	height: clamp(70px, 12vw, 170px);
	object-fit: contain;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	padding: 14px;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55);
}

.cf-ass-hero-mosaic img:nth-child(2n) {
	transform: translateY(26px);
}

.cf-ass-hero-mosaic img:nth-child(3n) {
	transform: translateY(-18px);
}

/* Intro acima do hero: só eyebrow + título, bem compacta para aproveitar
   o topo da página. */
.cf-ass-intro {
	padding-top: 28px;
	padding-bottom: 22px;
}

/* Página do Assistente CF (body.cf-ass-body): cabeçalho e espaçador mais
   compactos que o padrão de 90px das páginas internas — o hero do evento
   sobe e ganha espaço na dobra. */
@media (min-width: 1025px) {
	body.cf-ass-body .cfh-main-inner {
		min-height: 70px;
	}

	body.cf-ass-body .cfh-header-spacer {
		height: 70px;
	}

	body.cf-ass-body .cfh-logo-img {
		width: 118px;
		max-width: 118px;
	}

	/* Com a admin bar expandida a barra desce 32px: 70 + 32. */
	html.cf-adminbar-open body.admin-bar.cf-ass-body .cfh-header-spacer {
		height: 102px;
	}
}

.cf-ass-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: #d39d45;
	margin: 0 0 14px;
}

.cf-ass-title {
	max-width: 900px;
	margin: 0;
	font-family: var(--cf-font-display);
	font-size: clamp(24px, 3.6vw, 44px);
	font-weight: 600;
	line-height: 1.14;
	color: #31404b;
	text-wrap: balance;
}

.cf-ass-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 26px;
}

.cf-ass-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 14px;
	border: 1px solid rgba(49, 64, 75, .25);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #31404b;
}

.cf-ass-chip i {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(49, 64, 75, .25);
}

.cf-ass-chip--count {
	border-color: #d39d45;
	color: #d39d45;
}

.cf-ass-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.cf-ass-generate {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 34px;
	border: 0;
	background: #d39d45;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .25s ease, transform .25s ease;
}

.cf-ass-generate:hover {
	background: #e0b264;
	transform: translateY(-2px);
}

.cf-ass-generate.is-generating {
	background: #31404b;
	cursor: wait;
}

.cf-ass-generate-step {
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: none;
	animation: cf-ass-step-pulse 1.6s ease infinite;
}

@keyframes cf-ass-step-pulse {
	0%, 100% { opacity: .55; }
	50% { opacity: 1; }
}

.cf-ass-generate-hint {
	max-width: 340px;
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: rgba(37, 37, 37, .55);
}

/* Botões de ação: azul CF sólido (primário) ou contornado (secundário). */
.cf-ass-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 30px;
	border: 1px solid #31404b;
	background: #31404b;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.cf-ass-btn:hover {
	background: #3d515f;
	border-color: #3d515f;
	transform: translateY(-2px);
}

.cf-ass-btn--ghost {
	background: transparent;
	color: #31404b;
}

.cf-ass-btn--ghost:hover {
	background: rgba(49, 64, 75, .06);
	border-color: #31404b;
	color: #31404b;
	transform: translateY(-2px);
}

.cf-ass-btn.is-generating {
	cursor: wait;
	opacity: .7;
}

.cf-ass-link {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #31404b;
	text-decoration: none;
	border-bottom: 1px solid #d39d45;
	padding-bottom: 2px;
}

.cf-ass-link:hover {
	color: #d39d45;
}

/* Resumo do evento: chips + peças escolhidas + ações agrupados num único
   cartão logo abaixo do hero. */
.cf-ass-summary {
	padding: 24px 0 0;
}

.cf-ass-summary-card {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	padding: 22px 26px;
	background: var(--cf-paper, #f8f7f2);
	border: 1px solid rgba(37, 37, 37, .08);
}

.cf-ass-summary-main {
	flex: 1;
	min-width: 0;
}

.cf-ass-summary-label {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(37, 37, 37, .45);
}

.cf-ass-summary .cf-ass-chips {
	margin-bottom: 18px;
}

.cf-ass-summary .cf-ass-chips:last-child,
.cf-ass-summary .cf-ass-summary-main > :last-child {
	margin-bottom: 0;
}

/* Ações em coluna à direita do cartão. */
.cf-ass-summary .cf-ass-actions {
	flex-direction: column;
	align-items: stretch;
	gap: 10px;
	min-width: 240px;
	margin-top: 2px;
}

.cf-ass-summary .cf-ass-actions .cf-ass-btn,
.cf-ass-summary .cf-ass-actions .cf-ass-generate {
	justify-content: center;
}

.cf-ass-summary .cf-ass-actions .cf-ass-link {
	align-self: center;
	padding-bottom: 4px;
}

/* Peças escolhidas: faixa compacta de pílulas (thumb pequena + nome). */
.cf-ass-subtitle {
	margin: 0 0 18px;
	font-family: var(--cf-font-display);
	font-size: clamp(20px, 2.6vw, 30px);
	font-weight: 600;
	color: #31404b;
}

.cf-ass-selected-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cf-ass-selected-list li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 240px;
	padding: 4px 14px 4px 4px;
	border: 1px solid rgba(37, 37, 37, .12);
	border-radius: 999px;
	background: #fff;
	text-decoration: none;
	color: var(--cf-ink);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.cf-ass-selected-list li a:hover {
	border-color: rgba(49, 64, 75, .4);
	box-shadow: 0 6px 16px -10px rgba(37, 37, 37, .4);
}

.cf-ass-selected-list img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: 50%;
	background: #f4f3ee;
	flex-shrink: 0;
}

.cf-ass-selected-list span {
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Catálogo da página. */
.cf-ass-catalog {
	padding: 40px 0 90px;
}

.cf-ass-catalog-head {
	margin-bottom: 28px;
}

.cf-ass-catalog-sub {
	margin: -8px 0 0;
	font-size: 13px;
	color: rgba(37, 37, 37, .55);
}

.cf-ass-empty {
	padding: 40px 0;
	text-align: center;
	font-size: 14px;
	color: rgba(37, 37, 37, .6);
}

/* Contador de resultados (mesmo padrão do .woocommerce-result-count). */
.cf-ass-result-count {
	display: block;
	font-family: var(--cf-font-sans, "Urbanist", Arial, sans-serif);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .18em;
	color: var(--cf-ink, #252525);
	opacity: .5;
}

/* Quando o shortcode vive num widget de texto (Elementor aplica wpautop),
   o filtro envolve o botão do card em <p> e deixa <p> vazios pelo card —
   neutraliza os dois para o card ficar idêntico ao do catálogo. */
.cf-ass-page ul.products li.product p:empty {
	display: none;
}

.cf-ass-page ul.products li.product .add_to_cart_button,
.cf-ass-page ul.products li.product .added_to_cart {
	display: none !important;
}

@media (max-width: 1024px) {
	/* Abaixo do desktop o cabeçalho já é baixo (55px): só reduz o respiro
	   interno da intro. */
	.cf-ass-intro {
		padding-top: 22px;
		padding-bottom: 18px;
	}

	.cf-ass-summary-card {
		flex-direction: column;
		gap: 20px;
		padding: 18px;
	}

	.cf-ass-summary .cf-ass-actions {
		width: 100%;
		min-width: 0;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.cf-ass-summary .cf-ass-actions .cf-ass-link {
		align-self: center;
	}
}

@media (max-width: 768px) {
	.cf-ass-hero-media {
		min-height: 220px;
	}

	.cf-ass-scene {
		max-height: 60vh;
	}
}

/* ------------------------------------------------------------------
   Assistente CF — recursos avançados: checkbox de anotação, dropdown,
   modal "Refazer com alterações" e pins de anotação na imagem.
   ------------------------------------------------------------------ */

.cf-ass-annotate-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #31404b;
	cursor: pointer;
	flex-shrink: 0;
	-webkit-user-select: none;
	user-select: none;
}

.cf-ass-annotate-toggle input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: #31404b;
	cursor: pointer;
	margin: 0;
}

.cf-ass-annotate-on .cf-ass-hero-media {
	cursor: crosshair;
}

.cf-ass-annotate-on .cf-ass-scene {
	cursor: crosshair;
}

/* Dropdown "Recursos avançados". */
.cf-ass-adv {
	position: relative;
	flex-shrink: 0;
}

.cf-ass-adv summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #31404b;
	border: 1px solid #c9d2d9;
	border-radius: 3px;
	padding: 10px 14px;
	cursor: pointer;
	background: #fff;
}

.cf-ass-adv summary::-webkit-details-marker {
	display: none;
}

.cf-ass-adv summary::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.6px solid #31404b;
	border-bottom: 1.6px solid #31404b;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .2s;
}

.cf-ass-adv[open] summary::after {
	transform: rotate(-135deg) translateY(-1px);
}

.cf-ass-adv summary:hover {
	border-color: #31404b;
}

.cf-ass-adv-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	min-width: 220px;
	background: #fff;
	border: 1px solid #e2e6e9;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(49, 64, 75, .16);
	padding: 6px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cf-ass-adv-menu button,
.cf-ass-adv-menu a {
	display: block;
	width: 100%;
	text-align: left;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: #31404b;
	background: #fff;
	border: 0;
	border-radius: 3px;
	padding: 9px 12px;
	cursor: pointer;
	text-decoration: none;
}

.cf-ass-adv-menu button:hover,
.cf-ass-adv-menu a:hover {
	background: #f2f5f7;
	color: #31404b;
}

/* Modal "Refazer com alterações". */
.cf-ass-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(23, 32, 39, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	opacity: 0;
	transition: opacity .25s;
}

.cf-ass-modal.is-open {
	opacity: 1;
}

.cf-ass-modal[hidden] {
	display: none;
}

.cf-ass-modal-card {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 88vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 6px;
	padding: 28px;
	box-shadow: 0 24px 64px rgba(23, 32, 39, .35);
}

.cf-ass-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: #f2f5f7;
	color: #31404b;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.cf-ass-modal-close:hover {
	background: #e4e9ed;
	color: #31404b;
}

.cf-ass-modal-title {
	font-family: Cinzel, serif;
	font-size: 22px;
	font-weight: 500;
	color: #31404b;
	margin: 0 0 6px;
}

.cf-ass-modal-sub {
	font-size: 13px;
	color: #6f7c85;
	margin: 0 0 20px;
}

.cf-ass-field {
	display: block;
	margin-bottom: 18px;
}

.cf-ass-field > span {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #31404b;
	margin-bottom: 8px;
}

.cf-ass-field > span em {
	font-style: normal;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: #8a949c;
}

.cf-ass-field textarea,
.cf-ass-field input[type="search"] {
	width: 100%;
	font-family: inherit;
	font-size: 14px;
	color: #1d262d;
	background: #fff;
	border: 1px solid #c9d2d9;
	border-radius: 3px;
	padding: 10px 12px;
}

.cf-ass-field textarea:focus,
.cf-ass-field input[type="search"]:focus {
	outline: none;
	border-color: #31404b;
	box-shadow: 0 0 0 2px rgba(49, 64, 75, .12);
}

.cf-ass-prod-results {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 6px;
}

.cf-ass-prod-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: inherit;
	font-size: 13px;
	color: #31404b;
	background: #f8f9fa;
	border: 1px solid #e2e6e9;
	border-radius: 3px;
	padding: 7px 10px;
	cursor: pointer;
	text-align: left;
}

.cf-ass-prod-opt:hover {
	background: #eef2f5;
	border-color: #c9d2d9;
	color: #31404b;
}

.cf-ass-prod-opt img {
	width: 34px;
	height: 34px;
	object-fit: contain;
	background: #fff;
	border-radius: 3px;
}

.cf-ass-prod-opt small {
	color: #8a949c;
	margin-left: auto;
}

.cf-ass-prod-selected {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cf-ass-prod-selected li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: #31404b;
	background: #f4efe4;
	border: 1px solid #e0d3b6;
	border-radius: 20px;
	padding: 5px 6px 5px 12px;
}

.cf-ass-prod-remove {
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 50%;
	background: #31404b;
	color: #fff;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.cf-ass-prod-remove:hover {
	background: #d39d45;
	color: #fff;
}

.cf-ass-cart-pick {
	margin-top: 12px;
	border: 1px dashed #c9d2d9;
	border-radius: 4px;
	padding: 10px 12px;
}

.cf-ass-cart-pick summary {
	font-size: 12px;
	font-weight: 600;
	color: #31404b;
	cursor: pointer;
}

.cf-ass-cart-pick ul {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 180px;
	overflow-y: auto;
}

.cf-ass-cart-pick label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: #31404b;
	cursor: pointer;
}

.cf-ass-cart-pick img {
	width: 34px;
	height: 34px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #eef0f2;
	border-radius: 3px;
}

.cf-ass-prod-count {
	font-size: 12px;
	color: #8a949c;
	margin: 8px 0 0;
	text-align: right;
}

.cf-ass-annot-note {
	font-size: 13px;
	color: #7a5c1e;
	background: #faf3e3;
	border: 1px solid #ecd9ab;
	border-radius: 4px;
	padding: 10px 12px;
	margin: 0 0 16px;
}

.cf-ass-modal-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.cf-ass-btn--primary {
	background: #31404b;
	color: #fff;
}

.cf-ass-btn--primary:hover {
	background: #d39d45;
	color: #fff;
}

/* Pins de anotação sobre a imagem gerada. */
.cf-ass-pins {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
}

.cf-ass-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #31404b;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 2px 8px rgba(23, 32, 39, .45);
	padding: 0;
}

.cf-ass-pin:hover {
	background: #d39d45;
	color: #fff;
}

/* Popover de anotação (clique na imagem). */
.cf-ass-annot-pop {
	position: absolute;
	z-index: 70;
	width: 260px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 12px 32px rgba(23, 32, 39, .35);
	padding: 14px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.cf-ass-annot-pop-title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #31404b;
	margin: 0 0 10px;
}

.cf-ass-annot-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 10px;
}

.cf-ass-annot-tabs button {
	flex: 1;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: #6f7c85;
	background: #f2f5f7;
	border: 0;
	border-radius: 3px;
	padding: 8px 6px;
	cursor: pointer;
}

.cf-ass-annot-tabs button.is-active {
	background: #31404b;
	color: #fff;
}

.cf-ass-annot-pane textarea,
.cf-ass-annot-pane input[type="search"] {
	width: 100%;
	font-family: inherit;
	font-size: 13px;
	color: #1d262d;
	border: 1px solid #c9d2d9;
	border-radius: 3px;
	padding: 8px 10px;
}

.cf-ass-annot-pane textarea:focus,
.cf-ass-annot-pane input[type="search"]:focus {
	outline: none;
	border-color: #31404b;
}

.cf-ass-annot-prod-results {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 6px;
	max-height: 140px;
	overflow-y: auto;
}

.cf-ass-annot-prod-results button {
	font-family: inherit;
	font-size: 12px;
	text-align: left;
	color: #31404b;
	background: #f8f9fa;
	border: 1px solid #e2e6e9;
	border-radius: 3px;
	padding: 7px 10px;
	cursor: pointer;
}

.cf-ass-annot-prod-results button:hover {
	background: #eef2f5;
	color: #31404b;
}

.cf-ass-annot-prod-chosen {
	font-size: 12px;
	color: #7a5c1e;
	margin: 8px 0 0;
}

.cf-ass-annot-pop-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.cf-ass-annot-pop-actions .cf-ass-btn {
	padding: 8px 14px;
	font-size: 12px;
}

@media (max-width: 768px) {
	.cf-ass-modal-card {
		padding: 20px;
	}

	.cf-ass-annot-pop {
		width: 230px;
	}
}


/* ------------------------------------------------------------------ */
/* Histórico de versões da imagem gerada (Assistente CF)               */
/* ------------------------------------------------------------------ */

.cf-ass-history-wrap {
	margin-top: 14px;
}

.cf-ass-history-wrap[hidden] {
	display: none;
}

.cf-ass-history-label {
	font-family: Cinzel, serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #31404B;
	margin: 0 0 8px;
}

.cf-ass-history {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.cf-ass-history-item {
	display: block;
	width: 132px;
	margin: 0;
	padding: 0;
	border: 1px solid #e4e4e4;
	background: #fff;
	cursor: pointer;
	text-align: left;
	transition: border-color .2s, box-shadow .2s;
}

.cf-ass-history-item img {
	display: block;
	width: 100%;
	height: 74px;
	object-fit: cover;
}

.cf-ass-history-date {
	display: block;
	font-size: 11px;
	line-height: 1.3;
	color: #6f7c85;
	padding: 5px 7px 6px;
}

.cf-ass-history-item:hover,
.cf-ass-history-item.is-active {
	border-color: #D39D45;
	box-shadow: 0 2px 8px rgba(49, 64, 75, .14);
}

@media (max-width: 768px) {
	.cf-ass-history-item {
		width: 108px;
	}

	.cf-ass-history-item img {
		height: 60px;
	}
}


/* ------------------------------------------------------------------ */
/* Seção Marcas ([sitecf_marcas]) — logos dos parceiros                */
/* ------------------------------------------------------------------ */

.cf-marcas {
	padding: 48px 0;
	background: #f8f7f2;
}

.cf-marcas-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 18px;
}

.cf-marcas-item {
	margin: 0;
}

.cf-marcas-link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 150px;
	padding: 22px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(37, 37, 37, .04);
	transition: border-color .25s, box-shadow .25s, transform .25s;
}

.cf-marcas-link img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .72;
	transition: filter .3s, opacity .3s;
}

.cf-marcas-link:hover,
.cf-marcas-link:focus-visible {
	border-color: #D39D45;
	box-shadow: 0 6px 18px rgba(49, 64, 75, .12);
	transform: translateY(-3px);
}

.cf-marcas-link:hover img,
.cf-marcas-link:focus-visible img {
	filter: grayscale(0);
	opacity: 1;
}

@media (max-width: 768px) {
	.cf-marcas {
		padding: 28px 0;
	}

	.cf-marcas-grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding-bottom: 6px;
		scrollbar-width: none;
	}

	.cf-marcas-grid::-webkit-scrollbar {
		display: none;
	}

	.cf-marcas-item {
		flex: 0 0 38vw;
		min-width: 140px;
		max-width: 190px;
		scroll-snap-align: start;
	}

	.cf-marcas-link {
		height: 110px;
		padding: 14px;
	}
}

/* --------------------------------------------------------------------------
   Sobre a CF — página institucional clara
   -------------------------------------------------------------------------- */

.cf-sobre {
	background: var(--cf-paper);
	color: var(--cf-ink);
	padding: clamp(70px, 10vw, 130px) 0;
}

.cf-sobre-head {
	text-align: center;
	margin-bottom: clamp(40px, 6vw, 70px);
}

.cf-sobre-logo {
	display: block;
	max-width: 220px;
	max-height: 110px;
	width: auto;
	height: auto;
	margin: 0 auto 30px;
	object-fit: contain;
}

.cf-sobre-label {
	color: var(--cf-accent);
	margin-bottom: 18px;
}

.cf-sobre .cf-title {
	color: #31404B;
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	margin-bottom: 20px;
}

.cf-sobre-divider {
	display: block;
	width: 160px;
	max-width: 40vw;
	height: auto;
	margin: 6px auto 0;
	object-fit: contain;
}

.cf-sobre-lead {
	max-width: 880px;
	margin: 0 auto clamp(36px, 5vw, 56px);
	font-family: var(--cf-font-sans);
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.75;
	color: #31404B;
	text-align: center;
}

.cf-sobre-cols {
	max-width: 1080px;
	margin: 0 auto clamp(50px, 7vw, 90px);
	columns: 2;
	column-gap: clamp(36px, 5vw, 72px);
}

.cf-sobre-cols p {
	margin: 0 0 22px;
	font-family: var(--cf-font-sans);
	font-size: 15px;
	line-height: 1.85;
	color: rgba(37, 37, 37, .78);
	break-inside: avoid;
}

.cf-sobre-timeline {
	list-style: none;
	max-width: 1080px;
	margin: 0 auto clamp(50px, 7vw, 80px);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(24px, 3vw, 44px);
	counter-reset: cf-sobre-step;
}

.cf-sobre-timeline li {
	position: relative;
	padding: 30px 28px 28px;
	background: #fff;
	border: 1px solid rgba(49, 64, 75, .09);
	box-shadow: 0 14px 34px rgba(49, 64, 75, .06);
}

.cf-sobre-year {
	display: block;
	font-family: var(--cf-font-display);
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	font-weight: 600;
	color: var(--cf-accent);
	line-height: 1;
	margin-bottom: 14px;
}

.cf-sobre-timeline h3 {
	font-family: var(--cf-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #31404B;
	margin: 0 0 12px;
}

.cf-sobre-timeline p {
	font-family: var(--cf-font-sans);
	font-size: 14px;
	line-height: 1.75;
	color: rgba(37, 37, 37, .72);
	margin: 0;
}

.cf-sobre-cta {
	text-align: center;
	margin: 0;
}

.cf-sobre-cta .cf-btn {
	background: #31404B;
	color: #fff;
}

.cf-sobre-cta .cf-btn:hover {
	background: var(--cf-accent);
	color: #fff;
}

@media (max-width: 900px) {
	.cf-sobre-cols {
		columns: 1;
		max-width: 680px;
	}

	.cf-sobre-timeline {
		grid-template-columns: 1fr;
		max-width: 560px;
	}
}

/* --------------------------------------------------------------------------
   Assistente CF — ajustes set/2026: efeito de geração compacto, ferramentas
   pós-cena (compartilhar/baixar/montagens), anotações diretas e mobile app.
   -------------------------------------------------------------------------- */

/* 1) Efeito de geração: ocupa uma área fixa (sem o vão enorme da imagem
      antiga) e com o rótulo/barra centralizados. */
.cf-ass-hero-media.is-rendering {
	height: 460px;
	min-height: 0;
}

.cf-ass-hero-media.is-rendering .cf-ass-hero-fallback,
.cf-ass-hero-media.is-rendering .cf-ass-scene {
	opacity: 0;
	filter: none;
}

.cf-ass-render {
	justify-content: center;
	padding-bottom: 0;
}

/* 5) Cursor de "adicionar comentário" sobre a imagem (anotação sempre ativa). */
.cf-ass-scene {
	cursor: crosshair;
}

/* Ferramentas pós-cena (dropdown avançado, compartilhar, baixar, montagens). */
.cf-ass-scene-tools {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.cf-ass-scene-tools[hidden] {
	display: none;
}

.cf-ass-btn--sm {
	padding: 10px 16px;
	font-size: 11px;
	letter-spacing: .12em;
}

.cf-ass-btn--danger {
	background: #b23c3c;
	border-color: #b23c3c;
	color: #fff;
}

.cf-ass-btn--danger:hover {
	background: #c54f4f;
	border-color: #c54f4f;
	color: #fff;
}

/* 3) Popover de anotação com a identidade CF. */
.cf-ass-annot-pop {
	border-top: 3px solid #d39d45;
	border-radius: 8px;
	width: 280px;
	padding: 16px;
}

.cf-ass-annot-pop-title {
	font-family: "Cinzel", Georgia, serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .08em;
	color: #31404b;
	margin: 0 0 4px;
	text-transform: none;
}

.cf-ass-annot-pop-hint {
	font-size: 12px;
	line-height: 1.5;
	color: #6f7c85;
	margin: 0 0 10px;
}

.cf-ass-annot-pop-actions .cf-ass-btn {
	flex: 1;
	justify-content: center;
}

/* 7) Campo "Buscar peças": caixa inteira clicável, lupa dentro, placeholder
      menor para caber o texto completo. */
.cf-ass-search-box {
	position: relative;
	display: flex;
	align-items: center;
	cursor: text;
	background: #fff;
	border: 1px solid #c9d2d9;
	border-radius: 3px;
	padding-left: 12px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.cf-ass-search-box svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	color: #8a949c;
}

.cf-ass-search-box:focus-within {
	border-color: #31404b;
	box-shadow: 0 0 0 2px rgba(49, 64, 75, .12);
}

.cf-ass-search-box:focus-within svg {
	color: #31404b;
}

.cf-ass-search-box input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0 !important;
	background: transparent;
	padding: 11px 12px 11px 9px;
	font-size: 13px;
}

.cf-ass-search-box input[type="search"]:focus {
	outline: none;
	box-shadow: none;
}

.cf-ass-search-box input[type="search"]::placeholder {
	font-size: 12px;
	color: #8a949c;
}

/* 4) Modal "Suas montagens". */
.cf-ass-montagens-card {
	max-width: 720px;
}

.cf-ass-montagens-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}

.cf-ass-montagens-item {
	display: block;
	width: 100%;
	padding: 0;
	background: #fff;
	border: 1px solid #e2e6e9;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	text-align: left;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.cf-ass-montagens-item:hover,
.cf-ass-montagens-item.is-current {
	border-color: #d39d45;
	box-shadow: 0 6px 18px rgba(49, 64, 75, .14);
}

.cf-ass-montagens-item img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}

.cf-ass-montagens-meta {
	display: block;
	padding: 10px 12px 12px;
}

.cf-ass-montagens-meta strong {
	display: block;
	font-family: "Cinzel", Georgia, serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	color: #31404b;
}

.cf-ass-montagens-meta em {
	display: block;
	font-style: normal;
	font-size: 12px;
	line-height: 1.45;
	color: #6f7c85;
	margin-top: 4px;
}

.cf-ass-montagens-empty {
	font-size: 13px;
	color: #6f7c85;
	text-align: center;
	padding: 26px 10px;
	margin: 0;
}

/* Aviso flutuante (compartilhar/baixar). */
.cf-ass-toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%) translateY(12px);
	background: #31404b;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(23, 32, 39, .3);
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
	z-index: 500;
	pointer-events: none;
	max-width: calc(100vw - 40px);
	text-align: center;
}

.cf-ass-toast.is-on {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Transição suave dos modais (card sobe ao abrir). */
.cf-ass-modal-card {
	transform: translateY(18px);
	transition: transform .28s ease;
}

.cf-ass-modal.is-open .cf-ass-modal-card {
	transform: translateY(0);
}

/* 8) Mobile: página do Assistente CF no estilo aplicativo. */
@media (max-width: 768px) {
	.cf-ass-page .cf-container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.cf-ass-intro {
		padding-top: 16px;
		padding-bottom: 12px;
	}

	.cf-ass-eyebrow {
		font-size: 10px;
		margin-bottom: 8px;
	}

	.cf-ass-title {
		font-size: clamp(22px, 7vw, 30px);
	}

	.cf-ass-hero-media.is-rendering {
		height: 300px;
	}

	.cf-ass-summary-card {
		padding: 16px;
		border-radius: 10px;
		gap: 16px;
	}

	.cf-ass-chips {
		gap: 6px;
		margin-bottom: 16px;
	}

	.cf-ass-chip {
		font-size: 11px;
		padding: 6px 10px;
	}

	.cf-ass-selected-list {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 10px;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.cf-ass-selected-list::-webkit-scrollbar {
		display: none;
	}

	.cf-ass-selected-list li {
		flex: 0 0 auto;
		width: 78px;
	}

	.cf-ass-actions,
	.cf-ass-scene-tools {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.cf-ass-actions .cf-ass-btn,
	.cf-ass-actions .cf-ass-generate,
	.cf-ass-scene-tools .cf-ass-btn {
		width: 100%;
		justify-content: center;
		min-height: 46px;
	}

	.cf-ass-actions .cf-ass-link {
		text-align: center;
	}

	.cf-ass-adv,
	.cf-ass-adv summary {
		width: 100%;
		justify-content: center;
	}

	.cf-ass-adv-menu {
		left: 0;
		right: 0;
		min-width: 0;
	}

	/* Modais viram folha inferior (bottom sheet). */
	.cf-ass-modal {
		align-items: flex-end;
		padding: 0;
	}

	.cf-ass-modal-card {
		width: 100%;
		max-width: none;
		max-height: 86vh;
		border-radius: 16px 16px 0 0;
		padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
	}

	.cf-ass-montagens-list {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.cf-ass-montagens-item img {
		height: 110px;
	}

	.cf-ass-annot-pop {
		width: min(280px, calc(100vw - 32px));
	}

	/* Catálogo: filtros em cima, grade em 2 colunas. */
	.cf-ass-shop-layout {
		flex-direction: column;
	}

	.cf-ass-shop-layout .cf-shop-sidebar {
		width: 100%;
		max-width: none;
	}

	.cf-ass-page ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px !important;
	}
}

/* Segurança contra wpautop (shortcode em widget de texto do Elementor):
   <br>/<p> injetados dentro do card de montagens não podem gerar vãos. */
.cf-ass-montagens-meta br {
	display: none;
}

.cf-ass-montagens-item p:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   Assistente CF — pins de produto emoldurados + summary-card redesenhado
   (grupos com ícones e expansor "Mais opções")
   -------------------------------------------------------------------------- */

/* Pin de produto: miniatura da peça com moldura branca/dourada e o número
   da anotação sobreposto no canto. */
.cf-ass-pin--product {
	width: 58px;
	height: 58px;
	border-radius: 10px;
	background: #fff;
	border: 2px solid #d39d45;
	padding: 3px;
	box-shadow: 0 4px 14px rgba(23, 32, 39, .35);
	overflow: visible;
}

.cf-ass-pin--product img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 7px;
	background: #fff;
}

.cf-ass-pin-num {
	position: absolute;
	top: -9px;
	left: -9px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #31404b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(23, 32, 39, .4);
}

.cf-ass-pin--product:hover {
	background: #fff;
	border-color: #31404b;
}

/* Busca de peças no popover: resultados com miniatura em tamanho bom. */
.cf-ass-annot-prod-results button {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
}

.cf-ass-annot-prod-results button img {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #eef0f2;
	border-radius: 4px;
}

.cf-ass-annot-prod-results button span {
	flex: 1;
	min-width: 0;
}

/* Preview da peça escolhida (com miniatura). */
.cf-ass-annot-prod-chosen {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	font-weight: 600;
	color: #31404b;
	background: #f4efe4;
	border: 1px solid #e0d3b6;
	border-radius: 4px;
	padding: 8px 10px;
	margin: 8px 0 0;
}

.cf-ass-annot-prod-chosen img {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	object-fit: contain;
	background: #fff;
	border-radius: 4px;
}

/* ---- Summary-card: ações agrupadas com ícones + expansor inferior ---- */

.cf-ass-summary .cf-ass-actions {
	flex-direction: column;
	align-items: stretch;
	min-width: 340px;
	max-width: 420px;
	gap: 14px;
}

.cf-ass-summary .cf-ass-actions .cf-ass-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.cf-ass-scene-tools {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	border: 1px solid rgba(49, 64, 75, .14);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}

/* Linha de ações rápidas (compartilhar / baixar / montagens) com ícone. */
.cf-ass-tool-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.cf-ass-tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 14px 8px;
	background: #fff;
	border: 0;
	border-right: 1px solid rgba(49, 64, 75, .1);
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #31404b;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.cf-ass-tool:last-child {
	border-right: 0;
}

.cf-ass-tool svg {
	width: 19px;
	height: 19px;
	color: #31404b;
	transition: color .2s ease;
}

.cf-ass-tool:hover {
	background: #faf6ec;
	color: #8a6520;
}

.cf-ass-tool:hover svg {
	color: #d39d45;
}

/* Seta de expansão na base do grupo. */
.cf-ass-more-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 10px 12px;
	background: #f6f7f8;
	border: 0;
	border-top: 1px solid rgba(49, 64, 75, .1);
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #6f7c85;
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
}

.cf-ass-more-toggle svg {
	width: 14px;
	height: 14px;
	transition: transform .25s ease;
}

.cf-ass-more-toggle:hover {
	background: #f0f2f4;
	color: #31404b;
}

.cf-ass-more-toggle.is-open {
	color: #31404b;
}

.cf-ass-more-toggle.is-open svg {
	transform: rotate(180deg);
}

/* Área expandida: recursos avançados e mais informações. */
.cf-ass-more {
	border-top: 1px solid rgba(49, 64, 75, .1);
	padding: 6px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cf-ass-more[hidden] {
	display: none;
}

.cf-ass-more button,
.cf-ass-more a {
	display: block;
	width: 100%;
	text-align: left;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	color: #31404b;
	background: #fff;
	border: 0;
	border-radius: 4px;
	padding: 10px 12px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .2s ease;
}

.cf-ass-more button:hover,
.cf-ass-more a:hover {
	background: #f2f5f7;
}

/* Mobile: ferramentas continuam em grupo, já em largura total. */
@media (max-width: 768px) {
	.cf-ass-summary .cf-ass-actions {
		min-width: 0;
		max-width: none;
	}

	.cf-ass-tool {
		padding: 12px 6px;
		font-size: 10px;
	}
}

/* wpautop (widget de texto do Elementor) injeta <br>/<p> entre os botões —
   oculta para não quebrar a grade nem gerar vãos no card. */
.cf-ass-tool-row br,
.cf-ass-more br {
	display: none;
}

.cf-ass-summary-card p:empty,
.cf-ass-actions p:empty,
.cf-ass-scene-tools p:empty {
	display: none;
}

/* --------------------------------------------------------------------------
   Assistente CF — rodada 3: fim do rosa, X alinhado, 6 ferramentas,
   anotações no modal, ajuda e tour guiado
   -------------------------------------------------------------------------- */

/* 5) O reset.css do Hello Elementor pinta TODO button:hover/focus de rosa
      (#c36). Neutraliza: botões sem regra própria de fundo em hover/focus
      ficam transparentes; os nossos (com classe) continuam mandando. */
button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus {
	background-color: transparent;
	color: inherit;
	border-color: inherit;
}

/* Fundos de hover/focus explícitos nos elementos que não tinham. */
.cf-ass-montagens-item:hover,
.cf-ass-montagens-item:focus {
	background: #f8f7f2;
}

.cf-ass-history-item:hover,
.cf-ass-history-item:focus {
	background: #f8f7f2;
}

.cf-ass-annot-tabs button:hover,
.cf-ass-annot-tabs button:focus {
	background: #e4e9ed;
	color: #31404b;
}

.cf-ass-annot-tabs button.is-active:hover,
.cf-ass-annot-tabs button.is-active:focus {
	background: #31404b;
	color: #fff;
}

/* 4) X de fechar: centralizado perfeito em todos os modais da página. */
.cf-ass-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	line-height: 0;
}

.cf-ass-modal-close:hover,
.cf-ass-modal-close:focus {
	background: #e4e9ed;
	color: #31404b;
}

/* 1) Seis ferramentas em grade 3x2, com bordas internas. */
.cf-ass-tool {
	border-bottom: 1px solid rgba(49, 64, 75, .1);
	text-decoration: none;
}

.cf-ass-tool:nth-child(3n) {
	border-right: 0;
}

.cf-ass-tool:nth-child(n + 4) {
	border-bottom: 0;
}

/* 2) Anotações listadas no modal "Refazer com alterações". */
.cf-ass-annot-list-wrap {
	margin: 0 0 16px;
}

.cf-ass-annot-list-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #31404b;
	margin: 0 0 8px;
}

.cf-ass-annot-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cf-ass-annot-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #f8f9fa;
	border: 1px solid #e2e6e9;
	border-radius: 4px;
	padding: 7px 10px;
}

.cf-ass-annot-list-num {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #31404b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

.cf-ass-annot-list li img {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	object-fit: contain;
	background: #fff;
	border: 1px solid #eef0f2;
	border-radius: 3px;
}

.cf-ass-annot-ico {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 3px;
	background: #f4efe4;
	border: 1px solid #e0d3b6;
	position: relative;
}

.cf-ass-annot-ico::after {
	content: "“";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Georgia, serif;
	font-size: 20px;
	color: #b08d2f;
}

.cf-ass-annot-list-text {
	flex: 1;
	min-width: 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: #31404b;
}

.cf-ass-annot-list-text strong {
	font-weight: 600;
}

/* 3) Modal de ajuda. */
.cf-ass-help-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cf-ass-help-list li {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 14px;
	background: #f8f9fa;
	border-left: 3px solid #d39d45;
	border-radius: 4px;
}

.cf-ass-help-list strong {
	font-family: "Cinzel", Georgia, serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #31404b;
}

.cf-ass-help-list span {
	font-size: 13px;
	line-height: 1.55;
	color: #6f7c85;
}

/* Tour guiado. */
.cf-tour-overlay {
	position: fixed;
	inset: 0;
	z-index: 600;
	background: rgba(23, 32, 39, .62);
}

.cf-tour-highlight {
	position: relative;
	z-index: 610 !important;
	outline: 3px solid #d39d45;
	outline-offset: 3px;
	border-radius: 6px;
}

.cf-tour-tip {
	position: fixed;
	z-index: 620;
	background: #fff;
	border-top: 3px solid #d39d45;
	border-radius: 8px;
	box-shadow: 0 18px 48px rgba(23, 32, 39, .4);
	padding: 16px 18px;
}

.cf-tour-step-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #d39d45;
	margin: 0 0 8px;
}

.cf-tour-text {
	font-size: 13.5px;
	line-height: 1.6;
	color: #31404b;
	margin: 0 0 14px;
}

.cf-tour-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.cf-tour-btn {
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	padding: 8px 16px;
	border-radius: 4px;
	border: 1px solid #c9d2d9;
	background: #fff;
	color: #31404b;
	cursor: pointer;
}

.cf-tour-btn:hover,
.cf-tour-btn:focus {
	background: #f2f5f7;
	color: #31404b;
}

.cf-tour-btn--next {
	background: #31404b;
	border-color: #31404b;
	color: #fff;
}

.cf-tour-btn--next:hover,
.cf-tour-btn--next:focus {
	background: #3d515f;
	border-color: #3d515f;
	color: #fff;
}

.cf-tour-skip {
	margin-left: auto;
	font-family: inherit;
	font-size: 12px;
	color: #8a949c;
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
	padding: 4px;
}

.cf-tour-skip:hover,
.cf-tour-skip:focus {
	color: #31404b;
	background: none;
}

/* 6) Placeholder da busca da sidebar: cabe completo dentro do campo. */
.cf-shop-sidebar-field.cf-search-line input[type="search"]::placeholder {
	font-size: 11px;
	letter-spacing: .04em;
}

/* Dica flutuante que acompanha o mouse sobre a imagem do evento:
   informa que pode clicar para alterar/adicionar produtos. */
.cf-ass-hover-tip {
	position: fixed;
	z-index: 300;
	max-width: 230px;
	background: #31404b;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	padding: 8px 13px;
	border-radius: 5px;
	border-top: 2px solid #d39d45;
	box-shadow: 0 8px 22px rgba(23, 32, 39, .32);
	pointer-events: none;
	opacity: 0;
	transition: opacity .18s ease;
}

.cf-ass-hover-tip.is-on {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Assistente CF — modal de cadastro rápido / login
   -------------------------------------------------------------------------- */

.cf-ass-auth-card {
	max-width: 460px;
}

.cf-ass-auth-error {
	font-size: 13px;
	line-height: 1.5;
	color: #7a5c1e;
	background: #faf3e3;
	border: 1px solid #ecd9ab;
	border-radius: 4px;
	padding: 10px 12px;
	margin: 0 0 16px;
}

.cf-ass-auth-form .cf-ass-field input[type="email"],
.cf-ass-auth-form .cf-ass-field input[type="password"] {
	width: 100%;
	font-family: inherit;
	font-size: 14px;
	color: #1d262d;
	background: #fff;
	border: 1px solid #c9d2d9;
	border-radius: 3px;
	padding: 11px 12px;
}

.cf-ass-auth-form .cf-ass-field input:focus {
	outline: none;
	border-color: #31404b;
	box-shadow: 0 0 0 2px rgba(49, 64, 75, .12);
}

.cf-ass-auth-toggle {
	font-size: 13px;
	color: #6f7c85;
	text-align: center;
	margin: 14px 0 0;
}

.cf-ass-auth-toggle a {
	color: #31404b;
	font-weight: 600;
}

.cf-ass-auth-toggle a:hover {
	color: #d39d45;
}

.cf-ass-auth-success {
	text-align: center;
	padding: 10px 0 4px;
}

.cf-ass-auth-success-icon {
	font-size: 40px;
	line-height: 1;
	margin: 0 0 14px;
}

.cf-ass-auth-success-title {
	font-family: "Cinzel", Georgia, serif;
	font-size: 17px;
	color: #31404b;
	margin: 0 0 10px;
}

.cf-ass-auth-success-text {
	font-size: 13.5px;
	line-height: 1.6;
	color: #6f7c85;
	margin: 0 0 20px;
}

/* [hidden] precisa vencer nosso .cf-ass-field {display:block} (mesma
   especificidade do reset do Hello, mas carregado depois). */
.cf-ass-field[hidden],
.cf-ass-auth-form [hidden],
.cf-ass-auth-success[hidden],
.cf-ass-modal [hidden] {
	display: none;
}

/* ==================================================================
   Painel de apoio do overlay de busca (estilos, paleta, opções da
   cena e ações Buscar / Montar evento). Mesma experiência da seção
   Assistente CF da home, compartilhando o estado global da seleção.
   ================================================================== */

/* Corrige hover dos botões de sugestão: fundo azul CF com texto branco
   (nunca invisível — protege contra regras externas que forçam texto
   claro no hover). */
.cfh-search-pop-chip:hover,
.cfh-search-pop-chip:focus-visible {
	background: #31404b !important;
	border-color: #31404b !important;
	color: #ffffff !important;
}

.cfh-search-panel {
	max-width: 860px;
	margin: 36px auto 0;
	text-align: center;
}

/* Painel some enquanto os resultados ao vivo estão visíveis, como os
   chips de buscas populares. */
.cfh-search-overlay.has-results .cfh-search-panel {
	display: none;
}

.cfh-search-hint-label {
	margin: 26px 0 14px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba(49, 64, 75, .5);
}

.cfh-search-styles {
	justify-content: center;
}

.cfh-search-panel .cf-chip.is-selected,
.cfh-search-adv .cf-chip.is-selected {
	border-color: #31404b !important;
	background: #31404b !important;
	color: #fff !important;
}

/* Paleta compacta no overlay: mesmas classes da home, tamanho reduzido. */
.cfh-search-palette {
	gap: 18px 10px;
	max-width: 100%;
}

.cfh-search-palette .cf-palette-item {
	width: 64px;
}

.cfh-search-palette .cf-palette-item i {
	width: 36px;
	height: 36px;
}

.cfh-search-palette .cf-palette-item span {
	font-size: 9.5px;
	letter-spacing: .06em;
}

.cfh-search-palette .cf-palette-item.is-selected i {
	box-shadow: 0 0 0 3px #faf9f4, 0 0 0 5px #31404b, 0 6px 14px rgba(37, 37, 37, .18);
}

/* Dropdown elegante de opções da cena (mesmas opções do Studio CF Express). */
.cfh-search-adv {
	max-width: 720px;
	margin: 30px auto 0;
	text-align: left;
	border: 1px solid rgba(49, 64, 75, .14);
	border-radius: 12px;
	background: rgba(255, 255, 255, .6);
	overflow: hidden;
}

.cfh-search-adv summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	cursor: pointer;
	list-style: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #31404b;
	transition: background-color .2s ease;
	user-select: none;
}

.cfh-search-adv summary::-webkit-details-marker {
	display: none;
}

.cfh-search-adv summary:hover {
	background: rgba(49, 64, 75, .05);
}

.cfh-search-adv-summary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.cfh-search-adv-summary svg {
	width: 17px;
	height: 17px;
	color: #d39d45;
}

.cfh-search-adv > summary > svg {
	width: 18px;
	height: 18px;
	color: rgba(49, 64, 75, .5);
	transition: transform .3s ease;
}

.cfh-search-adv[open] > summary > svg {
	transform: rotate(180deg);
}

.cfh-search-adv-body {
	padding: 6px 20px 20px;
	border-top: 1px solid rgba(49, 64, 75, .1);
}

.cfh-search-adv-group + .cfh-search-adv-group {
	margin-top: 16px;
}

.cfh-search-adv-label {
	margin: 14px 0 8px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #d39d45;
}

.cfh-search-adv-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cfh-search-adv-chips .cf-chip {
	padding: 7px 14px;
	font-size: 10.5px;
}

/* Ações: Buscar (azul CF) e Montar evento (amarelo escuro). */
.cfh-search-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 30px;
}

.cfh-search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 34px;
	border: 0;
	border-radius: 999px;
	font-family: var(--cf-font-text);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.cfh-search-btn svg {
	width: 16px;
	height: 16px;
}

.cfh-search-btn--buscar {
	background: #31404b;
	color: #fff !important;
	box-shadow: 0 10px 22px -12px rgba(49, 64, 75, .55);
}

.cfh-search-btn--buscar:hover,
.cfh-search-btn--buscar:focus-visible {
	background: #26333c;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -12px rgba(49, 64, 75, .6);
}

.cfh-search-btn--montar {
	background: #d39d45;
	color: #fff !important;
	box-shadow: 0 10px 22px -12px rgba(211, 157, 69, .55);
}

.cfh-search-btn--montar:hover,
.cfh-search-btn--montar:focus-visible {
	background: #c08d35;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 26px -12px rgba(211, 157, 69, .6);
}

.cfh-search-panel-hint {
	margin: 14px 0 0;
	font-size: 11.5px;
	color: rgba(49, 64, 75, .55);
	font-style: italic;
}

@media (max-width: 700px) {
	.cfh-search-panel {
		margin-top: 26px;
	}
	.cfh-search-btn {
		width: 100%;
		padding: 14px 20px;
	}
	.cfh-search-palette .cf-palette-item {
		width: 56px;
	}
}

/* Palavras do marquee viraram links para a busca do catálogo: hover em
   amarelo CF, sem sublinhado. */
a.cf-marquee-word {
	text-decoration: none;
	transition: color .25s ease;
}

a.cf-marquee-word:hover,
a.cf-marquee-word:focus-visible {
	color: #d39d45;
}

/* Itens do resultado ao vivo do overlay passam a ADICIONAR o produto à
   seleção do evento ao clicar (o link "ver" continua indo à página). */
.cfh-search-item--add {
	cursor: pointer;
}

.cfh-search-item--add:hover {
	border-color: rgba(211, 157, 69, .65);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -14px rgba(49, 64, 75, .35);
}

.cfh-search-item--add.is-selected {
	border-color: #31404b;
	background: rgba(49, 64, 75, .04);
}

.cfh-search-hit-add {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(49, 64, 75, .25);
	border-radius: 50%;
	font-size: 15px;
	line-height: 1;
	color: #31404b;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.cfh-search-item--add:hover .cfh-search-hit-add,
.cfh-search-item--add.is-selected .cfh-search-hit-add {
	background: #31404b;
	border-color: #31404b;
	color: #fff;
}

.cfh-search-item-view {
	flex: 0 0 auto;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgba(49, 64, 75, .55);
	transition: color .2s ease;
}

.cfh-search-item-view:hover {
	color: #d39d45;
}

/* Dica de até 3 produtos para uma cena ideal (overlay de busca). */
.cfh-search-montar-hint {
	margin: 14px 0 0;
	font-size: 11.5px;
	color: #b9832f;
	font-style: italic;
}


/* Chips de produtos selecionados no overlay de busca */
.cfh-search-selection {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 720px;
	margin: 18px auto 0;
	text-align: left;
}

.cfh-search-selection[hidden] {
	display: none;
}

.cfh-search-selection-label {
	font-family: var(--cf-font-sans, "Urbanist", Arial, sans-serif);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cf-primary, #31404b);
	opacity: .7;
}

.cfh-search-selection-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cfh-search-sel-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px 5px 5px;
	background: #fff;
	border: 1px solid rgba(49, 64, 75, .12);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(49, 64, 75, .06);
	font-family: var(--cf-font-sans, "Urbanist", Arial, sans-serif);
}

.cfh-search-sel-item img {
	width: 34px;
	height: 34px;
	object-fit: contain;
	background: #f6f5f0;
	border-radius: 4px;
	flex: 0 0 auto;
}

.cfh-search-sel-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cfh-search-sel-body strong {
	font-size: 12px;
	font-weight: 500;
	color: var(--cf-primary, #31404b);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cfh-search-sel-body small {
	font-size: 10px;
	color: var(--cf-primary, #31404b);
	opacity: .65;
}

.cfh-search-sel-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--cf-primary, #31404b);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background-color .2s ease;
}

.cfh-search-sel-remove:hover {
	background: rgba(211, 157, 69, .15);
}

/* --------------------------------------------------------------------------
   Assistente CF — botão "Adicionar peças" + modal de busca/seleção
   -------------------------------------------------------------------------- */
.cf-ass-add-li { list-style: none; }
.cf-ass-add-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(49, 64, 75, 0.06);
	border: 1.5px dashed rgba(49, 64, 75, 0.35);
	border-radius: 999px;
	padding: 8px 16px 8px 8px;
	cursor: pointer;
	font-family: -apple-system, "Urbanist", Arial, sans-serif;
	transition: all 0.2s ease;
}
.cf-ass-add-btn:hover { background: #31404b; border-color: #31404b; border-style: solid; }
.cf-ass-add-btn:hover .cf-ass-add-plus { background: #D39D45; color: #31404b; }
.cf-ass-add-btn:hover .cf-ass-add-text { color: #fff; }
.cf-ass-add-plus {
	width: 30px; height: 30px; border-radius: 50%;
	background: #31404b; color: #fff;
	font-size: 18px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0; transition: all 0.2s ease;
}
.cf-ass-add-text { font-size: 12.5px; font-weight: 600; color: #31404b; transition: color 0.2s; }

#cf-assadd-overlay {
	position: fixed; inset: 0; z-index: 1000005;
	display: none; align-items: flex-end; justify-content: center;
	background: rgba(49, 64, 75, 0.55); backdrop-filter: blur(3px);
	font-family: -apple-system, "Urbanist", Arial, sans-serif;
}
#cf-assadd-overlay.is-open { display: flex; }
@media (min-width: 601px) { #cf-assadd-overlay { align-items: center; } }
#cf-assadd-overlay .cf-assadd-panel {
	width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh;
	display: flex; flex-direction: column;
	background: #f8f7f2; border-radius: 22px 22px 0 0;
	box-shadow: 0 -12px 50px rgba(0,0,0,0.25);
	animation: cfAssAddIn 0.32s cubic-bezier(0.22,1,0.36,1);
	overflow: hidden;
}
@media (min-width: 601px) { #cf-assadd-overlay .cf-assadd-panel { border-radius: 22px; } }
@keyframes cfAssAddIn { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
#cf-assadd-overlay .cf-assadd-head {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: #31404b; color: #fff; padding: 16px 20px; flex-shrink: 0;
}
#cf-assadd-overlay .cf-assadd-head h3 {
	font-family: "Cinzel", Georgia, serif; font-size: 15px; font-weight: 600;
	letter-spacing: 0.12em; text-transform: uppercase; margin: 0; color: #fff;
}
#cf-assadd-overlay .cf-assadd-close {
	width: 34px; height: 34px; border-radius: 50%; border: none;
	background: rgba(255,255,255,0.15); color: #fff; font-size: 20px; line-height: 1;
	cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#cf-assadd-overlay .cf-assadd-close:hover { background: rgba(255,255,255,0.28); }
#cf-assadd-overlay .cf-assadd-body { padding: 18px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
#cf-assadd-overlay .cf-assadd-selected {
	list-style: none; margin: 0 0 14px; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px;
}
#cf-assadd-overlay .cf-assadd-selected:empty { display: none; }
#cf-assadd-overlay .cf-assadd-empty { width: 100%; font-size: 12.5px; color: rgba(49,64,75,0.5); font-style: italic; padding: 4px 2px; }
#cf-assadd-overlay .cf-assadd-sel {
	display: inline-flex; align-items: center; gap: 7px;
	background: #fff; border: 1px solid rgba(49,64,75,0.18); border-radius: 999px;
	padding: 4px 6px 4px 4px; font-size: 12px; font-weight: 600; color: #31404b; max-width: 100%;
}
#cf-assadd-overlay .cf-assadd-sel img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
#cf-assadd-overlay .cf-assadd-sel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
#cf-assadd-overlay .cf-assadd-sel button {
	width: 20px; height: 20px; border-radius: 50%; border: none;
	background: rgba(49,64,75,0.12); color: #31404b; font-size: 14px; line-height: 1;
	cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#cf-assadd-overlay .cf-assadd-sel button:hover { background: #e02424; color: #fff; }
#cf-assadd-overlay .cf-assadd-search-box {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border: 1.5px solid rgba(49,64,75,0.18); border-radius: 12px; padding: 11px 14px;
}
#cf-assadd-overlay .cf-assadd-search-box:focus-within { border-color: #31404b; }
#cf-assadd-overlay .cf-assadd-search-box svg { width: 17px; height: 17px; color: rgba(49,64,75,0.45); flex-shrink: 0; }
#cf-assadd-overlay .cf-assadd-search-box input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 13.5px; color: #31404b; min-width: 0; }
#cf-assadd-overlay .cf-assadd-search-box input::placeholder { color: rgba(49,64,75,0.38); }
#cf-assadd-overlay .cf-assadd-results { margin-top: 10px; }
#cf-assadd-overlay .cf-assadd-results:empty { margin-top: 0; }
#cf-assadd-overlay .cf-assadd-info { font-size: 12.5px; color: rgba(49,64,75,0.5); text-align: center; padding: 10px; margin: 0; }
#cf-assadd-overlay .cf-assadd-opt {
	display: flex; align-items: center; gap: 11px;
	background: #fff; border: 1px solid rgba(49,64,75,0.12); border-radius: 12px;
	padding: 9px 11px; margin-bottom: 7px; cursor: pointer;
	transition: border-color 0.18s, box-shadow 0.18s;
}
#cf-assadd-overlay .cf-assadd-opt:hover { border-color: #31404b; box-shadow: 0 3px 10px rgba(49,64,75,0.10); }
#cf-assadd-overlay .cf-assadd-opt img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #fff; }
#cf-assadd-overlay .cf-assadd-opt-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#cf-assadd-overlay .cf-assadd-opt-body strong { font-size: 13px; color: #31404b; font-weight: 600; line-height: 1.3; }
#cf-assadd-overlay .cf-assadd-opt-body small { font-size: 11px; color: rgba(49,64,75,0.55); }
#cf-assadd-overlay .cf-assadd-check {
	width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #31404b; color: #31404b;
	font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	transition: all 0.2s;
}
#cf-assadd-overlay .cf-assadd-opt:hover .cf-assadd-check { background: #31404b; color: #fff; }
#cf-assadd-overlay .cf-assadd-opt.is-selected { border-color: #31404b; background: rgba(49,64,75,0.05); }
#cf-assadd-overlay .cf-assadd-opt.is-selected .cf-assadd-check { background: #31404b; border-color: #31404b; color: #fff; }
#cf-assadd-overlay .cf-assadd-cart { margin-top: 16px; border-top: 1px solid rgba(49,64,75,0.12); padding-top: 14px; }
#cf-assadd-overlay .cf-assadd-cart-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(49,64,75,0.55); margin: 0 0 10px; }
#cf-assadd-overlay .cf-assadd-cart ul { list-style: none; margin: 0; padding: 0; }
#cf-assadd-overlay .cf-assadd-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px)); background: #f8f7f2; border-top: 1px solid rgba(49,64,75,0.1); flex-shrink: 0; }
#cf-assadd-overlay .cf-assadd-done {
	display: flex; align-items: center; justify-content: center; width: 100%;
	padding: 14px 20px; border: none; border-radius: 999px;
	background: #31404b; color: #fff;
	font-family: "Cinzel", Georgia, serif; font-size: 13.5px; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
	transition: background 0.2s, transform 0.15s; box-shadow: 0 6px 18px rgba(49,64,75,0.28);
}
#cf-assadd-overlay .cf-assadd-done:hover { background: #232f38; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Assistente CF — modal de confirmação antes de gerar a cena
   -------------------------------------------------------------------------- */
#cf-assgen-overlay {
	position: fixed; inset: 0; z-index: 1000006;
	display: flex; align-items: center; justify-content: center;
	background: rgba(49, 64, 75, 0.55); backdrop-filter: blur(3px);
	opacity: 0; transition: opacity 0.2s ease; padding: 20px;
	font-family: -apple-system, "Urbanist", Arial, sans-serif;
}
#cf-assgen-overlay.is-open { opacity: 1; }
#cf-assgen-overlay .cf-assgen-panel {
	width: 100%; max-width: 420px; background: #f8f7f2; border-radius: 20px;
	box-shadow: 0 24px 60px rgba(0,0,0,0.28); padding: 26px 24px;
	transform: translateY(14px); transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}
#cf-assgen-overlay.is-open .cf-assgen-panel { transform: translateY(0); }
#cf-assgen-overlay .cf-assgen-title {
	font-family: "Cinzel", Georgia, serif; font-size: 17px; font-weight: 600;
	color: #31404b; margin: 0 0 16px; line-height: 1.3; text-align: center;
}
#cf-assgen-overlay .cf-assgen-resumo {
	list-style: none; margin: 0 0 14px; padding: 14px 16px;
	background: #fff; border: 1px solid rgba(49,64,75,0.12); border-radius: 14px;
	display: flex; flex-direction: column; gap: 7px;
}
#cf-assgen-overlay .cf-assgen-resumo li { font-size: 13.5px; color: #31404b; line-height: 1.4; }
#cf-assgen-overlay .cf-assgen-resumo li strong { color: #D39D45; font-size: 16px; }
#cf-assgen-overlay .cf-assgen-desc { font-style: italic; color: rgba(49,64,75,0.7); }
#cf-assgen-overlay .cf-assgen-note {
	font-size: 12px; color: rgba(49,64,75,0.55); text-align: center;
	margin: 0 0 18px; line-height: 1.5;
}
#cf-assgen-overlay .cf-assgen-actions { display: flex; gap: 10px; }
#cf-assgen-overlay .cf-assgen-cancel {
	flex: 0 0 auto; padding: 13px 18px; border: 1.5px solid rgba(49,64,75,0.25);
	border-radius: 999px; background: transparent; color: #31404b;
	font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
	transition: all 0.2s;
}
#cf-assgen-overlay .cf-assgen-cancel:hover { border-color: #31404b; background: rgba(49,64,75,0.06); }
#cf-assgen-overlay .cf-assgen-confirm {
	flex: 1; padding: 13px 18px; border: none; border-radius: 999px;
	background: #31404b; color: #fff;
	font-family: "Cinzel", Georgia, serif; font-size: 13px; font-weight: 600;
	letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
	transition: background 0.2s, transform 0.15s; box-shadow: 0 6px 18px rgba(49,64,75,0.28);
}
#cf-assgen-overlay .cf-assgen-confirm:hover { background: #232f38; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   Busca em tela cheia — ações (Buscar / Montar evento) fixas no rodapé,
   sempre visíveis mesmo com muitos resultados (sem precisar rolar).
   -------------------------------------------------------------------------- */
.cfh-search-overlay.cfh-open .cfh-search-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 60;
	background: linear-gradient(#faf9f4, #f2f0e9);
	padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
	margin-top: 0;
	border-top: 1px solid rgba(49, 64, 75, .12);
	box-shadow: 0 -8px 24px rgba(49, 64, 75, .14);
}
.cfh-search-overlay.cfh-open .cfh-search-panel {
	padding-bottom: 100px;
}
.cfh-search-overlay.cfh-open .cfh-search-actions .cfh-search-btn {
	flex: 1 1 0;
	max-width: 320px;
}

/* --------------------------------------------------------------------------
   Busca em tela cheia — paleta de cores: resumo de selecionadas + botão
   "Cores" que abre um modal com a grade completa (mobile).
   -------------------------------------------------------------------------- */
.cfh-colors-block { margin-bottom: 4px; }
.cfh-colors-summary {
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid rgba(49, 64, 75, 0.14); border-radius: 14px;
	padding: 10px 12px;
}
.cfh-colors-selected {
	flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; min-width: 0;
}
.cfh-colors-none { font-size: 12px; color: rgba(49, 64, 75, 0.45); font-style: italic; }
.cfh-colors-sel {
	display: inline-flex; align-items: center; gap: 6px;
	background: #fff; border: 1px solid rgba(49, 64, 75, 0.18);
	border-radius: 999px; padding: 3px 9px 3px 3px;
}
.cfh-colors-sel i {
	width: 20px; height: 20px; border-radius: 50%; display: block;
	border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(49, 64, 75, 0.2);
	flex-shrink: 0;
}
.cfh-colors-sel em {
	font-style: normal; font-size: 11px; font-weight: 600; color: #31404b;
	max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cfh-colors-open {
	flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
	background: #31404b; color: #fff; border: none; border-radius: 999px;
	padding: 8px 14px 8px 8px; cursor: pointer;
	font-family: inherit; font-size: 12px; font-weight: 600;
	transition: background 0.2s, transform 0.15s;
}
.cfh-colors-open:hover { background: #232f38; transform: translateY(-1px); }
.cfh-colors-open-plus {
	width: 24px; height: 24px; border-radius: 50%; background: #D39D45; color: #31404b;
	font-size: 16px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
}

/* Modal de paletas sobre o overlay de busca */
.cfh-colors-modal {
	position: fixed; inset: 0; z-index: 1000007;
	display: none; align-items: flex-end; justify-content: center;
	font-family: -apple-system, "Urbanist", Arial, sans-serif;
}
.cfh-colors-modal.is-open { display: flex; }
@media (min-width: 601px) { .cfh-colors-modal { align-items: center; } }
.cfh-colors-modal-backdrop { position: absolute; inset: 0; background: rgba(49, 64, 75, 0.6); backdrop-filter: blur(3px); }
.cfh-colors-modal-panel {
	position: relative; z-index: 1;
	width: 100%; max-width: 560px; max-height: 86vh; max-height: 86dvh;
	display: flex; flex-direction: column;
	background: #f8f7f2; border-radius: 22px 22px 0 0;
	box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.3);
	animation: cfhColorsIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 601px) { .cfh-colors-modal-panel { border-radius: 22px; } }
@keyframes cfhColorsIn { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cfh-colors-modal-head {
	display: flex; align-items: baseline; gap: 10px;
	padding: 16px 20px; border-bottom: 1px solid rgba(49, 64, 75, 0.1);
}
.cfh-colors-modal-head strong {
	font-family: "Cinzel", Georgia, serif; font-size: 15px; font-weight: 600;
	letter-spacing: 0.1em; text-transform: uppercase; color: #31404b; flex: 1;
}
.cfh-colors-modal-head span { font-size: 11px; color: rgba(49, 64, 75, 0.5); }
.cfh-colors-modal-close {
	width: 32px; height: 32px; border-radius: 50%; border: none;
	background: rgba(49, 64, 75, 0.1); color: #31404b; font-size: 19px; line-height: 1;
	cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cfh-colors-modal-close:hover { background: #31404b; color: #fff; }
.cfh-colors-modal-grid {
	display: flex; flex-wrap: wrap; gap: 10px;
	padding: 18px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0;
	justify-content: flex-start;
}
.cfh-colors-modal-grid .cf-palette-item {
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	background: none; border: none; cursor: pointer; padding: 2px; width: 64px;
}
.cfh-colors-modal-grid .cf-palette-item i {
	width: 44px; height: 44px; border-radius: 50%; display: block;
	border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(49, 64, 75, 0.18), 0 2px 6px rgba(0,0,0,0.12);
	transition: transform 0.15s, box-shadow 0.15s;
}
.cfh-colors-modal-grid .cf-palette-item span {
	font-size: 10.5px; color: rgba(49, 64, 75, 0.75); text-align: center; line-height: 1.2;
}
.cfh-colors-modal-grid .cf-palette-item.is-selected i {
	transform: scale(1.12); box-shadow: 0 0 0 2.5px #31404b, 0 3px 8px rgba(0,0,0,0.2);
}
.cfh-colors-modal-grid .cf-palette-item.is-selected span { color: #31404b; font-weight: 700; }
.cfh-colors-modal-done {
	margin: 0 20px calc(16px + env(safe-area-inset-bottom, 0px));
	padding: 14px; border: none; border-radius: 999px;
	background: #31404b; color: #fff;
	font-family: "Cinzel", Georgia, serif; font-size: 13px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
	box-shadow: 0 6px 18px rgba(49, 64, 75, 0.28); flex-shrink: 0;
}
.cfh-colors-modal-done:hover { background: #232f38; }

/* --------------------------------------------------------------------------
   Assistente CF mobile — "As peças que você escolheu": cards verticais
   limpos (imagem em cima, nome embaixo) + botão "Adicionar" consistente.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.cf-ass-selected-list { gap: 10px; padding-bottom: 8px; }
	.cf-ass-selected-list li {
		width: 84px;
		flex: 0 0 84px;
		display: flex;
	}
	.cf-ass-selected-list li a {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		max-width: none;
		height: 100%;
		padding: 8px 6px;
		gap: 5px;
		text-align: center;
		border-radius: 12px;
		box-sizing: border-box;
	}
	.cf-ass-selected-list li a img,
	.cf-ass-selected-list img {
		width: 48px;
		height: 48px;
		object-fit: contain;
	}
	.cf-ass-selected-list li a span,
	.cf-ass-selected-list span {
		white-space: normal;
		font-size: 10px;
		line-height: 1.25;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}
	/* Botão "Adicionar" como card vertical consistente com as peças */
	.cf-ass-add-li {
		width: 84px;
		flex: 0 0 84px;
		display: flex;
	}
	.cf-ass-add-btn {
		flex-direction: column;
		width: 100%;
		min-height: 100%;
		justify-content: center;
		align-items: center;
		padding: 8px 6px;
		gap: 5px;
		border-radius: 12px;
		box-sizing: border-box;
	}
	.cf-ass-add-btn .cf-ass-add-plus { width: 34px; height: 34px; font-size: 20px; }
	.cf-ass-add-btn .cf-ass-add-text { font-size: 10px; white-space: normal; line-height: 1.2; }

	/* Separar botão de ação da mensagem: ação em destaque, mensagem abaixo
	   com respiro e hierarquia própria. */
	.cf-ass-actions { display: flex; flex-direction: column; gap: 0; }
	.cf-ass-actions .cf-ass-generate,
	.cf-ass-actions .cf-ass-btn[data-cf-regenerate-scene] {
		width: 100%;
		justify-content: center;
		min-height: 50px;
		margin-bottom: 12px;
	}
	.cf-ass-actions .cf-ass-generate .cf-ass-generate-step {
		display: block;
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0;
		font-size: 12px;
		opacity: 0.85;
		margin-top: 4px;
	}
	.cf-ass-actions .cf-ass-generate-hint,
	.cf-ass-generate-hint {
		margin: 0 0 14px;
		padding-top: 12px;
		border-top: 1px dashed rgba(49, 64, 75, 0.18);
		font-size: 12px;
		color: rgba(49, 64, 75, 0.6);
		text-align: center;
		line-height: 1.5;
	}
	.cf-ass-scene-tools { margin-top: 4px; }
}

/* --------------------------------------------------------------------------
   Assistente CF mobile — botão "Gerar imagem do meu evento": label e step
   empilhados (evita o texto cortar/transbordar quando o step aparece).
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.cf-ass-generate {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		width: 100%;
		max-width: 100%;
		padding: 14px 20px;
		text-align: center;
		white-space: normal;
		line-height: 1.3;
		box-sizing: border-box;
	}
	.cf-ass-generate .cf-ass-generate-label {
		white-space: normal;
		line-height: 1.3;
		letter-spacing: 0.12em;
	}
	.cf-ass-generate .cf-ass-generate-step {
		display: block;
		width: 100%;
		text-align: center;
		margin-top: 2px;
		white-space: normal;
		line-height: 1.3;
	}
}

/* --------------------------------------------------------------------------
   Assistente CF mobile — fix transbordo da lista de peças escolhidas:
   o cartão mantém align-items: flex-start (regra base), o que em coluna faz
   o .cf-ass-summary-main assumir largura de conteúdo (max-content) e
   transbordar a tela, escondendo o botão "Adicionar". Esticando os filhos
   e limitando o main, a lista volta a rolar horizontalmente.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.cf-ass-summary-card {
		align-items: stretch;
	}
	.cf-ass-summary-card .cf-ass-summary-main {
		width: 100%;
		max-width: 100%;
	}
	.cf-ass-summary-card .cf-ass-selected-list {
		width: 100%;
		max-width: 100%;
	}
	.cf-ass-summary-card .cf-ass-add-li,
	.cf-ass-summary-card .cf-ass-add-btn {
		flex-shrink: 0;
	}
}

/* --------------------------------------------------------------------------
   Assistente CF — lista de peças: wrap com seta indicando mais itens.
   A seta fica sobre a borda direita com um leve degradê e some quando a
   lista chega ao fim (classe .is-scroll-end aplicada via JS) ou quando não
   há overflow (sem .has-overflow fica oculta).
   -------------------------------------------------------------------------- */
.cf-ass-selected-wrap {
	position: relative;
}

.cf-ass-selected-hint {
	display: none;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #31404b;
	color: #fff;
	cursor: pointer;
	z-index: 2;
	box-shadow: 0 3px 10px rgba(37, 37, 37, .28);
	transition: opacity .25s ease, background-color .2s ease;
}

.cf-ass-selected-hint svg {
	width: 16px;
	height: 16px;
}

.cf-ass-selected-hint:hover {
	background: #d39d45;
}

.cf-ass-selected-wrap.has-overflow .cf-ass-selected-hint {
	display: flex;
	animation: cfSelHintPulse 2.2s ease-in-out infinite;
}

.cf-ass-selected-wrap.has-overflow.is-scroll-end .cf-ass-selected-hint {
	opacity: 0;
	pointer-events: none;
	animation: none;
}

/* Degradê suave na borda direita para a seta não sobrepor o card bruscamente. */
.cf-ass-selected-wrap.has-overflow:not(.is-scroll-end)::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 8px;
	width: 44px;
	pointer-events: none;
	background: linear-gradient(to right, rgba(248, 247, 242, 0), rgba(248, 247, 242, .95) 70%);
	z-index: 1;
}

@keyframes cfSelHintPulse {
	0%, 100% { transform: translateY(-50%) scale(1); }
	50% { transform: translateY(-50%) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
	.cf-ass-selected-wrap.has-overflow .cf-ass-selected-hint {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Assistente CF — alinhamento óptico do "+" no botão Adicionar: o glifo tem
   caixa de linha com espaço de descendente, o que o desloca para cima dentro
   do círculo. line-height 1 + pequeno empurrão para baixo centraliza de fato.
   -------------------------------------------------------------------------- */
.cf-ass-add-btn .cf-ass-add-plus {
	line-height: 1;
	padding-top: 2px;
}

/* --------------------------------------------------------------------------
   Assistente CF — hero sem cena: círculos das peças escolhidas + botão
   "Gerar imagem do meu evento" acoplados no centro de onde a imagem será
   criada. Os círculos se sobrepõem levemente e alternam a altura para um
   conjunto orgânico e elegante.
   -------------------------------------------------------------------------- */
.cf-ass-hero-cluster {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 28px 20px;
	text-align: center;
}

.cf-ass-hero-circles {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 16px; /* compensa a sobreposição dos círculos */
}

.cf-ass-hero-circle {
	width: clamp(58px, 8vw, 94px);
	height: clamp(58px, 8vw, 94px);
	border-radius: 50%;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	margin-left: -16px;
	box-shadow: 0 0 0 3px #fff, 0 16px 34px -12px rgba(0, 0, 0, .55);
	transition: transform .25s ease, box-shadow .25s ease;
}

.cf-ass-hero-circle:first-child {
	margin-left: 0;
}

.cf-ass-hero-circle:nth-child(2n) {
	transform: translateY(-10px);
}

.cf-ass-hero-circle:nth-child(2n+3) {
	transform: translateY(10px);
}

.cf-ass-hero-circle:hover {
	position: relative;
	z-index: 2;
	transform: translateY(-6px) scale(1.08);
	box-shadow: 0 0 0 3px #fff, 0 22px 40px -12px rgba(0, 0, 0, .6);
}

.cf-ass-hero-circle img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 12px;
}

.cf-ass-hero-cluster .cf-ass-generate {
	box-shadow: 0 18px 44px -14px rgba(211, 157, 69, .6);
}

.cf-ass-hero-cluster-hint {
	margin: 0;
	max-width: 380px;
	font-size: 12px;
	font-style: italic;
	color: rgba(255, 255, 255, .78);
}

/* Enquanto a cena é gerada, o cluster sai de cena para não cobrir o
   efeito de renderização. */
.cf-ass-hero-media.is-rendering .cf-ass-hero-fallback {
	visibility: hidden;
}

@media (max-width: 700px) {
	.cf-ass-hero-cluster {
		gap: 16px;
	}

	.cf-ass-hero-cluster-hint {
		font-size: 11px;
		max-width: 280px;
	}
}

/* --------------------------------------------------------------------------
   Busca — botão de envio dentro do campo: indica que o termo pode ser
   pesquisado diretamente (sem selecionar nada).
   -------------------------------------------------------------------------- */
.cfh-searchform-submit {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: #31404b;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}

.cfh-searchform-submit svg {
	width: 17px;
	height: 17px;
}

.cfh-searchform-submit:hover {
	background: #d39d45;
	transform: scale(1.06);
}

.cfh-search-overlay .cfh-searchform-submit {
	width: 50px;
	height: 50px;
}

.cfh-search-overlay .cfh-searchform-submit svg {
	width: 20px;
	height: 20px;
}

/* --------------------------------------------------------------------------
   Ajustes finos pós-redesign:
   - Peças selecionadas na busca: título longo trunca com reticências para o
     botão de remover (×) ficar sempre visível;
   - Botão gerar no hero: o texto de etapa só aparece enquanto gera
     (respeita o atributo hidden, que o display:block mobile anulava).
   -------------------------------------------------------------------------- */
.cfh-search-sel-item .cfh-search-sel-body {
	min-width: 0;
	flex: 1 1 auto;
}

.cfh-search-sel-item .cfh-search-sel-body strong {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Titulo e imagem das pecas selecionadas sao links que abrem o produto em nova aba. */
.cfh-search-sel-item .cfh-search-sel-body a,
.cfh-search-sel-item .cfh-search-sel-img {
	color: inherit;
	text-decoration: none;
	display: block;
}

.cfh-search-sel-item .cfh-search-sel-body a:hover strong,
.cfh-search-sel-item .cfh-search-sel-img:hover img {
	opacity: .8;
}

.cfh-search-sel-item .cfh-search-sel-remove {
	flex-shrink: 0;
}

.cf-ass-generate .cf-ass-generate-step[hidden] {
	display: none;
}

/* Peça selecionada na busca: limita o item à largura da tela — sem isso o
   inline-flex cresce com o título longo e empurra o × para fora. */
.cfh-search-sel-item {
	max-width: 100%;
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Tela de busca — ajustes de UX:
   1) Peças selecionadas só aparecem na tela inicial; durante a busca (com
      resultados abertos) ficam ocultas para não brigar com os resultados;
   3) Só uma barra de rolagem: trava o scroll da página no <html> enquanto
      o overlay está aberto (o body overflow inline nem sempre basta);
   4) Ações fixas no rodapé sem sombra, mantendo a borda.
   -------------------------------------------------------------------------- */
.cfh-search-overlay.has-results .cfh-search-selection {
	display: none;
}

html.cfh-no-scroll,
html.cfh-no-scroll body {
	overflow: hidden !important;
}

.cfh-search-overlay.cfh-open .cfh-search-actions {
	box-shadow: none;
}

/* Histórico do assistente sempre visível: estado vazio elegante. */
.cf-ass-history-empty {
	margin: 0;
	padding: 18px 22px;
	border: 1px dashed rgba(49, 64, 75, .22);
	border-radius: 12px;
	font-size: 12.5px;
	font-style: italic;
	color: rgba(49, 64, 75, .55);
	text-align: center;
}

/* --------------------------------------------------------------------------
   Cabeçalho fixo (stuck): sem sombreamento, apenas borda inferior como
   separador.
   -------------------------------------------------------------------------- */
.cfh-header.cfh-stuck .cfh-main {
	box-shadow: none;
	border-bottom: 1px solid rgba(37, 37, 37, .1);
}

/* --------------------------------------------------------------------------
   Cabeçalho estático (antes do scroll, fora do overlap do hero): sem
   sombreamento, apenas borda inferior leve. Sobre o hero da home
   (transparente), a borda some para não cortar a imagem.
   -------------------------------------------------------------------------- */
.cfh-main {
	box-shadow: none;
	border-bottom: 1px solid rgba(37, 37, 37, .07);
}

body.cfh-over-hero .cfh-header:not(.cfh-stuck) .cfh-main {
	border-bottom-color: transparent;
	/* O shorthand "background" acima reseta background-clip para border-box:
	   com background-repeat padrão (repeat), o gradiente reinicia do topo
	   (cor escura) na faixa da borda, desenhando uma linha escura de 1px na
	   base do header. Clipando na padding-box, a faixa da borda fica sem
	   fundo e a linha desaparece. */
	background-clip: padding-box;
}