/* AJ-Search front-end styles */

/* Blanket reset for every button this plugin renders. Your theme applies a
   global Elementor "Buttons" style (Site Settings ▸ Theme Style) to every
   <button> on the page — background, border-radius, padding, min-height —
   which is what kept leaking through as a pill behind "Clear", drift in
   the × icon, etc. Resetting box-model properties here, once, for every
   plugin button class stops that leak at the source instead of chasing it
   button-by-button. */
.aj-search-clear,
.aj-search-submit-btn,
.aj-search-close-mobile,
.aj-history-clear {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	min-width: 0 !important;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
}

.aj-qty-btn,
.aj-qty-input,
.aj-add-to-cart-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	outline: none !important;
	text-decoration: none !important;
	-webkit-tap-highlight-color: transparent;
}

/* Your theme applies its own global text-input styling (large border-radius,
   generous padding/min-height, its own background) to every <input> on the
   page, exactly like the global <button> styling described above. Because
   .aj-qty-input is a plain <input type="text">, that global rule was
   overriding the plugin's own 34x34 box and rendering as an oversized
   white pill/circle that swallowed the "−"/"+" and hid the quantity
   digit — this is the "blank white blob" bug in the details panel. Locking
   every box-model property down here, the same way the buttons above are
   locked down, stops it at the source. */
.aj-qty-input {
	background: var(--aj-sugg-bg) !important;
	background-color: var(--aj-sugg-bg) !important;
	background-image: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	line-height: normal !important;
	font-family: inherit !important;
	vertical-align: middle !important;
}

:root {
	--aj-accent: #1e1e1e;
	--aj-text: #1e1e1e;
	--aj-muted: #6b7280;
	--aj-border: #e5e7eb;
	--aj-bg: #ffffff;
	--aj-radius: 12px;
	--aj-img-radius: 8px;
	--aj-font-size: 14px;
	--aj-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
	--aj-max-width: 514px;
	--aj-icon-color: #1e1e1e;
	--aj-underlay: transparent;
	--aj-input-bg: #ffffff;
	--aj-input-text: #1e1e1e;
	--aj-input-border: #e5e7eb;
	--aj-sugg-bg: #ffffff;
	--aj-sugg-sel: #f7f5fb;
	--aj-sugg-text: #1e1e1e;
	--aj-sugg-hi: #7f54b3;
	--aj-sugg-border: #e5e7eb;
}

/* =========================================================================
   Animated rainbow rotating border around the search bar.
   Requested as-is: a conic-gradient spun via the animated --border-angle
   custom property, drawn on the border-box while the fill stays on the
   padding-box, so the ring reads as one uniform-width pill outline instead
   of depending on (and getting pinched or thickened by) any child
   input/icon/button element's own box. border/border-radius/background are
   !important here, which is what lets this win over the plain (non-
   !important) border/background on the base .aj-search-input-wrap rule
   further down, regardless of which comes first in the file. .dgwt-wcas-*
   selectors are FiboSearch's own markup — included here only so the same
   ring applies there too if that plugin is ever active side-by-side;
   they're inert otherwise. */
@property --border-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@keyframes spinBorder {
	from {
		--border-angle: 0deg;
	}
	to {
		--border-angle: 360deg;
	}
}

