/* =====================================================================
   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-hover-text: var(--a81ps-dropdown-text);
	--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;
	transition: max-width .18s ease, width .18s ease;
}

/* ---- Expand on focus ----------------------------------------------------
   In a tight header the bar can end up very narrow, hiding what the customer
   typed. When focused, the FORM is lifted out of the flow and laid over the
   page at the expanded width, while the wrap keeps exactly the size it had —
   so the menu and everything else beside the bar stay put. The JS sets the
   --a81ps-expand-* offsets so the expanded form stays inside the viewport
   (growing right when there is room, left otherwise). Enabled per-instance
   via the .a81ps-expand-on-focus class. */
.a81ps-wrap.a81ps-expand-on-focus.is-focused {
	z-index: 100000;
	min-height: var(--a81ps-input-height);
}
.a81ps-wrap.a81ps-expand-on-focus.is-focused .a81ps-form {
	position: absolute;
	top: 0;
	left: var(--a81ps-expand-left, 0px);
	z-index: 2;
	width: var(--a81ps-expand-width, min(var(--a81ps-focus-width, 480px), 92vw));
	box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
	border-radius: var(--a81ps-radius);
}
/* The dropdown follows the expanded form's edges. */
.a81ps-wrap.a81ps-expand-on-focus.is-focused .a81ps-results {
	left: var(--a81ps-expand-left, 0px);
}
.a81ps-wrap.a81ps-expand-on-focus.is-focused .a81ps-results.align-right {
	left: auto;
	right: var(--a81ps-expand-right, 0px);
}

.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); } }

/* ---- In-dropdown loading state (skeleton) ---- */
.a81ps-loading { padding: 10px; }
.a81ps-loading-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--a81ps-dropdown-text);
	opacity: .75;
	padding: 4px 6px 10px;
}
.a81ps-loading-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--a81ps-accent);
	animation: a81ps-pulse 1s ease-in-out infinite;
}
@keyframes a81ps-pulse { 0%,100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

.a81ps-skel-list { list-style: none; margin: 0; padding: 0; }
.a81ps-skel-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 6px;
}
.a81ps-skel-lines { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.a81ps-skel {
	background: rgba(0,0,0,.08);
	background: color-mix(in srgb, var(--a81ps-dropdown-text) 12%, transparent);
	border-radius: 6px;
	position: relative;
	overflow: hidden;
}
.a81ps-skel-thumb { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 8px; }
.a81ps-skel-line { height: 12px; width: 100%; }
.a81ps-skel-line.short { width: 55%; }
/* Shimmer sweep. */
.a81ps-skel::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--a81ps-dropdown-text) 10%, transparent), transparent);
	animation: a81ps-shimmer 1.2s infinite;
}
@keyframes a81ps-shimmer { to { transform: translateX(100%); } }

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.a81ps-spinner,
	.a81ps-loading-dot,
	.a81ps-skel::after { animation-duration: 0s; }
}

/* ------------------------------------------------------ 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;
	/* Column layout so the "see all results" button can sit at the bottom,
	   level with the product window's button. */
	display: flex;
	flex-direction: column;
}
/* The scrollable middle: takes the slack so the button below it stays put. */
.a81ps-layout-shell.has-panel .a81ps-suggestions .a81ps-list:last-of-type {
	flex: 1 1 auto;
}
/* Pin the see-all button to the bottom of the suggestions column. */
.a81ps-layout-shell.has-panel .a81ps-suggestions .a81ps-more {
	margin-top: auto;
}
.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%);
	/* The bottom padding matches the "see all results" button's own bottom
	   margin (6px), so the window's action button and that button end on the
	   same line. They used to sit 10px apart. */
	padding: 16px 16px 6px;
	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 */
/* Explicit baseline so a theme's centred header text can't leak into the
   dropdown; the a81ps-align-* classes below set the chosen alignment. */
.a81ps-results { text-align: left; }

.a81ps-list {
	list-style: none;
	margin: 0;
	padding: 6px;
}
.a81ps-item {
	margin: 0;
	min-width: 0;
	/* The highlight lives on the ROW, not on the link. With an add-to-cart
	   button the link no longer spans the row, so a highlight on the link
	   stopped short of the button and rows with and without a button lit up
	   to different widths. */
	border-radius: calc(var(--a81ps-radius) - 4px);
	transition: background-color .12s ease;
}
.a81ps-item:hover,
.a81ps-item.is-active {
	background: var(--a81ps-hover-bg);
}

