/**
 * The search panel.
 *
 * It appears inside somebody else's theme, so it inherits the font and takes
 * one colour from the shop (Settings → accent). Everything else is neutral on
 * purpose. Sizes follow the mobile research: 16 px in the field so iOS does
 * not zoom, rows of at least 44 px, nothing in the panel but suggestions,
 * the model box and a few products.
 */

.ownsearch {
	--os-accent: #2f6fb3;
	--os-bg: #fff;
	--os-ink: #1f2328;
	--os-muted: #5f6b76;
	--os-line: #e6e9ec;
	--os-soft: #f3f5f7;
	--os-hover: #eef2f6;
	--os-sale: #b42318;
	--os-badge: var(--os-accent);
	--os-star: #f2a900;
	--os-badge-ink: #fff;
	position: fixed;
	z-index: 2147483000;
	box-sizing: border-box;
	background: var(--os-bg);
	color: var(--os-ink);
	font: inherit;
	font-size: 15px;
	line-height: 1.35;
	text-align: left;
	border: 1px solid var(--os-line);
	border-radius: 12px;
	box-shadow: 0 18px 48px rgba( 15, 23, 42, 0.16 );
	display: flex;
	flex-direction: column;
	max-height: min( 78vh, 680px );
	overflow: hidden;
}

.ownsearch[hidden] { display: none; }

.ownsearch *,
.ownsearch *::before,
.ownsearch *::after { box-sizing: border-box; }

.ownsearch button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	cursor: pointer;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	min-height: 0;
	line-height: inherit;
}

.ownsearch a { color: inherit; text-decoration: none; }

/* --------------------------------------------------------------------------
   Phone: the whole screen, with its own field.
   -------------------------------------------------------------------------- */

.ownsearch-bar { display: none; }

.ownsearch.is-phone {
	inset: 0;
	max-height: none;
	height: 100%;
	height: 100dvh;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.ownsearch.is-phone .ownsearch-bar,
.ownsearch.is-standalone .ownsearch-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	padding-top: calc( 10px + env( safe-area-inset-top, 0px ) );
	border-bottom: 1px solid var(--os-line);
	margin: 0;
}

.ownsearch-bar__field {
	position: relative;
	flex: 1;
	min-width: 0;
}

.ownsearch .ownsearch-field {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 40px 0 14px;
	font: inherit;
	font-size: 16px;
	color: var(--os-ink);
	background: var(--os-soft);
	border: 1.5px solid var(--os-accent);
	border-radius: 10px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

.ownsearch-field::-webkit-search-cancel-button { display: none; }

.ownsearch .ownsearch-clear {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY( -50% );
	width: 36px;
	height: 36px;
	font-size: 22px;
	color: var(--os-muted);
	display: none;
}

.ownsearch.has-text .ownsearch-clear { display: block; }

.ownsearch .ownsearch-close {
	flex: none;
	min-height: 44px;
	padding: 0 4px;
	font-size: 15px;
	color: var(--os-accent);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Desktop: a full-width layer from the top of the window, over the header,
   the page behind dimmed and still. Content in a centred column.
   -------------------------------------------------------------------------- */

.ownsearch.is-standalone {
	top: 0;
	left: 0;
	right: 0;
	width: auto;
	max-height: 90vh;
	border: 0;
	border-radius: 0 0 16px 16px;
	box-shadow: 0 24px 60px rgba( 15, 23, 42, 0.22 );
	animation: none;
}

.ownsearch.is-standalone .ownsearch-bar {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 640px ) minmax( 0, 1fr );
	align-items: center;
	gap: 24px;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 16px 32px;
	border-bottom: 1px solid var(--os-line);
}

.ownsearch-logo { display: none; }

.ownsearch.is-standalone .ownsearch-logo {
	display: flex;
	align-items: center;
	color: var(--os-ink);
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
	min-width: 0;
}

.ownsearch.is-standalone .ownsearch-logo img { max-height: 40px; width: auto; max-width: 200px; margin: 0; }
.ownsearch.is-standalone .ownsearch-close { justify-self: end; }
.ownsearch.is-standalone .ownsearch-field { height: 48px; font-size: 16px; }

.ownsearch.is-standalone .ownsearch-body { padding: 8px 0 24px; }

.ownsearch.is-standalone .ownsearch-cols,
.ownsearch.is-standalone .ownsearch-fit {
	max-width: 1280px;
	margin: 0 auto;
	padding-left: 32px;
	padding-right: 32px;
	grid-template-columns: 220px minmax( 0, 1fr );
	gap: 8px 32px;
}

.ownsearch.is-standalone .ownsearch-cols.is-single { grid-template-columns: minmax( 0, 1fr ); }

/* Fixed card size: five across, however few the results. */
.ownsearch.is-standalone .ownsearch-cols .ownsearch-grid { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); gap: 20px 16px; }
.ownsearch.is-standalone .ownsearch-cols.is-single .ownsearch-grid { grid-template-columns: repeat( 6, minmax( 0, 1fr ) ); }

