/**
 * Thẻ hàng của Flatsome — trạng thái rê chuột.
 *
 * Áp cho mọi lưới hàng do Flatsome dựng: trang chủ, danh mục nhánh tấm ốp,
 * đồ nội thất, keo, và mọi khối `[ux_products]` cắm trong UX Builder. Lưới
 * của nhánh Thiết bị vệ sinh không đi qua đây vì nó có thẻ hàng riêng
 * `.ak-tb-the`, dựng trong `danh-muc-thiet-bi.php`.
 *
 * Bản mặc định của Flatsome cho nút "Xem nhanh" chiếm nguyên một dải ngang
 * đáy ảnh, nền đỏ đặc, chữ trắng in hoa. Dải đó rộng bằng cả thẻ nên nặng nề,
 * và đỏ đặc ở đây phá tỉ lệ đỏ của trang: một lưới mười hai mặt hàng là mười
 * hai vệt đỏ nhảy ra cùng lúc.
 *
 * Nay rê chuột thì ảnh phóng nhẹ, một lớp tối mỏng dâng từ đáy, và "Xem nhanh"
 * thu về một viên thuốc trắng chữ đậm nổi giữa. Xem QĐ-30.
 *
 * Nạp sau `flatsome-shop.css` nên không phải nống độ ưu tiên bằng `!important`,
 * trừ đúng hai chỗ chính Flatsome đã dùng `!important` trước.
 *
 * @package Flatsome\Child
 */

/* ---------- Ảnh phóng nhẹ ---------- */

.product-small .box-image {
	overflow: hidden;
}

.product-small .box-image img {
	transition: transform var(--ak-chuyen-anh, .6s) var(--ak-cong, ease);
}

.product-small.has-hover:hover .box-image img {
	transform: scale(1.04);
}

/* ---------- Lớp tối mỏng dâng từ đáy ---------- */

/*
 * Đặt trên chính khối ảnh chứ không thêm thẻ, vì thẻ hàng do Flatsome dựng,
 * theme con không chen được HTML vào giữa.
 */
.product-small .box-image::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 45%;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(to top, rgba(15, 17, 20, .45), transparent);
	transition: opacity var(--ak-chuyen, .3s);
}

.product-small.has-hover:hover .box-image::after {
	opacity: 1;
}

/* ---------- Nút Xem nhanh ---------- */

.product-small .box-image .grid-tools {
	left: 0;
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0;
	padding: 0 0 var(--ak-cach-3) !important;
	background: none;
}

.product-small .box-image .grid-tools a {
	width: auto;
	padding: var(--ak-cach-2) var(--ak-cach-4);
	border-radius: var(--ak-goc-tron, 99px);
	background-color: var(--ak-mau-trang, #fff);
	color: var(--ak-mau-muc, #0f1114);
	font-size: var(--ak-co-be);
	font-weight: var(--ak-dam-manh, 700);
	letter-spacing: var(--ak-gian-vua);
	opacity: 1;
	box-shadow: var(--ak-bong-1, 0 2px 8px rgba(0, 0, 0, .12));
	transform: translateY(6px);
	transition: transform var(--ak-chuyen, .3s), background-color var(--ak-chuyen-nhanh, .18s), color var(--ak-chuyen-nhanh, .18s);
}

.product-small .box-image .grid-tools a + a {
	margin-left: var(--ak-cach-1);
	border-left: 0;
}

.product-small.has-hover:hover .box-image .grid-tools a {
	transform: none;
}

.product-small .box-image .grid-tools a:hover,
.product-small .box-image .grid-tools a:focus-visible {
	background-color: var(--ak-mau-do-dam, #c9151b);
	color: var(--ak-mau-trang, #fff);
}

/* ---------- Cả thẻ nhấc lên một chút ---------- */

.product-small .col-inner {
	transition: transform var(--ak-chuyen, .3s);
}

.product-small.has-hover:hover .col-inner {
	transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.product-small .box-image img,
	.product-small .box-image .grid-tools a,
	.product-small .col-inner {
		transition: none;
		transform: none;
	}

	.product-small.has-hover:hover .box-image img,
	.product-small.has-hover:hover .col-inner {
		transform: none;
	}
}