/**
 * 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;

	& .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 {
	max-width: 1200px;
	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;
}

.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;
		}
	}
}