/* ============================================================================
   Ecolux Lighting — Product Carousel (v1.5.1)
   ----------------------------------------------------------------------------
   Khối "Dòng sản phẩm nổi bật" trên trang chủ: nhiều HÀNG cuộn ngang, thẻ rút
   gọn (ảnh + tên). CSS thuần + scroll-snap, KHÔNG thư viện ngoài.

   v1.5.1: phóng to khung ảnh mini → 4:3 (từ 360/220), object-fit contain (ảnh
   thật, không cắt cụt/méo) + cover (placeholder), gap dùng biến chung, hover
   phóng ảnh nhẹ. Số cột 5/3/2 GIỮ NGUYÊN.

   v1.21.0: gỡ hàng badge từng thêm ở v1.10.0 dưới tên trong thẻ mini — theo
   yêu cầu, thẻ mini CHỈ còn Tiêu đề + ảnh. .product-card-mini__body giờ chỉ bọc
   tên. Thẻ vẫn đều cao nhờ flex stretch của track; ảnh (con đầu) luôn thẳng hàng.
   Số cột 5/3/2 GIỮ NGUYÊN.

   Chỉ nạp trên trang chủ (inc/enqueue.php). Dùng semantic token nên tự đúng
   dark mode. Số cột lộ ra: mobile 2 · tablet 3 · desktop 5.
   ============================================================================ */

.product-carousels {
	display: flex;
	flex-direction: column;
	gap: var(--space-10);
	margin-top: var(--space-8);
	margin-bottom: var(--space-10);
}

.product-carousel {
	width: 100%;
	/* Khoảng cách giữa các thẻ. Dùng CHUNG cho gap của track và công thức
	   flex-basis của item để math 5/3/2 luôn khớp — đổi 1 chỗ là đủ. */
	--carousel-gap: var(--space-5);
}

.product-carousel__title {
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	color: var(--color-text-heading);
	margin: 0 0 var(--space-4);
	line-height: 1.3;
}

/* Viewport là mốc định vị cho 2 mũi tên đặt đè lên 2 mép track. */
.product-carousel__viewport {
	position: relative;
}

/* ── Track cuộn ngang (scroll-snap) ─────────────────────────────────────── */
.product-carousel__track {
	list-style: none;
	margin: 0;
	padding: var(--space-2) 0;
	display: flex;
	gap: var(--carousel-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox — ẩn thanh cuộn, dùng vuốt/mũi tên. */
}

.product-carousel__track::-webkit-scrollbar {
	display: none; /* WebKit — ẩn thanh cuộn. */
}

.product-carousel__track:focus-visible {
	outline: 2px solid var(--color-border-focus);
	outline-offset: 2px;
	border-radius: var(--radius-md);
}

/* ── Item: mobile mặc định = 2 cột ──────────────────────────────────────── */
.product-carousel__item {
	flex: 0 0 calc((100% - var(--carousel-gap)) / 2);
	max-width: calc((100% - var(--carousel-gap)) / 2);
	scroll-snap-align: start;
}

/* Tablet: 3 cột (gap ×2). */
@media (min-width: 768px) {
	.product-carousel__item {
		flex-basis: calc((100% - 2 * var(--carousel-gap)) / 3);
		max-width: calc((100% - 2 * var(--carousel-gap)) / 3);
	}
}

/* Desktop: 5 cột (gap ×4). */
@media (min-width: 1024px) {
	.product-carousel__item {
		flex-basis: calc((100% - 4 * var(--carousel-gap)) / 5);
		max-width: calc((100% - 4 * var(--carousel-gap)) / 5);
	}
}

/* ── Thẻ rút gọn: cả thẻ là 1 link ──────────────────────────────────────── */
.product-card-mini {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--color-surface);
	border: 1px solid var(--color-border-subtle);
	border-radius: var(--radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--shadow-card);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.product-card-mini:hover,
.product-card-mini:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card-hover);
	border-color: var(--color-primary);
}

.product-card-mini:focus-visible {
	outline: 2px solid var(--color-border-focus);
	outline-offset: 2px;
}

