/* =========================================================================
   Product Range (shop) page — template-product-range.php.
   Scoped to .pr — mobile-first, min-width media queries only.
   Shares the Brand Book 2026 tokens with the homepage (.hp) styles.
   ========================================================================= */

.pr {
	--pr-navy: #181d46;      /* Billi Blue — signature colour */
	--pr-lightblue: #90cdeb; /* hover state */
	--pr-band-grey: #f5f5f5;
	--pr-band-blue: #f1f5f5; /* Green Grey */
	--pr-line: #eaeaea;
	--pr-text: #000;
	--pr-muted: #6b6b72;
	--pr-gutter: 20px;

	font-family: 'FFDINStd', sans-serif;
	color: var(--pr-text);
	line-height: 1.5;
	background: #fff;
}

@media (min-width: 900px) {
	.pr { --pr-gutter: 40px; }
}

.pr *,
.pr *::before,
.pr *::after { box-sizing: border-box; }

.pr img { max-width: 100%; height: auto; display: block; }

.pr-container {
	width: 100%;
	max-width: 1436px; /* 1356px content + 2 × 40px */
	margin: 0 auto;
	padding-left: var(--pr-gutter);
	padding-right: var(--pr-gutter);
}

.pr :is(button, input, select) { font-family: inherit; }

.pr :is(a, button, input, select, summary):focus-visible {
	outline: 2px solid var(--pr-lightblue);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---- Buttons (2px corners, sharper-corner direction Aug 2026) ----------- */

.pr .pr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-height: 48px;
	padding: 12px 28px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Opt out of the theme's global `a:hover { opacity: 0.7 }` (desktop.css),
   which otherwise fades the whole button on hover. */
.pr .pr-btn:hover { opacity: 1; }

.pr .pr-btn--navy { background: var(--pr-navy); color: #fff; }
.pr .pr-btn--navy:hover { background: #fff; color: var(--pr-navy); box-shadow: inset 0 0 0 1px var(--pr-navy); }

.pr .pr-btn--ghost {
	background: transparent;
	color: var(--pr-navy);
	border: 1px solid var(--pr-navy);
}
.pr .pr-btn--ghost:hover { background: var(--pr-navy); color: #fff; }

/* ---- Intro band --------------------------------------------------------- */

.pr-hero {
	background: var(--pr-band-blue);
	padding: 40px 0 44px;
}

/* The title is an h1, so typography.css sets it in DM Serif Display at 400.
   No font-weight here: the serif has no bold cut, and the 600 this rule
   carried from the DIN era made browsers synthesise one. */
.pr-hero__title {
	margin: 0;
	color: var(--pr-navy);
	font-size: 30px;
	line-height: 1.15;
}

.pr-hero__intro {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.5;
}

.pr-hero__intro p { margin: 0 0 0.6em; }
.pr-hero__intro p:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
	.pr-hero { padding: 56px 0 60px; }
	.pr-hero__title { font-size: 40px; }
	.pr-hero__intro { margin-top: 14px; font-size: 18px; }
}

/* ---- Toolbar: category chips ------------------------------------------- */

/* The legacy stylesheets put overflow-x:hidden on body/#wrapper, which kills
   position:sticky for every descendant. Neutralise it on this template only —
   html keeps its own overflow-x clip, so nothing can scroll sideways. */
body.page-template-template-product-range-php,
body.page-template-template-product-range-php #wrapper {
	overflow: visible;
}

/* header.php always prints the breadcrumb section; on this page it has no
   trail to show and renders as an empty 32px white strip below the header. */
body.page-template-template-product-range-php .breadcrumb-holder {
	display: none;
}

/* Sticks just below the fixed site header (announce bar + nav + trust strip —
   the header's own :root vars keep this in sync). */
.pr-toolbar {
	position: sticky;
	top: calc(var(--header-chrome-h, 74px) + var(--trust-bar-h, 48px));
	z-index: 30;
	background: #fff;
	border-bottom: 1px solid var(--pr-line);
}

body.admin-bar .pr-toolbar {
	top: calc(var(--header-chrome-h, 74px) + var(--trust-bar-h, 48px) + 46px);
}
@media (min-width: 783px) {
	body.admin-bar .pr-toolbar {
		top: calc(var(--header-chrome-h, 74px) + var(--trust-bar-h, 48px) + 32px);
	}
}

.pr-toolbar__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 12px;
	padding-bottom: 12px;
}

.pr-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.pr-chips::-webkit-scrollbar { display: none; }

.pr .pr-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 18px;
	font-size: 15px;
	line-height: 1;
	color: var(--pr-navy);
	background: #fff;
	border: 1px solid var(--pr-navy);
	border-radius: 2px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.pr .pr-chip:hover { background: var(--pr-lightblue); border-color: var(--pr-lightblue); }

.pr .pr-chip.is-active {
	background: var(--pr-navy);
	border-color: var(--pr-navy);
	color: #fff;
}

.pr-chip__count { opacity: 0.65; font-size: 13px; }
.pr-chip__count:empty { display: none; }

.pr .pr-filter-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	margin-left: auto;
	min-height: 40px;
	padding: 8px 18px;
	font-size: 15px;
	color: #fff;
	background: var(--pr-navy);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	position: relative;
}

