/* ToGrow Smart Search: buscador con sugerencias. Diseño propio; se adapta al tema.
   Variables: --tgss-primary (bordes y resaltado) y --tgss-button (botones), editables en Ajustes. */
.tgss-search { --tgss-primary: currentColor; --tgss-button: #1d2327; position: relative; width: 100%; max-width: 100%; box-sizing: border-box; }
.tgss-search *, .tgss-search *::before, .tgss-search *::after { box-sizing: border-box; }
.tgss-search__field { display: flex; gap: .5rem; width: 100%; align-items: center; }
.tgss-search .tgss-search__input { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; height: auto; margin: 0; padding: .6rem .8rem; font: inherit; line-height: normal; border: 1px solid var(--tgss-primary); border-radius: 4px; }
.tgss-search .tgss-search__input:focus { outline: 2px solid var(--tgss-primary); outline-offset: 1px; }

/* Reinicio de TODOS los botones del plugin: los temas suelen dar estilo global a `button`
   (fondo, relleno, ancho, radio…). Con la clase del plugin delante (0,2,0) ganan a esos estilos
   sin !important; cada componente lo redefine después (mismo nivel, más abajo en el archivo). */
.tgss-search .tgss-search__submit, .tgss-search .tgss-search__close, .tgss-search .tgss-search__toggle, .tgss-search .tgss-search__action {
	box-sizing: border-box; -webkit-appearance: none; appearance: none; float: none;
	width: auto; min-width: 0; max-width: none; height: auto; min-height: 0; max-height: none; margin: 0; padding: 0;
	font: inherit; font-size: 1rem; line-height: 1.2; letter-spacing: normal; text-transform: none; text-shadow: none; text-decoration: none;
	color: inherit; background: none; border: 0; border-radius: 0; box-shadow: none; filter: none; transform: none; transition: none; opacity: 1;
}
.tgss-search .tgss-search__submit:focus-visible, .tgss-search .tgss-search__close:focus-visible, .tgss-search .tgss-search__toggle:focus-visible, .tgss-search .tgss-search__action:focus-visible { outline: 2px solid var(--tgss-primary); outline-offset: 2px; }

/* Buscar: usa el «Color del botón» de Ajustes. */
.tgss-search .tgss-search__submit { flex: 0 0 auto; padding: .6rem 1rem; cursor: pointer; color: #fff; background: var(--tgss-button); border: 1px solid var(--tgss-button); border-radius: 4px; }
/* Cerrar (solo en pantalla completa de celular): ícono simple, color del texto, 44 x 44 px. */
.tgss-search .tgss-search__close { display: none; flex: 0 0 auto; width: 44px; height: 44px; font-size: 28px; line-height: 1; text-align: center; cursor: pointer; color: inherit; background: transparent; }

/* Lista de sugerencias: a la izquierda las opciones, a la derecha el panel de detalle (escritorio). */
.tgss-search__list { position: absolute; z-index: 9999; left: 0; right: 0; top: 100%; display: flex; margin-top: .25rem; max-height: 75vh; background: #fff; color: #1d2327; border: 1px solid rgba(0, 0, 0, .2); border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); text-align: left; overflow: hidden; }
.tgss-search__list[hidden] { display: none; }
.tgss-search__main { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.tgss-search__detail { flex: 0 0 320px; max-width: 45%; padding: 1rem; overflow-y: auto; border-left: 1px solid rgba(0, 0, 0, .1); background: rgba(0, 0, 0, .02); }
.tgss-search__detail[hidden] { display: none; }
.tgss-search__big { display: block; width: 100%; max-height: 260px; object-fit: contain; margin-bottom: .75rem; border-radius: 4px; background: #fff; }
.tgss-search__detail-name { margin: 0 0 .35rem; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
.tgss-search__detail-price { display: block; margin-bottom: .5rem; font-size: 1.05rem; font-weight: 600; }
.tgss-search__desc { margin: 0 0 .85rem; font-size: .9em; line-height: 1.45; opacity: .85; }
.tgss-search .tgss-search__action { display: block; width: 100%; padding: .65rem 1rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; color: #fff; background: var(--tgss-button); border: 1px solid var(--tgss-button); border-radius: 4px; }
.tgss-search .tgss-search__action:hover, .tgss-search .tgss-search__action:focus { filter: brightness(1.12); }
.tgss-search .tgss-search__action[disabled] { opacity: .7; cursor: default; }
.tgss-search .tgss-search__action--whatsapp { background: #128c4a; border-color: #128c4a; }

.tgss-search__group { margin: 0; padding: .5rem .75rem .25rem; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .7; }
.tgss-search__option { display: flex; align-items: center; gap: .75rem; padding: .5rem .75rem; color: inherit; text-decoration: none; cursor: pointer; }
.tgss-search__option:hover, .tgss-search__option[aria-selected="true"] { background: rgba(0, 0, 0, .06); box-shadow: inset 3px 0 0 var(--tgss-primary); }
.tgss-search__photo { flex: 0 0 auto; width: 48px; height: 48px; object-fit: cover; border-radius: 3px; background: rgba(0, 0, 0, .05); }
.tgss-search__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tgss-search__name { overflow-wrap: anywhere; }
.tgss-search__sku { margin: 0; font-size: .8em; opacity: .65; }
.tgss-search__price { font-size: .9em; opacity: .85; }
.tgss-search__price del { opacity: .6; margin-right: .35rem; }
.tgss-search__corrected { padding: .5rem .75rem; font-size: .9em; opacity: .85; }
.tgss-search__empty, .tgss-search__loading { padding: .75rem; }
.tgss-search__all { display: block; padding: .6rem .75rem; font-weight: 600; text-align: center; color: inherit; border-top: 1px solid rgba(0, 0, 0, .1); }

/* Solo ícono: una lupa que despliega el buscador. */
.tgss-search--icon { width: auto; display: inline-block; }
.tgss-search .tgss-search__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer; color: inherit; background: transparent; border: 0; }
.tgss-search--icon .tgss-search__field { display: none; position: absolute; z-index: 10000; left: 0; top: 100%; width: min(92vw, 420px); padding: .5rem; background: #fff; color: #1d2327; border: 1px solid rgba(0, 0, 0, .2); border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.tgss-search--icon.tgss-search--open .tgss-search__field { display: flex; }
.tgss-search--icon .tgss-search__list { top: calc(100% + 3.5rem); left: 0; right: auto; width: min(92vw, 720px); }
/* La lupa está en la mitad derecha de la página: el campo y la lista se alinean a su borde derecho. */
.tgss-search--icon.tgss-search--right .tgss-search__field { left: auto; right: 0; }
.tgss-search--icon.tgss-search--right .tgss-search__list { left: auto; right: 0; }

/* Celular (hasta 767 px): sin panel de detalle; al tocar el campo, pantalla completa con botón de cerrar. */
@media (max-width: 767px) {
	.tgss-search__detail { display: none; }
	.tgss-search .tgss-search__submit { padding: .6rem .75rem; }
	.tgss-search__list { max-height: 60vh; }
	/* Pantalla completa: capa oscura semitransparente que deja ver la página; arriba la barra blanca y
	   debajo una tarjeta blanca de alto igual a su contenido (con scroll si no cabe). Nunca fondo blanco total. */
	.tgss-search--full { position: fixed; z-index: 100000; inset: 0; display: flex; flex-direction: column; width: 100%; max-width: none; padding: 0; background: rgba(0, 0, 0, .6); color: #1d2327; }
	.tgss-search--full .tgss-search__field { flex: 0 0 auto; padding: .5rem; background: #fff; }
	/* Barra superior: caja de texto (flex 1, mínimo 60 %), lupa de 44 x 44 px y X de 44 x 44 px a la derecha. */
	.tgss-search--full .tgss-search__field { flex-wrap: nowrap; gap: .25rem; }
	.tgss-search.tgss-search--full .tgss-search__input { flex: 1 1 0; min-width: 60%; }
	.tgss-search.tgss-search--full .tgss-search__submit {
		flex: 0 0 44px; width: 44px; height: 44px; padding: 0; overflow: hidden; font-size: 0; color: transparent;
		background: var(--tgss-button) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
	}
	.tgss-search.tgss-search--full .tgss-search__close { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; }
	.tgss-search--full .tgss-search__list { position: static; flex: 0 1 auto; width: auto; max-height: none; min-height: 0; margin: .5rem; background: #fff; border: 0; border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
	.tgss-search--full .tgss-search__main { max-height: none; }
	.tgss-search--icon.tgss-search--full { display: flex; }
	.tgss-search--icon.tgss-search--full .tgss-search__toggle { display: none; }
	.tgss-search--icon.tgss-search--full .tgss-search__field { display: flex; position: static; width: 100%; padding: .5rem; border: 0; border-radius: 0; box-shadow: none; }
}
html.tgss-lock, html.tgss-lock body { overflow: hidden; }