/* ==============================================================
   Pagination — ported from the live Shopify theme's
   assets/component-pagination.css (customized, not stock Dawn).
   Applies to every paginated WooCommerce archive (shop + all
   product categories), since they all share one Product Collection
   pagination block.

   Sized in px, not rem: the reference's rem values (4.4rem chips
   etc.) assume Shopify's html{font-size:10px} base (1rem=10px), but
   this site's html font-size is the standard 16px — copying the rem
   values verbatim rendered every chip ~60% oversized. Values below
   are those same rem numbers x10 (the reference's actual px intent),
   fixed in px so they can't drift if either site's root font-size
   changes again.

   Palette note: this uses PURPLE (#5b4b9e -> #7c5cbf), which is an
   outlier vs. the pink/magenta gradient used by filters, franchise
   pills and buttons elsewhere on the shop pages. That's how the
   live reference actually looks — kept as-is rather than unified.
   ============================================================== */

.woocommerce .wp-block-query-pagination,
.woocommerce-page .wp-block-query-pagination {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

@media screen and (min-width: 990px) {
	.woocommerce .wp-block-query-pagination,
	.woocommerce-page .wp-block-query-pagination {
		margin-top: 50px;
	}
}

.woocommerce .wp-block-query-pagination-numbers,
.woocommerce-page .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}

/* Page number chip — link and current both share this base. */
.woocommerce .wp-block-query-pagination .page-numbers,
.woocommerce-page .wp-block-query-pagination .page-numbers {
	color: #3a3a44;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 44px;
	min-width: 44px;
	width: auto;
	padding: 0 14px;
	text-decoration: none;
	border-radius: 12px;
	border: 2px solid #e5e5ea;
	background: #fff;
	font-weight: 700;
	font-size: 15px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
}

.woocommerce .wp-block-query-pagination a.page-numbers:hover,
.woocommerce-page .wp-block-query-pagination a.page-numbers:hover {
	border-color: #7c5cbf;
	transform: translateY(-3px);
	box-shadow: 0 8px 18px rgba(124, 92, 191, 0.25);
	color: #3a3a44;
}

/* Current page: filled purple gradient. */
.woocommerce .wp-block-query-pagination .page-numbers.current,
.woocommerce-page .wp-block-query-pagination .page-numbers.current {
	background: linear-gradient(135deg, #5b4b9e, #7c5cbf);
	border-color: transparent;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(91, 75, 158, 0.4);
}

/* Ellipsis renders bare, no chip. */
.woocommerce .wp-block-query-pagination .page-numbers.dots,
.woocommerce-page .wp-block-query-pagination .page-numbers.dots {
	height: auto;
	min-width: auto;
	padding: 0 2px;
	border-color: transparent;
	background: transparent;
	box-shadow: none;
	color: #b5b5be;
	font-weight: 700;
}

/* Prev/next: circular, icon-only. WordPress renders literal
   "Previous Page"/"Next Page" link text with no icon; the text is
   kept in the DOM for accessibility but visually collapsed
   (font-size:0) in favor of a CSS chevron, same visual language as
   the live reference's rotated caret icon. */
.woocommerce .wp-block-query-pagination-previous,
.woocommerce-page .wp-block-query-pagination-previous,
.woocommerce .wp-block-query-pagination-next,
.woocommerce-page .wp-block-query-pagination-next {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 44px;
	width: 44px;
	min-width: 44px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid #e5e5ea;
	background: #fff !important;
	color: #3a3a44;
	font-size: 0;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	transition: all 0.2s ease;
	text-decoration: none;
}

.woocommerce .wp-block-query-pagination-previous::before,
.woocommerce-page .wp-block-query-pagination-previous::before,
.woocommerce .wp-block-query-pagination-next::before,
.woocommerce-page .wp-block-query-pagination-next::before {
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: inherit;
}

.woocommerce .wp-block-query-pagination-previous::before,
.woocommerce-page .wp-block-query-pagination-previous::before {
	content: "\2039";
}

.woocommerce .wp-block-query-pagination-next::before,
.woocommerce-page .wp-block-query-pagination-next::before {
	content: "\203A";
}

.woocommerce .wp-block-query-pagination-previous:hover,
.woocommerce-page .wp-block-query-pagination-previous:hover,
.woocommerce .wp-block-query-pagination-next:hover,
.woocommerce-page .wp-block-query-pagination-next:hover {
	background: #1f1f27 !important;
	border-color: #1f1f27;
	color: #fff;
	transform: scale(1.1);
}

/* Mobile: horizontal scroll strip with snap, scrollbar hidden. */
@media screen and (max-width: 749px) {
	.woocommerce .wp-block-query-pagination,
	.woocommerce-page .wp-block-query-pagination {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding: 4px 20px;
		scrollbar-width: none;
	}

	.woocommerce .wp-block-query-pagination::-webkit-scrollbar,
	.woocommerce-page .wp-block-query-pagination::-webkit-scrollbar {
		display: none;
	}

	.woocommerce .wp-block-query-pagination > *,
	.woocommerce-page .wp-block-query-pagination > * {
		flex: 0 0 auto;
		scroll-snap-align: center;
	}
}