/**
 * Pagination dùng chung — MỘT implementation trung tâm cho mọi nơi phân
 * trang (Shop, Category/Brand archive, Search), đúng CLAUDE.md mục 2
 * ("mọi component tái sử dụng phải có một implementation trung tâm").
 *
 * Trước đây chỉ trang Search có style riêng; Shop/Category dùng nguyên bản
 * mặc định của WooCommerce — ô số cao 30px (dưới ngưỡng chạm 44px), không
 * bo góc, khung <ul> có viền xám #cfc8d8, trang hiện tại nền xám #e9e6ed
 * chữ tím #816f98 — lệch hoàn toàn design system.
 *
 * ===== SPECIFICITY (đọc trước khi sửa file này) =====
 * WooCommerce core (woocommerce.css) style pagination bằng chuỗi selector
 * khá sâu, phải khớp/vượt đúng bậc thì mới đè được — đã tra nguyên văn:
 *
 *   .woocommerce nav.woocommerce-pagination ul                    (0,2,2)
 *   .woocommerce nav.woocommerce-pagination ul li                 (0,2,3)
 *   .woocommerce nav.woocommerce-pagination ul li a,
 *   .woocommerce nav.woocommerce-pagination ul li span            (0,2,4)
 *   .woocommerce nav.woocommerce-pagination ul li span.current    (0,3,4)
 *
 * Bản đầu của file này dùng `.woocommerce-pagination ul.page-numbers`
 * (0,2,1) nên THUA hết — đo thật: min-width không ăn (ô rộng 23px), trang
 * hiện tại vẫn nền xám core. Nay thêm `.page-numbers` vào từng bậc để vượt
 * đúng một cách tự nhiên, KHÔNG dùng `!important`.
 *
 * MARKUP: WooCommerce đặt class `page-numbers` lên CẢ thẻ <ul> bao ngoài lẫn
 * từng item — nên luôn nhắm `li > …` cho item, không dùng `.page-numbers`
 * trơn.
 */

.woocommerce-pagination,
.alo-pagination,
.navigation.pagination {
	margin-top: 32px;
}

/**
 * MARKUP KHÁC NHAU giữa 2 nguồn phân trang — component này phải phủ cả hai:
 * - WooCommerce: `<nav class="woocommerce-pagination"><ul class="page-numbers"><li><a class="page-numbers">`
 * - WordPress `the_posts_pagination()` (Blog/Category): `<nav class="navigation pagination"><div class="nav-links"><a class="page-numbers">`
 *   — KHÔNG có <ul>/<li>, item là con trực tiếp của `.nav-links`.
 * Thiếu nhánh dưới thì phân trang Blog rơi về style mặc định của theme/WP.
 */
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.navigation.pagination .nav-links > .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-sm);
	background: var(--alo-color-surface);
	color: var(--alo-color-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.navigation.pagination .nav-links > a.page-numbers:hover {
	border-color: var(--alo-color-primary);
	background: var(--alo-color-primary-soft);
	color: var(--alo-color-on-soft);
}
.navigation.pagination .nav-links > .page-numbers.current {
	background: var(--alo-color-primary);
	border-color: var(--alo-color-primary);
	color: #fff;
}
.navigation.pagination .nav-links > .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--alo-color-text-muted);
}
.navigation.pagination .nav-links > a.page-numbers:focus-visible {
	outline: 2px solid var(--alo-color-primary);
	outline-offset: 2px;
}

/* Khung <ul>: trung hoà viền/inline-block của core, chuyển thành hàng flex. */
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.alo-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	white-space: normal;
	list-style: none;
}

/* <li>: core cho float:left + border-right + overflow:hidden (kiểu nút dính
   liền). Bỏ hết để mỗi ô là một nút độc lập. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li,
.alo-pagination ul.page-numbers li {
	display: block;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
}

/* Từng ô số/mũi tên. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers,
.alo-pagination ul.page-numbers li a.page-numbers,
.alo-pagination ul.page-numbers li span.page-numbers,
.alo-search-results .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--alo-color-border);
	border-radius: var(--alo-radius-sm);
	background: var(--alo-color-surface);
	color: var(--alo-color-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

/* Hover/focus — core dùng chung nền xám cho cả hover lẫn .current, tách ra. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus,
.alo-pagination ul.page-numbers li a.page-numbers:hover,
.alo-search-results a.page-numbers:hover {
	border-color: var(--alo-color-primary);
	background: var(--alo-color-primary-soft);
	color: var(--alo-color-on-soft);
}

/* Trang hiện tại (core: (0,3,4) — bản này (0,5,4) nên thắng). */
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers.current,
.alo-pagination ul.page-numbers li .page-numbers.current,
.alo-search-results .page-numbers.current {
	background: var(--alo-color-primary);
	border-color: var(--alo-color-primary);
	color: #fff;
}

/* "…" không bấm được → bỏ viền để không trông như nút. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers.dots,
.alo-pagination ul.page-numbers li span.page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--alo-color-text-muted);
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible,
.alo-pagination ul.page-numbers li a.page-numbers:focus-visible {
	outline: 2px solid var(--alo-color-primary);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.woocommerce nav.woocommerce-pagination ul.page-numbers,
	.alo-pagination ul.page-numbers { gap: 6px; }
	.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers,
	.woocommerce nav.woocommerce-pagination ul.page-numbers li span.page-numbers,
	.alo-pagination ul.page-numbers li a.page-numbers,
	.alo-pagination ul.page-numbers li span.page-numbers { padding: 0 8px; }
}