/*
 * Goodmums Instant Product Search — frontend styles
 * Brand reference: Goodmums Brand Skill v2.1.0
 *
 * Design direction:
 * - Full-width, white search surface
 * - Sage-tint border
 * - Moss search icon
 * - Mulish UI typography
 * - 12px input radius / 18px result-panel radius
 * - Calm, accessible, mobile-first states
 */

/* Help an Elementor Shortcode widget occupy the full available header width. */
.elementor-widget-shortcode:has(.gm-search),
.elementor-widget-shortcode:has(.gm-search) > .elementor-widget-container {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
}

.elementor-widget-shortcode:has(.gm-search) {
	flex: 1 1 100% !important;
}

/* =========================================================
   ELEMENTOR SEARCH — CLIPPING SUPPORT
   Cross-component z-index is managed in goodmums-z-index.css.
   These rules only preserve the positioning/overflow required
   for the click-open results panel inside Elementor headers.
   ========================================================= */

.elementor-widget-shortcode:has(.gm-search),
.elementor-widget-html:has(.gm-search) {
	overflow: visible !important;
}

.elementor-widget-shortcode:has(.gm-search) > .elementor-widget-container,
.elementor-widget-html:has(.gm-search) > .elementor-widget-container {
	position: relative !important;
	overflow: visible !important;
}

.gm-search {
	position: relative !important;
}

.gm-search__panel {
	position: absolute !important;
}

.elementor-sticky--active:has(.gm-search) {
	overflow: visible !important;
}

.gm-search {
	--gm-text: #4A5748;
	--gm-text-secondary: #5D6A5B;
	--gm-moss: #5C6B5A;
	--gm-sage: #A8C3A0;
	--gm-sage-deep: #8AAA80;
	--gm-sage-tint: #DCE8D8;
	--gm-cream: #F7E8D4;
	--gm-ivory: #FDF8F0;
	--gm-blush-tint: #FAE4E2;
	--gm-white: #FFFFFF;

	position: relative !important;

	width: 100% !important;
	max-width: none !important;
	min-width: 0;

	margin: 0;

	font-family: "Mulish", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--gm-text);
}

.gm-search *,
.gm-search *::before,
.gm-search *::after {
	box-sizing: border-box;
}

.gm-search__form {
	position: relative;
	width: 100%;
	max-width: none;
	margin: 0;
}

/* Screen-reader label/status remain persistent without affecting layout. */
.gm-search__label,
.gm-search__sr-status {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* =========================================================
   SEARCH FIELD
   ========================================================= */

.gm-search__field {
	display: flex;
	align-items: center;

	width: 100%;
	max-width: none;
	min-width: 0;
	min-height: 50px;

	padding: 3px 3px 3px 15px;

	background: var(--gm-white);
	border: 1px solid var(--gm-sage-tint);
	border-radius: 12px;

	transition:
		border-color 140ms ease,
		box-shadow 140ms ease;
}

.gm-search__field:hover {
	border-color: var(--gm-sage);
}

.gm-search__field:focus-within {
	border-color: var(--gm-sage-deep);
	box-shadow: 0 0 0 3px rgba(92, 107, 90, 0.16);
}

.gm-search__input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 44px;

	margin: 0 !important;
	padding: 0 10px 0 0 !important;

	appearance: none;
	-webkit-appearance: none;

	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;

	font: 400 16px/1.45 "Mulish", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	color: var(--gm-text) !important;
	caret-color: var(--gm-moss);
}

.gm-search__input::placeholder {
	color: var(--gm-text-secondary);
	opacity: 1;
}

.gm-search__input::-webkit-search-decoration,
.gm-search__input::-webkit-search-cancel-button,
.gm-search__input::-webkit-search-results-button,
.gm-search__input::-webkit-search-results-decoration {
	-webkit-appearance: none;
}

.gm-search__clear,
.gm-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;

	cursor: pointer;
}

.gm-search__clear {
	border-radius: 999px !important;
	color: var(--gm-text-secondary) !important;
}

.gm-search__clear[hidden] {
	display: none !important;
}

.gm-search__clear:hover {
	background: var(--gm-sage-tint) !important;
	color: var(--gm-moss) !important;
}

/* Search action is always the far-right control. */
.gm-search__submit {
	margin-left: auto !important;
	border-radius: 9px !important;
	color: var(--gm-moss) !important;
}

