/* =============================================================================
   css/paginas/template_produto.css — só nas páginas de produto
   -----------------------------------------------------------------------------
   A chamada da pesquisa com cupom (.pp-cupom), que o template_produto.php
   mostra enquanto houver campanha aberta para o produto. Mesmo desenho do
   cupom da página /pesquisa: a parte do desconto separada por um picotado.
   ============================================================================= */

.pp-cupom {
	display: grid;
	grid-template-columns: auto 1fr;
	margin: 16px 0;
	border: 1px solid var(--lk-verde-borda, #c4e7bb);
	border-radius: 12px;
	overflow: hidden;
	background: var(--lk-branco, #fff);
}
.pp-cupom-valor {
	display: flex;
	align-items: center;
	padding: 16px 18px;
	background: var(--lk-verde-forte, #298611);
	color: #fff;
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1;
}
.pp-cupom-corpo {
	padding: 14px 18px 16px;
	border-left: 2px dashed var(--lk-verde-borda, #c4e7bb);
}
.pp-cupom .pp-cupom-titulo {
	margin: 0 0 4px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lk-texto, #1c2320);
}
.pp-cupom .pp-cupom-texto {
	margin: 0 0 12px;
	font-size: .9rem;
	color: var(--lk-texto-3, #5a665e);
}
.pp-cupom .pp-cupom-botao {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 8px;
	background: var(--lk-verde-forte, #298611);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.pp-cupom .pp-cupom-botao:hover,
.pp-cupom .pp-cupom-botao:focus { background: var(--lk-verde-escuro, #1f6c0b); color: #fff; text-decoration: none; }
.pp-cupom .pp-cupom-botao:focus-visible { outline: 2px solid var(--lk-verde-forte, #298611); outline-offset: 2px; }

@media (max-width: 480px) {
	.pp-cupom { grid-template-columns: 1fr; }
	.pp-cupom-valor { padding: 10px 18px; font-size: 1.5rem; }
	.pp-cupom-corpo { border-left: 0; border-top: 2px dashed var(--lk-verde-borda, #c4e7bb); }
	.pp-cupom .pp-cupom-botao { display: block; text-align: center; }
}