/**
 * Grid Principal — estilos do front-end.
 *
 * Todas as medidas configuráveis passam por variáveis CSS definidas pelos
 * controles do Elementor (escopadas em {{WRAPPER}}), então este arquivo só
 * carrega os padrões da marca.
 */

.gp-grid-wrap {
	--gp-white: #ffffff;
	--gp-dark: #202020;
	--gp-accent: #985630;
	/* Cinzas quentes, não neutros: em catálogo de alto ticket o cinza frio
	   "suja" a foto do produto. */
	--gp-muted: #9a948c;
	--gp-faint: #c4beb6;
	--gp-line: #e8e4df;
	--gp-soft: #f5f3f0;
	--gp-font-title: "Playfair Display", Georgia, "Times New Roman", serif;
	--gp-font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	position: relative;
	font-family: var(--gp-font-body);
	color: var(--gp-dark);
}

.gp-grid-wrap *,
.gp-grid-wrap *::before,
.gp-grid-wrap *::after {
	box-sizing: border-box;
}

/* Largura do widget. Numa coluna flex do Elementor com "Alinhar itens:
   centro" (ou início/fim), os filhos deixam de se esticar e ficam com a
   largura do próprio conteúdo. Numa grade de produtos isso vira bug: ela
   encolhe e muda de tamanho a cada filtro, porque os cards novos chegam com
   as imagens ainda sem tamanho. Esticar só este widget resolve. Usa a
   variável do próprio Elementor (--align-self), então uma escolha manual de
   alinhamento do widget (aba Avançado) continua valendo. */
.e-con > .elementor-widget-gp_product_grid {
	--align-self: stretch;
	align-self: var(--align-self);
}

/* -------------------------------------------------- Grid */

.gp-grid {
	--gp-cols: 4;
	--gp-gap-x: 24px;
	--gp-gap-y: 40px;
	/* Altura da imagem como % da LARGURA do card (100% = quadrado).
	   Percentual, e não aspect-ratio, porque padding percentual se mede pela
	   largura do próprio elemento: um card em destaque que ocupa 2 colunas
	   fica automaticamente com o dobro da altura, casando com as 2 linhas que
	   ele ocupa. Com aspect-ratio fixo isso não acontece e o card maior ficava
	   com uma faixa vazia embaixo. */
	--gp-pt: 100%;
	--gp-fit: contain;
	/* Respiro entre a foto e a borda do quadro. É o que faz o produto "flutuar"
	   no tile em vez de encostar nas bordas — a assinatura visual da referência. */
	--gp-img-pad: 12%;
	--gp-span-x: 2;
	--gp-span-y: 2;
	--gp-flow: row;
	--gp-auto-rows: auto;
	--gp-badge-offset: 16px;
	/* Carrinho sobre a foto: caixa clicável, tamanho do desenho e as duas cores. */
	--gp-cart-box: 34px;
	--gp-cart-icon: 20px;
	--gp-cart-color: #202020;
	--gp-cart-hover: #985630;

	display: grid;
	grid-template-columns: repeat(var(--gp-cols), minmax(0, 1fr));
	grid-auto-rows: var(--gp-auto-rows);
	grid-auto-flow: var(--gp-flow);
	column-gap: var(--gp-gap-x);
	row-gap: var(--gp-gap-y);
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-item {
	min-width: 0;
}

/* Cards maiores: os spans vêm dos controles responsivos do Elementor. */
.gp-item--featured {
	grid-column: span var(--gp-span-x);
	grid-row: span var(--gp-span-y);
}

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

.gp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	/* Fundo transparente: o card se apoia na cor da seção, sem placa branca
	   flutuando. Sem borda e sem sombra por padrão — o peso visual fica todo
	   na foto e no espaço em volta. */
	background-color: transparent;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gp-card__link {
	display: block;
	flex: 0 0 auto;
	text-decoration: none;
	color: inherit;
}

/* A foto inteira é clicável; fica sob os botões de ação. */
.gp-card__media-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
}

