/* =====================================================================
   Area81 Product Search — frontend styles
   All colours/sizing come from CSS variables set inline from admin settings.
   ===================================================================== */

.a81ps-wrap {
	--a81ps-accent: #2563eb;
	--a81ps-input-bg: #fff;
	--a81ps-input-text: #111827;
	--a81ps-input-border: #d1d5db;
	--a81ps-radius: 10px;
	--a81ps-dropdown-bg: #fff;
	--a81ps-dropdown-text: #111827;
	--a81ps-highlight: #2563eb;
	--a81ps-hover-bg: #f3f4f6;
	--a81ps-max-width: 600px;
	--a81ps-grid-cols: 3;
	--a81ps-input-height: 44px;
	--a81ps-font-size: 15px;
	--a81ps-panel-width: 300px;
	--a81ps-dropdown-min-width: 420px;

	position: relative;
	width: 100%;
	max-width: var(--a81ps-max-width);
	box-sizing: border-box;
	font-size: var(--a81ps-font-size);
	line-height: 1.4;
}

.a81ps-wrap *,
.a81ps-wrap *::before,
.a81ps-wrap *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- Form */
.a81ps-form {
	position: relative;
	display: flex;
	align-items: stretch;
}

.a81ps-input {
	flex: 1 1 auto;
	width: 100%;
	height: var(--a81ps-input-height);
	padding: 0 44px 0 14px;
	border: 1px solid var(--a81ps-input-border);
	border-radius: var(--a81ps-radius);
	background: var(--a81ps-input-bg);
	color: var(--a81ps-input-text);
	font-size: var(--a81ps-font-size);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.a81ps-input:focus {
	border-color: var(--a81ps-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--a81ps-accent) 22%, transparent);
}
.a81ps-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.a81ps-submit {
	position: absolute;
	right: 4px;
	top: 4px;
	bottom: 4px;
	min-width: 40px;
	padding: 0 12px;
	border: none;
	border-radius: calc(var(--a81ps-radius) - 3px);
	background: var(--a81ps-accent);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	line-height: 1;
	transition: filter .15s ease;
}
.a81ps-submit:hover { filter: brightness(1.08); }
.a81ps-icon { display: block; }
.a81ps-icon-custom { width: 20px; height: 20px; object-fit: contain; display: block; }

.a81ps-spinner {
	position: absolute;
	right: 54px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid color-mix(in srgb, var(--a81ps-accent) 30%, transparent);
	border-top-color: var(--a81ps-accent);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.a81ps-wrap.is-loading .a81ps-spinner { opacity: 1; animation: a81ps-spin .7s linear infinite; }
@keyframes a81ps-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------ Results dropdown */
.a81ps-results {
	position: absolute;
	z-index: 99999;
	left: 0;
	top: calc(100% + 6px);
	/* The whole dropdown is bounded by the backend Max width (never below the
	   configured minimum, never past the viewport). A fixed width — NOT
	   max-content — so grid content can't balloon it. */
	width: clamp(
		var(--a81ps-dropdown-min-width),
		var(--a81ps-max-width),
		92vw
	);
	max-width: 92vw;
	max-height: 72vh;
	overflow-y: auto;
	overflow-x: hidden;
	background: var(--a81ps-dropdown-bg);
	color: var(--a81ps-dropdown-text);
	border: 1px solid var(--a81ps-input-border);
	border-radius: var(--a81ps-radius);
	box-shadow: 0 10px 40px rgba(0,0,0,.12);
	-webkit-overflow-scrolling: touch;
}
.a81ps-results[hidden] { display: none; }
.a81ps-results.align-right { left: auto; right: 0; }

/* ---------------------------------------------- Two-column shell (panel) */
.a81ps-layout-shell { display: block; }
.a81ps-layout-shell.has-panel {
	display: flex;
	align-items: stretch;
}
.a81ps-layout-shell.has-panel .a81ps-suggestions {
	/* Suggestions take whatever space the panel leaves inside the dropdown.
	   min-width:0 lets long content clip/ellipsize instead of stretching, and
	   overflow-x:hidden is a safety net so nothing bleeds under the window. */
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: hidden;
}
.a81ps-layout-shell:not(.has-panel) .a81ps-suggestions { width: 100%; }

.a81ps-panel {
	/* The panel can't be wider than half the dropdown, so suggestions always
	   keep room even when Max width is small relative to the panel width. */
	flex: 0 0 auto;
	width: min(var(--a81ps-panel-width), 50%);
	padding: 16px;
	overflow-y: auto;
}

/* Position: RIGHT (default) — panel after suggestions, divider on its left. */
.a81ps-panel-right .a81ps-panel { border-left: 1px solid var(--a81ps-input-border); }

/* Position: LEFT — panel rendered first in source; divider on its right. */
.a81ps-panel-left .a81ps-panel { border-right: 1px solid var(--a81ps-input-border); }

/* Position: BOTTOM — stack the window beneath the suggestions, full width. */
.a81ps-layout-shell.has-panel.a81ps-panel-bottom {
	display: block;
}
.a81ps-panel-bottom .a81ps-suggestions { width: 100%; }
.a81ps-panel-bottom .a81ps-panel {
	width: 100%;
	max-width: 100%;
	border-top: 1px solid var(--a81ps-input-border);
}
/* Bottom: lay the window out horizontally so it isn't a tall column. */
.a81ps-panel-bottom .a81ps-panel-inner {
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
}
.a81ps-panel-bottom .a81ps-panel-image {
	flex: 0 0 auto;
	width: var(--a81ps-panel-image-max, 140px);
	max-width: 40%;
}
.a81ps-panel-bottom .a81ps-panel-button { align-self: flex-start; }

/* Panel ON: the dropdown stays capped at Max width — the panel does NOT add
   extra width; suggestions + panel share the same Max width budget. */

/* ---------------------------------------------------- Suggestion list */
.a81ps-list {
	list-style: none;
	margin: 0;
	padding: 6px;
}
.a81ps-item { margin: 0; min-width: 0; }

.a81ps-link {
	display: flex;
	gap: 12px;
	align-items: center;
	min-width: 0;
	padding: 8px 10px;
	border-radius: calc(var(--a81ps-radius) - 4px);
	color: inherit;
	text-decoration: none;
	transition: background-color .12s ease;
}
.a81ps-link:hover,
.a81ps-item.is-active .a81ps-link {
	background: var(--a81ps-hover-bg);
}

.a81ps-thumb {
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--a81ps-hover-bg);
}
.a81ps-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a81ps-thumb-placeholder { display: block; width: 100%; height: 100%; }

