/*
 * Trang danh mục và trang chi tiết sản phẩm.
 * Phụ thuộc: tokens.css, base.css, components.css.
 */

/* ===============================================================
 * TRANG DANH MỤC
 * =============================================================== */

.shop-hero {
	padding-block: var(--sp-7) var(--sp-6);
	border-bottom: 1px solid var(--c-line-soft);
}

/*
 * KHÔNG đặt max-width ở đây.
 *
 * Markup là `<div class="container shop-hero__inner">` — hai class trên
 * CÙNG một phần tử. `.container` cho `max-width: 1320px` và
 * `margin-inline: auto`; nếu class này đặt thêm `max-width: 68ch` thì nó
 * thắng theo thứ tự nguồn, phần tử co lại còn 600px rồi bị margin auto
 * kéo vào giữa trang. Tiêu đề "Cửa hàng" thụt vào 300px không rõ lý do.
 *
 * Giới hạn bề rộng đặt lên đúng đoạn mô tả, không đặt lên khung.
 */
.shop-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.shop-hero__inner > p {
	max-width: var(--measure);
}

.shop-hero__count {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	font-variant-numeric: tabular-nums;
}

.shop-layout {
	display: grid;
	grid-template-columns: 264px 1fr;
	gap: var(--sp-8);
	align-items: start;
	padding-block: var(--sp-7) var(--sp-section);
}

/*
 * Không có bộ lọc thì bỏ luôn cột sidebar.
 *
 * Sidebar chỉ render khi có taxonomy để lọc; site chưa import sản phẩm thì
 * nó vắng mặt, và lưới hai cột đẩy toàn bộ nội dung vào ô 264px. `:has()`
 * xử lý ngay trong CSS, không phải truyền cờ từ PHP sang.
 */
.shop-layout:not(:has(.filters)) {
	grid-template-columns: 1fr;
}

@media (max-width: 960px) {
	.shop-layout {
		grid-template-columns: 1fr;
		gap: var(--sp-5);
	}
}

/* --------------------------------------------------------------
 * BỘ LỌC
 * -------------------------------------------------------------- */

.filters {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	position: sticky;
	top: calc(var(--header-h) + var(--sp-4));
	max-height: calc(100vh - var(--header-h) - var(--sp-8));
	overflow-y: auto;
	padding-right: var(--sp-2);
}

.filters__head {
	display: none;
}

/*
 * Trên di động chính `.filters` BIẾN THÀNH drawer, thay vì dựng một bản
 * markup thứ hai cho mobile. Một bản markup duy nhất nghĩa là thêm bộ lọc
 * mới chỉ phải sửa một chỗ, và bộ lọc trên hai kích thước không bao giờ
 * lệch nhau.
 *
 * Class `.is-open` do đúng hàm initDrawers() trong main.js gắn — không cần
 * viết thêm JS riêng.
 */
@media (max-width: 960px) {
	.filters {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: var(--z-drawer);
		width: min(340px, 88vw);
		max-height: none;
		padding: 0 var(--sp-5) var(--sp-5);
		background: var(--c-bg);
		box-shadow: var(--sh-lg);
		transform: translateX(-100%);
		transition: transform var(--dur-slow) var(--ease);
	}

	.filters.is-open {
		transform: translateX(0);
	}

	.filters__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-4);
		position: sticky;
		top: 0;
		z-index: var(--z-base);
		margin-inline: calc(var(--sp-5) * -1);
		padding: var(--sp-5);
		background: var(--c-bg);
		border-bottom: 1px solid var(--c-line-soft);
	}
}

.filter-group {
	border-bottom: 1px solid var(--c-line-soft);
}

.filter-group__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	width: 100%;
	padding: var(--sp-4) 0;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-align: left;
}

.filter-group__toggle svg {
	flex: 0 0 auto;
	transition: transform var(--dur) var(--ease);
}

.filter-group.is-open .filter-group__toggle svg {
	transform: rotate(180deg);
}

.filter-group__body {
	display: none;
	flex-direction: column;
	gap: var(--sp-3);
	padding-bottom: var(--sp-5);
}

.filter-group.is-open .filter-group__body {
	display: flex;
}

/*
 * Ô chọn lọc. Dùng input thật chứ không giả lập bằng div — bàn phím,
 * trình đọc màn hình và form submit đều hoạt động sẵn.
 */
.filter-option {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
	cursor: pointer;
	min-height: 28px;
}

