/* OmniaSearch · estilos
   Todo hereda la tipografía de la web (font: inherit) y los colores
   se controlan con las variables CSS inyectadas por el shortcode. */

.omnia-search {
	display: inline-flex;
	font-family: inherit;
}

.omnia-search * {
	box-sizing: border-box;
}

/* --- Botón / lupa --- */
.omnia-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--omnia-icon-color, currentColor);
	cursor: pointer;
	line-height: 0;
	border-radius: 50%;
	transition: opacity .2s ease, transform .2s ease;
}

.omnia-search__toggle:hover {
	opacity: .7;
}

.omnia-search__toggle:active {
	transform: scale(.92);
}

.omnia-search__toggle:focus-visible {
	outline: 2px solid var(--omnia-accent, #111);
	outline-offset: 3px;
}

.omnia-search__svg {
	width: var(--omnia-icon-size, 24px);
	height: var(--omnia-icon-size, 24px);
	display: block;
}

/* --- Overlay --- */
.omnia-search__overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: var(--omnia-overlay-top, 12%) 16px 16px;
	background: var(--omnia-overlay-bg, rgba(0,0,0,.55));
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .22s ease;
	font-family: inherit;
}

.omnia-search__overlay[hidden] {
	display: none;
}

.omnia-search__overlay.is-open {
	opacity: 1;
}

