/* ============================================================
 * Memento Product Filters — Frontend CSS
 * Base + 3 layouts (vertical / horizontal / grid)
 *       + 3 presets (clean / modern / heritage)
 *       + responsive (>= 900px, >= 560px breakpoints)
 * ============================================================ */

/* ---------- BASE TOKENS ---------- */
.mpf-wrapper {
	--mpf-primary: #1a365d;
	--mpf-accent: #d4a437;
	--mpf-bg: #ffffff;
	--mpf-border: #e5e7eb;
	--mpf-text: #111827;
	--mpf-muted: #6b7280;
	--mpf-hover-bg: #f3f4f6;
	--mpf-active-bg: var(--mpf-primary);
	--mpf-active-text: #ffffff;
	--mpf-radius: 6px;
	--mpf-gap: 1rem;
	--mpf-field-bg: #f9fafb;

	font-family: inherit;
	color: var(--mpf-text);
	box-sizing: border-box;
}
.mpf-wrapper *,
.mpf-wrapper *::before,
.mpf-wrapper *::after { box-sizing: border-box; }

/* ---------- LAYOUTS ---------- */
.mpf-layout-vertical.mpf-with-grid {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 2rem;
	align-items: start;
}
.mpf-layout-horizontal.mpf-with-grid {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.mpf-layout-horizontal .mpf-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mpf-gap);
	align-items: flex-start;
}
.mpf-layout-horizontal .mpf-field {
	flex: 1 1 200px;
	min-width: 180px;
	border-bottom: none;
	padding: 0;
	margin: 0;
}
.mpf-layout-grid .mpf-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--mpf-gap);
}
.mpf-layout-grid .mpf-field {
	border-bottom: none;
	padding: 0;
	margin: 0;
}

/* ---------- PANEL ---------- */
.mpf-filters-panel {
	background: var(--mpf-bg);
	padding: 1.25rem;
	border-radius: var(--mpf-radius);
	border: 1px solid var(--mpf-border);
}

/* ---------- FIELD ---------- */
.mpf-field {
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--mpf-border);
	padding-bottom: 1rem;
}
.mpf-field:last-of-type {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
.mpf-field-title {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 600;
	font-size: 0.95rem;
	background: none;
	border: none;
	padding: 0.25rem 0;
	cursor: pointer;
	color: var(--mpf-text);
	margin-bottom: 0.75rem;
	text-align: left;
	font-family: inherit;
}
.mpf-field-title:hover { color: var(--mpf-primary); }
.mpf-toggle-icon::before { content: '−'; font-size: 1.2rem; line-height: 1; }
.mpf-field-title.is-collapsed .mpf-toggle-icon::before { content: '+'; }

/* ---------- OPTIONS (checkbox/radio list) ---------- */
.mpf-options-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 260px;
	overflow-y: auto;
}
.mpf-options-list li { margin: 0; padding: 0; }
.mpf-options-list label {
	display: flex;
	align-items: center;
	padding: 0.35rem 0;
	cursor: pointer;
	font-size: 0.9rem;
	gap: 0.5rem;
	color: var(--mpf-text);
	font-weight: normal;
}
.mpf-options-list label:hover { color: var(--mpf-primary); }
.mpf-option-label { flex: 1; }
.mpf-option-count {
	color: var(--mpf-muted);
	font-size: 0.78rem;
	background: var(--mpf-field-bg);
	padding: 1px 7px;
	border-radius: 10px;
}

/* search input */
.mpf-options-search {
	width: 100%;
	padding: 0.5rem 0.65rem;
	margin-bottom: 0.5rem;
	border: 1px solid var(--mpf-border);
	border-radius: var(--mpf-radius);
	font-size: 0.9rem;
	font-family: inherit;
}

/* dropdown */
.mpf-dropdown {
	width: 100%;
	padding: 0.55rem 0.65rem;
	border: 1px solid var(--mpf-border);
	border-radius: var(--mpf-radius);
	background: var(--mpf-bg);
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--mpf-text);
}

/* button pills */
.mpf-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.mpf-button-option { margin: 0; }
.mpf-button-option input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.mpf-button-option span {
	display: inline-block;
	padding: 0.4rem 0.85rem;
	border: 1px solid var(--mpf-border);
	border-radius: 20px;
	font-size: 0.85rem;
	cursor: pointer;
	transition: all 0.15s;
	background: var(--mpf-bg);
	color: var(--mpf-text);
}
.mpf-button-option:hover span { border-color: var(--mpf-primary); }
.mpf-button-option input:checked + span {
	background: var(--mpf-primary);
	color: #fff;
	border-color: var(--mpf-primary);
}

/* range */
.mpf-range-inputs {
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
}
.mpf-range-inputs label {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.78rem;
	color: var(--mpf-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.mpf-range-inputs input {
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--mpf-border);
	border-radius: var(--mpf-radius);
	font-size: 0.9rem;
	font-family: inherit;
	width: 100%;
	color: var(--mpf-text);
	background: var(--mpf-bg);
}

/* active chips */
.mpf-active-chips {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--mpf-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
}
.mpf-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.65rem;
	background: var(--mpf-field-bg);
	border: 1px solid var(--mpf-border);
	border-radius: 16px;
	font-size: 0.8rem;
	color: var(--mpf-text);
}
.mpf-chip-remove {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	color: var(--mpf-muted);
	font-size: 1rem;
	line-height: 1;
}
.mpf-chip-remove:hover { color: var(--mpf-primary); }

