/* Vres Live Search — self-contained so it survives being dropped into any theme. */


.vreslivesearch {
	position: relative;
	width: 100%;
	font-size: 14px;
	/* A small vertical nudge so the box lines up with whatever the theme puts
	   beside it in the header; negative moves it up. */
	margin-top: var(--vreslivesearch-offset-y);

	/* Every themed value is a custom property with the shipped default as its
	   fallback, so the admin can override any subset of them inline without the
	   stylesheet needing to be regenerated or the cache busted. */
	--vreslivesearch-accent: #e30613;
	--vreslivesearch-accent-glow: rgba(227, 6, 19, .10);
	--vreslivesearch-highlight: #e30613;
	--vreslivesearch-price: #1a1a1a;
	--vreslivesearch-border: #dddddd;
	--vreslivesearch-radius-input: 24px;
	--vreslivesearch-radius-panel: 6px;
	--vreslivesearch-panel-width: 940px;
	--vreslivesearch-icon-size: 18px;
	--vreslivesearch-icon-color: #ffffff;
	--vreslivesearch-icon-hover: #ffffff;
	--vreslivesearch-icon-bg: var(--vreslivesearch-accent);
	--vreslivesearch-icon-bg-hover: var(--vreslivesearch-accent);
	--vreslivesearch-bg: #ffffff;
	--vreslivesearch-text: #222222;
	--vreslivesearch-input-padding: 11px;
	--vreslivesearch-font-size: 15px;
	--vreslivesearch-offset-y: 0px;
}

/* ----------------------------------------------------------------- input */

.vreslivesearch-box {
	position: relative;
	display: flex;
	align-items: stretch;
	background: var(--vreslivesearch-bg);
	border: 2px solid var(--vreslivesearch-border);
	border-radius: var(--vreslivesearch-radius-input);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.vreslivesearch-box:focus-within,
.vreslivesearch-box.is-open {
	border-color: var(--vreslivesearch-accent);
	box-shadow: 0 0 0 3px var(--vreslivesearch-accent-glow);
}

/* Two classes on purpose: themes style every text field (Journal 2:
   'input[type="text"] { background: white; border: 1px solid; padding; width:
   100% }', specificity 0,1,1), which beat a single class and painted the field
   white inside a coloured box. 0,2,0 wins without !important. */
.vreslivesearch .vreslivesearch-input {
	flex: 1 1 auto;
	width: auto;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	min-width: 0;
	border: 0;
	padding: var(--vreslivesearch-input-padding) 10px;
	font-size: var(--vreslivesearch-font-size);
	/* 'normal', not a number: browsers centre the text of an input vertically
	   on their own only with the normal line height. 1.45 pushed it off-centre
	   once Journal 2 fixed the box at 40px with no vertical padding. */
	line-height: normal;
	outline: none;
	color: var(--vreslivesearch-text);
	background: transparent;
}

.vreslivesearch-clear,
.vreslivesearch-submit {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--vreslivesearch-text);
	opacity: .5;
	padding: 0 14px;
	font-size: 20px;
	line-height: 1;
}

.vreslivesearch-clear:hover { opacity: 1; }

.vreslivesearch-voice {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--vreslivesearch-text);
	opacity: .55;
	padding: 0 12px;
	font-size: calc(var(--vreslivesearch-icon-size) + 2px);
	line-height: 1;
}

.vreslivesearch-voice:hover { opacity: 1; }

/* Listening: the accent colour and a slow pulse, so it is obvious the microphone
   is open. */
.vreslivesearch-voice.is-listening {
	opacity: 1;
	color: var(--vreslivesearch-accent);
	animation: vreslivesearch-pulse 1.2s ease-in-out infinite;
}

@keyframes vreslivesearch-pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.18); }
}

.vreslivesearch-submit { opacity: 1; }

.vreslivesearch-submit {
	background: var(--vreslivesearch-icon-bg);
	color: var(--vreslivesearch-icon-color);
	font-size: var(--vreslivesearch-icon-size);
	padding: 0 20px;
	transition: background-color .15s ease, color .15s ease;
}