/* Khung ảnh phóng to: 4:3 (cao hơn hẳn 360/220 cũ) để sản phẩm nổi bật hơn.
   Nền = --color-surface (đồng màu thân thẻ) nên phần letterbox của contain hoà
   vào thẻ, ảnh sản phẩm nền trắng như "nổi" trên thẻ. Tự đúng dark mode. */
.product-card-mini__image-wrap {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--color-surface);
	overflow: hidden;
}

/* contain: HIỆN TRỌN sản phẩm — không cắt cụt chân đèn, không méo. Đa số ảnh
   catalog landscape/vuông nên lấp đầy chiều ngang; ảnh dọc thì canh giữa. */
.product-card-mini__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform var(--transition-base);
}

/* Placeholder SVG đối xứng, tâm là bóng đèn → cover lấp đầy khung 4:3 gọn gàng,
   không để lộ dải letterbox, vẫn canh tâm. */
.product-card-mini__image--placeholder {
	object-fit: cover;
}

/* Rê chuột: phóng ảnh nhẹ trong khung (overflow hidden clip mép) tạo "ấn tượng".
   Không phụ thuộc hover trên mobile — đây chỉ là lớp tăng cường. */
.product-card-mini:hover .product-card-mini__image,
.product-card-mini:focus-visible .product-card-mini__image {
	transform: scale(1.04);
}

/* Thân thẻ (v1.21.0): chỉ còn tên sản phẩm — GIỮ NGUYÊN padding cũ
   (space-3/space-4). Trước v1.21.0 còn bọc thêm hàng badge (v1.10.0, đã gỡ);
   flex-column giữ nguyên để không phải đổi cấu trúc thẻ. Là con flex thứ 2 của
   thẻ, KHÔNG grow → thẻ pack từ trên xuống, ảnh (con đầu) luôn thẳng hàng; thẻ
   thiếu chữ ngắn chỉ dư khoảng trống ở ĐÁY (flex stretch giữ mọi thẻ cùng cao). */
.product-card-mini__body {
	display: flex;
	flex-direction: column;
	padding: var(--space-3) var(--space-4);
}

.product-card-mini__name {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-text-heading);
	line-height: 1.4;
}

/* ── Mũi tên điều hướng ─────────────────────────────────────────────────── */
.product-carousel__arrow {
	position: absolute;
	top: calc((100% - var(--space-4)) / 2);
	transform: translateY(-50%);
	z-index: var(--z-raised);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-full);
	background: var(--color-surface);
	color: var(--color-text-heading);
	box-shadow: var(--shadow-md);
	cursor: pointer;
	transition: background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast), border-color var(--transition-fast);
}

.product-carousel__arrow--prev {
	left: calc(-1 * var(--space-2));
}

.product-carousel__arrow--next {
	right: calc(-1 * var(--space-2));
}

.product-carousel__arrow:hover,
.product-carousel__arrow:focus-visible {
	background: var(--color-primary);
	color: var(--color-primary-on);
	border-color: var(--color-primary);
}

.product-carousel__arrow:focus-visible {
	outline: 2px solid var(--color-border-focus);
	outline-offset: 2px;
}

/* Hết chỗ cuộn ở đầu/cuối → mờ + vô hiệu hoá (JS gán thuộc tính disabled). */
.product-carousel__arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

/* Không đủ SP để cuộn (JS thêm .product-carousel--static) → ẩn hẳn 2 mũi tên. */
.product-carousel--static .product-carousel__arrow {
	display: none;
}

/* Mobile & tablet nhỏ: ẩn mũi tên, người dùng VUỐT tay. */
@media (max-width: 767.98px) {
	.product-carousel__arrow {
		display: none;
	}
}

/* Tôn trọng prefers-reduced-motion: tắt cuộn mượt + hover nâng thẻ. */
@media (prefers-reduced-motion: reduce) {
	.product-carousel__track {
		scroll-behavior: auto;
	}
	.product-card-mini,
	.product-card-mini__image {
		transition: none;
	}
	.product-card-mini:hover,
	.product-card-mini:focus-visible {
		transform: none;
	}
	.product-card-mini:hover .product-card-mini__image,
	.product-card-mini:focus-visible .product-card-mini__image {
		transform: none;
	}
}