/**
 * PurePEG predictive search.
 *
 * Values here are taken from the existing #cstm-product-search styles so the
 * new box is visually identical to the one it replaces. Anything adjustable is
 * a custom property, so the palette can be changed in one place without
 * touching selectors.
 *
 * Two deliberate departures from the original, both noted at the rule:
 *   - the input reserves space on the right so long chemical names cannot run
 *     underneath the magnifier
 *   - result rows bleed to the panel edges on hover, rather than highlighting
 *     a narrower strip inset from the border
 */

.pps-search {
	/* Palette ---------------------------------------------------------- */
	--pps-blue: #6DA1C3;
	--pps-ink: #243A4D;
	--pps-body: #444;
	--pps-field-bg: #F6F8FA;
	--pps-bg: #fff;
	--pps-rule: #ddd;
	--pps-muted: #7b8794;
	--pps-hover: #F6F8FA;
	--pps-radius: 8px;

	/* Swap this for a locally hosted copy if the icon ever moves. */
	--pps-icon-url: url( 'https://purepeg.com/wp-content/uploads/2025/04/Frame.svg' );

	--pps-font: 'Arial Nova Light', 'Arial Nova', Arial, Helvetica, sans-serif;

	position: relative;
	width: 400px;
	max-width: 100%;
	box-sizing: border-box;
}

.pps-search *,
.pps-search *::before,
.pps-search *::after {
	box-sizing: inherit;
}

.pps-search__form {
	margin: 0;
}

.pps-search__label {
	display: block;
	margin-bottom: 6px;
	font-family: var( --pps-font );
	font-size: 14px;
	color: var( --pps-ink );
	letter-spacing: 1px;
	text-transform: uppercase;
}

.pps-search__row {
	position: relative;
	display: flex;
}

/* The field ------------------------------------------------------------- */

/* The theme styles inputs globally, so these carry enough specificity to hold
   without !important, which would block per-site overrides. */
.pps-search .pps-search__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	margin: 0;
	height: auto;
	/* Original padding was 14px 12px. The right side is opened up so a long
	   name such as DBCO-CONH-PEG45-CH2CH2COONHS cannot slide under the icon. */
	padding: 14px 52px 14px 12px;
	background-color: var( --pps-field-bg );
	background-image: var( --pps-icon-url );
	background-repeat: no-repeat;
	background-size: 10% 60%;
	background-position: center right;
	border: 2px solid var( --pps-blue );
	border-radius: var( --pps-radius );
	color: var( --pps-ink );
	font-family: var( --pps-font );
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.pps-search .pps-search__input:focus {
	outline: none;
	border-color: var( --pps-blue );
	box-shadow: 0 0 0 3px rgba( 109, 161, 195, 0.25 );
}

.pps-search .pps-search__input::placeholder {
	color: var( --pps-ink );
	opacity: 0.65;
}

/* The browser's own clear affordance collides with the icon. */
.pps-search .pps-search__input::-webkit-search-decoration,
.pps-search .pps-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/*
 * A transparent hit area over the magnifier.
 *
 * The icon is a background image, so it cannot receive clicks on its own. This
 * button makes it behave like one and gives keyboard and screen reader users a
 * real submit control, without drawing anything of its own.
 */
