/*
 * 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; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Botões do fluxo de compra na loja (carrinho, checkout, minha conta)
 *
 * O botão que avança a compra segue o "Adicionar ao carrinho" da página de
 * produto: bordô, letras maiúsculas. Os demais ficam com contorno bordô.
 * Antes eles usavam o roxo e o lilás padrão do WooCommerce.
 * ───────────────────────────────────────────────────────────────────────────── */
body.tcc-woo-shell .woocommerce a.button.alt,
body.tcc-woo-shell .woocommerce button.button.alt,
body.tcc-woo-shell .woocommerce #place_order,
body.tcc-woo-shell .woocommerce a.button,
body.tcc-woo-shell .woocommerce button.button,
body.tcc-woo-shell ul.products li.product a.button {
	min-height: 44px;
	padding: 12px 24px !important;
	border: 1px solid #6D2735 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: Inter, Arial, sans-serif !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none !important;
}

body.tcc-woo-shell .woocommerce a.button:not(.alt),
body.tcc-woo-shell .woocommerce button.button:not(.alt):not(#place_order),
body.tcc-woo-shell ul.products li.product a.button {
	background: transparent !important;
	color: #6D2735 !important;
}

body.tcc-woo-shell .woocommerce a.button.alt,
body.tcc-woo-shell .woocommerce button.button.alt,
body.tcc-woo-shell .woocommerce #place_order {
	background: #6D2735 !important;
	color: #FAF7F2 !important;
}

body.tcc-woo-shell .woocommerce a.button:not(.alt):hover,
body.tcc-woo-shell .woocommerce button.button:not(.alt):not(#place_order):hover,
body.tcc-woo-shell ul.products li.product a.button:hover {
	background: rgba(109, 39, 53, .06) !important;
}

body.tcc-woo-shell .woocommerce a.button.alt:hover,
body.tcc-woo-shell .woocommerce button.button.alt:hover,
body.tcc-woo-shell .woocommerce #place_order:hover {
	background: #57202B !important;
}

body.tcc-woo-shell .woocommerce button.button:disabled,
body.tcc-woo-shell .woocommerce button.button:disabled[disabled] {
	opacity: .45;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Botão "Join the newsletter" no rodapé da loja
 *
 * A regra de cor dos links do rodapé (creme) vencia a do botão, e o texto
 * ficava creme sobre fundo creme, invisível.
 * ───────────────────────────────────────────────────────────────────────────── */
html body .tcc-woo-newsletter-box a.tcc-woo-newsletter-button,
html body .tcc-woo-newsletter-box a.tcc-woo-newsletter-button:hover,
html body .tcc-woo-newsletter-box a.tcc-woo-newsletter-button:focus {
	color: #6D2735 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Menu do celular (gaveta do cabeçalho)
 *
 * O cabeçalho fixo cria um contexto de empilhamento em z-index 9999, e a gaveta
 * vive dentro dele. A sobreposição escura é criada no corpo da página com
 * z-index 99998 (estilo inline, no script do cabeçalho), então ficava pintada
 * por cima dos links da gaveta e engolia todo toque. Abaixo do cabeçalho e
 * acima do conteúdo, ela continua escurecendo a página e fechando a gaveta
 * ao toque, e os links voltam a receber o clique.
 * ───────────────────────────────────────────────────────────────────────────── */
body > .tcc-mobile-drawer-overlay {
	z-index: 9990 !important;
}

/* O script tcc-menu-celular.js move a camada para dentro do contêiner fixo do
 * cabeçalho, no mesmo contexto de empilhamento da gaveta. Ali ela fica acima
 * dos itens do cabeçalho (inclusive a lupa) e abaixo da gaveta (99999), e o
 * toque em qualquer ponto fora da gaveta fecha o menu. A regra acima é só a
 * reserva para o caso de o script não rodar. */
.elementor-element-container_q9py0hlja > .tcc-mobile-drawer-overlay {
	z-index: 99998 !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Cabeçalho entre 768 e 1024 px (tablet)
 *
 * Os dois grupos do menu têm 100 px de recuo interno para o centro. Em 768 px o
 * grupo da esquerda (JOURNAL e RESOURCES) estoura o próprio espaço e o texto
 * RESOURCES entra por cima do logo. Recuo menor nessa faixa; a partir de 1025
 * px o desenho original volta.
 * ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-element-container_i7qr9mbhx { padding-left: 16px !important; }
	.elementor-element-container_0mj7rmkrd { padding-right: 16px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Rodapé da loja: mesma família do rodapé do site
 *
 * O componente da loja foi escrito quando as fontes estavam quebradas e usa
 * Georgia como saída. Agora que a Fraunces existe, o rodapé da loja segue o
 * do site: título em FrauncesWonkSoft e "Stay curious." em FrauncesSoftWonk.
 * ───────────────────────────────────────────────────────────────────────────── */
body.tcc-woo-shell .tcc-woo-footer-title {
	font-family: "FrauncesWonkSoft", Georgia, serif !important;
}

body.tcc-woo-shell .tcc-woo-curious {
	font-family: "FrauncesSoftWonk", Georgia, serif !important;
}