/**
 * Trang danh sách sản phẩm (inc/product-archive.php).
 */

/* Breadcrumb */
.kita-archive-top {
	padding-top: 24px;
}

.kita-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.005em;
}

.kita-breadcrumb li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--theme-palette-color-3);
}

.kita-breadcrumb li + li::before {
	content: "";
	width: 12px;
	height: 12px;
	background: url("../icons/chevron-small.svg") center / contain no-repeat;
	rotate: -90deg;
}

.kita-breadcrumb a {
	color: var(--kita-description);
}

.kita-breadcrumb a:hover {
	color: var(--theme-palette-color-1);
}

.kita-breadcrumb__home {
	display: block;
	width: 20px;
	height: 20px;
	background: url("../icons/home.svg") center / contain no-repeat;
}

/* Khoảng cách breadcrumb → nội dung (Figma: 24px) */
.kita-archive-top + .ct-container[data-vertical-spacing*="top"] {
	padding-top: 24px;
}

/* Tiêu đề danh mục: căn giữa, gạch nét đứt 300px */
.woocommerce-products-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.woocommerce-products-header::after {
	content: "";
	width: 300px;
	max-width: 60%;
	border-top: 1px dashed var(--theme-palette-color-1);
}

.woocommerce-products-header .woocommerce-products-header__title {
	margin: 0;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.005em;
	text-align: center;
	color: var(--theme-palette-color-1);
}

/* Widget danh mục (cùng kiểu khung với bộ lọc) */
.kita-cat-box {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 12px 12px;
	border: 1px solid var(--theme-palette-color-5);
	border-radius: 16px;
	background: var(--theme-palette-color-8);
}

.kita-cat-box__title {
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--theme-palette-color-5);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--theme-palette-color-1);
}

.kita-cat-box__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kita-cat-box__list li {
	margin: 0;
}

.kita-cat-box__list a {
	display: block;
	padding: 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.005em;
	color: var(--theme-palette-color-3);
	transition: background-color 0.2s;
}

.kita-cat-box__list a:hover,
.kita-cat-box__list a.is-active {
	background: var(--theme-palette-color-6);
	color: var(--theme-palette-color-3);
}

/* Khoảng cách giữa 2 khung trong sidebar (Figma: 16px) */
.ct-sidebar {
	--sidebar-widgets-spacing: 16px;
}

/* Phân trang: ô bo tròn như tab lọc, trang hiện tại nền xanh */
nav.ct-pagination[data-pagination] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 32px;
	border: 0;
}

.ct-pagination[data-pagination] > div {
	display: contents;
}

.ct-pagination[data-pagination] .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 37px;
	height: 37px;
	padding: 0 12px;
	border: 0;
	border-radius: 100px;
	background: #F0EDE9;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--kita-description);
	transition: background-color 0.2s, color 0.2s;
}

.ct-pagination[data-pagination] a.page-numbers:hover {
	background: var(--theme-palette-color-6);
	color: var(--theme-palette-color-1);
}

.ct-pagination[data-pagination] .page-numbers.current {
	background: var(--theme-palette-color-1);
	color: var(--theme-palette-color-7);
}

.ct-pagination[data-pagination] .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	background: none;
}

.ct-pagination[data-pagination] .page-numbers.prev,
.ct-pagination[data-pagination] .page-numbers.next {
	gap: 6px;
	padding: 0 16px;
	background: var(--theme-palette-color-8);
	border: 1px solid var(--theme-palette-color-5);
	color: var(--theme-palette-color-1);
}

.ct-pagination[data-pagination] .page-numbers.prev svg,
.ct-pagination[data-pagination] .page-numbers.next svg {
	width: 9px;
	height: 9px;
	fill: currentColor;
}

@media (max-width: 689.98px) {
	.woocommerce-products-header .woocommerce-products-header__title {
		font-size: 24px;
	}

	.kita-archive-top {
		padding-top: 16px;
	}
}

/* ---------- Tablet / mobile: sidebar thành drawer trượt từ phải (assets/js/product-archive.js) ---------- */
.kita-filter-toggle,
.kita-drawer__head,
.kita-drawer-backdrop {
	display: none;
}

@media (max-width: 999.98px) {
	/* Breadcrumb trái — nút Bộ lọc phải */
	.kita-archive-top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.kita-filter-toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		flex: none;
		min-height: 0;
		padding: 8px 14px;
		border: 1px solid var(--theme-palette-color-5);
		border-radius: 100px;
		background: var(--theme-palette-color-8);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.5;
		color: var(--theme-palette-color-1);
		cursor: pointer;
	}

	.kita-filter-toggle__icon {
		width: 18px;
		height: 18px;
		background: url("../icons/filter.svg") center / contain no-repeat;
	}

	.kita-filter-toggle__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: 100px;
		background: var(--theme-palette-color-1);
		font-size: 12px;
		color: #fff;
	}

	/* Drawer */
	#sidebar .ct-sidebar.kita-drawer {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		gap: 16px;
		width: min(360px, 88vw);
		max-height: 100%;
		height: 100dvh;
		margin: 0;
		padding: 0 16px 24px;
		overflow-y: auto;
		overscroll-behavior: contain;
		background: var(--theme-palette-color-7);
		box-shadow: -12px 0 32px rgba(20, 49, 68, 0.18);
		transform: translateX(100%);
		visibility: hidden;
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.3s;
	}

	#sidebar .ct-sidebar.kita-drawer.is-open {
		transform: none;
		visibility: visible;
		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.kita-drawer > .ct-widget {
		margin: 0;
	}

	.kita-drawer__head {
		position: sticky;
		top: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 -16px;
		padding: 16px;
		border-bottom: 1px solid var(--theme-palette-color-5);
		background: var(--theme-palette-color-7);
	}

	.kita-drawer__title {
		margin: 0;
		font-size: 18px;
		font-weight: 600;
		line-height: 1.5;
		color: var(--theme-palette-color-1);
	}

	.kita-drawer__close {
		position: relative;
		width: 36px;
		height: 36px;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: var(--theme-palette-color-8);
		cursor: pointer;
	}

	.kita-drawer__close::before,
	.kita-drawer__close::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 16px;
		height: 2px;
		border-radius: 2px;
		background: var(--theme-palette-color-3);
		translate: -50% -50%;
		rotate: 45deg;
	}

	.kita-drawer__close::after {
		rotate: -45deg;
	}

	.kita-drawer-backdrop {
		position: fixed;
		inset: 0;
		z-index: 999;
		display: block;
		background: rgba(20, 49, 68, 0.45);
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s;
	}

	.kita-drawer-backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	/* Khoá cuộn trang khi drawer mở */
	html.kita-drawer-open,
	html.kita-drawer-open body {
		overflow: hidden;
	}

	/* Sidebar không còn chiếm chỗ trong luồng trang */
	#sidebar {
		margin: 0 !important;
		padding: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	#sidebar .ct-sidebar.kita-drawer,
	.kita-drawer-backdrop {
		transition: none !important;
	}
}

/* Lưới sidebar + nội dung: hàng cách nhau 16px như khe cột (Blocksy mặc định 50px) */
.ct-container[data-sidebar] {
	grid-row-gap: 16px;
}