/**
 * Neuro Product Grid
 *
 * Clinical research-peptide product cards. Defaults live in CSS custom
 * properties on .npg-grid / .npg-card so Elementor style controls (which write
 * --npg-* vars on the wrapper) can override any token without specificity wars.
 */

.npg-grid {
	/* Layout tokens (overridden by responsive Elementor controls). */
	--npg-columns: 4;
	--npg-gap: 24px;

	/* Palette — derived from the supplied brand reference. */
	--npg-card-bg: #faf8f4;
	--npg-card-border: #e4e0d7;
	--npg-ink: #1c2433;
	--npg-muted: #5b6270;
	--npg-accent: #3a5ba8;
	--npg-divider: #d7cbb1;
	--npg-badge-bg: #11172a;
	--npg-badge-ink: #cdd4e2;

	display: grid;
	grid-template-columns: repeat(var(--npg-columns), minmax(0, 1fr));
	gap: var(--npg-gap);
	width: 100%;
}

/* ---- Card shell ---------------------------------------------------------- */

.npg-card {
	display: flex;
	flex-direction: column;
	background: var(--npg-card-bg);
	border: 1px solid var(--npg-card-border);
	/* Sharp corners by default — reads precise/clinical. */
	border-radius: 0;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.npg-card:hover,
.npg-card:focus-within {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--npg-accent) 35%, var(--npg-card-border));
	box-shadow: 0 18px 40px -24px rgba(17, 23, 42, 0.45);
}

/* ---- Media --------------------------------------------------------------- */

.npg-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1.05;
	overflow: hidden;
	background: #0f1626; /* fallback behind the product photo while it loads */
}

.npg-card__media .npg-card__image,
.npg-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.npg-card:hover .npg-card__image,
.npg-card:hover .npg-card__media img {
	transform: scale(1.04);
}

.npg-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	padding: 5px 10px;
	background: var(--npg-badge-bg);
	color: var(--npg-badge-ink);
	font-family: "SFMono-Regular", "Roboto Mono", ui-monospace, "Consolas", monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
}

/* ---- Body ---------------------------------------------------------------- */

.npg-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 24px 24px 26px;
}

