/**
 * Unified search — frontend styles.
 *
 * Nested CSS. em units (site base: html { font-size: 10px } → 1em = 16px in body).
 * Brand: #3C3B6E (primary), #6d6bc8 (primary-light).
 */

.esm-search-form {
	display: flex;
	align-items: stretch;
	gap: 0.25em;
	position: relative;

	& .esm-search-field {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0.5em 0.75em;
		font-size: 1em;
		border: 0.0625em solid #ccc;
		border-radius: 0.25em;
	}

	& .esm-search-submit {
		padding: 0.5em 1em;
		background: #3C3B6E;
		color: #fff;
		border: none;
		border-radius: 0.25em;
		cursor: pointer;
		font-size: 1em;

		&:hover {
			background: #6d6bc8;
		}
	}
}

.esm-search-page {
	margin: 0 auto;
	padding: 1.5em 1em;

	& .esm-search-header {
		margin-bottom: 1.5em;

		& .page-title {
			margin: 0 0 0.5em;
			font-size: 2em;

			& .esm-search-term {
				color: #3C3B6E;
			}
		}

		& .esm-search-total {
			margin: 0 0 1em;
			color: #555;
			font-size: 1em;
		}

		& .esm-search-page-form {
			display: flex;
			gap: 0.5em;
			max-width: 40em;
			width: 100%;

			& input[type="search"] {
				flex: 1 1 auto;
				min-width: 0;
				padding: 0.625em 0.875em;
				font-size: 1em;
				border: 0.0625em solid #ccc;
				border-radius: 0.25em;
			}

			& button {
				flex: 0 0 auto;
				padding: 0.625em 1.25em;
				background: #3C3B6E;
				color: #fff;
				border: none;
				border-radius: 0.25em;
				cursor: pointer;
				font-size: 1em;
				white-space: nowrap;

				&:hover {
					background: #6d6bc8;
				}
			}
		}
	}
}

.esm-search-tabs {
	display: flex;
	gap: 0.5em;
	border-bottom: 0.125em solid #e5e5e5;
	margin-bottom: 1.5em;
	flex-wrap: wrap;

	& .esm-search-tab {
		padding: 0.75em 1.25em;
		background: transparent;
		border: none;
		border-bottom: 0.1875em solid transparent;
		margin-bottom: -0.125em;
		font-size: 1em;
		cursor: pointer;
		color: #555;

		&:hover {
			color: #3C3B6E;
		}

		&.is-active {
			color: #3C3B6E;
			border-bottom-color: #3C3B6E;
			font-weight: 600;
		}

		& .esm-search-tab-count {
			margin-left: 0.25em;
			color: #888;
			font-size: 0.875em;
		}
	}
}

.esm-search-panel {
	display: none;

	&.is-active {
		display: block;
	}

	&.is-loading {
		opacity: 0.5;
		pointer-events: none;
	}
}

.esm-search-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
	gap: 1.25em;
}

.esm-search-card {
	border: 0.0625em solid #e5e5e5;
	border-radius: 0.375em;
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.2s ease, transform 0.2s ease;

	&:hover {
		box-shadow: 0 0.25em 0.75em rgba(60, 59, 110, 0.15);
		transform: translateY(-0.125em);
	}

	& .esm-search-card-link {
		display: block;
		color: inherit;
		text-decoration: none;
	}

	& .esm-search-card-thumb {
		aspect-ratio: 1 / 1;
		overflow: hidden;
		background: #f5f5f5;

		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}

	& .esm-search-card-body {
		padding: 0.875em 1em 1em;
	}

	& .esm-search-card-title {
		margin: 0 0 0.375em;
		font-size: 1em;
		font-weight: 600;
		line-height: 1.3;
		color: #222;
	}

	& .esm-search-card-price {
		margin: 0 0 0.375em;
		color: #3C3B6E;
		font-weight: 600;
		font-size: 1em;
	}

	& .esm-search-card-meta {
		margin: 0 0 0.375em;
		font-size: 0.8125em;
		color: #888;
	}

	& .esm-search-card-excerpt {
		margin: 0;
		font-size: 0.875em;
		color: #555;
		line-height: 1.4;
	}
}

