/* ============================================================
   shanti-search.css — Site search (Pro Search 8) styles
   Namespaced .sti-* to avoid Porto theme collisions.
   Palette: purple #6E5A81 · gold #b8a070 · ink #1a1a24
   ============================================================ */

/* ---------------- Header search (desktop >=992px) ---------------- */
/* OPTION A (2026-08): search idles compact (~170px) and expands to
   340px on focus, or while the type-ahead panel is open (JS toggles
   .sti-open on .sti-search-desktop so the field stays wide while
   the user mouses the panel). */
.sti-search { position: relative; }

.sti-search-desktop { position: relative; width: auto; }

.sti-search-inputwrap { position: relative; }

.sti-search-input {
	width: 170px;
	transition: width 0.25s ease;
	border: 1.5px solid #6E5A81;
	border-radius: 22px;
	padding: 8px 42px 8px 16px;
	font-size: 14.5px;
	outline: none;
	background: #fff;
	color: #1a1a24;
}
.sti-search-desktop:focus-within .sti-search-input,
.sti-search-desktop.sti-open .sti-search-input {
	width: 340px;
}
.sti-search-input::placeholder { color: #999; }
.sti-search-input:focus { box-shadow: 0 0 0 3px rgba(110, 90, 129, 0.15); }

.sti-search-btn {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: #6E5A81;
	color: #fff;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 13px;
	cursor: pointer;
}
.sti-search-btn:hover { background: #5d4b6e; }

/* Guard: Porto's base .header-search sets font-size: 0 (legacy
   whitespace trick). Our em-sized FA icon inherits that and renders
   at 0px — i.e. invisible. Explicit sizes here defeat it. Also
   neutralize any theme width on the form (loads after style.css,
   so equal-specificity ties resolve in our favor). */
.sti-search form { width: auto; margin: 0; }

/* Toggle icon: mobile only */
.sti-search-toggle {
	display: none;
	font-size: 2rem;
	line-height: 1;
}
.sti-search-toggle i { font-size: 2rem; }

/* ---------------- Option A: icon-only account ---------------- */
.sti-acct-icon {
	display: inline-block;
	font-size: 26px;
	color: #333;
	line-height: 1;
	padding: 2px 4px;
}
.sti-acct-icon:hover { color: #6E5A81; }
.sti-acct-name {
	display: block;
	padding: 9px 15px 7px;
	font-weight: 700;
	font-size: 13px;
	color: #6E5A81;
	border-bottom: 1px solid #eee;
	white-space: nowrap;
	cursor: default;
}

/* Breakpoint: field stays visible down to 700px (nav is already
   collapsed below 992, and the compact 170px field fits fine);
   below 700px: icon + full-screen overlay. Keep in sync with
   MOBILE_MAX in shanti-search.js. */
@media (max-width: 700px) {
	.sti-search-desktop { display: none; }
	.sti-search-toggle {
		display: inline-block;
		padding: 8px 10px;
		color: #444;
	}
}

/* 701-991px: cap the focus-expansion so the field can't push the
   account/favorites/cart icons around on narrow tablets */
@media (max-width: 991px) and (min-width: 701px) {
	.sti-search-desktop:focus-within .sti-search-input,
	.sti-search-desktop.sti-open .sti-search-input {
		width: 240px;
	}
	.sti-ta-panel { width: 240px; }
}

/* ---------------- Type-ahead panel (desktop) ---------------- */
.sti-ta-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: auto;
	right: 0;
	width: 340px; /* matches the expanded input, right-aligned under it */
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
	overflow: hidden;
	z-index: 1050;
}
.sti-ta-panel[hidden] { display: none; }

.sti-ta-row {
	display: block;
	padding: 10px 16px;
	font-size: 14.5px;
	color: #1a1a24;
	text-decoration: none;
	border-bottom: 1px solid #f2f0f4;
	cursor: pointer;
}
.sti-ta-row:last-child { border-bottom: none; }
.sti-ta-row:hover,
.sti-ta-row.sti-ta-active { background: #f4f1f7; text-decoration: none; color: #1a1a24; }
.sti-ta-title b { color: #6E5A81; font-weight: 700; }
.sti-ta-sub { color: #8a8a8a; font-size: 12.5px; }
.sti-ta-empty { color: #999; cursor: default; }

.sti-ta-footer {
	display: block;
	width: 100%;
	padding: 11px 16px;
	background: #6E5A81;
	color: #fff;
	font-size: 13.5px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	border: none;
	cursor: pointer;
}
.sti-ta-footer:hover { background: #5d4b6e; color: #fff; text-decoration: none; }

.sti-ta-head {
	padding: 9px 16px 5px;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9a8fa6;
}
.sti-ta-popicon { color: #c4bccd; font-size: 12px; margin-right: 9px; }
.sti-ta-popular[hidden] { display: none; }

/* ---------------- Mobile overlay ---------------- */
.sti-search-overlay {
	position: fixed;
	inset: 0;
	background: #fff;
	z-index: 2000;
	display: flex;
	flex-direction: column;
}
.sti-search-overlay[hidden] { display: none; }

.sti-noscroll { overflow: hidden; }

.sti-ov-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid #eee;
}
.sti-ov-form { flex: 1; margin: 0; }
.sti-ov-input {
	width: 100%;
	border: 1.5px solid #6E5A81;
	border-radius: 20px;
	padding: 9px 14px;
	font-size: 16px; /* 16px prevents iOS zoom-on-focus */
	outline: none;
	box-sizing: border-box;
}
.sti-ov-close {
	font-size: 24px;
	color: #555;
	background: none;
	border: none;
	padding: 4px 8px;
	cursor: pointer;
}

.sti-ov-rows { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sti-ov-rows .sti-ta-row {
	padding: 13px 18px;
	font-size: 15px;
	min-height: 44px; /* touch target */
	display: flex;
	align-items: center;
}

.sti-ov-foot { padding: 12px 14px; border-top: 1px solid #eee; }
.sti-ov-all {
	display: block;
	width: 100%;
	background: #6E5A81;
	color: #fff;
	border: none;
	border-radius: 22px;
	text-align: center;
	padding: 12px;
	font-size: 14.5px;
	font-weight: 500;
	cursor: pointer;
}

/* ---------------- Results page: banner ---------------- */
/* The category-page purple comes from a <style> block inside
   home/product_category, which the search page never loads —
   so the search banner styles itself here. */
.sti-banner-search {
	background: #6E5A81 !important;
	position: relative;
	overflow: hidden;
}
.sti-banner-search .banner-title { color: #fff; }
.sti-banner-search .banner-description { color: #e6dff0; }
.sti-banner-eyebrow {
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #d9cfe4;
	margin-bottom: 6px;
}
.sti-banner-sub { color: #e6dff0; font-size: 15px; }

/* ---------------- Results page: filter chips ---------------- */
.sti-filterbar {
	display: flex;
	flex-wrap: wrap;            /* chips wrap gracefully to 2nd/3rd line */
	align-items: center;
	gap: 8px;
	padding: 16px 0 6px;
}
.sti-filterbar-lbl { font-size: 13.5px; font-weight: 700; margin-right: 4px; }

.sti-chip {
	border: 1px solid #444;
	border-radius: 4px;
	background: #343a40;
	color: #fff;
	font-size: 13px;
	padding: 5px 13px;
	text-decoration: none;
	white-space: nowrap;
}
.sti-chip:hover { background: #23272b; color: #fff; text-decoration: none; }
.sti-chip-on { background: #6E5A81; border-color: #6E5A81; }
.sti-chip-on:hover { background: #5d4b6e; }
.sti-chip-ct { opacity: 0.75; }

.sti-sort { margin-left: auto; font-size: 13px; color: #555; }
.sti-sort select {
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 13px;
}
@media (max-width: 575px) {
	.sti-sort { margin-left: 0; width: 100%; }
}

/* ---------------- Results page: grid & pagination ---------------- */
.sti-search-grid { padding-top: 12px; }

.sti-pagination { display: flex; justify-content: center; gap: 6px; padding: 10px 0 6px; }
.sti-pagination a,
.sti-pagination strong,
.sti-pagination span {
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ddd;
	border-radius: 4px;
	color: #6E5A81;
	text-decoration: none;
	font-size: 14px;
	padding: 0 8px;
}
.sti-pagination strong,
.sti-pagination .current {
	background: #6E5A81;
	color: #fff;
	border-color: #6E5A81;
}

/* ---------------- Results page: no-results ---------------- */
.sti-noresults { text-align: center; padding: 44px 20px; }
.sti-noresults h2 { font-size: 26px; margin-bottom: 10px; }
.sti-didyoumean { font-size: 15.5px; }
.sti-didyoumean a { color: #6E5A81; font-weight: 600; text-decoration: underline; }

.sti-popular-block { margin-top: 18px; }
.sti-popular-head {
	display: block;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9a8fa6;
	margin-bottom: 6px;
}
.sti-popular-row {
	display: inline-block;
	margin: 4px 8px;
	font-size: 14px;
	color: #6E5A81;
	text-decoration: none;
}
.sti-popular-row:hover { text-decoration: underline; color: #5d4b6e; }
.sti-popular-row .fa-search { color: #c4bccd; font-size: 12px; margin-right: 6px; }

/* ---------------- Results page: articles ---------------- */
.sti-articles {
	background: #f8f6fa;
	border-top: 1px solid #eee;
	padding: 26px 0 30px;
	margin-top: 20px;
}
.sti-articles h3 { font-size: 24px; margin-bottom: 2px; }
.sti-articles-sub { color: #888; font-size: 13.5px; margin-bottom: 18px; }

.sti-art {
	display: flex;
	gap: 16px;
	background: #fff;
	border-radius: 6px;
	padding: 14px;
	margin-bottom: 12px;
	align-items: center;
}
.sti-art img {
	width: 110px;
	height: 74px;
	object-fit: cover;
	border-radius: 4px;
	flex: none;
}
.sti-art-body { flex: 1; min-width: 0; }
.sti-art h5 { font-size: 16px; margin: 0; }
.sti-art h5 a { color: #1a1a24; text-decoration: none; }
.sti-art h5 a:hover { color: #6E5A81; }
.sti-art-rm { font-size: 13px; color: #6E5A81; white-space: nowrap; margin-left: auto; text-decoration: none; }
.sti-art-rm:hover { color: #5d4b6e; }

@media (max-width: 575px) {
	.sti-art { flex-wrap: wrap; }
	.sti-art img { width: 100%; height: 140px; }
	.sti-art-rm { margin-left: 0; }
}

/* ---------------- Category promo banner ---------------- */
/* Shown when the search keywords match a whitelist category name;
   links to the curated category page without redirecting search. */
.sti-catpromo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 11px 16px;
	background: #f4f1f7;
	border: 1px solid #e2d9ea;
	border-left: 4px solid #6E5A81;
	border-radius: 4px;
	font-size: 14px;
	color: #1a1a24;
	text-decoration: none;
}
.sti-catpromo:hover { background: #ece5f2; color: #1a1a24; text-decoration: none; }
.sti-catpromo strong { color: #6E5A81; }
.sti-catpromo .fa-leaf { color: #6E5A81; font-size: 13px; }
.sti-catpromo span { margin-left: auto; color: #6E5A81; font-weight: 600; white-space: nowrap; }
@media (max-width: 575px) {
	.sti-catpromo { flex-wrap: wrap; }
	.sti-catpromo span { margin-left: 0; }
}