/* Model box and categories stack in the side column on a desktop. */
.ownsearch.is-standalone .ownsearch-side .ownsearch-pills { flex-direction: column; flex-wrap: nowrap; }
.ownsearch.is-standalone .ownsearch-side .ownsearch-pill { flex-direction: row; justify-content: space-between; align-items: center; white-space: normal; }

.ownsearch-backdrop {
	position: fixed;
	inset: 0;
	z-index: 2147482999;
	background: rgba( 13, 24, 53, 0.35 );
}

.ownsearch-backdrop[hidden] { display: none; }

@media ( max-width: 1100px ) {
	.ownsearch.is-standalone .ownsearch-cols .ownsearch-grid { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
	.ownsearch.is-standalone .ownsearch-cols.is-single .ownsearch-grid { grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); }
}

/* --------------------------------------------------------------------------
   Body: side column (model box, suggestions) and main column (products).
   On a phone they stack, side first.
   -------------------------------------------------------------------------- */

.ownsearch-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 6px 0 14px;
}

.ownsearch.is-phone .ownsearch-body { padding-bottom: calc( 24px + env( safe-area-inset-bottom, 0px ) ); }

.ownsearch-cols {
	display: grid;
	grid-template-columns: minmax( 0, 260px ) minmax( 0, 1fr );
	gap: 4px 20px;
	padding: 0 16px;
}

.ownsearch-cols.is-single { grid-template-columns: minmax( 0, 1fr ); }
.ownsearch-cols.is-single .ownsearch-side { display: none; }

.ownsearch.is-phone .ownsearch-cols { grid-template-columns: minmax( 0, 1fr ); gap: 0; }

.ownsearch-sec { padding: 10px 0 4px; }

.ownsearch-sec__label {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 12.5px;
	color: var(--os-muted);
	margin: 0 0 6px;
}

.ownsearch .ownsearch-sec__action { font-size: 12.5px; color: var(--os-accent); padding: 4px 0; }

.ownsearch-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

/* Keyboard selection and hover look the same on purpose. */
.ownsearch .is-active,
.ownsearch-route:hover,
.ownsearch-sug:hover,
.ownsearch-chip:hover,
.ownsearch-pill:hover { background: var(--os-hover); }

.ownsearch :focus-visible { outline: 2px solid var(--os-accent); outline-offset: -2px; }

/* Chips: recent and popular searches, "fits" */

.ownsearch-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ownsearch-fit { padding: 8px 16px 0; }

.ownsearch .ownsearch-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 12px;
	border-radius: 8px;
	background: var(--os-soft);
	font-size: 14px;
	max-width: 100%;
}

.ownsearch .ownsearch-chip.is-on {
	background: color-mix( in srgb, var(--os-accent) 14%, var(--os-bg) );
	color: color-mix( in srgb, var(--os-accent) 70%, var(--os-ink) );
	font-weight: 600;
}

.ownsearch-chip__x { font-size: 17px; line-height: 1; font-weight: 400; }

/* Tiles: model box, "in category", shop by category. One row that scrolls
   sideways on a phone, so products start high on the screen. */

.ownsearch-pills {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	margin: 0 -16px;
	padding: 0 16px 2px;
}

.ownsearch-pills::-webkit-scrollbar { display: none; }