.pps-search .pps-search__icon {
	position: absolute;
	top: 2px;
	right: 2px;
	bottom: 2px;
	width: 48px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0 6px 6px 0;
	color: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.pps-search .pps-search__icon:focus-visible {
	outline: 2px solid var( --pps-ink );
	outline-offset: -2px;
}

/* Optional text button, when button="..." is set ------------------------ */

.pps-search__row:has( .pps-search__submit ) {
	gap: 8px;
}

.pps-search__row:has( .pps-search__submit ) .pps-search__input {
	padding-right: 12px;
	background-image: none;
}

.pps-search .pps-search__submit {
	flex: 0 0 auto;
	margin: 0;
	padding: 14px 22px;
	background: var( --pps-ink );
	border: 2px solid var( --pps-ink );
	border-radius: var( --pps-radius );
	color: #fff;
	font-family: var( --pps-font );
	font-size: 14px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	line-height: 1.3;
	cursor: pointer;
}

.pps-search .pps-search__submit:hover {
	filter: brightness( 1.25 );
}

/* The results panel ----------------------------------------------------- */

.pps-panel {
	position: absolute;
	top: calc( 100% + 4px );
	left: 0;
	width: 100%;
	z-index: 999;
	max-height: min( 70vh, 520px );
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 15px 20px;
	background: var( --pps-bg );
	border: 2px solid var( --pps-blue );
	border-radius: var( --pps-radius );
	font-family: var( --pps-font );
	text-align: left;
}

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

/* Section headings ------------------------------------------------------ */

.pps-section__label {
	border-bottom: 1px solid var( --pps-rule );
	padding-bottom: 5px;
	margin-top: 10px;
	font-size: 14px;
	color: var( --pps-ink );
	letter-spacing: 1px;
	text-transform: uppercase;
}

.pps-section:first-child .pps-section__label {
	margin-top: 0;
}

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

.pps-hit {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	cursor: pointer;
	/* Negative margins let the hover state reach the panel's edges while the
	   text stays aligned with the original 20px inset. */
	margin: 0 -20px;
	padding: 10px 20px;
	color: var( --pps-body );
	font-size: 15px;
	line-height: 110%;
	text-align: left;
	text-decoration: none;
}

.pps-hit:hover,
.pps-hit.is-active {
	background: var( --pps-hover );
	color: var( --pps-ink );
	text-decoration: none;
}

.pps-hit__body {
	min-width: 0;
}

.pps-hit__name {
	display: block;
	/* Chemical names are dense with digits; tabular figures keep a column of
	   near-identical strings scannable. */
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}

.pps-hit__name em {
	font-style: normal;
	font-weight: 700;
	background: transparent;
	color: var( --pps-ink );
}

.pps-hit__meta {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var( --pps-muted );
	font-variant-numeric: tabular-nums;
}

.pps-hit__dot {
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0 7px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
	opacity: 0.6;
}

.pps-hit__aside {
	flex: 0 0 auto;
	text-align: right;
	white-space: nowrap;
}

.pps-hit__price {
	display: block;
	font-size: 14px;
	color: var( --pps-ink );
	font-variant-numeric: tabular-nums;
}

.pps-hit__stock {
	display: block;
	font-size: 12px;
	color: var( --pps-muted );
}

/* Category shortcuts ---------------------------------------------------- */

.pps-cat {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	margin: 0 -20px;
	padding: 10px 20px;
	color: var( --pps-body );
	font-size: 15px;
	line-height: 110%;
	text-decoration: none;
}

.pps-cat:hover,
.pps-cat.is-active {
	background: var( --pps-hover );
	color: var( --pps-ink );
	text-decoration: none;
}

.pps-cat__count {
	color: var( --pps-muted );
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* See all --------------------------------------------------------------- */

.pps-all {
	display: block;
	cursor: pointer;
	margin: 10px -20px -15px;
	padding: 14px 20px;
	border-top: 1px solid var( --pps-rule );
	color: var( --pps-ink );
	font-size: 14px;
	letter-spacing: 0.6px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
}

.pps-all:hover,
.pps-all.is-active {
	background: var( --pps-hover );
	color: var( --pps-ink );
	text-decoration: none;
}

/* Empty and error states ------------------------------------------------ */

.pps-empty {
	padding: 6px 0;
}

.pps-empty__title {
	margin: 0 0 6px;
	font-size: 15px;
	color: var( --pps-ink );
}

.pps-empty__advice {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.45;
	color: var( --pps-muted );
}

.pps-empty__advice strong {
	color: var( --pps-ink );
	font-variant-numeric: tabular-nums;
}

.pps-empty__link {
	font-size: 14px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var( --pps-ink );
	text-decoration: underline;
}

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

.pps-hit:focus-visible,
.pps-cat:focus-visible,
.pps-all:focus-visible {
	outline: 2px solid var( --pps-blue );
	outline-offset: -2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.pps-panel,
	.pps-hit,
	.pps-cat,
	.pps-all {
		transition: none;
	}
}

/* Narrow screens -------------------------------------------------------- */

@media ( max-width: 600px ) {
	.pps-search {
		width: 100%;
	}

	.pps-search .pps-search__input {
		/* Anything under 16px makes iOS zoom the page on focus. */
		font-size: 16px;
	}

	.pps-panel {
		max-height: 60vh;
		padding: 12px 16px;
	}

	.pps-hit,
	.pps-cat {
		margin: 0 -16px;
		padding: 10px 16px;
	}

	.pps-hit {
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
	}

	.pps-hit__aside {
		text-align: left;
	}

	.pps-all {
		margin: 10px -16px -12px;
		padding: 14px 16px;
	}
}