/**
 * Thẻ sản phẩm trên lưới.
 *
 * Nạp ở mọi trang vì widget Products của Elementor có thể đặt bất kỳ đâu, kể cả
 * khối sản phẩm liên quan trong trang sản phẩm.
 */

/* ---------- Ảnh + hover đổi ảnh ---------- */

.cgnt-thumb {
	position: relative;
	overflow: hidden;
	border-radius: var(--cgnt-radius-md);
	background: var(--cgnt-bg-soft);
}

.cgnt-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.cgnt-thumb__hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--cgnt-transition);
}

.cgnt-thumb--hoverable:hover .cgnt-thumb__hover,
.cgnt-thumb--hoverable:focus-within .cgnt-thumb__hover {
	opacity: 1;
}

/* Thiết bị cảm ứng không có trạng thái hover; giữ ảnh thứ hai ẩn hẳn để không
   nhấp nháy khi khách chạm vào thẻ. */
@media (hover: none) {
	.cgnt-thumb__hover {
		display: none;
	}
}

/* ---------- Badge phần trăm giảm ---------- */

.cgnt-badge {
	position: absolute;
	top: var(--cgnt-space-2);
	left: var(--cgnt-space-2);
	z-index: 2;
	padding: var(--cgnt-space-1) var(--cgnt-space-2);
	border-radius: var(--cgnt-radius-sm);
	background: var(--cgnt-sale);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	min-height: 0;
	min-width: 0;
}

/* ---------- Dãy chấm màu ---------- */

.cgnt-swatches {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cgnt-space-2);
	margin: var(--cgnt-space-2) 0 0;
	padding: 0;
	list-style: none;
}

.cgnt-swatches__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cgnt-swatches__dot {
	display: block;
	width: var(--cgnt-dot-size);
	height: var(--cgnt-dot-size);
	border-radius: var(--cgnt-radius-pill);

	/* Viền là bắt buộc, không phải trang trí: thư viện màu có Trắng #ffffff và
	   nhiều tông kem rất sáng, không viền thì chấm tàng hình trên nền trắng. */
	border: 1px solid var(--cgnt-border);
	background: var(--cgnt-dot, transparent);
	transition: transform var(--cgnt-transition), box-shadow var(--cgnt-transition);
}

.cgnt-swatches__dot:hover,
.cgnt-swatches__dot:focus-visible {
	transform: scale(1.18);
	box-shadow: 0 0 0 1px var(--cgnt-border-strong);
	outline: none;
}

.cgnt-swatches__more {
	margin: 0;
	list-style: none;
	font-size: 12px;
	line-height: 1;
	color: var(--cgnt-text-muted);
}

.cgnt-swatches__more a {
	color: inherit;
	text-decoration: none;
}

.cgnt-swatches__more a:hover {
	color: var(--cgnt-text);
	text-decoration: underline;
}