/* Dropdown autocomplete styles for the header search widget.
   Results-page styles are added in Task 7. */

form.mpf-suggest-active {
	position: relative;
}

/* Suppress Elementor's own live-results container when our dropdown is active. */
form.mpf-suggest-active .e-search-results-container,
form.mpf-suggest-active .e-search-results,
form.mpf-suggest-active [id^="results-"] {
	display: none !important;
}

.mpf-suggest {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #e5e0d5;
	border-top: 2px solid #d3b574;
	box-shadow: 0 8px 24px rgba(15, 1, 1, .12);
	z-index: 9999;
	max-height: 420px;
	overflow-y: auto;
	text-align: left;
}

.mpf-suggest-item {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px 12px;
	text-decoration: none;
	border-bottom: 1px solid #f2efe8;
}

.mpf-suggest-item:hover,
.mpf-suggest-item.is-active {
	background: #faf8f3;
}

.mpf-suggest-thumb {
	width: 36px;
	height: 48px;
	object-fit: cover;
	border-radius: 3px;
	flex-shrink: 0;
}

.mpf-suggest-title {
	color: #212121;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	flex: 1;
}

.mpf-suggest-price {
	color: #1863DC;
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
}

.mpf-suggest-all {
	display: block;
	padding: 10px 12px;
	background: #0f0101;
	color: #d3b574;
	font-weight: 600;
	font-size: 13px;
	text-align: center;
	text-decoration: none;
}

.mpf-suggest-all:hover {
	background: #1a0202;
	color: #d3b574;
}

