/**
 * Ingresso predictive search.
 *
 * Accent is the theme's cyan (#2ea2cc / #2e8cb0) rather than the site red, with
 * the header notice mint (#c7f0e8) as the row highlight.
 */

.igs {
	--igs-accent: #2ea2cc;
	--igs-accent-dark: #2e8cb0;
	--igs-mint: #eef9f7;
	--igs-field: #f6f7fa;
	--igs-line: #e3e6ee;
	--igs-muted: #8a90a2;

	position: relative;
	width: 100%;
}

.igs-form {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	border: 1px solid var( --igs-line );
	border-radius: 999px;
	background: var( --igs-field );
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.igs-form:hover {
	border-color: #d3d8e4;
}

/* Focus lives on the wrapper so the pill lights up as one object. */
.igs-form:focus-within {
	border-color: var( --igs-accent );
	background: #fff;
	box-shadow: 0 0 0 3px rgba( 46, 162, 204, 0.15 );
}

.igs-input {
	width: 100%;
	height: 44px;
	min-width: 0;
	flex: 1;
	margin: 0;
	padding: 0 6px 0 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #191919;
	font-size: 15px;
	line-height: 44px;
	-webkit-appearance: none;
	appearance: none;
}

.igs-input:focus {
	border: 0;
	outline: none;
	box-shadow: none;
}

.igs-input::placeholder {
	color: var( --igs-muted );
	opacity: 1;
}

.igs-input::-webkit-search-cancel-button,
.igs-input::-webkit-search-decoration {
	display: none;
	-webkit-appearance: none;
}

/* The magnifier is the submit control, so the visual matches a real button. */
.igs-submit {
	display: flex;
	width: 46px;
	height: 44px;
	flex: 0 0 46px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 999px 0 0 999px;
	background: none;
	box-shadow: none;
	color: var( --igs-muted );
	cursor: pointer;
	transition: color 0.15s ease;
}

.igs-submit:hover,
.igs-form:focus-within .igs-submit {
	background: none;
	color: var( --igs-accent );
}

.igs-clear {
	display: none;
	width: 38px;
	height: 44px;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var( --igs-muted );
	cursor: pointer;
}

.igs-clear:hover {
	color: #191919;
}

.igs-has-value .igs-clear {
	display: flex;
}

/* While loading, the clear slot becomes the spinner. */
.igs-loading .igs-clear svg {
	display: none;
}

.igs-loading .igs-clear::after {
	width: 14px;
	height: 14px;
	border: 2px solid var( --igs-line );
	border-top-color: var( --igs-accent );
	border-radius: 50%;
	content: "";
	animation: igs-spin 0.6s linear infinite;
}

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

/* ---------------------------------------------------------------------------
   Header integration
   --------------------------------------------------------------------------- */

/* The theme paints its own magnifier onto .h_search via a background image.
   Ours lives inside the pill, so the old one has to go. Selector is deliberately
   one step more specific than the theme's so it wins regardless of load order. */
body .h_search:before {
	display: none;
	content: none;
}

/* .h_search is an inline-block with no width of its own — it used to be sized by
   the WooCommerce form it wrapped, so the header has to declare a width.

   It goes on .h_search, not on .igs. A max-width on .igs cannot work: its
   containing block is the shrink-to-fit .h_search, whose width is derived from
   that same child, so the percentage resolves straight back to the fixed width
   and the box overflows on narrow screens.

   431px is measured, not guessed: it is the width at which .h_basket's right
   edge lands on the container's inner right edge (1285px), which is how the
   header sat before the search box was replaced. Changing it moves the phone
   block and the cart. */
.h_search {
	width: 431px;
	max-width: 100%;
}

.h_search .igs {
	width: 100%;
}

/* Below 992px the theme gives every header child 20px side margins, which a
   plain 100% max-width would push past the container edge. */
@media ( max-width: 992px ) {
	.h_search {
		max-width: calc( 100% - 40px );
	}
}

.igs-back {
	display: none;
	width: 38px;
	height: 44px;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #191919;
	cursor: pointer;
}

.igs-panel {
	position: absolute;
	z-index: 9999;
	top: calc( 100% + 8px );
	right: 0;
	left: 0;
	display: none;
	max-height: 70vh;
	overflow-y: auto;
	border: 1px solid var( --igs-line );
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 12px 32px rgba( 24, 32, 56, 0.14 );
	text-align: left;
}

.igs-open .igs-panel {
	display: block;
}

.igs-group {
	padding: 10px 14px 6px;
	border-top: 1px solid #ededed;
	color: #898989;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.igs-group:first-child {
	border-top: 0;
}

.igs-row {
	display: flex;
	align-items: center;
	padding: 8px 14px;
	color: #191919;
	text-decoration: none;
	gap: 12px;
}

.igs-row:hover,
.igs-row.is-active {
	background: var( --igs-mint );
	color: #191919;
	text-decoration: none;
}

.igs-thumb {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border: 1px solid #ededed;
	border-radius: 6px;
	background: #fdfdfd;
}

.igs-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.igs-body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 2px;
}