.dgwt-wcas-search-form,
.aj-search-input-wrap {
	position: relative !important;
	border-radius: 999px !important;
	box-sizing: border-box !important;
	z-index: 1.5 !important;
	border: 2px solid transparent !important; /* বর্ডারের থিকনেস */
	/* REAL cause of the "left side of the ring goes blank/flat" bug (this
	   is a different, deeper issue than the hue-spacing tweak below tried
	   to patch, which is why that tweak alone didn't fix it):

	   conic-gradient() computes its angle from the CENTER of whatever box
	   it paints onto. This search bar is a very short, very wide pill
	   (height 48px, width up to ~514px on desktop, but width:100% — often
	   many hundreds of px more — on tablet, and full-viewport-width on
	   mobile fullscreen mode). On a box that wide and short, a point on
	   the long straight top/bottom edges barely changes angle as you move
	   along it (it's almost all clustered near 0°/180°), while the entire
	   90°+ hue sweep gets squeezed into the tiny rounded end-caps. The
	   wider the bar relative to its height, the more extreme this
	   squeeze — which is exactly why it was invisible on the fixed
	   514px-wide desktop bar but showed up on tablet (width:100%, often a
	   much wider container) and mobile (also stretched wide): the far
	   more elongated box squeezes almost the whole rainbow into a sliver
	   at each rounded end, so that end reads as one flat/near-blank color
	   instead of a rainbow curve. It happens at both ends in principle,
	   but the left end sits right next to the bare input text (nothing
	   else drawn there) so the flat patch is what catches the eye; the
	   right end has the search/camera icons next to it, which visually
	   camouflage the same flat patch.

	   Fix: decouple the gradient's angle math from the pill's own
	   elongated shape. background-size below forces the conic-gradient to
	   be generated on its own SQUARE canvas (100vmax × 100vmax — always
	   bigger than the pill in any direction, at any breakpoint) instead
	   of on the pill's actual width×height box, then that square image is
	   centered and clipped to the border ring by background-clip like
	   before. Because the gradient itself is now computed on a true
	   circle, the hue sweep is perfectly even all the way around
	   regardless of how wide/narrow the pill ends up being — on desktop,
	   tablet, or mobile — so this holds even if the bar's width changes
	   again later. The hue list is still evenly spaced (kept from the
	   previous fix) since that's good practice regardless. */
	background:
		linear-gradient(#ffffff, #ffffff) padding-box,
		conic-gradient(
			from var(--border-angle, 0deg),
			#ff0000,
			#ff8000,
			#ffe600,
			#22e000,
			#00e0c0,
			#0080ff,
			#8000ff,
			#ff00c8,
			#ff0000
		) border-box !important;
	background-size: auto, 100vmax 100vmax !important;
	background-position: center, center !important;
	background-repeat: no-repeat, no-repeat !important;
	background-origin: border-box !important;
	background-clip: padding-box, border-box !important;
	animation: spinBorder 3s linear infinite !important;
}

.dgwt-wcas-sf-wrapp,
.dgwt-wcas-search-input {
	background: #ffffff !important;
	border-radius: 999px !important;
	border: none !important;
}

.aj-search-wrap {
	position: relative;
	width: 100%;
	max-width: var(--aj-max-width);
	margin-left: auto;
	margin-right: auto;
	/* Inherit the active theme's own font instead of a hardcoded system
	   stack, so the search bar (placeholder text, results, everything)
	   automatically renders in the same typeface as the rest of the site
	   — whatever that theme's font happens to be — instead of visibly
	   mismatching it. */
	font-family: inherit;
	background: var(--aj-underlay);
	padding: 0;
	border-radius: var(--aj-radius);
	box-sizing: border-box;
}

.aj-search-form {
	margin: 0;
}

/* Pill-shaped search bar, matching a FiboSearch-style layout: input on the
   left, then a flex row of icons (clear ×, loading spinner/preloader,
   submit/search icon) on the right. Everything is centered by the flex
   container itself — no hard-coded top/right pixel offsets — so alignment
   stays correct at every breakpoint (desktop, tablet, mobile) instead of
   drifting the way absolutely-positioned icons did before. */
.aj-search-input-wrap {
	position: relative;
	display: flex !important;
	align-items: center !important;
	height: 48px !important;
	box-sizing: border-box !important;
	background: var(--aj-input-bg);
	border: 1.5px solid var(--aj-input-border);
	border-radius: 999px;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.aj-style-minimal .aj-search-input-wrap {
	border-radius: 8px;
}

.aj-style-boxed .aj-search-input-wrap {
	border-radius: 4px;
	border-width: 2px;
}

.aj-search-wrap.is-focused .aj-search-input-wrap {
	border-color: var(--aj-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--aj-accent) 15%, transparent);
}

/* Text field fills the remaining space and the full 48px height of the
   pill. If you also run a separate visual/image-search feature that
   injects its own icon into this same bar on the live site, append it as
   another child inside .aj-search-icons below so it joins the same flex
   row and inherits the same centering — it is not part of this plugin. */
.aj-search-field {
	-webkit-appearance: none !important;
	appearance: none !important;
	flex: 1 1 auto !important;
	min-width: 0;
	height: 100% !important;
	border: 0 !important;
	outline: none;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 4px 0 24px !important;
	margin: 0 !important;
	font-size: var(--aj-font-size) !important;
	line-height: normal !important;
	color: var(--aj-input-text);
	box-sizing: border-box !important;
	border-radius: 0 !important;
}

/* Icon row: clear (×), spinner/preloader, submit — laid out with flexbox
   so every icon is vertically centered by the parent, not by guessing a
   top/right offset per icon. */
/* No divider/border of any kind between the input text and the icon row,
   at ANY breakpoint — this must match desktop, tablet and mobile
   identically, the same way the reference site's search bar never shows a
   seam next to the magnifier. Previously this reset only applied inside
   the <=1024px media query, which is why it could still show up on
   desktop. */
.aj-search-icons,
.aj-search-clear,
.aj-search-submit-btn {
	border: 0 !important;
	border-left: 0 !important;
	box-shadow: none !important;
}

.aj-search-icons {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 8px;
	padding-right: 18px;
}

.aj-search-clear,
.aj-search-submit-btn,
.aj-search-close-mobile {
	-webkit-appearance: none;
	appearance: none;
	outline: none;
	box-shadow: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	-webkit-tap-highlight-color: transparent;
}

.aj-search-clear:hover,
.aj-search-clear:focus,
.aj-search-submit-btn:hover,
.aj-search-submit-btn:focus,
.aj-search-close-mobile:hover,
.aj-search-close-mobile:focus {
	background-color: transparent !important;
	box-shadow: none !important;
}

.aj-search-clear,
.aj-search-submit-btn {
	flex-shrink: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
}

/* Your theme's global Elementor button styling (Site Settings ▸ Theme
   Style ▸ Buttons) applies its own padding/min-height/font-size to every
   <button> on the page, including these two — which is what was pushing
   the × and the magnifier off their intended spot depending on which
   page/section they rendered in. The !important box-model rules above and
   fixed pixel sizes below take these two out of that global rule's reach. */
.aj-search-clear {
	width: 20px !important;
	height: 20px !important;
	color: var(--aj-icon-color);
	display: none !important;
	opacity: 0.85;
}

/* The × was rendered from a 24-unit viewBox scaled down into a 14px box —
   that non-integer scale factor is what softened/blurred the diagonal
   strokes. The svg markup now uses a 16x16 viewBox at native 16x16 size
   (1:1, no scaling), so the 2px margin inside this 20px button renders
   crisp at any zoom level. */
.aj-search-clear svg {
	width: 16px;
	height: 16px;
	display: block;
}

.aj-search-clear:hover {
	opacity: 1;
}

.aj-search-wrap.has-value .aj-search-clear {
	display: flex !important;
}

.aj-search-submit-btn {
	width: 24px !important;
	height: 24px !important;
	color: var(--aj-icon-color);
}

.aj-search-spinner,
.aj-search-preloader-img {
	width: 18px !important;
	height: 18px !important;
	display: none !important;
	flex-shrink: 0;
	margin: 0 !important;
	padding: 0 !important;
}

.aj-search-spinner {
	border-radius: 50%;
	border: 2px solid color-mix(in srgb, var(--aj-accent) 30%, transparent);
	border-top-color: var(--aj-accent);
	animation: aj-spin 0.6s linear infinite;
}

.aj-search-preloader-img {
	object-fit: contain;
}

/* Loading state: the spinner/preloader takes over the × (clear) icon's
   slot only — same spot your live site shows its loading indicator in.
   The magnifier (submit) button is intentionally NOT touched here and
   stays visible at all times, matching the reference site where the
   search icon never disappears. */
.aj-search-wrap.is-loading .aj-search-clear {
	display: none !important;
}

.aj-search-wrap.is-loading .aj-search-spinner {
	display: block !important;
}

.aj-search-wrap.is-loading .aj-search-preloader-img[src] {
	display: block !important;
}
.aj-search-wrap.is-loading .aj-search-preloader-img[src] ~ .aj-search-spinner {
	display: none !important;
}

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

.aj-search-close-mobile {
	display: none;
}

/* Suggestions dropdown */
.aj-search-suggestions {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--aj-sugg-bg);
	border: 1px solid var(--aj-sugg-border);
	border-radius: var(--aj-radius);
	box-shadow: var(--aj-shadow);
	max-height: 75vh;
	overflow-y: auto;
	z-index: 9999;
	display: none;
	padding: 0;
}