/*
 * Vẽ lại ô tick thay vì dùng `accent-color`.
 *
 * `accent-color` chỉ đổi màu phần nền khi đã tick; viền và bo góc vẫn do hệ
 * điều hành vẽ — trên Windows là viền xám #767676 bo tròn, lạc hẳn khỏi bảng
 * màu và khỏi ngôn ngữ hình học vuông cạnh của cả trang. Đó cũng là màu viền
 * duy nhất trong toàn trang không nằm trong hệ token.
 *
 * `appearance: none` bỏ giao diện hệ điều hành nhưng GIỮ nguyên input thật,
 * nên bàn phím, trình đọc màn hình và việc gửi form không mất gì.
 */
.filter-option input {
	appearance: none;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1px solid var(--c-line);
	background-color: #fff;
	cursor: pointer;
	transition:
		border-color var(--dur) var(--ease),
		background-color var(--dur) var(--ease);
}

.filter-option:hover input {
	border-color: var(--c-gold-ink);
}

.filter-option input:checked {
	border-color: var(--c-navy);
	background-color: var(--c-navy);
}

/*
 * Dấu tick vẽ bằng border xoay 45°, không phải ký tự hay ảnh nền: nó ăn theo
 * currentColor và nét luôn đúng 1px ở mọi cỡ chữ.
 */
.filter-option input:checked::after {
	content: "";
	display: block;
	width: 4px;
	height: 8px;
	margin: 1px auto 0;
	border: solid #fff;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
}

.filter-option input:focus-visible {
	outline: 2px solid var(--c-gold-ink);
	outline-offset: 2px;
}

.filter-option__label {
	flex: 1;
	color: var(--c-text-muted);
	transition: color var(--dur) var(--ease);
}

.filter-option:hover .filter-option__label,
.filter-option input:checked + .filter-option__label {
	color: var(--c-text);
}

.filter-option__count {
	font-size: var(--fs-xs);
	color: var(--c-muted);
	font-variant-numeric: tabular-nums;
}

/* Danh sách dài (63 bộ sưu tập) tự cuộn thay vì kéo dài vô tận. */
.filter-group__body--scroll {
	max-height: 220px;
	overflow-y: auto;
}

/* --------------------------------------------------------------
 * THANH CÔNG CỤ + CHIP LỌC ĐANG BẬT
 * -------------------------------------------------------------- */

.shop-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--c-line-soft);
	margin-bottom: var(--sp-6);
}

.shop-toolbar__count {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	font-variant-numeric: tabular-nums;
}

.shop-toolbar__right {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.shop-toolbar__select {
	min-height: 40px;
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--c-border);
	background: var(--c-bg);
	font-size: var(--fs-sm);
}

.filter-toggle {
	display: none;
}

@media (max-width: 960px) {
	.filter-toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--sp-2);
		min-height: 40px;
		padding: var(--sp-2) var(--sp-4);
		border: 1px solid var(--c-border);
		font-size: var(--fs-sm);
	}
}

.active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-5);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-1) var(--sp-3);
	border: 1px solid var(--c-border);
	background: var(--c-mist);
	font-size: var(--fs-xs);
}

.chip__remove {
	display: inline-flex;
	color: var(--c-muted);
	transition: color var(--dur) var(--ease);
}

.chip__remove:hover {
	color: var(--c-danger);
}

/* ===============================================================
 * TRANG CHI TIẾT SẢN PHẨM
 * =============================================================== */

.product-detail {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: var(--sp-9);
	align-items: start;
	padding-block: var(--sp-6) var(--sp-section);
}

@media (max-width: 960px) {
	.product-detail {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}
}

/* --------------------------------------------------------------
 * GALLERY
 *
 * 98% sản phẩm trong dữ liệu nguồn chỉ có ĐÚNG MỘT ảnh (993/1013).
 * Nên dải thumbnail phải là phần tùy chọn: thiếu nó thì ảnh chính vẫn
 * chiếm trọn khung, không để lại khoảng trống.
 * -------------------------------------------------------------- */

.gallery {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	position: sticky;
	top: calc(var(--header-h) + var(--sp-4));
}

@media (max-width: 960px) {
	.gallery {
		position: static;
	}
}

.gallery__main {
	background: var(--c-mist);
}

.gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: var(--sp-2);
}

/* Chỉ một ảnh thì không render dải thumbnail. */
.gallery__thumbs:empty,
.gallery--single .gallery__thumbs {
	display: none;
}

.gallery__thumb {
	border: 1px solid transparent;
	padding: 0;
	background: var(--c-mist);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease);
}

.gallery__thumb:hover {
	border-color: var(--c-border);
}

.gallery__thumb[aria-current='true'] {
	border-color: var(--c-gold);
}