.esm-search-card-post {
	& .esm-search-card-thumb {
		aspect-ratio: 16 / 9;
	}
}

.esm-search-card-store {
	& .esm-search-card-thumb {
		aspect-ratio: 16 / 9;
		position: relative;
	}

	& .esm-search-card-thumb-placeholder {
		background: #3C3B6E;
	}

	& .esm-search-card-avatar {
		position: absolute;
		right: 0.625em;
		bottom: 0.625em;
		width: 3em;
		height: 3em;
		border-radius: 50%;
		overflow: hidden;
		background: #fff;
		box-shadow: 0 0 0 0.1875em #fff, 0 0.125em 0.375em rgba(0, 0, 0, 0.2);

		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
	}
}

.esm-search-card-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375em;
	margin: 0 0 0.5em;

	& .esm-search-pill {
		display: inline-block;
		padding: 0.1875em 0.625em;
		background: #3C3B6E;
		color: #fff;
		font-size: 0.75em;
		font-weight: 600;
		border-radius: 0.875em;
		line-height: 1.3;
	}
}

.esm-search-empty,
.esm-search-no-results {
	padding: 2.5em 1em;
	text-align: center;
	color: #555;
	font-size: 1.125em;
}

/* -----------------------------------------------------------------
 * Loading indicator — animated bar under the input while a fetch is
 * in flight. Toggled by .is-loading on the form.
 * ----------------------------------------------------------------- */
.esm-search-form {
	&::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -0.25em;
		height: 0.375em;
		border-radius: 0.25em;
		background:
			linear-gradient(
				90deg,
				transparent 0%,
				#6d6bc8 25%,
				#a4a2e8 50%,
				#6d6bc8 75%,
				transparent 100%
			),
			#3C3B6E;
		background-size: 50% 100%, 100% 100%;
		background-repeat: no-repeat, no-repeat;
		background-position: -50% 0, 0 0;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.15s ease;
		box-shadow: 0 0 0.5em rgba(109, 107, 200, 0.6);
	}

	&.is-loading::after {
		opacity: 1;
		animation: esm-suggest-loading 0.9s linear infinite;
	}
}

@keyframes esm-suggest-loading {
	0%   { background-position: -50% 0, 0 0; }
	100% { background-position: 150% 0, 0 0; }
}

/* -----------------------------------------------------------------
 * Live suggest dropdown
 * ----------------------------------------------------------------- */
.esm-search-suggest {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 10000;
	margin-top: 0.25em;
	max-height: calc(100dvh - 8em);
	overflow-y: auto;
	background: #fff;
	border: 0.0625em solid #ccc;
	border-radius: 0.375em;
	box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.15);

	& .esm-suggest-group {
		border-bottom: 0.0625em solid #eee;

		&:last-of-type {
			border-bottom: none;
		}
	}

	& .esm-suggest-group-label {
		padding: 0.5em 0.875em 0.25em;
		font-size: 0.75em;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: #888;
		background: #fafafa;
	}

	& .esm-suggest-row {
		display: flex;
		align-items: center;
		gap: 0.625em;
		padding: 0.5em 0.875em;
		color: #222;
		text-decoration: none;
		cursor: pointer;

		&:hover,
		&.is-active {
			background: #f3f3f7;
		}

		& .esm-suggest-thumb {
			flex: 0 0 auto;
			width: 2.5em;
			height: 2.5em;
			border-radius: 0.25em;
			overflow: hidden;
			background: #f5f5f5;

			& img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}
		}

		& .esm-suggest-body {
			flex: 1 1 auto;
			min-width: 0;
			display: flex;
			flex-direction: column;
			gap: 0.1875em;
		}

		& .esm-suggest-title {
			font-size: 0.9375em;
			line-height: 1.3;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		& .esm-suggest-pill {
			display: inline-block;
			align-self: flex-start;
			padding: 0.125em 0.5em;
			background: #3C3B6E;
			color: #fff;
			font-size: 0.6875em;
			font-weight: 600;
			border-radius: 0.875em;
			line-height: 1.3;
		}
	}

	& .esm-suggest-footer {
		display: block;
		padding: 0.625em 0.875em;
		text-align: center;
		background: #3C3B6E;
		color: #fff;
		font-size: 0.875em;
		font-weight: 600;
		text-decoration: none;
		cursor: pointer;

		&:hover,
		&.is-active {
			background: #6d6bc8;
			color: #fff;
		}
	}

	& .esm-suggest-empty {
		padding: 1em 0.875em;
		text-align: center;
		color: #888;
		font-size: 0.875em;
	}
}