.pr .pr-filter-trigger svg { width: 16px; height: 16px; }

/* Soft fade so chips visibly scroll away behind the Filters button. */
.pr .pr-filter-trigger::before {
	content: '';
	position: absolute;
	right: calc(100% + 1px);
	top: -12px;
	bottom: -12px;
	width: 28px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}

.pr-filter-trigger__dot {
	position: absolute;
	top: 4px;
	right: 8px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--pr-lightblue);
}

@media (min-width: 900px) {
	.pr-chips { margin-right: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; }
	.pr .pr-filter-trigger { display: none; }
	.pr-toolbar__row { padding-top: 16px; padding-bottom: 16px; }
}

/* ---- Layout: filters + results ----------------------------------------- */

.pr-layout {
	display: block;
	padding-top: 24px;
	padding-bottom: 64px;
}

@media (min-width: 900px) {
	.pr-layout {
		display: grid;
		grid-template-columns: 312px minmax(0, 1fr);
		gap: 48px;
		padding-top: 40px;
		padding-bottom: 96px;
	}
}

/* ---- Filters ------------------------------------------------------------ */

/* Mobile: off-canvas drawer. */
.pr-filters {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 100001; /* above the fixed header and its overlays */
	width: min(86vw, 360px);
	display: flex;
	flex-direction: column;
	background: #fff;
	transform: translateX(-102%);
	transition: transform 0.25s ease;
	visibility: hidden;
}

.pr-filters.is-open {
	transform: translateX(0);
	visibility: visible;
	box-shadow: 8px 0 40px rgba(24, 29, 70, 0.25);
}

.pr-scrim {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(24, 29, 70, 0.45);
	border: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.pr-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.pr-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--pr-line);
}

.pr-filters__title {
	color: var(--pr-navy);
	font-size: 19px;
	font-weight: 600;
}

.pr .pr-filters__close {
	width: 40px;
	height: 40px;
	margin-right: -10px;
	padding: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--pr-navy);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.pr-filters__scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 20px;
	overscroll-behavior: contain;
}

.pr-filters__foot {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	padding: 14px 20px;
	border-top: 1px solid var(--pr-line);
	background: #fff;
}