.npg-card__eyebrow {
	margin: 0 0 10px;
	color: var(--npg-accent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.npg-card__title {
	margin: 0 0 12px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.15;
	color: var(--npg-ink);
}

.npg-card__title a {
	color: inherit;
	text-decoration: none;
}

.npg-card__title a:hover {
	text-decoration: none;
	opacity: 0.85;
}

.npg-card__excerpt {
	margin: 0 0 22px;
	color: var(--npg-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

/* Push the footer to the bottom so cards in a row align. */
.npg-card__footer {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid var(--npg-divider);
}

.npg-card__price {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--npg-ink);
}

/* WooCommerce wraps prices in <span class="amount">; keep it inline. */
.npg-card__price .woocommerce-Price-amount {
	white-space: nowrap;
}

.npg-card__price del {
	margin-right: 6px;
	opacity: 0.5;
	font-size: 0.7em;
}

.npg-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--npg-ink);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.npg-card__arrow {
	transition: transform 0.3s ease;
}

.npg-card__link:hover {
	color: var(--npg-accent);
}

.npg-card__link:hover .npg-card__arrow {
	transform: translateX(4px);
}

/* ---- Accessibility ------------------------------------------------------- */

.npg-card a:focus-visible {
	outline: 2px solid var(--npg-accent);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.npg-empty {
	padding: 24px;
	border: 1px dashed var(--npg-card-border, #e4e0d7);
	color: #5b6270;
	font-size: 0.95rem;
	text-align: center;
}

/* When a filtered query comes back empty the message sits inside the grid, so
   it has to span every column rather than occupy one cell. */
.npg-grid > .npg-empty {
	grid-column: 1 / -1;
}

/* ---- Responsive fallback (when responsive controls aren't set) ----------- */

@media (max-width: 1024px) {
	.npg-grid {
		--npg-columns: 2;
	}
}

@media (max-width: 600px) {
	.npg-grid {
		--npg-columns: 1;
	}
}

/* ========================================================================== *
 * Commerce layout — dosage chips, "From" pricing, quick-checkout bar.
 * Activated by the .npg-card--commerce modifier; reuses the shared tokens
 * above and adds its own --npg-cta-* / --npg-chip-* tokens (overridable by the
 * widget's Commerce CTA style controls).
 * ========================================================================== */

.npg-card--commerce {
	--npg-cta-bg: #2b4a8b;
	--npg-cta-ink: #ffffff;
	--npg-chip-border: #d9d4c8;
	--npg-chip-ink: #5b6270;
	--npg-chip-active: var(--npg-accent);
}

/* No body padding at the bottom — the checkout bar sits flush to the edges. */
.npg-card--commerce .npg-card__body {
	padding: 20px 20px 0;
}

/* ---- Meta row (SKU left, category right) --------------------------------- */

.npg-card__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.npg-card__sku {
	font-family: "SFMono-Regular", "Roboto Mono", ui-monospace, "Consolas", monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--npg-muted);
}

.npg-card__meta .npg-card__eyebrow {
	margin: 0;
	text-align: right;
}

.npg-card--commerce .npg-card__title {
	margin: 0 0 10px;
}

.npg-card--commerce .npg-card__excerpt {
	margin: 0 0 16px;
}

/* ---- Dosage chips -------------------------------------------------------- */

.npg-card__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

.npg-chip {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	border: 1px solid var(--npg-chip-border);
	background: transparent;
	color: var(--npg-chip-ink);
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 7px 12px;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.npg-chip:hover {
	border-color: var(--npg-chip-active);
	color: var(--npg-ink);
}

.npg-chip.is-active {
	border-color: var(--npg-chip-active);
	color: var(--npg-ink);
	background: color-mix(in srgb, var(--npg-chip-active) 8%, transparent);
}

.npg-chip:focus-visible {
	outline: 2px solid var(--npg-accent);
	outline-offset: 2px;
}

/* ---- Pricing + choose-size row ------------------------------------------- */

.npg-card--commerce .npg-card__footer {
	border-top: 0;
	padding-top: 0;
	align-items: center;
	margin-top: auto;
	margin-bottom: 18px;
}

.npg-card__pricing {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.npg-card__price-prefix {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--npg-muted);
}

.npg-card--commerce .npg-card__price {
	font-size: 1.2rem;
}

.npg-card__price-suffix {
	font-size: 12px;
	color: var(--npg-muted);
}

.npg-card__choose {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--npg-card-border);
	padding: 9px 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--npg-ink);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.npg-card__choose:hover {
	border-color: var(--npg-accent);
	color: var(--npg-accent);
}

.npg-card__choose .npg-card__arrow {
	transition: transform 0.3s ease;
}

.npg-card__choose:hover .npg-card__arrow {
	transform: translateX(4px);
}

/* ---- Full-width quick-checkout bar --------------------------------------- */

.npg-card__checkout {
	display: block;
	/* Span the full card width by cancelling the body's horizontal padding. */
	width: auto;
	margin: 0 -20px;
	padding: 14px 16px;
	background: var(--npg-cta-bg);
	color: var(--npg-cta-ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-align: center;
	text-decoration: none;
	transition: background 0.25s ease;
}

.npg-card__checkout:hover,
.npg-card__checkout:focus-visible {
	background: color-mix(in srgb, #000 14%, var(--npg-cta-bg));
	color: var(--npg-cta-ink);
}

.npg-card__checkout:focus-visible {
	outline: 2px solid var(--npg-accent);
	outline-offset: -2px;
}

/* ========================================================================== *
 * Add to cart — the AJAX button that appears on every card style. Tokenised on
 * .npg-card so the widget's "Add to cart" style controls can restyle it, and
 * sized to read as the card's primary action without competing with the
 * Commerce layout's quick-checkout bar.
 * ========================================================================== */

.npg-card {
	--npg-atc-bg: transparent;
	--npg-atc-ink: #1c2433;
	--npg-atc-border: #cfc9bb;
	--npg-atc-bg-hover: #1c2433;
	--npg-atc-ink-hover: #ffffff;
	--npg-atc-border-hover: #1c2433;
	--npg-atc-radius: 0px;
}

/* Sits at the bottom of the card. When a price/link footer is present that
   footer already claims the free space, so the button just spaces off it. */
.npg-card__cart {
	margin-top: auto;
}

.npg-card__footer + .npg-card__cart {
	margin-top: 14px;
}

.npg-card--commerce .npg-card__cart {
	margin-bottom: 16px;
}

/* The Commerce footer already carries its own 18px gap below it, so the button
   sits straight underneath rather than adding a second one. */
.npg-card--commerce .npg-card__footer + .npg-card__cart {
	margin-top: 0;
}

.npg-atc {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px 16px;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: var(--npg-atc-ink);
	background: var(--npg-atc-bg);
	border: 1px solid var(--npg-atc-border);
	border-radius: var(--npg-atc-radius);
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.npg-atc:hover,
.npg-atc:focus-visible {
	color: var(--npg-atc-ink-hover);
	background: var(--npg-atc-bg-hover);
	border-color: var(--npg-atc-border-hover);
}

.npg-atc:focus-visible {
	outline: 2px solid var(--npg-accent);
	outline-offset: 2px;
}

/* Confirmation + failure states, held briefly by the script. */
.npg-atc.is-added,
.npg-atc.is-added:hover {
	color: #ffffff;
	background: #2e7d5b;
	border-color: #2e7d5b;
}

.npg-atc.is-error,
.npg-atc.is-error:hover {
	color: #ffffff;
	background: #9b2c2c;
	border-color: #9b2c2c;
}

.npg-atc.is-disabled,
.npg-atc[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

.npg-atc__spinner {
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	display: none;
	flex: none;
}

.npg-atc.is-loading {
	pointer-events: none;
}

.npg-atc.is-loading .npg-atc__spinner {
	display: inline-block;
	animation: npg-spin 0.6s linear infinite;
}

/* ---- Motion preferences -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.npg-atc,
	.npg-card,
	.npg-card__image,
	.npg-card__media img,
	.npg-card__arrow,
	.npg-chip,
	.npg-card__choose,
	.npg-card__checkout {
		transition: none;
	}

	.npg-card:hover {
		transform: none;
	}

	.npg-card:hover .npg-card__image,
	.npg-card:hover .npg-card__media img {
		transform: none;
	}
}

/* ========================================================================== *
 * Posts layout — "Latest articles" card: featured image, category · date ·
 * reading-time meta line, serif title, excerpt, and a "Read more" link sitting
 * below a divider. Reuses the shared card shell + tokens above.
 * ========================================================================== */

.npg-card--post .npg-card__media {
	/* A light placeholder suits article imagery (vs the dark product default).
	   Use the "Image aspect ratio" control to switch this card to Landscape. */
	background: #ece7df;
}

/* Meta line: "RESEARCH · JAN 12, 2026 · 8 MIN". Category in accent, the rest
   muted, with a dot separator inserted between visible items. */
.npg-card--post .npg-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.npg-card--post .npg-card__meta > * {
	color: var(--npg-muted);
}

.npg-card--post .npg-card__meta .npg-card__eyebrow {
	margin: 0;
	color: var(--npg-accent);
}

.npg-card--post .npg-card__meta > * + *::before {
	content: "\00B7";
	margin: 0 8px;
	color: var(--npg-muted);
}

/* Left-align the "Read more" link under its divider. */
.npg-card--post .npg-card__footer {
	justify-content: flex-start;
}

.npg-card--post .npg-card__link {
	color: var(--npg-accent);
}

.npg-card--post .npg-card__link:hover {
	color: var(--npg-ink);
}

/* ========================================================================== *
 * Pagination — Load More button + numbered control. All colours/spacing are
 * tokenised on .npg-pagination so the widget's Pagination style controls can
 * override any of them (--npg-pg-*).
 * ========================================================================== */

.npg-pagination {
	--npg-pg-gap: 8px;
	--npg-pg-radius: 0px;
	--npg-pg-border-width: 1px;
	--npg-pg-ink: var(--npg-ink, #1c2433);
	--npg-pg-bg: transparent;
	--npg-pg-border: var(--npg-card-border, #e4e0d7);
	--npg-pg-ink-hover: var(--npg-accent, #3a5ba8);
	--npg-pg-bg-hover: transparent;
	--npg-pg-border-hover: var(--npg-accent, #3a5ba8);
	--npg-pg-ink-active: #ffffff;
	--npg-pg-bg-active: var(--npg-accent, #3a5ba8);
	--npg-pg-border-active: var(--npg-accent, #3a5ba8);

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--npg-pg-gap);
	margin-top: 36px;
}

/* An empty control (single page / last page reached) leaves no gap. */
.npg-pagination:empty {
	display: none;
	margin: 0;
}

.npg-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--npg-pg-gap);
}

.npg-page,
.npg-load-more {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--npg-pg-ink);
	background: var(--npg-pg-bg);
	border: var(--npg-pg-border-width) solid var(--npg-pg-border);
	border-radius: var(--npg-pg-radius);
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.npg-page {
	min-width: 42px;
	min-height: 42px;
	padding: 9px 12px;
}

.npg-page:hover,
.npg-load-more:hover {
	color: var(--npg-pg-ink-hover);
	background: var(--npg-pg-bg-hover);
	border-color: var(--npg-pg-border-hover);
}

.npg-page.is-active {
	color: var(--npg-pg-ink-active);
	background: var(--npg-pg-bg-active);
	border-color: var(--npg-pg-border-active);
	cursor: default;
}

.npg-page--gap {
	border: 0;
	min-width: 1.5em;
	cursor: default;
	color: var(--npg-muted, #5b6270);
}

.npg-page--arrow.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.npg-page:focus-visible,
.npg-load-more:focus-visible {
	outline: 2px solid var(--npg-accent, #3a5ba8);
	outline-offset: 2px;
}

/* Load More reads as a call-to-action: wider and a touch more letter-spacing. */
.npg-load-more {
	padding: 13px 30px;
	letter-spacing: 0.04em;
}

.npg-load-more__spinner {
	width: 15px;
	height: 15px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	display: none;
}

/* ---- Loading state ------------------------------------------------------- */

.npg-wrap.is-loading .npg-pagination {
	pointer-events: none;
}

.npg-wrap.is-loading .npg-load-more__spinner {
	display: inline-block;
	animation: npg-spin 0.6s linear infinite;
}

.npg-wrap.is-loading .npg-grid {
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

@keyframes npg-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.npg-page,
	.npg-load-more,
	.npg-wrap.is-loading .npg-grid {
		transition: none;
	}

	.npg-wrap.is-loading .npg-load-more__spinner,
	.npg-wrap.is-loading .npg-infinite__spinner,
	.npg-atc.is-loading .npg-atc__spinner {
		animation-duration: 1.5s;
	}
}

/* ========================================================================== *
 * Infinite scroll — a sentinel the script observes. The button inside it is
 * the no-JS / no-IntersectionObserver fallback and disappears the moment the
 * observer takes over.
 * ========================================================================== */

.npg-infinite {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	min-height: 48px;
}

.npg-wrap--observing .npg-load-more--fallback,
.npg-infinite__status {
	display: none;
}

.npg-infinite__spinner {
	width: 22px;
	height: 22px;
	border: 2px solid var(--npg-pg-border, #e4e0d7);
	border-top-color: var(--npg-accent, #3a5ba8);
	border-radius: 50%;
	display: none;
}

/* Only spin while a page is actually in flight. */
.npg-wrap--observing.is-loading .npg-infinite__spinner {
	display: block;
	animation: npg-spin 0.7s linear infinite;
}

/* ========================================================================== *
 * Filter bar — category chips, search and sort. Opt-in per widget instance
 * (shop page); tokenised on .npg-filters for the Filter bar style controls.
 * ========================================================================== */

.npg-filters {
	--npg-fl-ink: #1c2433;
	--npg-fl-muted: #5b6270;
	--npg-fl-border: #ddd7cb;
	--npg-fl-active-bg: #1c2433;
	--npg-fl-active-ink: #ffffff;
	--npg-fl-radius: 0px;
	/* One type ramp for the whole bar — chips, price, sort and count read as a
	   single control strip rather than borrowing the card's serif display face. */
	--npg-fl-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 28px;
	font-family: var(--npg-fl-font);
	font-size: 14px;
	font-weight: 400;
}

.npg-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.npg-filters__label {
	font-family: var(--npg-fl-font);
	font-size: 14px;
	font-weight: 400;
	color: var(--npg-fl-muted);
}

/* ---- Price range --------------------------------------------------------- */

.npg-filters__price {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.npg-price-field {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.npg-price-field__symbol {
	position: absolute;
	left: 12px;
	font-family: var(--npg-fl-font);
	font-size: 14px;
	font-weight: 400;
	color: var(--npg-fl-muted);
	pointer-events: none;
}

.npg-filter-price {
	width: 104px;
	padding: 11px 12px;
	font-family: var(--npg-fl-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--npg-fl-ink);
	background: transparent;
	border: 1px solid var(--npg-fl-border);
	border-radius: var(--npg-fl-radius);
	transition: border-color 0.2s ease;
}

/* Inset the text only when a currency symbol is actually sitting in the field. */
.npg-price-field__symbol + .npg-filter-price {
	padding-left: 28px;
}

.npg-filter-price::placeholder {
	color: var(--npg-fl-muted);
	opacity: 0.75;
}

.npg-filter-price:focus {
	outline: none;
	border-color: var(--npg-accent, #3a5ba8);
}

/* The number spinners crowd a 104px field and add nothing here. */
.npg-filter-price::-webkit-outer-spin-button,
.npg-filter-price::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.npg-filter-price {
	-moz-appearance: textfield;
	appearance: textfield;
}

.npg-price-dash {
	color: var(--npg-fl-muted);
}

/* ---- Sort ---------------------------------------------------------------- */

.npg-filters__sort {
	flex: 0 0 auto;
	margin-left: auto;
}

.npg-filter-sort {
	padding: 11px 12px;
	font-family: var(--npg-fl-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--npg-fl-ink);
	background: transparent;
	border: 1px solid var(--npg-fl-border);
	border-radius: var(--npg-fl-radius);
	cursor: pointer;
}

.npg-filter-sort:focus {
	outline: none;
	border-color: var(--npg-accent, #3a5ba8);
}

/* ---- Category chips ------------------------------------------------------ */

.npg-filters__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.npg-filter-cat {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding: 10px 16px;
	font-family: var(--npg-fl-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--npg-fl-muted);
	background: transparent;
	border: 1px solid var(--npg-fl-border);
	border-radius: var(--npg-fl-radius);
	transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.npg-filter-cat:hover {
	color: var(--npg-fl-ink);
	border-color: var(--npg-fl-ink);
}

.npg-filter-cat.is-active {
	color: var(--npg-fl-active-ink);
	background: var(--npg-fl-active-bg);
	border-color: var(--npg-fl-active-bg);
}

.npg-filter-cat:focus-visible {
	outline: 2px solid var(--npg-accent, #3a5ba8);
	outline-offset: 2px;
}

/* ---- Count + clear ------------------------------------------------------- */

.npg-filters__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--npg-fl-border);
}

.npg-results-count {
	font-family: var(--npg-fl-font);
	font-size: 14px;
	font-weight: 400;
	color: var(--npg-fl-muted);
}

.npg-filters__clear {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding: 0;
	font-family: var(--npg-fl-font);
	font-size: 14px;
	font-weight: 400;
	text-decoration: underline;
	color: var(--npg-fl-muted);
	background: none;
	border: 0;
}

.npg-filters__clear:hover {
	color: var(--npg-fl-ink);
}

.npg-filters__clear[hidden] {
	display: none;
}

@media (max-width: 600px) {
	.npg-filters__row {
		flex-direction: column;
		align-items: stretch;
	}

	.npg-filters__sort,
	.npg-filter-sort {
		width: 100%;
		margin-left: 0;
	}

	.npg-filters__price {
		justify-content: space-between;
	}

	.npg-filter-price {
		width: 100%;
	}

	.npg-price-field {
		flex: 1 1 0;
	}

	/* Let the chip row scroll sideways instead of stacking into a tall block. */
	.npg-filters__cats {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
	}

	.npg-filter-cat {
		flex: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.npg-filter-cat,
	.npg-filter-price {
		transition: none;
	}
}