.a81ps-link {
	display: flex;
	gap: 12px;
	align-items: center;
	min-width: 0;
	padding: 8px 10px;
	border-radius: calc(var(--a81ps-radius) - 4px);
	/* Pinned, not `inherit`: the row is an <a>, and a theme's `a` / `a:hover`
	   rule otherwise recolours anything inside that has no colour of its own
	   (the price turned the minicart's hover turquoise — beta report). */
	color: var(--a81ps-dropdown-text);
	text-decoration: none;
}
/* Hover text colour (backend "Hover text"). Empty = the dropdown text colour,
   so nothing changes on hover except the background. */
.a81ps-item:hover .a81ps-link,
.a81ps-item.is-active .a81ps-link,
.a81ps-link:hover,
.a81ps-link:focus {
	color: var(--a81ps-hover-text);
}
/* With a hover text colour set, every part of the hovered row follows it —
   including parts that have their own per-part colour. The marker class comes
   from PHP; without it the per-part colours stand. */
.a81ps-has-hover-text .a81ps-item:hover .a81ps-title,
.a81ps-has-hover-text .a81ps-item:hover .a81ps-cat,
.a81ps-has-hover-text .a81ps-item:hover .a81ps-sku,
.a81ps-has-hover-text .a81ps-item:hover .a81ps-price,
.a81ps-has-hover-text .a81ps-item.is-active .a81ps-title,
.a81ps-has-hover-text .a81ps-item.is-active .a81ps-cat,
.a81ps-has-hover-text .a81ps-item.is-active .a81ps-sku,
.a81ps-has-hover-text .a81ps-item.is-active .a81ps-price,
.a81ps-has-hover-text .a81ps-term a:hover .a81ps-term-name {
	color: var(--a81ps-hover-text);
}

/* ====================================================================
   Direct add to cart

   The button is a SIBLING of .a81ps-link (a <button> inside an <a> is
   invalid and the link swallows the click), so the row becomes the flex
   container and the link takes the remaining space. min-width:0 on the
   link is load-bearing: without it a long title stops the link shrinking
   and pushes the button out of the row.
   ==================================================================== */
/* The marker class comes from PHP rather than :has(), which is not safe to
   rely on across the hosting and browser range this plugin ships to. */
.a81ps-item.a81ps-has-cart {
	display: flex;
	align-items: center;
	gap: 4px;
}
.a81ps-item.a81ps-has-cart > .a81ps-link {
	flex: 1 1 auto;
	min-width: 0;
}
/* Right-aligned rows read right-to-left, so the button leads. */
.a81ps-layout-list.a81ps-align-right .a81ps-item.a81ps-has-cart {
	flex-direction: row-reverse;
}

/* Grid: the card is a column, so the button floats in its corner instead of
   sitting beside it — a flex row here would break the card. */
.a81ps-layout-grid .a81ps-item.a81ps-has-cart {
	display: block;
	position: relative;
}
.a81ps-layout-grid .a81ps-item.a81ps-has-cart > .a81ps-cart-btn {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	margin: 0;
	background: var(--a81ps-dropdown-bg);
}

.a81ps-cart-btn {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0 4px;
	padding: 0;
	border: 1px solid var(--a81ps-input-border);
	border-radius: calc(var(--a81ps-radius) - 4px);
	background: var(--a81ps-input-bg);
	color: var(--a81ps-dropdown-text);
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.a81ps-cart-btn:hover {
	border-color: var(--a81ps-accent);
	color: var(--a81ps-accent);
}
.a81ps-cart-btn:focus-visible {
	outline: 2px solid var(--a81ps-accent);
	outline-offset: 2px;
}
.a81ps-cart-btn svg { display: block; }

/* The checkmark sits on top of the cart and only one is ever visible, so
   the button never changes size as it swaps. */
.a81ps-cart-done {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(.6);
	transition: opacity .15s ease, transform .15s ease;
}
.a81ps-cart-icon {
	display: flex;
	transition: opacity .15s ease;
}
.a81ps-cart-btn.a81ps-adding .a81ps-cart-icon { opacity: .45; }
.a81ps-cart-btn.a81ps-added {
	border-color: var(--a81ps-accent);
	background: var(--a81ps-accent);
	color: #fff;
}
.a81ps-cart-btn.a81ps-added .a81ps-cart-icon { opacity: 0; }
.a81ps-cart-btn.a81ps-added .a81ps-cart-done { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
	.a81ps-cart-btn,
	.a81ps-cart-icon,
	.a81ps-cart-done { transition: none; }
}

/* WooCommerce's own script adds these to any .add_to_cart_button; they are
   meant for a shop loop and would drop a "View cart" link into the row. */
.a81ps-cart-btn.loading { opacity: .6; }
.a81ps-item > a.added_to_cart { display: none; }

.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;
}
/* A centred or right-aligned column sizes its children to their content, so
   a long one-line title would run past the row (under the image on one side,
   off the edge on the other) with nothing to fade. Cap every part at the row
   width so overflow is clipped where the fade/ellipsis expects it. */