/* actions */
.mpf-actions { margin-top: 1rem; }
.mpf-clear-all {
	background: none;
	border: 1px solid var(--mpf-border);
	color: var(--mpf-text);
	padding: 0.5rem 1rem;
	border-radius: var(--mpf-radius);
	cursor: pointer;
	font-size: 0.85rem;
	font-family: inherit;
	transition: all 0.15s;
}
.mpf-clear-all:hover {
	background: var(--mpf-primary);
	color: #fff;
	border-color: var(--mpf-primary);
}

.mpf-empty {
	color: var(--mpf-muted);
	font-size: 0.85rem;
	font-style: italic;
	margin: 0.5rem 0;
}

/* ---------- RESULTS ---------- */
.mpf-results-meta {
	margin-bottom: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--mpf-muted);
	font-size: 0.9rem;
	min-height: 1.5em;
}
.mpf-loading { color: var(--mpf-accent); font-weight: 500; }
.mpf-no-results {
	padding: 2rem;
	text-align: center;
	color: var(--mpf-muted);
	background: var(--mpf-field-bg);
	border-radius: var(--mpf-radius);
}

/* The product <ul> markup comes from WooCommerce. Style lightly. */
.mpf-products ul.products { margin: 0; padding: 0; list-style: none; }
.mpf-products .mpf-loading-overlay {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s;
}

/* pagination */
.mpf-pagination {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 2rem;
	flex-wrap: wrap;
}
.mpf-page-btn {
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--mpf-border);
	background: var(--mpf-bg);
	border-radius: var(--mpf-radius);
	cursor: pointer;
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--mpf-text);
	min-width: 2.5em;
}
.mpf-page-btn:hover { border-color: var(--mpf-primary); }
.mpf-page-btn.is-active {
	background: var(--mpf-primary);
	color: #fff;
	border-color: var(--mpf-primary);
	font-weight: 600;
}

/* ============================================================
 * PRESET: Clean (default — no overrides needed)
 * ============================================================ */

/* ============================================================
 * PRESET: Modern  (bold, dark panel, accent pills)
 * ============================================================ */
.mpf-preset-modern .mpf-filters-panel {
	background: var(--mpf-text);
	color: #fff;
	border: none;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.mpf-preset-modern .mpf-field { border-bottom-color: rgba(255, 255, 255, 0.1); }
.mpf-preset-modern .mpf-field-title {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.78rem;
}
.mpf-preset-modern .mpf-field-title:hover { color: var(--mpf-accent); }
.mpf-preset-modern .mpf-options-list label { color: #e5e7eb; }
.mpf-preset-modern .mpf-options-list label:hover { color: var(--mpf-accent); }
.mpf-preset-modern .mpf-option-count {
	color: rgba(255, 255, 255, 0.55);
	background: rgba(255, 255, 255, 0.08);
}
.mpf-preset-modern .mpf-dropdown,
.mpf-preset-modern .mpf-options-search,
.mpf-preset-modern .mpf-range-inputs input {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.15);
	color: #fff;
}
.mpf-preset-modern .mpf-range-inputs label { color: rgba(255, 255, 255, 0.5); }
.mpf-preset-modern .mpf-button-option span {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.2);
}
.mpf-preset-modern .mpf-button-option input:checked + span {
	background: var(--mpf-accent);
	border-color: var(--mpf-accent);
	color: #111;
}
.mpf-preset-modern .mpf-chip {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.15);
	color: #fff;
}
.mpf-preset-modern .mpf-chip-remove { color: rgba(255, 255, 255, 0.6); }
.mpf-preset-modern .mpf-clear-all {
	background: var(--mpf-accent);
	color: #111;
	border-color: var(--mpf-accent);
	font-weight: 600;
}
.mpf-preset-modern .mpf-clear-all:hover {
	background: #fff;
	border-color: #fff;
}
.mpf-preset-modern .mpf-active-chips { border-bottom-color: rgba(255, 255, 255, 0.1); }

/* ============================================================
 * PRESET: Heritage  (Greek-themed, serif, double border, gold accents)
 * ============================================================ */
