/* =========================================================================
 * RJ Premium Search
 * Brand palette: indigo  var(--color-content-primary, #3e4096)
 *                accent  #ff5722
 * ====================================================================== */

:root {
	--rj-indigo: #3e4096;
	--rj-indigo-d: #2f3174;
	--rj-accent: #ff5722;
	--rj-ink: #1f2430;
	--rj-muted: #6b7280;
	--rj-line: rgba( 62, 64, 150, 0.10 );
}

/* =========================================================================
 * 1) LIVE SEARCH DROPDOWN
 * ====================================================================== */

/* Desktop/tablet: give the form a positioning context for the dropdown.
   (On mobile the theme already makes the form position:absolute, so we must
    NOT touch it there — see the mobile section below.) */
@media ( min-width: 601px ) {
	.w-search.elm_in_header .w-search-form { position: relative; }
}

.rj-search-dropdown {
	position: absolute;
	top: calc( 100% + 10px );
	left: 0;
	right: 0;
	z-index: 9999;
	display: none;
	max-height: 70vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba( 17, 24, 39, 0.18 ), 0 4px 12px rgba( 17, 24, 39, 0.08 );
	border: 1px solid var(--rj-line);
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	animation: rjSearchIn 0.16s ease-out;
}

.rj-search-dropdown.is-open {
	display: block;
}

@keyframes rjSearchIn {
	from { opacity: 0; transform: translateY( -6px ); }
	to   { opacity: 1; transform: translateY( 0 ); }
}

.rj-search-state {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 22px 18px;
	font-size: 14px;
	color: var(--rj-muted);
}

.rj-search-empty { color: #9ca3af; }

.rj-search-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid rgba( 0, 0, 0, 0.12 );
	border-top-color: var(--rj-indigo);
	border-radius: 50%;
	animation: rjSpin 0.7s linear infinite;
}

@keyframes rjSpin { to { transform: rotate( 360deg ); } }

.rj-search-list { padding: 6px; }

.rj-search-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 9px 12px;
	border-radius: 10px;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