.a81ps-badge {
	position: absolute;
	left: 2px;
	top: 2px;
	font-size: 9px;
	font-weight: 700;
	line-height: 1;
	padding: 3px 4px;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.a81ps-badge-sale { background: #ef4444; color: #fff; }

.a81ps-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 auto;
}
.a81ps-title {
	font-weight: 600;
	font-size: var(--a81ps-title-size, 15px);
	color: var(--a81ps-title-color, var(--a81ps-dropdown-text));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Fade variant: a soft edge fade INSTEAD of an ellipsis — but only on titles
   that genuinely overflow (JS adds .is-clipped). A short title keeps its full
   text with no fade. The fade band is narrow so it only touches the very edge. */
.a81ps-overflow-fade .a81ps-title.is-clipped {
	text-overflow: clip;
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}
/* Right-aligned lists fade on the left (leading) edge. */
.a81ps-overflow-fade.a81ps-align-right .a81ps-title.is-clipped {
	-webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent 100%);
}
/* Centre-aligned lists fade both edges, narrowly. */
.a81ps-overflow-fade.a81ps-align-center .a81ps-title.is-clipped {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.a81ps-title strong { color: var(--a81ps-highlight); font-weight: 800; }
.a81ps-cat {
	font-size: var(--a81ps-cat-size, 12px);
	color: var(--a81ps-cat-color, inherit);
	opacity: .7;
}
.a81ps-sku {
	font-size: var(--a81ps-sku-size, 11px);
	color: var(--a81ps-sku-color, inherit);
	opacity: .6;
	font-family: ui-monospace, monospace;
}

.a81ps-price {
	font-size: var(--a81ps-price-size, 14px);
	color: var(--a81ps-price-color, inherit);
	font-weight: 700;
	white-space: nowrap;
}
.a81ps-price del { opacity: .5; font-weight: 400; margin-right: 4px; }
.a81ps-price ins { text-decoration: none; }

.a81ps-stock { font-size: 11px; font-weight: 600; }
.a81ps-stock.in { color: #16a34a; }
.a81ps-stock.out { color: #dc2626; }

.a81ps-no-results {
	padding: 18px 16px;
	text-align: center;
	opacity: .65;
}

.a81ps-more {
	display: block;
	text-align: center;
	padding: 11px;
	margin: 4px 6px 6px;
	border-radius: calc(var(--a81ps-radius) - 4px);
	background: var(--a81ps-accent);
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
	transition: filter .15s ease;
}
.a81ps-more:hover { filter: brightness(1.08); }

/* ---------------------------------------------------- Taxonomy groups */
.a81ps-group-head,
.a81ps-group-head-products {
	font-size: var(--a81ps-grouphead-size, 11px);
	color: var(--a81ps-grouphead-color, inherit);
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	opacity: .55;
	padding: 10px 12px 4px;
}
.a81ps-term-list { list-style: none; margin: 0; padding: 2px 6px 6px; }
.a81ps-term { margin: 0; }
.a81ps-term a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 10px;
	border-radius: calc(var(--a81ps-radius) - 4px);
	color: inherit;
	text-decoration: none;
	transition: background-color .12s ease;
}
.a81ps-term a:hover { background: var(--a81ps-hover-bg); }
.a81ps-term-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--a81ps-term-size, 14px);
	color: var(--a81ps-term-color, inherit);
}
.a81ps-term strong { color: var(--a81ps-highlight); font-weight: 800; }
.a81ps-term-count {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	opacity: .5;
	background: var(--a81ps-hover-bg);
	border-radius: 999px;
	padding: 1px 8px;
}

/* ------------------------------------------------------- Product window */
.a81ps-panel-inner { display: flex; flex-direction: column; gap: 8px; }
.a81ps-panel-image {
	position: relative;
	width: 100%;
	max-width: var(--a81ps-panel-image-max, 100%);
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--a81ps-hover-bg);
}
.a81ps-panel-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.a81ps-panel-image .a81ps-badge { left: 8px; top: 8px; font-size: 10px; padding: 3px 6px; }
.a81ps-panel-title { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--a81ps-dropdown-text); }
.a81ps-panel-sku { font-size: 11px; opacity: .5; font-family: ui-monospace, monospace; }