.mpf-preset-heritage {
	--mpf-field-bg: #faf7f0;
	font-family: Georgia, 'Times New Roman', serif;
}
.mpf-preset-heritage .mpf-filters-panel {
	background: var(--mpf-field-bg);
	border: 2px solid var(--mpf-primary);
	border-radius: 2px;
	padding: 1.5rem;
	position: relative;
}
.mpf-preset-heritage .mpf-filters-panel::before {
	content: '';
	position: absolute;
	top: 6px; right: 6px; bottom: 6px; left: 6px;
	border: 1px solid var(--mpf-accent);
	pointer-events: none;
	border-radius: 1px;
}
.mpf-preset-heritage .mpf-field {
	border-bottom-style: dotted;
	border-bottom-color: var(--mpf-primary);
	border-bottom-width: 1px;
}
.mpf-preset-heritage .mpf-field-title {
	color: var(--mpf-primary);
	font-family: Georgia, serif;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
}
.mpf-preset-heritage .mpf-options-list label { font-family: Georgia, serif; }
.mpf-preset-heritage .mpf-button-option span {
	border-radius: 2px;
	font-family: Georgia, serif;
}
.mpf-preset-heritage .mpf-button-option input:checked + span {
	background: var(--mpf-primary);
	color: var(--mpf-accent);
	border-color: var(--mpf-accent);
}
.mpf-preset-heritage .mpf-chip {
	background: var(--mpf-primary);
	color: var(--mpf-accent);
	border-color: var(--mpf-primary);
	border-radius: 2px;
}
.mpf-preset-heritage .mpf-chip-remove { color: var(--mpf-accent); }
.mpf-preset-heritage .mpf-clear-all {
	background: var(--mpf-primary);
	color: var(--mpf-accent);
	border-color: var(--mpf-primary);
	border-radius: 2px;
	font-weight: 600;
	font-family: Georgia, serif;
	letter-spacing: 0.03em;
}
.mpf-preset-heritage .mpf-page-btn { border-radius: 2px; font-family: Georgia, serif; }
.mpf-preset-heritage .mpf-dropdown,
.mpf-preset-heritage .mpf-options-search,
.mpf-preset-heritage .mpf-range-inputs input {
	border-radius: 2px;
	font-family: Georgia, serif;
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width: 900px) {
	.mpf-layout-vertical.mpf-with-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.mpf-layout-horizontal .mpf-form {
		flex-direction: column;
		align-items: stretch;
	}
	.mpf-layout-horizontal .mpf-field { flex: 1 1 100%; }
	.mpf-filters-panel { padding: 1rem; }
}

/* ============================================================
 * v1.1 — HIERARCHICAL TREE + ZERO-COUNT + APPLY BUTTON
 * ============================================================ */

/* Nested sublist indentation for hierarchical taxonomies */
.mpf-options-tree ul.mpf-options-sublist {
	list-style: none;
	margin: 4px 0 4px 16px;
	padding: 0 0 0 10px;
	border-left: 1px dashed rgba(0,0,0,0.12);
}
.mpf-options-tree .mpf-option-depth-1 > label { font-size: 0.95em; opacity: 0.92; }
.mpf-options-tree .mpf-option-depth-2 > label { font-size: 0.9em;  opacity: 0.85; }
.mpf-options-tree .mpf-option-depth-3 > label { font-size: 0.88em; opacity: 0.8;  }

/* Preset-specific sublist borders */
.mpf-preset-modern    .mpf-options-tree ul.mpf-options-sublist { border-left-color: rgba(255,255,255,0.15); }
.mpf-preset-heritage  .mpf-options-tree ul.mpf-options-sublist { border-left: 1px dotted var(--mpf-accent); }

/* Zero-count option state (gets set after an AJAX round-trip refreshes counts) */
.mpf-option.mpf-opt-zero,
.mpf-button-option.mpf-opt-zero {
	opacity: 0.4;
	pointer-events: none;
}
.mpf-option.mpf-opt-zero .mpf-option-count,
.mpf-button-option.mpf-opt-zero .mpf-option-count {
	text-decoration: line-through;
}

/* Apply button (shown only when filter_mode = apply) */
.mpf-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
	flex-wrap: wrap;
}
.mpf-apply {
	flex: 1 1 auto;
	background: var(--mpf-primary);
	color: #fff;
	border: 1px solid var(--mpf-primary);
	padding: 8px 14px;
	font-weight: 500;
	cursor: pointer;
	border-radius: 6px;
	font-size: 14px;
}
.mpf-apply:hover  { filter: brightness(1.08); }
.mpf-apply:active { transform: translateY(1px); }

.mpf-preset-modern   .mpf-apply { background: var(--mpf-accent); border-color: var(--mpf-accent); color: #fff; }
.mpf-preset-heritage .mpf-apply {
	background: var(--mpf-primary);
	color: var(--mpf-accent);
	border-radius: 0;
	font-family: Georgia, serif;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 12px;
}

/* Horizontal layout: actions row sits at the end of the flex bar */
.mpf-layout-horizontal .mpf-actions {
	width: 100%;
	justify-content: flex-end;
	margin-top: 8px;
}

/* ============================================================
 * v1.1.2 — INLINE LINKS FILTER TYPE (archive bar)
 * ============================================================ */

/* Field in "links" mode: title is a plain centered header, no chevron */
.mpf-field-links .mpf-field-title {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 1.5em;
	font-weight: 500;
	background: transparent;
	border: 0;
	padding: 8px 0 12px;
	cursor: default;
	pointer-events: none;
}
.mpf-field-links .mpf-field-title .mpf-toggle-icon { display: none; }

.mpf-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0;
	row-gap: 6px;
}

.mpf-link-option {
	display: inline-flex;
	align-items: baseline;
	padding: 4px 14px;
	cursor: pointer;
	position: relative;
	line-height: 1.4;
	transition: color 0.15s ease, opacity 0.15s ease;
	user-select: none;
}