@media (max-width: 48em) {
	.esm-search-suggest {
		max-height: calc(100dvh - 4em);
	}
}

.esm-search-empty-links {
	margin-top: 1em;
	display: flex;
	gap: 1em;
	justify-content: center;

	& .esm-search-empty-link {
		color: #3C3B6E;
		text-decoration: underline;

		&:hover {
			color: #6d6bc8;
		}
	}
}

/* -----------------------------------------------------------------
 * Phase 2.5 — Filter sidebar + chips
 * Sidebar on desktop, off-canvas drawer on mobile.
 * ----------------------------------------------------------------- */
.esm-search-layout {
	display: grid;
	grid-template-columns: 16em 1fr;
	gap: 1.5em;
	align-items: flex-start;

	/* Phase 2.5b: stores and posts now have facets so the sidebar shows for
	 * all three tabs. The sidebar template already guards itself with
	 * has_facets — when a tab genuinely has no filters the sidebar PHP
	 * outputs nothing and the grid collapses via the :not(:has) rule below.
	 * The blanket hide rule that was here (data-active-scope=stores/posts →
	 * display:none) is removed; layout is driven by sidebar presence. */
	&:not(:has(.esm-search-filters)) {
		grid-template-columns: 1fr;
	}
}

.esm-search-results-wrap {
	min-width: 0;
	transition: opacity 0.15s ease;

	&.is-loading {
		opacity: 0.55;
	}
}

/* Sidebar + chips fade on tab switch */
.esm-search-filters {
	transition: opacity 0.18s ease;
}

.esm-search-active-chips {
	transition: opacity 0.18s ease;
}

.esm-search-filters {
	position: relative;

	& .esm-search-filters-toggle {
		display: none;
	}

	& .esm-search-filters-panel {
		display: block;
		background: #fff;
		border: 0.0625em solid #e5e5e5;
		border-radius: 0.375em;
		padding: 1em;
	}

	& .esm-search-filters-panel-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 0 0.75em;
		padding-bottom: 0.625em;
		border-bottom: 0.0625em solid #eee;
	}

	& .esm-search-filters-title {
		margin: 0;
		font-size: 1em;
		font-weight: 700;
		color: #3C3B6E;
	}

	& .esm-search-filters-close {
		display: none;
		background: transparent;
		border: none;
		font-size: 1.5em;
		line-height: 1;
		color: #555;
		cursor: pointer;
		padding: 0;

		&:hover {
			color: #3C3B6E;
		}
	}
}

.esm-search-facet {
	border: none;
	padding: 0;
	margin: 0 0 1.25em;

	& .esm-search-facet-label {
		display: block;
		font-size: 0.875em;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: #555;
		margin: 0 0 0.5em;
		padding: 0;
	}
}