.a81ps-panel-price {
	display: block !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	color: var(--a81ps-dropdown-text) !important;
	line-height: 1.3 !important;
}
.a81ps-panel-price .woocommerce-Price-amount,
.a81ps-panel-price .amount,
.a81ps-panel-price bdi,
.a81ps-panel-price ins,
.a81ps-panel-price ins .amount {
	color: var(--a81ps-dropdown-text) !important;
	font-weight: 800 !important;
	text-decoration: none !important;
	background: none !important;
}
.a81ps-panel-price del,
.a81ps-panel-price del .amount {
	opacity: .5;
	font-weight: 400 !important;
	margin-right: 6px;
}
.a81ps-panel-excerpt {
	font-size: 13px;
	line-height: 1.5;
	opacity: .75;
	/* Clamp to a few lines; no fade unless the text is actually cut off. */
	display: -webkit-box;
	-webkit-line-clamp: var(--a81ps-excerpt-lines, 4);
	line-clamp: var(--a81ps-excerpt-lines, 4);
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* Fade only the last line's worth, and only when the text overflows the clamp
   (JS adds .is-clipped). A short description shows in full with no fade. */
.a81ps-panel-excerpt.is-clipped {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.2em), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 1.2em), transparent 100%);
}
.a81ps-panel-button {
	margin-top: 6px;
	display: inline-block;
	text-align: center;
	padding: 10px 14px;
	border-radius: calc(var(--a81ps-radius) - 2px);
	background: var(--a81ps-accent);
	color: #fff !important;
	text-decoration: none;
	font-weight: 600;
	transition: filter .15s ease;
}
.a81ps-panel-button:hover { filter: brightness(1.08); }

/* ----------------------------------------------------------- Layouts */
.a81ps-layout-grid .a81ps-list {
	display: grid;
	grid-template-columns: repeat(var(--a81ps-grid-cols), minmax(0, 1fr));
	gap: 6px;
	min-width: 0;
}
/* When the product window is beside the results (left/right), the suggestions
   side is narrower, so honour the admin's column count only as a maximum and
   let the grid drop columns to keep each card at a usable minimum width
   instead of cramming or overflowing. Bottom placement keeps full width. */
.a81ps-layout-grid .a81ps-panel-left .a81ps-list,
.a81ps-layout-grid .a81ps-panel-right .a81ps-list {
	grid-template-columns: repeat(auto-fill, minmax(var(--a81ps-grid-min-card, 130px), 1fr));
}
/* Grid cells must be allowed to shrink below their content's intrinsic width,
   otherwise long titles force the grid wider than the suggestions column and
   the last column slides under the product window. */
