/* =========================================================================
 * Buscador del header + iconos de línea fina — cosmetica (global)
 * ====================================================================== */

/* Iconos del header (carrito, usuario) + lupa: línea fina, color de marca.
   Especificidad 0,4,1 para vencer al fill que Elementor aplica al SVG. */
.turbo-header-template .elementor-widget-icon .elementor-icon-wrapper .elementor-icon svg,
.cosmetica-search-toggle svg {
	fill: none;
	stroke: var(--color-primario);
	stroke-width: 1;
	width: 20px;
	height: 20px;
	max-height: 20px;
	transition: stroke 0.25s ease;
}

/* Hover de todos los iconos del header (carrito, usuario, lupa):
   stroke secundario, fondo transparente, mismo comportamiento. */
.turbo-header-template .elementor-widget-icon .elementor-icon,
.cosmetica-search-toggle {
	background: transparent;
	transition: background 0.25s ease;
}
.turbo-header-template .elementor-widget-icon .elementor-icon:hover,
.cosmetica-search-toggle:hover {
	background: transparent;
}
.turbo-header-template .elementor-widget-icon .elementor-icon-wrapper .elementor-icon:hover svg,
.cosmetica-search-toggle:hover svg {
	stroke: var(--color-secundario);
}

/* Botón de la lupa en el header. */
.cosmetica-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-primario);
	cursor: pointer;
	line-height: 0;
}
/* La lupa es <button>; vence a la regla [type="button"]:hover del tema. */
button.cosmetica-search-toggle:hover {
	background: transparent;
}

/* ============================================================ Popup modal */
.cosmetica-search-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 20px;
}
.cosmetica-search-modal[hidden] { display: none; }
.cosmetica-search-modal__overlay {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--color-primario) 55%, transparent);
}
.cosmetica-search-modal__dialog {
	position: relative;
	width: min(560px, 100%);
	background: var(--color-fondo-1);
	padding: 40px 32px 32px;
	box-shadow: 0 20px 60px color-mix(in srgb, var(--color-primario) 30%, transparent);
}
.cosmetica-search-modal__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	color: var(--color-primario);
	cursor: pointer;
	line-height: 0;
}
.cosmetica-search-modal__close svg { fill: none; stroke: var(--color-primario); stroke-width: 1; }
.cosmetica-search-modal__close:hover { color: var(--color-secundario); }

/* Formulario. */
.cosmetica-search-form {
	display: flex;
	gap: 12px;
	align-items: stretch;
}
.cosmetica-search-form__input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--color-primario);
	border-radius: 0;
	background: var(--color-fondo-1);
	color: var(--color-primario);
	font-family: var(--fuente-texto);
	font-size: 0.9375rem;
}
.cosmetica-search-form__input:focus { outline: none; border-color: var(--color-secundario); }
/* Botón "Buscar": solo evita que el flex lo estire. Forma, colores, borde,
   radius, padding, tipografía, hover y flecha salen del botón global de
   style.css (look del hero). */
.cosmetica-search-form__submit { flex: 0 0 auto; }

/* ==================================================== Autocompletado */
.cosmetica-search-suggestions {
	margin-top: 8px;
	border: 1px solid var(--color-primario);
	border-radius: 0;
	background: var(--color-fondo-1);
	font-family: var(--fuente-texto);
	color: var(--color-primario);
	max-height: 360px;
	overflow-y: auto;
}
.cosmetica-search-suggestion {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	text-decoration: none;
	color: var(--color-primario);
	border-bottom: 1px solid var(--color-fondo-2);
	transition: background .2s ease;
}
.cosmetica-search-suggestion:last-child { border-bottom: 0; }
.cosmetica-search-suggestion:hover { background: var(--color-fondo-2); }
.cosmetica-search-suggestion__thumb { flex: 0 0 auto; }
.cosmetica-search-suggestion__thumb img {
	width: 50px;
	height: 50px;
	object-fit: cover;
	display: block;
	background: var(--color-fondo-2);
}
.cosmetica-search-suggestion__name {
	flex: 1 1 auto;
	font-size: 0.9375rem;
	color: var(--color-primario);
	line-height: 1.3;
}
.cosmetica-search-suggestion__price {
	flex: 0 0 auto;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-primario);
}
.cosmetica-search-suggestion__price .amount { color: var(--color-primario); }
.cosmetica-search-suggestions__empty {
	padding: 14px 12px;
	font-size: 0.9375rem;
	color: var(--color-primario);
}

/* ================================================= Título de resultados */
.search .page-header .entry-title {
	font-family: var(--fuente-titulos);
	font-weight: 500;
	color: var(--color-primario);
	margin: 0 0 24px;
}