/**
 * Buscador Typesense.
 *
 * Solo estructura y estados. Color, tipografia, espaciado, radio y sombra se
 * consumen por variable del Color Manager y el Variables Manager de Bricks:
 * no hay un solo valor hex aqui, y lo que el panel de Bricks puede controlar
 * no se declara en esta hoja.
 *
 * Sin bordes de un solo lado. Las separaciones se resuelven con fondo y
 * espacio, y los contornos con box-shadow de cuatro lados.
 */

/* El markup del plugin no depende del reset del tema. Sin esto, un relleno se
   suma al ancho del 100 % y el elemento desborda a su contenedor. Ya paso dos
   veces: con el dialogo y con la tarjeta de dentro. */
.wist-ts,
.wist-ts *,
.wist-ts-popup,
.wist-ts-popup *,
.wist-ts-nav,
.wist-ts-nav * {
	box-sizing: border-box;
}

.wist-ts {
	position: relative;
	display: block;
}

/* Con el panel abierto el buscador tiene que ganarle a lo que lo rodea. Sin
   z-index en la raiz, el z-index del panel solo compite dentro del contexto de
   apilado del padre, y en un header con elementos posicionados los resultados
   quedan por debajo. */
.wist-ts[data-wist-ts-open] {
	z-index: 100;
}

.wist-ts__field {
	display: flex;
	align-items: center;
	gap: var(--wist-space-100);
	width: 100%;
}

/* El envoltorio hereda el estilo de campo de Theme Styles. Lo unico que se
   neutraliza es el espacio inferior del formulario, que aqui sobra. El
   selector lleva tres clases a proposito: la regla que lo pone viene de
   `.brxe-form .form-group` y hay que ganarle por especificidad, no por orden
   de carga, que no esta garantizado. */
.wist-ts__field .form-group.wist-ts__group {
	flex: 1;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.wist-ts__input {
	width: 100%;
	/* Safari pinta los input de tipo search con apariencia nativa y descarta
	   el radio y el relleno que se le den. */
	-webkit-appearance: none;
	appearance: none;
}

/* Panel de resultados
   ------------------------------------------------------------------------ */

.wist-ts__panel {
	position: absolute;
	z-index: 100;
	inset-inline: 0;
	top: calc(100% + var(--wist-space-100));
	max-height: min(70vh, 32rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--wist-space-100);
	border-radius: var(--wist-radius-md);
	background: var(--wist-surface);
	box-shadow: var(--wist-shadow-2), inset 0 0 0 1px var(--wist-border-decorative);
}

.wist-ts__panel[hidden] {
	display: none;
}

.wist-ts__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wist-ts__row {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Fila de resultado
   ------------------------------------------------------------------------ */

.wist-ts__item {
	display: flex;
	align-items: center;
	gap: var(--wist-space-200);
	padding: var(--wist-space-150);
	border-radius: var(--wist-radius-xs);
	color: var(--wist-ink-primary);
	text-decoration: none;
}

.wist-ts__item:hover,
.wist-ts__item.is-active {
	background: var(--wist-canvas);
}

.wist-ts__item:focus-visible {
	outline: 2px solid var(--wist-blue-base);
	outline-offset: 3px;
}

.wist-ts__image {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	object-fit: contain;
	border-radius: var(--wist-radius-xs);
	/* El sitio puede no definir la cama de imagen: cae al lienzo. */
	background: var(--wist-image-bed, var(--wist-canvas));
}

.wist-ts__body {
	display: flex;
	flex-direction: column;
	gap: var(--wist-space-050);
	min-width: 0;
}

.wist-ts__title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--wist-ink-primary);
}

.wist-ts__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wist-space-150);
	color: var(--wist-ink-secondary);
	font-variant-numeric: tabular-nums;
}

.wist-ts__price {
	color: var(--wist-ink-primary);
	font-variant-numeric: tabular-nums;
}

/* El estado de agotado usa el color de stock de la paleta y no el semantico
   Warning, que no llega a AA sobre su propio fondo. */
.wist-ts__stock {
	color: var(--wist-stock-low-text, var(--wist-warning-text));
}

/* Estado inicial: recientes, etiquetas y mas vendidos
   ------------------------------------------------------------------------ */

.wist-ts__section {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wist-space-150);
	margin: 0;
	padding: var(--wist-space-150) var(--wist-space-150) var(--wist-space-050);
	color: var(--wist-ink-secondary);
	font-size: 0.8125em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wist-ts__section:first-child {
	padding-top: var(--wist-space-050);
}