@media (min-width: 900px) {
	/* Sidebar sticks below the fixed header + sticky toolbar and scrolls
	   its own content if taller than the viewport. */
	.pr-filters {
		position: sticky;
		top: calc(var(--header-chrome-h, 74px) + var(--trust-bar-h, 48px) + 97px);
		bottom: auto;
		left: auto;
		z-index: auto;
		align-self: start;
		width: auto;
		max-height: calc(100vh - var(--header-chrome-h, 74px) - var(--trust-bar-h, 48px) - 121px);
		overflow-y: auto;
		/* Room between the counts and the scrollbar, and the scrollbar's space
		   kept whether or not it shows, so opening a group never shifts the
		   column. overflow-x: the rotated group chevrons poke ~2px past the
		   edge, which otherwise adds a horizontal scrollbar. */
		overflow-x: hidden;
		padding-right: 16px;
		scrollbar-gutter: stable;
		transform: none;
		visibility: visible;
		transition: none;
		box-shadow: none;
	}

	/* The admin bar pushes the header (and so the toolbar) down 32px. */
	body.admin-bar .pr-filters {
		top: calc(var(--header-chrome-h, 74px) + var(--trust-bar-h, 48px) + 129px);
		max-height: calc(100vh - var(--header-chrome-h, 74px) - var(--trust-bar-h, 48px) - 153px);
	}

	.pr-filters__head,
	.pr-filters__foot { display: none; }
	.pr-filters__scroll { padding: 0; overflow: visible; }
	.pr-scrim { display: none; }
}

/* ---- Search within results --------------------------------------------- */

.pr-search { position: relative; margin-bottom: 18px; }

.pr-search__icon {
	position: absolute;
	top: 50%;
	left: 16px;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	color: var(--pr-muted);
	pointer-events: none;
}

.pr .pr-search__input {
	width: 100%;
	min-height: 46px;
	padding: 10px 16px 10px 42px;
	font-size: 15px;
	color: var(--pr-text);
	background: var(--pr-band-grey);
	border: 1px solid transparent;
	border-radius: 2px;
	appearance: none;
}

.pr .pr-search__input:focus {
	background: #fff;
	border-color: var(--pr-navy);
	outline: none;
}

.pr .pr-search__input::placeholder { color: var(--pr-muted); }

/* ---- Filter groups ------------------------------------------------------ */

.pr-group { border-top: 1px solid var(--pr-line); }

.pr-group__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	color: var(--pr-navy);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.pr-group__summary::-webkit-details-marker { display: none; }

.pr-group__summary::after {
	content: '';
	width: 9px;
	height: 9px;
	border-right: 1.6px solid var(--pr-navy);
	border-bottom: 1.6px solid var(--pr-navy);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
	flex: 0 0 auto;
	margin-left: 12px;
}

.pr-group[open] > .pr-group__summary::after { transform: rotate(225deg); }

.pr-group__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 16px;
}

/* ---- Option rows -------------------------------------------------------- */

.pr-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 4px;
	border-radius: 4px;
	font-size: 15px;
	cursor: pointer;
}

.pr-opt:hover { background: var(--pr-band-grey); }

.pr-opt.is-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.pr .pr-opt__input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--pr-navy);
	cursor: pointer;
}

.pr-opt__label { flex: 1 1 auto; line-height: 1.3; }

.pr-opt__label--swatch {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

/* Fixed-width, right-aligned counts so every option row (and the water-type
   badge boxes, which stretch to fill the remaining space) lines up equally
   whatever the count's digit count. */
.pr-opt__count {
	flex: 0 0 auto;
	margin-left: auto;
	min-width: 26px;
	color: var(--pr-muted);
	font-size: 13px;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.pr-opt .pr-badge {
	flex: 1 1 auto;
	justify-content: flex-start;
	font-size: 14px;
	padding: 6px 12px;
}

/* ---- Water-type badges (brand chip language, as on the homepage) -------- */

/* All Billi Blue with Billi's own icons; see .hp-badge in home.css. */
.pr-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 11px;
	border: 1px solid currentColor;
	color: var(--pr-navy);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	background: #fff;
}

.pr-badge svg { width: 20px; height: 20px; }

/* ---- Finish swatches ----------------------------------------------------- */

.pr-swatch {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--pr-sw, #ccc);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

.pr-swatch--sm { width: 13px; height: 13px; }

/* ---- Results head: count + sort ----------------------------------------- */

.pr-results { min-width: 0; }

.pr-results__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.pr-results__count {
	margin: 0;
	font-size: 15px;
	color: var(--pr-muted);
}

.pr-results__count strong { color: var(--pr-navy); font-weight: 600; }

.pr-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.pr-sort__label { font-size: 14px; color: var(--pr-muted); white-space: nowrap; }

.pr .pr-sort__select {
	min-width: 172px;
	min-height: 40px;
	padding: 6px 40px 6px 16px;
	font-size: 14px;
	color: var(--pr-navy);
	background:
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%23181d46' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
		right 15px center no-repeat #fff;
	border: 1px solid var(--pr-navy);
	border-radius: 2px;
	appearance: none;
	cursor: pointer;
}

@media (max-width: 479px) {
	.pr-sort__label { display: none; }
}

/* ---- Active filter chips ------------------------------------------------- */

.pr-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: -6px 0 18px;
}

.pr .pr-active__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	padding: 5px 12px;
	font-size: 13px;
	color: var(--pr-navy);
	background: var(--pr-band-blue);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
}

