/*
 * Componentes reutilizáveis — The Critical Consumer
 *
 * Cada classe é aplicada no Elementor em Avançado > Classes CSS.
 * O conteúdo continua editável no Elementor. Aqui fica só o comportamento
 * que o Elementor Free não oferece.
 */

/* ─────────────────────────────────────────────────────────────────────────────
 * .tcc-marquee — faixa de frases que corre na horizontal
 *
 * Use num widget "Editor de texto". O texto precisa aparecer DUAS VEZES
 * seguidas no mesmo parágrafo, para o movimento ser contínuo e sem salto.
 * ───────────────────────────────────────────────────────────────────────────── */
.tcc-marquee {
	overflow: hidden;
	white-space: nowrap;
}

.tcc-marquee p {
	display: inline-block;
	margin: 0;
	padding: 0;
	will-change: transform;
	animation: tcc-marquee 42s linear infinite;
}

.tcc-marquee strong {
	font-weight: 600;
}

@keyframes tcc-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.tcc-marquee p {
		animation: none;
	}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * .tcc-accent — palavra em destaque dentro de um título
 *
 * No texto do título, marque a palavra com <em>palavra</em>.
 * Em títulos com a fonte FrauncesSoftWonk, a letra sai deitada.
 * ───────────────────────────────────────────────────────────────────────────── */
.tcc-accent em {
	color: #9A3047;
	font-style: italic;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * .tcc-card — imagem em cartão com o traço bordô no canto inferior
 * ───────────────────────────────────────────────────────────────────────────── */
.tcc-card {
	position: relative;
}

.tcc-card::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 22%;
	height: 2px;
	background: #6D2735;
}

.tcc-card img {
	display: block;
	width: 100%;
	height: auto;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Cartões de produto nas páginas de catálogo da loja
 * (Home da Shop, /shop/ e categorias)
 *
 * Segue a vitrine original: título e preço sem sublinhado, e uma única chamada,
 * o link "View product". O botão padrão do WooCommerce só é escondido quando
 * esse link existe no cartão.
 * ───────────────────────────────────────────────────────────────────────────── */
body.tcc-woo-shell ul.products li.product a.woocommerce-LoopProduct-link,
body.tcc-woo-shell ul.products li.product .woocommerce-loop-product__title,
body.tcc-woo-shell ul.products li.product .price,
body.tcc-woo-shell ul.products li.product .price * {
	text-decoration: none !important;
}

body.tcc-woo-shell ul.products li.product .woocommerce-loop-product__title {
	color: #2E2A28 !important;
	font-family: "FrauncesSoftWonk", Georgia, serif !important;
	font-weight: 400 !important;
}

body.tcc-woo-shell ul.products li.product .price {
	color: #6D2735 !important;
}

body.tcc-woo-shell ul.products li.product:has(.tcc-view-product) > a.button,
body.tcc-woo-shell ul.products li.product:has(.tcc-view-product) > .button {
	display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * .tcc-horizon — títulos no desenho "Horizon" da página Resources
 *
 * Fraunces macia e irregular (SOFT 100, WONK 1), com tamanho óptico automático.
 * Use junto com a fonte FrauncesSoftWonk no widget de Título.
 * Antes essa fonte vinha do GitHub pelo jsDelivr; agora é o arquivo local.
 * ───────────────────────────────────────────────────────────────────────────── */
.tcc-horizon .elementor-heading-title,
.tcc-horizon.elementor-heading-title {
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-optical-sizing: auto;
	font-style: normal;
}

/* Parágrafos de editor de texto sem a margem padrão do tema.
 * O espaçamento fica no próprio widget (Avançado > Margem). */
.tcc-texto-sem-margem p {
	margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * .tcc-aba — rótulo sublinhado em bordô
 * ───────────────────────────────────────────────────────────────────────────── */
.tcc-aba .elementor-heading-title {
	display: inline-block;
	padding-bottom: 8px;
	border-bottom: 1px solid #6D2735;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * .tcc-frame — imagem com fundo colorido deslocado e traço bordô
 *
 * Aplique no widget de Imagem: "tcc-frame", mais uma cor e uma altura:
 *   cor:    tcc-frame--aqua  |  tcc-frame--bone
 *   altura: tcc-frame--hero (440 px)  |  tcc-frame--wide (470 px)
 * No celular as duas alturas viram 280 px.
 * ───────────────────────────────────────────────────────────────────────────── */
.tcc-frame {
	--tcc-frame-offset: 8px;
	position: relative;
	isolation: isolate;
}

.tcc-frame::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--tcc-frame-offset);
	left: var(--tcc-frame-offset);
	right: calc(var(--tcc-frame-offset) * -1);
	bottom: calc(var(--tcc-frame-offset) * -1);
	background: #EFE8DE;
	transition: transform 400ms cubic-bezier(.22, 1, .36, 1);
}

.tcc-frame::after {
	content: "";
	position: absolute;
	z-index: 2;
	left: 12px;
	bottom: calc(var(--tcc-frame-offset) * -1);
	width: 42px;
	height: 1px;
	background: #9A3047;
	transition: width 350ms cubic-bezier(.22, 1, .36, 1);
}

.tcc-frame--aqua::before { background: #DCE8E4; }
.tcc-frame--bone::before { background: #EFE8DE; }

.tcc-frame img {
	position: relative;
	display: block;
	width: 100%;
	object-fit: cover;
}

.tcc-frame--hero img { height: 440px; }
.tcc-frame--wide img { height: 470px; }

@media (hover: hover) {
	.tcc-frame:hover::before { transform: translate(3px, 3px); }
	.tcc-frame:hover::after  { width: 58px; }
}

@media (max-width: 767px) {
	.tcc-frame--hero img,
	.tcc-frame--wide img { height: 280px; }
}

@media (prefers-reduced-motion: reduce) {
	.tcc-frame::before,
	.tcc-frame::after { transition: none; }
}