.mpf-suggest-empty {
	padding: 12px;
	color: #888;
	font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* Search results page — [mpf_search_results]                          */
/* ------------------------------------------------------------------ */

.mpf-results {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.mpf-results-rail {
	width: 260px;
	flex-shrink: 0;
}

.mpf-results-main {
	flex: 1;
	min-width: 0;
}

/* Header row: count + view toggle. */
.mpf-results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.mpf-results-count {
	font-size: 15px;
	color: #666;
	margin: 0;
}

.mpf-results-count strong {
	color: #0f0101;
}

/* Did-you-mean notice above corrected results. */
.mpf-results-corrected {
	font-size: 15px;
	color: #444;
	margin: 0 0 16px;
	padding: 10px 14px;
	background: #fefcf5;
	border: 1px solid #e5e0d5;
	border-radius: 6px;
}

.mpf-results-corrected strong {
	color: #0f0101;
}

/* View toggle: bordered group, navy active state. */
.mpf-view-toggle {
	display: inline-flex;
	border: 1px solid #e5e0d5;
	border-radius: 6px;
	overflow: hidden;
	flex-shrink: 0;
}

.mpf-view-toggle button {
	width: 36px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: #12213f;
}

.mpf-view-toggle button + button {
	border-left: 1px solid #e5e0d5;
}

.mpf-view-toggle button svg {
	display: block;
}

/* Hover pinned explicitly: the Elementor kit's pink button:hover
   outranks the base rule otherwise. */
.mpf-view-toggle button:hover,
.mpf-view-toggle button:focus {
	background: #d3b574;
	background-image: none;
	color: #0f0101;
	border: none;
	box-shadow: none;
	outline: none;
}

.mpf-view-toggle button.is-active,
.mpf-view-toggle button.is-active:hover,
.mpf-view-toggle button.is-active:focus {
	background: #12213f;
	background-image: none;
	color: #fff;
	border: none;
}

.mpf-view-toggle button.is-active + button {
	border-left: 1px solid #e5e0d5;
}

/* Best Match spotlight. */
.mpf-best-match {
	border: 2px solid #d3b574;
	background: #fdfbf6;
	border-radius: 8px;
	padding: 16px;
	margin: 16px 0;
	position: relative;
}

.mpf-best-match-tag {
	position: absolute;
	top: -12px;
	left: 16px;
	background: #d3b574;
	color: #0f0101;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 4px;
}

/* Cards inside render the Elementor product template — constrain and
   centre them; with 2-3 joint best matches they sit side by side. */
.mpf-best-match-card {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.mpf-best-match-card .mpf-product-item {
	flex: 0 1 360px;
	max-width: 420px;
	margin: 0;
}

/* Grid/list: both representations are server-rendered per product; the
   active data-view on the scope (search results page OR shop grid)
   decides which shows, so toggling is instant. */
.mpf-view-scope[data-view="grid"] .mpf-list-row {
	display: none;
}

.mpf-view-scope[data-view="list"] .mpf-product-item {
	display: none;
}

.mpf-view-scope[data-view="list"] .mpf-products-inner {
	display: block;
}

/* In list view the spotlight renders as list rows like everything
   else (its cards hide via the global rule; rows take the full width). */
.mpf-view-scope[data-view="list"] .mpf-best-match-card {
	display: block;
}

.mpf-view-scope[data-view="list"] .mpf-best-match .mpf-list-row {
	background: transparent;
	border-bottom: 0;
	border-radius: 0;
	margin-bottom: 0;
	padding: 8px 4px;
}

.mpf-view-scope[data-view="list"] .mpf-best-match .mpf-list-row + .mpf-list-row {
	border-top: 1px solid #ecdfc2;
}

/* Count + toggle strip above the shop grids ([mpf_products]). */
.mpf-products-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

/* List view: search-engine-style rows — thumb left, blue title, meta,
   snippet, price + cart on the right. */
.mpf-list-row {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 16px 4px;
	border-bottom: 1px solid #eee;
}

.mpf-list-thumb {
	flex-shrink: 0;
	width: 96px;
}

.mpf-list-thumb img {
	width: 96px;
	height: 128px;
	object-fit: contain;
	border-radius: 4px;
	background: #faf8f3;
}

.mpf-list-body {
	flex: 1;
	min-width: 0;
}

.mpf-list-title {
	display: inline-block;
	color: #212121;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	margin-bottom: 4px;
}

.mpf-list-title:hover {
	text-decoration: underline;
	color: #0f0101;
}

.mpf-list-meta {
	display: flex;
	gap: 10px;
	align-items: baseline;
	flex-wrap: wrap;
	font-size: 12.5px;
	margin-bottom: 6px;
}

.mpf-list-stock {
	display: inline-block;
	background: #1e7d32;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 3px 10px;
	line-height: 1.2;
}

.mpf-list-stock.is-out {
	background: #b3261e;
	color: #fff;
}

.mpf-list-cats {
	color: #888;
}

.mpf-list-notify {
	color: #1863DC;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}

.mpf-list-notify:hover {
	text-decoration: underline;
	color: #1863DC;
}

.mpf-list-snippet {
	margin: 0;
	color: #555;
	font-size: 14px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mpf-list-buy {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	min-width: 120px;
	text-align: right;
}

.mpf-list-price {
	color: #0f0101;
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.mpf-list-price del {
	color: #999;
	font-weight: 400;
	font-size: 13px;
}

a.mpf-list-cart {
	display: block;
	width: 140px;
	box-sizing: border-box;
	text-align: center;
	background: #6F4107;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 0;
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;
}

a.mpf-list-cart:hover {
	background: #0f0101;
	color: #d3b574;
}

/* Woo's AJAX add-to-cart appends a "View cart" link after the button. */
.mpf-list-buy .added_to_cart {
	font-size: 12.5px;
	color: #1863DC;
	text-decoration: none;
	font-weight: 600;
}

/* Keep the buy column clear of the site's floating currency switcher
   pinned to the viewport's right edge. */
@media (min-width: 901px) {
	.mpf-list-row {
		padding-right: 32px;
	}
}

@media (max-width: 600px) {
	.mpf-list-row {
		flex-wrap: wrap;
	}

	.mpf-list-buy {
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	a.mpf-list-cart {
		width: auto;
		padding: 8px 16px;
	}
}

/* Active-search pill in the panel's search section. */
.mpf-search-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	background: #fdfbf6;
	border: 1px solid #d3b574;
	border-radius: 999px;
	padding: 3px 6px 3px 12px;
	font-size: 13px;
	color: #12213f;
	max-width: 100%;
}

.mpf-search-pill [data-role="search-pill-text"] {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

/* Hard reset: the theme/Elementor kit styles bare <button> elements
   (min sizes, borders, hover colours) at higher specificity, so every
   visual property is pinned here. */
.mpf-search-pill button.mpf-search-pill-x,
.mpf-search-pill button.mpf-search-pill-x:hover,
.mpf-search-pill button.mpf-search-pill-x:focus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	min-width: 0;
	min-height: 0;
	max-width: 18px;
	max-height: 18px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	outline: none;
	box-shadow: none;
	background: #d3b574;
	background-image: none;
	color: #0f0101;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	flex-shrink: 0;
	-webkit-appearance: none;
	appearance: none;
}

.mpf-search-pill button.mpf-search-pill-x:hover {
	background: #0f0101;
	color: #d3b574;
}

/* Themed pagination. */
.mpf-results-pagination ul {
	display: flex;
	gap: 6px;
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
	justify-content: center;
	flex-wrap: wrap;
}

/* a/span only: WP also puts .page-numbers on the containing ul. */
.mpf-results-pagination a.page-numbers,
.mpf-results-pagination span.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid #e5e0d5;
	border-radius: 4px;
	color: #12213f;
	text-decoration: none;
	font-size: 14px;
	background: #fff;
	box-sizing: border-box;
}

.mpf-results-pagination a.page-numbers:hover {
	border-color: #d3b574;
	background: #faf8f3;
}

.mpf-results-pagination .page-numbers.current {
	background: #d3b574;
	border-color: #d3b574;
	color: #0f0101;
	font-weight: 700;
}

.mpf-results-pagination .page-numbers.dots {
	border: none;
	background: transparent;
}

/* Empty states: no term, or nothing matched. */
.mpf-results-empty {
	text-align: center;
	padding: 48px 16px;
	grid-column: 1 / -1;
}

.mpf-results-empty h2 {
	color: #12213f;
	margin: 0 0 16px;
}

.mpf-results-tips {
	display: inline-block;
	text-align: left;
	color: #666;
	margin: 0 0 24px;
	padding-left: 20px;
}

.mpf-results-browse-label {
	color: #666;
	margin: 0 0 12px;
}

.mpf-results-browse {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

.mpf-results-browse a {
	display: inline-block;
	border: 1px solid #d3b574;
	border-radius: 999px;
	padding: 6px 16px;
	color: #12213f;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	background: #fff;
}

.mpf-results-browse a:hover {
	background: #d3b574;
	color: #0f0101;
}

/* Mobile: stack the rail above the results, full width. The panel's
   own <=767px Filters toggle behaviour keeps working inside it. */
@media (max-width: 900px) {
	.mpf-results {
		flex-direction: column;
	}

	.mpf-results-rail {
		width: 100%;
	}
}

/* Header band title ([mpf_search_title]) — matches the category pages'
   black band heading (e.g. "BOOKS" on shop-books): Roboto 2em / 600,
   centered, white, uppercase. The band background/padding come from the
   Elementor container it sits in. */
.mpf-search-title {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 2em;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	color: #ffffff;
}

@media (max-width: 767px) {
	.mpf-search-title {
		font-size: 1.5em;
	}
}

/* When the filter rail is provided by the surrounding Elementor layout
   (filters="false"), the results block is the content column — let it
   fill it. */
.mpf-results > .mpf-results-main:only-child {
	width: 100%;
}

/* Back-in-stock notify modal. Buttons pinned hard against theme/kit
   button styles (same bleed as the pill ×/toggle). */
.mpf-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 1, 1, .55);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.mpf-modal {
	position: relative;
	background: #fff;
	border-top: 3px solid #d3b574;
	border-radius: 10px;
	box-shadow: 0 18px 48px rgba(15, 1, 1, .35);
	max-width: 400px;
	width: 100%;
	padding: 26px 24px 22px;
}

.mpf-modal-heading {
	margin: 0 0 4px;
	color: #12213f;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.mpf-modal-product {
	margin: 0 0 16px;
	color: #888;
	font-size: 13.5px;
}

.mpf-modal-form {
	display: flex;
	gap: 8px;
}

.mpf-modal input.mpf-modal-email {
	flex: 1;
	min-width: 0;
	height: 42px;
	border: 1px solid #e5e0d5;
	border-radius: 6px;
	padding: 0 12px;
	font-size: 14px;
	color: #212121;
	background: #fff;
	box-shadow: none;
}

.mpf-modal input.mpf-modal-email:focus {
	border-color: #d3b574;
	outline: none;
	box-shadow: 0 0 0 2px rgba(211, 181, 116, .25);
}

.mpf-modal button.mpf-modal-submit,
.mpf-modal button.mpf-modal-submit:hover,
.mpf-modal button.mpf-modal-submit:focus {
	height: 42px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 6px;
	background: #6F4107;
	background-image: none;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.mpf-modal button.mpf-modal-submit:hover {
	background: #0f0101;
	color: #d3b574;
}

.mpf-modal button.mpf-modal-submit:disabled {
	opacity: .6;
	cursor: default;
}

.mpf-modal button.mpf-modal-close,
.mpf-modal button.mpf-modal-close:hover,
.mpf-modal button.mpf-modal-close:focus {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	min-width: 0;
	min-height: 0;
	max-width: 26px;
	max-height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f3f0e8;
	background-image: none;
	color: #0f0101;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.mpf-modal button.mpf-modal-close:hover {
	background: #d3b574;
}

.mpf-modal-message {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.4;
}

.mpf-modal-message.is-success {
	color: #1e7d32;
	font-weight: 600;
}

.mpf-modal-message.is-error {
	color: #b3261e;
}

/* Mobile: breathing room below the panel (the shop sidebars set their
   container gap to 0 on mobile, leaving the next card flush). */
@media (max-width: 767px) {
	.mpf-filter-panel {
		margin-bottom: 20px;
	}
}

/* Mobile list view: zebra rows instead of hairline separators. Grid
   children alternate card/row pairs, so rows sit at positions 2,4,6...
   and 4n+2 shades every other row. */
@media (max-width: 600px) {
	.mpf-view-scope[data-view="list"] .mpf-list-row {
		border-bottom: 0;
		border-radius: 8px;
		padding: 14px 12px;
		background: #f4f4f4;
		margin-bottom: 10px;
	}

	.mpf-view-scope[data-view="list"] .mpf-products-inner > .mpf-list-row:nth-child(4n+2) {
		background: #fff;
	}
}

/* Stock badge inside the Elementor product cards ([mbsl_stock_status]
   from the stock plugin) — restyled as the same pill the list view
   uses. Its markup carries inline colour/display styles, hence the
   !important overrides. */
.mpf-product-item .mbsl-stock-status {
	display: block !important;
	width: fit-content;
	margin: 4px auto;
	background: #1e7d32;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 3px 10px;
	line-height: 1.2;
}

.mpf-product-item .mbsl-stock-status-out {
	background: #b3261e;
}

/* The theme gives the pagination's ul a bordered, slightly rounded
   container — square it off. */
.mpf-results-pagination ul,
.mpf-results-pagination ul.page-numbers {
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 0;
}