.aj-search-wrap.is-open .aj-search-suggestions {
	display: block;
}

.aj-search-wrap.anim-fade .aj-search-suggestions {
	animation: aj-fade-in 0.15s ease;
}

.aj-search-wrap.anim-slide .aj-search-suggestions {
	animation: aj-slide-in 0.18s ease;
}

@keyframes aj-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes aj-slide-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Split two-column layout: left = scrollable result list, right = sticky
   product-details panel that updates on hover/keyboard nav. */
.aj-results-columns {
	display: flex;
	align-items: stretch;
}

.aj-results-columns.has-details {
	min-height: 220px;
}

.aj-results-list {
	flex: 1;
	min-width: 0;
	max-height: 75vh;
	overflow-y: auto;
	padding: 6px 0;
}

.aj-results-columns.has-details .aj-results-list {
	border-right: 1px solid var(--aj-sugg-border);
	flex-basis: 55%;
}

.aj-details-panel {
	flex-basis: 45%;
	flex-shrink: 0;
	min-width: 0;
	box-sizing: border-box;
	padding: 20px;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 75vh;
}

.aj-group-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--aj-muted);
	padding: 10px 16px 4px;
}

.aj-suggestion {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	cursor: pointer;
	text-decoration: none;
	color: var(--aj-sugg-text);
	position: relative;
}

