/**
 * Thẻ sản phẩm + popup Quick View - dùng chung cho trang chủ, trang shop
 * và trang chuyên mục sản phẩm.
 *
 * Phần CSS riêng của các section trang chủ (slider, lưới, tiêu đề, hiệu ứng
 * cuộn) vẫn nằm trong template-home.php.
 */

/* ==========================================================================
   DESIGN TOKEN
   Đặt ở :root để trang shop/chuyên mục dùng được, không chỉ riêng trang chủ.
   Kế thừa biến của Blocksy -> đổi màu/font trong Customizer là đổi theo.
   ========================================================================== */
:root {
	--hm-max:        var(--theme-normal-container-max-width, 1290px);
	--hm-gutter:     clamp(1rem, 4vw, 2.5rem);

	--hm-accent:     var(--theme-palette-color-1, #2872fa);
	--hm-accent-2:   var(--theme-palette-color-2, #1559d6);
	--hm-ink:        var(--theme-text-color, #16202c);
	--hm-ink-soft:   color-mix(in srgb, var(--hm-ink) 62%, transparent);
	--hm-surface:    var(--theme-palette-color-7, #f6f8fb);
	--hm-line:       color-mix(in srgb, var(--hm-ink) 12%, transparent);

	--hm-radius:     14px;
	--hm-radius-lg:  22px;
	--hm-shadow:     0 1px 2px rgb(16 24 40 / 5%), 0 14px 36px -14px rgb(16 24 40 / 18%);
	--hm-shadow-lg:  0 2px 4px rgb(16 24 40 / 5%), 0 28px 60px -20px rgb(16 24 40 / 26%);

	--hm-space-y:    clamp(3rem, 7vw, 6rem);
	--hm-ease:       cubic-bezier(.16, 1, .3, 1);
}

/* Fallback cho trình duyệt chưa hỗ trợ color-mix() */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	:root {
		--hm-ink-soft: rgb(85 100 120);
		--hm-line: rgb(16 24 40 / 12%);
	}
}

/* ==========================================================================
   THÀNH PHẦN DÙNG LẠI TRONG POPUP
   ========================================================================== */
.hm__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	padding: .875em 1.75em;
	border: 1px solid transparent;
	border-radius: calc(var(--hm-radius) - 4px);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .2s var(--hm-ease), box-shadow .2s var(--hm-ease), background-color .2s var(--hm-ease);
}

.hm__btn--primary {
	background: var(--hm-accent);
	color: #fff;
	box-shadow: var(--hm-shadow);
}

.hm__btn--primary:hover {
	background: var(--hm-accent-2);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--hm-shadow-lg);
}

/* Nội dung từ field WYSIWYG / mô tả ngắn sản phẩm */
.hm__rte { line-height: 1.75; color: var(--hm-ink-soft); }
.hm__rte > :first-child { margin-block-start: 0; }
.hm__rte > :last-child  { margin-block-end: 0; }
.hm__rte :where(h2, h3, h4) { color: var(--hm-ink); line-height: 1.3; }
.hm__rte img { height: auto; border-radius: var(--hm-radius); }
.hm__rte :where(ul, ol) { padding-inline-start: 1.25em; }
.hm__rte li + li { margin-block-start: .4em; }

/* ==========================================================================
   THẺ SẢN PHẨM
   ========================================================================== */
.hm-product {
	position: relative;
	display: flex;
	block-size: 100%;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--hm-line);
	border-radius: var(--hm-radius);
	background: #fff;
	color: var(--hm-ink);
	transition: transform .3s var(--hm-ease), box-shadow .3s var(--hm-ease), border-color .3s var(--hm-ease);
}

.hm-product:hover {
	transform: translateY(-5px);
	border-color: color-mix(in srgb, var(--hm-accent) 45%, transparent);
	box-shadow: var(--hm-shadow-lg);
}

.hm-product__thumb {
	position: relative;
	overflow: hidden;
	background: var(--hm-surface);
}

.hm-product__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
}

.hm-product__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform .5s var(--hm-ease);
}

.hm-product:hover .hm-product__media img { transform: scale(1.05); }

