/**
 * Catálogo de certificados.
 *
 * As cores saem de variáveis para a equipe ajustar pelo Elementor sem tocar em
 * código. Os valores abaixo são só o ponto de partida.
 */
.gar-catalog {
	--gar-cor-primaria: #0b3a6b;
	--gar-cor-texto: #40464d;
	--gar-cor-destaque: #d9531e;
	--gar-borda: #e2e6ea;
	--gar-cor-icone: #14532d;
	--gar-raio: 10px;
	--gar-espaco: 20px;
	--gar-icone-altura: 80px;

	position: relative;
}

.gar-catalog.is-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.gar-catalog__grid {
	display: grid;
	gap: var(--gar-espaco);
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.gar-catalog__grid--cols-2,
	.gar-catalog__grid--cols-3,
	.gar-catalog__grid--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.gar-catalog__grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gar-catalog__grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Card ------------------------------------------------------------------- */

.gar-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--gar-espaco);
	border: 1px solid var(--gar-borda);
	border-radius: var(--gar-raio);
	background: #fff;
	color: var(--gar-cor-texto);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.gar-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.gar-card__badge {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--gar-cor-destaque);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
}

.gar-card__media {
	display: flex;
	justify-content: center;
	margin-bottom: 12px;
}

/*
 * Teto de altura: a arte é um selo ao lado do nome, não a peça principal do
 * card. Sem ele, um SVG sem viewBox definido ocupa a coluna inteira.
 */
.gar-card__media img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: var(--gar-icone-altura);
}

/*
 * SVG pintado com a cor da marca.
 *
 * `mask` recorta um retângulo colorido no formato do desenho. Só funciona com
 * arte monocromática — é por isso que `imagem_svg` decide entre isto e um
 * <img> comum: uma foto viraria uma mancha de uma cor só.
 */
.gar-card__icone,
.gar-single__icone {
	display: block;
	width: 100%;
	height: var(--gar-icone-altura);
	background-color: var(--gar-cor-icone);
	-webkit-mask: var(--gar-icone) center / contain no-repeat;
	mask: var(--gar-icone) center / contain no-repeat;
}

.gar-card__title {
	margin: 0 0 10px;
	font-size: 18px;
	line-height: 1.3;
	color: var(--gar-cor-primaria);
}

.gar-card__title a {
	color: inherit;
	text-decoration: none;
}

.gar-card__meta {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
	font-size: 14px;
}

.gar-card__meta-item {
	margin-bottom: 4px;
}

.gar-card__bullets {
	margin: 0 0 12px 18px;
	padding: 0;
	font-size: 14px;
}

.gar-card__resumo {
	margin: 0 0 12px;
	font-size: 14px;
}

/* Empurra preço e botão para o rodapé, alinhando cards de alturas diferentes. */
.gar-card__price {
	margin-top: auto;
	padding-top: 12px;
}

.gar-card__price-value {
	font-size: 26px;
	font-weight: 700;
	color: var(--gar-cor-primaria);
}

.gar-card__price-value--indisponivel {
	font-size: 18px;
	font-weight: 600;
}

/*
 * Flex no rodapé em vez de `margin: 0 auto` no botão: centraliza sem depender
 * de o botão ser `display: block`, e continua valendo se o filtro
 * `gar_product_card_button` trocar o <button> por um link.
 */
.gar-card__footer {
	display: flex;
	justify-content: center;
	margin-top: 14px;
}

.gar-card__button {
	display: block;
	padding: 12px 16px;
	border-radius: var(--gar-raio);
	background: var(--gar-cor-destaque);
	color: #fff;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
}

.gar-card__button:hover,
.gar-card__button:focus {
	filter: brightness(0.92);
	color: #fff;
}

/* Filtros ---------------------------------------------------------------- */

.gar-filters {
	--gar-cor-primaria: #0b3a6b;
	--gar-cor-texto: #40464d;
	--gar-borda: #e2e6ea;
	--gar-raio: 10px;

	padding: 24px;
	border: 1px solid var(--gar-borda);
	border-radius: var(--gar-raio);
	background: #fff;
	color: var(--gar-cor-texto);

	/* Pinta a marca do checkbox nativo com a cor da loja — dispensa recriar o
	   controle com span e pseudo-elemento, e mantém teclado e leitor de tela. */
	accent-color: var(--gar-cor-primaria);
}

