/*
 * SG Instant Search — front-end widget (System F theme)
 * Dropdown for the System F header search drawer input (#systemf-search).
 *
 * Ported from the dev-spike and re-tokenised to System F: Manrope UI, ink
 * #1A1714, accent-pink #E8356B used sparingly (price + active/hover + focus +
 * highlight). White is used only as the results-card well (per the brand rule).
 * Hover/active is a faint accent-pink wash on cream that keeps ink at full
 * contrast — no opacity on coloured text, solid muted token throughout.
 */

.sg-search-panel {
	--sg-ink: #1A1714;         /* System F ink — never #000 */
	--sg-mute: #6B625A;        /* System F ink-soft — solid, >=AA on white */
	--sg-card: #FBF8F1;        /* warm off-white well — tinted toward cream (brand: no pure #fff surface) */
	--sg-rule: rgb(26 23 20 / 0.16);  /* System F hairline border idiom */
	--sg-hairline: rgb(26 23 20 / 0.08);
	--sg-accent: #E8356B;      /* System F accent-pink */
	--sg-accent-deep: #D42659; /* System F accent-pink-hover (pressed/focused footer) */
	--sg-hover-bg: #F6E4E8;    /* faint accent-pink wash — keeps text contrast well above AA */
	--sg-well: #FAF6EC;        /* System F polaroid — warm cream-soft well (See all footer) */

	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 9999;

	min-width: 360px;
	max-width: 100%;
	max-height: 420px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	background: var(--sg-card);
	border: 1px solid var(--sg-rule);
	border-radius: 10px;
	/* Match the nav mega-panel shadow so the two header dropdowns read as siblings. */
	box-shadow: 0 1px 1px rgba(26, 23, 20, 0.08), 0 18px 28px -18px rgba(26, 23, 20, 0.34);

	font-family: Manrope, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--sg-ink);
	text-align: left;
}

.sg-search-panel[hidden] {
	display: none;
}

/* Drop the browser's native search "×" — the inset magnifier submit button owns
   the right edge of the field; the two collide otherwise. */
#systemf-search::-webkit-search-cancel-button,
#systemf-search::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* Subtle loading cue — a thin accent-pink progress sliver at the top edge. */
.sg-search-panel.is-loading::before {
	content: "";
	position: sticky;
	top: 0;
	left: 0;
	display: block;
	height: 2px;
	background: var(--sg-accent);
	animation: sg-search-load 1s ease-in-out infinite;
}

@keyframes sg-search-load {
	0%   { opacity: 0.35; }
	50%  { opacity: 1; }
	100% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.sg-search-panel.is-loading::before {
		animation: none;
		opacity: 1;
	}
}

/* --- rows --------------------------------------------------------------- */

.sg-search-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	text-decoration: none;
	color: var(--sg-ink);
	border-bottom: 1px solid var(--sg-hairline);
	cursor: pointer;
}

.sg-search-row:last-child {
	border-bottom: 0;
}

/* Non-navigable row (permalink failed http/https validation) — still
   selectable/keyboard-focusable for ARIA parity, but not a link affordance. */
.sg-search-row--inert {
	cursor: default;
}

.sg-search-row.is-active,
.sg-search-row:hover {
	background: var(--sg-hover-bg);
}

/* Visible keyboard focus — never rely on browser defaults inside the panel. */
.sg-search-row:focus-visible {
	outline: 2px solid var(--sg-accent);
	outline-offset: -2px;
}

.sg-search-thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 4px;
	background-color: #EDE6D8;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border: 1px solid var(--sg-hairline);
}

.sg-search-thumb--empty {
	background-color: #EDE6D8;
}

.sg-search-text {
	flex: 1 1 auto;
	min-width: 0; /* allow ellipsis */
}

.sg-search-cat {
	display: block;
	font-size: 11px;
	line-height: 1.2;
	color: var(--sg-mute);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sg-search-title {
	display: block;
	font-size: 14px;
	line-height: 1.3;
	color: var(--sg-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Meilisearch highlight — accent-pink bold, no background tint. */
.sg-search-title em {
	font-style: normal;
	font-weight: 700;
	color: var(--sg-accent);
}

.sg-search-meta {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
}

.sg-search-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--sg-accent);
	white-space: nowrap;
}

.sg-search-oos {
	font-size: 10px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sg-mute);
	border: 1px solid var(--sg-rule);
	border-radius: 3px;
	padding: 1px 5px;
}

/* --- defensive layout protection --------------------------------------- */
/* Belt-and-braces against theme/WooCommerce image rules. DESIGN.md notes that
   WooCommerce ships `.woocommerce img { height:auto }` (0,1,1) which beats
   single-class utilities on shop/PDP/cart pages — our thumbnails are styled via
   class so they're unaffected, but force the box model here so a future theme
   width on header <span>s can't blow the thumbnail up or collapse the text. */
.sg-search-panel .sg-search-row { box-sizing: border-box; }
.sg-search-panel .sg-search-thumb { width: 44px; height: 44px; flex: 0 0 44px; }
.sg-search-panel .sg-search-text { min-width: 0; }

/* --- "See all" footer row ---------------------------------------------- */
/* A persistent last row that opens the native WP search-results page for the
   current query. Sticky to the bottom of the scrollable panel so it stays
   visible even when the product rows scroll. Visually distinct from product
   rows: heavier top rule, warm cream-soft well, centred accent-pink label. */

.sg-search-see-all {
	position: sticky;
	bottom: 0;
	z-index: 1;
	justify-content: center;
	gap: 6px;
	padding: 11px 14px;
	border-top: 2px solid var(--sg-rule);
	border-bottom: 0;
	background: var(--sg-well);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--sg-accent);
}

.sg-search-see-all-text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.sg-search-see-all-chev {
	font-size: 16px;
	line-height: 1;
	font-weight: 400;
	color: var(--sg-accent);
}

/* Active/hover uses the same faint accent-pink wash as product rows, deepening
   the accent so the footer still reads as the focused option. */
.sg-search-see-all.is-active,
.sg-search-see-all:hover {
	background: var(--sg-hover-bg);
	color: var(--sg-accent-deep);
}

.sg-search-see-all.is-active .sg-search-see-all-chev,
.sg-search-see-all:hover .sg-search-see-all-chev {
	color: var(--sg-accent-deep);
}

/* --- empty state -------------------------------------------------------- */

.sg-search-empty {
	padding: 16px 14px;
	font-size: 14px;
	color: var(--sg-mute);
}

/* --- mobile ------------------------------------------------------------- */

@media (max-width: 600px) {
	.sg-search-panel {
		min-width: 0;
		max-height: 60vh;
	}

	.sg-search-thumb,
	.sg-search-panel .sg-search-thumb {
		width: 40px;
		height: 40px;
		flex: 0 0 40px;
	}
}