.wist-ts__section-action {
	padding: 0;
	border: 0;
	background: none;
	color: var(--wist-ink-secondary);
	font: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.wist-ts__section-action:hover {
	color: var(--wist-ink-primary);
}

.wist-ts__item--query .wist-ts__title {
	color: var(--wist-ink-secondary);
}

.wist-ts__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wist-space-100);
	padding: var(--wist-space-150);
}

.wist-ts__chips[hidden] {
	display: none;
}

.wist-ts__chips-title {
	flex: 1 0 100%;
	margin: 0 0 var(--wist-space-050);
	color: var(--wist-ink-secondary);
	font-size: 0.8125em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wist-ts__chip {
	display: inline-flex;
	align-items: baseline;
	gap: var(--wist-space-050);
	padding: var(--wist-space-050) var(--wist-space-150);
	border: 0;
	border-radius: var(--wist-radius-xs);
	background: var(--wist-canvas);
	color: var(--wist-ink-primary);
	font: inherit;
	font-size: 0.875em;
	cursor: pointer;
}

.wist-ts__chip:hover {
	box-shadow: inset 0 0 0 1px var(--wist-border-interactive);
}

.wist-ts__chip:focus-visible {
	outline: 2px solid var(--wist-blue-base);
	outline-offset: 3px;
}

.wist-ts__chip-count {
	color: var(--wist-ink-secondary);
	font-size: 0.8125em;
	font-variant-numeric: tabular-nums;
}

.wist-ts__tags {
	color: var(--wist-ink-secondary);
}

/* Estados
   ------------------------------------------------------------------------ */

.wist-ts__state {
	margin: 0;
	padding: var(--wist-space-300) var(--wist-space-200);
	color: var(--wist-ink-secondary);
	text-align: center;
}

.wist-ts__state[hidden] {
	display: none;
}

.wist-ts__hint {
	display: block;
	margin-top: var(--wist-space-050);
}

.wist-ts__hint:empty {
	display: none;
}

.wist-ts[data-wist-ts-state="loading"] .wist-ts__list {
	opacity: 0.5;
}

.wist-ts__all {
	display: block;
	margin-top: var(--wist-space-100);
	padding: var(--wist-space-150);
	border-radius: var(--wist-radius-xs);
	background: var(--wist-canvas);
	color: var(--wist-ink-primary);
	text-align: center;
	text-decoration: none;
}

.wist-ts__all:hover {
	box-shadow: inset 0 0 0 1px var(--wist-border-interactive);
}

.wist-ts__all[hidden] {
	display: none;
}

/* Anuncio para lectores de pantalla
   ------------------------------------------------------------------------ */

.wist-ts__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Overlay
   ------------------------------------------------------------------------ */

.wist-ts-locked {
	overflow: hidden;
}

/* La raiz del elemento es el disparador visible, y su aspecto lo deciden los
   controles nativos de Bricks: espaciado, borde, fondo, sombra, tipografia,
   tamano y estados, por dispositivo. Aqui no se declara nada de eso. Lo unico
   que fija esta hoja es la estructura y un minimo de comportamiento. */
.wist-ts-popup {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	cursor: pointer;
}

/* El boton de dentro rellena la raiz y no lleva estilo propio: aporta la
   semantica, el foco y el teclado. Cualquier valor heredado de los estilos de
   boton del tema se neutraliza para que lo que se ve sea la raiz. */
.wist-ts-popup__trigger {
	display: flex;
	align-items: center;
	flex: 1;
	gap: var(--wist-space-100);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: inherit;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: start;
	text-transform: inherit;
	cursor: inherit;
}

.wist-ts-popup__trigger:focus-visible {
	outline: 2px solid var(--wist-blue-base);
	outline-offset: 3px;
}

/* El icono toma su tamano del font-size del envoltorio, que es lo que
   escribe el control del panel, y su color del color del envoltorio. Vale
   para un icono de fuente y para un SVG del set del sitio por igual. */
.wist-ts-popup__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 1;
}

.wist-ts-popup__icon svg {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.wist-ts-popup__label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wist-ts-popup__hint {
	flex: 0 0 auto;
	padding: var(--wist-space-050) var(--wist-space-100);
	border-radius: var(--wist-radius-xs);
	background: var(--wist-canvas);
	color: var(--wist-ink-secondary);
	font-family: inherit;
	font-size: 0.75em;
	line-height: 1.4;
	white-space: nowrap;
}

/* Es un <dialog>. Hay que deshacer sus valores por defecto del navegador
   (ancho y alto acotados, margen automatico, borde y fondo) para que ocupe la
   ventana entera y sirva de contenedor de posicion. */
.wist-ts-popup__overlay {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--wist-space-400) var(--wist-space-200);
	border: 0;
	background: transparent;
	overflow-y: auto;
	overscroll-behavior: contain;

	/* El velo se declara aqui y no en ::backdrop para que la variable se
	   herede: el pseudoelemento hereda del elemento que lo origina. El sitio
	   no define un color de velo, asi que se deriva de la tinta principal en
	   lugar de inventar un valor nuevo. Con el desenfoque detras, el velo pesa
	   menos que antes. */
	--wist-ts-scrim: color-mix(in srgb, var(--wist-ink-primary) 42%, transparent);
	--wist-ts-blur: var(--wist-blur-overlay, 8px);
	--wist-ts-saturate: var(--wist-saturate-glass, 180%);
}