.a81ps-layout-grid .a81ps-item { min-width: 0; }
.a81ps-layout-grid .a81ps-link {
	flex-direction: column;
	align-items: stretch;
	text-align: center;
	min-width: 0;
}
.a81ps-layout-grid .a81ps-body { min-width: 0; width: 100%; }
.a81ps-layout-grid .a81ps-thumb {
	width: 100%;
	max-width: var(--a81ps-grid-image-max, 100%);
	margin: 0 auto;
	height: auto;
	aspect-ratio: 1 / 1;
}
.a81ps-layout-grid .a81ps-title {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.a81ps-layout-classic .a81ps-thumb { display: none; }
.a81ps-layout-classic .a81ps-link { padding: 7px 12px; }
.a81ps-layout-classic .a81ps-body { flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* ---- List content alignment (list layout only) ---- */
.a81ps-layout-list.a81ps-align-center .a81ps-link { justify-content: center; }
.a81ps-layout-list.a81ps-align-center .a81ps-body { align-items: center; text-align: center; flex: 0 1 auto; }
.a81ps-layout-list.a81ps-align-right .a81ps-link { flex-direction: row-reverse; }
.a81ps-layout-list.a81ps-align-right .a81ps-body { align-items: flex-end; text-align: right; }
/* left is the natural default; declared for clarity */
.a81ps-layout-list.a81ps-align-left .a81ps-body { align-items: flex-start; text-align: left; }

/* ------------------------------------------------------------- Themes */
.a81ps-theme-dark {
	--a81ps-input-bg: #1f2937;
	--a81ps-input-text: #f3f4f6;
	--a81ps-input-border: #374151;
	--a81ps-dropdown-bg: #111827;
	--a81ps-dropdown-text: #f3f4f6;
	--a81ps-hover-bg: #1f2937;
}
.a81ps-theme-minimal .a81ps-input { border-width: 0 0 2px 0; border-radius: 0; background: transparent; }
.a81ps-theme-minimal .a81ps-results { border-radius: 6px; }

/* ====================================================================
   Icon / collapsed mode
   ==================================================================== */
.a81ps-iconbtn {
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--a81ps-input-height);
	height: var(--a81ps-input-height);
	padding: 0;
	border: 1px solid var(--a81ps-input-border);
	border-radius: var(--a81ps-radius);
	background: var(--a81ps-input-bg);
	color: var(--a81ps-input-text);
	cursor: pointer;
}
.a81ps-iconbtn:hover { border-color: var(--a81ps-accent); }
.a81ps-iconbtn .a81ps-icon { width: 20px; height: 20px; }

.a81ps-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(17, 24, 39, .45);
	display: none;
	padding: 12vh 16px 16px;
	-webkit-overflow-scrolling: touch;
	overflow-y: auto;
}
.a81ps-overlay.a81ps-open { display: block; }
.a81ps-overlay-inner {
	position: relative;
	max-width: min(680px, 96vw);
	margin: 0 auto;
}
.a81ps-overlay-inner.a81ps-wrap { width: 100%; max-width: min(680px, 96vw); }
.a81ps-overlay-close {
	position: absolute;
	top: -42px;
	right: 0;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,.9);
	color: #111827;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.a81ps-wrap.a81ps-collapsed .a81ps-form { display: none; }
.a81ps-wrap.a81ps-collapsed { max-width: none; width: auto; display: inline-block; }
.a81ps-wrap.a81ps-collapsed .a81ps-iconbtn { display: inline-flex; }

.a81ps-overlay .a81ps-form { display: flex; }
.a81ps-overlay .a81ps-iconbtn { display: none; }
.a81ps-overlay .a81ps-results {
	position: static;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	margin-top: 8px;
	max-height: 70vh;
}
.a81ps-overlay .a81ps-layout-shell.has-panel { display: block; }
.a81ps-overlay .a81ps-layout-shell.has-panel .a81ps-suggestions {
	min-width: 0;
	border-right: none;
	border-bottom: 1px solid var(--a81ps-input-border);
}
.a81ps-overlay .a81ps-panel { width: 100%; flex-basis: auto; }

/* ------------------------------------------------------------- Mobile */
@media (max-width: 782px) {
	.a81ps-layout-shell.has-panel { display: block; }
	.a81ps-layout-shell.has-panel .a81ps-suggestions {
		min-width: 0;
		border-right: none;
	}
	.a81ps-panel { display: none; }

	.a81ps-wrap .a81ps-results,
	.a81ps-wrap.a81ps-has-panel .a81ps-results {
		left: 0;
		right: 0;
		width: auto;
		min-width: 0;
		max-width: 100%;
	}

	.a81ps-link { padding: 10px 12px; }
	.a81ps-thumb { width: 52px; height: 52px; }
	.a81ps-title { font-size: 15px; }

	.a81ps-layout-grid .a81ps-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 420px) {
	.a81ps-layout-grid .a81ps-list { grid-template-columns: 1fr 1fr; }
}