.a81ps-body > * { max-width: 100%; min-width: 0; }
.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; }
/* Every part carries its own colour (never `inherit`, see .a81ps-link). */
.a81ps-cat {
	font-size: var(--a81ps-cat-size, 12px);
	color: var(--a81ps-cat-color, var(--a81ps-dropdown-text));
	opacity: .7;
}
.a81ps-sku {
	font-size: var(--a81ps-sku-size, 11px);
	color: var(--a81ps-sku-color, var(--a81ps-dropdown-text));
	opacity: .6;
	font-family: ui-monospace, monospace;
}

.a81ps-price {
	font-size: var(--a81ps-price-size, 14px);
	color: var(--a81ps-price-color, var(--a81ps-dropdown-text));
	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-no-results.a81ps-error { opacity: .85; color: #b91c1c; }

/* "Did you mean …?" line above corrected results. */
.a81ps-dym {
	padding: 12px 12px 4px;
	font-size: 13px;
	opacity: .85;
}
.a81ps-dym-link {
	color: var(--a81ps-highlight);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.a81ps-dym-link strong { font-weight: 700; }

.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, var(--a81ps-dropdown-text));
	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: var(--a81ps-dropdown-text); /* pinned like .a81ps-link */
	text-decoration: none;
	transition: background-color .12s ease;
}
.a81ps-term a:hover { background: var(--a81ps-hover-bg); color: var(--a81ps-hover-text); }
.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, var(--a81ps-dropdown-text));
}
.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 */
/* Full height so the action button can be pinned to the bottom edge. */
.a81ps-panel-inner {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 100%;
	min-width: 0;
}
.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);
	/* Never let a long product name push past the window. */
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: var(--a81ps-panel-title-lines, 3);
	line-clamp: var(--a81ps-panel-title-lines, 3);
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.a81ps-panel-sku {
	font-size: 11px;
	opacity: .5;
	font-family: ui-monospace, monospace;
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.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 {
	/* auto margin pushes the button to the bottom of the window, so it lines up
	   with the "see all results" button on the suggestions side. The padding
	   and radius below MUST stay equal to .a81ps-more's, or the two buttons
	   are different heights and the mismatch is plainly visible. */
	margin-top: auto;
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 11px 14px;
	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-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; }
/* The headings and the category/brand/tag rows follow the same alignment, so
   the dropdown reads as one column rather than a mix. */
.a81ps-layout-list.a81ps-align-center .a81ps-group-head,
.a81ps-layout-list.a81ps-align-center .a81ps-dym { text-align: center; }
.a81ps-layout-list.a81ps-align-center .a81ps-term a { justify-content: center; }
.a81ps-layout-list.a81ps-align-center .a81ps-term-name { flex: 0 1 auto; }
.a81ps-layout-list.a81ps-align-right .a81ps-group-head,
.a81ps-layout-list.a81ps-align-right .a81ps-dym { text-align: right; }
.a81ps-layout-list.a81ps-align-right .a81ps-term a { flex-direction: row-reverse; }

/* ---- Grid: long names ---- */
/* A name without spaces (model codes) must break rather than run under the
   neighbouring card. */
.a81ps-layout-grid .a81ps-title { overflow-wrap: anywhere; word-break: break-word; }
/* Fade mode: the two-line clamp ends in a soft fade like the classic layout,
   instead of an ellipsis — but only when the name really is cut off. */
.a81ps-overflow-fade.a81ps-layout-grid .a81ps-title {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	line-height: 1.3;
	max-height: 2.6em;
	overflow: hidden;
	-webkit-mask-image: none;
	mask-image: none;
}
.a81ps-overflow-fade.a81ps-layout-grid .a81ps-title.is-clipped {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.1em), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 1.1em), transparent 100%);
}

/* ------------------------------------------------------------- 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); }
/* Two columns need more room than one. Set by the JS from the Position
   setting, so the compact popup widens too — not just the full-screen one. */