.wist-ts-popup__overlay[open] {
	display: flex;
	justify-content: center;
}

.wist-ts-popup__overlay::backdrop {
	background: rgba(0, 0, 0, 0.45);
	background: var(--wist-ts-scrim, rgba(0, 0, 0, 0.45));
	-webkit-backdrop-filter: blur(var(--wist-ts-blur)) saturate(var(--wist-ts-saturate));
	backdrop-filter: blur(var(--wist-ts-blur)) saturate(var(--wist-ts-saturate));
}

/* Arriba, pero no pegado al borde: el dialogo cae mas o menos donde lo pone
   Algolia, a un octavo de la altura de la ventana. */
.wist-ts-popup__overlay[data-position="top"] {
	align-items: flex-start;
	padding-block-start: min(13vh, 8rem);
}

.wist-ts-popup__overlay[data-position="center"] {
	align-items: center;
}

.wist-ts-popup__dialog {
	width: 100%;
	/* El contenedor md del sitio son 720 px, demasiado para una lista de
	   resultados. El ancho es un control del panel, y esto es solo el punto
	   de partida. */
	max-width: 34rem;
	padding: var(--wist-space-200);
	border-radius: var(--wist-radius-lg);
	background: var(--wist-surface);
	box-shadow: var(--wist-shadow-4, var(--wist-shadow-2));
}

/* Dentro del dialogo el panel fluye, no flota: ya esta dentro de una capa
   propia y posicionarlo en absoluto lo sacaria del alto del dialogo. */
.wist-ts-popup__dialog .wist-ts__panel {
	position: static;
	margin-top: var(--wist-space-200);
	padding: 0;
	box-shadow: none;
	background: transparent;
	max-height: min(60vh, 28rem);
}

/* Estirado y no centrado: asi el boton de cerrar toma el alto del campo, que
   lo decide el estilo de formulario del sitio y no esta hoja. Con un alto fijo
   quedaba mas bajo que el campo en cuanto cambiaba el relleno del campo. */
.wist-ts-popup__head {
	display: flex;
	align-items: stretch;
	gap: var(--wist-space-150);
}

.wist-ts-popup__head .wist-ts__field {
	flex: 1;
}

.wist-ts-popup__close {
	/* El centrado del aspa va por flex y no por el centrado de texto del
	   navegador, y el relleno se pone a cero: cualquier relleno heredado de
	   los estilos de boton del tema la desplazaba dentro de su caja. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	aspect-ratio: 1;
	min-width: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--wist-radius-lg);
	background: var(--wist-canvas);
	color: var(--wist-ink-primary);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.wist-ts-popup__close:focus-visible {
	outline: 2px solid var(--wist-blue-base);
	outline-offset: 3px;
}

/* Compacto de header
   ------------------------------------------------------------------------ */

.wist-ts-nav {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--wist-space-100);
}

.wist-ts-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wist-space-100);
	border: 0;
	border-radius: var(--wist-radius-xs);
	background: transparent;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.wist-ts-nav__toggle:focus-visible {
	outline: 2px solid var(--wist-blue-base);
	outline-offset: 3px;
}

/* El plegado va por max-width y no por width. El control "ancho al expandir"
   del panel de Bricks escribe width con la especificidad del id del elemento,
   asi que ganaria siempre y el campo quedaria abierto de forma permanente.
   max-width lo recorta igual y deja ese control gobernando el ancho abierto. */
.wist-ts-nav__field {
	width: 18rem;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: max-width 0.2s ease, opacity 0.2s ease;
}

.wist-ts-nav.is-open .wist-ts-nav__field {
	max-width: 60vw;
	overflow: visible;
	opacity: 1;
	visibility: visible;
}

.wist-ts-nav .wist-ts__panel {
	inset-inline: auto 0;
	min-width: 20rem;
}

/* En estrecho, el titulo cortado en una linea deja fuera casi toda la
   informacion util. Dos lineas caben de sobra y el corte pasa a ser la
   excepcion. El corte es el breakpoint mobile_landscape del sitio. */
@media (max-width: 767px) {
	.wist-ts__title {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		white-space: normal;
	}

	.wist-ts__item {
		align-items: flex-start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wist-ts * {
		transition: none !important;
	}
}