/* hide the actual checkbox; the label is the tappable target */
.mpf-link-option input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.mpf-link-label {
	font-size: 1rem;
}

.mpf-link-count {
	font-size: 0.85em;
	opacity: 0.65;
	margin-left: 4px;
}

/* Vertical separator between items (red, minimal) */
.mpf-link-option::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	height: 20px;
	background: var(--mpf-accent, #c00);
}
.mpf-link-option:last-child::after { display: none; }

/* Hover state */
.mpf-link-option:hover {
	color: var(--mpf-primary);
}
.mpf-link-option:hover .mpf-link-count { opacity: 1; }

/* Active/checked state — bolder, colored */
.mpf-link-option input:checked ~ .mpf-link-label {
	font-weight: 600;
	color: var(--mpf-primary);
}
.mpf-link-option input:checked ~ .mpf-link-count {
	color: var(--mpf-primary);
	opacity: 1;
}

/* Zero-count link options: dimmed, non-interactive */
.mpf-link-option.mpf-opt-zero {
	opacity: 0.35;
	pointer-events: none;
}

/* Preset tweaks */
.mpf-preset-modern .mpf-link-option::after { background: var(--mpf-accent); }
.mpf-preset-modern .mpf-field-links .mpf-field-title { color: #fff; }

.mpf-preset-heritage .mpf-field-links .mpf-field-title {
	font-family: Georgia, serif;
	letter-spacing: 0.02em;
}
.mpf-preset-heritage .mpf-link-option::after { background: var(--mpf-accent); height: 18px; }
.mpf-preset-heritage .mpf-link-label { font-family: Georgia, serif; }

/* In horizontal layout, the "links" field takes full width and centers */
.mpf-layout-horizontal .mpf-field-links {
	flex: 1 1 100%;
	text-align: center;
}

/* Mobile: links wrap gracefully */
@media (max-width: 560px) {
	.mpf-links { gap: 0; }
	.mpf-link-option { padding: 4px 10px; }
	.mpf-link-option::after { height: 16px; width: 1px; }
	.mpf-field-links .mpf-field-title { font-size: 1.2em; }
}

/* ============================================================
 * v1.2.0 — DRAWER LAYOUT (mobile-first fullscreen)
 * ============================================================ */

/* Body scroll-lock when drawer is open */
body.mpf-body-locked { overflow: hidden; }

/* Trigger button — visible by default, sits above the grid */
.mpf-layout-drawer .mpf-drawer-open {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: #fff;
	color: #000;
	border: 1px solid #000;
	border-radius: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	margin-bottom: 16px;
	font-family: inherit;
}
.mpf-layout-drawer .mpf-drawer-open:hover {
	background: #000;
	color: #fff;
}
.mpf-drawer-open-icon {
	font-size: 20px;
	line-height: 1;
	font-weight: 400;
}
.mpf-drawer-open-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--mpf-accent, #c00);
	color: #fff;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 500;
	margin-left: 4px;
}

/* Fullscreen overlay panel */
.mpf-layout-drawer .mpf-filters-panel {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: #fff;
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	border: 0;
	box-shadow: none;
	max-width: 100vw;
	max-height: 100vh;
	overflow: hidden;
}