.vreslivesearch-submit:hover {
	background: var(--vreslivesearch-icon-bg-hover);
	color: var(--vreslivesearch-icon-hover);
}

/* The glyphs take their size from the button, i.e. from the icon-size setting.
   Font Awesome 4 hard-codes 14px on .fa, and Journal 2 repeats it as
   '.oc2 .fa { font-size: 14px }' (0,2,0), so without this the setting changed
   the button and never the icon. Three classes outrank both. */
.vreslivesearch-box .vreslivesearch-submit .fa,
.vreslivesearch-box .vreslivesearch-voice .fa {
	font-size: inherit;
	line-height: 1;
}

/* Flex order moves the button without reordering the markup, so the input keeps
   its place in the tab sequence and screen readers still read label then field. */
.vreslivesearch-box.vreslivesearch-icon-left .vreslivesearch-submit { order: -1; }

/* Square button: as wide as the box is tall, whatever the theme makes that
   height. aspect-ratio follows the stretched height of a flex item; browsers
   without it (Safari before 15) keep the ordinary padded button rather than
   collapsing to the width of the glyph. */
@supports (aspect-ratio: 1 / 1) {
	.vreslivesearch-box.vreslivesearch-icon-square .vreslivesearch-submit {
		aspect-ratio: 1 / 1;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* A plain icon sits inside the field rather than beside it, so it should not
   carry the button's horizontal padding. */
.vreslivesearch-box.vreslivesearch-icon-plain .vreslivesearch-submit { padding: 0 14px; }

/* Bottom rule only: the box loses its outline and its rounding, because a
   rounded corner with no side borders reads as a mistake. */
.vreslivesearch-box.vreslivesearch-border-bottom {
	border: 0;
	border-bottom: 2px solid var(--vreslivesearch-border);
	border-radius: 0;
}

.vreslivesearch-box.vreslivesearch-border-bottom:focus-within,
.vreslivesearch-box.vreslivesearch-border-bottom.is-open {
	border-bottom-color: var(--vreslivesearch-accent);
	box-shadow: none;
}

.vreslivesearch-box.vreslivesearch-border-none {
	border: 0;
	box-shadow: none;
}

.vreslivesearch-box.vreslivesearch-border-none:focus-within,
.vreslivesearch-box.vreslivesearch-border-none.is-open { box-shadow: none; }

.vreslivesearch .vreslivesearch-input::placeholder {
	color: var(--vreslivesearch-text);
	opacity: .45;
}

/* ----------------------------------------------------------------- panel */

/* Attached to a theme's own search field: the root is not a box in the layout
   any more but an overlay laid exactly over that field, positioned from its
   bounding box by the JS. It must not swallow clicks meant for the field
   underneath it, so only the panel takes pointer events. The offset nudge is for
   the widget's own input and has nothing to align with here. */
.vreslivesearch.vreslivesearch-attached {
	position: absolute;
	z-index: 1000;
	margin-top: 0;
	pointer-events: none;
}

.vreslivesearch.vreslivesearch-attached .vreslivesearch-panel {
	pointer-events: auto;
}

.vreslivesearch-panel {
	position: absolute;
	z-index: 1000;
	top: calc(100% + 8px);
	/* The panel is deliberately wider than the input — two columns need the room —
	   so it is centred on the input rather than hung from its left edge, which
	   would push it off the right of the page. */
	left: 50%;
	/* The shift is measured in JS and is zero until something is actually about to
	   run off the edge of the page; see clampPanel. */
	transform: translateX(calc(-50% + var(--vreslivesearch-panel-shift, 0px)));
	width: var(--vreslivesearch-panel-width);
	max-width: 94vw;
	max-height: 78vh;
	/* The lists scroll inside .vreslivesearch-scroll; the footer below them stays
	   put. The script shows the panel by clearing its inline display, which hands
	   it back to this flex. */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: var(--vreslivesearch-radius-panel);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .16);
	text-align: left;
}

.vreslivesearch-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.vreslivesearch-footer {
	flex: 0 0 auto;
	border-top: 1px solid #eee;
	background: #fff;
}

.vreslivesearch-footer .vreslivesearch-all {
	padding: 13px 26px;
}

.vreslivesearch-loading {
	padding: 10px 20px;
	color: #999;
	font-size: 12px;
}

.vreslivesearch-cols {
	display: flex;
	align-items: flex-start;
}

.vreslivesearch-col {
	flex: 1 1 0;
	min-width: 0;
	padding: 14px 20px 18px;
}

.vreslivesearch-col-main { flex: 1.15 1 0; }

.vreslivesearch-col-side {
	flex: 1 1 0;
	border-left: 1px solid #eee;
	align-self: stretch;
}

/* Every section is spaced from the one above, and the first in its column has
   that space removed. The adjacent-sibling form ('.vreslivesearch-section + .vreslivesearch-section')
   cannot be used: each conditional section is cloned from a <template> that stays
   in the page next to it, so no two sections are ever truly adjacent. */
.vreslivesearch-section { margin-top: 10px; }
.vreslivesearch-col-side > .vreslivesearch-section:first-of-type { margin-top: 0; }

.vreslivesearch-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: 12px;
	padding-bottom: 8px;
	margin-bottom: 6px;
	border-bottom: 1px solid #e8e8e8;
	font-size: 15px;
	font-weight: 700;
	color: #1a1a1a;
}

