/* =============================================================
 * WonderLab Site — product search
 *
 * Two things:
 *   1. Live AJAX typeahead dropdown (.wlsite-search-dropdown)
 *   2. Mobile width fix for Divi's search input
 *
 * Divi's search opens as a slide-down panel from the header
 * cart-icon row; the input is `.et_pb_menu__search-input`. On
 * mobile the panel is narrow because Divi sizes it by viewport
 * gutters — that's the issue we widen below.
 * ============================================================= */


/* -------------------------------------------------------------
 * Mobile width — escape the parent section's max-width and fill
 * the viewport.
 *
 * On mobile the search bar sits inside a Divi section / row that
 * imposes a `max-width` (~80% viewport). Simply setting
 * `width: 100%` only stretches to 100% of that constrained
 * parent, not the viewport.
 *
 * Trick: combine `width: 100vw` with `margin-left: calc(50% - 50vw)`.
 * That pins the left edge to the viewport edge regardless of the
 * parent's content box. No `position: fixed` needed (which would
 * require guessing the header height for `top`); the search stays
 * in its natural document flow position right below the header,
 * just stretched.
 * ------------------------------------------------------------- */
@media (max-width: 980px) {
	.et_pb_menu__search {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc( 50% - 50vw ) !important;
		margin-right: calc( 50% - 50vw ) !important;
		padding: 14px 16px !important;
		background: #fff !important;
		box-shadow: 0 8px 16px -10px rgba( 0, 0, 0, 0.12 ) !important;
		box-sizing: border-box !important;
		position: relative !important;
		z-index: 50 !important;
	}
	.et_pb_menu__search-form {
		width: 100% !important;
		max-width: 100% !important;
		display: flex !important;
		align-items: center !important;
		gap: 8px !important;
		box-sizing: border-box !important;
	}
	.et_pb_menu__search-input {
		width: 100% !important;
		min-width: 0 !important;
		flex: 1 1 auto !important;
		box-sizing: border-box !important;
		padding: 12px 14px !important;
		font-size: 15px !important;
	}
}
@media (max-width: 600px) {
	.et_pb_menu__search {
		padding: 12px 12px !important;
	}
	.et_pb_menu__search-input {
		padding: 11px 12px !important;
		font-size: 14px !important;
	}
}


/* -------------------------------------------------------------
 * Typeahead dropdown
 * ------------------------------------------------------------- */

.wlsite-search-dropdown {
	position: absolute;
	z-index: 200;
	background: #fff;
	border: 1px solid rgba( 133, 22, 37, 0.14 );
	border-radius: 10px;
	box-shadow: 0 18px 36px -22px rgba( 94, 15, 26, 0.45 );
	padding: 6px;
	font-family: 'Geologica', sans-serif;
	color: #2a1a14;
	max-height: 70vh;
	overflow-y: auto;
	display: none;
}
.wlsite-search-dropdown.is-open {
	display: block;
}

.wlsite-search-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none !important;
	color: inherit !important;
	transition: background 0.15s ease;
}
.wlsite-search-item:hover,
.wlsite-search-item:focus,
.wlsite-search-item.is-active {
	background: #fff5f6;
}
.wlsite-search-item-thumb {
	width: 44px;
	height: 44px;
	border-radius: 6px;
	background: #f6f1e8;
	overflow: hidden;
	flex-shrink: 0;
}
.wlsite-search-item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wlsite-search-item-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.wlsite-search-item-name {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: #2a1a14;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.wlsite-search-item-price {
	font-size: 12.5px;
	font-weight: 500;
	color: #851625;
}
.wlsite-search-item-price del {
	color: #b0a297;
	font-weight: 400;
	margin-right: 4px;
}

.wlsite-search-state {
	padding: 12px 12px;
	font-size: 12.5px;
	color: #6a5e54;
	text-align: center;
}
.wlsite-search-state-loading::after {
	content: '…';
	animation: wlsite-search-dots 1s steps( 3, end ) infinite;
}
@keyframes wlsite-search-dots {
	33%  { content: '·'; }
	66%  { content: '··'; }
	100% { content: '···'; }
}

.wlsite-search-view-all {
	display: block;
	text-align: center;
	padding: 10px;
	margin-top: 4px;
	border-top: 1px solid #ece4d6;
	font-size: 12.5px;
	font-weight: 600;
	color: #851625 !important;
	text-decoration: none !important;
	border-radius: 0 0 8px 8px;
}
.wlsite-search-view-all:hover {
	background: #fff5f6;
}


