/**
 * Search overlay: .mk-search-overlay (templates/components/search-overlay.php),
 * a drawer (drawer.css) with its own header, full screen at every width.
 *
 * Header 12/16 with a bottom divider (#F6E3E4): the search field takes the
 * row, close button 44 with a 20 icon. Content 24/16. Suggestion: 12/16, search
 * icon 24 (#BF7D8B), 3.5 gap to the text. Nothing found: centred text, 32/12/12.
 * The bestsellers carousel keeps its per-breakpoint layout. Results: product
 * cards in the catalog grid (2 / 4 columns, gap 16 / 24); while they load a
 * centred 32 spinner (track #F6E3E4, arc #BF7D8B). Tokens:
 * theme.json `custom.searchOverlay`, `custom.color.searchOverlay`.
 */

.mk-search-overlay.mk-drawer {
	inline-size: 100%;
	border-radius: 0;
}

.mk-search-overlay [hidden] {
	display: none;
}

.mk-search-overlay__head {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--search-overlay--header-gap);
	padding-block: var(--wp--custom--search-overlay--header-padding-block);
	padding-inline: var(--wp--custom--search-overlay--header-padding-inline);
	border-block-end: var(--wp--custom--border-width--thin) solid
		var(--wp--custom--color--search-overlay--divider);
}

.mk-search-overlay__head .mk-search-field {
	flex: 1;
	min-inline-size: 0;
}

.mk-search-overlay .mk-search-overlay__close {
	--mk-icon-button-size: var(--wp--custom--search-overlay--close-size);
}

.mk-search-overlay__close .mk-icon {
	inline-size: var(--wp--custom--search-overlay--close-icon-size);
	block-size: var(--wp--custom--search-overlay--close-icon-size);
}

.mk-search-overlay .mk-drawer__content {
	padding-block: var(--wp--custom--search-overlay--content-padding-block);
	padding-inline: var(--wp--custom--search-overlay--content-padding-inline);
}

.mk-search-overlay__suggestions {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-search-overlay__suggestion {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--search-overlay--suggestion-gap);
	padding-block: var(--wp--custom--search-overlay--suggestion-padding-block);
	padding-inline: var(
		--wp--custom--search-overlay--suggestion-padding-inline
	);
	color: var(--wp--custom--color--text--primary);
	font-family: var(--wp--custom--text--body-medium--font-family);
	font-size: var(--wp--custom--text--body-medium--font-size);
	font-weight: var(--wp--custom--text--body-medium--font-weight);
	line-height: var(--wp--custom--text--body-medium--line-height);
	letter-spacing: var(--wp--custom--text--body-medium--letter-spacing);
	text-decoration: none;
	transition-property: color;
	transition-duration: var(--wp--custom--motion--duration--fast);
}

.mk-search-overlay__suggestion .mk-icon {
	flex: none;
	inline-size: var(--wp--custom--search-overlay--suggestion-icon-size);
	block-size: var(--wp--custom--search-overlay--suggestion-icon-size);
	color: var(--wp--custom--color--search-overlay--suggestion-icon);
}

@media (hover: hover) {
	.mk-search-overlay__suggestion:hover {
		color: var(--wp--custom--color--text--accent);
	}
}

.mk-search-overlay__suggestion:focus-visible {
	outline-width: var(--wp--custom--focus--ring-width);
	outline-style: solid;
	outline-color: var(--wp--custom--color--focus--ring);
	outline-offset: calc(-1 * var(--wp--custom--focus--ring-width));
}

.mk-search-overlay__grid {
	--mk-search-columns: var(--wp--custom--search-overlay--mobile--columns);
	--mk-search-gap: var(--wp--custom--search-overlay--mobile--gap);

	display: grid;
	grid-template-columns: repeat(var(--mk-search-columns), minmax(0, 1fr));
	gap: var(--mk-search-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48rem) {
	.mk-search-overlay__grid {
		--mk-search-columns: var(--wp--custom--search-overlay--tablet--columns);
		--mk-search-gap: var(--wp--custom--search-overlay--tablet--gap);
	}
}

@media (min-width: 64rem) {
	.mk-search-overlay__grid {
		--mk-search-columns: var(
			--wp--custom--search-overlay--desktop--columns
		);
		--mk-search-gap: var(--wp--custom--search-overlay--desktop--gap);
	}
}

.mk-search-overlay__loading {
	display: flex;
	justify-content: center;
	margin: 0;
	padding-block: var(--wp--custom--search-overlay--empty-padding-top);
}

.mk-search-overlay__spinner {
	inline-size: var(--wp--custom--search-overlay--spinner-size);
	block-size: var(--wp--custom--search-overlay--spinner-size);
	box-sizing: border-box;
	border: var(--wp--custom--search-overlay--spinner-width) solid
		var(--wp--custom--color--search-overlay--spinner-track);
	border-block-start-color: var(
		--wp--custom--color--search-overlay--spinner-indicator
	);
	border-radius: var(--wp--preset--border-radius--full);
	animation: mk-search-spin
		var(--wp--custom--search-overlay--spinner-duration) linear infinite;
}

@keyframes mk-search-spin {
	to {
		transform: rotate(1turn);
	}
}

.mk-search-overlay__empty {
	margin: 0;
	padding: var(--wp--custom--search-overlay--empty-padding-top)
		var(--wp--custom--search-overlay--empty-padding)
		var(--wp--custom--search-overlay--empty-padding);
	color: var(--wp--custom--color--search-overlay--empty-text);
	font-family: var(--wp--custom--text--body-medium--font-family);
	font-size: var(--wp--custom--text--body-medium--font-size);
	font-weight: var(--wp--custom--text--body-medium--font-weight);
	line-height: var(--wp--custom--text--body-medium--line-height);
	letter-spacing: var(--wp--custom--text--body-medium--letter-spacing);
	text-align: center;
}

.mk-search-overlay .mk-search-overlay__all {
	display: flex;
	inline-size: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.mk-search-overlay__suggestion {
		transition: none;
	}

	/* Still shows that something happens, only slower. */
	.mk-search-overlay__spinner {
		animation-duration: calc(
			3 * var(--wp--custom--search-overlay--spinner-duration)
		);
	}
}