/* Huy hiệu % giảm giá - dạng cờ đuôi nheo ở góc trên bên trái. */
.hm-product__badge {
	position: absolute;
	inset-block-start: .75rem;
	inset-inline-start: 0;
	z-index: 1;
	padding: .3125rem 1.05rem .3125rem .5rem;
	background: var(--hm-accent);
	color: #fff;
	font-size: .8125rem;
	font-weight: 800;
	line-height: 1.15;
	box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--hm-accent) 80%, transparent);
	clip-path: polygon(0 0, 100% 0, calc(100% - .4rem) 50%, 100% 100%, 0 100%);
}

.hm-product__oos {
	position: absolute;
	inset-block-start: .75rem;
	inset-inline-end: .75rem;
	z-index: 1;
	padding: .25rem .5rem;
	border-radius: 999px;
	background: rgb(9 14 22 / 82%);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.hm-product__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .375rem;
	padding: .875rem .875rem 1rem;
	text-align: center;
}

.hm-product__cat {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--hm-ink-soft);
	text-decoration: none;
}

.hm-product__cat:hover { color: var(--hm-accent); }

.hm-product__title {
	margin: 0;
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.45;
}

.hm-product__title a {
	color: var(--hm-accent);
	text-decoration: none;
	/* Cắt tiêu đề dài ở dòng thứ 3 để các thẻ trên cùng hàng thẳng nhau. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hm-product__title a:hover { text-decoration: underline; }

.hm-product__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: .5rem;
	/* Đẩy giá xuống đáy thẻ -> các thẻ cùng hàng có giá thẳng nhau dù tên dài
	   ngắn khác nhau. */
	margin: auto 0 0;
	padding-block-start: .25rem;
	font-size: 1.125rem;
	font-weight: 800;
}

.hm-product__price del,
.hm-product__price del .amount {
	color: var(--hm-ink-soft);
	font-size: .9375rem;
	font-weight: 500;
	text-decoration: line-through;
}

.hm-product__price ins,
.hm-product__price > .amount {
	background: none;
	color: #d92d20;
	text-decoration: none;
}

/* Woo bọc giá gốc/giá sale trong .sale-price -> cho nó nằm ngang như giá thường. */
.hm-product__price .sale-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: .5rem;
}

/* --- Dải ảnh phụ --- */
.hm-product__swatches {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .375rem;
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
}

.hm-product__swatches img {
	display: block;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	object-fit: cover;
	border: 1px solid var(--hm-line);
	border-radius: 6px;
	transition: border-color .2s var(--hm-ease), transform .2s var(--hm-ease);
}

.hm-product__swatches a:hover img {
	border-color: var(--hm-accent);
	transform: translateY(-2px);
}

/* --- Nút Quick View trượt lên khi rê chuột --- */
.hm-product__quickview {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 2;
	padding-block: .6875rem;
	border: 0;
	background: var(--hm-accent);
	color: #fff;
	font-family: inherit;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	translate: 0 100%;
	transition: translate .3s var(--hm-ease), background-color .2s var(--hm-ease);
}

.hm-product:hover .hm-product__quickview,
.hm-product__quickview:focus-visible {
	translate: 0 0;
}

.hm-product__quickview:hover { background: var(--hm-accent-2); }

/* Không có chuột (mobile/tablet) thì hiện sẵn, vì không rê vào được. */
@media (hover: none) {
	.hm-product__quickview { translate: 0 0; }
}

/* ==========================================================================
   TRANG SHOP / CHUYÊN MỤC
   Thẻ sản phẩm nằm trong <li class="product"> của WooCommerce. Giữ nguyên
   lưới của Blocksy, chỉ dọn phần trang trí mặc định đi.
   ========================================================================== */
.woocommerce ul.products li.product,
ul.products li.product {
	display: flex;
	flex-direction: column;
	padding: 0;
	border: 0;
	background: none;
	text-align: start;
}

ul.products li.product > .hm-product { flex: 1 1 auto; }

/* Blocksy vẽ badge SALE riêng; thẻ của mình đã có badge nên bỏ cái kia đi
   để không hiện 2 badge chồng nhau. */