.aj-suggestion:hover,
.aj-suggestion.is-active {
	background: var(--aj-sugg-sel);
}

.aj-suggestion-thumb {
	width: 42px;
	height: 42px;
	border-radius: var(--aj-img-radius);
	object-fit: cover;
	flex-shrink: 0;
	background: #f1f1f3;
}

.aj-suggestion-thumb.is-term {
	border-radius: 50%;
}

.aj-suggestion-body {
	min-width: 0;
	flex: 1;
}

.aj-suggestion-title {
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Guard against a theme-level "word-break: break-all" (common in some
	   header/menu stylesheets to stop long strings overflowing narrow
	   nav widgets) leaking onto this title the same way global button and
	   input styling was leaking in elsewhere — that combination is what
	   produced the one/two-letter-per-line wrapping bug. */
	overflow-wrap: normal;
	word-break: normal;
}

.aj-suggestion-title mark {
	background: color-mix(in srgb, var(--aj-sugg-hi) 25%, transparent);
	color: inherit;
	border-radius: 2px;
}

.aj-suggestion-meta {
	font-size: 12px;
	color: var(--aj-muted);
	display: flex;
	gap: 8px;
	margin-top: 2px;
}

.aj-suggestion-price {
	font-weight: 600;
	color: var(--aj-accent);
	white-space: nowrap;
	font-size: 13px;
}

.aj-suggestion-price del {
	color: var(--aj-muted);
	font-weight: 400;
	margin-right: 4px;
}

.aj-suggestion-count {
	font-size: 12px;
	color: var(--aj-muted);
}

/* Right-hand product details panel */
.aj-details-img {
	max-width: 100%;
	max-height: 220px;
	display: block;
	margin: 0 auto 14px;
	object-fit: contain;
}

.aj-details-title {
	font-weight: 600;
	font-size: 16px;
	margin-bottom: 4px;
	color: var(--aj-sugg-text);
}

.aj-details-sku {
	font-size: 12px;
	color: var(--aj-muted);
	margin-bottom: 4px;
}

.aj-details-price {
	font-weight: 700;
	font-size: 17px;
	color: var(--aj-accent);
	margin: 6px 0 12px;
}

.aj-details-desc {
	font-size: 12.5px;
	color: var(--aj-muted);
	margin-bottom: 14px;
	line-height: 1.6;
	padding-top: 10px;
	border-top: 1px solid var(--aj-sugg-border);
}

.aj-details-outofstock {
	font-size: 12.5px;
	font-weight: 600;
	color: #b91c1c;
}

/* Both the stepper and the button below share one fixed 44px height so
   they line up as a single control, matching the live site's own
   "Add to cart" button height (see the product-card buttons on the shop
   pages). */
.aj-qty-stepper {
	display: flex;
	align-items: center;
	height: 44px;
	border: 1.5px solid var(--aj-sugg-border);
	border-radius: 999px;
	overflow: hidden;
	flex-shrink: 0;
}

.aj-qty-btn {
	width: 30px !important;
	height: 44px !important;
	border: none;
	background: transparent !important;
	color: var(--aj-sugg-text);
	cursor: pointer;
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	border-radius: 0 !important;
	font-size: 15px;
	line-height: 1;
}