.ownsearch:not( .is-phone ) .ownsearch-pills { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }

.ownsearch .ownsearch-pill {
	flex: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
	min-height: 48px;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--os-soft);
	color: var(--os-ink);
	text-decoration: none;
	white-space: nowrap;
}

.ownsearch-pill b { font-weight: 700; font-size: 13.5px; }
.ownsearch-pill span { font-size: 12px; color: var(--os-muted); font-variant-numeric: tabular-nums; }

.ownsearch-model > .ownsearch-sec__label { font-size: 14px; font-weight: 700; color: var(--os-ink); }

/* Query suggestions and recent searches: round chips, the completed part bold. */
.ownsearch .ownsearch-chip b { font-weight: 700; }

.ownsearch.is-phone .ownsearch-side .ownsearch-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
.ownsearch.is-phone .ownsearch-side .ownsearch-chips::-webkit-scrollbar { display: none; }
.ownsearch.is-phone .ownsearch-side .ownsearch-chip { flex: none; white-space: nowrap; }

/* Products: cards with large images, like the shop's own listings. */

.ownsearch-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px 12px;
}

.ownsearch:not( .is-phone ) .ownsearch-grid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }

.ownsearch-prod {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	border-radius: 12px;
}

.ownsearch-prod__img {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	width: 100%;
	border-radius: 12px;
	background: var(--os-soft);
	overflow: hidden;
	margin-bottom: 5px;
}

.ownsearch-prod__img img { width: 86%; height: 86%; object-fit: contain; margin: 0; }

.ownsearch-prod__badge {
	position: absolute;
	left: 8px;
	top: 8px;
	padding: 2px 7px;
	border-radius: 6px;
	background: var(--os-badge);
	color: var(--os-badge-ink);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.5;
}

.ownsearch-prod__badge.is-page { background: var(--os-ink); color: var(--os-bg); }

.ownsearch-prod__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13.5px;
	line-height: 1.3;
}

.ownsearch-prod__stars { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--os-muted); }

