/**
 * Live search field and results panel.
 *
 * Loaded only where the [nm_search] shortcode renders.
 */

.nm-search {
	position: relative;
	width: 100%;
	max-width: 26rem;
	/* The Elementor Shortcode widget wraps this in a div that collapses to the
	   text's width, which is why the field was barely clickable. */
	display: block;
}

/*
 * The Shortcode widget's inner wrappers collapse to the text's width, which is
 * what made the field barely clickable.
 *
 * The widget wrapper itself takes only the width, never `display`. It also
 * carries .nm-header__search, so a `display: block` here — (0,2,0), from a
 * sheet that loads after components.css — beat the responsive rule that hides
 * the header search below 1400px, and the field stayed on screen squeezed to
 * 189px at every phone width.
 */
.elementor-widget-shortcode:has(.nm-search) {
	width: 100%;
}

.nm-header__search .elementor-widget-container,
.nm-header__search .elementor-shortcode {
	display: block;
	width: 100%;
}

.nm-search__form {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.nm-search input.nm-search__input {
	display: block;
	width: 100%;
	/* A real click target: 44px minimum, the accessible tap size. */
	min-height: 44px;
	margin: 0;
	padding: 0.6rem 2.7rem 0.6rem 2.75rem;
	border: 1px solid var(--hbc-hairline);
	border-radius: var(--hbc-radius-pill);
	background: var(--hbc-tint);
	font-family: inherit;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--hbc-color-text, #4a4a55);
	box-shadow: none;
	transition: border-color var(--hbc-transition), box-shadow var(--hbc-transition), background var(--hbc-transition);
	-webkit-appearance: none;
	appearance: none;
}

.nm-search input.nm-search__input:hover { background: #fff; border-color: color-mix(in srgb, var(--hbc-color-primary, #d6117a) 30%, transparent); }

.nm-search input.nm-search__input::-webkit-search-cancel-button { display: none; }

.nm-search input.nm-search__input:focus {
	outline: none;
	background: #fff;
	border-color: var(--hbc-color-primary, #d6117a);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hbc-color-primary, #d6117a) 16%, transparent);
}

.nm-search input.nm-search__input::placeholder {
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 55%, #fff);
}

.nm-search__icon {
	position: absolute;
	left: 0.95rem;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	color: var(--hbc-color-primary, #d6117a);
	pointer-events: none;
}

.nm-search__clear,
.nm-search__spinner { top: 50%; transform: translateY(-50%); }

.nm-search__clear[hidden],
.nm-search__spinner[hidden],
.nm-search__panel[hidden] {
	display: none !important;
}

.nm-search__clear {
	position: absolute;
	right: 0.7rem;
	width: 1.5rem;
	height: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 10%, transparent);
	color: var(--hbc-color-text, #4a4a55);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--hbc-transition);
}

.nm-search__clear:hover { background: color-mix(in srgb, var(--hbc-color-primary, #d6117a) 18%, transparent); }

.nm-search__spinner {
	position: absolute;
	right: 2.5rem;
	width: 1rem;
	height: 1rem;
	border: 2px solid color-mix(in srgb, var(--hbc-color-primary, #d6117a) 25%, transparent);
	border-top-color: var(--hbc-color-primary, #d6117a);
	border-radius: 50%;
	animation: nm-spin 620ms linear infinite;
}

@keyframes nm-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ panel */
.nm-search__panel {
	position: absolute;
	z-index: 999;
	inset-inline: 0;
	top: calc(100% + 0.5rem);
	max-height: min(70vh, 30rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #fff;
	border: 1px solid var(--hbc-hairline);
	border-radius: var(--hbc-radius-md);
	box-shadow: var(--hbc-shadow-lg);
	padding: 0.45rem;
	animation: nm-search-in 180ms var(--hbc-ease);
}

@keyframes nm-search-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

.nm-search__group + .nm-search__group {
	margin-top: 0.35rem;
	padding-top: 0.35rem;
	border-top: 1px solid var(--hbc-hairline);
}

.nm-search__label {
	margin: 0.35rem 0.6rem 0.4rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 60%, #fff);
}

.nm-search__item,
.nm-search__cat {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.5rem 0.6rem;
	border-radius: var(--hbc-radius-sm);
	text-decoration: none;
	color: var(--hbc-color-text, #4a4a55);
	transition: background var(--hbc-transition);
}

.nm-search__item:hover,
.nm-search__cat:hover,
.nm-search__item.is-active,
.nm-search__cat.is-active {
	background: var(--hbc-tint);
}

.nm-search__cat { justify-content: space-between; font-size: 0.9rem; }

.nm-search__count {
	font-size: 0.72rem;
	padding: 0.1rem 0.5rem;
	border-radius: var(--hbc-radius-pill);
	background: var(--hbc-tint-strong);
	color: var(--hbc-color-primary, #d6117a);
	font-weight: 600;
}

.nm-search__thumb {
	width: 3.25rem;
	height: 3.25rem;
	flex: 0 0 auto;
	object-fit: cover;
	border-radius: var(--hbc-radius-sm);
	background: var(--hbc-tint);
}

.nm-search__meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.nm-search__title {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.nm-search__price {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--hbc-color-primary, #d6117a);
}

.nm-search__price del { opacity: 0.5; font-weight: 400; }
.nm-search__price ins { text-decoration: none; }

.nm-search__oos {
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 500;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 65%, #fff);
}

.nm-search__empty {
	margin: 0;
	padding: 1.1rem 0.75rem;
	text-align: center;
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--hbc-color-text, #4a4a55) 75%, #fff);
}

.nm-search__more {
	display: block;
	margin-top: 0.35rem;
	padding: 0.7rem;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--hbc-radius-sm);
	background: var(--hbc-color-primary, #d6117a);
	color: #fff;
	transition: background var(--hbc-transition);
}

.nm-search__more:hover { background: var(--hbc-color-accent, #a80d5e); color: #fff; }

/* Header variant: collapses to an icon-width field on small screens. */
@media (max-width: 1024px) {
	.nm-search { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
 * In-header variant: the panel must escape the header's stacking context and
 * stay above the sticky bar.
 * ------------------------------------------------------------------------- */
.nm-header__tools .nm-search__panel { z-index: 1000; }

/* On small screens the panel spans the viewport rather than a narrow column. */
@media (max-width: 640px) {
	.nm-search__panel {
		position: fixed;
		inset-inline: 0.75rem;
		top: auto;
		margin-top: 0.5rem;
	}
}