.gar-filters__title {
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--gar-borda);
	color: var(--gar-cor-primaria);
	font-size: 18px;
	font-weight: 700;
}

.gar-filters__group {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

.gar-filters__group:last-of-type {
	margin-bottom: 24px;
}

.gar-filters__legend {
	margin-bottom: 10px;
	padding: 0;
	color: var(--gar-cor-primaria);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.gar-filters__option {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 2px;
	padding: 6px 8px;
	border-radius: 6px;
}

.gar-filters__option:hover {
	background: #f4f7fa;
}

.gar-filters__option input {
	width: 17px;
	height: 17px;
	margin: 0;
	flex: 0 0 auto;
	cursor: pointer;
}

.gar-filters__option label {
	display: flex;
	flex: 1;
	gap: 8px;
	align-items: baseline;
	font-size: 15px;
	cursor: pointer;
}

/* Parênteses no CSS: o JavaScript escreve só o número ao recontar. */
.gar-filters__count::before {
	content: "(";
}

.gar-filters__count::after {
	content: ")";
}

.gar-filters__count {
	color: #7c848d;
	font-size: 13px;
}

/*
 * Opção que zerou por causa dos outros filtros. Continua visível para a caixa
 * não mudar de tamanho a cada clique, mas não é clicável — prometer um
 * resultado que não existe é pior do que mostrar o zero.
 */
.gar-filters__option.is-empty {
	opacity: 0.45;
}

.gar-filters__option.is-empty label,
.gar-filters__option.is-empty input {
	cursor: not-allowed;
}

.gar-filters__option.is-empty:hover {
	background: transparent;
}

.gar-filters__clear {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--gar-borda);
	border-radius: 8px;
	background: transparent;
	color: var(--gar-cor-texto);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.gar-filters__clear:hover {
	border-color: var(--gar-cor-primaria);
	color: var(--gar-cor-primaria);
}

/* Estados ---------------------------------------------------------------- */

.gar-catalog__empty {
	padding: 32px;
	border: 1px dashed var(--gar-borda);
	border-radius: var(--gar-raio);
	text-align: center;
}

.gar-catalog__error {
	padding: 12px 16px;
	border-radius: 8px;
	background: #fdecea;
	color: #8a1c13;
}

.gar-catalog__pagination {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: var(--gar-espaco);
}

.gar-catalog__page {
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid var(--gar-borda);
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
}

.gar-catalog__page.is-current {
	border-color: var(--gar-cor-primaria);
	background: var(--gar-cor-primaria);
	color: #fff;
	font-weight: 700;
}

/* Página do certificado ---------------------------------------------------- */

.gar-single {
	--gar-cor-primaria: #0b3a6b;
	--gar-cor-texto: #40464d;
	--gar-cor-destaque: #d9531e;
	--gar-borda: #e2e6ea;
	--gar-cor-icone: #14532d;
	--gar-raio: 10px;

	/* Na ficha do produto a arte é o assunto, não um selo como no card. */
	--gar-icone-altura: 150px;

	color: var(--gar-cor-texto);
}

.gar-single__grid {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
}

@media (min-width: 800px) {
	.gar-single__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

/*
 * A arte ganha um painel próprio. Um traço fino solto no branco parecia
 * perdido na coluna — o fundo dá a ela um lugar.
 */
.gar-single__media {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 240px;
	padding: 32px;
	border: 1px solid var(--gar-borda);
	border-radius: var(--gar-raio);
	background: #f7f9fb;
}

.gar-single__media img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: var(--gar-icone-altura);
}

.gar-single__media-placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px dashed var(--gar-borda);
	border-radius: var(--gar-raio);
	background: #fff;
}

.gar-single__badge {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--gar-cor-destaque);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.gar-single__title {
	margin: 0 0 18px;
	color: var(--gar-cor-primaria);
	line-height: 1.2;
}

.gar-single__resumo {
	margin: 0 0 16px;
	font-size: 17px;
}

.gar-single__bullets {
	margin: 0 0 20px 18px;
	padding: 0;
}

.gar-single__bullets li {
	margin-bottom: 6px;
}

.gar-single__price {
	margin-bottom: 4px;
}

.gar-single__price-value {
	font-size: 38px;
	font-weight: 700;
	color: var(--gar-cor-primaria);
	line-height: 1.1;
}

.gar-single__price-value--indisponivel {
	font-size: 24px;
}

.gar-single__actions {
	margin: 22px 0 32px;
}

.gar-single__button {
	display: inline-block;
	padding: 14px 32px;
	border: 0;
	border-radius: var(--gar-raio);
	background: var(--gar-cor-destaque);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}

.gar-single__button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.gar-single__indisponivel {
	margin: 20px 0;
	padding: 16px 20px;
	border-left: 4px solid #d63638;
	border-radius: 6px;
	background: #fdecea;
}

.gar-single__indisponivel p {
	margin: 6px 0 0;
}

.gar-single__ficha {
	width: 100%;
	margin-top: 8px;
	border: 1px solid var(--gar-borda);
	border-radius: var(--gar-raio);
	font-size: 15px;

	/* `collapse` descartaria o border-radius — mesma armadilha da tabela de
	   pedidos da confirmação. */
	border-collapse: separate;
	border-spacing: 0;
}

.gar-single__ficha th,
.gar-single__ficha td {
	padding: 14px 18px;
	/* O tema desenha grade em toda célula; é ela que deixava a ficha quadrada. */
	border: 0;
	border-bottom: 1px solid var(--gar-borda);
	background: none;
	text-align: left;
	vertical-align: top;
}

.gar-single__ficha th {
	width: 42%;
	background: #f7f9fb;
	color: var(--gar-cor-primaria);
	font-weight: 600;
}

.gar-single__ficha tr:last-child th,
.gar-single__ficha tr:last-child td {
	border-bottom: 0;
}

/* Cantos nas células: `overflow: hidden` em <table> não é confiável. */
.gar-single__ficha tr:first-child th { border-top-left-radius: var(--gar-raio); }
.gar-single__ficha tr:first-child td { border-top-right-radius: var(--gar-raio); }
.gar-single__ficha tr:last-child th { border-bottom-left-radius: var(--gar-raio); }
.gar-single__ficha tr:last-child td { border-bottom-right-radius: var(--gar-raio); }

.gar-single__descricao {
	max-width: 70ch;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--gar-borda);
	font-size: 16px;
	line-height: 1.7;
}

