/**
 * Neuronika Variation Cards — estilos da vitrine.
 * Tudo prefixado com .nvc- para não vazar para o tema/Woo.
 * Cores em variáveis (troca em um lugar só).
 *
 * Grade: 4 colunas no desktop, 3 no tablet, 2 no mobile.
 * Estilo "meio-termo": limpo como o site, com selo Oferta e preço de/por visíveis.
 *
 * v1.0.7 — borda da carta alinhada ao PADRÃO DA LOJA (pinte-loja.css):
 *          --nvc-border #e2e8f0 (cinza quase invisível) -> #8a94a3 (mesmo
 *          cinza do --ptl-border), e o hover da borda passa a usar o azul da
 *          marca (--nvc-brand), igual ao card da loja/categoria. Só cor.
 */

/* Seção da vitrine (título próprio + grade OU estado vazio) — v1.0.11 */
.nvc-ofertas {
	--nvc-ink: #2c3946;      /* grafite dos títulos */
	--nvc-brand: #4080c0;    /* azul da marca Pinte */
	--nvc-muted: #64748b;
	margin: 16px 0;
}

.nvc-ofertas__titulo {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--nvc-brand);   /* título em azul da marca */
	margin: 0 0 4px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--nvc-brand);
	display: inline-block;
}

/* Estado vazio: "preparando ofertas incríveis" — bonito, centralizado */
.nvc-ofertas__vazia {
	margin: 16px 0;
	padding: 36px 24px;
	text-align: center;
	background: linear-gradient(180deg, #f3f8fd 0%, #eaf2fb 100%);
	border: 1px solid #cfe0f3;
	border-radius: var(--nvc-radius, 12px);
}

.nvc-ofertas__vazia p {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--nvc-brand);
	letter-spacing: 0.01em;
}

@media (max-width: 600px) {
	.nvc-ofertas__titulo { font-size: 19px; }
	.nvc-ofertas__vazia  { padding: 28px 18px; }
	.nvc-ofertas__vazia p { font-size: 16px; }
}

.nvc-cards {
	--nvc-border: #8a94a3;   /* cinza da borda — mesmo padrão da Loja (pinte-loja.css --ptl-border) */
	--nvc-radius: 12px;
	--nvc-accent: #1f9d57;   /* verde "oferta/estoque" */
	--nvc-ink: #2c3946;      /* grafite dos títulos */
	--nvc-brand: #4080c0;    /* azul da marca Pinte (botões) */
	--nvc-brand-hover: #356aa0;
	--nvc-muted: #64748b;    /* preço antigo riscado */

	display: grid;
	grid-template-columns: repeat(4, 1fr); /* DESKTOP: 4 colunas fixas */
	gap: 20px;
	margin: 16px 0;
}

/* Tablet: 3 colunas */
@media (max-width: 1024px) {
	.nvc-cards {
		grid-template-columns: repeat(3, 1fr);
		gap: 16px;
	}
}

/* Celular: 2 colunas */
@media (max-width: 600px) {
	.nvc-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

.nvc-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--nvc-border); /* borda sutil — o cliente gosta de borda */
	border-radius: var(--nvc-radius);
	padding: 14px;
	background: #fff;
	transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
	height: 100%; /* cards da mesma linha com altura igual */
}

.nvc-card:hover {
	border-color: var(--nvc-brand);        /* azul da marca no hover — igual à Loja */
	box-shadow: 0 6px 20px rgba(44, 57, 70, 0.12);
	transform: translateY(-2px);
}

.nvc-card__link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.nvc-card__media {
	position: relative;
	margin-bottom: 12px;
	aspect-ratio: 1 / 1;            /* imagem sempre quadrada, cards alinhados */
	background: #f8fafc;
	border-radius: 8px;
	overflow: hidden;
}

.nvc-card__img,
.nvc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;           /* mostra a lata inteira, sem cortar */
	display: block;
}

.nvc-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--nvc-accent);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 6px;
	z-index: 1;
}

.nvc-card__title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 8px;
	color: var(--nvc-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;         /* até 3 linhas — nome do produto + litragem cabem */
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 4.05em;            /* reserva 3 linhas, alinha os preços abaixo */
}

.nvc-card__price {
	font-size: 15px;
	line-height: 1.3;
	margin-bottom: 12px;
	margin-top: auto;              /* empurra o preço para baixo, alinhado */
}

/* Preço antigo riscado + preço atual em destaque (vêm do Woo em price_html) */
.nvc-card__price del {
	color: var(--nvc-muted);
	font-size: 13px;
	margin-right: 4px;
}

.nvc-card__price ins {
	text-decoration: none;
	font-weight: 700;
	color: var(--nvc-ink);
}

.nvc-card__btn {
	display: block;
	text-align: center;
	background: var(--nvc-brand);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	padding: 9px 12px;
	border-radius: 8px;
	transition: background 0.15s ease;
}

.nvc-card__btn:hover {
	background: var(--nvc-brand-hover);
	color: #fff;
}

.nvc-card__btn--out {
	background: #e2e8f0;
	color: var(--nvc-muted);
	cursor: not-allowed;
}

.nvc-card__btn--out:hover {
	background: #e2e8f0;
	color: var(--nvc-muted);
}