/**
 * DS Elements — Lưới sản phẩm
 *
 * Ảnh giữ tỉ lệ bằng aspect-ratio nên mọi thẻ cao bằng nhau kể cả khi ảnh gốc
 * mỗi cái một khổ. Tên sản phẩm hai dòng thì thẻ vẫn thẳng hàng nhờ phần thân
 * dùng flex-direction: column và chấm màu đẩy xuống đáy bằng margin-top: auto.
 */

.elementor-widget-ds-product-grid {
	width: 100%;
	min-width: 0;
}

.ds-pg {
	width: 100%;
	min-width: 0;

	--ds-pg-cols: 4;
	--ds-pg-gap: var(--ds-space-6);
	--ds-pg-ratio: 1;
}

.ds-pg *,
.ds-pg *::before,
.ds-pg *::after {
	box-sizing: border-box;
}

.ds-pg__grid {
	display: grid;
	grid-template-columns: repeat(var(--ds-pg-cols), minmax(0, 1fr));
	gap: var(--ds-pg-gap);
}

/* Đang tải ngầm: làm mờ và chặn bấm, nhưng giữ nguyên chiều cao khối để trang
   không nhảy. Có độ trễ trước khi mờ — phản hồi nhanh thì không kịp thấy gì
   nhấp nháy, chậm thì mới báo là đang chạy. */
.ds-pg.is-loading .ds-pg__grid {
	opacity: .45;
	pointer-events: none;
	transition: opacity 120ms ease 150ms;
}

.ds-pg__empty {
	margin: 0;
	padding: var(--ds-space-8) 0;
	color: var(--ds-color-muted);
	font-size: var(--ds-fs-body);
	text-align: center;
}

/* --- Thẻ ---------------------------------------------------------------- */

.ds-pg__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;

	background: var(--ds-pg-card-bg, var(--ds-color-white));
	border: 1px solid var(--ds-pg-card-border, var(--ds-color-border));
	border-radius: var(--ds-pg-card-radius, var(--ds-radius-md));
	transition: box-shadow var(--ds-transition), transform var(--ds-transition);
}

.ds-pg__card:hover {
	transform: translateY(-2px);
	box-shadow: var(--ds-shadow-raised);
}

.ds-pg__media {
	position: relative;
	display: block;
	background: var(--ds-color-surface);
}

/* Tỉ lệ đặt thẳng lên <img> kèm height:auto, KHÔNG đặt trên khung bọc.
   Khung bọc là con của thẻ flex-column: min-height:auto của flex item lấy
   chiều cao tự nhiên của ảnh, nên ảnh dọc hơn tỉ lệ đẩy khung cao theo (đo:
   ảnh 1:4 trong khung 1:1 ra 200×800). height:auto phải tự khai — <img> của
   WordPress mang thuộc tính height, không có dòng này thì thuộc tính thắng
   aspect-ratio (ra 200×400); site thật chỉ thoát nhờ reset của theme. */
.ds-pg__media img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: var(--ds-pg-ratio);
	object-fit: cover;
}

.ds-pg__badge {
	position: absolute;
	top: var(--ds-space-3);
	left: var(--ds-space-3);
	padding: var(--ds-space-1) var(--ds-space-3);

	background: var(--ds-pg-badge-bg, var(--ds-color-brand-light));
	color: var(--ds-pg-badge-color, var(--ds-color-white));
	border-radius: var(--ds-radius-sm);

	font-size: var(--ds-fs-topbar);
	font-weight: var(--ds-fw-bold);
	line-height: 1.6;
	letter-spacing: var(--ds-ls-button);
	text-transform: uppercase;
}

/* Nút yêu thích nằm ngoài thẻ <a> của ảnh — lồng nút trong link là HTML sai và
   trình duyệt sẽ tự gỡ ra, làm hỏng cả hai. */
.ds-pg__wish {
	position: absolute;
	top: var(--ds-space-3);
	right: var(--ds-space-3);
	z-index: 2;

	width: 34px;
	height: 34px;
	padding: 0;
	display: grid;
	place-items: center;

	background: var(--ds-color-white);
	color: var(--ds-color-brand);
	border: 0;
	border-radius: var(--ds-radius-pill);
	box-shadow: var(--ds-shadow-card);
	cursor: pointer;
	transition: color var(--ds-transition);
}

.ds-pg__wish:hover {
	color: var(--ds-color-brand-light);
}

.ds-pg__wish svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* --- Phần chữ ----------------------------------------------------------- */

.ds-pg__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-1);
	padding: var(--ds-space-4);
	min-width: 0;
}

.ds-pg__title {
	margin: 0;
	font-size: var(--ds-fs-body);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-tight);
}

.ds-pg__title a {
	color: var(--ds-pg-title-color, var(--ds-color-brand));
	text-decoration: none;
}

.ds-pg__title a:hover {
	color: var(--ds-color-brand-light);
}

.ds-pg__subtitle {
	margin: 0;
	color: var(--ds-pg-subtitle-color, var(--ds-color-muted));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

.ds-pg__price {
	font-weight: var(--ds-fw-semibold);
}

/* --- Chấm màu ----------------------------------------------------------- */

.ds-pg__swatches {
	margin: var(--ds-space-3) 0 0;
	padding: 0;
	list-style: none;

	/* Đẩy xuống đáy để mọi thẻ có hàng chấm thẳng hàng nhau. */
	margin-top: auto;
	padding-top: var(--ds-space-3);

	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-space-2);
}

.ds-pg__swatch {
	width: 14px;
	height: 14px;
	border-radius: var(--ds-radius-pill);
	border: 1px solid var(--ds-color-border);
	background: var(--ds-color-surface);
}

/* --- Phân trang --------------------------------------------------------- */

.ds-pg__pagination {
	margin-top: var(--ds-space-8);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--ds-space-2);
}

.ds-pg__pagination .page-numbers {
	min-width: 38px;
	padding: var(--ds-space-2) var(--ds-space-3);
	display: inline-flex;
	align-items: center;
	justify-content: center;

	background: var(--ds-color-white);
	color: var(--ds-color-body);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-sm);

	font-size: var(--ds-fs-small);
	text-decoration: none;
}

.ds-pg__pagination .page-numbers:hover,
.ds-pg__pagination .page-numbers.current {
	background: var(--ds-color-brand);
	border-color: var(--ds-color-brand);
	color: var(--ds-color-white);
}

/* --- Màn nhỏ ------------------------------------------------------------ */

@media (max-width: 767px) {
	.ds-pg {
		--ds-pg-gap: var(--ds-space-4);
	}

	.ds-pg__body {
		padding: var(--ds-space-3);
	}
}