/*
* Copyright 2014 Seven Spikes Ltd. All rights reserved. (http://www.nop-templates.com)
* http://www.nop-templates.com/t/licensinginfo
*/

span.search-box-text {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
input.search-box-text {
	height: 100%;
}
input.instant-search-busy {
	background: #fff url('images/loader.gif') right center no-repeat !important;
}
.search-box .k-clear-value {
    display: none !important;
}

/* CATEGORY FILTER */

.search-box select {
    display: none;
	width: 100%;
	height: 100%;
	border: none;
	overflow: hidden;
	background-color: #eee;
	padding: 10px 30px 10px 15px;
	line-height: 38px; /*full height minus padding & borders*/
}
.air-theme .search-box select {
	font-size: 14px;
}
.earth-theme .search-box select {
	font-size: 18px;
}

/* AUTOCOMPLETE */

.instantSearch {
	width: calc(100% - 60px) !important;
	height: auto !important;
	margin: 0 0 0 -1px !important;
}
.k-child-animation-container {
    width: 100% !important;
    height: auto !important;
}
.instantSearch .k-list-container {
	position: static !important;
	width: 100% !important;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	background-color: #fff;
}
.instantSearch .k-list-scroller {
    height: 100% !important;
    overflow-y: auto;
}
.instantSearch .k-list-item:first-child:before,
.instantSearch .k-list-item:last-child:after {
	content: "";
	display: block;
	height: 10px;
	background-color: #fff;
	/*pseudo padding, real padding triggers internal scrolling*/
}
/* The rules above target ".instantSearch", a class this file assumes wraps
   the popup - but the rendered markup never actually shows that class
   anywhere on the popup (verified against the live DOM), so those rules may
   simply not be matching anything. A follow-up attempt targeted
   ".k-list-container" directly with a CSS-only position, on the assumption
   it stays nested inside the search form - that also did not hold up: the
   popup came out too wide and ran off-screen, which only makes sense if
   Kendo relocates the widget's actual floating wrapper (a
   `.k-animation-container`) somewhere else in the DOM once opened, sized
   against a much wider ancestor than the form.

   Rather than guess at a THIRD DOM/CSS relationship, positioning is now
   done in JS (Element/Content/scripts/element.js,
   fixInstantSearchDropdownPosition) using Kendo's own documented Popup API,
   which measures the real input and sizes/positions the actual popup
   element it returns - correct regardless of where that element lives in
   the DOM. This block is left with appearance only: no shadow (explicitly
   requested), a plain border instead for definition against the page
   behind it. Covers every candidate wrapper so it applies regardless of
   which one turns out to be real. */
.k-list-container,
.instantSearch .k-list-container,
.instantSearch,
.k-animation-container,
.k-child-animation-container {
	box-shadow: none !important;
	/* backstop in case the JS positioning below ever computes something too
	   wide (or runs before the width is applied) - box-sizing so the border
	   added just below is included in that cap, not added on top of it */
	max-width: 100vw !important;
	box-sizing: border-box !important;
}
.k-list-container {
	border: 1px solid #eee;
	background-color: #fff;
}
/* Rebuilt as a single-row flex layout: a small fixed-size thumbnail beside a
   truncated one-line title/sku and the price, instead of the old
   float:left image + margin-left text approach, which was fragile (broke
   down into a stacked, oversized-image layout under the wrong conditions)
   and let long product names wrap across 2-3 lines, making every result row
   tall and bulky. This version can't do either: the thumbnail has a fixed
   box regardless of its image's own dimensions, and text-overflow:ellipsis
   keeps every row to one compact line. */
.instant-search-item {
	overflow: hidden;
	padding: 8px 20px;
	cursor: pointer;
}
/* the template wraps img-block/detail in an <a> - that anchor, not
   .instant-search-item itself, is their real flex parent. Putting display:flex
   on the wrong element left img-block and detail as ordinary block children of
   a non-flex <a>, so they stacked (image on top, text below) instead of
   sitting in a row - exactly the "cut off" broken look reported.
   align-items: flex-start (not center): titles are allowed to wrap to more
   than one line below, and top-aligning against the fixed-size thumbnail
   looks right regardless of how many lines that ends up being, where
   vertical centering would not. */
.instant-search-item > a {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	text-decoration: none;
	max-width: 100%;
}
.k-hover .instant-search-item,
.k-focus .instant-search-item  {
	background: #f6f6f6;
}
.instant-search-item .img-block {
	position: relative;
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	overflow: hidden;
}
.instant-search-item .img-block img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}
.instant-search-item .detail {
	flex: 1 1 auto;
	/* the row's real width limit is the popup's own max-width (set on
	   .k-list-container below) - this only needs to give up growing past
	   whatever space the thumbnail+gap leave it, so text wraps within the
	   row instead of pushing it wider */
	min-width: 0;
	max-width: 100%;
	text-align: left;
	line-height: 1.35;
}
.instant-search-item .title,
.instant-search-item .sku {
	/* smaller, and allowed to wrap to a second/third line instead of being
	   cut off with an ellipsis - long product names (torx sizes, hinge
	   codes) lose meaning when truncated */
	overflow: visible;
	white-space: normal;
	word-break: break-word;
}
.instant-search-item .title {
	margin: 0 0 2px;
	text-transform: uppercase;
	color: #555;
}
.air-theme .instant-search-item .title {
	font-size: 12px;
}
.earth-theme .instant-search-item .title {
	font-size: 13px;
	font-weight: 400;
}
.air-theme .instant-search-item .sku {
    font-size: 11px;
}
.earth-theme .instant-search-item .sku {
    font-size: 12px;
}
.instant-search-item .price {
	margin: 2px 0 0;
	white-space: nowrap; /* the one line that should NOT wrap */
}
.air-theme .instant-search-item .price {
	font-size: 13px;
	font-weight: 700;
	color: #eda187;
}
.earth-theme .instant-search-item .price {
	font-size: 13px;
	font-weight: 400;
	color: #007c5a;
}



@media all and (max-width: 480px) {

.instantSearch {
	width: 100% !important;
}

}

@media all and (min-width: 481px) {

span.search-box-text.narrow {
	float: right;
	width: 60%;
}
.search-box select {
	display: block;
	float: left;
	width: 40%;
}

}

@media all and (max-width: 720px) {
	
.instantSearch.resize {
	left: 0 !important;
	width: 100% !important;
}

}

@media all and (min-width: 721px) {
	
.instantSearch.resize {
	width: calc(60% - 60px) !important;
}

}

@media all and (min-width: 1025px) {

.search-option-enabled form {
	width: 900px;
}
span.search-box-text.narrow {
	width: 65%;
}
.search-box select {
	width: 35%;
}
.air-theme.variant-2 .static span.search-box-text.narrow {
	width: 75%;
}
.air-theme.variant-2 .search-box.static select {
	width: 25%;
}
.air-theme .search-box select {
	font-size: 17px;
}
.earth-theme .search-box select {
	font-size: 20px;
}

.instantSearch {
	top: 78px !important;
	width: 100% !important;
	margin: 0 !important;
}
.instantSearch.resize {
	width: 65% !important;
}
.air-theme.variant-2 .static .instantSearch {
	top: 59px !important;
	width: calc(100% - 60px) !important;
	margin: 0 0 0 -1px !important;
}
.air-theme.variant-2 .static .instantSearch.resize {
	width: calc(75% - 60px) !important;
}

}