/**
 * Recherche Live — Structure.
 *
 * Ce fichier ne contient AUCUNE couleur de marque : uniquement des mises en
 * page et des variables `--rl-*` aux valeurs neutres. Pour habiller la barre sur
 * un autre site, on ne touche pas à ce fichier — on redéfinit les variables dans
 * un skin (assets/skins/mon-site.css) ou dans le champ « CSS personnalisé ».
 *
 * Les variables sont posées sur `.rl-search` et `.rl-page`, jamais sur `:root` :
 * des noms aussi génériques lâchés dans toute la page repeindraient Divi.
 */

.rl-search,
.rl-page {
	/* ---------- Couleurs — valeurs neutres, écrasées par le skin ---------- */
	--rl-bg: #ffffff;
	--rl-fg: #1f2430;
	--rl-fg-soft: #616a7d;
	--rl-fg-mute: #8d95a5;
	--rl-border: #e2e4ea;
	--rl-border-strong: #cfd3dc;
	--rl-field-bg: #f5f6f8;
	--rl-field-bg-open: #ffffff;
	--rl-focus-border: #9aa2b1;
	--rl-primary: #2f3b52;
	--rl-accent: #d1345b;
	--rl-accent-fg: #ffffff;
	--rl-hover-bg: #f2f4f7;
	--rl-mark-bg: #fff2c2;
	--rl-mark-fg: inherit;

	--rl-toggle-color: inherit;
	--rl-toggle-hover-bg: #f2f4f7;

	--rl-eyebrow: #8d95a5;
	--rl-price: #2f3b52;
	--rl-price-sale: #d1345b;
	--rl-price-old: #8d95a5;

	/* ---------- Formes ---------- */
	--rl-size: 42px;              /* bouton loupe fermé */
	--rl-icon-size: 20px;         /* la loupe elle-même — à caler sur les autres
	                                 icônes du menu (panier, compte…) */
	--rl-field-height: 46px;      /* hauteur du champ ouvert */
	--rl-field-radius: 12px;
	--rl-field-border-width: 1px;
	--rl-panel-radius: 16px;
	--rl-item-radius: 12px;
	--rl-media-radius: 10px;
	--rl-pill: 999px;

	--rl-shadow: 0 12px 32px rgba(20, 24, 40, 0.12), 0 2px 6px rgba(20, 24, 40, 0.06);
	--rl-shadow-field: 0 1px 2px rgba(20, 24, 40, 0.05);
	--rl-focus-ring: 0 0 0 3px rgba(47, 59, 82, 0.18);

	/* ---------- Typographie — `inherit` : la barre prend la police du menu ---- */
	--rl-font: inherit;
	--rl-font-title: inherit;
	--rl-fs: 15px;
	--rl-fs-sm: 13px;
	--rl-fs-xs: 11px;
	--rl-title-weight: 600;
	--rl-title-ls: 0;
	--rl-eyebrow-ls: 0.08em;

	/* ---------- Dimensions pilotées par le shortcode et le JavaScript ------- */
	--rl-open-width: 360px;       /* recalculée à l'ouverture si open="auto" */
	--rl-results-width: 460px;
	--rl-page-max: 1240px;
	--rl-z: 9999;

	/* Le libellé texte du bouton est masqué par défaut ; passer à `inline` pour
	   afficher « Rechercher » à côté de la loupe. */
	--rl-label-display: none;

	/* ---------- Mouvement ---------- */
	--rl-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--rl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--rl-dur-fast: 180ms;
	--rl-dur: 320ms;
	--rl-dur-slow: 380ms;
}

/* ============================================================================
 * 1. CONTENANT
 * ==========================================================================*/

/*
 * Le conteneur d'alignement colle la loupe au bord de son bloc. C'est lui qui
 * rend la mesure possible : le bord droit de la barre coïncide alors avec celui
 * de la colonne Divi, et le script peut remonter jusqu'à la ligne pour savoir
 * quelle place elle a le droit de prendre.
 */
.rl-search-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	max-width: 100%;
}

.rl-search-wrap--left {
	justify-content: flex-start;
}

.rl-search {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	width: var(--rl-size);
	height: var(--rl-size);
	vertical-align: middle;
	font-family: var(--rl-font);
	line-height: 1.4;
	color: var(--rl-fg);
	text-align: left;
}

.rl-search *,
.rl-page .rl-list * {
	box-sizing: border-box;
}