.gm-search__submit:hover,
.gm-search__submit:active {
	background: var(--gm-sage-tint) !important;
	color: var(--gm-moss) !important;
}

.gm-search__clear svg,
.gm-search__submit svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* =========================================================
   ACCESSIBLE FOCUS
   ========================================================= */

.gm-search__clear:focus-visible,
.gm-search__submit:focus-visible,
.gm-search__chip:focus-visible,
.gm-search__term:focus-visible,
.gm-search__match:focus-visible,
.gm-search__product:focus-visible,
.gm-search__all-results:focus-visible {
	outline: 2px solid var(--gm-moss) !important;
	outline-offset: 2px !important;
}

/* =========================================================
   RESULT PANEL
   Exact same width as the search bar.
   ========================================================= */

.gm-search__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;

	width: 100%;
	max-width: none;
	min-width: 0;

	max-height: min(72vh, 620px);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;

	padding: 8px;

	background: var(--gm-white);
	border: 1px solid var(--gm-sage-tint);
	border-radius: 18px;
	box-shadow: 0 14px 34px rgba(74, 87, 72, 0.11);


	scrollbar-width: thin;
	scrollbar-color: var(--gm-sage) transparent;
}

.gm-search__panel[hidden] {
	display: none !important;
}

.gm-search__section {
	padding: 12px;
}

.gm-search__section + .gm-search__section {
	border-top: 1px solid var(--gm-sage-tint);
}

.gm-search__section-title {
	margin: 0 0 10px !important;
	padding: 0 !important;

	font: 600 14px/1.4 "Mulish", system-ui, sans-serif !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--gm-moss) !important;
}

/* =========================================================
   INITIAL CATEGORY CHIPS
   ========================================================= */

.gm-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gm-search__chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 13px;

	background: var(--gm-sage-tint);
	border: 1px solid transparent;
	border-radius: 999px;

	font: 600 14px/1.2 "Mulish", system-ui, sans-serif;
	color: #2F3B2E !important;
	text-decoration: none !important;
}

.gm-search__chip:hover {
	background: var(--gm-white);
	border-color: var(--gm-sage);
	color: var(--gm-text) !important;
}

/* =========================================================
   OPTIONAL COMMON TERMS
   ========================================================= */

.gm-search__term-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 10px;
}

.gm-search__term {
	display: flex;
	align-items: center;
	gap: 8px;

	min-height: 44px;
	margin: 0 !important;
	padding: 8px 10px !important;

	background: transparent !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: none !important;

	font: 500 14px/1.35 "Mulish", system-ui, sans-serif !important;
	color: var(--gm-text) !important;
	text-align: left;
	cursor: pointer;
}

.gm-search__term span {
	color: var(--gm-sage-deep);
}

.gm-search__term:hover {
	background: var(--gm-ivory) !important;
}

/* =========================================================
   CATEGORY / ATTRIBUTE / BRAND MATCHES
   ========================================================= */

.gm-search__matches {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.gm-search__match {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;

	width: 100%;
	min-width: 0;
	min-height: 58px;

	margin: 0 !important;
	padding: 9px 11px !important;

	background: var(--gm-ivory) !important;
	border: 1px solid var(--gm-cream) !important;
	border-radius: 12px !important;
	box-shadow: none !important;

	text-align: left;
	text-decoration: none !important;
	cursor: pointer;
}

.gm-search__match:hover {
	background: var(--gm-white) !important;
	border-color: var(--gm-sage) !important;
}

.gm-search__match-type {
	grid-column: 1;
	grid-row: 1;

	font: 600 12px/1.3 "Mulish", system-ui, sans-serif;
	color: var(--gm-text-secondary);
}

.gm-search__match-name {
	grid-column: 1;
	grid-row: 2;

	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	font: 600 14px/1.35 "Mulish", system-ui, sans-serif;
	color: var(--gm-text);
}

.gm-search__match-arrow {
	grid-column: 2;
	grid-row: 1 / span 2;
	font-size: 17px;
	color: var(--gm-moss);
}

/* =========================================================
   PRODUCT ROWS
   Only image + category + product + price.
   ========================================================= */

.gm-search__products {
	display: grid;
	gap: 4px;
}

.gm-search__product {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	align-items: center;
	gap: 12px;

	width: 100%;
	min-width: 0;
	min-height: 78px;

	padding: 8px;

	background: transparent;
	border: 1px solid transparent;
	border-radius: 12px;

	color: var(--gm-text) !important;
	text-decoration: none !important;

	transition:
		background-color 140ms ease,
		border-color 140ms ease;
}

.gm-search__product:hover {
	background: var(--gm-ivory);
	border-color: var(--gm-cream);
}

.gm-search__product-image-wrap {
	display: block;
	width: 60px;
	height: 60px;
	overflow: hidden;

	background: var(--gm-ivory);
	border-radius: 12px;
}

.gm-search__product-image {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	object-fit: cover;
}

.gm-search__product-copy {
	display: block;
	min-width: 0;
}

.gm-search__product-category {
	display: block;
	margin-bottom: 2px;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	font: 600 12px/1.35 "Mulish", system-ui, sans-serif;
	color: var(--gm-text-secondary);
}

.gm-search__product-name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;

	font: 600 14px/1.35 "Mulish", system-ui, sans-serif;
	color: var(--gm-text);
}