.ownsearch-stars {
	letter-spacing: 1px;
	font-size: 12px;
	background: linear-gradient( 90deg, var(--os-star) var(--os-fill, 0%), var(--os-line) var(--os-fill, 0%) );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ownsearch-prod__price { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.ownsearch-prod__price s { color: var(--os-muted); font-weight: 400; font-size: 12px; margin-left: 2px; }
.ownsearch-prod__stock { font-size: 12px; color: var(--os-muted); }

.ownsearch-prod:hover .ownsearch-prod__title,
.ownsearch-prod.is-active .ownsearch-prod__title { text-decoration: underline; }
.ownsearch .ownsearch-prod.is-active .ownsearch-prod__img { outline: 2px solid var(--os-accent); outline-offset: -2px; }

/* Add to cart: a round button on the image corner. The overlay is the
   image's own square (the image is the tile's full width), so the button
   lands on its corner without measuring anything. */

.ownsearch-tile { position: relative; min-width: 0; }

.ownsearch-tile__corner {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	aspect-ratio: 1;
	pointer-events: none;
}

.ownsearch .ownsearch-add {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 999px;
	background: var(--os-button, var(--os-accent));
	color: var(--os-button-ink, #fff);
	box-shadow: 0 2px 8px rgba( 15, 23, 42, 0.18 );
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	pointer-events: auto;
	transition: transform 120ms ease;
}

.ownsearch .ownsearch-add svg,
.ownsearch .ownsearch-add img { width: 18px; height: 18px; object-fit: contain; }
.ownsearch .ownsearch-add__icon { display: inline-flex; }
.ownsearch .ownsearch-add:hover { transform: scale( 1.06 ); }
.ownsearch .ownsearch-add:focus-visible { outline: 2px solid var(--os-accent); outline-offset: 2px; }
.ownsearch .ownsearch-add.is-choose { padding: 0 14px; }
.ownsearch .ownsearch-add.is-done { background: var(--os-ink); color: var(--os-bg); }
.ownsearch .ownsearch-add.is-err { background: #b32d2e; color: #fff; }
.ownsearch .ownsearch-add.is-busy { cursor: progress; }
.ownsearch .ownsearch-add.is-busy svg,
.ownsearch .ownsearch-add.is-busy img { display: none; }
.ownsearch .ownsearch-add.is-busy::after {
	content: "";
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: ownsearch-spin 700ms linear infinite;
}

@keyframes ownsearch-spin { to { transform: rotate( 360deg ); } }

.ownsearch.is-phone .ownsearch-add { min-width: 44px; height: 44px; }

.ownsearch-added {
	flex: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px;
	border-top: 1px solid var(--os-line);
	background: var(--os-bg);
}

.ownsearch-added[hidden] { display: none; }

.ownsearch-added__ok {
	display: grid;
	place-items: center;
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--os-accent);
	color: #fff;
}

.ownsearch-added__ok svg { width: 15px; height: 15px; }
.ownsearch-added__txt { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ownsearch-added__txt b { font-size: 14px; }
.ownsearch-added__txt span { font-size: 12.5px; color: var(--os-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ownsearch .ownsearch-added__go {
	margin-left: auto;
	flex: none;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 8px;
	background: var(--os-button, var(--os-accent));
	color: var(--os-button-ink, #fff);
	font-weight: 700;
	text-decoration: none;
}

.ownsearch.is-phone .ownsearch-added { padding-bottom: max( 10px, env( safe-area-inset-bottom ) ); }

/* See all, nothing found */

.ownsearch .ownsearch-all {
	display: block;
	margin: 12px 0 4px;
	padding: 12px;
	min-height: 44px;
	text-align: center;
	font-weight: 700;
	border-radius: 8px;
	background: var(--os-button, var(--os-accent));
	color: var(--os-button-ink, #fff);
}

.ownsearch .ownsearch-all:hover,
.ownsearch .ownsearch-all.is-active { background: color-mix( in srgb, var(--os-button, var(--os-accent)) 85%, #000 ); }

.ownsearch-none { padding: 14px 0 4px; }
.ownsearch-none__title { font-weight: 700; margin: 0 0 6px; }
.ownsearch .ownsearch-link { color: var(--os-accent); font-weight: 600; padding: 8px 0; min-height: 44px; }

.ownsearch-hint { color: var(--os-muted); margin: 14px 0; }

/* Loading: keep the previous answer, just quieter. A spinner flashing on
   every keystroke reads as slow even when it is not. */
.ownsearch.is-loading .ownsearch-body { opacity: 0.6; transition: opacity 120ms 150ms; }

/* While open on a phone: the page behind does not scroll, and floating chat
   bubbles and banners do not sit on top of the results (Baymard saw them
   squeeze suggestions down to two). They come back when search closes. */
html.ownsearch-lock,
html.ownsearch-lock body { overflow: hidden; }

html.ownsearch-open .ct-search-results,
html.ownsearch-open .dgwt-wcas-suggestions-wrapp,
html.ownsearch-open #zsiq_float,
html.ownsearch-open .zsiq_floatmain,
html.ownsearch-open [id^="hs-"][id$="-launcher"],
html.ownsearch-open .intercom-lightweight-app,
html.ownsearch-open #launcher,
html.ownsearch-open iframe[title*="chat" i] { visibility: hidden !important; }

/* Another search plugin left running (ElasticPress, FiboSearch, Advanced Woo
   Search, SearchWP, Relevanssi Live) drops its own list over the same field.
   Two answers to one search is worse than either, so theirs goes while ours
   is on. Their search keeps working for anyone OwnSearch is not answering. */
html.ownsearch-on .ep-autosuggest,
html.ownsearch-on .dgwt-wcas-suggestions-wrapp,
html.ownsearch-on .aws-search-result,
html.ownsearch-on .searchwp-live-search-results,
html.ownsearch-on .relevanssi-live-search-results { display: none !important; }

@media ( prefers-reduced-motion: no-preference ) {
	.ownsearch:not( .is-phone ) { animation: ownsearch-in 120ms ease-out; }

	@keyframes ownsearch-in {
		from { opacity: 0; transform: translateY( -4px ); }
		to { opacity: 1; transform: none; }
	}
}