/*
 * Le panneau est détaché du flux et ancré à droite : en s'élargissant, il passe
 * PAR-DESSUS les éléments de menu situés à sa gauche, sans jamais les décaler.
 * Avec open="auto" (défaut), le JavaScript mesure la place réellement libre à
 * gauche dans le conteneur et l'écrit dans --rl-open-width.
 */
.rl-search .rl-search__panel {
	position: absolute !important;   /* Divi cible les blocs par ID : sans !important,
	                                    le panneau retomberait dans le flux */
	top: 50%;
	right: 0;
	width: var(--rl-size);
	transform: translateY(-50%);
	z-index: var(--rl-z);
	transition: width var(--rl-dur-slow) var(--rl-ease-spring);
}

.rl-search--left .rl-search__panel {
	right: auto;
	left: 0;
}

.rl-search.is-open .rl-search__panel {
	width: min(var(--rl-open-width), calc(100vw - 24px));
}

/* ============================================================================
 * 2. CHAMP
 * ==========================================================================*/

/*
 * `overflow: hidden` est structurel, pas cosmétique : c'est lui qui garantit que
 * rien (croix d'effacement, indicateur de chargement) ne dépasse du champ quand
 * il est replié à la taille d'une icône.
 */
.rl-search .rl-search__form {
	display: flex;
	align-items: center;
	gap: 2px;
	width: 100%;
	min-width: 0;
	height: var(--rl-size);
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: transparent;
	border: var(--rl-field-border-width) solid transparent;
	border-radius: var(--rl-pill);
	transition:
		height var(--rl-dur) var(--rl-ease),
		padding var(--rl-dur) var(--rl-ease),
		background-color var(--rl-dur-fast) ease-out,
		border-color var(--rl-dur-fast) ease-out,
		border-radius var(--rl-dur) var(--rl-ease),
		box-shadow var(--rl-dur-fast) ease-out;
}

.rl-search.is-open .rl-search__form {
	height: var(--rl-field-height);
	padding: 0 6px 0 0;
	background: var(--rl-field-bg-open);
	border-color: var(--rl-border-strong);
	border-radius: var(--rl-field-radius);
	box-shadow: var(--rl-shadow-field);
}

.rl-search.is-focused .rl-search__form {
	border-color: var(--rl-focus-border);
	box-shadow: var(--rl-focus-ring);
}

/* ---- Bouton loupe ---- */

.rl-search__toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: var(--rl-size);
	height: var(--rl-size);
	padding: 0;
	margin: 0;
	color: var(--rl-toggle-color);
	background: transparent;
	border: 0;
	border-radius: var(--rl-pill);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition:
		width var(--rl-dur) var(--rl-ease),
		color var(--rl-dur-fast) ease-out,
		background-color var(--rl-dur-fast) ease-out;
}

.rl-search__toggle:hover {
	background: var(--rl-toggle-hover-bg);
}

.rl-search__toggle:focus-visible {
	outline: none;
	box-shadow: var(--rl-focus-ring);
}

/* La loupe se cale sur la taille des autres icônes du menu (voir --rl-icon-size). */
.rl-search .rl-search__toggle .rl-icon {
	width: var(--rl-icon-size);
	height: var(--rl-icon-size);
	transition: transform var(--rl-dur) var(--rl-ease-spring);
}

.rl-search__toggle:active .rl-icon {
	transform: scale(0.88);
}

/* 44px de large pour un retrait de ~14px autour de la loupe, comme le champ du
   design system (padding 12px 14px). */
.rl-search.is-open .rl-search__toggle {
	width: calc(var(--rl-field-height) - 2px);
	color: var(--rl-fg-mute);
	background: transparent;
	cursor: text;
}

/* À l'ouverture, la loupe reste droite — elle rapetisse simplement en prenant sa
   place de préfixe dans le champ. */
.rl-search.is-open .rl-search__toggle .rl-icon {
	transform: scale(0.9);
}

.rl-search__toggle-label {
	display: var(--rl-label-display);
	font-size: var(--rl-fs-sm);
	font-family: var(--rl-font-title);
	white-space: nowrap;
}

.rl-search.is-open .rl-search__toggle-label {
	display: none;
}

/* ---- Saisie ---- */

