/* Base — as cores e a tipografia globais do site (as variáveis --mx-global-*, que os plugins
   da casa e o CSS adicional também usam), as fontes Plus Jakarta Sans e o fundo da página. */

:root {
	--mx-global-color-primary: #0F0F0F;
	--mx-global-color-secondary: #FFFFFF;
	--mx-global-color-text: #F9F9F9;
	--mx-global-color-accent: #4A7259;
	--mx-global-color-f78bd59: #EBEBEB;
	--mx-global-color-796a98c: #252525;
	--mx-global-color-3b20a54: #FFFFFF00;
	--mx-global-color-5db5e15: #6B6B68;   /* era #888888 (3,4:1 sobre o fundo claro); 18/10, pedido do Rafael */
	/* Desde 2026-10-14: os neutros quentes e o verde escuro que a conta, as categorias, os
	   artigos e os emails já usavam à mão (WEBSITE/auditoria/estilos-2026-10-14.md).
	   Contraste sobre branco: tinta-2 8,90:1, tinta-3 5,35:1 (o #888888 dá 3,54:1 e não
	   chega para texto pequeno). */
	--mx-global-color-tinta-2: #4A4A46;
	--mx-global-color-tinta-3: #6B6B68;
	--mx-global-color-superficie: #F4F3EF;
	--mx-global-color-accent-escuro: #3A5A47;

	--mx-global-typography-primary-font-family: "Plus Jakarta Sans";
	--mx-global-typography-primary-font-size: clamp(2.38rem, 1.92241rem + 1.93103vw, 3.25rem);
	--mx-global-typography-primary-font-weight: 600;
	--mx-global-typography-secondary-font-family: "Plus Jakarta Sans";
	--mx-global-typography-secondary-font-size: clamp(1.63rem, 1.36638rem + 1.10345vw, 2.13rem);
	--mx-global-typography-secondary-font-weight: 600;
	--mx-global-typography-text-font-family: "Plus Jakarta Sans";
	--mx-global-typography-text-font-size: clamp(0.86rem, 0.84674rem + 0.06897vw, 0.89rem);
	--mx-global-typography-text-font-weight: 400;
	--mx-global-typography-accent-font-family: "Plus Jakarta Sans";
	--mx-global-typography-accent-font-size: clamp(0.94rem, 0.90517rem + 0.13793vw, 1.00rem);
	--mx-global-typography-accent-font-weight: 600;
	--mx-global-typography-accent-line-height: 1em;
	--mx-global-typography-f844386-font-family: "Plus Jakarta Sans";
	--mx-global-typography-f844386-font-size: clamp(1.25rem, 1.12069rem + 0.55172vw, 1.50rem);
	--mx-global-typography-f844386-font-weight: 600;
	--mx-global-typography-f844386-line-height: 1.2em;
	--mx-global-typography-9075350-font-family: "Plus Jakarta Sans";
	--mx-global-typography-9075350-font-size: clamp(0.94rem, 0.90517rem + 0.13793vw, 1.00rem);
	--mx-global-typography-9075350-font-weight: 500;
	--mx-global-typography-b0e9e5e-font-family: "Plus Jakarta Sans";
	--mx-global-typography-b0e9e5e-font-size: clamp(0.75rem, 0.75000rem + 0.00000vw, 0.75rem);
	--mx-global-typography-b0e9e5e-font-weight: 400;
	--mx-global-typography-6bcba6a-font-family: "Plus Jakarta Sans";
	--mx-global-typography-6bcba6a-font-size: clamp(0.92rem, 0.84483rem + 0.34483vw, 1.06rem);
	--mx-global-typography-6bcba6a-font-weight: 600;
	--mx-global-typography-6bcba6a-line-height: 1.4em;
}

body {
	background-color: var(--mx-global-color-text);
	overscroll-behavior: contain;
}

