/**
 * Global product search skin for Vida Aromatica Core.
 *
 * Only the look of the header search band. Its placement in the header and the
 * fact that it exists on every view are decided in
 * inc/frontend-product-search.php.
 *
 * Every rule is scoped to the .va-product-search namespace. No Kadence, theme
 * or WooCommerce selector is overridden, and the desktop/mobile visibility is
 * not handled here: the band lives inside the Kadence desktop and mobile
 * headers, which already hide one another at the theme breakpoint.
 *
 * Palette: child theme tokens (--va-*) with literal fallbacks, so the band
 * stays coherent even where global.css is not loaded.
 */

.va-product-search {
	/* The band paints over what follows it, which is the whole reason the
	   dropdown can exist: the category bar is the next element in the header and
	   would otherwise be drawn on top of a panel that opens over it. A stacking
	   context here, and not a z-index race inside the panel.

	   Four and not three: the category bar's scroll arrows sit at 3 in the same
	   stacking context and come later in the document, so a tie handed them the
	   right edge of the first suggestion and, with it, the tap meant for it. */
	position: relative;
	z-index: 4;

	--va-ps-bg: var(--va-bg, #F5EFE6);
	--va-ps-border: var(--va-border, #E1D6C4);
	--va-ps-surface: var(--va-surface, #FBF7F0);
	--va-ps-text: var(--va-text, #2A231C);
	--va-ps-text-secondary: var(--va-text-secondary, #5A4D3F);
	--va-ps-accent: var(--va-accent, #5B6B52);
	--va-ps-accent-dark: var(--va-accent-dark, #47543F);
	--va-ps-on-accent: var(--va-on-accent, #FBF7F0);
	--va-ps-focus: var(--va-focus-ring, #2A231C);
	--va-ps-radius: var(--va-radius, 3px);
	--va-ps-transition: var(--va-transition, 240ms ease-out);

	/* Desktop target: compact and centred, inside the 500-700px comfort range. */
	--va-ps-width: 600px;
	--va-ps-height: 42px;

	background: var(--va-ps-bg);
	/* Separates the band from the main header row. The bottom edge is drawn by
	   the category bar, which already carries its own border-top. */
	border-top: 1px solid var(--va-ps-border);
}

.va-product-search__frame {
	margin: 0 auto;
	max-width: var(--global-content-width, 1290px);
	padding: 0.6rem 1.25rem;
}

/* ---------------------------------------------------------------------------
 * Box
 *
 * The positioning reference of the dropdown, and the reason it is a separate
 * element instead of the form itself: the form is rounded and clips its own
 * content with overflow, which is what keeps the submit button inside its
 * corners. A panel hanging below it from inside would be cut off at the first
 * pixel. So the panel is a sibling of the form, and this box is what holds them
 * together and aligned.
 * ------------------------------------------------------------------------ */

.va-product-search__box {
	margin: 0 auto;
	max-width: var(--va-ps-width);
	position: relative;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Form
 * ------------------------------------------------------------------------ */

.va-product-search__form {
	align-items: stretch;
	background: var(--va-ps-surface);
	border: 1px solid var(--va-ps-border);
	border-radius: var(--va-ps-radius);
	display: flex;
	margin: 0 auto;
	max-width: var(--va-ps-width);
	overflow: hidden;
	transition: border-color var(--va-ps-transition);
	width: 100%;
}

/* The whole control reads as one field, so the highlight belongs to the group
   and not to the input alone. */
.va-product-search__form:focus-within {
	border-color: var(--va-ps-accent);
}

/* ---------------------------------------------------------------------------
 * Field
 *
 * Scoped under the block class on purpose. Kadence styles search inputs through
 * input[type=search] and input[type=search]:focus, whose specificity (0,1,1)
 * and (0,2,1) beat a plain class selector, and its stylesheet is enqueued after
 * this one. Adding the parent class raises the skin to (0,2,0) and (0,3,0), so
 * the module owns its own field: border, padding, colour and focus ring, all
 * without a single !important and without touching a Kadence file.
 * ------------------------------------------------------------------------ */

.va-product-search .va-product-search__field {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: var(--va-ps-text);
	flex: 1 1 auto;
	font-family: inherit;
	font-size: 0.9375rem;
	height: var(--va-ps-height);
	line-height: 1.2;
	margin: 0;
	min-width: 0;
	padding: 0 0.9rem;
	width: 100%;
}

.va-product-search .va-product-search__field::placeholder {
	color: var(--va-ps-text-secondary);
	opacity: 1;
}

/* The group already owns the outer highlight, so the inner ring is drawn
   inside the border instead of around it.
   The ring is kept even under body.hide-focus-outline, the Kadence class that
   suppresses outlines for pointer users: :focus-visible already excludes the
   mouse, so the only thing that rule would remove here is the keyboard ring. */
.va-product-search .va-product-search__field:focus {
	border-color: transparent;
	box-shadow: none;
	outline: 0;
}

.va-product-search .va-product-search__field:focus-visible {
	box-shadow: none;
	outline: 2px solid var(--va-ps-focus);
	outline-offset: -2px;
}

/* Removes the native clear/decoration widgets so the field keeps one single
   affordance: the submit button. */
.va-product-search .va-product-search__field::-webkit-search-decoration,
.va-product-search .va-product-search__field::-webkit-search-cancel-button,
.va-product-search .va-product-search__field::-webkit-search-results-button,
.va-product-search .va-product-search__field::-webkit-search-results-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* ---------------------------------------------------------------------------
 * Submit
 * ------------------------------------------------------------------------ */

/* Scoped like the field, and for the same reason: the theme also styles bare
   buttons, and the skin has to stay the one deciding here. */
.va-product-search .va-product-search__submit {
	align-items: center;
	background: var(--va-ps-accent);
	border: 0;
	border-radius: 0;
	color: var(--va-ps-on-accent);
	cursor: pointer;
	display: flex;
	flex: 0 0 auto;
	height: var(--va-ps-height);
	justify-content: center;
	line-height: 1;
	margin: 0;
	padding: 0;
	transition: background-color var(--va-ps-transition);
	width: calc(var(--va-ps-height) + 0.5rem);
}

.va-product-search .va-product-search__submit:hover,
.va-product-search .va-product-search__submit:focus-visible {
	background: var(--va-ps-accent-dark);
	color: var(--va-ps-on-accent);
}

.va-product-search .va-product-search__submit:focus-visible {
	outline: 2px solid var(--va-ps-focus);
	outline-offset: -2px;
}

.va-product-search__icon {
	display: block;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * Suggestions panel
 *
 * Absolute, so opening it never moves the page: the header keeps the exact
 * height it had, the category bar does not jump down and nothing the visitor
 * was looking at changes position. A panel that pushes content is a panel that
 * makes people lose their place with every keystroke.
 * ------------------------------------------------------------------------ */

.va-product-search__panel {
	background: var(--va-ps-surface);
	border: 1px solid var(--va-ps-border);
	border-radius: var(--va-ps-radius);
	box-shadow: 0 10px 28px rgba(42, 35, 28, 0.16);
	left: 0;
	/* Bounded against the viewport and not against a number of rows: eight short
	   names and eight long ones are very different heights, and neither may end
	   up taller than the screen. */
	max-height: min(70vh, 30rem);
	overflow-y: auto;
	position: absolute;
	right: 0;
	top: calc(100% + 0.25rem);
	z-index: 10;
}

/* Stated explicitly because the display of this element is not the browser
   default, and a layout value would win over the hidden attribute. */
.va-product-search__panel[hidden] {
	display: none;
}

.va-product-search__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Nothing to draw: no border, no padding, no empty strip above the message that
   explains why it is empty. */
.va-product-search__list:empty {
	display: none;
}

.va-product-search__item {
	align-items: center;
	border-bottom: 1px solid var(--va-ps-border);
	color: var(--va-ps-text);
	cursor: pointer;
	display: flex;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
}

.va-product-search__item:last-child {
	border-bottom: 0;
}

/* One single highlight for pointer and keyboard. The active option is set by
   the script and hover by the browser, and they must look identical or the list
   would seem to have two different cursors. */
.va-product-search__item:hover,
.va-product-search__item.is-active {
	background: var(--va-ps-bg);
}

.va-product-search__thumb {
	background: var(--va-ps-bg);
	border-radius: var(--va-ps-radius);
	flex: 0 0 auto;
	height: 48px;
	object-fit: cover;
	width: 48px;
}

.va-product-search__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	/* Without this a long name refuses to shrink and pushes the price out of the
	   panel: a flex item's floor is its content unless it is told otherwise. */
	min-width: 0;
}

.va-product-search__name {
	font-size: 0.9375rem;
	line-height: 1.3;
	/* Two lines, then an ellipsis. Product names carry format and volume at the
	   end ("...- 100ml") and cutting at one line would hide exactly the part
	   that tells two variants apart. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* The <mark> default is a yellow highlighter that belongs to no palette here.
   Weight and the brand green say "this is what you typed" without turning the
   list into a striped block. */
.va-product-search__match {
	background: transparent;
	color: var(--va-ps-accent-dark);
	font-weight: 700;
	padding: 0;
}

.va-product-search__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	font-size: 0.875rem;
	gap: 0.35rem;
	line-height: 1.2;
}

.va-product-search__price-was {
	color: var(--va-ps-text-secondary);
	font-size: 0.8125rem;
}

.va-product-search__price-prefix {
	color: var(--va-ps-text-secondary);
}

.va-product-search__price-now {
	color: var(--va-ps-text);
	font-weight: 600;
}

/* The way out of a list that is deliberately short, so it reads as an action
   and not as a ninth product. */
.va-product-search__item--all {
	border-top: 1px solid var(--va-ps-border);
	color: var(--va-ps-accent-dark);
	font-size: 0.875rem;
	font-weight: 600;
	justify-content: center;
	padding: 0.7rem 0.75rem;
	text-align: center;
}

.va-product-search__empty {
	color: var(--va-ps-text-secondary);
	font-size: 0.875rem;
	line-height: 1.4;
	margin: 0;
	padding: 0.75rem;
}

.va-product-search__empty[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Accessible text
 *
 * Owned by the module instead of borrowed from the theme, so the field label
 * and the button name never depend on another stylesheet being loaded.
 * ------------------------------------------------------------------------ */

.va-product-search__label {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.va-product-search__frame {
		padding: 0.55rem 0.75rem;
	}
}

@media (max-width: 767px) {
	.va-product-search {
		/* Its own full width row: on touch the field is the primary action of
		   the header, never an icon that hides it. */
		--va-ps-width: 100%;
		--va-ps-height: 46px;
	}

	.va-product-search__frame {
		padding: 0.5rem 0.75rem;
	}

	.va-product-search .va-product-search__field {
		/* Below 16px iOS Safari zooms the page on focus. */
		font-size: 1rem;
	}

	/* Full width of the band, minus its padding: the panel is as wide as the
	   field it belongs to, so it can never reach an edge of the screen. */
	.va-product-search__panel {
		max-height: min(60vh, 24rem);
	}

	.va-product-search__item {
		/* Comfortably above the 44px minimum touch target, with the row still
		   readable one handed. */
		gap: 0.7rem;
		min-height: 56px;
		padding: 0.6rem 0.75rem;
	}

	.va-product-search__thumb {
		height: 52px;
		width: 52px;
	}
}

/* ---------------------------------------------------------------------------
 * Accessibility preferences
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.va-product-search .va-product-search__form,
	.va-product-search .va-product-search__submit {
		transition: none;
	}
}