/* Chico Compre Junto — front. Author: Chico Dev */

.ccj-ofertas { display: block; }

.ccj-bloco {
	margin: 16px 0;
	padding: 14px;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
	background: #fafafa;
	font-family: inherit;
}

.ccj-titulo {
	margin: 0 0 2px;
	font-size: 18px;
	font-weight: 700;
	color: #2e555c;
}

.ccj-subtitulo {
	margin: 0 0 14px;
	font-size: 16px;
	color: #545454;
	line-height: 1.45;
}

/* ---- Card do carrinho (v1.5.0) ----
 *
 * Desktop: tudo numa linha — miniatura, nome com precos, botao a direita. A
 * faixa se dissolve e o valor economizado some, porque o selo de percentual ao
 * lado do preco ja diz a mesma coisa e ha espaco para ele.
 *
 * Celular: o card vira coluna e a faixa aparece de verdade, com fundo, com o
 * botao colado ao valor economizado — a acao nasce junto do motivo. Ali nao ha
 * largura para tudo numa linha sem espremer o nome.
 */
.ccj-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	margin-bottom: 10px;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 12px;
}

.ccj-card .ccj-topo{
	display:flex;
	align-items:center;
	gap:12px;
	flex:1 1 auto;
	min-width:0;
}

.ccj-card .ccj-faixa{
	display:flex;
	align-items:center;
	gap:10px;
	flex:0 0 auto;
}

/* No desktop o valor economizado seria redundante com o selo de percentual. */
.ccj-card .ccj-economia{display:none;}

.ccj-card:last-of-type { margin-bottom: 0; }

.ccj-card--ok { border-color: #2e555c; }

.ccj-thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	overflow: hidden;
	border-radius: 8px;
	background: #eef2f3;
}

.ccj-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

.ccj-info { flex: 1 1 auto; min-width: 0; }

.ccj-nome {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: #1f1f1f;
}

.ccj-precos {
	margin: 3px 0 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	line-height: 1.2;
}

.ccj-precos del {
	font-size: 16px;
	color: #6e6e6e;
}

.ccj-precos ins {
	font-size: 21px;
	font-weight: 700;
	color: #2e555c;
	text-decoration: none;
}

.ccj-selo {
	font-size: 14px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	background: #e4eced;
	color: #1c383e;
}

.ccj-status {
	margin: 4px 0 0;
	font-size: 16px;
	font-weight: 600;
	color: #2e555c;
}

.ccj-acao { flex: 0 0 auto; }

.ccj-btn {
	cursor: pointer;
	font-family: inherit;
	border-radius: 8px;
	transition: opacity .15s ease;
}

.ccj-btn--add {
	padding: 13px 22px;
	font-size: 17px;
	font-weight: 700;
	color: #fff !important;
	background: #2e555c !important;
	border: none;
	min-height: 52px;
}

.ccj-btn--add:hover,
.ccj-btn--add:focus {
	color: #fff !important;
	background: #23434a !important;
	opacity: .95;
}

.ccj-btn--remover {
	width: 48px;
	height: 48px;
	font-size: 26px;
	line-height: 1;
	color: #7a7a7a !important;
	background: transparent !important;
	border: 1px solid #d8d8d8;
}

.ccj-btn--remover:hover {
	color: #a32d2d !important;
	border-color: #a32d2d;
	background: transparent !important;
}

.ccj-btn[disabled] { opacity: .55; cursor: default; }

.ccj-aviso {
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.45;
	color: #922828;
	min-height: 0;
}

.ccj-aviso:empty { display: none; }

.ccj-card.is-carregando { opacity: .6; }

/* Mobile (v1.4.0): a regra anterior quebrava a linha e jogava o botao para
   baixo, entao cada card virava duas linhas. Numa lista de tres ofertas isso
   empilha meia tela e obriga a rolar so para passar pelo bloco. Aqui tudo cabe
   numa linha so: miniatura menor, precos lado a lado e botao compacto. */