.pr .pr-active__chip::after {
	content: '\00d7';
	font-size: 15px;
	line-height: 1;
	opacity: 0.7;
}

.pr .pr-active__chip:hover { background: var(--pr-lightblue); }

.pr .pr-active__clear {
	padding: 5px 4px;
	font-size: 13px;
	color: var(--pr-muted);
	background: transparent;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

.pr .pr-active__clear:hover { color: var(--pr-navy); }

/* ---- Product grid -------------------------------------------------------- */

.pr-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px 12px;
}

@media (min-width: 768px) {
	.pr-grid { gap: 36px 20px; }
}

@media (min-width: 1200px) {
	.pr-grid { grid-template-columns: repeat(3, 1fr); gap: 44px 28px; }
}

.pr-card { display: flex; }

.pr-card.is-hidden { display: none; }

.pr-card__link {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.pr-card__media {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 9%;
	background: var(--pr-band-grey);
	border-radius: 4px;
	overflow: hidden;
}

.pr-card__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	/* white studio cut-outs sit naturally on the brand grey */
	mix-blend-mode: multiply;
	transition: transform 0.3s ease;
}

.pr-card__link:hover .pr-card__media img { transform: scale(1.04); }

.pr-card__title {
	margin: 12px 0 8px;
	color: var(--pr-navy);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

@media (min-width: 768px) {
	.pr-card__title { margin: 14px 0 10px; font-size: 17px; }
}

.pr-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 10px;
}

/* Compact badges inside cards on small screens. 16px is the smallest the
   official icons stay legible at. */
.pr-card .pr-badge { font-size: 11px; padding: 4px 8px; gap: 5px; }
.pr-card .pr-badge svg { width: 16px; height: 16px; }

.pr-card__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-bottom: 12px;
	font-size: 13px;
	color: var(--pr-muted);
}

.pr-card__people {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.pr-card__people .hp-person-icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

/* Card button: smaller on phones. */
.pr .pr-card__btn { min-height: 40px; padding: 9px 18px; font-size: 14px; }

@media (min-width: 768px) {
	.pr-card__badges { gap: 6px; }
	.pr-card .pr-badge { font-size: 13px; padding: 4px 11px; gap: 7px; }
	.pr-card .pr-badge svg { width: 20px; height: 20px; }
	.pr-card__meta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		margin-bottom: 14px;
		font-size: 14px;
	}
	.pr .pr-card__btn { min-height: 48px; padding: 12px 28px; font-size: 16px; }
}