/*
 * Le champ replié doit occuper zéro place. Divi impose `width: 100%` aux <input>
 * avec une spécificité d'ID (`.et-db #et-boc .et-l …`) : d'où les !important sur
 * la géométrie, seul moyen de rester maître de la largeur.
 */
.rl-search .rl-search__input {
	flex: 0 1 0px;
	width: 0 !important;
	min-width: 0 !important;
	max-width: 100% !important;
	height: calc(var(--rl-field-height) - 8px) !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: var(--rl-font);
	font-size: var(--rl-fs);
	line-height: 1.4;
	color: var(--rl-fg);
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	opacity: 0;
	transform: translateX(-8px);
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	transition:
		opacity var(--rl-dur) var(--rl-ease),
		transform var(--rl-dur) var(--rl-ease);
}

.rl-search__input::placeholder {
	color: var(--rl-fg-mute);
	opacity: 1;
}

.rl-search__input:focus {
	outline: none;
	background: none;
	border: 0;
	box-shadow: none;
}

/* Croix native de Chrome/Safari : on garde la nôtre. */
.rl-search__input::-webkit-search-cancel-button,
.rl-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.rl-search.is-open .rl-search__input {
	flex: 1 1 auto;
	width: auto !important;
	padding: 0 4px !important;
	opacity: 1;
	transform: none;
	/* La saisie apparaît une fois le champ presque déplié. */
	transition-delay: 90ms;
}

/* iOS zoome sur tout champ dont le texte fait moins de 16 px. */
@media (pointer: coarse) {
	.rl-search__input {
		font-size: 16px;
	}
}

.rl-search__clear {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	color: var(--rl-fg-mute);
	background: none;
	border: 0;
	border-radius: var(--rl-pill);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color var(--rl-dur-fast) ease-out, background-color var(--rl-dur-fast) ease-out;
	animation: rl-pop var(--rl-dur) var(--rl-ease-spring);
}

.rl-search__clear:hover {
	color: var(--rl-fg);
	background: var(--rl-hover-bg);
}

.rl-search__clear[hidden] {
	display: none;
}

/* Indicateur de chargement — un simple anneau qui tourne. */
.rl-search__spinner {
	flex: 0 0 auto;
	width: 0;
	height: 16px;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 120ms linear;
}

.rl-search.is-loading .rl-search__spinner {
	width: 16px;
	margin-right: 6px;
	border: 2px solid var(--rl-border-strong);
	border-top-color: var(--rl-accent);
	opacity: 1;
	animation: rl-spin 700ms linear infinite;
}

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

