/* ==========================================================================
   [product_archive_table] -- pagination
   --------------------------------------------------------------------------
   Built to read as a continuation of the table above it rather than as a
   separate control. Values below are sampled from the live site:

     #121212  page and row background
     #000000  table header band
     #222222  hairline between rows
     #0175e2  accent -- the "Request a Repair" button and every table link
     #ffffff  header text

   The table has square corners and flat solid fills, so this does too: no
   radius, no gradient, no shadow, no decorative marks.

   Everything is exposed as a custom property. If the site palette moves,
   override these on .ps-product-pagination and nothing below needs touching.
   ========================================================================== */

.ps-product-pagination {
	/* 2.75rem = 44px, the minimum comfortable touch target. */
	--ps-pg-size: 2.75rem;
	--ps-pg-accent: #0175e2;
	--ps-pg-accent-hover: #0186ff;
	--ps-pg-line: #222222;
	--ps-pg-line-strong: #3a3a3a;
	--ps-pg-panel: #000000;
	--ps-pg-ink: #ffffff;
	--ps-pg-muted: rgba( 255, 255, 255, 0.5 );

	margin: 2.25rem 0 0;
	padding-top: 1.5rem;
	/* Same hairline the table uses, so the two read as one unit. */
	border-top: 1px solid var( --ps-pg-line );
}

/* --------------------------------------------------------------------------
   The list. Divi puts list-style and padding on content `ul`s, so both are
   reset explicitly rather than assumed.
   -------------------------------------------------------------------------- */

.ps-product-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ps-product-pagination ul.page-numbers > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   Keys. Blue on transparent, matching the table's links, inside the same
   hairline the rows are divided by.

   NOTE ON !important: Divi sets link colour and underline from selectors
   carrying an ID (#page-container / #et-boc), which no practical class-based
   selector can outrank. Scoped to this component and limited to the two
   properties Divi actually fights us on.
   -------------------------------------------------------------------------- */

.ps-product-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	box-sizing: border-box;
	min-width: var( --ps-pg-size );
	height: var( --ps-pg-size );
	padding: 0 0.65rem;
	border: 1px solid var( --ps-pg-line );
	/* Square, like the table. */
	border-radius: 0;
	font-size: 0.9375rem;
	/* Tabular figures stop the row twitching as digit widths change. */
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var( --ps-pg-accent ) !important;
	text-decoration: none !important;
	transition:
		border-color 120ms linear,
		background-color 120ms linear,
		color 120ms linear;
}

.ps-product-pagination a.page-numbers:hover,
.ps-product-pagination a.page-numbers:focus-visible {
	/* Fills to the header band's black -- a colour already on the page. */
	background-color: var( --ps-pg-panel );
	border-color: var( --ps-pg-line-strong );
	color: var( --ps-pg-accent-hover ) !important;
}

.ps-product-pagination a.page-numbers:focus-visible {
	outline: 2px solid var( --ps-pg-accent );
	outline-offset: 2px;
}

/* Current page: the solid accent, same treatment as the site's CTA button. */
.ps-product-pagination .page-numbers.current {
	background-color: var( --ps-pg-accent );
	border-color: var( --ps-pg-accent );
	color: var( --ps-pg-ink ) !important;
	font-weight: 700;
}

/* Ellipsis is a label, not a key -- no plate, no target size. */
.ps-product-pagination .page-numbers.dots {
	min-width: 1.25rem;
	padding: 0;
	border-color: transparent;
	color: var( --ps-pg-muted ) !important;
}

/* Prev / Next read as legends, echoing the table's bold header row. */
.ps-product-pagination .prev.page-numbers,
.ps-product-pagination .next.page-numbers {
	padding: 0 1.1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ps-product-pagination .ps-pg-arrow {
	font-size: 1.35em;
	line-height: 0;
	/* Optical centring -- the glyph sits high in its box. */
	transform: translateY( -0.04em );
}

/* --------------------------------------------------------------------------
   Readout. Hidden on desktop, where the numbers speak for themselves. Styled
   to match the "Showing 1-9 of 3,688 results" line above the table.
   -------------------------------------------------------------------------- */

.ps-product-pagination .ps-pagination-readout {
	display: none;
	margin: 0.875rem 0 0;
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var( --ps-pg-muted );
}

.ps-product-pagination .ps-pagination-readout strong {
	font-weight: 700;
	color: var( --ps-pg-ink );
}

/* --------------------------------------------------------------------------
   Phone: 410 pages cannot fit, and truncating to "1 2 3 ... 410" spends the
   row on numbers nobody taps. Collapse to two large targets and a readout:

       < PREV        Page 7 of 410        NEXT >

   `display: contents` on the li lets the anchors become flex items directly,
   so the numeric keys can be hidden without leaving empty gap slots behind.
   -------------------------------------------------------------------------- */

@media ( max-width: 40em ) {

	.ps-product-pagination ul.page-numbers {
		justify-content: space-between;
		gap: 0.5rem;
	}

	.ps-product-pagination ul.page-numbers > li {
		display: contents;
	}

	.ps-product-pagination .page-numbers {
		display: none;
	}

	.ps-product-pagination .prev.page-numbers,
	.ps-product-pagination .next.page-numbers {
		display: inline-flex;
		flex: 1 1 0;
		/* Full-width halves are far easier to hit than 44px squares. */
		max-width: 11rem;
		height: 3rem;
	}

	.ps-product-pagination .ps-pagination-readout {
		display: block;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.ps-product-pagination .page-numbers {
		transition: none;
	}
}