/**
 * NAYÚ · Buscador
 */

.nayu-lupa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.nayu-lupa:focus-visible {
	outline: 2px solid var(--wp--preset--color--verde, #2f4034);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- El panel ------------------------------------------------------------- */

.nayu-buscar-velo {
	position: fixed;
	inset: 0;
	z-index: 99997;
	background: rgba(31, 36, 32, 0.4);
	opacity: 0;
	transition: opacity 220ms ease;
}

.nayu-buscar-velo.esta-abierto {
	opacity: 1;
}

.nayu-buscar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99998;
	background: var(--wp--preset--color--base, #fbf6ee);
	border-bottom: 1px solid var(--wp--preset--color--arena, #e8decb);
	transform: translateY(-100%);
	transition: transform 220ms cubic-bezier(0.2, 0, 0.2, 1);
	max-height: 92vh;
	display: flex;
	flex-direction: column;
}

.nayu-buscar.esta-abierto {
	transform: translateY(0);
}

body.nayu-buscar-abierto {
	overflow: hidden;
}

/* --- La barra ------------------------------------------------------------- */

.nayu-buscar__barra {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 760px;
	width: 100%;
	margin-inline: auto;
	padding: 22px 24px;
}

.nayu-buscar__lupa {
	display: flex;
	color: var(--wp--preset--color--piedra, #8f887c);
	flex: 0 0 auto;
}

.nayu-buscar__campo {
	flex: 1;
	min-width: 0;
	font-family: inherit;
	font-size: clamp(1.0625rem, 2vw, 1.375rem);
	color: var(--wp--preset--color--contraste, #1f2420);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--arena, #e8decb);
	padding: 8px 2px;
}

.nayu-buscar__campo:focus {
	outline: none;
	border-bottom-color: var(--wp--preset--color--verde, #2f4034);
}

.nayu-buscar__campo::-webkit-search-cancel-button {
	display: none;
}

.nayu-buscar__cerrar {
	flex: 0 0 auto;
	font-size: 28px;
	line-height: 1;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0 4px;
}

/* --- Sugerencias ---------------------------------------------------------- */

.nayu-buscar__panel {
	max-width: 760px;
	width: 100%;
	margin-inline: auto;
	padding: 0 24px 28px;
	overflow-y: auto;
}

.nayu-buscar.esta-cargando .nayu-buscar__panel {
	opacity: 0.55;
}

.nayu-buscar__titulo {
	margin: 18px 0 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--piedra, #8f887c);
}

.nayu-buscar__pildoras {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nayu-buscar__pildora {
	display: inline-block;
	padding: 8px 16px;
	font-size: 0.8125rem;
	text-decoration: none;
	color: var(--wp--preset--color--contraste, #1f2420);
	background: var(--wp--preset--color--superficie, #fff);
	border: 1px solid var(--wp--preset--color--arena, #e8decb);
	border-radius: 999px;
	transition: border-color 160ms ease;
}

.nayu-buscar__pildora:hover,
.nayu-buscar__pildora:focus-visible {
	border-color: var(--wp--preset--color--verde, #2f4034);
	color: var(--wp--preset--color--verde, #2f4034);
}

.nayu-buscar__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nayu-buscar__lista a {
	display: grid;
	grid-template-columns: 62px 1fr;
	gap: 14px;
	align-items: center;
	padding: 10px 0;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid var(--wp--preset--color--arena, #e8decb);
}

.nayu-buscar__lista li:last-child a {
	border-bottom: 0;
}

.nayu-buscar__lista a:hover .nayu-buscar__nombre,
.nayu-buscar__lista a:focus-visible .nayu-buscar__nombre {
	color: var(--wp--preset--color--verde, #2f4034);
}

.nayu-buscar__foto {
	display: block;
	width: 62px;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--superficie, #fff);
	border: 1px solid var(--wp--preset--color--arena, #e8decb);
	overflow: hidden;
}

.nayu-buscar__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.nayu-buscar__datos {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.nayu-buscar__nombre {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
	font-size: 1rem;
	line-height: 1.25;
}

.nayu-buscar__precio {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--contraste, #1f2420);
}

.nayu-buscar__todo {
	display: inline-block;
	margin-top: 16px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--verde, #2f4034);
}

.nayu-buscar__vacio {
	margin: 0;
	color: var(--wp--preset--color--piedra, #8f887c);
}

@media (max-width: 600px) {
	.nayu-buscar {
		max-height: 100vh;
		height: 100vh;
	}

	.nayu-buscar__barra {
		padding: 16px 18px;
	}

	.nayu-buscar__panel {
		padding: 0 18px 24px;
		flex: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nayu-buscar,
	.nayu-buscar-velo,
	.nayu-buscar__pildora {
		transition: none;
	}
}

/* --- El buscador dentro del menú ------------------------------------------ */

/* Sale como campo y no como icono: dentro de un desplegable, una lupa suelta
   no se distingue de un elemento más del menú. */
.nayu-buscar-menu {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin: 0 0 24px;
	padding: 13px 18px;
	font-family: inherit;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--piedra, #8f887c);
	text-align: left;
	background: var(--wp--preset--color--base, #fbf6ee);
	border: 1px solid var(--wp--preset--color--arena, #e8decb);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.nayu-buscar-menu:hover,
.nayu-buscar-menu:focus-visible {
	color: var(--wp--preset--color--contraste, #1f2420);
	border-color: var(--wp--preset--color--verde, #2f4034);
}

.nayu-buscar-menu svg {
	flex: 0 0 auto;
	color: var(--wp--preset--color--verde, #2f4034);
}

/* Por encima de 600px el menú deja de ser desplegable y es una fila de
   enlaces: ahí el campo estorbaría, y la lupa sigue en la cabecera. */
@media (min-width: 601px) {

	.nayu-buscar-menu {
		display: none;
	}
}