.gp-card__link:hover,
.gp-card__link:focus {
	text-decoration: none;
	color: inherit;
}

.gp-card__media {
	position: relative;
	flex: 0 0 auto;
	overflow: hidden;
	background-color: var(--gp-soft);
}

/* Espaçador que define a altura da imagem a partir da largura do card. */
.gp-card__media::before {
	content: "";
	display: block;
	padding-top: var(--gp-pt, 100%);
}

/* No card em destaque a imagem não tem altura própria: ela cresce para
   preencher exatamente a área que o card ocupa no grid, qualquer que seja a
   combinação de colunas x linhas. Assim nunca sobra faixa vazia embaixo nem
   estoura para fora da área. O min-height só evita o card colapsar quando ele
   é o único item das linhas que ocupa. */
.gp-item--featured .gp-card {
	height: 100%;
}

.gp-item--featured .gp-card__media {
	flex: 1 1 auto;
	min-height: 200px;
}

.gp-item--featured .gp-card__media::before {
	padding-top: 0;
}

.gp-card__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	padding: var(--gp-img-pad, 12%);
	object-fit: var(--gp-fit);
	object-position: center;
	margin: 0;
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1), opacity 0.4s ease;
}

.gp-card__img--hover {
	opacity: 0;
}

.gp-card:hover .gp-card__img--hover,
.gp-card:focus-within .gp-card__img--hover {
	opacity: 1;
}

/*
 * Troca de foto no hover: a principal SAI enquanto a segunda entra.
 * Antes só a segunda aparecia por cima — com foto de fundo branco a de cima
 * cobria a de baixo e ninguém notava, mas com PNG transparente as duas ficavam
 * visíveis ao mesmo tempo, sobrepostas. A classe --swap só existe quando o
 * produto tem imagem de galeria; sem ela, o hover mantém a foto principal.
 */
.gp-card:hover .gp-card__media--swap .gp-card__img--main,
.gp-card:focus-within .gp-card__media--swap .gp-card__img--main {
	opacity: 0;
}

.gp-item--out-of-stock .gp-card__img {
	opacity: 0.55;
}

.gp-card__body {
	padding-top: 20px;
	text-align: center;
}

.gp-card__cat {
	display: block;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gp-muted);
	margin-bottom: 8px;
}

/*
 * O nome do produto é tratado como RÓTULO, não como título de texto corrido:
 * caixa alta, corpo pequeno e entreletras larga. É assim nas três referências —
 * um serif grande no card puxa o layout para "loja comum". A Playfair fica
 * reservada para o título do bloco. Para usar serif aqui, basta trocar a
 * tipografia no painel de Estilo.
 */