/* Os endereços são relativos para servirem igual na produção e na cópia.
   O mu-plugin font-preload pré-carrega o Regular e o SemiBold. */
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src: url('/wp-content/uploads/2026/02/PlusJakartaSans-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: italic;
	font-weight: normal;
	font-display: swap;
	src: url('/wp-content/uploads/2026/02/PlusJakartaSans-Italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/wp-content/uploads/2026/02/PlusJakartaSans-SemiBold.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('/wp-content/uploads/2026/02/PlusJakartaSans-SemiBoldItalic.woff2') format('woff2');
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('/wp-content/uploads/2026/02/PlusJakartaSans-Bold.woff2') format('woff2');
}

/* Animações de entrada (2026-10-16): o CSS das páginas esconde tudo o que tem .mt-invisible até o
   conteudo.js correr, e no telemóvel isso deixava o primeiro ecrã (a foto e a compra da ficha, o topo
   das páginas, a grelha da loja) em branco ~3 s, e a foto fora da conta do LCP. Agora só fica escondido
   o que o conteudo.js marcar com .mt-espera (o que está abaixo do primeiro ecrã); sem JS vê-se tudo. */
.mt-invisible:not(.mt-espera) {
	visibility: visible;
}

/* ── Paginação das grelhas (categorias, loja, pesquisa e blog), 2026-10-17 ──
   Como a do painel: «‹ Anterior · 1 2 3 · Seguinte ›», botões de 40 px (44 no
   telemóvel) com cantos de 8 px, a página atual a preto. Os CSS congelados de
   cada página pintam as cores e as margens com seletores longos, daí os
   !important nessas duas propriedades. */
.mt-doc .mt-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: 48px;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}
.mt-doc .mt-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	margin: 0 !important;
	border-radius: 8px;
	color: var(--mx-global-color-primary, #0F0F0F) !important;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease;
}
.mt-doc .mt-pagination a.page-numbers:hover { background: var(--mx-global-color-f78bd59, #EBEBEB); }
.mt-doc .mt-pagination a.page-numbers:focus-visible { outline: 2px solid var(--mt-foco, #4A7259); outline-offset: 2px; }
.mt-doc .mt-pagination .page-numbers.current {
	background: var(--mx-global-color-primary, #0F0F0F);
	color: var(--mx-global-color-secondary, #FFFFFF) !important;
	font-weight: 600;
}
.mt-doc .mt-pagination .page-numbers.dots { min-width: 24px; padding: 0; color: var(--mx-global-color-tinta-3, #6B6B68) !important; }
/* «Anterior» na primeira página e «Seguinte» na última: à vista, mas apagados */
.mt-doc .mt-pagination span.page-numbers.prev,
.mt-doc .mt-pagination span.page-numbers.next { color: var(--mx-global-color-tinta-3, #6B6B68) !important; opacity: .55; }
.mt-doc .mt-pagination .prev { margin-right: 8px !important; }
.mt-doc .mt-pagination .next { margin-left: 8px !important; }
@media (max-width: 767px) {
	.mt-doc .mt-pagination { margin-top: 32px; }
	.mt-doc .mt-pagination .page-numbers { min-width: 44px; height: 44px; }
	.mt-doc .mt-pagination .prev { margin-right: 0 !important; }
	.mt-doc .mt-pagination .next { margin-left: 0 !important; }
}

/* ── Selo de confiança: colocação no checkout (as classes .msp estão no tema-base.css) ── */
/* No checkout: por baixo do resumo, ao centro, com o mesmo ar do resto da coluna */
.wc-block-checkout [data-mt-confianca] { display: flex; justify-content: center; margin: 16px auto 0; }
/* Um selo só: no computador o da coluna lateral, no telemóvel o do resumo junto ao botão. */
@media (min-width: 769px) { .wc-block-checkout__actions [data-mt-confianca] { display: none !important; } }
@media (max-width: 768px) {
	.wc-block-checkout__sidebar [data-mt-confianca] { display: none !important; }
	.wc-block-checkout__actions [data-mt-confianca] { margin: 4px auto 16px; }
}

/* O cinzento secundário (18/10): as páginas congeladas redefinem as variáveis em
   `.mt-kit-8` (a classe do <body>) com o #888888 antigo. Esta regra, mais específica,
   ganha-lhes sem tocar nos CSS de cada página. Nas zonas de fundo preto (#0F0F0F), o
   #6B6B68 descia a ~3,6:1 e o #888888 dá 5,6:1: aí fica o antigo. */
.mt-kit-8.mt-kit-8 { --mx-global-color-5db5e15: #6B6B68; }
.mt-rod, #matt-chat-header { --mx-global-color-5db5e15: #888888; }