@media (max-width: 600px) {
	.ccj-card {
		display: block;
		padding: 12px 12px 0;
		margin-bottom: 10px;
		overflow: hidden;
	}
	.ccj-card .ccj-topo { gap: 11px; align-items: center; }
	.ccj-thumb { flex: 0 0 58px; width: 58px; height: 58px; }
	.ccj-info { min-width: 0; }
	.ccj-nome {
		font-size: 15.5px;
		line-height: 1.3;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.ccj-precos { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: 3px 0 0; }
	.ccj-precos del { font-size: 14px; }
	.ccj-precos ins { font-size: 18px; }
	.ccj-condicao { font-size: 14px; margin: 3px 0 0; }
	.ccj-status { font-size: 14.5px; margin: 3px 0 0; }

	/* O percentual sai: no celular quem manda e o valor em reais, na faixa. */
	.ccj-selo { display: none; }

	.ccj-card .ccj-faixa {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin: 11px -12px 0;
		padding: 9px 12px;
		background: #eef5f2;
	}
	.ccj-card--ok .ccj-faixa { background: #eef1f2; }
	.ccj-card .ccj-economia {
		display: block;
		font-size: 15px;
		font-weight: 700;
		color: #1D6F4F;
		white-space: nowrap;
	}
	.ccj-acao { flex: 0 0 auto; }
	.ccj-btn { width: auto; padding: 9px 15px; font-size: 14.5px; white-space: nowrap; min-height: 42px; }
	.ccj-btn--add { min-height: 42px; }
	.ccj-btn--remover { padding: 9px 13px; }
	.ccj-titulo { font-size: 17px; }
	.ccj-subtitulo { font-size: 14px; }
}

.ccj-condicao {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 600;
	color: #2e555c;
}


/* ---- Bloco na pagina de produto (v1.4.4) ----
 *
 * Na pagina de produto o compre junto e oferta, nao decisao: quem nao pegar
 * agora recebe a mesma oferta no carrinho. Por isso a acao aqui e um link, e
 * nao um botao — um botao grande disputaria atencao com o "adicionar ao
 * carrinho", que e o que importa nessa tela.
 *
 * ATENCAO AO !important NAS MARGENS
 * O Divi aplica margin em <p> com regras ancoradas em #page-container, que tem
 * especificidade de ID e ganha de qualquer classe nossa. Sem marcar as margens
 * como important, cada linha do card ganhava 1em de respiro herdado e o bloco
 * ficava esparramado — nome, preco e economia flutuando soltos. Marcamos SO as
 * margens, que sao as propriedades em disputa.
 */
.ccj-bloco--produto{
	margin-top:18px;
	padding:16px;
}

.ccj-bloco--produto .ccj-titulo{
	margin:0 0 12px !important;
	font-size:19px;
	line-height:1.3;
}

/* Reset das margens herdadas: cada elemento recebe a sua logo abaixo. */
.ccj-card--produto p{margin:0 !important;padding:0;}

.ccj-card--produto{
	display:block;
	align-items:stretch;
	padding:15px;
	margin-bottom:12px;
}

.ccj-card--produto .ccj-topo{
	display:flex;
	align-items:flex-start;
	gap:14px;
}

.ccj-card--produto .ccj-info{min-width:0;flex:1 1 auto;}

/* Nome inteiro: sem line-clamp e sem reticencias. */
.ccj-card--produto .ccj-nome{
	display:block;
	-webkit-line-clamp:none;
	overflow:visible;
	white-space:normal;
	font-size:17px;
	line-height:1.3;
	margin:0 !important;
}

.ccj-card--produto .ccj-condicao{
	font-size:15px;
	font-weight:600;
	margin:4px 0 0 !important;
	opacity:.8;
}

.ccj-card--produto .ccj-precos{
	display:flex;
	align-items:baseline;
	flex-wrap:wrap;
	gap:8px;
	margin:6px 0 0 !important;
	line-height:1.15;
}
.ccj-card--produto .ccj-precos del{font-size:16px;color:#6e6e6e;}
.ccj-card--produto .ccj-precos ins{font-size:22px;font-weight:700;text-decoration:none;color:#2e555c;}
.ccj-card--produto .ccj-selo{font-size:14px;padding:2px 9px;white-space:nowrap;}

/* O desconto em reais diz mais que o percentual: "economize R$ 100" e uma
   quantia que a pessoa consegue imaginar, "20%" e uma conta a fazer. O
   percentual fica como etiqueta ao lado do preco, sem roubar a linha. */
.ccj-card--produto .ccj-economia{
	margin:4px 0 0 !important;
	font-size:16px;
	font-weight:700;
	line-height:1.25;
	color:#1D6F4F;
	white-space:nowrap;
}

.ccj-link-par{
	display:block;
	width:100%;
	margin:12px 0 0 !important;
	padding:11px 0 0;
	border:0;
	border-top:1px solid rgba(0,0,0,.08);
	background:none;
	font-family:inherit;
	font-size:16.5px;
	font-weight:700;
	color:#2e555c;
	text-align:center;
	text-decoration:underline;
	text-underline-offset:3px;
	cursor:pointer;
	min-height:44px;
}
.ccj-link-par:hover{color:#1a3a40;}
.ccj-link-par:focus-visible{outline:2px solid #2e555c;outline-offset:2px;}
.ccj-link-par[disabled]{opacity:.6;cursor:default;text-decoration:none;}
.ccj-card--produto.ccj-card--ok .ccj-link-par{text-decoration:none;opacity:.7;cursor:default;}

/* A foto precisa ter peso proximo ao do texto: pequena demais, sobra fundo
   branco em volta e o card parece vazio de um lado. */
.ccj-card--produto .ccj-thumb{
	flex:0 0 88px;
	width:88px;
	height:88px;
}

@media (max-width:480px){
	.ccj-bloco--produto{padding:14px;}
	.ccj-bloco--produto .ccj-titulo{font-size:18px;margin-bottom:10px !important;}
	.ccj-card--produto{padding:13px;margin-bottom:10px;}
	.ccj-card--produto .ccj-topo{gap:12px;}
	.ccj-card--produto .ccj-thumb{flex:0 0 76px;width:76px;height:76px;}
	.ccj-card--produto .ccj-nome{font-size:16.5px;}
	.ccj-card--produto .ccj-condicao{font-size:14.5px;}
	.ccj-card--produto .ccj-precos{gap:7px;}
	.ccj-card--produto .ccj-precos del{font-size:15px;}
	.ccj-card--produto .ccj-precos ins{font-size:21px;}
	.ccj-card--produto .ccj-selo{font-size:13px;}
	.ccj-card--produto .ccj-economia{font-size:15.5px;}
	.ccj-link-par{font-size:16px;}
}