/**
 * Mimosa - Buscador de productos en cabecera (LIGHTBOX).
 * Regla FLAT (cliente insistente): sin border-radius, sin bordes, sin sombras en NINGÚN sitio.
 * Separación por espacio en blanco / color / tipografía. `outline` solo para foco de teclado.
 * Subrayado del input = bloque de fondo (linear-gradient), no un border.
 * Paleta: taupe #9F8E7D, taupe oscuro #8A7A68, crema #F5F0E0, gris #7E7E7E, salvia #7A8B60.
 */

/* ---- Disparador (junto al icono de cuenta) --------------------------------- */
/* Magnifier plano #7E7E7E: sin fondo, SIN efecto hover.
   Tamaño y trazo IGUALES a los iconos de cuenta/carrito (svg ~20px, stroke 2).
   Sin márgenes: al ser un flex-child hermano del icono de cuenta hereda el MISMO
   gap (var(--widgets-spacing)) que separa cuenta<->carrito, quedando equiespaciado. */
/* El contenedor de iconos de cabecera no debe envolver al añadir la lupa (hay sitio). */
.mimosa-search-host {
	flex-wrap: nowrap !important;
}

.mimosa-search-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	width: 20px;
	height: 20px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: #7E7E7E;
	cursor: pointer;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
	vertical-align: middle;
}
.mimosa-search-trigger:hover,
.mimosa-search-trigger:active,
.mimosa-search-trigger:focus {
	background: transparent;
	color: #7E7E7E;
	opacity: 1;
	transform: none;
	outline: none;
}
.mimosa-search-trigger svg {
	width: 20px;
	height: 20px;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2; /* iguala el grosor visual del trazo de los iconos del header */
	stroke-linecap: round;
	stroke-linejoin: round;
}
.mimosa-search-trigger:focus-visible {
	outline: 2px solid #7E7E7E;
	outline-offset: 3px;
}
/* En la HOME (header sobre el hero), el icono va en crema. */
.home .mimosa-search-trigger,
.home .mimosa-search-trigger:hover,
.home .mimosa-search-trigger:active,
.home .mimosa-search-trigger:focus {
	color: #F5F0E0;
}

/* ---- LIGHTBOX: overlay a pantalla completa --------------------------------- */
.mimosa-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	/* Scrim crema semiopaco: calmado, premium, atenúa la página de fondo. */
	background: rgba(245, 240, 224, 0.97);
	display: none;
	flex-direction: column;
	align-items: center;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	font-family: "Montserrat", sans-serif;
}
.mimosa-search-overlay.is-open {
	display: flex;
	animation: mimosaFade .2s ease both;
}
/* Entrada moderna: leve fundido + ascenso de la caja. */
.mimosa-search-overlay.is-open .mimosa-search-box {
	animation: mimosaRise .30s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes mimosaFade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes mimosaRise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.mimosa-search-overlay.is-open,
	.mimosa-search-overlay.is-open .mimosa-search-box {
		animation: none;
	}
}

