/**
 * VICTOR BROWN STUDIO — CODEX APPLE SEARCH FIX
 * Updated: 12 August 2026 — Version 1.0.6
 *
 * Scope: only .vbs-shop-search and .vbs-results-search after JavaScript has
 * enhanced them. Existing theme and Additional CSS rules remain unchanged.
 */

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced,
.vbs-results-search.vbs-codex-search-enhanced {
	--vbs-codex-search-ink: #212223;
	--vbs-codex-search-line: #d9d9d9;
	--vbs-codex-search-surface: #ffffff;
}

/* The Shop Header showed the grey sibling strip across devices. Apply its
 * approved surface everywhere, but keep the Search Results surface correction
 * isolated to physical iPhones, where that second field showed the issue. */
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced:not(.wp-block-search__searchfield-hidden)
.wp-block-search__inside-wrapper,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__inside-wrapper {
	background: var(--vbs-codex-search-surface) !important;
	background-color: var(--vbs-codex-search-surface) !important;
	background-image: none !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced:not(.wp-block-search__searchfield-hidden)
.wp-block-search__input,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__input {
	background: var(--vbs-codex-search-surface) !important;
	background-color: var(--vbs-codex-search-surface) !important;
	background-image: none !important;
}

/* Version 1.0.6 — iPhone text-entry surface only. Version 1.0.5 made this
 * layer transparent, but that allowed Safari's internal search/autofill paint
 * to remain visible as a lighter shade. Paint the input with the exact shared
 * surface instead, including every Safari interaction and autofill state. */
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls:not(.wp-block-search__searchfield-hidden)
.wp-block-search__input,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls:not(.wp-block-search__searchfield-hidden)
.wp-block-search__input:hover,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls:not(.wp-block-search__searchfield-hidden)
.wp-block-search__input:focus,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls:not(.wp-block-search__searchfield-hidden)
.wp-block-search__input:active,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls:not(.wp-block-search__searchfield-hidden)
.wp-block-search__input:-webkit-autofill,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls:not(.wp-block-search__searchfield-hidden)
.wp-block-search__input:-webkit-autofill:hover,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls:not(.wp-block-search__searchfield-hidden)
.wp-block-search__input:-webkit-autofill:focus,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls:not(.wp-block-search__searchfield-hidden)
.wp-block-search__input:-webkit-autofill:active,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__input,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__input:hover,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__input:focus,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__input:active,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__input:-webkit-autofill,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__input:-webkit-autofill:hover,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__input:-webkit-autofill:focus,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__input:-webkit-autofill:active {
	background: var(--vbs-codex-search-surface) !important;
	background-color: var(--vbs-codex-search-surface) !important;
	background-image: none !important;
	-webkit-text-fill-color: var(--vbs-codex-search-ink) !important;
	caret-color: var(--vbs-codex-search-ink) !important;
	color: var(--vbs-codex-search-ink) !important;
	opacity: 1 !important;
	filter: none !important;
	-webkit-filter: none !important;
	/* This inset layer covers Safari's private search/autofill surface without
	 * changing the input's dimensions, spacing, clear X or submit geometry. */
	box-shadow: 0 0 0 1000px var(--vbs-codex-search-surface) inset !important;
	-webkit-box-shadow: 0 0 0 1000px var(--vbs-codex-search-surface) inset !important;
}

/* Remove the remaining WebKit search-field decoration layer. The plugin's
 * accessible clear button continues to provide the complete X behaviour. */
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__input::-webkit-search-decoration,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__input::-webkit-search-decoration {
	display: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

/* Use the custom clear control consistently instead of browser-specific Xs. */
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
.wp-block-search__input::-webkit-search-cancel-button,
.vbs-results-search.vbs-codex-search-enhanced
.wp-block-search__input::-webkit-search-cancel-button {
	display: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
.wp-block-search__input::-ms-clear,
.vbs-results-search.vbs-codex-search-enhanced
.wp-block-search__input::-ms-clear {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}

/* Preserve the existing outer field size while making room for the clear X. */
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced:not(.wp-block-search__searchfield-hidden)
.wp-block-search__input,
.vbs-results-search.vbs-codex-search-enhanced
.wp-block-search__input {
	display: block !important;
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	padding-right: 12px !important;
}

/* iOS Safari zooms focused form fields whose rendered font is below 16px. */
@supports (-webkit-touch-callout: none) {
	.vbs-header-final.vbs-shop-header
	.vbs-shop-search.vbs-codex-search-enhanced
	.wp-block-search__input,
	.vbs-results-search.vbs-codex-search-enhanced
	.wp-block-search__input {
		font-size: 16px !important;
		-webkit-appearance: none !important;
		appearance: none !important;
	}
}

/* Accessible custom clear button. Flex alignment avoids Apple's native
 * cancel-button positioning differences on iPhone and iPad. */
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear,
.vbs-results-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	display: inline-flex !important;
	align-self: center !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 22px !important;
	width: 22px !important;
	min-width: 22px !important;
	max-width: 22px !important;
	height: 22px !important;
	min-height: 22px !important;
	max-height: 22px !important;
	/* Keep the same 34px total horizontal space while moving the circle four
	 * pixels left from the original position (two more than Version 1.0.4). */
	margin: 0 12px 0 0 !important;
	padding: 0 !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	border: 1px solid var(--vbs-codex-search-line) !important;
	border-radius: 50% !important;
	outline: 0 !important;
	/* Match the approved field surface so the panel colour cannot show through
	 * around the circle. Change the shared surface variable if the field colour
	 * is intentionally redesigned later. */
	background: var(--vbs-codex-search-surface) !important;
	background-color: var(--vbs-codex-search-surface) !important;
	color: var(--vbs-codex-search-ink) !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	-webkit-tap-highlight-color: transparent !important;
	/* A restrained 1px optical correction aligns the circle with the
	 * magnifier without changing the flex layout or click target. */
	transform: translateY(1px) !important;
	line-height: 1 !important;
	cursor: pointer;
}

/* Physical iPhone visual shells. The real buttons remain in exactly the same
 * flex positions and retain every event listener; only their Safari-painted
 * contents are hidden behind neutral, pointer-transparent sibling visuals. */
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__inside-wrapper,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__inside-wrapper {
	position: relative !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.vbs-codex-search-clear,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.vbs-codex-search-clear {
	opacity: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.vbs-codex-search-clear-visual,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.vbs-codex-search-clear-visual {
	position: relative !important;
	display: inline-flex !important;
	align-self: center !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 22px !important;
	width: 22px !important;
	min-width: 22px !important;
	max-width: 22px !important;
	height: 22px !important;
	min-height: 22px !important;
	max-height: 22px !important;
	/* Zero net flex width: the invisible functional button continues to own
	 * the approved spacing while this shell follows its new left position. */
	margin: 0 -22px 0 0 !important;
	padding: 0 !important;
	border: 1px solid var(--vbs-codex-search-line) !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	transform: translateY(1px) !important;
	line-height: 1 !important;
	pointer-events: none !important;
	z-index: 2 !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.vbs-codex-search-clear-visual[hidden],
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.vbs-codex-search-clear-visual[hidden] {
	display: none !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button > svg,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button > svg {
	opacity: 0 !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button {
	opacity: 0 !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.vbs-codex-search-submit-visual,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.vbs-codex-search-submit-visual {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--vbs-codex-search-submit-width, 52px) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	color: var(--vbs-codex-search-ink) !important;
	pointer-events: none !important;
	z-index: 2 !important;
}

/* The real divider belongs to the invisible button on iPhone. Reproduce only
 * that short line on the neutral non-button visual shell. */
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls:not(.wp-block-search__searchfield-hidden)
.vbs-codex-search-submit-visual::before,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.vbs-codex-search-submit-visual::before {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	display: block !important;
	width: 1px !important;
	height: 24px !important;
	background: var(--vbs-codex-search-line) !important;
	transform: translateY(-50%) !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.vbs-codex-search-submit-visual svg,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.vbs-codex-search-submit-visual svg {
	display: block !important;
	width: var(--vbs-codex-search-icon-width, 24px) !important;
	height: var(--vbs-codex-search-icon-height, 24px) !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	fill: currentColor !important;
	/* Preserve each form's original WordPress/icon transform as captured before
	 * the iPhone-only native button layer is neutralised. */
	transform: var(--vbs-codex-search-icon-transform, none) !important;
	transform-origin: center !important;
}

/* Physical iPhones: retain WordPress's original magnifier and remove only the
 * WebKit/theme control surfaces that appeared as grey or white boxes. The
 * existing button, SVG, divider and submission listeners remain untouched. */
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__inside-wrapper,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
.wp-block-search__inside-wrapper {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: var(--vbs-codex-search-surface) !important;
	background-color: var(--vbs-codex-search-surface) !important;
	background-image: none !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

/* On iPhone the clear control must show only its circle and X. Let the
 * already-normalised field surface beneath it provide the surrounding colour. */
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.vbs-codex-search-clear,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.vbs-codex-search-clear {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	filter: none !important;
	-webkit-filter: none !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button:hover,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button:focus,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button:active,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button:hover,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button:focus,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	filter: none !important;
	-webkit-filter: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button::after,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button::after {
	content: none !important;
	display: none !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button svg,
.vbs-results-search.vbs-codex-search-enhanced.vbs-codex-iphone-search-controls
button.wp-block-search__button svg {
	display: block !important;
	overflow: visible !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	filter: none !important;
	-webkit-filter: none !important;
	/* The old site rule transformed this SVG. Removing that transform only on
	 * physical iPhones prevents WebKit from compositing it onto a white tile. */
	transform: none !important;
}

/* Some theme/browser button rules use a generated layer for button fills.
 * Reset both layers as well as the button itself so the clear control remains
 * only a transparent circled X in the Shop Header and Search Results form. */
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear::before,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear::after,
.vbs-results-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear::before,
.vbs-results-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear::after {
	content: none !important;
	display: none !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear[hidden],
.vbs-results-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear[hidden] {
	display: none !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
.vbs-codex-search-clear__glyph,
.vbs-results-search.vbs-codex-search-enhanced
.vbs-codex-search-clear__glyph {
	position: relative;
	display: block;
	width: 9px;
	height: 9px;
	pointer-events: none;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
.vbs-codex-search-clear__glyph::before,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
.vbs-codex-search-clear__glyph::after,
.vbs-results-search.vbs-codex-search-enhanced
.vbs-codex-search-clear__glyph::before,
.vbs-results-search.vbs-codex-search-enhanced
.vbs-codex-search-clear__glyph::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 0;
	width: 9px;
	height: 1px;
	background: var(--vbs-codex-search-ink);
	transform-origin: center;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
.vbs-codex-search-clear__glyph::before,
.vbs-results-search.vbs-codex-search-enhanced
.vbs-codex-search-clear__glyph::before {
	transform: rotate(45deg);
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
.vbs-codex-search-clear__glyph::after,
.vbs-results-search.vbs-codex-search-enhanced
.vbs-codex-search-clear__glyph::after {
	transform: rotate(-45deg);
}

/* Remove browser-applied white button boxes while retaining the divider. */
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
button.wp-block-search__button,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
button.wp-block-search__button:hover,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
button.wp-block-search__button:focus,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
button.wp-block-search__button:active,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button:hover,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button:focus,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--vbs-codex-search-ink) !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

/* Short, vertically centred divider retained even while the clear X is hidden.
 * A pseudo-element avoids the full-height inset line produced by box-shadow. */
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced:not(.wp-block-search__searchfield-hidden)
button.wp-block-search__button,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced:not(.wp-block-search__searchfield-hidden)
button.wp-block-search__button:hover,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced:not(.wp-block-search__searchfield-hidden)
button.wp-block-search__button:focus,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced:not(.wp-block-search__searchfield-hidden)
button.wp-block-search__button:active,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button:hover,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button:focus,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button:active {
	position: relative !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced:not(.wp-block-search__searchfield-hidden)
button.wp-block-search__button::before,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button::before {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 0 !important;
	display: block !important;
	width: 1px !important;
	height: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: var(--vbs-codex-search-line) !important;
	background-color: var(--vbs-codex-search-line) !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
button.wp-block-search__button svg,
.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
button.wp-block-search__button path,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button svg,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button path {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
}

/* Search Results submission-state lock. Fixed flex bases and suppressed
 * interaction animations prevent the brief phone shift and tablet X scaling
 * while preserving the buttons' click, focus and submit behaviour. */
.vbs-results-search.vbs-codex-search-enhanced
.wp-block-search__inside-wrapper,
.vbs-results-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear,
.vbs-results-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear:hover,
.vbs-results-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear:focus,
.vbs-results-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear:active,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button:hover,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button:focus,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button:active {
	animation: none !important;
	transition: none !important;
}

.vbs-results-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear,
.vbs-results-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear:hover,
.vbs-results-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear:focus,
.vbs-results-search.vbs-codex-search-enhanced
button.vbs-codex-search-clear:active {
	flex-basis: 22px !important;
	width: 22px !important;
	min-width: 22px !important;
	max-width: 22px !important;
	height: 22px !important;
	min-height: 22px !important;
	max-height: 22px !important;
	transform: translateY(1px) !important;
}

.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button:hover,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button:focus,
.vbs-results-search.vbs-codex-search-enhanced
button.wp-block-search__button:active {
	flex-shrink: 0 !important;
	flex-basis: var(--vbs-codex-search-submit-width, 52px) !important;
	width: var(--vbs-codex-search-submit-width, 52px) !important;
	min-width: var(--vbs-codex-search-submit-width, 52px) !important;
	max-width: var(--vbs-codex-search-submit-width, 52px) !important;
	-webkit-transform: none !important;
	transform: none !important;
}

/* Keep an accessible keyboard-focus indication without creating a touch box. */
@media (hover: hover) and (pointer: fine) {
	.vbs-header-final.vbs-shop-header
	.vbs-shop-search.vbs-codex-search-enhanced
	button.vbs-codex-search-clear:focus-visible,
	.vbs-results-search.vbs-codex-search-enhanced
	button.vbs-codex-search-clear:focus-visible,
	.vbs-header-final.vbs-shop-header
	.vbs-shop-search.vbs-codex-search-enhanced
	button.wp-block-search__button:focus-visible,
	.vbs-results-search.vbs-codex-search-enhanced
	button.wp-block-search__button:focus-visible {
		outline: 1px solid var(--vbs-codex-search-ink) !important;
		outline-offset: 2px !important;
	}
}

/* Trigger value-state refresh when WebKit autofills a saved search. */
@keyframes vbs-codex-search-autofill {
	from { opacity: 0.999; }
	to { opacity: 1; }
}

.vbs-header-final.vbs-shop-header
.vbs-shop-search.vbs-codex-search-enhanced
.wp-block-search__input:-webkit-autofill,
.vbs-results-search.vbs-codex-search-enhanced
.wp-block-search__input:-webkit-autofill {
	animation-name: vbs-codex-search-autofill;
	animation-duration: 0.01s;
}