.rj-search-item:hover,
.rj-search-item:focus { background: #f4f5fb; }

.rj-search-thumb {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 9px;
	overflow: hidden;
	background: #f1f2f4;
	border: 1px solid var(--rj-line);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rj-search-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rj-search-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

.rj-search-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--rj-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rj-search-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.rj-search-price { font-size: 13.5px; font-weight: 700; color: var(--rj-accent); }
.rj-search-price del { color: #9ca3af; font-weight: 400; margin-right: 4px; }
.rj-search-price ins { text-decoration: none; }

.rj-search-oos {
	font-size: 11px;
	font-weight: 600;
	color: #b91c1c;
	background: #fee2e2;
	padding: 1px 7px;
	border-radius: 20px;
}

.rj-search-viewall {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 13px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #fff !important;
	text-decoration: none !important;
	background: linear-gradient( 135deg, var(--rj-indigo), var(--rj-indigo-d) );
	border-radius: 0 0 14px 14px;
	transition: filter 0.15s ease;
}

.rj-search-viewall:hover { filter: brightness( 1.08 ); }
.rj-search-viewall i { font-size: 12px; }

.rj-search-dropdown::-webkit-scrollbar { width: 8px; }
.rj-search-dropdown::-webkit-scrollbar-thumb { background: rgba( 17, 24, 39, 0.18 ); border-radius: 8px; }

@media ( max-width: 600px ) {
	.rj-search-dropdown { max-height: 65vh; border-radius: 12px; }
	.rj-search-thumb { width: 46px; height: 46px; }
	.rj-search-title { font-size: 13.5px; }
}

/* =========================================================================
 * 2) PREMIUM SEARCH-RESULTS PAGE  (scoped to body.search only)
 * ====================================================================== */
body.search {
	--rj-page-indigo: var( --color-content-primary, #3e4096 );
}

/* ---- Remove sort dropdown + category/price filter on search page ---- */
body.search .w-order.for_grid,
body.search .w-filter.for_grid {
	display: none !important;
}
/* collapse the now-empty toolbar so it leaves no gap above the products */
body.search .vc_column-inner > .w-hwrapper.align_justify:has( .w-filter.for_grid ),
body.search .w-hwrapper:has( > .w-filter.for_grid ) {
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---- Heading ---- */
body.search h1.entry-title,
body.search .w-post-elm.post_title.entry-title {
	font-size: clamp( 1.7rem, 1rem + 2.4vw, 2.6rem ) !important;
	line-height: 1.15 !important;
	font-weight: 800 !important;
	letter-spacing: -0.015em !important;
	color: var( --rj-page-indigo ) !important;
	position: relative !important;
	display: inline-block !important;
	padding-bottom: 0.6rem !important;
	margin-bottom: 0.4rem !important;
}

body.search h1.entry-title::after,
body.search .w-post-elm.post_title.entry-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 72px;
	height: 4px;
	border-radius: 4px;
	background: linear-gradient( 90deg, var( --rj-page-indigo ), var(--rj-accent) );
}

/* ---- Product cards ---- */
body.search .w-grid-item-h {
	border-radius: 16px !important;
	background: #fff !important;
	border: 1px solid var(--rj-line) !important;
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.05 ), 0 10px 26px rgba( 16, 24, 40, 0.06 ) !important;
	overflow: hidden !important;
	transition: transform 0.28s cubic-bezier( 0.2, 0.7, 0.2, 1 ), box-shadow 0.28s ease !important;
}

.no-touch body.search .w-grid-item-h:hover {
	transform: translateY( -6px ) !important;
	box-shadow: 0 16px 38px rgba( 62, 64, 150, 0.18 ) !important;
}

/* image zoom */
body.search .w-grid-item .w-post-elm.post_image { overflow: hidden; }
body.search .w-grid-item .w-post-elm.post_image img,
body.search .w-grid-item img.wp-post-image {
	transition: transform 0.45s ease !important;
}
.no-touch body.search .w-grid-item-h:hover img.wp-post-image {
	transform: scale( 1.06 );
}

/* title */
body.search .woocommerce-loop-product__title,
body.search .w-grid-item .post_title,
body.search .w-grid-item .post_title a {
	color: var(--rj-ink) !important;
	font-weight: 600 !important;
	transition: color 0.2s ease !important;
}
.no-touch body.search .w-grid-item-h:hover .post_title a {
	color: var( --rj-page-indigo ) !important;
}

/* price */
body.search .woocommerce-Price-amount {
	color: var(--rj-accent) !important;
	font-weight: 800 !important;
}
body.search del .woocommerce-Price-amount,
body.search del .woocommerce-Price-amount bdi {
	color: #9aa1ab !important;
	font-weight: 500 !important;
}
body.search ins { text-decoration: none !important; }

/* star rating tint */
body.search .star-rating span::before,
body.search .star-rating::before { color: #ffb400 !important; }

/* ---- Sidebar filter (category / price) ---- */
body.search .w-filter-list-title,
body.search .w-filter-item-title {
	color: var( --rj-page-indigo ) !important;
	font-weight: 700 !important;
}

body.search .w-filter-item-value label:hover,
body.search .w-filter-item-value.selected label {
	color: var( --rj-page-indigo ) !important;
}

/* checkbox accent */
body.search .w-filter input[type="checkbox"],
body.search .w-filter input[type="radio"] {
	accent-color: var( --rj-page-indigo );
}

body.search .w-filter-item-reset,
body.search .w-filter-list-reset {
	color: var(--rj-accent) !important;
	font-weight: 600 !important;
}

/* price range inputs */
body.search .w-filter input[type="text"],
body.search .w-filter input[type="number"] {
	border-radius: 10px !important;
	border: 1px solid var(--rj-line) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
body.search .w-filter input[type="text"]:focus,
body.search .w-filter input[type="number"]:focus {
	border-color: var( --rj-page-indigo ) !important;
	box-shadow: 0 0 0 3px rgba( 62, 64, 150, 0.12 ) !important;
}

/* ---- Sort / ordering dropdown ---- */
body.search select,
body.search .w-grid-filter select,
body.search .woocommerce-ordering select {
	border-radius: 10px !important;
	border: 1px solid var(--rj-line) !important;
	padding: 0.5rem 0.9rem !important;
	font-weight: 600 !important;
	color: var(--rj-ink) !important;
	background-color: #fff !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
body.search select:focus {
	border-color: var( --rj-page-indigo ) !important;
	box-shadow: 0 0 0 3px rgba( 62, 64, 150, 0.12 ) !important;
}

/* ---- "Add to cart" / buttons on cards keep accent ---- */
body.search .w-grid-item .w-btn.us-btn-style_1,
body.search .w-grid-item a.button.add_to_cart_button {
	border-radius: 10px !important;
	font-weight: 700 !important;
}

/* ---- Mobile polish ---- */
@media ( max-width: 600px ) {
	body.search h1.entry-title,
	body.search .w-post-elm.post_title.entry-title {
		font-size: 1.5rem !important;
		padding-bottom: 0.5rem !important;
	}
	body.search .w-grid-item-h { border-radius: 13px !important; }
	body.search .w-grid.cols_2 { --gap: 0.7rem; }
}

/* =========================================================================
 * 3) MOBILE HEADER SEARCH
 *    Bug fix: the bar used background:var(--color-content-bg) which is NOT
 *    defined on this site -> transparent bar showing the logo behind it.
 *    Also gives the mobile search a clean, modern pill look.
 * ====================================================================== */
@media ( max-width: 600px ) {

	/* Keep the search cell stacked above the logo cell. */
	.l-subheader.at_middle .l-subheader-cell.at_center { position: static; }

	/* Solid, elevated bar that fully covers the header row (no see-through). */
	.header_hor .w-search.layout_simple.elm_in_header .w-search-form,
	.header_hor .w-search.layout_modern.elm_in_header .w-search-form {
		background: #ffffff !important;
		z-index: 100000 !important;
		box-shadow: 0 10px 24px rgba( 16, 24, 40, 0.12 );
	}

	/* Let the live-results dropdown escape the bar (theme sets overflow:hidden). */
	.header_hor .w-search.layout_simple.elm_in_header.active .w-search-form,
	.header_hor .w-search.layout_modern.elm_in_header.active .w-search-form {
		overflow: visible !important;
	}

	/* Comfortable side spacing for the pill. */
	.header_hor .w-search.layout_simple.elm_in_header .w-form-row-field,
	.header_hor .w-search.layout_modern.elm_in_header .w-form-row-field {
		left: 0.9rem !important;
		right: 0.9rem !important;
	}

	/* Modern rounded search pill with an inline magnifier icon. */
	.header_hor .w-search.layout_simple.elm_in_header input,
	.header_hor .w-search.layout_modern.elm_in_header input {
		height: 42px !important;
		border-radius: 999px !important;
		border: 1px solid rgba( 62, 64, 150, 0.14 ) !important;
		background: #f3f5fb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e4096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 0.95rem center !important;
		background-size: 18px 18px !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-inline-start: 2.9rem !important;
		padding-inline-end: 2.6rem !important;
		font-size: 15px !important;
		color: var(--rj-ink) !important;
		box-shadow: none !important;
	}
	.header_hor .w-search.layout_simple.elm_in_header input::placeholder {
		color: #9aa1b3 !important;
		opacity: 1;
	}

	/* Tidy close (x) button. */
	.header_hor .w-search.layout_simple.elm_in_header .w-search-close,
	.header_hor .w-search.layout_modern.elm_in_header .w-search-close {
		margin-inline-end: 0.6rem !important;
		color: var(--rj-ink) !important;
		z-index: 2;
	}

	/* Tint the closed-state magnifier toggle to brand indigo. */
	.header_hor .w-search.layout_simple.elm_in_header .w-search-open i,
	.header_hor .w-search.layout_modern.elm_in_header .w-search-open i {
		color: var( --color-content-primary, #3e4096 );
	}

	/* Keep the live dropdown within the viewport on phones. */
	.w-search-form .rj-search-dropdown {
		left: 1.5rem;
		right: 1.5rem;
		top: calc( 100% + 6px );
	}
}