/* =============================================================
 * Empty-state on /shop/?product_search= when no products match.
 *
 * Multi-zone layout: brand hero → suggestions → category browse
 * grid → CTA row. Replaces WC's default one-line "No products
 * were found matching your selection." with a full e-commerce
 * recovery experience.
 * ============================================================= */

.wlsite-search-empty {
	max-width: 920px;
	margin: 32px auto 56px;
	font-family: 'Geologica', sans-serif;
	color: #2a1a14;
	display: flex;
	flex-direction: column;
	gap: 28px;
}


/* -------------------------------------------------------------
 * Hero (ivory gradient card with icon + heading + sub)
 * ------------------------------------------------------------- */
.wlsite-empty-hero {
	padding: 48px 36px;
	background: linear-gradient(135deg, #fffbf1 0%, #f6f1e8 100%);
	border: 1px solid #ece4d6;
	border-radius: 20px;
	box-shadow: 0 1px 0 rgba( 133, 22, 37, 0.14 ), 0 12px 24px -16px rgba( 94, 15, 26, 0.18 );
	text-align: center;
}
.wlsite-empty-hero-icon {
	display: inline-flex;
	width: 76px;
	height: 76px;
	margin-bottom: 16px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff5f6;
	color: #851625;
	box-shadow: 0 0 0 8px rgba( 133, 22, 37, 0.05 );
}
.wlsite-empty-eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #851625;
}
.wlsite-empty-title {
	margin: 0 0 10px;
	font-family: 'Geologica', sans-serif;
	font-size: 28px;
	font-weight: 700;
	color: #2a1a14;
	line-height: 1.2;
}
.wlsite-empty-title em {
	font-style: normal;
	color: #851625;
}
.wlsite-empty-sub {
	margin: 0;
	font-size: 15px;
	color: #6a5e54;
	line-height: 1.5;
}


/* -------------------------------------------------------------
 * Suggestions list — numbered tips for the customer
 * ------------------------------------------------------------- */
.wlsite-empty-tips {
	padding: 28px 30px;
	background: #fff;
	border: 1px solid #ece4d6;
	border-radius: 14px;
}
.wlsite-empty-tips-heading {
	margin: 0 0 14px;
	font-family: 'Geologica', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #851625;
	text-transform: none;
	letter-spacing: 0;
}
.wlsite-empty-tips-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.wlsite-empty-tips-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	line-height: 1.55;
	color: #3d2a23;
}
.wlsite-empty-tip-num {
	flex-shrink: 0;
	display: inline-flex;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff5f6;
	color: #851625;
	font-weight: 700;
	font-size: 13px;
	align-items: center;
	justify-content: center;
}
.wlsite-empty-tip-body strong {
	color: #2a1a14;
	font-weight: 600;
}


/* -------------------------------------------------------------
 * CTA row — primary + secondary actions
 * ------------------------------------------------------------- */
.wlsite-empty-cta-row {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-top: 4px;
}
.wlsite-empty-cta {
	display: inline-flex;
	align-items: center;
	padding: 12px 28px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none !important;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	border: 2px solid transparent;
	box-sizing: border-box;
}
.wlsite-empty-cta--primary {
	background: #851625;
	color: #fff !important;
	border-color: #851625;
}
.wlsite-empty-cta--primary:hover {
	background: #5e0f1a;
	border-color: #5e0f1a;
}
.wlsite-empty-cta--secondary {
	background: transparent;
	color: #851625 !important;
	border-color: #d8ccba;
}
.wlsite-empty-cta--secondary:hover {
	border-color: #851625;
	background: #fff5f6;
}


/* -------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */
@media (max-width: 768px) {
	.wlsite-search-empty {
		margin: 24px 16px 40px;
		gap: 20px;
	}
	.wlsite-empty-hero { padding: 36px 24px; }
	.wlsite-empty-title { font-size: 22px; }
	.wlsite-empty-sub { font-size: 14px; }
	.wlsite-empty-tips { padding: 22px 22px; }
	/* Stack the CTA buttons vertically below the tablet breakpoint
	   so the two pills aren't fighting for room side-by-side. */
	.wlsite-empty-cta-row {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.wlsite-empty-cta {
		width: 100%;
		justify-content: center;
		text-align: center;
	}
}
@media (max-width: 480px) {
	.wlsite-empty-hero-icon {
		width: 64px;
		height: 64px;
	}
	.wlsite-empty-title { font-size: 19px; }
	.wlsite-empty-cta {
		padding: 12px 22px;
		font-size: 14px;
	}
}