.igs-title {
	overflow: hidden;
	font-size: 14px;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.igs-title mark {
	background: none;
	color: var( --igs-accent-dark );
	font-weight: 700;
}

.igs-meta {
	color: #898989;
	font-size: 12px;
}

.igs-price {
	color: #191919;
	font-weight: 700;
}

/* Out of stock: a real badge plus a faded thumbnail, so the row reads as
   unavailable at a glance instead of hiding it in grey small print. */
.igs-stock {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #f1f2f6;
	color: #8a90a2;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.01em;
	vertical-align: 1px;
	white-space: nowrap;
}

.igs-row.is-oos .igs-thumb,
.igs-results-list a.is-oos .igs-results-thumb {
	opacity: 0.45;
	filter: grayscale( 1 );
}

.igs-row.is-oos .igs-title,
.igs-results-list a.is-oos .igs-results-name {
	color: #6f7484;
}

.igs-row.is-oos .igs-price,
.igs-results-list a.is-oos .igs-price {
	color: #8a90a2;
	font-weight: 600;
}

.igs-all {
	justify-content: center;
	border-top: 1px solid #ededed;
	background: #fbfcfe;
	color: var( --igs-accent-dark );
	font-size: 13px;
	font-weight: 700;
}

.igs-empty {
	padding: 18px 14px;
	color: #898989;
	font-size: 14px;
	text-align: center;
}

/* Mobile: the panel takes over the viewport so results are not squeezed into a
   44px-tall dropdown under the fold.

   The overlay is only collapsed by the back button, Escape or picking a result
   — never by the query getting short again, which would undo the expansion on
   the first keystroke. And because the overlay is full-screen there is no
   "outside" left to tap, so .igs-back is the way out. */
@media ( max-width: 767px ) {
	body.igs-mobile-open {
		overflow: hidden;
	}

	body.igs-mobile-open .igs {
		position: fixed;
		z-index: 10000;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		width: auto;
		max-width: none;
		align-content: flex-start;
		flex-wrap: wrap;
		padding: 10px 12px;
		background: #fff;
		gap: 8px;
	}

	body.igs-mobile-open .igs-back {
		display: flex;
	}

	body.igs-mobile-open .igs-form {
		flex: 1;
		min-width: 0;
	}

	body.igs-mobile-open .igs-panel {
		position: static;
		max-height: calc( 100vh - 74px );
		flex-basis: 100%;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	/* .h_search still owns the width in the header; the overlay must escape it. */
	body.igs-mobile-open .h_search {
		position: static;
		width: auto;
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
   Full results page — /search/?q=
   --------------------------------------------------------------------------- */

.igs-results {
	padding: 30px 0 60px;
}

.igs-results-title {
	margin: 0 0 20px;
	font-size: 26px;
}

.igs-results-empty {
	color: #7c7c7c;
	font-size: 15px;
}

.igs-results-nav {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 28px;
	border-bottom: 1px solid #e7e7e7;
	gap: 20px;
}

.igs-results-nav a {
	padding-bottom: 10px;
	border-bottom: 2px solid transparent;
	color: #191919;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
}

.igs-results-nav a:hover {
	border-bottom-color: #2ea2cc;
	color: #2e8cb0;
}

.igs-results-nav span {
	color: #898989;
	font-weight: 400;
}

.igs-results-group {
	margin-bottom: 40px;
}

.igs-results-group h2 {
	margin: 0 0 16px;
	font-size: 20px;
}

.igs-results-list {
	display: grid;
	margin: 0;
	padding: 0;
	gap: 16px;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	list-style: none;
}

.igs-results-list li {
	margin: 0;
}

.igs-results-list a {
	display: flex;
	height: 100%;
	align-items: center;
	padding: 12px;
	border: 1px solid #e3e6ee;
	border-radius: 10px;
	color: #191919;
	gap: 12px;
}

.igs-results-list a:hover {
	border-color: #2ea2cc;
	color: #191919;
}

.igs-results-thumb {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	overflow: hidden;
	background: #fdfdfd;
}

.igs-results-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.igs-results-body {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 4px;
}

.igs-results-name {
	font-size: 14px;
	line-height: 1.35;
}

.igs-results-meta {
	color: #898989;
	font-size: 13px;
}

.igs-results-list--category a {
	justify-content: space-between;
}