@keyframes rl-pop {
	from {
		opacity: 0;
		transform: scale(0.7);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* ============================================================================
 * 3. PANNEAU DE RÉSULTATS
 * ==========================================================================*/

.rl-search__results {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: min(var(--rl-results-width), calc(100vw - 24px));
	max-height: min(70vh, 560px);
	padding: 6px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--rl-bg);
	border: 1px solid var(--rl-border);
	border-radius: var(--rl-panel-radius);
	box-shadow: var(--rl-shadow);
	text-align: left;

	/* État d'arrivée — le JavaScript ajoute `is-visible` à l'image suivante. */
	opacity: 0;
	transform: translateY(-8px) scale(0.98);
	transform-origin: top right;
	transition:
		opacity var(--rl-dur-fast) ease-out,
		transform var(--rl-dur) var(--rl-ease-spring);
}

.rl-search__results.is-visible {
	opacity: 1;
	transform: none;
}

.rl-search--left .rl-search__results {
	right: auto;
	left: 0;
	transform-origin: top left;
}

.rl-search__results[hidden] {
	display: none;
}

.rl-search__backdrop {
	display: none;
}

@media (max-width: 782px) {
	.rl-search.is-open .rl-search__backdrop {
		position: fixed;
		inset: 0;
		display: block;
		z-index: calc(var(--rl-z) - 1);
		background: rgba(20, 24, 40, 0.18);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rl-search__panel,
	.rl-search__form,
	.rl-search__input,
	.rl-search__toggle,
	.rl-search__toggle .rl-icon,
	.rl-search__results {
		transition: none;
	}

	.rl-search__clear {
		animation: none;
	}

	.rl-search.is-loading .rl-search__spinner {
		animation: none;
	}

	.rl-search.is-open .rl-search__toggle .rl-icon {
		transform: none;
	}
}

/* ============================================================================
 * 4. GROUPES ET RÉSULTATS
 * ==========================================================================*/

.rl-group + .rl-group {
	margin-top: 4px;
	border-top: 1px solid var(--rl-border);
	padding-top: 6px;
}

.rl-group__label {
	margin: 8px 12px 4px;
	font-family: var(--rl-font-title);
	font-size: var(--rl-fs-xs);
	font-weight: 700;
	letter-spacing: var(--rl-eyebrow-ls);
	text-transform: uppercase;
	color: var(--rl-eyebrow);
}

.rl-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rl-list__row {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rl-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	color: var(--rl-fg);
	text-decoration: none;
	border-radius: var(--rl-item-radius);
	transition: background-color var(--rl-dur-fast) ease-out;
}

.rl-item:hover,
.rl-item:focus,
.rl-item.is-active {
	background: var(--rl-hover-bg);
	color: var(--rl-fg);
	text-decoration: none;
	outline: none;
}

.rl-item__media {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	background: var(--rl-field-bg);
	border-radius: var(--rl-media-radius);
	color: var(--rl-fg-mute);
}

.rl-item__media--wide {
	width: 64px;
	height: 44px;
}

.rl-item__media--icon {
	width: 38px;
	height: 38px;
}

.rl-item__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

.rl-item__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rl-item__title {
	font-family: var(--rl-font-title);
	font-size: var(--rl-fs);
	font-weight: var(--rl-title-weight);
	letter-spacing: var(--rl-title-ls);
	line-height: 1.25;
	color: var(--rl-fg);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.rl-item__meta,
.rl-item__excerpt {
	font-size: var(--rl-fs-sm);
	color: var(--rl-fg-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rl-item__meta {
	font-size: var(--rl-fs-xs);
	color: var(--rl-fg-mute);
}

.rl-item__price {
	font-family: var(--rl-font-title);
	font-size: var(--rl-fs-sm);
	font-weight: 700;
	color: var(--rl-price);
}

.rl-item__price del {
	margin-right: 6px;
	font-family: var(--rl-font);
	font-weight: 600;
	font-size: var(--rl-fs-xs);
	color: var(--rl-price-old);
}

.rl-item__price ins {
	text-decoration: none;
	color: var(--rl-price-sale);
}

.rl-item__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 3px;
}

.rl-badge {
	display: inline-block;
	padding: 3px 10px;
	font-family: var(--rl-font-title);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: -0.01em;
	border-radius: var(--rl-pill);
	background: var(--rl-bg);
	color: var(--rl-fg-soft);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.rl-badge--sale {
	background: var(--rl-accent);
	color: var(--rl-accent-fg);
	box-shadow: none;
}

.rl-item .rl-icon--arrow {
	flex: 0 0 auto;
	color: var(--rl-fg-mute);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity var(--rl-dur-fast) ease-out, transform var(--rl-dur-fast) var(--rl-ease);
}

.rl-item:hover .rl-icon--arrow,
.rl-item.is-active .rl-icon--arrow {
	opacity: 1;
	transform: none;
}

.rl-mark {
	padding: 0 1px;
	background: var(--rl-mark-bg);
	color: var(--rl-mark-fg);
	border-radius: 3px;
}

/* ============================================================================
 * 5. PIED DE PANNEAU, ÉTATS VIDES
 * ==========================================================================*/

.rl-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 4px;
	padding: 12px;
	font-family: var(--rl-font-title);
	font-size: var(--rl-fs-sm);
	font-weight: 800;
	color: var(--rl-primary);
	text-decoration: none;
	border-top: 1px solid var(--rl-border);
	border-radius: var(--rl-item-radius);
	transition: background-color var(--rl-dur-fast) ease-out, color var(--rl-dur-fast) ease-out;
}

.rl-footer:hover,
.rl-footer.is-active {
	background: var(--rl-hover-bg);
	color: var(--rl-accent);
	text-decoration: none;
}

.rl-empty {
	padding: 20px 14px;
	text-align: center;
}

.rl-empty__title {
	margin: 0 0 4px;
	font-family: var(--rl-font-title);
	font-size: var(--rl-fs);
	font-weight: 800;
	color: var(--rl-fg);
}

.rl-empty__hint,
.rl-empty__suggestion {
	margin: 0;
	font-size: var(--rl-fs-sm);
	color: var(--rl-fg-soft);
}

.rl-correction {
	margin: 8px 12px;
	font-size: var(--rl-fs-sm);
	color: var(--rl-fg-soft);
}

.rl-suggest {
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var(--rl-accent);
	background: none;
	border: 0;
	border-bottom: 2px solid currentColor;
	cursor: pointer;
}

.rl-message {
	padding: 14px;
	font-size: var(--rl-fs-sm);
	color: var(--rl-fg-soft);
	text-align: center;
}

/* ============================================================================
 * 6. BARRE DÉPLIÉE (page de résultats)
 * ==========================================================================*/

.rl-search--expanded {
	display: block;
	width: 100%;
	max-width: var(--rl-open-width);
	height: auto;
}

.rl-search--expanded .rl-search__panel {
	position: relative;
	top: auto;
	right: auto;
	left: auto;
	width: 100%;
	transform: none;
}

.rl-search--expanded .rl-search__form {
	height: var(--rl-field-height);
	padding: 0 6px 0 0;
	background: var(--rl-field-bg-open);
	border-color: var(--rl-border-strong);
	border-radius: var(--rl-field-radius);
}

.rl-search--expanded .rl-search__input {
	flex: 1 1 auto;
	width: auto !important;
	padding: 0 4px !important;
	opacity: 1;
	transform: none;
}

.rl-search--expanded .rl-search__results {
	width: 100%;
}

/* ============================================================================
 * 7. PAGE DE RÉSULTATS
 * ==========================================================================*/

.rl-page {
	font-family: var(--rl-font);
	color: var(--rl-fg);
}

/*
 * Pleine largeur : on annule la gouttière du thème en débordant sur toute la
 * fenêtre, puis on recentre le contenu dans .rl-page__inner. Fonctionne quel que
 * soit le conteneur Divi parent, sans dépendre d'un gabarit particulier.
 */
.rl-page--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.rl-page__inner {
	max-width: var(--rl-page-max);
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 28px);
}

.rl-page--full .rl-search--expanded {
	max-width: 640px;
}

.rl-page__search {
	margin-bottom: 24px;
}

.rl-page__count {
	margin: 0 0 4px;
	font-family: var(--rl-font-title);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.rl-page__intro,
.rl-page__empty {
	color: var(--rl-fg-soft);
}

.rl-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 20px;
}

.rl-tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-family: var(--rl-font-title);
	font-size: var(--rl-fs-sm);
	font-weight: 700;
	color: var(--rl-fg-soft);
	text-decoration: none;
	background: var(--rl-field-bg);
	border: 1px solid transparent;
	border-radius: var(--rl-pill);
	transition: all var(--rl-dur-fast) var(--rl-ease-spring);
}

.rl-tab:hover {
	color: var(--rl-fg);
	text-decoration: none;
	transform: translateY(-2px);
}

.rl-tab.is-active {
	color: var(--rl-accent-fg);
	background: var(--rl-primary);
}

.rl-tab__count {
	font-size: var(--rl-fs-xs);
	opacity: 0.75;
}

.rl-list--page .rl-list__row + .rl-list__row {
	border-top: 1px solid var(--rl-border);
}

.rl-list--page .rl-item {
	padding: 14px 10px;
}

.rl-list--page .rl-item__media {
	width: 72px;
	height: 72px;
}

.rl-list--page .rl-item__media--wide {
	width: 104px;
	height: 72px;
}

.rl-list--page .rl-item__title {
	font-size: 17px;
}

.rl-list--page .rl-item__excerpt {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.rl-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 24px;
}

.rl-page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	font-family: var(--rl-font-title);
	font-size: var(--rl-fs-sm);
	font-weight: 700;
	color: var(--rl-fg-soft);
	text-decoration: none;
	background: var(--rl-field-bg);
	border-radius: var(--rl-pill);
	transition: all var(--rl-dur-fast) ease-out;
}

.rl-page-link:hover {
	color: var(--rl-fg);
	text-decoration: none;
}

.rl-page-link.is-active {
	color: var(--rl-accent-fg);
	background: var(--rl-primary);
}

/* ============================================================================
 * 8. DIVERS
 * ==========================================================================*/

/* Divi et certains thèmes stylent agressivement les <input> et <button>. */
.rl-search input[type="search"].rl-search__input,
.rl-search button.rl-search__toggle,
.rl-search button.rl-search__clear {
	text-transform: none;
	letter-spacing: normal;
}

.rl-search .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}