.mpf {
	--mpf-red: #8b0a12;
	--mpf-ink: #1a1a1a;
	--mpf-muted: #5f5f5f;
	--mpf-line: #3a3a3a;
	--mpf-soft: #e4e4e4;
	--mpf-cta-bg: #f3f3f3;
	--mpf-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--mpf-head: "Montserrat", system-ui, sans-serif;
	--mpf-body: "Inter", system-ui, sans-serif;
	font-family: var(--mpf-body);
	color: var(--mpf-ink);
}

.mpf-mono { font-family: var(--mpf-mono); }

/* ---------- Filters ---------- */
.mpf-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 24px;
}
.mpf-field { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.mpf-field label {
	font: 500 11px/1 var(--mpf-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mpf-red);
}
.mpf-field select {
	appearance: none;
	-webkit-appearance: none;
	height: 42px;
	padding: 0 36px 0 12px;
	border: 1px solid var(--mpf-line);
	border-radius: 0;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
	font: 400 14px/1 var(--mpf-body);
	color: var(--mpf-ink);
	cursor: pointer;
}
.mpf-field select:focus { outline: 2px solid var(--mpf-red); outline-offset: 1px; }
.mpf-reset {
	height: 42px;
	padding: 0 18px;
	border: 1px solid var(--mpf-line);
	border-radius: 0;
	background: transparent;
	font: 500 11px/1 var(--mpf-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mpf-ink);
	cursor: pointer;
}
.mpf-reset:hover { background: var(--mpf-ink); color: #fff; }
.mpf-count {
	margin-left: auto;
	font: 400 11px/42px var(--mpf-mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mpf-muted);
}

/* ---------- Grid ---------- */
.mpf-results { position: relative; transition: opacity .2s; }
.mpf.is-loading .mpf-results { opacity: .4; pointer-events: none; }

.mpf-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	border-top: 1px solid var(--mpf-line);
	border-left: 1px solid var(--mpf-line);
}

.mpf-card {
	display: flex;
	flex-direction: column;
	padding: 20px 20px 24px;
	border-right: 1px solid var(--mpf-line);
	border-bottom: 1px solid var(--mpf-line);
	background: #fff;
}
.mpf-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--mpf-soft);
	margin-bottom: 24px;
}
.mpf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: transform .4s ease;
}
.mpf-card:hover .mpf-card__media img { transform: scale(1.04); }

.mpf-card__cat {
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--mpf-red);
	margin-bottom: 14px;
}
.mpf-card__title {
	margin: 0 0 14px;
	font: 700 21px/1.3 var(--mpf-head);
	text-transform: uppercase;
	letter-spacing: .01em;
}
.mpf-card__title a { color: inherit; text-decoration: none; }
.mpf-card__title a:hover { color: var(--mpf-red); }
.mpf-card__excerpt {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--mpf-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.mpf-card__more {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--mpf-soft);
	color: var(--mpf-red);
	display: flex;
}
.mpf-card__more svg { transition: transform .2s; }
.mpf-card__more:hover svg { transform: translateX(4px); }

/* CTA tile */
.mpf-card--cta {
	background: var(--mpf-cta-bg);
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px 24px;
}
.mpf-cta__sys { font-size: 10px; letter-spacing: .25em; color: #9a9a9a; }
.mpf-cta__note { margin: 14px 0 28px; max-width: 170px; font-size: 14px; font-style: italic; line-height: 1.5; }
.mpf-cta__btn {
	padding: 8px 22px;
	border: 2px solid var(--mpf-ink);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mpf-ink);
	text-decoration: none;
}
.mpf-cta__btn:hover { background: var(--mpf-ink); color: #fff; }

/* Empty state */
.mpf-empty {
	border: 1px solid var(--mpf-line);
	padding: 60px 24px;
	text-align: center;
	background: var(--mpf-cta-bg);
}
.mpf-empty .mpf-mono { font-size: 10px; letter-spacing: .25em; color: #9a9a9a; }
.mpf-empty p { margin: 12px 0 0; font-style: italic; }

/* ---------- Pagination ---------- */
.mpf-pagination { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 32px; justify-content: center; }
.mpf-pagination:empty { display: none; }
.mpf-pagination .page-numbers {
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mpf-line);
	font: 500 13px/1 var(--mpf-mono);
	color: var(--mpf-ink);
	text-decoration: none;
}
.mpf-pagination a.page-numbers:hover { background: var(--mpf-ink); color: #fff; }
.mpf-pagination .page-numbers.current { background: var(--mpf-red); border-color: var(--mpf-red); color: #fff; }
.mpf-pagination .page-numbers.dots { border-color: transparent; }

/* ---------- Related products ---------- */
.mpf-related {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.mpf-rcard {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--mpf-line);
	background: #fff;
}
.mpf-rcard__media {
	display: block;
	aspect-ratio: 7 / 5;
	overflow: hidden;
	background: var(--mpf-soft);
}
.mpf-rcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.mpf-rcard:hover .mpf-rcard__media img { transform: scale(1.04); }
.mpf-rcard__body {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 24px 22px 40px;
}
.mpf-rcard__label {
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mpf-red);
	margin-bottom: 14px;
}
.mpf-rcard__title {
	margin: 0 0 16px;
	font: 700 21px/1.35 var(--mpf-head);
	text-transform: uppercase;
	letter-spacing: .01em;
}
.mpf-rcard__title a { color: inherit; text-decoration: none; }
.mpf-rcard__title a:hover { color: var(--mpf-red); }
.mpf-rcard__excerpt {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--mpf-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

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

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.mpf-grid,
	.mpf-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.mpf-grid,
	.mpf-related { grid-template-columns: 1fr; }
	.mpf-rcard__title { font-size: 19px; }
	.mpf-field { flex: 1 1 100%; }
	.mpf-count { margin-left: 0; line-height: 1; }
	.mpf-card__title { font-size: 19px; }
}