.gp-card__title {
	/* Duas linhas fixas: mantém todos os cards com a mesma altura de texto, e é
	   isso que faz as linhas do grid baterem certo com os cards em destaque. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(2 * 1.6em);
	margin: 0 0 10px;
	font-family: var(--gp-font-body);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gp-dark);
	transition: color 0.25s ease;
}

.gp-card__excerpt {
	font-size: 12px;
	line-height: 1.5;
	color: var(--gp-muted);
	margin-bottom: 6px;
}

.gp-card__rating {
	margin-bottom: 6px;
}

.gp-card__rating .star-rating {
	display: inline-block;
	float: none;
	margin: 0 auto;
	color: var(--gp-accent);
}

.gp-card__price {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.1em;
	color: var(--gp-muted);
}

.gp-card__price del {
	opacity: 1;
	margin-right: 10px;
	color: var(--gp-faint);
	text-decoration: line-through;
}

.gp-card__price ins {
	background: none;
	text-decoration: none;
	color: var(--gp-dark);
	font-weight: 500;
}

/* -------------------------------------------------- Selos */

/*
 * Selos como texto, sem pílula colorida: "NOVO" ancorado à esquerda e o
 * desconto à direita, nos dois cantos superiores do quadro. Etiqueta preenchida
 * grita promoção; texto fino informa sem quebrar o tom do catálogo.
 */
.gp-card__badges {
	position: absolute;
	top: var(--gp-badge-offset, 16px);
	left: var(--gp-badge-offset, 16px);
	right: var(--gp-badge-offset, 16px);
	z-index: 2;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	pointer-events: none;
}

.gp-badges--top-right .gp-card__badges {
	justify-content: flex-end;
}

.gp-badge {
	display: inline-block;
	padding: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
	background-color: transparent;
	color: var(--gp-dark);
}

/* Empurra o selo de promoção para o canto oposto ao "NOVO". */
.gp-badge--sale {
	margin-left: auto;
	color: var(--gp-accent);
}

.gp-badge--out {
	color: var(--gp-muted);
}

/* -------------------------------------------------- Ação rápida */

/* Favoritar no canto inferior ESQUERDO do quadro — o carrinho ocupa o direito.
   Sem cápsula branca e sem borda: só o traço do ícone. */
.gp-card__wish {
	position: absolute;
	top: auto;
	bottom: var(--gp-badge-offset, 16px);
	left: var(--gp-badge-offset, 16px);
	right: auto;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--gp-dark);
	cursor: pointer;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease;
}

.gp-card:hover .gp-card__wish,
.gp-card:focus-within .gp-card__wish,
.gp-card__wish:focus-visible,
.gp-card__wish.is-active {
	opacity: 1;
	transform: translateY(0);
}

.gp-card__wish.is-active {
	color: var(--gp-accent);
}

.gp-card__wish.is-active svg path {
	fill: currentColor;
}

@media (hover: none) {
	.gp-card__wish {
		opacity: 1;
		transform: none;
	}
}

/* -------------------------------------------------- Botão de compra */

/*
 * Carrinho sobreposto à foto, canto inferior direito, sem fundo: aparece no
 * hover junto com o favoritar. Fora do fluxo do card, o bloco de texto continua
 * com nome e preço apenas.
 */
/* Só o modo ícone é sobreposto à foto. Com texto, o botão fica no fluxo do
   card, abaixo do preço. */
.gp-card__cart--icon {
	position: absolute;
	top: var(--gp-badge-offset, 16px);
	right: var(--gp-badge-offset, 16px);
	bottom: auto;
	left: auto;
	z-index: 4;
	margin: 0;
	text-align: center;
}

.gp-card__cart--text,
.gp-card__cart--icon_text {
	position: static;
	margin-top: 14px;
	text-align: center;
}

/* Posições do carrinho — a classe fica no wrapper, então vale também para os
   cards carregados por AJAX. */
.gp-cart--top-left .gp-card__cart--icon {
	top: var(--gp-badge-offset, 16px);
	left: var(--gp-badge-offset, 16px);
	right: auto;
	bottom: auto;
}

.gp-cart--bottom-right .gp-card__cart--icon {
	top: auto;
	bottom: var(--gp-badge-offset, 16px);
	right: var(--gp-badge-offset, 16px);
	left: auto;
}

.gp-cart--bottom-left .gp-card__cart--icon {
	top: auto;
	bottom: var(--gp-badge-offset, 16px);
	left: var(--gp-badge-offset, 16px);
	right: auto;
}

/*
 * Com o carrinho num canto de cima, os selos deixam de ocupar os dois cantos e
 * passam a empilhar no lado livre — senão o desconto ficaria embaixo do ícone.
 */
.gp-cart--top-right .gp-card__badges {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 6px;
	right: calc(var(--gp-badge-offset, 16px) + var(--gp-cart-box, 34px) + 8px);
}

.gp-cart--top-left .gp-card__badges {
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-start;
	gap: 6px;
	left: calc(var(--gp-badge-offset, 16px) + var(--gp-cart-box, 34px) + 8px);
}