/* Cierre (arriba a la derecha), plano */
.mimosa-search-close {
	position: fixed; /* fijo al viewport: siempre alcanzable, también en móvil con scroll */
	z-index: 2;
	top: 20px;
	right: 24px;
	width: 60px;
	height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	color: #8A7A68;
	cursor: pointer;
	padding: 0;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
}
.mimosa-search-close svg {
	width: 34px; height: 34px;
	stroke: currentColor; stroke-width: 2;
	fill: none; stroke-linecap: round; stroke-linejoin: round;
}
/* no hover effect on the close button (per request) */
.mimosa-search-close:hover,
.mimosa-search-close:active,
.mimosa-search-close:focus { color: #8A7A68; background: transparent; }
.mimosa-search-close:focus-visible { outline: 2px solid #7A8B60; outline-offset: 3px; }

/* Caja central (input + resultados) */
.mimosa-search-box {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px 72px;
	box-sizing: border-box;
}

/* Espacio superior generoso para el input */
.mimosa-search-head {
	padding-top: 13vh;
	padding-bottom: 8px;
}
.mimosa-search-kicker {
	display: none; /* Título "BUSCAR PRODUCTOS" oculto por diseño. */
	text-align: center;
	color: #9F8E7D;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 22px;
}

/* Campo del input: blanco, plano, con subrayado por BLOQUE de fondo (no border) */
.mimosa-search-field {
	display: block;
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}
/* Prefijo .mimosa-search-overlay: sube especificidad para GANAR a `input[type=search]` del tema. */
.mimosa-search-overlay .mimosa-search-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	/* Caja blanca, plana y grande: sin bordes ni subrayado. */
	background: #ffffff;
	color: #8A7A68;
	font-family: inherit;
	font-size: 40px;
	font-weight: 500;
	letter-spacing: .3px;
	text-align: center;
	padding: 46px 52px;
	-webkit-appearance: none;
	appearance: none;
}
.mimosa-search-input::placeholder {
	color: #C9BCA8;
	font-weight: 400;
	opacity: 1;
}
/* Al hacer foco/clic, el placeholder "¿Qué estás buscando?" desaparece. */
.mimosa-search-overlay .mimosa-search-input:focus::placeholder {
	color: transparent;
}
.mimosa-search-input:focus {
	outline: none;
}
.mimosa-search-overlay.mimosa-kb .mimosa-search-input:focus-visible {
	outline: 2px solid #7A8B60;
	outline-offset: 6px;
}

/* Estado transitorio (buscando…) */
.mimosa-search-status {
	text-align: center;
	color: #7E7E7E;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 26px 0 0;
	min-height: 16px;
	display: none;
}
.mimosa-search-status.is-visible { display: block; }

/* Recuento de resultados */
.mimosa-search-count {
	text-align: center;
	color: #7E7E7E;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 30px 0 0;
	display: none;
}
.mimosa-search-count.is-visible { display: block; }

/* Estado vacío (amable) */
.mimosa-search-empty {
	display: none;
	text-align: center;
	color: #8A7A68;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	max-width: 480px;
	margin: 48px auto 0;
}
.mimosa-search-empty.is-visible { display: block; }
.mimosa-search-empty strong { color: #7A8B60; font-weight: 600; }

/* Rejilla de sugerencias visuales */
.mimosa-search-grid {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 32px 26px;
}
.mimosa-search-card { margin: 0; padding: 0; }
.mimosa-search-card a {
	display: block;
	text-decoration: none;
	color: #9F8E7D;
	background: transparent;
	padding: 6px;
	transition: opacity .14s ease;
}
.mimosa-search-card a:hover .mimosa-search-name,
.mimosa-search-card a.is-active .mimosa-search-name {
	color: #7A8B60;
}
.mimosa-search-card a:hover .mimosa-search-thumb,
.mimosa-search-card a.is-active .mimosa-search-thumb {
	opacity: .82;
}
.mimosa-search-overlay.mimosa-kb .mimosa-search-card a.is-active {
	outline: 2px solid #7A8B60;
	outline-offset: 2px;
}
.mimosa-search-card a:focus { outline: none; }

.mimosa-search-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: #ECE4CE;
	margin-bottom: 12px;
	transition: opacity .16s ease;
}
.mimosa-search-name {
	display: block;
	color: #8A7A68;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .005em;
	transition: color .14s ease;
}
.mimosa-search-price {
	display: block;
	color: #B3A897;
	font-size: 14px;
	font-weight: 400;
	margin-top: 5px;
}
.mimosa-search-price del { color: #7E7E7E; opacity: .8; margin-right: 6px; }
.mimosa-search-price ins { text-decoration: none; color: #7A8B60; }
.mimosa-search-price .woocommerce-Price-amount { white-space: nowrap; }

/* Pie: ver todos */
.mimosa-search-all {
	display: none;
	text-align: center;
	margin-top: 46px;
}
.mimosa-search-all.is-visible { display: block; }
.mimosa-search-all a {
	display: inline-block;
	color: #7A8B60;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	background: transparent;
	padding: 8px 4px;
}
.mimosa-search-all a:hover { color: #8A7A68; }
.mimosa-search-all a:focus-visible { outline: 2px solid #7A8B60; outline-offset: 4px; }

/* Accesibilidad: texto solo para lectores de pantalla */
.mimosa-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 1200px) {
	.mimosa-search-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
	.mimosa-search-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 782px) {
	.mimosa-search-head { padding-top: 12vh; }
	.mimosa-search-overlay .mimosa-search-input { font-size: 30px; padding: 34px 24px; }
	.mimosa-search-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
}
@media (max-width: 460px) {
	.mimosa-search-head { padding-top: 92px; }
	.mimosa-search-overlay .mimosa-search-input { font-size: 26px; text-align: left; padding: 22px 14px; }
	.mimosa-search-box { padding: 0 18px 56px; }
	.mimosa-search-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
	.mimosa-search-close { top: 12px; right: 12px; }
}