/* --------------------------------------------------------------
 * TÓM TẮT SẢN PHẨM
 * -------------------------------------------------------------- */

.summary {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.summary__brand {
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-accent-text);
	text-decoration: none;
}

.summary__title {
	font-size: var(--fs-2xl);
	margin: 0;
}

.summary__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2) var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	font-variant-numeric: tabular-nums;
}

.summary__price {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	padding-block: var(--sp-4);
	border-block: 1px solid var(--c-line-soft);
}

.summary__price-value {
	font-size: var(--fs-xl);
	font-weight: var(--fw-semibold);
	font-variant-numeric: tabular-nums;
}

/* Đồng hồ chưa nhập giá — xem docs/PLAN.md §7. */
.summary__price-ask {
	font-family: var(--f-head);
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
	color: var(--c-accent-text);
}

.summary__price-note {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

.summary__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.summary__actions-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-3);
}

@media (max-width: 480px) {
	.summary__actions-row {
		grid-template-columns: 1fr;
	}
}

/* Điểm cam kết ngay dưới nút mua. */
.summary__assurances {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-5);
	background: var(--c-mist);
}

.assurance {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	font-size: var(--fs-sm);
}

.assurance svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--c-gold-ink);
}

/* --------------------------------------------------------------
 * BẢNG THÔNG SỐ
 *
 * Sáu trường thông số phủ 99–100% dữ liệu nguồn nên bảng này luôn đầy.
 * -------------------------------------------------------------- */

.specs {
	width: 100%;
	font-size: var(--fs-sm);
}

.specs th,
.specs td {
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--c-line-soft);
	text-align: left;
	vertical-align: top;
}

.specs th {
	width: 38%;
	padding-right: var(--sp-4);
	font-family: var(--f-ui);
	font-size: var(--fs-xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
	white-space: normal;
}

.specs tr:last-child th,
.specs tr:last-child td {
	border-bottom: 0;
}

/* --------------------------------------------------------------
 * TAB MÔ TẢ
 * -------------------------------------------------------------- */

.tabs {
	padding-block: var(--sp-section);
	border-top: 0;
 	padding-top: 15px;padding-bottom: 15px;
}

.tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-6);
	border-bottom: 1px solid var(--c-line-soft);
	margin-bottom: var(--sp-6);
}

.tabs__tab {
	padding-bottom: var(--sp-3);
	margin-bottom: -1px;
	border-bottom: 2px solid transparent;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-text-muted);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

	.tabs__tab[aria-selected='true'] {
		color: var(--c-text);
		border-bottom-color: var(--c-gold);
	}

	.tabs__panel[hidden] {
		display: none;
	}
	.related-products h2{
		margin-bottom: 15px;
	}
/*
 * Nội dung HTML lấy từ API.
 *
 * `word-break` và `overflow-wrap` là bắt buộc chứ không phải phòng xa:
 * 39% bài trong dữ liệu nguồn dùng &nbsp; thay cho dấu cách thường
 * (178.492 lần). Non-breaking space chặn xuống dòng, không có hai thuộc
 * tính này thì đoạn văn tràn ngang ra khỏi khung.
 *
 * Script import sẽ chuẩn hóa &nbsp; về dấu cách, nhưng CSS vẫn phải chịu
 * được dữ liệu bẩn — không bao giờ tin nội dung do người khác nhập.
 */
.prose {
	max-width: 100%;
	color: var(--c-text-muted);
	overflow-wrap: break-word;
	word-break: break-word;
}

.prose > * + * {
	margin-top: var(--sp-4);
}

.prose h2,
.prose h3,
.prose h4 {
	color: var(--c-text);
	margin-top: var(--sp-6);
}

.prose h3 {
	font-size: var(--fs-lg);
}

.prose strong {
	color: var(--c-text);
}

.prose img {
	margin-block: var(--sp-5);
}

.prose ul,
.prose ol {
	padding-left: var(--sp-5);
	list-style: revert;
}

.prose li + li {
	margin-top: var(--sp-2);
}

/* --------------------------------------------------------------
 * SẢN PHẨM LIÊN QUAN
 * -------------------------------------------------------------- */

.related {
	padding-block: var(--sp-section);
	border-top: 1px solid var(--c-line-soft);
}

/* ---------------------------------------------------------------
 * CHÂN SIDEBAR BỘ LỌC
 *
 * Nút "Áp dụng" chỉ tồn tại cho trường hợp không có JavaScript. Khi
 * initProductFilters() chạy được, nó gắn class `filters--live` và nút
 * biến mất — tick là lọc luôn, nút thành thừa.
 *
 * Ẩn bằng CSS ăn theo class do JS gắn, chứ không đặt `display: none`
 * sẵn rồi nhờ JS bật lên: cách đó làm nút biến mất vĩnh viễn đúng vào
 * lúc JS hỏng, tức là lúc cần nó nhất.
 * --------------------------------------------------------------- */