ul.products li.product > .onsale,
ul.products li.product > figure { display: none; }

/* ==========================================================================
   POPUP QUICK VIEW
   ========================================================================== */
.hm-qv {
	inline-size: min(60rem, calc(100vw - 2rem));
	max-block-size: min(46rem, calc(100dvh - 2rem));
	padding: 0;
	border: 0;
	border-radius: var(--hm-radius-lg);
	background: #fff;
	color: var(--hm-ink);
	box-shadow: var(--hm-shadow-lg);
	overflow: visible;
}

.hm-qv::backdrop {
	background: rgb(12 18 28 / 58%);
	backdrop-filter: blur(3px);
}

/* Hiệu ứng mở */
.hm-qv[open] { animation: hm-qv-in .28s var(--hm-ease); }
.hm-qv[open]::backdrop { animation: hm-qv-fade .28s var(--hm-ease); }

@keyframes hm-qv-in {
	from { opacity: 0; transform: translateY(12px) scale(.97); }
	to   { opacity: 1; transform: none; }
}

@keyframes hm-qv-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.hm-qv__content {
	max-block-size: min(46rem, calc(100dvh - 2rem));
	overflow-y: auto;
	border-radius: inherit;
}

.hm-qv__close {
	position: absolute;
	inset-block-start: .5rem;
	inset-inline-end: .5rem;
	z-index: 3;
	display: grid;
	place-items: center;
	inline-size: 2.25rem;
	block-size: 2.25rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 92%);
	box-shadow: 0 2px 10px rgb(16 24 40 / 18%);
	color: var(--hm-ink);
	cursor: pointer;
	transition: background-color .2s var(--hm-ease), transform .2s var(--hm-ease);
}

.hm-qv__close:hover { background: #fff; transform: rotate(90deg); }
.hm-qv__close svg { inline-size: 1.125rem; block-size: 1.125rem; }

.hm-qv__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2.5vw, 2rem);
	padding: clamp(1rem, 2.5vw, 1.75rem);
}

@media (min-width: 48rem) {
	.hm-qv__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
}

.hm-qv__media {
	overflow: hidden;
	border-radius: var(--hm-radius);
	background: var(--hm-surface);
}

.hm-qv__media img { display: block; inline-size: 100%; block-size: auto; }

.hm-qv__info { display: flex; flex-direction: column; gap: .75rem; }

.hm-qv__title {
	margin: 0;
	font-size: clamp(1.25rem, 1.1rem + .6vw, 1.75rem);
	font-weight: 700;
	line-height: 1.25;
}

.hm-qv__price { font-size: 1.125rem; }
.hm-qv__desc { font-size: .9375rem; }

.hm-qv__form {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
	margin-block-start: .25rem;
}

.hm-qv__qty input {
	inline-size: 5rem;
	padding: .8em .75em;
	border: 1px solid var(--hm-line);
	border-radius: calc(var(--hm-radius) - 4px);
	font: inherit;
	text-align: center;
	color: inherit;
	background: #fff;
}

.hm-qv__submit { flex: 1 1 12rem; }
.hm-qv__submit[disabled] { opacity: .65; cursor: wait; }

.hm-qv__feedback {
	margin: 0;
	min-block-size: 1.25rem;
	font-size: .875rem;
	font-weight: 600;
	color: #1a7f37;
}

.hm-qv__feedback.is-error { color: #b42318; }

.hm-qv__oos {
	margin: 0;
	font-weight: 600;
	color: #b42318;
}

.hm-qv__more {
	align-self: flex-start;
	font-size: .875rem;
	color: var(--hm-ink-soft);
	text-underline-offset: 3px;
}

.hm-qv__more:hover { color: var(--hm-accent); }

@media (prefers-reduced-motion: reduce) {
	.hm-qv[open],
	.hm-qv[open]::backdrop { animation: none; }
	.hm-qv__close:hover { transform: none; }

	.hm-product,
	.hm-product__media img,
	.hm-product__quickview,
	.hm-product__swatches img { transition: none; }

	.hm-product:hover { transform: none; }
	.hm-product:hover .hm-product__media img { transform: none; }
}