/**
 * Product Card - Flatsome Child (SMT)
 * -----------------------------------
 * CSS cho card sản phẩm dùng chung toàn site.
 * Markup tương ứng: template-parts/product/card.php
 *
 * Phong cách: ảnh full khung card nhưng object-fit: contain (không cắt mép),
 * có padding nhẹ; nút thêm vào giỏ chỉ hiện khi hover.
 *
 * Tiền tố class: .smt-pcard
 */

/* ============ Biến (token) riêng cho card ============ */
:root {
	--smt-pcard-radius: 12px;
	--smt-pcard-border: #eee;
	--smt-pcard-bg: #fff;
	--smt-pcard-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
	--smt-pcard-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.1);
	--smt-pcard-primary: #1e73be;
	--smt-pcard-sale: #e7402b;
	--smt-pcard-muted: #9a9a9a;
	--smt-pcard-title: #2a2a2a;
	--smt-pcard-transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ============ Đồng đều chiều cao card trong mọi vòng lặp ============ */
/* Hàng sản phẩm (shop, danh mục, related, upsell...) kéo giãn các cột bằng nhau.
 * LƯU Ý: Flatsome render "Related/Up-sells" bằng repeater -> ra <div class="row">
 *        (KHÔNG phải <ul class="products">), nên phải nhắm cả ".related .row". */
ul.products,
.products.row,
.row.large-columns-4,
.related .row,
.up-sells .row,
.related-products-wrapper .row {
	align-items: stretch;
}

/* Cột chứa card phải là flex để inner (height:100%) giãn hết chiều cao cột.
 * Nhắm cả ".col" bên trong related/up-sells để card slider/grid đều cao. */
.smt-pcard.col,
.smt-pcard.product,
.related .col.smt-pcard,
.up-sells .col.smt-pcard {
	display: flex;
	flex-direction: column;
}

/* Một số layout Flatsome bọc thêm .col-inner -> cũng cần giãn hết chiều cao. */
.smt-pcard > .col-inner {
	height: 100%;
}


/* ============ Khung card ============ */
.smt-pcard .smt-pcard__inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	flex: 1 1 auto;
	background: var(--smt-pcard-bg);
	border: 1px solid var(--smt-pcard-border);
	border-radius: var(--smt-pcard-radius);
	overflow: hidden;
	transition: transform var(--smt-pcard-transition), box-shadow var(--smt-pcard-transition), border-color var(--smt-pcard-transition);
	box-shadow: var(--smt-pcard-shadow);
}


.smt-pcard:hover .smt-pcard__inner {
	transform: translateY(-4px);
	box-shadow: var(--smt-pcard-shadow-hover);
	border-color: transparent;
}

/* ============ Khu vực ảnh ============ */
.smt-pcard__media {
	position: relative;
	background: #fff;
	isolation: isolate;
}

.smt-pcard__image-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1 / 1;
	padding: 18px 14px;
	box-sizing: border-box;
	background: #fff;
	line-height: 0;
}

.smt-pcard__image-link img,
.smt-pcard__image-link .smt-pcard__img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
}

/* Flatsome .has-hover có thể zoom/scale ảnh -> gây cắt mép trên card SMT */
.smt-pcard.has-hover .smt-pcard__image-link img,
.smt-pcard.has-hover:hover .smt-pcard__image-link img {
	transform: none !important;
	filter: none !important;
	opacity: 1 !important;
}

/* ============ Badge (nhãn) ============ */
.smt-pcard__badges {
	position: absolute;
	top: 10px;
	left: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
}

.smt-pcard__badge {
	display: inline-block;
	padding: 3px 9px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	border-radius: 999px;
	letter-spacing: 0.3px;
}

.smt-pcard__badge--sale {
	background: var(--smt-pcard-sale);
}

.smt-pcard__badge--oos {
	background: var(--smt-pcard-muted);
}

.smt-pcard__badge--order {
	background: #0a7a3e;
}

.smt-pcard__btn--cart {
	flex: 1 1 auto;
}

/* ============ Công cụ hover (wishlist, quick view) ============ */
.smt-pcard__tools {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
	opacity: 0;
	transform: translateX(10px);
	transition: opacity var(--smt-pcard-transition), transform var(--smt-pcard-transition);
}

.smt-pcard:hover .smt-pcard__tools {
	opacity: 1;
	transform: translateX(0);
}

.smt-pcard__tools .button {
	margin: 0;
}

/* ============ Nội dung (căn giữa, gọn) ============ */
.smt-pcard__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	align-items: center;
	padding: 12px 14px 16px;
	text-align: center;
}

.smt-pcard__cat {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--smt-pcard-muted);
	margin-bottom: 5px;
}

.smt-pcard__title {
	font-size: 15px;
	line-height: 1.35;
	margin: 0 0 6px;
	font-weight: 600;
	/* Giới hạn 2 dòng + giữ chiều cao 2 dòng để giá luôn thẳng hàng */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(15px * 1.35 * 2);
}

.smt-pcard__title a {

	color: var(--smt-pcard-title);
	transition: color var(--smt-pcard-transition);
}

.smt-pcard__title a:hover {
	color: var(--smt-pcard-primary);
}

.smt-pcard__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-bottom: 6px;
}

.smt-pcard__rating .star-rating {
	font-size: 12px;
	margin: 0;
}

.smt-pcard__rating-count {
	font-size: 12px;
	color: var(--smt-pcard-muted);
}

.smt-pcard__price {
	font-size: 16px;
	font-weight: 700;
	color: var(--smt-pcard-title);
	/* auto = đẩy giá (và nút bên dưới) xuống đáy card -> mọi card thẳng hàng */
	margin-top: auto;
	padding-top: 4px;
}

.smt-pcard__price del {
	color: var(--smt-pcard-muted);
	font-weight: 400;
	font-size: 13px;
	margin-right: 6px;
}

.smt-pcard__price ins {
	text-decoration: none;
	color: var(--smt-pcard-sale);
}

/* ============ Nút hành động (luôn hiển thị) ============ */
.smt-pcard__actions {
	width: 100%;
	max-height: none;
	opacity: 1;
	overflow: visible;
	margin-top: 10px;
}

/* Legacy class (nếu còn sót markup cũ) */
.smt-pcard__action {
	width: 100%;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--smt-pcard-transition), opacity var(--smt-pcard-transition), margin-top var(--smt-pcard-transition);
}

.smt-pcard:hover .smt-pcard__action {
	max-height: 60px;
	opacity: 1;
	margin-top: 10px;
}

.smt-pcard__action .button {
	display: block;
	width: 100%;
	margin: 0;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
}

.smt-pcard__action .added_to_cart {
	display: block;
	width: 100%;
	margin-top: 6px;
	text-align: center;
	font-size: 12px;
}

/* ============ Responsive ============ */
@media only screen and (max-width: 48em) {
	.smt-pcard__image-link {
		padding: 14px 10px;
	}

	.smt-pcard__body {
		padding: 10px 10px 14px;
	}

	.smt-pcard__title {
		font-size: 13px;
	}

	.smt-pcard__price {
		font-size: 14px;
	}

	.smt-pcard__tools {
		opacity: 1;
		transform: none;
	}
}