.filters__foot {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

.filters--live .filters__apply {
	display: none;
}

.filters__clear {
	color: var(--c-muted);
	font-size: var(--fs-13);
	line-height: var(--lh-18);
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.filters__clear:hover,
.filters__clear:focus-visible {
	color: var(--c-navy);
}

/* ---------------------------------------------------------------
 * Ô SẮP XẾP
 *
 * `appearance: none` bỏ mũi tên của hệ điều hành, thay bằng chevron vẽ bằng
 * SVG nội tuyến (data URI, không phát sinh request). Phải chừa padding-right
 * đủ rộng cho mũi tên, nếu không văn bản dài sẽ chạy đè lên nó.
 * --------------------------------------------------------------- */

.shop-toolbar__sort {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.shop-toolbar__select {
	appearance: none;
	padding-right: var(--sp-8);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none' stroke='%23051c2b' stroke-width='1.5'%3E%3Cpath d='M3 5.5 7 9.5l4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--sp-3) center;
	color: var(--c-text);
	cursor: pointer;
}

.shop-toolbar__select:focus-visible {
	outline: 2px solid var(--c-gold-ink);
	outline-offset: 2px;
}

/* JS gửi form khi đổi lựa chọn nên nút này thành thừa — xem initSortForm(). */
.shop-toolbar__sort--live .shop-toolbar__sort-submit {
	display: none;
}

.shop-toolbar__sort-submit {
	min-height: 40px;
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--c-border);
	background: var(--c-bg);
	font-size: var(--fs-sm);
	cursor: pointer;
}

/*
 * Thanh cuộn của sidebar bộ lọc: mảnh và theo màu của trang, thay vì thanh
 * cuộn mặc định dày và xám của Windows.
 */
.filters {
	scrollbar-width: thin;
	scrollbar-color: var(--c-line) transparent;
}

/*
 * Vùng chạm của một ô lọc trên di động.
 *
 * Trên desktop, đích bấm là cả thẻ <label> cao 28px — vượt mức tối thiểu
 * 24×24 của WCAG 2.5.8. Nhưng bộ lọc trên di động là drawer, và ngón tay
 * không có độ chính xác của con trỏ chuột: ba ô lọc cách nhau 28px thì tick
 * nhầm ô bên cạnh là chuyện thường. Nới lên 44px theo mức khuyến nghị.
 */
@media (max-width: 960px) {
	.filter-option {
		min-height: 44px;
	}

	.filter-option input {
		width: 18px;
		height: 18px;
	}
}

/* ---------------------------------------------------------------
 * TRANG LIÊN HỆ
 * --------------------------------------------------------------- */

.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	min-width: 0;
}

.contact-form__note {
	font-size: var(--fs-xs);
	line-height: var(--lh-18);
}

/* Khối giờ mở cửa có nhiều dòng — bỏ lề mặc định của <p> do wpautop sinh ra. */
.contact-item p {
	margin: 0;
}

.contact-item p + p {
	margin-top: var(--sp-1);
}

/*
 * Giới hạn bề rộng dòng chữ trong tab mô tả sản phẩm.
 *
 * `.tabs__panel` đặt `max-width: 100%`, thắng `max-width: var(--measure)` của
 * `.prose` vì cùng độ ưu tiên nhưng đứng sau. Kết quả: đoạn mô tả trải hết
 * 1240px, đo được 155 ký tự mỗi dòng — hơn gấp đôi mức dễ đọc. Mắt mất dấu
 * dòng khi nhảy về đầu dòng kế tiếp, và đây lại đúng là phần chữ mà người mua
 * đọc kỹ nhất trước khi xuống tiền.
 */
.tabs__panel.prose {
	max-width: var(--measure);
}

/*
 * Liên kết email / điện thoại / Zalo ở trang liên hệ.
 *
 * Chúng là liên kết ĐỘC LẬP, không nằm trong dòng văn — nên không được miễn
 * trừ ngưỡng 24×24 của WCAG 2.5.8 như liên kết giữa đoạn văn. Chiều cao thật
 * đo được là 20px. Đây lại là ba đích bấm quan trọng nhất trang: người muốn
 * gọi hay nhắn tin cho cửa hàng bấm đúng vào chúng.
 */
.contact-item a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}