/* ============================================================================
   card-produto.css — CARD DE PRODUTO reutilizável (global, todo o projeto).
   Componente: views/produtos/componentes/_card-produto.php
   Cor do tema herdada de var(--mc-cor)/.btn-primary (cada loja tem a sua).
   ============================================================================ */

.card-produto {
	display: flex; flex-direction: column; height: 100%;
	background: #fff; border: 1px solid #e4e6ea; border-radius: 12px; overflow: hidden;
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
/* hover: leve elevação + zoom na imagem (reforça que é clicável) */
.card-produto:hover {
	box-shadow: 0 8px 22px rgba(0,0,0,.10); border-color: #d6dae0; transform: translateY(-2px);
}

/* ícone de lista de desejos (coração) — canto superior direito, sobre a imagem.
   O seletor combina .card-produto-fav.add-fav p/ vencer o CSS legado de .add-fav
   (que o esconde por padrão e só revela no :hover do .product — container que não usamos). */
.card-produto { position: relative; }
.card-produto-fav.add-fav,
.card-produto-fav {
	position: absolute; top: 10px; right: 10px; left: auto; bottom: auto; z-index: 2;
	width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #fff; border: 1px solid #e4e6ea; color: #b0b4bc;
	cursor: pointer; transition: opacity .15s ease, color .15s ease, border-color .15s ease;
	/* escondido por padrão; aparece no hover do card (padrão de mercado) */
	opacity: 0; visibility: hidden;
}
/* aparece ao passar o mouse no card; ou se já estiver favoritado (.active) */
.card-produto:hover .card-produto-fav,
.card-produto-fav.active { opacity: 1; visibility: visible; }
.card-produto-fav.add-fav:hover,
.card-produto-fav:hover { color: #c0392b; border-color: #e0c0bb; background: #fff; }
.card-produto-fav.add-fav.active,
.card-produto-fav.active { color: #c0392b; border-color: #e0c0bb; background: #fff; }
.card-produto-fav .glyphicon { font-size: 14px; }
/* sem hover (touch/mobile): o coração fica sempre visível, senão seria inacessível */
@media (hover: none) {
	.card-produto-fav.add-fav,
	.card-produto-fav { opacity: 1; visibility: visible; }
}

/* imagem com ALTURA FIXA (não aspect-ratio, que varia com a largura da coluna e fazia
   os cards destoarem). Altura igual em todos → cards uniformes. */
.card-produto-img {
	position: relative; display: block; background: #fff; padding: 14px;
	height: 220px; overflow: hidden;
}
.card-produto-img img {
	width: 100%; height: 100%; object-fit: contain;
	transition: transform .25s ease;
}
.card-produto:hover .card-produto-img img { transform: scale(1.05); }

/* badges (NOVO / PROMOÇÃO) no canto superior esquerdo */
.card-produto-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 1; }
.card-badge {
	display: inline-flex; align-items: center; align-self: flex-start;
	font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
	padding: 4px 9px; border-radius: 20px; line-height: 1;
}
.card-badge-novo  { background: #e8f6ee; color: #1e8e4f; }
.card-badge-promo { background: var(--mc-cor, #2c2f36); color: #fff; }

/* corpo: nome / unidades / preço / botão — botão sempre na base (mt:auto) */
.card-produto-corpo { display: flex; flex-direction: column; flex: 1 1 auto; padding: 4px 14px 14px; }

.card-produto-nome {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	height: 38px;                     /* altura FIXA (2 linhas) → todos os cards iguais */
	color: #6b7180; font-size: 13.5px; font-weight: 500; line-height: 1.35; text-decoration: none;
}
.card-produto-nome:hover { color: #3a3f49; text-decoration: underline; }
/* "( X Unidades )" aparece só em alguns produtos; altura fixa reservada p/ não deslocar
   o preço/botão nos cards que não têm (mantém todos uniformes). */
.card-produto-unidades { display: block; height: 16px; margin-top: 4px; font-size: 12px; color: #6b7180; }

/* preço — protagonista; de/por com hierarquia. min-height reservado p/ alinhar o botão
   (aceita variações: "A partir de", de/por, "Total"). */
/* altura FIXA (não min): comporta a maior variação ("A partir de"+valor, ou valor+"Total")
   em 2 linhas → todos os cards ficam com a mesma altura total, sem desalinhar o grid. */
.card-produto-preco { margin: 8px 0 12px; height: 48px; overflow: hidden; }
.card-produto-preco .card-preco,
.card-produto-preco .card-preco-promo { font-size: 19px; font-weight: 800; color: #1f2937; }
.card-produto-preco .card-preco-de {
	margin-left: 8px; font-size: 13px; font-weight: 500; color: #9aa0ab; text-decoration: line-through;
}
.card-produto-preco .card-preco-prefixo { display: block; font-size: 12px; color: #6b7180; margin-bottom: 1px; }
.card-produto-preco .card-preco-total { display: block; font-size: 12px; color: #9aa0ab; margin-top: 2px; }

/* botão — CTA na cor do tema, colado à base */
.card-produto-btn {
	margin-top: auto;
	display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
	box-sizing: border-box; white-space: nowrap;
	background: var(--mc-cor, #2c2f36); border: 0; border-radius: 8px;
	color: #fff; font-size: 13px; font-weight: 700; padding: 11px 12px;
	text-decoration: none; cursor: pointer; transition: filter .15s ease;
}
.card-produto-btn:hover { filter: brightness(.92); color: #fff; text-decoration: none; }
.card-produto-btn .glyphicon { font-size: 12px; top: 1px; }
/* indisponível — botão fantasma cinza (mesma altura do CTA) */
.card-produto-btn-off {
	background: #f2f3f5; border: 1px solid #e4e6ea; color: #9aa0ab; cursor: not-allowed;
}
.card-produto-btn-off:hover { filter: none; color: #9aa0ab; }
.card-produto-btn-off .fa { font-size: 12px; }
/* compra bloqueada (só vitrine) — botão outline neutro "Ver produto" */
.card-produto-btn-ver {
	background: #fff; border: 1.5px solid #d6dae0; color: #3a3f49;
}
.card-produto-btn-ver:hover { background: #f7f8fa; color: #3a3f49; filter: none; }