.gm-search__price {
	display: block;
	margin-top: 5px;

	font: 700 14px/1.3 "Mulish", system-ui, sans-serif;
	color: var(--gm-text);
}

.gm-search__price del {
	margin-right: 5px;
	font-weight: 400;
	color: var(--gm-text-secondary);
	opacity: 1;
}

.gm-search__price ins {
	background: transparent;
	text-decoration: none;
}

/* =========================================================
   HINT / EMPTY STATE
   ========================================================= */

.gm-search__hint,
.gm-search__empty {
	margin: 4px;
	padding: 14px 16px;

	background: var(--gm-ivory);
	border-radius: 12px;

	font: 400 14px/1.55 "Mulish", system-ui, sans-serif;
	color: var(--gm-text-secondary);
}

.gm-search__empty {
	display: grid;
	gap: 3px;
}

.gm-search__empty strong {
	font-weight: 600;
	color: var(--gm-text);
}

/* =========================================================
   SEE ALL RESULTS
   ========================================================= */

.gm-search__all-results {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	min-height: 48px;
	margin: 4px 12px 12px;
	padding: 10px 14px;

	background: var(--gm-sage-tint);
	border: 1px solid transparent;
	border-radius: 12px;

	font: 600 14px/1.35 "Mulish", system-ui, sans-serif;
	color: #2F3B2E !important;
	text-decoration: none !important;
}

.gm-search__all-results:hover {
	background: var(--gm-white);
	border-color: var(--gm-sage);
	color: var(--gm-text) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {
	.gm-search__field {
		min-height: 46px;
		padding: 3px 3px 3px 14px;
	}

	.gm-search__input {
		height: 40px;
		font-size: 14px !important;
	}

	.gm-search__clear,
	.gm-search__submit {
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
	}

	.gm-search__clear svg,
	.gm-search__submit svg {
		width: 18px;
		height: 18px;
	}
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
	.gm-search__field {
		min-height: 42px;
		padding: 2px 2px 2px 12px;
	}

	.gm-search__input {
		height: 36px;
		padding-right: 8px !important;
		font-size: 12px !important;
		line-height: 1.4 !important;
	}

	.gm-search__input::placeholder {
		font-size: 12px;
	}

	.gm-search__clear,
	.gm-search__submit {
		width: 36px;
		height: 36px;
		min-width: 36px;
		min-height: 36px;
	}

	.gm-search__clear svg,
	.gm-search__submit svg {
		width: 18px;
		height: 18px;
	}

	.gm-search__panel {
		top: calc(100% + 7px);
		left: 0;
		right: 0;
		width: 100%;
		max-height: min(74vh, 570px);
		padding: 6px;
		border-radius: 16px;
	}

	.gm-search__section {
		padding: 10px;
	}

	.gm-search__term-list,
	.gm-search__matches {
		grid-template-columns: 1fr;
	}

	.gm-search__product {
		grid-template-columns: 54px minmax(0, 1fr);
		gap: 10px;
		min-height: 74px;
		padding: 7px;
	}

	.gm-search__product-image-wrap {
		width: 54px;
		height: 54px;
	}
}

@media (max-width: 420px) {
	.gm-search__field {
		padding-left: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gm-search *,
	.gm-search *::before,
	.gm-search *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}