.gp-cart--top-right .gp-badge--sale,
.gp-cart--top-left .gp-badge--sale {
	margin-left: 0;
}

/* O favoritar vai para baixo, para não brigar com o carrinho. */
.gp-cart--top-left .gp-card__wish {
	left: auto;
	right: var(--gp-badge-offset, 16px);
}

.gp-card__cart .button,
.gp-card__cart .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	font-family: var(--gp-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	border: 1px solid var(--gp-accent);
	border-radius: 999px;
	background-color: var(--gp-accent);
	color: var(--gp-white);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.gp-card__cart .button:hover {
	background-color: transparent;
	border-color: var(--gp-accent);
	color: var(--gp-accent);
}

.gp-card__cart .added_to_cart {
	margin-left: 8px;
	background: none;
	border-color: var(--gp-line);
	color: var(--gp-dark);
}

/*
 * Botão só com o ícone.
 *
 * O carrinho é desenhado pelo CSS (background-image), não pelo markup: temas de
 * loja costumam substituir o template do botão por um bloco inteiro de ações, e
 * qualquer tentativa de reescrever esse HTML falha em algum tema. Zerando o
 * corpo do texto e pintando o ícone no fundo, o resultado é o mesmo em todos —
 * inclusive em <input type="submit">, que não aceita conteúdo.
 *
 * Os !important são deliberados: este é um componente isolado disputando com
 * regras de tema desconhecidas, e sem eles o botão volta a virar um retângulo
 * colorido com o texto espremido.
 */
/*
 * O desenho vem de uma MÁSCARA, não de uma imagem de fundo. Com background-image
 * a cor do traço está congelada dentro do SVG e não há como o painel mudá-la;
 * com máscara, o que se vê é o background-color do próprio botão recortado no
 * formato do carrinho — então cor normal e cor de hover viram variáveis CSS que
 * os controles do Elementor conseguem escrever.
 */
.gp-grid-wrap .gp-card__cart--icon .button,
.gp-grid-wrap .gp-card__cart--icon .gp-cart-input {
	width: var(--gp-cart-box, 34px) !important;
	height: var(--gp-cart-box, 34px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	gap: 0;
	overflow: hidden;
	/* Colapsa qualquer rótulo que tenha sobrado no botão. */
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
	text-indent: -9999px;
	white-space: nowrap;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background-image: none !important;
	background-color: var(--gp-cart-color, #202020) !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.2l2.3 10.2a1.8 1.8 0 0 0 1.8 1.4h7.6a1.8 1.8 0 0 0 1.8-1.4l1.6-6.9H6.1'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='16.5' cy='19.5' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.2l2.3 10.2a1.8 1.8 0 0 0 1.8 1.4h7.6a1.8 1.8 0 0 0 1.8-1.4l1.6-6.9H6.1'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='16.5' cy='19.5' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: var(--gp-cart-icon, 20px) var(--gp-cart-icon, 20px);
	mask-size: var(--gp-cart-icon, 20px) var(--gp-cart-icon, 20px);
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.gp-grid-wrap .gp-card__cart--icon .button:hover,
.gp-grid-wrap .gp-card__cart--icon .button:focus-visible,
.gp-grid-wrap .gp-card__cart--icon .gp-cart-input:hover {
	background-color: var(--gp-cart-hover, #985630) !important;
	transform: scale(1.12);
}

/* Navegador sem suporte a máscara: volta para a imagem de fundo (cor fixa). */
@supports not ((-webkit-mask-image: url("#m")) or (mask-image: url("#m"))) {
	.gp-grid-wrap .gp-card__cart--icon .button,
	.gp-grid-wrap .gp-card__cart--icon .gp-cart-input {
		background-color: transparent !important;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202020' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.2l2.3 10.2a1.8 1.8 0 0 0 1.8 1.4h7.6a1.8 1.8 0 0 0 1.8-1.4l1.6-6.9H6.1'/%3E%3Ccircle cx='9.5' cy='19.5' r='1.4' fill='%23202020' stroke='none'/%3E%3Ccircle cx='16.5' cy='19.5' r='1.4' fill='%23202020' stroke='none'/%3E%3C/svg%3E") !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		background-size: var(--gp-cart-icon, 20px) var(--gp-cart-icon, 20px) !important;
	}
}

/* Ícones que o tema pendura junto do botão (ver, comparar, "carrinho
   adicionado") saem no modo só-ícone: é o que deixa o card limpo. */
.gp-card__cart--icon .added_to_cart,
.gp-card__cart--icon .compare,
.gp-card__cart--icon [class*="quick"],
.gp-card__cart--icon [class*="compare"],
.gp-card__cart--icon [class*="wishlist"] {
	display: none !important;
}

.gp-card__cart--icon .button::after,
.gp-card__cart--icon .button::before {
	content: none !important;
}

.gp-cart-icon {
	display: block;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.gp-cart-label {
	display: inline-block;
}

/* Texto só para leitor de tela (o rótulo original do botão). */
.gp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------------- Título do bloco */

/* Aqui sim a Playfair: título do bloco, corpo grande, respiro largo. */
.gp-block-title {
	margin: 0 0 40px;
	font-family: var(--gp-font-title);
	font-size: 30px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.25;
	color: var(--gp-dark);
}

@media (max-width: 767px) {
	.gp-block-title {
		font-size: 24px;
		margin-bottom: 28px;
	}
}

/* Em áreas de widget o espaço é estreito: encolhe o respiro padrão. */
.widget_grid_principal .gp-grid {
	--gp-gap-x: 16px;
	--gp-gap-y: 24px;
}

.widget_grid_principal .gp-card__title {
	font-size: 14px;
}

/* -------------------------------------------------- Abas e filtros */

.gp-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 32px;
	margin-bottom: 32px;
}

.gp-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * Abas, botão de filtro e opções do menu são <button>. Temas e o kit global do
 * Elementor costumam estilizar "button" — inclusive :focus, que pinta o botão
 * com a cor de destaque logo depois do clique (era isso o "FILTRO" marrom em
 * pílula). Por isso as propriedades visuais abaixo usam !important, e as
 * cores/medidas passam por variáveis CSS: os controles do painel escrevem nas
 * variáveis, então continua tudo customizável.
 */
.gp-grid-wrap .gp-tab {
	margin: 0;
	padding: var(--gp-tab-pad, 4px 0) !important;
	min-height: 0 !important;
	width: auto !important;
	border: 0 !important;
	border-bottom: 1px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--gp-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--gp-tab-c, #9a948c) !important;
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.gp-grid-wrap .gp-tab:hover,
.gp-grid-wrap .gp-tab:focus-visible {
	color: var(--gp-tab-hc, #202020) !important;
}

.gp-grid-wrap .gp-tab.is-active {
	color: var(--gp-tab-ac, #202020) !important;
	border-bottom-color: currentColor !important;
}

/* -------------------------------------------------- Filtro (menu suspenso) */

/* z-index cria um contexto de empilhamento próprio para o filtro: o menu
   aberto fica sempre acima dos cards (que usam z-index nas ações sobre a foto
   e transform no zoom) e de qualquer camada que o tema coloque no grid. */
.gp-filter {
	position: relative;
	z-index: 40;
	flex: 0 0 auto;
	margin-left: auto;
}

.gp-toolbar--filter-left .gp-filter {
	order: -1;
	margin-left: 0;
}

.gp-grid-wrap .gp-filter-toggle {
	display: inline-flex !important;
	align-items: center;
	gap: var(--gp-ft-gap, 8px);
	margin: 0;
	padding: var(--gp-ft-pad, 4px 0) !important;
	min-height: 0 !important;
	width: auto !important;
	font-family: var(--gp-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--gp-ft-c, #202020) !important;
	background-color: var(--gp-ft-bg, transparent) !important;
	background-image: none !important;
	border-style: solid !important;
	border-width: var(--gp-ft-bw, 0) !important;
	border-color: var(--gp-ft-bd, transparent) !important;
	border-radius: var(--gp-ft-r, 0) !important;
	box-shadow: none !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.gp-grid-wrap .gp-filter-toggle:hover,
.gp-grid-wrap .gp-filter-toggle:focus-visible,
.gp-grid-wrap .gp-filter-toggle[aria-expanded="true"] {
	color: var(--gp-ft-hc, #985630) !important;
	background-color: var(--gp-ft-hbg, var(--gp-ft-bg, transparent)) !important;
	border-color: var(--gp-ft-hbd, var(--gp-ft-bd, transparent)) !important;
}

.gp-filter-toggle__caret {
	display: block;
	flex: 0 0 auto;
	width: var(--gp-ft-caret, 9px);
	height: auto;
	transition: transform 0.25s ease;
}

.gp-filter-toggle[aria-expanded="true"] .gp-filter-toggle__caret {
	transform: rotate(180deg);
}

/* Ponto discreto ao lado do texto quando há algum filtro aplicado. */
.gp-filter-toggle.is-filtered .gp-filter-toggle__label::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: 8px;
	border-radius: 50%;
	background-color: var(--gp-ft-hc, #985630);
	vertical-align: middle;
	transform: translateY(-1px);
}

.gp-filter-menu {
	position: absolute;
	top: calc(100% + 14px);
	right: 0;
	z-index: 30;
	min-width: var(--gp-fm-w, 240px);
	padding: var(--gp-fm-pad, 22px 24px);
	background-color: var(--gp-fm-bg, #ffffff);
	border: 1px solid var(--gp-fm-bd, #e8e4df);
	border-radius: var(--gp-fm-r, 0);
	box-shadow: 0 20px 40px rgba(32, 32, 32, 0.06);
	text-align: left;
	animation: gp-menu-in 0.2s ease;
}

.gp-toolbar--filter-left .gp-filter-menu {
	right: auto;
	left: 0;
}

.gp-filter-menu[hidden] {
	display: none;
}

@keyframes gp-menu-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.gp-filter-menu__group + .gp-filter-menu__group {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--gp-fm-bd, #e8e4df);
}

.gp-filter-menu__title {
	margin: 0 0 10px;
	font-family: var(--gp-font-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--gp-fm-tc, #9a948c);
}

.gp-grid-wrap .gp-filter-menu__item {
	display: flex !important;
	align-items: center;
	width: 100% !important;
	min-height: 0 !important;
	margin: 0;
	padding: var(--gp-fm-ig, 6px) 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--gp-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-align: left;
	text-transform: uppercase;
	color: var(--gp-fm-ic, #202020) !important;
	cursor: pointer;
	transition: color 0.2s ease;
}

.gp-grid-wrap .gp-filter-menu__item:hover,
.gp-grid-wrap .gp-filter-menu__item:focus-visible {
	color: var(--gp-fm-ih, #985630) !important;
}

.gp-grid-wrap .gp-filter-menu__item.is-active {
	color: var(--gp-fm-ia, #985630) !important;
}

/* Traço fino que marca a opção escolhida. */
.gp-filter-menu__item::before {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 0;
	height: 1px;
	margin-right: 0;
	background-color: currentColor;
	transition: width 0.25s ease, margin 0.25s ease;
}

.gp-filter-menu__item.is-active::before {
	width: 14px;
	margin-right: 10px;
}

.gp-grid-wrap .gp-filter-menu__clear {
	display: inline-block;
	margin: 18px 0 0;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--gp-font-body);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gp-fm-tc, #9a948c) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	cursor: pointer;
}

.gp-grid-wrap .gp-filter-menu__clear:hover {
	color: var(--gp-fm-ih, #985630) !important;
}

.gp-grid-wrap .gp-filter-menu__clear[hidden] {
	display: none !important;
}

@media (max-width: 767px) {
	.gp-filter-menu {
		min-width: min(var(--gp-fm-w, 240px), calc(100vw - 32px));
	}
}

/* -------------------------------------------------- Navegação */

.gp-nav {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.gp-load-more {
	padding: 15px 44px;
	border: 1px solid var(--gp-dark);
	border-radius: 999px;
	background-color: transparent;
	color: var(--gp-dark);
	font-family: var(--gp-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.gp-load-more:hover {
	background-color: var(--gp-dark);
	border-color: var(--gp-dark);
	color: var(--gp-white);
}

.gp-load-more[hidden] {
	display: none;
}

/* CTA "Ver mais" — link para outro destino, abaixo de tudo. */
.gp-cta {
	display: flex;
	margin-top: 48px;
}

.gp-cta--left {
	justify-content: flex-start;
}

.gp-cta--center {
	justify-content: center;
}

.gp-cta--right {
	justify-content: flex-end;
}

.gp-cta__button {
	display: inline-block;
	padding: 15px 48px;
	border: 1px solid var(--gp-dark);
	border-radius: 999px;
	background-color: transparent;
	color: var(--gp-dark);
	font-family: var(--gp-font-body);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.gp-cta__button:hover,
.gp-cta__button:focus-visible {
	background-color: var(--gp-dark);
	border-color: var(--gp-dark);
	color: var(--gp-white);
	text-decoration: none;
}

/* Com "carregar mais" logo acima, o CTA respira menos para não afastar demais. */
.gp-nav + .gp-cta {
	margin-top: 28px;
}

.gp-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.gp-page {
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--gp-line);
	background: none;
	font-family: var(--gp-font-body);
	font-size: 12px;
	color: var(--gp-dark);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.gp-page:hover:not(:disabled) {
	border-color: var(--gp-dark);
}

.gp-page.is-active {
	background-color: var(--gp-dark);
	border-color: var(--gp-dark);
	color: var(--gp-white);
}

.gp-page:disabled {
	opacity: 0.4;
	cursor: default;
}

.gp-page-dots {
	padding: 0 4px;
	color: var(--gp-muted);
}

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

.gp-status {
	min-height: 0;
	text-align: center;
}

.gp-empty {
	margin: 32px 0;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--gp-muted);
}

.gp-editor-notice {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-left: 3px solid var(--gp-accent);
	background-color: var(--gp-soft);
	font-size: 12px;
	color: var(--gp-dark);
}

.gp-grid-wrap.is-loading .gp-grid {
	opacity: 0.4;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.gp-grid-wrap.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border: 2px solid var(--gp-line);
	border-top-color: var(--gp-accent);
	border-radius: 50%;
	animation: gp-spin 0.7s linear infinite;
	z-index: 5;
}

@keyframes gp-spin {
	to {
		transform: rotate(360deg);
	}
}

.gp-error {
	margin: 24px 0;
	font-size: 13px;
	color: #b3261e;
}

/* -------------------------------------------------- Defesa contra o tema
 *
 * Temas de loja carregam regras como
 *   .woocommerce ul.products li.product img { width:100%; height:auto }
 * que têm especificidade maior que as classes deste componente e derrubam o
 * dimensionamento da foto — a imagem volta à altura natural, encosta no topo do
 * quadro e abre um vão enorme até o nome. O mesmo vale para o sublinhado e o
 * corpo do texto dos links.
 *
 * Este bloco reafirma só o essencial, sempre escopado em .gp-grid-wrap para não
 * vazar para o resto do site.
 */

.gp-grid-wrap .gp-card__media {
	background-color: var(--gp-soft);
}

/* Seletor propositalmente longo: temas usam coisas como
   ".woocommerce ul.products li.product img" (0,3,1) com !important, e uma
   classe simples perde essa disputa mesmo carregando depois. */
.gp-grid-wrap .gp-card .gp-card__media img.gp-card__img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: var(--gp-img-pad, 12%) !important;
	object-fit: var(--gp-fit, contain) !important;
	object-position: center !important;
	border-radius: 0;
}

.gp-grid-wrap a,
.gp-grid-wrap .gp-card__link,
.gp-grid-wrap .gp-card__title {
	text-decoration: none !important;
	box-shadow: none !important;
}

.gp-grid-wrap .gp-card .gp-card__title {
	/* !important na família também: muitos temas declaram
	   "h1,h2,h3 { font-family: ... !important }". */
	font-family: var(--gp-font-body) !important;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase !important;
	line-height: 1.6;
}

.gp-grid-wrap .gp-card__price {
	font-size: 12px;
	letter-spacing: 0.1em;
}

.gp-grid-wrap .gp-badge {
	background-image: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

/*
 * Botões de texto (carregar mais, ver mais, compra com texto) e paginação.
 *
 * Mesmo motivo das abas e do filtro: o :focus/:hover de "button" do tema
 * vencia as regras normais e pintava o botão depois do clique. As cores vêm de
 * variáveis — definidas aqui como padrão e sobrescritas pelos controles de
 * cada botão no painel — e são aplicadas com !important.
 */
.gp-load-more,
.gp-cta__button {
	--gp-btn-c: #202020;
	--gp-btn-bg: transparent;
	--gp-btn-bd: #202020;
	--gp-btn-hc: #ffffff;
	--gp-btn-hbg: #202020;
	--gp-btn-hbd: #202020;
}

.gp-card__cart--text .button,
.gp-card__cart--icon_text .button {
	--gp-btn-c: #ffffff;
	--gp-btn-bg: var(--gp-accent);
	--gp-btn-bd: var(--gp-accent);
	--gp-btn-hc: var(--gp-accent);
	--gp-btn-hbg: transparent;
	--gp-btn-hbd: var(--gp-accent);
}

.gp-grid-wrap :is(.gp-load-more, .gp-cta__button, .gp-card__cart--text .button, .gp-card__cart--icon_text .button) {
	color: var(--gp-btn-c) !important;
	background-color: var(--gp-btn-bg) !important;
	background-image: none !important;
	border-color: var(--gp-btn-bd) !important;
	box-shadow: none !important;
	text-decoration: none !important;
}

.gp-grid-wrap :is(.gp-load-more, .gp-cta__button, .gp-card__cart--text .button, .gp-card__cart--icon_text .button):is(:hover, :focus-visible) {
	color: var(--gp-btn-hc) !important;
	background-color: var(--gp-btn-hbg) !important;
	border-color: var(--gp-btn-hbd) !important;
}

.gp-grid-wrap .gp-page {
	padding: 0 10px !important;
	color: var(--gp-pg-c, #202020) !important;
	background-color: var(--gp-pg-bg, transparent) !important;
	background-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--gp-pg-bd, #e8e4df) !important;
	box-shadow: none !important;
}

.gp-grid-wrap .gp-page:is(:hover, :focus-visible):not(:disabled):not(.is-active) {
	color: var(--gp-pg-hc, #202020) !important;
	background-color: var(--gp-pg-hbg, transparent) !important;
	border-color: var(--gp-pg-hbd, #202020) !important;
}

.gp-grid-wrap .gp-page.is-active {
	color: var(--gp-pg-ac, #ffffff) !important;
	background-color: var(--gp-pg-abg, #202020) !important;
	border-color: var(--gp-pg-abd, #202020) !important;
}

/* -------------------------------------------------- Acessibilidade */

.gp-card__link:focus-visible,
.gp-tab:focus-visible,
.gp-page:focus-visible,
.gp-load-more:focus-visible,
.gp-card__wish:focus-visible,
.gp-filter-toggle:focus-visible {
	outline: 2px solid var(--gp-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.gp-grid-wrap * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}