.gar-single__descricao-titulo {
	margin: 0 0 16px;
	color: var(--gar-cor-primaria);
	font-size: 22px;
}

.gar-single__descricao :last-child {
	margin-bottom: 0;
}

.gar-single-wrap {
	max-width: 1140px;
	margin: 0 auto;
	padding: 40px 20px;
}

/*
 * Resgate: shortcode colado dentro de <pre> no editor.
 *
 * Já aconteceu duas vezes em abas do Elementor — colar o shortcode com
 * formatação "pré-formatada" põe a grade inteira dentro de um <pre>. O
 * `white-space: pre` transforma cada quebra de linha do template em quebra
 * real: o card estica, e o "R$" se separa do valor.
 *
 * A correção de verdade é tirar o <pre> do conteúdo. Isto só evita que o
 * engano derrube a vitrine — por isso a fonte é declarada, e não herdada: o
 * que se herda ali é a monoespaçada do <pre>.
 */
pre .gar-catalog {
	white-space: normal;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Abas de tipo de certificado -------------------------------------------- */

/*
 * Estilo para a home, onde a grade vive dentro de um widget de abas.
 *
 * Todo o bloco está sob `.cert-tabs`, classe posta à mão no widget: sem ela
 * nada aqui se aplica. É o que permite ao plugin saber o markup do PowerPack
 * sem passar a depender dele — em outro tema, ou com outro widget de abas, o
 * seletor simplesmente não casa e o catálogo continua funcionando.
 *
 * O PowerPack renderiza **dois** conjuntos de títulos: a barra horizontal do
 * desktop (`pp-advanced-tabs-desktop-title`) e, dentro de cada painel, um
 * cabeçalho de acordeão (`pp-tab-responsive`) que assume abaixo do breakpoint.
 * Os dois precisam de tratamento próprio, senão um herda a forma do outro.
 */

.cert-tabs {
	--gar-cor-primaria: #0b3a6b;
	--gar-cor-texto: #40464d;
	--gar-borda: #e2e6ea;
}

.cert-tabs .pp-advanced-tabs {
	text-align: center;
}

/*
 * Barra do desktop: pílulas soltas, sem caixa em volta.
 *
 * Cada aba se basta como botão; a moldura cinza envolvendo o grupo só
 * acrescentava peso e competia com a moldura dos cards logo abaixo.
 */
.cert-tabs .pp-advanced-tabs-wrapper.pp-tabs-labels {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0 auto 32px;
	padding: 0;
	border: 0;
	background: none;
}

.cert-tabs .pp-advanced-tabs-desktop-title {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	padding: 12px 26px;
	border: 1px solid var(--gar-borda);
	border-radius: 999px;
	background: #fff;
	color: var(--gar-cor-texto);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* O ícone acompanha a cor do texto em todos os estados. */
.cert-tabs .pp-advanced-tabs-title svg,
.cert-tabs .pp-advanced-tabs-title i {
	color: inherit;
	fill: currentColor;
}

/* `:not(.pp-tab-active)`: sem isto, passar o mouse na aba aberta a apagaria. */
.cert-tabs .pp-advanced-tabs-desktop-title:not(.pp-tab-active):hover {
	border-color: var(--gar-cor-primaria);
	color: var(--gar-cor-primaria);
	box-shadow: 0 3px 10px rgba(11, 58, 107, 0.12);
	transform: translateY(-1px);
}

/*
 * O PowerPack apaga a borda inferior da aba ativa para ela encostar no painel
 * de baixo — herança do desenho de aba clássica. Numa pílula solta isso vira
 * um corte no contorno.
 *
 * O `!important` é deliberado e está só na borda: a regra que apaga vem da
 * folha do próprio PowerPack e pode vir também do painel de Estilo do widget,
 * cujo seletor o Elementor gera com o id do elemento. Não há como vencer no
 * peso sem adivinhar esse seletor.
 */
.cert-tabs .pp-advanced-tabs-desktop-title.pp-tab-active {
	/*
	 * Atalho inteiro, não só a cor: o PowerPack some com a borda de baixo por
	 * um dos três caminhos, e trocar só a cor não desfaz nenhum deles —
	 * `border-bottom-width: 0`, `border-bottom-style: none` ou
	 * `margin-bottom: -1px`, que esconde o traço atrás do painel.
	 */
	border: 1px solid var(--gar-cor-primaria) !important;
	margin-bottom: 0 !important;
	color: var(--gar-cor-primaria);
	box-shadow: 0 3px 10px rgba(11, 58, 107, 0.14);
}

/*
 * Alguns estilos do PowerPack desenham a marca da aba ativa num
 * pseudo-elemento, que numa pílula aparece como um risco solto embaixo.
 */
.cert-tabs .pp-advanced-tabs-desktop-title.pp-tab-active::after,
.cert-tabs .pp-advanced-tabs-desktop-title.pp-tab-active::before {
	display: none;
}

/* Acordeão que assume no tablet e no celular */
.cert-tabs .pp-tabs-panel > .pp-advanced-tabs-title.pp-tab-responsive {
	margin-bottom: 8px;
	padding: 14px 18px;
	border: 1px solid var(--gar-borda);
	border-radius: 10px;
	background: #f4f7fa;
	color: var(--gar-cor-primaria);
	font-size: 15px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.cert-tabs .pp-tabs-panel > .pp-advanced-tabs-title.pp-tab-responsive.pp-tab-active {
	background: var(--gar-cor-primaria);
	color: #fff;
}

/*
 * O fundo azul aplicava e o texto continuava preto: o PowerPack pinta o
 * título e o <span> interno com seletor mais pesado que este, e o painel de
 * Estilo do widget gera o dele com o id do elemento. Mesmo caso da borda da
 * aba ativa no desktop — `!important` só na cor, e só no estado ativo.
 */
.cert-tabs .pp-tabs-panel > .pp-advanced-tabs-title.pp-tab-responsive.pp-tab-active,
.cert-tabs .pp-tabs-panel > .pp-advanced-tabs-title.pp-tab-responsive.pp-tab-active .pp-advanced-tabs-title-inner,
.cert-tabs .pp-tabs-panel > .pp-advanced-tabs-title.pp-tab-responsive.pp-tab-active .pp-advanced-tabs-title-text,
.cert-tabs .pp-tabs-panel > .pp-advanced-tabs-title.pp-tab-responsive.pp-tab-active .pp-toggle-icon {
	color: #fff !important;
}

/*
 * Ícone branco na aba ativa, qualquer que seja o formato dele.
 *
 * `color`/`fill` não bastam: o ícone escolhido no widget pode ser SVG de
 * contorno (desenhado com `stroke`), SVG com a cor gravada nos próprios traços
 * ou uma imagem — e `fill` num ícone de contorno o preencheria inteiro. O
 * filtro zera a cor e inverte para branco em todos os casos, mantendo a
 * transparência.
 */
.cert-tabs .pp-tabs-panel > .pp-advanced-tabs-title.pp-tab-responsive.pp-tab-active svg,
.cert-tabs .pp-tabs-panel > .pp-advanced-tabs-title.pp-tab-responsive.pp-tab-active img,
.cert-tabs .pp-tabs-panel > .pp-advanced-tabs-title.pp-tab-responsive.pp-tab-active i {
	filter: brightness(0) invert(1);
}

.cert-tabs .pp-advanced-tabs-title-inner {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
}

/* Herda cor e peso do título em vez de trazer os do widget */
.cert-tabs .pp-advanced-tabs-title-text {
	font: inherit;
	color: inherit;
}

/* Navegação por teclado precisa continuar visível */
.cert-tabs .pp-advanced-tabs-title:focus-visible {
	outline: 2px solid var(--gar-cor-primaria);
	outline-offset: 2px;
}

/*
 * O wpautop embrulha o shortcode e deixa dois <p> vazios em volta da grade,
 * que viram espaço morto no topo e no rodapé de cada painel.
 */
.cert-tabs .pp-advanced-tabs-content > p:empty {
	display: none;
}

@media (max-width: 600px) {
	.cert-tabs .pp-advanced-tabs-desktop-title {
		padding: 10px 16px;
		font-size: 14px;
	}
}

/* "Quando usar?" ---------------------------------------------------------- */

.gar-card__quando-wrap {
	margin: 0 0 14px;
	text-align: center;
}

.gar-card__quando {
	padding: 0;
	border: 0;
	background: none;
	color: var(--gar-cor-primaria);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.gar-card__quando:hover {
	color: var(--gar-cor-destaque, #d9531e);
}

.gar-dialog {
	width: min(560px, calc(100vw - 32px));
	max-height: 85vh;
	padding: 0;
	border: 0;
	border-radius: var(--gar-raio, 10px);
	color: var(--gar-cor-texto, #40464d);
	overflow: hidden;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}

.gar-dialog::backdrop {
	background: rgba(11, 58, 107, 0.55);
}

.gar-dialog__head {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	background: var(--gar-cor-primaria);
	color: #fff;
}

.gar-dialog__title {
	margin: 0;
	color: #fff;
	font-size: 17px;
	font-weight: 700;
}

.gar-dialog__x {
	padding: 0 4px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.gar-dialog__body {
	padding: 24px;
	/* O texto é do editor: pode ser longo e a caixa tem teto de altura. */
	max-height: 55vh;
	overflow-y: auto;
	text-align: left;
	font-size: 15px;
	line-height: 1.6;
}

.gar-dialog__body :first-child { margin-top: 0; }
.gar-dialog__body :last-child { margin-bottom: 0; }

.gar-dialog__foot {
	padding: 0 24px 24px;
	text-align: center;
}

.gar-dialog__close {
	padding: 10px 28px;
	border: 1px solid var(--gar-borda);
	border-radius: 8px;
	background: transparent;
	color: var(--gar-cor-texto, #40464d);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.gar-dialog__close:hover {
	border-color: var(--gar-cor-primaria);
	color: var(--gar-cor-primaria);
}