.aj-qty-btn:hover {
	background: var(--aj-sugg-sel) !important;
}

.aj-qty-input {
	width: 26px;
	height: 44px;
	border: none;
	border-left: 1px solid var(--aj-sugg-border);
	border-right: 1px solid var(--aj-sugg-border);
	text-align: center;
	font-size: 13px;
	color: var(--aj-sugg-text);
}

/* Matches the site's real product-card "Add to cart" button: solid,
   fully-rounded pill shape, bold centered label, full-width within its
   row (see the reference product card — the black stadium-shaped button
   above "Quick View" / "Buy Now"). */
.aj-add-to-cart-btn {
	flex: 1;
	min-width: 0;
	height: 44px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--aj-accent) !important;
	color: #fff;
	border: none;
	border-radius: 999px !important;
	padding: 0 14px !important;
	margin: 0 !important;
	min-height: 0 !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: opacity 0.15s, transform 0.1s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none !important;
	box-sizing: border-box;
}

.aj-add-to-cart-btn:active {
	transform: scale(0.98);
}

.aj-add-to-cart-btn:hover {
	color: #fff;
	opacity: 0.92;
}

/* Belt-and-braces: whatever width the details panel ends up at (it can be
   noticeably narrower than the list column at some breakpoints), the qty
   stepper + button row must never be wider than its container — it should
   shrink and truncate its label rather than overflow off the edge of the
   panel and become invisible. */
.aj-details-cart-row {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	box-sizing: border-box;
}

.aj-add-to-cart-btn:hover {
	opacity: 0.9;
}

.aj-add-to-cart-btn.is-added {
	background: #16a34a !important;
}

.aj-add-to-cart-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* No results / view all / history */
.aj-no-results {
	padding: 24px 16px;
	text-align: center;
	color: var(--aj-muted);
	font-size: 13.5px;
}

.aj-view-all {
	display: block;
	text-align: center;
	padding: 10px;
	margin: 4px 0 0;
	color: var(--aj-accent);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.03em;
	text-decoration: none;
}

.aj-history-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px 6px;
}

.aj-history-clear {
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	color: var(--aj-accent);
	font-size: 11.5px;
	cursor: pointer;
	padding: 0 !important;
	margin: 0 !important;
	text-decoration: none !important;
}

.aj-history-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	cursor: pointer;
	font-size: 13px;
	color: var(--aj-sugg-text);
}

.aj-history-item:hover {
	background: var(--aj-sugg-sel);
}

.aj-search-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 9998;
}

.aj-search-wrap.aj-darkened-bg.is-open .aj-search-overlay {
	display: block;
}

/* Tablet & mobile: keep the bar identical to desktop.
   - No left border/divider should appear between the input text and the
     icon row — the icons already sit inside the same borderless flex
     container as the input, so this just guards against a theme/browser
     default (e.g. a mobile UA stylesheet) drawing one.
   - No extra background shadow behind the pill — only the one shadow
     defined on .aj-search-wrap.is-focused / .aj-search-suggestions should
     ever show.
   - The 14px input font below 16px is what makes iOS Safari (and some
     Android browsers) auto-zoom the whole page in on focus — that zoom is
     exactly what makes the typed text look cut off while it's happening,
     and makes the result list look oversized right after a search. Forcing
     16px here stops the auto-zoom without changing how large the text
     looks (the pill's own font-size custom property is untouched, and
     desktop is unaffected since this block only applies at tablet/mobile
     widths). */