.pr-card__finishes {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.pr-card__finishes-more { font-size: 12px; color: var(--pr-muted); }

.pr-card__btn { margin-top: auto; width: 100%; }

/* The card is one big link, so the theme's global a:hover fade would dim the
   whole card. Opt out and let the button carry the hover. */
.pr .pr-card__link:hover { opacity: 1; }

.pr-card__link:hover .pr-card__btn {
	background: #fff;
	color: var(--pr-navy);
	box-shadow: inset 0 0 0 1px var(--pr-navy);
}

@media (min-width: 900px) {
	.pr-card__title { font-size: 18px; }
}

/* Line cards up row by row. Each card spans six grid rows and shares them
   through subgrid, so the title, badges, capacity, finishes and button sit
   level with the card beside it, even when that card has a longer title or
   no data for a row. The gutter between card rows moves onto the card as
   padding, because a grid row-gap would also open between a card's own
   rows and leave every empty row gap-tall. Browsers without subgrid keep
   the flex layout above. */
@supports (grid-template-rows: subgrid) {
	.pr-grid {
		--pr-row-gap: 28px;
		row-gap: 0;
		margin-bottom: calc(-1 * var(--pr-row-gap));
	}

	.pr-card {
		display: grid;
		grid-row: span 6;
		grid-template-rows: subgrid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
		padding-bottom: var(--pr-row-gap);
	}

	.pr-card__link {
		display: grid;
		grid-row: 1 / -1;
		grid-template-rows: subgrid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0;
	}

	.pr-card__media { grid-row: 1; }
	.pr-card__title { grid-row: 2; }
	.pr-card__badges { grid-row: 3; align-self: start; }

	/* Phones stack capacity over finishes, so each gets its own row. */
	.pr-card__meta { display: contents; }
	.pr-card__people { grid-row: 4; align-self: start; }
	.pr-card__finishes { grid-row: 5; align-self: start; margin-top: 6px; }

	.pr-card__btn { grid-row: 6; align-self: end; margin-top: 12px; }

	@media (min-width: 768px) {
		.pr-grid { --pr-row-gap: 36px; }

		/* Side by side from here, so they share one row again. */
		.pr-card__meta { display: flex; grid-row: 4 / 6; align-self: start; margin-bottom: 0; }
		.pr-card__finishes { margin-top: 0; }
		.pr-card__btn { margin-top: 14px; }
	}

	@media (min-width: 1200px) {
		.pr-grid { --pr-row-gap: 44px; }
	}
}

/* ---- Empty state ---------------------------------------------------------- */

.pr-empty {
	padding: 72px 20px;
	text-align: center;
}

.pr-empty__title {
	margin: 0 0 8px;
	color: var(--pr-navy);
	font-size: 22px;
	font-weight: 600;
}

.pr-empty__text {
	margin: 0 0 24px;
	color: var(--pr-muted);
	font-size: 16px;
}

/* ---- /shop/ banner and pagination -------------------------------------------
   /shop/ keeps the legacy WooCommerce archive (woocommerce/archive-product.php)
   for its products. Only its banner (template-parts/shop/banner.php, the
   .pr-hero above) and its pagination are restyled. The pagination copies the
   news hub's (.nw-pagination in css/news-page.css), and has to beat the cyan
   boxes in css/desktop.css, which also hides it on product archives and sets
   it flush against the footer. */

body.woocommerce-shop .woocommerce-pagination {
	display: block;
	width: 100%;
	margin: 48px 0 80px;
}

body.woocommerce-shop .woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-shop .woocommerce-pagination li {
	display: block;
	margin: 0;
	padding: 0;
}

body.woocommerce-shop .woocommerce-pagination :is(a, span).page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: 2px;
	background: #f5f5f5;
	color: #181d46;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

body.woocommerce-shop .woocommerce-pagination a.page-numbers:hover,
body.woocommerce-shop .woocommerce-pagination a.page-numbers:focus-visible {
	opacity: 1;
	border: 0;
	background: #90cdeb;
	color: #181d46;
}

body.woocommerce-shop .woocommerce-pagination a.page-numbers:focus-visible {
	outline: 2px solid #181d46;
	outline-offset: 2px;
}

body.woocommerce-shop .woocommerce-pagination span.page-numbers.current {
	border: 0;
	background: #181d46;
	color: #fff;
}

body.woocommerce-shop .woocommerce-pagination span.page-numbers.dots {
	background: transparent;
	color: #6b6b72;
}

@media (max-width: 767px) {
	body.woocommerce-shop .woocommerce-pagination { margin: 32px 0 56px; }
}

/* ---- Body scroll lock while the drawer is open ---------------------------- */

body.pr-no-scroll { overflow: hidden; }

/* ---- Reduced motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.pr-filters,
	.pr-scrim,
	.pr-card__media img,
	.pr .pr-btn,
	.pr .pr-chip { transition: none; }
}