/* Autocomplete suggestion panel for the epla search boxes. */

.epla-ac {
	position: relative;
}

.epla-ac-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1050;
	min-width: 280px;
	max-width: 420px;
	width: max-content;
	margin-top: 4px;
	background: #fff;
	border: 1px solid #e1e4e6;
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(24, 27, 30, 0.16);
	overflow: hidden;
	text-align: left;
}

/* Right-anchored variant for the header search (sits at the right edge). */
.epla-ac-panel--right {
	left: auto;
	right: 0;
}

.epla-ac-group-label {
	margin: 0;
	padding: 9px 14px 5px;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a949c;
}

.epla-ac-group + .epla-ac-group {
	border-top: 1px solid #eef1f2;
}

.epla-ac-row {
	display: block;
	padding: 7px 14px;
	cursor: pointer;
	color: #34495e;
	text-decoration: none;
	line-height: 1.3;
	overflow: hidden;
}

.epla-ac-row:hover,
.epla-ac-row.active {
	background: #f2f9f7;
	color: #34495e;
	text-decoration: none;
}

.epla-ac-row .epla-ac-thumb {
	float: left;
	width: 34px;
	height: 34px;
	margin-right: 10px;
	border-radius: 4px;
	object-fit: cover;
	background: #f0f0f0;
}

.epla-ac-initial {
	float: left;
	width: 34px;
	height: 34px;
	margin-right: 10px;
	border-radius: 50%;
	background: #1abc9c;
	color: #fff;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	line-height: 34px;
}

.epla-ac-label {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 13px;
}

.epla-ac-meta {
	display: block;
	font-size: 11px;
	color: #8a949c;
}

/* Discreet highlight of the matched search term inside a suggestion. */
.epla-ac-hl {
	font-weight: bold;
	color: #16a085;
}

.epla-ac-badge {
	float: right;
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 9px;
	background: #ecf0f1;
	color: #7f8c8d;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.epla-ac-footer {
	border-top: 1px solid #eef1f2;
	background: #fafbfb;
}

.epla-ac-footer .epla-ac-row {
	font-size: 12px;
	color: #16a085;
}

.epla-ac-footer .epla-ac-row:hover,
.epla-ac-footer .epla-ac-row.active {
	background: #f2f9f7;
}

/* Split panel (global search): groups side by side on desktop/tablet --
   products in the wider left column, shops right -- with the footer
   links spanning the full width below. A lone group takes the full
   width. On mobile everything stays a single column. */
@media (min-width: 768px) {
	.epla-ac-panel--split {
		display: flex;
		flex-wrap: wrap;
		min-width: 480px;
		max-width: 600px;
	}

	.epla-ac-panel--split .epla-ac-group {
		flex: 1 1 56%;
		min-width: 0;
		padding-bottom: 6px;
	}

	.epla-ac-panel--split .epla-ac-group + .epla-ac-group {
		flex: 1 1 40%;
		border-top: none;
		border-left: 1px solid #eef1f2;
	}

	.epla-ac-panel--split .epla-ac-footer {
		flex: 1 1 100%;
	}
}

/* Small screens: pin the panel to the input width and allow full width. */
@media (max-width: 767px) {
	.epla-ac-panel {
		min-width: 0;
		max-width: none;
		width: 100%;
	}
}

/* Alpine cloak: hide x-data markup until Alpine boots. */
[x-cloak] {
	display: none !important;
}