/* Every row is a button for keyboard and screen-reader semantics, so the default
   button chrome has to be stripped back to nothing. */
.vreslivesearch-product,
.vreslivesearch-term,
.vreslivesearch-facet,
.vreslivesearch-all {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	color: #222;
	font: inherit;
}

/* ------------------------------------------------------------- products */

.vreslivesearch-product {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 12px 6px;
	border-bottom: 1px solid #f2f2f2;
}

.vreslivesearch-product.is-active { background: #fafafa; }

.vreslivesearch-thumb-wrap {
	flex: 0 0 auto;
	width: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vreslivesearch-thumb {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.vreslivesearch-info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.vreslivesearch-name {
	font-size: 14px;
	line-height: 1.4;
	color: var(--vreslivesearch-name, #1a1a1a);
}

.vreslivesearch-brand {
	font-size: 13px;
	font-style: italic;
	color: var(--vreslivesearch-accent);
}

.vreslivesearch-price {
	font-size: 15px;
	font-weight: 700;
	color: var(--vreslivesearch-price);
}

.vreslivesearch-was {
	font-weight: 400;
	font-size: 12px;
	color: #999;
	text-decoration: line-through;
	margin-right: 6px;
}

.vreslivesearch-now { color: var(--vreslivesearch-accent); }

/* The searched-for words, marked server side. */
.vreslivesearch-name em,
.vreslivesearch-term em {
	font-style: italic;
	font-weight: 600;
	color: var(--vreslivesearch-highlight);
}

.vreslivesearch-all {
	padding: 14px 6px 2px;
	font-weight: 700;
	color: #1a1a1a;
}

.vreslivesearch-all:hover { color: var(--vreslivesearch-accent); }

.vreslivesearch-chevron {
	margin-left: 6px;
	font-size: 18px;
	line-height: 1;
}

/* ------------------------------------------------- terms and facets */

.vreslivesearch-term {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 7px 6px;
	line-height: 1.4;
}

.vreslivesearch-term.is-active,
.vreslivesearch-term:hover,
.vreslivesearch-facet.is-active,
.vreslivesearch-facet:hover { background: #fafafa; }

.vreslivesearch-arrow {
	flex: 0 0 auto;
	color: #bbb;
	font-size: 12px;
}

.vreslivesearch-em {
	font-style: italic;
	color: var(--vreslivesearch-highlight);
}

.vreslivesearch-facet {
	padding: 8px 6px;
	line-height: 1.35;
}

.vreslivesearch-facet-name {
	display: block;
	font-size: 14px;
	color: #1a1a1a;
}

.vreslivesearch-count {
	color: #999;
	font-weight: 400;
	margin-left: 4px;
}

/* The breadcrumb is what tells two identically named categories apart when the
   dropdown shows no other page context. */
.vreslivesearch-path {
	display: block;
	font-size: 11.5px;
	font-style: italic;
	color: #aaa;
	line-height: 1.35;
	margin-top: 2px;
}

.vreslivesearch-empty {
	padding: 22px 20px 52px;
	color: #777;
	text-align: center;
}

.vreslivesearch-empty p { margin: 0; }

.vreslivesearch-link {
	border: 0;
	background: none;
	padding: 0;
	color: #888;
	cursor: pointer;
	font-size: 12px;
	font-weight: 400;
	text-decoration: underline;
}

/* ------------------------------------------------------------ responsive */

/* ------------------------------------------------------------ responsive */

/* Below the panel's natural width there is no room for two columns, so they
   stack. The panel stays absolutely positioned and centred on the input — an
   earlier attempt used position:fixed with top:auto, which resolves to the
   element's static position and put the panel in the wrong place. */
@media (max-width: 991px) {
	.vreslivesearch-panel {
		width: 94vw;
		max-height: 72vh;
	}

	.vreslivesearch-cols { flex-direction: column; }

	.vreslivesearch-col { padding: 12px 16px 14px; }

	.vreslivesearch-col-side {
		border-left: 0;
		border-top: 1px solid #eee;
		width: 100%;
	}
}

@media (max-width: 575px) {
	.vreslivesearch .vreslivesearch-input {
		font-size: 16px; /* below 16px iOS zooms the page on focus */
		padding: 10px 8px;
	}

	.vreslivesearch-magnifier { padding-left: 12px; }
	.vreslivesearch-submit { padding: 0 14px; }

	.vreslivesearch-panel { max-height: 68vh; }

	.vreslivesearch-col { padding: 10px 12px 12px; }

	.vreslivesearch-product {
		gap: 10px;
		padding: 10px 4px;
	}

	.vreslivesearch-thumb-wrap { width: 56px; }

	.vreslivesearch-head { font-size: 14px; }
	.vreslivesearch-name { font-size: 13.5px; }
	.vreslivesearch-price { font-size: 14px; }
}

/* Panel fade. The script shows and hides the panel with an inline display; the
   fade in replays every time it stops being display: none, and the fade out runs
   while the script keeps it on screen for the same 120ms. */
.vreslivesearch-panel { animation: vreslivesearch-fade-in .12s ease; }
.vreslivesearch-panel.is-leaving { opacity: 0; transition: opacity .12s ease; }

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

@media (prefers-reduced-motion: reduce) {
	.vreslivesearch-panel { animation: none; }
	.vreslivesearch-panel.is-leaving { transition: none; }
	.vreslivesearch-voice.is-listening { animation: none; }
}

/* Layout: one column. Results are products only (the script drops the other
   lists); before typing, the side lists stack under the products. */
.vreslivesearch-layout-one .vreslivesearch-cols { flex-direction: column; }

.vreslivesearch-layout-one .vreslivesearch-col { width: 100%; }

.vreslivesearch-layout-one .vreslivesearch-col-side {
	border-left: 0;
	border-top: 1px solid #eee;
}

/* Width: same as the box. Hung from the box's left edge at its exact width,
   so the centring transform and the fixed pixel width no longer apply (also
   over the narrow-screen rule, which this selector outranks). */
.vreslivesearch-size-field .vreslivesearch-panel {
	left: 0;
	width: 100%;
	max-width: none;
	transform: none;
}

/* Journal 2 gives its search slot (.journal-search) a fixed height, 40px on
   desktop and mobile alike, with the cart button beside it at the same height.
   A box sized from its own padding came out 43-44px and overflowed the slot.
   Here the box fills the slot exactly and the text is centred, so the vertical
   part of the input-padding setting does not apply on this theme. The
   min-height only matters if a Journal setup ever leaves the slot unsized. */
.vreslivesearch-theme-journal2,
.vreslivesearch-theme-journal2 .vreslivesearch-box {
	height: 100%;
}

.vreslivesearch-theme-journal2 .vreslivesearch-box {
	min-height: 34px;
}

.vreslivesearch-theme-journal2 .vreslivesearch-box .vreslivesearch-input {
	padding-top: 0;
	padding-bottom: 0;
}