/*
 * Espacio Deco — buscador de productos en el header (brief 2.2).
 *
 * El header tenía un icono "Buscar" que era un enlace a /tienda/, así que no
 * buscaba nada. Ahora hay un bloque Búsqueda (búsqueda de productos: el bloque
 * de búsqueda de WordPress limitado a `post_type = product`, que es lo que
 * WooCommerce llama "Búsqueda de productos") y el icono de enlace se quitó.
 *
 * Se ve siempre, también en mobile: en escritorio es la píldora de 240 px que
 * describe la sección 5 del brief, entre las categorías y Cuenta/Carrito, y en
 * mobile pasa a una fila propia debajo del logo y los iconos. El despliegue de
 * la lupa con el buscador debajo, con las categorías grandes en el panel, es el
 * diseño fino de la Fase 5; acá el bloque sólo tiene que estar y funcionar.
 */

/* ---------- Lugar del buscador en el header ---------- */

/* Escritorio: logo | categorías | buscador | cuenta y carrito (sección 5). */
.edc-top .edc-head {
	grid-template-columns: auto 1fr auto auto;
}

@media (max-width: 760px) {
	.edc-top .edc-head {
		grid-template-columns: 1fr auto auto;
		grid-template-rows: auto auto;
		row-gap: 10px;
	}

	.edc-top .edc-head > .edc-logo {
		grid-area: 1 / 1;
	}

	.edc-top .edc-head > .edc-nav {
		grid-area: 1 / 2;
	}

	.edc-top .edc-head > .edc-actions {
		grid-area: 1 / 3;
	}

	/* Fila propia a todo el ancho: en el header de mobile no hay lugar al lado. */
	.edc-top .edc-head > .edc-buscar {
		grid-area: 2 / 1 / 3 / -1;
	}
}

/* ---------- El bloque: píldora ---------- */

.edc-buscar {
	width: 240px;
}

.edc-buscar .wp-block-search__inside-wrapper {
	align-items: center;
	min-width: 0;
	padding: 0 5px 0 14px;
	border: 1px solid var(--wp--preset--color--edc-linea);
	border-radius: 999px;
	background: var(--wp--preset--color--edc-blanco);
}

.edc-buscar .wp-block-search__input {
	height: 36px;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: 14px;
	color: var(--wp--preset--color--edc-tinta);
}

.edc-buscar .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--edc-texto-suave);
	opacity: 1;
}

.edc-buscar .wp-block-search__input:focus {
	outline: none;
}

.edc-buscar .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--edc-cacao);
}

.edc-buscar .wp-block-search__button {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	min-width: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--edc-cacao);
}

.edc-buscar .wp-block-search__button:hover {
	background: var(--wp--preset--color--edc-manteca);
}

.edc-buscar .wp-block-search__button svg {
	width: 19px;
	height: 19px;
}

@media (max-width: 760px) {
	.edc-buscar {
		width: 100%;
	}
}