.esm-search-facet-checkbox {
	& .esm-search-facet-options {
		list-style: none;
		margin: 0;
		padding: 0;
		max-height: 18em;
		overflow-y: auto;
	}

	& .esm-search-facet-option {
		margin: 0;
		padding: 0;

		& label {
			display: flex;
			align-items: center;
			gap: 0.5em;
			padding: 0.25em 0;
			font-size: 0.9375em;
			color: #222;
			cursor: pointer;
			line-height: 1.3;

			&:hover {
				color: #3C3B6E;
			}
		}

		& input[type="checkbox"] {
			margin: 0;
			cursor: pointer;
			accent-color: #3C3B6E;
		}

		& .esm-search-facet-option-label {
			flex: 1 1 auto;
		}

		& .esm-search-facet-option-count {
			flex: 0 0 auto;
			font-size: 0.8125em;
			color: #888;
		}

		&.is-empty {
			& label {
				color: #aaa;
				cursor: not-allowed;
			}

			& input[type="checkbox"] {
				cursor: not-allowed;
			}
		}
	}
}

.esm-search-facet-range {
	& .esm-search-facet-range-inputs {
		display: flex;
		align-items: flex-end;
		gap: 0.5em;
	}

	& .esm-search-facet-range-field {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		gap: 0.25em;
	}

	& .esm-search-facet-range-field-label {
		font-size: 0.75em;
		color: #888;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	& .esm-search-facet-range-field input[type="number"] {
		width: 100%;
		padding: 0.4375em 0.5em;
		font-size: 0.9375em;
		border: 0.0625em solid #ccc;
		border-radius: 0.25em;

		&:focus {
			border-color: #3C3B6E;
			outline: none;
		}
	}

	& .esm-search-facet-range-sep {
		padding-bottom: 0.5em;
		color: #888;
	}

	& .esm-search-facet-range-hint {
		margin: 0.5em 0 0;
		font-size: 0.75em;
		color: #888;
	}
}

.esm-search-filters-actions {
	display: flex;
	gap: 0.5em;
	padding-top: 0.75em;
	border-top: 0.0625em solid #eee;

	& .esm-search-filters-apply,
	& .esm-search-filters-clear {
		padding: 0.5em 0.875em;
		font-size: 0.875em;
		border-radius: 0.25em;
		cursor: pointer;
		border: 0.0625em solid transparent;
	}

	& .esm-search-filters-apply {
		background: #3C3B6E;
		color: #fff;
		border-color: #3C3B6E;
		flex: 1 1 auto;

		&:hover {
			background: #6d6bc8;
			border-color: #6d6bc8;
		}
	}

	& .esm-search-filters-clear {
		background: #fff;
		color: #555;
		border-color: #ccc;

		&:hover {
			color: #3C3B6E;
			border-color: #3C3B6E;
		}
	}
}

/* Active chips above results */
.esm-search-active-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 1.25em;
}

.esm-search-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375em;
	padding: 0.3125em 0.75em;
	background: #f3f3f7;
	border: 0.0625em solid #d9d9e3;
	border-radius: 1.25em;
	font-size: 0.875em;
	color: #3C3B6E;
	cursor: pointer;
	line-height: 1.2;
	font-weight: 500;

	&:hover {
		background: #3C3B6E;
		color: #fff;
		border-color: #3C3B6E;
	}

	& .esm-search-chip-x {
		font-size: 1.125em;
		line-height: 0.8;
	}
}

.esm-search-chip-clear-all {
	background: transparent;
	border-color: transparent;
	color: #888;
	font-weight: 400;
	text-decoration: underline;

	&:hover {
		background: transparent;
		color: #3C3B6E;
		border-color: transparent;
	}
}

/* Mobile drawer — below 48em */
@media (max-width: 48em) {
	.esm-search-layout {
		grid-template-columns: 1fr;
	}

	.esm-search-filters {
		& .esm-search-filters-toggle {
			display: inline-flex;
			align-items: center;
			gap: 0.375em;
			padding: 0.5em 0.875em;
			background: #fff;
			color: #3C3B6E;
			border: 0.0625em solid #3C3B6E;
			border-radius: 0.25em;
			font-size: 0.9375em;
			font-weight: 600;
			cursor: pointer;
			margin-bottom: 0.5em;

			&:hover {
				background: #3C3B6E;
				color: #fff;
			}

			& .esm-search-filters-toggle-icon {
				display: inline-flex;
			}

			& .esm-search-filters-toggle-count {
				font-size: 0.875em;
				font-weight: 700;
			}
		}

		& .esm-search-filters-panel {
			display: none;
			position: fixed;
			inset: 0;
			z-index: 9999;
			background: #fff;
			padding: 1.25em;
			overflow-y: auto;
			border: none;
			border-radius: 0;
		}

		& .esm-search-filters-close {
			display: inline-block;
		}

		&.is-open .esm-search-filters-panel {
			display: block;
		}
	}

	body.esm-search-filters-locked {
		overflow: hidden;
	}
}