/* --- Panel --- */
.omnia-search__panel {
	width: 100%;
	max-width: 620px;
	background: var(--omnia-panel-bg, #fff);
	color: var(--omnia-text-color, inherit);
	border-radius: var(--omnia-radius, 12px);
	box-shadow: 0 24px 60px rgba(0,0,0,.25);
	overflow: hidden;
	transform: translateY(-12px);
	transition: transform .22s ease;
}

.omnia-search__overlay.is-open .omnia-search__panel {
	transform: translateY(0);
}

/* --- Input --- */
.omnia-search__inputwrap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px;
	border-bottom: 1px solid rgba(0,0,0,.08);
	color: var(--omnia-accent, #111);
}

.omnia-search__inputwrap .omnia-search__svg {
	flex: 0 0 auto;
	opacity: .6;
}

.omnia-search__input {
	flex: 1 1 auto;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: inherit;
	font-size: 1.1rem;
	color: var(--omnia-text-color, inherit);
	padding: 4px 0;
}

.omnia-search__input::placeholder {
	color: currentColor;
	opacity: .45;
}

.omnia-search__close {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: .5;
	padding: 0 4px;
	transition: opacity .2s ease;
}

.omnia-search__close:hover {
	opacity: 1;
}

/* --- Resultados --- */
.omnia-search__results {
	max-height: 58vh;
	overflow-y: auto;
	font-family: inherit;
}

.omnia-search__results::-webkit-scrollbar {
	width: 8px;
}

.omnia-search__results::-webkit-scrollbar-thumb {
	background: var(--omnia-accent, #111);
	border-radius: 8px;
	opacity: .4;
}

.omnia-search__item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid rgba(0,0,0,.05);
	transition: background .15s ease;
}

.omnia-search__item:last-child {
	border-bottom: 0;
}

.omnia-search__item:hover,
.omnia-search__item.is-active {
	background: rgba(0,0,0,.04);
}

.omnia-search__thumb {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 8px;
	background: rgba(0,0,0,.05);
}

.omnia-search__meta {
	flex: 1 1 auto;
	min-width: 0;
}

.omnia-search__title {
	font-weight: 600;
	font-size: .95rem;
	margin: 0 0 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.omnia-search__title mark {
	background: transparent;
	color: var(--omnia-accent, #111);
	font-weight: 700;
}

.omnia-search__price {
	font-size: .85rem;
	opacity: .8;
}

.omnia-search__price del {
	opacity: .5;
	margin-right: 6px;
}

.omnia-search__state {
	padding: 28px 18px;
	text-align: center;
	font-size: .95rem;
	opacity: .65;
}

@media (max-width: 600px) {
	.omnia-search__overlay {
		padding: var(--omnia-overlay-top-mobile, 30%) 10px 10px;
		align-items: flex-start;
	}
	.omnia-search__input {
		font-size: 1rem;
	}
}

/* ============================================================
   Modos inline y barra siempre visible
   ============================================================ */

/* Panel inline: se despliega bajo/junto a la lupa, sin overlay. */
.omnia-search--inline {
	position: relative;
}

.omnia-search__inline-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 9999;
	width: var(--omnia-inline-width, 320px);
	max-width: 90vw;
	background: var(--omnia-panel-bg, #fff);
	color: var(--omnia-text-color, inherit);
	border-radius: var(--omnia-radius, 12px);
	box-shadow: 0 16px 40px rgba(0,0,0,.18);
	overflow: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .2s ease, transform .2s ease;
}

.omnia-search__inline-panel[hidden] { display: none; }

.omnia-search__inline-panel.is-open {
	opacity: 1;
	transform: translateY(0);
}

/* Barra siempre visible. */
.omnia-search--bar {
	display: block;
	width: var(--omnia-inline-width, 320px);
	max-width: 100%;
	position: relative;
	font-family: inherit;
}

.omnia-search__bar {
	position: relative;
}

.omnia-search--bar .omnia-search__inputwrap {
	border: 1px solid rgba(0,0,0,.15);
	border-radius: var(--omnia-radius, 12px);
	background: var(--omnia-panel-bg, #fff);
}

.omnia-search--bar .omnia-search__close { display: none; }

.omnia-search--bar .omnia-search__results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 9999;
	background: var(--omnia-panel-bg, #fff);
	border-radius: var(--omnia-radius, 12px);
	box-shadow: 0 16px 40px rgba(0,0,0,.18);
	max-height: 60vh;
}

.omnia-search--bar .omnia-search__results:empty { display: none; }

/* Campos extra en resultados. */
.omnia-search__sku {
	display: block;
	font-size: .78rem;
	opacity: .55;
	margin-top: 1px;
}

.omnia-search__foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 3px;
}

.omnia-search__stock {
	font-size: .75rem;
	font-weight: 600;
	padding: 1px 7px;
	border-radius: 999px;
}

.omnia-search__stock.is-in {
	color: #0a7d36;
	background: rgba(10,125,54,.12);
}

.omnia-search__stock.is-out {
	color: #b42318;
	background: rgba(180,35,24,.12);
}

@media (max-width: 600px) {
	/* En móvil, el panel inline pasa a comportarse como barra ancha. */
	.omnia-search__inline-panel {
		position: fixed;
		left: 10px;
		right: 10px;
		top: var(--omnia-overlay-top-mobile, 30%);
		width: auto;
		max-width: none;
	}
}

/* ============================================================
   v2: botón limpiar, skeleton, estados, contexto, rating
   ============================================================ */

/* Botón limpiar (texto "Limpiar" dentro del input). */
.omnia-search__clear {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--omnia-accent, #111);
	font-family: inherit;
	font-size: .82rem;
	opacity: .7;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 6px;
	transition: opacity .15s ease;
}
.omnia-search__clear:hover { opacity: 1; text-decoration: underline; }
.omnia-search__clear[hidden] { display: none; }

/* Oculta la X nativa que algunos navegadores añaden a type="search". */
.omnia-search__input::-webkit-search-cancel-button,
.omnia-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}
.omnia-search__input::-ms-clear { display: none; width: 0; height: 0; }

/* Estados. */
.omnia-search__state {
	padding: 26px 18px;
	text-align: center;
	font-size: .95rem;
	opacity: .7;
}
.omnia-search__state.is-error {
	color: #b42318;
	opacity: 1;
}

/* Skeleton loader. */
.omnia-search__skeleton { padding: 6px 0; }
.omnia-search__skel-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
}
.omnia-search__skel-thumb {
	width: 48px; height: 48px;
	border-radius: 8px;
	flex: 0 0 auto;
}
.omnia-search__skel-lines { flex: 1 1 auto; }
.omnia-search__skel-lines span {
	display: block;
	height: 10px;
	border-radius: 6px;
	margin-bottom: 8px;
}
.omnia-search__skel-lines span:first-child { width: 70%; }
.omnia-search__skel-lines span:last-child { width: 40%; margin-bottom: 0; }
.omnia-search__skel-thumb,
.omnia-search__skel-lines span {
	background: linear-gradient( 90deg, rgba(0,0,0,.06) 25%, rgba(0,0,0,.12) 37%, rgba(0,0,0,.06) 63% );
	background-size: 400% 100%;
	animation: omnia-shimmer 1.2s ease-in-out infinite;
}
@keyframes omnia-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
	.omnia-search__skel-thumb,
	.omnia-search__skel-lines span { animation: none; }
}