@media (max-width: 1024px) {
	.aj-search-input-wrap {
		box-shadow: none !important;
	}

	.aj-search-field {
		font-size: 16px !important;
	}

	/* Tablet & mobile results list: match the reference layout — one
	   full-width column (no side-by-side product-details panel, which is
	   cramped and is what was pushing the qty-stepper/add-to-cart row
	   into the odd stacked layout on phones), bigger thumbnails, and
	   titles that wrap onto multiple lines instead of being cut off with
	   an ellipsis, exactly like the reference screenshots. */
	.aj-results-columns.has-details .aj-results-list {
		border-right: none;
		flex-basis: 100%;
		width: 100%;
	}

	.aj-details-panel {
		display: none !important;
	}

	/* Each row used to lay out thumb + title + price side-by-side with the
	   price locked to "white-space: nowrap". On a very narrow container
	   (a small phone, or an embedded header search widget with limited
	   width — e.g. inside the WordPress Customizer's own device preview)
	   the nowrap price ate a fixed chunk of the row regardless of space
	   left over, squeezing the title column down toward zero width —
	   which is what caused the title to wrap one or two letters per line
	   instead of by word. Wrapping the row with flexbox and giving the
	   price "flex-basis: 100%" moves it onto its own line below the
	   title (indented to line up under the text, not the thumbnail)
	   instead of fighting the title for horizontal space, so the title
	   always gets the full row width to wrap normal, whole words in. */
	.aj-suggestion {
		flex-wrap: wrap;
		align-items: center;
		row-gap: 4px;
		column-gap: 14px;
		padding: 10px 16px;
	}

	.aj-suggestion-thumb {
		width: 56px;
		height: 56px;
		flex-shrink: 0;
	}

	.aj-suggestion-body {
		flex: 1 1 auto;
		min-width: 0;
	}

	.aj-suggestion-title {
		white-space: normal;
		overflow: visible;
		text-overflow: unset;
		overflow-wrap: normal;
		word-break: normal;
		font-size: 13.5px;
		line-height: 1.4;
	}

	.aj-suggestion-price {
		flex: 0 0 100%;
		margin-left: 70px;
		text-align: left;
		font-size: 13px;
	}

	/* No thumbnail (Show image disabled in settings) → nothing to indent
	   the wrapped price under. */
	.aj-suggestion:not(:has(.aj-suggestion-thumb)) .aj-suggestion-price {
		margin-left: 0;
	}
}

/* Tablet only (between the mobile-fullscreen breakpoint at 782px and
   desktop at 1024px): the bar was still capped at the desktop
   --aj-max-width (514px), which reads as narrow against the wider tablet
   viewport — the reference screenshot shows the bar running almost
   edge-to-edge of its container at this width. Widen it here without
   touching desktop or the mobile fullscreen layout. */
@media (min-width: 783px) and (max-width: 1024px) {
	.aj-search-wrap {
		max-width: 100%;
		width: 100%;
	}
}

/* Mobile fullscreen mode */
@media (max-width: 782px) {
	.aj-search-wrap.is-mobile-active {
		position: fixed;
		inset: 0;
		max-width: none;
		z-index: 100000;
		background: var(--aj-bg);
		padding: 10px 12px;
		display: flex;
		flex-direction: column;
	}

	.aj-search-wrap.is-mobile-active .aj-search-close-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 8px;
		top: 50%;
		transform: translateY(-50%);
		width: 30px;
		height: 30px;
		border: none;
		background: transparent;
		font-size: 18px;
		cursor: pointer;
		z-index: 2;
	}

	.aj-search-wrap.is-mobile-active .aj-search-field {
		padding-left: 46px;
	}

	.aj-search-wrap.is-mobile-active .aj-search-suggestions {
		position: static;
		box-shadow: none;
		flex: 1;
		margin-top: 10px;
		max-height: none;
	}

	.aj-results-columns.has-details {
		flex-direction: column;
	}

	.aj-results-columns.has-details .aj-results-list {
		border-right: none;
		border-bottom: none;
		flex-basis: auto;
		max-height: none;
	}

	.aj-details-panel {
		flex-basis: auto;
		max-height: none;
	}

	.aj-suggestion {
		flex-wrap: wrap;
	}

	.aj-search-wrap.aj-overlay-on-mobile:not(.is-mobile-active) .aj-search-suggestions {
		position: fixed;
		inset: 0;
		top: 60px;
		border-radius: 0;
		z-index: 100001;
	}
}

/* ============================================================
   Rotating placeholder words (Search bar → Animated placeholder)
   Only takes effect on inputs that receive the aj-placeholder-*
   classes from aj-rotating-placeholder.js — inert otherwise.
   ============================================================ */
input[type="search"]::placeholder,
.search-field::placeholder,
.wc-search-input::placeholder,
.aj-search-field::placeholder {
	transition: opacity .6s cubic-bezier(.23, 1, .32, 1), transform .6s cubic-bezier(.23, 1, .32, 1);
	opacity: 1;
	transform: translateY(0);
}

.aj-placeholder-hidden::placeholder {
	opacity: 0;
	transform: translateY(-25px);
}

.aj-placeholder-coming::placeholder {
	opacity: 0;
	transform: translateY(25px);
}