.a81ps-overlay-wide .a81ps-overlay-inner,
.a81ps-overlay-wide .a81ps-overlay-inner.a81ps-wrap { max-width: min(980px, 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;
}
/* The overlay used to stack the product window unconditionally, which threw
   away the admin's Position choice (Product window -> Position) and forced
   everyone to scroll for the details. It honours the setting now; only
   "Below the results" stacks, and a viewport too narrow for two columns hides
   the window entirely via the mobile rules further down. */
.a81ps-overlay .a81ps-layout-shell.has-panel { display: flex; }
.a81ps-overlay .a81ps-layout-shell.has-panel .a81ps-suggestions { min-width: 0; }

/* Position: BELOW — the stacked look the overlay used to force on everyone. */
.a81ps-overlay .a81ps-layout-shell.has-panel.a81ps-panel-bottom { display: block; }
.a81ps-overlay .a81ps-panel-bottom .a81ps-suggestions {
	width: 100%;
	border-right: none;
	border-bottom: 1px solid var(--a81ps-input-border);
}
.a81ps-overlay .a81ps-panel-bottom .a81ps-panel {
	width: 100%;
	max-width: 100%;
	flex-basis: auto;
}

/* ====================================================================
   Full-screen search

   The soft overlay covers the page and the search sits in the middle of
   it. The box is centred with flex rather than a fixed top padding, so it
   stays centred at any height, and the whole overlay scrolls once the
   results outgrow the viewport instead of trapping them.
   ==================================================================== */
.a81ps-overlay-fullscreen {
	display: none;
	padding: 0;
	background: rgba(17, 24, 39, .55);
	-webkit-backdrop-filter: blur(6px) saturate(120%);
	backdrop-filter: blur(6px) saturate(120%);
}
.a81ps-overlay-fullscreen.a81ps-open {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: max(8vh, 24px) 16px 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
	animation: a81ps-overlay-in .16s ease-out;
}
.a81ps-overlay-fullscreen .a81ps-overlay-inner,
.a81ps-overlay-fullscreen .a81ps-overlay-inner.a81ps-wrap {
	width: 100%;
	max-width: min(720px, 94vw);
	margin: 0;
	/* The box is as tall as its content; the overlay does the scrolling. */
	align-self: flex-start;
}
/* With the product window beside the results the box needs room for two
   columns, or the results are squeezed into a sliver. The class is set by the
   JS from the Position setting — :has() is not safe across the browsers this
   plugin ships to. */
.a81ps-overlay-fullscreen.a81ps-overlay-wide .a81ps-overlay-inner,
.a81ps-overlay-fullscreen.a81ps-overlay-wide .a81ps-overlay-inner.a81ps-wrap {
	max-width: min(1040px, 94vw);
}
/* A more generous bar than the inline one — this is the whole screen's
   focus now, so it should not look like a header widget. */
.a81ps-overlay-fullscreen .a81ps-input {
	height: calc(var(--a81ps-input-height) + 10px);
	font-size: calc(var(--a81ps-font-size) + 2px);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}
.a81ps-overlay-fullscreen .a81ps-results {
	max-height: none;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}
.a81ps-overlay-fullscreen .a81ps-overlay-close {
	position: fixed;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	font-size: 24px;
}

@keyframes a81ps-overlay-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.a81ps-overlay-fullscreen.a81ps-open { animation: none; }
}

/* On a phone the box should use the full width and start higher, so the
   keyboard does not push the results off-screen. */
@media (max-width: 600px) {
	.a81ps-overlay-fullscreen.a81ps-open { padding: 12px 12px 24px; }
	.a81ps-overlay-fullscreen .a81ps-overlay-inner,
	.a81ps-overlay-fullscreen .a81ps-overlay-inner.a81ps-wrap { max-width: 100%; }
	.a81ps-overlay-fullscreen .a81ps-overlay-close {
		position: absolute;
		top: 8px;
		right: 8px;
	}
	/* Leave room for the close button so it never covers the submit icon. */
	.a81ps-overlay-fullscreen .a81ps-form { margin-top: 44px; }
}

/* ------------------------------------------------------------- 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%;
	}
	/* Expanded form on a narrow screen: the dropdown spans exactly the form. */
	.a81ps-wrap.a81ps-expand-on-focus.is-focused .a81ps-results {
		left: var(--a81ps-expand-left, 0px);
		right: var(--a81ps-expand-right, 0px);
	}

	.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; }
}