/* Header: FILTERS title + Clear All + Close */
.mpf-drawer-header {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 12px;
	padding: 20px 20px 16px;
	border-bottom: 1px solid #eee;
}
.mpf-drawer-title {
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
	color: #000;
}
.mpf-drawer-clear {
	background: transparent;
	border: 0;
	color: #000;
	font-size: 14px;
	cursor: pointer;
	text-decoration: underline;
	padding: 4px 6px;
	font-family: inherit;
}
.mpf-drawer-close {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #000;
	color: #fff;
	border: 0;
	cursor: pointer;
	font-size: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
}
.mpf-drawer-close:hover { background: #222; }

/* Body area — scrollable */
.mpf-layout-drawer .mpf-form {
	flex: 1;
	overflow-y: auto;
	padding: 0 20px 120px;
	display: block;
	-webkit-overflow-scrolling: touch;
}

/* Drawer field styling — big, airy, collapsible */
.mpf-layout-drawer .mpf-field {
	border-bottom: 1px solid #eee;
	padding: 20px 0;
	margin: 0;
	background: transparent;
	border-radius: 0;
}
.mpf-layout-drawer .mpf-field-title {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: transparent;
	border: 0;
	padding: 0;
	font-size: 18px;
	font-weight: 400;
	text-align: left;
	color: #000;
	cursor: pointer;
}
.mpf-layout-drawer .mpf-toggle-icon::before {
	content: '⌄';
	font-size: 18px;
	transition: transform 0.2s;
	display: inline-block;
}
.mpf-layout-drawer .mpf-field-title:not(.is-collapsed) .mpf-toggle-icon::before {
	transform: rotate(180deg);
}
.mpf-layout-drawer .mpf-field-content {
	margin-top: 16px;
}

/* Checkbox/radio options: bigger touch targets */
.mpf-layout-drawer .mpf-option label {
	padding: 10px 0;
	font-size: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}
.mpf-layout-drawer .mpf-option input[type="checkbox"],
.mpf-layout-drawer .mpf-option input[type="radio"] {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	accent-color: #000;
}
.mpf-layout-drawer .mpf-option-label { flex: 1; }
.mpf-layout-drawer .mpf-option-count { opacity: 0.6; }

/* Sticky footer — SHOW N ITEMS */
.mpf-drawer-footer {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 16px 20px 24px;
	background: #fff;
	border-top: 1px solid #eee;
}
.mpf-drawer-apply {
	width: 100%;
	padding: 16px;
	background: #000;
	color: #fff;
	border: 0;
	border-radius: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	font-family: inherit;
}
.mpf-drawer-apply:hover { background: #222; }
.mpf-drawer-apply:active { background: #000; transform: scale(0.99); }
.mpf-drawer-count {
	font-weight: 600;
	margin: 0 4px;
}

/* Tablet/desktop — drawer slides in from right (like Gucci on desktop) */
@media (min-width: 768px) {
	.mpf-layout-drawer .mpf-filters-panel {
		inset: 0 0 0 auto;
		width: 420px;
		max-width: 100vw;
		box-shadow: -4px 0 24px rgba(0,0,0,0.08);
	}
}

/* Preset tweaks */
.mpf-preset-heritage .mpf-drawer-title { font-family: Georgia, serif; }
.mpf-preset-heritage .mpf-drawer-apply {
	background: var(--mpf-primary);
	color: var(--mpf-accent);
	font-family: Georgia, serif;
}
.mpf-preset-heritage .mpf-drawer-close { background: var(--mpf-primary); }
.mpf-preset-heritage .mpf-layout-drawer .mpf-drawer-open {
	border-color: var(--mpf-primary);
	color: var(--mpf-primary);
}
.mpf-preset-heritage .mpf-layout-drawer .mpf-drawer-open:hover {
	background: var(--mpf-primary);
	color: #fff;
}

/* ============================================================
 * v1.2.1 — CONSISTENT COLOR SYSTEM + MOBILE DRAWER MODE
 * Uses the 5-var system: primary, accent, text, hover-bg, active-bg, active-text
 * ============================================================ */

/* Option labels inherit the configured text color */
.mpf-wrapper .mpf-option-label,
.mpf-wrapper .mpf-link-label,
.mpf-wrapper .mpf-field-title {
	color: var(--mpf-text);
}

/* Hover states on all interactive option rows */
.mpf-wrapper .mpf-option label:hover,
.mpf-wrapper .mpf-button-option:hover,
.mpf-wrapper .mpf-link-option:hover {
	background: var(--mpf-hover-bg);
}

.mpf-wrapper .mpf-option label {
	border-radius: 4px;
	transition: background 0.15s ease;
	padding: 6px 8px;
	margin: -6px -8px;
}

/* Active state — buttons / pills */
.mpf-wrapper .mpf-button-option:has(input:checked) {
	background: var(--mpf-active-bg);
	color: var(--mpf-active-text);
	border-color: var(--mpf-active-bg);
}
.mpf-wrapper .mpf-button-option:has(input:checked) span { color: var(--mpf-active-text); }

/* Active state — inline links */
.mpf-wrapper .mpf-link-option input:checked ~ .mpf-link-label {
	color: var(--mpf-active-bg);
	font-weight: 600;
}

/* Active state — checkbox/radio rows (subtle tint) */
.mpf-wrapper .mpf-option:has(input:checked) label {
	background: color-mix(in srgb, var(--mpf-active-bg) 10%, transparent);
}

/* Focus rings use accent */
.mpf-wrapper input[type="checkbox"],
.mpf-wrapper input[type="radio"] { accent-color: var(--mpf-active-bg); }

/* ============================================================
 * MOBILE DRAWER MODE — kicks in at <=768px when opted in
 * ============================================================ */
@media (max-width: 768px) {
	/* Show trigger, hide inline panel */
	.mpf-mobile-drawer .mpf-drawer-open { display: inline-flex; }
	.mpf-mobile-drawer .mpf-filters-panel {
		position: fixed;
		inset: 0;
		z-index: 99999;
		background: #fff;
		display: none;
		flex-direction: column;
		padding: 0;
		margin: 0;
		border: 0;
		max-width: 100vw;
		max-height: 100vh;
		overflow: hidden;
	}
	.mpf-mobile-drawer.mpf-drawer-is-open .mpf-filters-panel { display: flex; }

	.mpf-mobile-drawer .mpf-form {
		flex: 1;
		overflow-y: auto;
		padding: 0 20px 120px;
		display: block;
		-webkit-overflow-scrolling: touch;
	}
	.mpf-mobile-drawer .mpf-field {
		border-bottom: 1px solid #eee;
		padding: 20px 0;
		margin: 0;
	}
	.mpf-mobile-drawer .mpf-field-title {
		width: 100%;
		font-size: 18px;
		padding: 0;
	}
	.mpf-mobile-drawer .mpf-option label {
		padding: 10px 0;
		font-size: 16px;
	}
	.mpf-mobile-drawer .mpf-drawer-footer {
		position: absolute;
		left: 0; right: 0; bottom: 0;
		padding: 16px 20px 24px;
		background: #fff;
		border-top: 1px solid #eee;
	}
	.mpf-mobile-drawer .mpf-actions { display: none; }
}

/* Hide drawer chrome on desktop when mobile_drawer enabled */
@media (min-width: 769px) {
	.mpf-mobile-drawer .mpf-drawer-open,
	.mpf-mobile-drawer .mpf-drawer-header,
	.mpf-mobile-drawer .mpf-drawer-footer { display: none; }
}

/* Trigger button is hidden by default unless in drawer-related modes */
.mpf-drawer-open { display: none; }
.mpf-layout-drawer .mpf-drawer-open { display: inline-flex; }

/* ============================================================
 * v1.2.4 — OVERRIDES WIN + FONT INHERIT + FRAME TOGGLE
 * ============================================================ */

/* --- Font inheritance fix ---
 * Everything inside the filter UI should inherit the theme's font
 * unless explicitly set by a preset. This makes counts, inputs,
 * buttons and option labels all look coherent with the host site.
 */
.mpf-wrapper,
.mpf-wrapper input,
.mpf-wrapper button,
.mpf-wrapper select,
.mpf-wrapper textarea,
.mpf-wrapper label,
.mpf-wrapper .mpf-option-count,
.mpf-wrapper .mpf-link-count,
.mpf-wrapper .mpf-chip {
	font-family: inherit;
}

/* Preset-specific fonts: only titles/labels get the serif in Heritage,
 * counts and inputs stay with the theme font for consistency. */
.mpf-preset-heritage .mpf-field-title,
.mpf-preset-heritage .mpf-drawer-title,
.mpf-preset-heritage .mpf-link-label {
	font-family: Georgia, 'Times New Roman', serif;
}
.mpf-preset-heritage .mpf-option-count,
.mpf-preset-heritage .mpf-link-count,
.mpf-preset-heritage input,
.mpf-preset-heritage button,
.mpf-preset-heritage select {
	font-family: inherit;
}

/* --- Custom color overrides WIN against presets ---
 * When the user sets hover_bg / active_bg / active_text / text_color,
 * they come through as inline CSS vars. These high-specificity rules
 * ensure they actually apply over preset-specific rules.
 */
.mpf-wrapper[style*="--mpf-text:"] .mpf-field-title,
.mpf-wrapper[style*="--mpf-text:"] .mpf-option-label,
.mpf-wrapper[style*="--mpf-text:"] .mpf-link-label,
.mpf-wrapper[style*="--mpf-text:"] .mpf-drawer-title {
	color: var(--mpf-text) !important;
}

.mpf-wrapper[style*="--mpf-hover-bg:"] .mpf-option label:hover,
.mpf-wrapper[style*="--mpf-hover-bg:"] .mpf-button-option:hover,
.mpf-wrapper[style*="--mpf-hover-bg:"] .mpf-link-option:hover {
	background: var(--mpf-hover-bg) !important;
}

.mpf-wrapper[style*="--mpf-active-bg:"] .mpf-button-option input:checked + span,
.mpf-wrapper[style*="--mpf-active-bg:"] .mpf-button-option:has(input:checked),
.mpf-wrapper[style*="--mpf-active-bg:"] .mpf-chip,
.mpf-wrapper[style*="--mpf-active-bg:"] .mpf-apply {
	background: var(--mpf-active-bg) !important;
	border-color: var(--mpf-active-bg) !important;
}
.mpf-wrapper[style*="--mpf-active-text:"] .mpf-button-option input:checked + span,
.mpf-wrapper[style*="--mpf-active-text:"] .mpf-button-option:has(input:checked) span,
.mpf-wrapper[style*="--mpf-active-text:"] .mpf-chip,
.mpf-wrapper[style*="--mpf-active-text:"] .mpf-apply {
	color: var(--mpf-active-text) !important;
}

/* --- Frame toggle ---
 * When show_frame is OFF (mpf-no-frame class on wrapper), the outer
 * panel box/border/padding/background is removed so the filters sit
 * flush with the surrounding page.
 */
.mpf-no-frame .mpf-filters-panel {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}
.mpf-no-frame.mpf-preset-heritage .mpf-filters-panel::before {
	display: none; /* kill the inner gold border frame */
}
.mpf-no-frame.mpf-preset-modern .mpf-filters-panel {
	background: transparent !important;
}

/* ============================================================

/* ============================================================
 * v1.3.1 — MEMENTO BRAND PRESETS (preview-approved design)
 * 8 brands × shared white/black + brand-coloured accents
 * Brand colour shows on: titles, chips, counts badge, selected
 * options, Apply hover, trigger badge, drawer Clear-all underline.
 * ============================================================ */

/* ---- 8 brand colour tokens ---- */
.mpf-preset-brand_memento_heritage { --mpf-brand: #B21F24; }
.mpf-preset-brand_via_egnatia      { --mpf-brand: #D91F33; }
.mpf-preset-brand_alexander        { --mpf-brand: #873228; }
.mpf-preset-brand_greek_heritage   { --mpf-brand: #C04B36; }
.mpf-preset-brand_silk_roads       { --mpf-brand: #C75528; }
.mpf-preset-brand_nature_greece    { --mpf-brand: #6E9140; }
.mpf-preset-brand_greek_images     { --mpf-brand: #019BD0; }
.mpf-preset-brand_memorial_routes  { --mpf-brand: #116E89; }

/* ---- Shared brand DNA ---- */
[class*="mpf-preset-brand_"] {
	--mpf-primary:     #000000;
	--mpf-accent:      var(--mpf-brand);
	--mpf-bg:          #ffffff;
	--mpf-border:      rgba(0,0,0,0.12);
	--mpf-text:        #000000;
	--mpf-muted:       rgba(0,0,0,0.55);
	--mpf-brand-soft:  color-mix(in srgb, var(--mpf-brand) 12%, transparent);
	--mpf-hover-bg:    var(--mpf-brand-soft);
	--mpf-active-bg:   var(--mpf-brand);
	--mpf-active-text: #ffffff;
	background: #ffffff;
	color: #000000;
	font-family: inherit;
	font-size: 14px;
}

/* Outer panel */
[class*="mpf-preset-brand_"] .mpf-filters-panel {
	background: #ffffff;
	border: 1px solid #000000;
	border-radius: 0;
	padding: 18px;
	box-shadow: none;
}
[class*="mpf-preset-brand_"].mpf-no-frame .mpf-filters-panel {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
}

/* Field rows — thin black-ish bottom dividers */
[class*="mpf-preset-brand_"] .mpf-field {
	border-bottom: 1px solid rgba(0,0,0,0.12);
	padding: 0;
	margin: 0;
}
[class*="mpf-preset-brand_"] .mpf-field:last-child { border-bottom: 0; }

/* Field titles — brand-coloured uppercase */
[class*="mpf-preset-brand_"] .mpf-field-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 14px 0;
	background: transparent;
	border: 0;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--mpf-brand);
	cursor: pointer;
}
[class*="mpf-preset-brand_"] .mpf-field-content { padding: 0 0 14px; }

/* Toggle icon — minimal +/− in black */
[class*="mpf-preset-brand_"] .mpf-toggle-icon { color: #000; font-size: 18px; line-height: 1; font-weight: 400; }
[class*="mpf-preset-brand_"] .mpf-toggle-icon::before { content: '−'; }
[class*="mpf-preset-brand_"] .mpf-field-title.is-collapsed .mpf-toggle-icon::before { content: '+'; }

/* Active filter chips — solid brand background */
[class*="mpf-preset-brand_"] .mpf-active-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 0 14px;
	border-bottom: 1px solid rgba(0,0,0,0.12);
	margin-bottom: 6px;
}
[class*="mpf-preset-brand_"] .mpf-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: var(--mpf-brand);
	color: #ffffff;
	font-size: 12px;
	border-radius: 0;
	border: 0;
	font-family: inherit;
}
[class*="mpf-preset-brand_"] .mpf-chip-remove { color: #ffffff; opacity: 0.85; cursor: pointer; }
[class*="mpf-preset-brand_"] .mpf-chip-remove:hover { opacity: 1; }

/* Option lists */
[class*="mpf-preset-brand_"] .mpf-options-list { list-style: none; margin: 0; padding: 0; }
[class*="mpf-preset-brand_"] .mpf-option label {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	margin: 0 -8px;
	color: #000;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.12s ease;
	font-family: inherit;
}
[class*="mpf-preset-brand_"] .mpf-option label:hover { background: var(--mpf-brand-soft); }
[class*="mpf-preset-brand_"] input[type="checkbox"],
[class*="mpf-preset-brand_"] input[type="radio"] {
	accent-color: var(--mpf-brand);
	width: 14px;
	height: 14px;
}
[class*="mpf-preset-brand_"] .mpf-option-label { flex: 1; }
[class*="mpf-preset-brand_"] .mpf-option-count {
	font-size: 12px;
	color: rgba(0,0,0,0.5);
	font-variant-numeric: tabular-nums;
}
[class*="mpf-preset-brand_"] .mpf-option input:checked ~ .mpf-option-label {
	color: var(--mpf-brand);
	font-weight: 500;
}
[class*="mpf-preset-brand_"] .mpf-option input:checked ~ .mpf-option-count {
	color: var(--mpf-brand);
	font-weight: 500;
}

/* Zero-count: dimmed, strike-through count, but still visible */
[class*="mpf-preset-brand_"] .mpf-option.mpf-opt-zero { opacity: 0.45; }
[class*="mpf-preset-brand_"] .mpf-option.mpf-opt-zero .mpf-option-count { text-decoration: line-through; }
[class*="mpf-preset-brand_"] .mpf-option.mpf-opt-zero label:hover { background: transparent; cursor: not-allowed; }

/* Tree indentation */
[class*="mpf-preset-brand_"] .mpf-options-tree ul.mpf-options-sublist {
	border-left: 1px solid rgba(0,0,0,0.15);
	margin-left: 14px;
	padding-left: 8px;
}

/* Inputs (range, dropdown, search) — sharp black borders */
[class*="mpf-preset-brand_"] .mpf-dropdown,
[class*="mpf-preset-brand_"] .mpf-options-search,
[class*="mpf-preset-brand_"] .mpf-range-min,
[class*="mpf-preset-brand_"] .mpf-range-max {
	background: #ffffff;
	border: 1px solid #000000;
	border-radius: 0;
	padding: 6px 10px;
	color: #000000;
	font-family: inherit;
	font-size: 13px;
}
[class*="mpf-preset-brand_"] .mpf-dropdown:focus,
[class*="mpf-preset-brand_"] .mpf-options-search:focus,
[class*="mpf-preset-brand_"] .mpf-range-min:focus,
[class*="mpf-preset-brand_"] .mpf-range-max:focus {
	outline: 2px solid var(--mpf-brand);
	outline-offset: -1px;
	border-color: var(--mpf-brand);
}

/* Button pills — outlined black, fill brand on active */
[class*="mpf-preset-brand_"] .mpf-button-option span {
	background: transparent;
	color: #000000;
	border: 1px solid #000000;
	border-radius: 0;
	padding: 6px 14px;
	font-family: inherit;
	transition: all 0.12s ease;
	display: inline-block;
}
[class*="mpf-preset-brand_"] .mpf-button-option:hover span { background: var(--mpf-brand-soft); }
[class*="mpf-preset-brand_"] .mpf-button-option input:checked + span {
	background: var(--mpf-brand);
	color: #ffffff;
	border-color: var(--mpf-brand);
	font-weight: 500;
}

/* Inline links bar — brand separators + brand on active/hover */
[class*="mpf-preset-brand_"] .mpf-link-option::after { background: var(--mpf-brand); }
[class*="mpf-preset-brand_"] .mpf-link-option:hover .mpf-link-label { color: var(--mpf-brand); }
[class*="mpf-preset-brand_"] .mpf-link-option input:checked ~ .mpf-link-label {
	color: var(--mpf-brand);
	font-weight: 600;
}
[class*="mpf-preset-brand_"] .mpf-link-count { color: rgba(0,0,0,0.5); }

/* Apply / Clear buttons — Apply turns brand on hover */
[class*="mpf-preset-brand_"] .mpf-apply,
[class*="mpf-preset-brand_"] .mpf-drawer-apply {
	background: #000000;
	color: #ffffff;
	border: 0;
	border-radius: 0;
	padding: 12px 20px;
	font-family: inherit;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.12s ease;
}
[class*="mpf-preset-brand_"] .mpf-apply:hover,
[class*="mpf-preset-brand_"] .mpf-drawer-apply:hover { background: var(--mpf-brand); }

[class*="mpf-preset-brand_"] .mpf-clear-all {
	background: transparent;
	color: #000000;
	border: 1px solid #000000;
	border-radius: 0;
	padding: 12px 20px;
	font-family: inherit;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.12s ease;
}
[class*="mpf-preset-brand_"] .mpf-clear-all:hover {
	background: var(--mpf-brand);
	color: #ffffff;
	border-color: var(--mpf-brand);
}

/* Pagination */
[class*="mpf-preset-brand_"] .mpf-page-btn {
	background: #ffffff;
	color: #000000;
	border: 1px solid #000000;
	border-radius: 0;
	font-family: inherit;
	padding: 6px 12px;
}
[class*="mpf-preset-brand_"] .mpf-page-btn:hover { background: var(--mpf-brand-soft); }
[class*="mpf-preset-brand_"] .mpf-page-btn.is-current {
	background: var(--mpf-brand);
	color: #ffffff;
	border-color: var(--mpf-brand);
}

/* ---- Drawer (mobile / opt-in mobile drawer) ---- */
[class*="mpf-preset-brand_"] .mpf-drawer-open {
	background: #ffffff;
	color: #000000;
	border: 1px solid #000000;
	border-radius: 0;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 10px 16px;
}
[class*="mpf-preset-brand_"] .mpf-drawer-open:hover {
	background: var(--mpf-brand);
	color: #ffffff;
	border-color: var(--mpf-brand);
}
[class*="mpf-preset-brand_"] .mpf-drawer-open-count {
	background: var(--mpf-brand);
	color: #ffffff;
	border-radius: 9px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: 11px;
}
[class*="mpf-preset-brand_"] .mpf-drawer-close {
	background: #000000;
	color: #ffffff;
	border-radius: 50%;
	width: 36px;
	height: 36px;
}
[class*="mpf-preset-brand_"] .mpf-drawer-title {
	color: #000000;
	font-family: inherit;
	font-weight: 400;
	font-size: 22px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
[class*="mpf-preset-brand_"] .mpf-drawer-clear {
	background: transparent;
	border: 0;
	color: var(--mpf-brand);
	border-bottom: 1px solid var(--mpf-brand);
	padding: 4px 8px;
	font-family: inherit;
	font-size: 13px;
	letter-spacing: 0.04em;
	cursor: pointer;
}

/* Body in drawer: bigger touch targets, all collapsed by default */
[class*="mpf-preset-brand_"] .mpf-mobile-drawer .mpf-field-title,
[class*="mpf-preset-brand_"].mpf-layout-drawer .mpf-field-title { font-size: 14px; padding: 16px 0; }
[class*="mpf-preset-brand_"] .mpf-mobile-drawer .mpf-option label,
[class*="mpf-preset-brand_"].mpf-layout-drawer .mpf-option label { padding: 9px 8px; font-size: 15px; }