/* Contexto inicial: grupos y chips. */
.omnia-search__group { padding: 10px 14px 6px; }
.omnia-search__group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .55;
	padding: 10px 18px 6px;
}
.omnia-search__count { font-weight: 600; opacity: .8; }
.omnia-search__recent-clear {
	border: 0; background: transparent;
	font-size: .7rem; text-transform: none; letter-spacing: 0;
	cursor: pointer; color: var(--omnia-accent, #111);
	opacity: .8; padding: 0;
}
.omnia-search__recent-clear:hover { opacity: 1; text-decoration: underline; }

.omnia-search__chip {
	display: inline-block;
	margin: 4px 6px 0 14px;
	padding: 5px 12px;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 999px;
	background: transparent;
	font-family: inherit;
	font-size: .85rem;
	color: inherit;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.omnia-search__chip + .omnia-search__chip { margin-left: 0; }
.omnia-search__chip:hover {
	border-color: var(--omnia-accent, #111);
	background: rgba(0,0,0,.03);
}

/* Rating con estrellas. */
.omnia-search__rating { display: inline-flex; gap: 1px; margin-right: 8px; }
.omnia-search__star { color: rgba(0,0,0,.2); font-size: .8rem; line-height: 1; }
.omnia-search__star.is-on { color: #f5a623; }

/* Sección de categorías coincidentes. */
.omnia-search__cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 18px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid rgba(0,0,0,.05);
	transition: background .15s ease;
}
.omnia-search__cat:hover { background: rgba(0,0,0,.04); }
.omnia-search__cat-name { font-size: .92rem; font-weight: 600; }
.omnia-search__cat-count {
	font-size: .78rem;
	opacity: .6;
	background: rgba(0,0,0,.06);
	padding: 1px 8px;
	border-radius: 999px;
}

/* --- Pie: ver todos los resultados ---
   Cierra el desplegable con una salida clara. Se separa visualmente de los
   resultados para que no se confunda con uno más de la lista. */
.omnia-search__viewall {
	align-items: center;
	border-top: 1px solid rgba(0, 0, 0, .08);
	color: var(--omnia-accent, #111);
	display: flex;
	font-size: .92rem;
	font-weight: 600;
	gap: 6px;
	justify-content: center;
	padding: 13px 16px;
	text-decoration: none;
}

.omnia-search__viewall::after {
	content: "→";
	transition: transform .18s ease;
}

.omnia-search__viewall:hover {
	background: rgba(0, 0, 0, .035);
}

.omnia-search__viewall:hover::after {
	transform: translateX(3px);
}

.omnia-search__viewall:focus-visible {
	outline: 2px solid var(--omnia-accent, #111);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.omnia-search__viewall::after {
		transition: none;
	}
}

/* =====================================================================
   FASE 2 · Tarjetas, rejilla y panel a dos columnas
   ================================================================== */

/* El panel se ensancha solo cuando hay algo que colocar. Un panel ancho con
   una lista de tres filas se ve vacío y desequilibrado. */
.omnia-search__panel {
	max-width: 620px;
	transition: max-width .2s ease, transform .22s ease;
}

.omnia-search[data-layout="grid"] .omnia-search__panel {
	max-width: 880px;
}

/* --- Distribución interna --- */
.omnia-search__layout {
	display: block;
}

.omnia-search__results.has-aside .omnia-search__layout {
	display: grid;
	grid-template-columns: minmax(150px, 210px) 1fr;
}

/* Sin relleno superior: el espaciado de arriba lo pone la cabecera del bloque,
   igual que en la columna derecha. Con 12px aquí, «Búsquedas populares» caía
   12px por debajo de «Productos recomendados» y las dos columnas no
   arrancaban a la misma altura. */
.omnia-search__aside {
	border-right: 1px solid rgba(0, 0, 0, .08);
	padding: 0 14px 14px;
}

.omnia-search__aside[hidden] {
	display: none;
}

.omnia-search__main {
	min-width: 0; /* sin esto la rejilla desborda el contenedor */
	padding: 6px 0;
}

/* --- Rejilla de tarjetas --- */
.omnia-search__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(var(--omnia-cols, 3), minmax(0, 1fr));
	padding: 6px 14px 14px;
}

.omnia-search[data-layout="grid"] .omnia-search__item {
	align-items: stretch;
	border-radius: calc(var(--omnia-radius, 12px) * .7);
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.omnia-search[data-layout="grid"] .omnia-search__media {
	aspect-ratio: 1 / 1;
	display: block;
	position: relative;
	width: 100%;
}

.omnia-search[data-layout="grid"] .omnia-search__thumb {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.omnia-search[data-layout="grid"] .omnia-search__meta {
	padding: 10px 12px 12px;
}

.omnia-search[data-layout="grid"] .omnia-search__title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	line-height: 1.35;
	overflow: hidden;
}

/* --- Media y distintivos --- */
.omnia-search__media {
	flex: 0 0 auto;
	position: relative;
}

.omnia-search__thumb.is-empty {
	background: rgba(0, 0, 0, .05);
	display: block;
	height: 100%;
	min-height: 44px;
	min-width: 44px;
	width: 100%;
}

.omnia-search__badges {
	display: flex;
	flex-direction: column;
	gap: 4px;
	left: 8px;
	position: absolute;
	top: 8px;
}

.omnia-search__badge {
	border-radius: 4px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
	padding: 4px 6px;
}

.omnia-search__badge--sale {
	background: #C9302C;
	color: #fff;
}

.omnia-search__badge--out {
	background: rgba(0, 0, 0, .68);
	color: #fff;
}

/* --- Precio con oferta --- */
.omnia-search__price {
	align-items: baseline;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

.omnia-search__price-now {
	font-weight: 700;
}

.omnia-search__price-was {
	color: currentColor;
	font-size: .85em;
	opacity: .5;
}

/* El aviso de urgencia solo aparece cuando el stock real es bajo, así que
   puede permitirse destacar: si saliera siempre, dejaría de significar nada. */
.omnia-search__lowstock {
	color: #B0480F;
	font-size: .78rem;
	font-weight: 600;
}

/* --- Categorías en la columna lateral --- */
.omnia-search__aside .omnia-search__group-head {
	padding-left: 0;
	padding-right: 0;
}

.omnia-search__aside .omnia-search__cat {
	border-radius: 6px;
	padding: 6px 8px;
}

.omnia-search__cats {
	display: flex;
	flex-direction: column;
}

/* --- Esqueleto en rejilla --- */
.omnia-search__skeleton.is-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(var(--omnia-cols, 3), minmax(0, 1fr));
	padding: 6px 14px 14px;
}

.omnia-search__skel-card .omnia-search__skel-thumb {
	aspect-ratio: 1 / 1;
	height: auto;
	width: 100%;
}

.omnia-search__skel-card .omnia-search__skel-lines {
	padding: 10px 2px 0;
}

/* --- Móvil ---
   Por debajo de 780px la columna lateral pasa arriba (no se oculta: las
   categorías suelen ser el camino más corto al producto) y la rejilla baja
   a dos columnas, que es lo que cabe sin que la imagen se vuelva un sello. */
@media (max-width: 780px) {

	.omnia-search__results.has-aside .omnia-search__layout {
		display: block;
	}

	.omnia-search__aside {
		border-bottom: 1px solid rgba(0, 0, 0, .08);
		border-right: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding: 10px 14px;
	}

	.omnia-search__aside .omnia-search__group-head {
		flex: 1 0 100%;
	}

	.omnia-search__aside .omnia-search__cat {
		background: rgba(0, 0, 0, .04);
		border-radius: 999px;
		flex: 0 0 auto;
	}

	.omnia-search__grid,
	.omnia-search__skeleton.is-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 380px) {

	.omnia-search__grid,
	.omnia-search__skeleton.is-grid {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   MERCHANDISING · banner y sugerencia de redirección
   ================================================================== */

/* La redirección se OFRECE. Va arriba del todo y con aspecto de acción, no de
   resultado, para que se distinga de los productos. */
.omnia-search__redirect {
	align-items: center;
	background: rgba(0, 0, 0, .035);
	border-radius: calc(var(--omnia-radius, 12px) * .6);
	display: flex;
	gap: 10px;
	margin: 10px 14px;
	padding: 12px 14px;
	text-decoration: none;
}

.omnia-search__redirect:hover {
	background: rgba(0, 0, 0, .06);
}

.omnia-search__redirect-label {
	font-size: .8rem;
	opacity: .6;
}

.omnia-search__redirect-term {
	font-weight: 600;
}

.omnia-search__redirect::after {
	content: "→";
	margin-left: auto;
	opacity: .5;
}

.omnia-search__banner {
	display: block;
	margin: 10px 14px;
}

.omnia-search__banner img {
	border-radius: calc(var(--omnia-radius, 12px) * .6);
	display: block;
	height: auto;
	width: 100%;
}

.omnia-search__badge--pin {
	background: rgba(255, 255, 255, .92);
	color: #333;
}

@media (prefers-reduced-motion: reduce) {
	.omnia-search__redirect {
		transition: none;
	}
}

/* =====================================================================
   AJUSTES DE PRESENTACIÓN
   Correcciones a partir de ver el buscador funcionando sobre un tema real.
   ================================================================== */

/* --- 1. El panel se ajusta a lo que hay que enseñar ---
   Antes era siempre de 880 px en rejilla. Con un único resultado, la tarjeta
   ocupaba un tercio y quedaban dos tercios en blanco: parecía que la búsqueda
   había fallado a medias. Ahora el ancho depende del número de resultados. */
.omnia-search[data-layout="grid"][data-count="1"] .omnia-search__panel { max-width: 420px; }
.omnia-search[data-layout="grid"][data-count="2"] .omnia-search__panel { max-width: 620px; }
.omnia-search[data-layout="grid"][data-count="3"] .omnia-search__panel { max-width: 780px; }

/* Y la rejilla no reserva columnas que nadie va a ocupar. */
.omnia-search[data-layout="grid"][data-count="1"] .omnia-search__grid {
	grid-template-columns: minmax(0, 1fr);
}

.omnia-search[data-layout="grid"][data-count="2"] .omnia-search__grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Sin resultados el panel se estrecha: un mensaje de una línea centrado en
   880 px se lee como un error. */
.omnia-search[data-count="0"] .omnia-search__panel { max-width: 520px; }

/* --- 2. Tope al tamaño de la tarjeta ---
   Con pocas columnas, cada tarjeta se estiraba hasta 270 px y la imagen
   dominaba el panel entero. */
.omnia-search__grid {
	justify-content: start;
}

.omnia-search[data-layout="grid"] .omnia-search__item {
	max-width: 260px;
}

/* --- 3. Reinicio del campo de texto ---
   Los temas suelen aplicar borde, sombra y fondo a input[type="search"] con
   más especificidad que la nuestra, y el campo aparecía como una caja gris
   dentro del panel. Estos selectores empatan en especificidad y ganan por
   orden. */
.omnia-search .omnia-search__input,
.omnia-search input.omnia-search__input[type="search"],
.omnia-search input.omnia-search__input[type="text"] {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: 1.05rem;
	height: auto;
	line-height: 1.4;
	margin: 0;
	max-width: none;
	min-height: 0;
	outline: 0;
	padding: 6px 0;
	width: 100%;
}

.omnia-search .omnia-search__input:focus {
	border: 0;
	box-shadow: none;
	outline: 0;
}

/* --- 4. Botones de la barra ---
   "Limpiar" flotaba como texto suelto junto al campo y la X de cerrar no
   estaba alineada con el resto de la fila. */
.omnia-search .omnia-search__clear {
	background: rgba(0, 0, 0, .05);
	border-radius: 999px;
	flex: 0 0 auto;
	font-size: .78rem;
	line-height: 1;
	opacity: 1;
	padding: 6px 12px;
}

.omnia-search .omnia-search__clear:hover {
	background: rgba(0, 0, 0, .1);
	text-decoration: none;
}

.omnia-search .omnia-search__close {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 1.4rem;
	height: 34px;
	justify-content: center;
	line-height: 1;
	opacity: .55;
	padding: 0;
	width: 34px;
}

.omnia-search .omnia-search__close:hover {
	background: rgba(0, 0, 0, .06);
	opacity: 1;
}

.omnia-search__inputwrap {
	gap: 8px;
	padding: 12px 14px;
}

/* --- 5. Espaciado del área de resultados ---
   Sobraba aire por debajo del último elemento: con un solo resultado, el panel
   tenía casi tanto hueco vacío como contenido. */
.omnia-search__main {
	padding: 0;
}

.omnia-search__grid {
	padding: 12px 14px;
}

.omnia-search__results:not(.has-aside) .omnia-search__main:empty {
	display: none;
}

/* --- 6. Tarjeta con poco contenido ---
   Un producto sin precio ni valoración dejaba la tarjeta con una sola línea
   bajo una imagen enorme, muy desequilibrada. */
.omnia-search[data-layout="grid"] .omnia-search__meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 9px 11px 11px;
}

.omnia-search[data-layout="grid"] .omnia-search__title {
	font-size: .92rem;
	font-weight: 600;
}

/* Sin imagen indexada, el hueco gris ocupaba lo mismo que una foto real. */
.omnia-search[data-layout="grid"] .omnia-search__thumb.is-empty {
	background: repeating-linear-gradient(
		45deg,
		rgba(0, 0, 0, .03),
		rgba(0, 0, 0, .03) 8px,
		rgba(0, 0, 0, .055) 8px,
		rgba(0, 0, 0, .055) 16px
	);
}

@media (max-width: 780px) {

	/* En móvil manda el ancho de la pantalla, no el número de resultados. */
	.omnia-search[data-layout="grid"][data-count] .omnia-search__panel {
		max-width: none;
	}

	.omnia-search[data-layout="grid"][data-count="1"] .omnia-search__grid,
	.omnia-search[data-layout="grid"][data-count="2"] .omnia-search__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.omnia-search[data-layout="grid"] .omnia-search__item {
		max-width: none;
	}
}

/* --- Datos clave bajo el título ---
   "6 plazas · 45 min". Los aporta una integración (OmniaBook y similares) y
   son lo que impide que un contenido sin precio deje la tarjeta con una sola
   línea bajo una imagen grande. */
.omnia-search__facts {
	font-size: .78rem;
	line-height: 1.35;
	opacity: .62;
}

/* --- ¿Quisiste decir…? ---
   Se distingue de los resultados: es una acción, no un producto. */
.omnia-search__didyoumean {
	background: rgba(0, 0, 0, .035);
	border: 0;
	border-radius: calc(var(--omnia-radius, 12px) * .6);
	color: inherit;
	cursor: pointer;
	display: block;
	font: inherit;
	font-size: .9rem;
	margin: 10px 14px;
	padding: 11px 14px;
	text-align: left;
	width: calc(100% - 28px);
}

.omnia-search__didyoumean:hover {
	background: rgba(0, 0, 0, .07);
}

.omnia-search__didyoumean strong {
	font-weight: 700;
}

/* =====================================================================
   ESTADO INICIAL · búsquedas populares y productos recomendados
   ================================================================== */

/* Los términos de la columna lateral van como filas, no como etiquetas
   redondas: en vertical, una lista se recorre de un vistazo y las etiquetas
   obligan a saltar de línea en línea.

   El sangrado horizontal se compensa con un margen negativo del mismo valor:
   así el TEXTO queda a ras de la cabecera del bloque, y el fondo del hover
   sigue teniendo aire alrededor. Poniendo solo el relleno, la lista aparecía
   desplazada 8 px respecto a «Búsquedas populares». */
.omnia-search__term {
	background: none;
	border: 0;
	border-radius: 6px;
	color: inherit;
	cursor: pointer;
	display: block;
	font: inherit;
	font-size: .92rem;
	margin-left: -8px;
	margin-right: -8px;
	padding: 7px 8px;
	text-align: left;
	width: calc(100% + 16px);
}

.omnia-search__term:hover,
.omnia-search__term:focus-visible {
	background: rgba(0, 0, 0, .05);
	outline: none;
}

/* Carrusel de recomendados: se desplaza en horizontal en lugar de envolver,
   igual que en las tiendas grandes. Así caben seis sin estirar el panel.

   El sangrado lateral es el MISMO que el de la cabecera del bloque (18px). Con
   14px, las tarjetas quedaban 4px a la izquierda de «Productos recomendados». */
.omnia-search__reco {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding: 10px 18px 16px;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.omnia-search__reco .omnia-search__item {
	flex: 0 0 168px;
	flex-direction: column;
	gap: 0;
	max-width: 168px;
	overflow: hidden;
	padding: 0;
	scroll-snap-align: start;
}

.omnia-search__reco .omnia-search__media {
	aspect-ratio: 1 / 1;
	display: block;
	position: relative;
	width: 100%;
}

.omnia-search__reco .omnia-search__thumb {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.omnia-search__reco .omnia-search__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 9px 11px 12px;
}

.omnia-search__reco .omnia-search__title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-size: .84rem;
	line-height: 1.32;
	overflow: hidden;
}

.omnia-search__reco .omnia-search__price {
	font-size: .86rem;
}

/* El estado inicial siempre ocupa el panel ancho: el atributo data-count
   estrecha el panel según los RESULTADOS, y aquí todavía no hay ninguno. */
.omnia-search:not([data-count]) .omnia-search__panel {
	max-width: 880px;
}

.omnia-search__results.has-aside .omnia-search__aside .omnia-search__group + .omnia-search__group {
	margin-top: 18px;
}

@media (max-width: 780px) {

	/* En móvil la lista de populares va arriba y los productos debajo: una
	   columna lateral de 200 px deja el carrusel en nada. */
	.omnia-search__reco .omnia-search__item {
		flex: 0 0 136px;
		max-width: 136px;
	}
}

/* =====================================================================
   PANEL A ANCHO COMPLETO  ·  data-panel="full"
   Barra pegada al borde superior, de lado a lado, en vez de una ventana
   flotante centrada. Con dos columnas y un carrusel de productos, la ventana
   estrecha se queda corta: o encoge las fotos o parte el carrusel.
   ================================================================== */

/* El panel se pega arriba pero NO se estira hasta el fondo: su alto lo marca
   el contenido. Con «stretch» ocupaba la ventana entera y, con dos filas de
   contenido, quedaba media pantalla en blanco por debajo. */
.omnia-search[data-panel="full"] .omnia-search__overlay {
	align-items: flex-start;
	padding: 0;
}

.omnia-search[data-panel="full"] .omnia-search__panel {
	border-radius: 0;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
	max-width: none;
	width: 100%;
	/* El alto máximo y el desplazamiento NO se declaran aquí a propósito: los
	   pone la regla de la animación de apertura. Fijándolos en este selector,
	   que tiene más especificidad, el panel nunca llegaba a colapsar a cero y
	   el despliegue no se veía. */
}

/* Barra superior más alta y con la línea inferior del propio campo, como en
   las tiendas grandes: el buscador se lee como parte de la cabecera. */
.omnia-search[data-panel="full"] .omnia-search__inputwrap {
	border-bottom: 1px solid rgba(0, 0, 0, .1);
	padding: 14px 28px;
}

/* Ancho real con sangrado, sin centrar en una caja de 1280. Centrado, en una
   pantalla panorámica las búsquedas populares quedaban descolgadas en mitad
   del panel con un hueco enorme a su izquierda. */
.omnia-search[data-panel="full"] .omnia-search__results,
.omnia-search[data-panel="full"] .omnia-search__recentbar {
	margin: 0;
	max-width: none;
	padding-left: 20px;
	padding-right: 20px;
	width: 100%;
}

/* Títulos de sección: en el panel ancho hay sitio para que se lean como
   títulos de verdad y no como etiquetas diminutas en versales. */
.omnia-search[data-panel="full"] .omnia-search__group-head {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0;
	opacity: .95;
	padding-bottom: 12px;
	padding-top: 16px;
	text-transform: none;
}

/* Ancho suficiente para que «Búsquedas populares» quepa en una línea. Con
   200px el título se partía en dos y la columna parecía rota. */
.omnia-search[data-panel="full"] .omnia-search__results.has-aside .omnia-search__layout {
	grid-template-columns: minmax(210px, 260px) 1fr;
}

/* --- Logo --- */
.omnia-search__logo {
	align-items: center;
	display: inline-flex;
	flex: 0 0 auto;
	margin-right: 14px;
	max-width: 150px;
}

.omnia-search__logo img {
	display: block;
	height: auto;
	max-height: 36px;
	max-width: 100%;
	width: auto;
}

/* --- Barra de últimas búsquedas --- */
.omnia-search__recentbar {
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, .07);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 18px;
}

.omnia-search__recentbar[hidden] {
	display: none;
}

.omnia-search__recentbar-label {
	font-size: .8rem;
	margin-right: 2px;
	opacity: .6;
}

/* Cada búsqueda es una pareja: el término y su aspa. Van pegados dentro de la
   misma píldora para que se lea como una unidad y no como dos botones. */
.omnia-search__recent-chip {
	align-items: center;
	background: rgba(0, 0, 0, .05);
	border-radius: 999px;
	display: inline-flex;
	overflow: hidden;
}

.omnia-search__recent-chip:hover {
	background: rgba(0, 0, 0, .09);
}

.omnia-search__recent-chip .omnia-search__chip {
	background: none;
	border-radius: 0;
	margin: 0;
	padding: 6px 4px 6px 13px;
}

.omnia-search__recent-x {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font-size: 1.05rem;
	line-height: 1;
	opacity: .45;
	padding: 5px 11px 7px 4px;
}

.omnia-search__recent-x:hover,
.omnia-search__recent-x:focus-visible {
	opacity: 1;
	outline: none;
}

.omnia-search__recent-clear {
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: .78rem;
	opacity: .6;
	padding: 6px 8px;
	text-decoration: underline;
}

.omnia-search__recent-clear:hover {
	opacity: 1;
}

@media (max-width: 780px) {

	.omnia-search[data-panel="full"] .omnia-search__inputwrap {
		padding: 12px 14px;
	}

	.omnia-search__logo {
		max-width: 96px;
	}

	.omnia-search__logo img {
		max-height: 28px;
	}

	/* En móvil el lateral vuelve arriba: 150 px de columna dejarían el
	   carrusel de productos en nada. */
	.omnia-search[data-panel="full"] .omnia-search__results.has-aside .omnia-search__layout {
		display: block;
	}
}

/* =====================================================================
   ANIMACIÓN DE APERTURA · el panel se despliega desde arriba
   ================================================================== */

/*
 * Se anima el ALTO MÁXIMO, no un desplazamiento.
 *
 * Con translateY el panel entraba entero deslizándose, y en un panel a ancho
 * completo eso se lee como una capa que cae encima de la página. Animando el
 * alto, el panel crece hacia abajo desde el borde superior y va descubriendo
 * su contenido: se lee como algo que se despliega desde la cabecera, que es
 * como se comportan los buscadores de las tiendas grandes.
 *
 * La curva es la misma familia de las suyas (salida suave): arranca rápido y
 * frena al final, que es lo que hace que parezca que el panel "se posa" en
 * lugar de detenerse en seco.
 */
.omnia-search__panel {
	max-height: 0;
	overflow: hidden;
	transform: none;
	transition:
		max-height .34s cubic-bezier(.25, .46, .45, .94),
		opacity .18s ease;
}

.omnia-search__overlay.is-open .omnia-search__panel {
	max-height: 100vh;
	overflow-y: auto;
	transform: none;
}

/* El mismo gesto en el panel que cuelga de la lupa en modo «inline». */
.omnia-search__inline-panel {
	max-height: 0;
	overflow: hidden;
	transform: none;
	transition:
		max-height .3s cubic-bezier(.25, .46, .45, .94),
		opacity .16s ease;
}

.omnia-search__inline-panel.is-open {
	max-height: 80vh;
	overflow-y: auto;
	transform: none;
}

/*
 * Quien pide menos movimiento no quiere que nada crezca ni se deslice: el
 * panel simplemente aparece. Se conserva el fundido, que no produce sensación
 * de desplazamiento y evita el corte brusco.
 */
@media (prefers-reduced-motion: reduce) {

	.omnia-search__panel,
	.omnia-search__inline-panel {
		transition: opacity .15s ease;
	}

	.omnia-search__panel {
		max-height: 100vh;
	}

	.omnia-search__inline-panel {
		max-height: 80vh;
	}

	.omnia-search__overlay:not(.is-open) .omnia-search__panel,
	.omnia-search__inline-panel:not(.is-open) {
		max-height: 0;
	}
}

/* =====================================================================
   REJILLA EN PANTALLAS GRANDES  ·  data-panel="full"
   ================================================================== */

/*
 * El número de columnas deja de ser fijo y pasa a calcularse por el ancho
 * disponible.
 *
 * Con un número fijo, en una pantalla de 1920 px cada columna mide 400 px
 * mientras la tarjeta está topada a 260: quedaban 140 px de aire entre
 * productos y la rejilla se veía desperdigada. Con auto-fill, las columnas se
 * ajustan al tamaño de la tarjeta y el hueco es siempre el mismo, tenga el
 * visitante un portátil o un monitor panorámico.
 *
 * El ajuste de columnas del panel sigue mandando en la ventana centrada, donde
 * el ancho es conocido y un número fijo sí tiene sentido.
 */
.omnia-search[data-panel="full"] .omnia-search__grid,
.omnia-search[data-panel="full"] .omnia-search__skeleton.is-grid {
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

/* Sin tope de ancho: aquí la columna ya viene medida, y limitar la tarjeta
   dentro de ella es justo lo que producía la separación. */
.omnia-search[data-panel="full"][data-layout="grid"] .omnia-search__item {
	max-width: none;
}

/*
 * El panel ancho no se encoge por tener pocos resultados. La regla de
 * data-count tiene más especificidad y ganaba: con un solo resultado, una
 * barra de lado a lado se convertía de golpe en una ventana de 420 px.
 */
.omnia-search[data-panel="full"][data-count] .omnia-search__panel,
.omnia-search[data-panel="full"][data-layout="grid"][data-count="1"] .omnia-search__panel,
.omnia-search[data-panel="full"][data-layout="grid"][data-count="2"] .omnia-search__panel,
.omnia-search[data-panel="full"][data-layout="grid"][data-count="3"] .omnia-search__panel {
	max-width: none;
}

/* Con uno o dos resultados tampoco se estira la tarjeta a media pantalla:
   mantienen su tamaño y se alinean a la izquierda. */
.omnia-search[data-panel="full"][data-count="1"] .omnia-search__grid,
.omnia-search[data-panel="full"][data-count="2"] .omnia-search__grid {
	grid-template-columns: repeat(auto-fill, minmax(210px, 260px));
	justify-content: start;
}

/* En pantallas muy anchas la tarjeta puede crecer un poco: 210 px de mínimo
   sobre 2.500 px daría once columnas y las fotos se quedarían en sellos. */
@media (min-width: 1800px) {

	.omnia-search[data-panel="full"] .omnia-search__grid,
	.omnia-search[data-panel="full"] .omnia-search__skeleton.is-grid {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}