/* ── Reviews: star rating display on product cards ── */
.esm-search-card-rating {
	display: flex;
	align-items: center;
	gap: 0.3em;
	margin-top: 0.25em;

	.esm-search-card-stars {
		display: inline-flex;
		align-items: center;
		line-height: 1;
		font-size: 0.875em;

		.esm-star {
			display: inline-block;
		}

		.esm-star-full {
			color: #f5a623;
		}

		.esm-star-half {
			color: #f5a623;
			opacity: 0.5;
		}

		.esm-star-empty {
			color: #ddd;
		}
	}

	.esm-search-card-review-count {
		font-size: 0.75em;
		color: #777;
		white-space: nowrap;
	}
}

/* ── Step 2: Variation surfacing — badge + swatch row ── */
.esm-search-card-variation-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.375em;
	margin-top: 0.375em;

	.esm-search-card-variation-badge {
		display: inline-block;
		background: #3C3B6E;
		color: #fff;
		font-size: 0.75em;
		line-height: 1;
		padding: 0.3em 0.625em;
		border-radius: 0.875em;
		white-space: nowrap;
	}

	.esm-search-card-variation-more {
		display: inline-block;
		color: #3C3B6E;
		font-size: 0.75em;
		line-height: 1;
		padding: 0.3em 0;
		white-space: nowrap;
		opacity: 0.8;
	}
}

/* -----------------------------------------------------------------
 * Phase 3 — Attribute facets (color, size, condition)
 * ----------------------------------------------------------------- */

/* Color dot — small swatch beside colour checkbox labels.
 * .esm-facet-color-dot gets a style="background-color:#hex" when the color
 * name resolves in the hex map. When it does not resolve, no inline style is
 * set and the rainbow conic-gradient fallback fires instead, communicating
 * "this product has a color but we can't represent it as a single swatch." */
.esm-facet-color-dot {
	display: inline-block;
	width: 0.875em;
	height: 0.875em;
	border-radius: 50%;
	border: 0.0625em solid rgba(0, 0, 0, 0.15);
	vertical-align: middle;
	margin-right: 0.375em;
	flex-shrink: 0;
	background: conic-gradient(
		#e53935 0deg 45deg,
		#fb8c00 45deg 90deg,
		#fdd835 90deg 135deg,
		#43a047 135deg 180deg,
		#1e88e5 180deg 225deg,
		#8e24aa 225deg 270deg,
		#f06292 270deg 315deg,
		#e53935 315deg 360deg
	);
}

/* Progressive disclosure — options beyond the show_more_threshold are
 * hidden server-side by this class. JS toggles display:'' to reveal them. */
.esm-facet-hidden {
	display: none;
}

/* "Show N more" / "Show less" toggle button. */
.esm-search-facet-show-more {
	display: inline-block;
	margin-top: 0.5em;
	padding: 0;
	background: none;
	border: none;
	color: #3C3B6E;
	font-size: 0.875em;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 0.2em;

	&:hover {
		color: #6d6bc8;
		background: transparent;
	}
}

/* Radio facet — same visual pattern as checkbox facets. */
.esm-search-facet-radio {
	& .esm-search-facet-options {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	& .esm-search-facet-option {
		& label {
			display: flex;
			align-items: center;
			gap: 0.375em;
			cursor: pointer;
			padding: 0.25em 0;
		}

		&.is-empty {
			opacity: 0.45;
		}
	}
}