/**
 * Suggestions de la barre de recherche.
 * -----------------------------------------------------------------------------
 * L'ancienne liste n'affichait qu'une image en taille d'origine, la categorie
 * et le prix. On y ajoute la reference et la disponibilite, les deux
 * informations que reclame un client qui cherche une piece, et on cadre les
 * vignettes pour que la liste garde un rythme regulier.
 *
 * Les couleurs reprennent celles du site : marine pour le texte, corail pour
 * l'accent, gris clair pour les separations.
 */

.rn-suggestions {
	--rn-marine: #1a1d3e;
	--rn-corail: #fd604f;
	--rn-gris: #5b6178;
	--rn-trait: #e3e6ed;
	--rn-vert: #0e7c4a;

	margin: 0;
	padding: 6px;
	list-style: none;
	max-height: min(70vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.rn-suggestion {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 10px;
	border-radius: 10px;
	border-bottom: 1px solid var(--rn-trait);
	transition: background-color .12s ease;
}

.rn-suggestion:last-child { border-bottom: 0; }

.rn-suggestion:hover,
.rn-suggestion.is-active {
	background: #fff1ee;
}

/* Le survol au clavier doit se voir autant que le survol a la souris. */
.rn-suggestion.is-active {
	outline: 2px solid var(--rn-corail);
	outline-offset: -2px;
}

.rn-suggestion .nikstore-ajax-product-image {
	flex: 0 0 62px;
	width: 62px;
	height: 62px;
	border-radius: 8px;
	overflow: hidden;
	background: #f5f5f7;
}

.rn-suggestion .nikstore-ajax-product-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.rn-suggestion .nikstore-ajax-product-data {
	flex: 1 1 auto;
	min-width: 0;
}

.rn-suggestion__ref {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rn-gris);
	margin-bottom: 2px;
}

.rn-suggestion h3 {
	margin: 0 0 3px;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 600;
}

.rn-suggestion h3 a {
	color: var(--rn-marine);
	text-decoration: none;
	/* Deux lignes au maximum : au-dela, la liste perd son rythme. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.rn-suggestion h3 a:hover { color: var(--rn-corail); }

.rn-suggestion .nikstore-ajax-product-price {
	font-size: 15px;
	font-weight: 700;
	color: var(--rn-marine);
}

.rn-suggestion .nikstore-ajax-product-price del { opacity: .5; font-weight: 400; }
.rn-suggestion .nikstore-ajax-product-price ins { text-decoration: none; color: var(--rn-corail); }

.rn-suggestion__stock {
	display: inline-block;
	margin-top: 3px;
	font-size: 12px;
	font-weight: 600;
}

.rn-suggestion__stock--oui { color: var(--rn-vert); }
.rn-suggestion__stock--non { color: var(--rn-gris); }

/* Sur mobile, la liste occupe toute la largeur et la vignette maigrit. */
@media (max-width: 768px) {

	.rn-suggestions {
		max-height: 60vh;
		padding: 4px;
	}

	.rn-suggestion {
		gap: 10px;
		padding: 9px 8px;
	}

	.rn-suggestion .nikstore-ajax-product-image {
		flex-basis: 50px;
		width: 50px;
		height: 50px;
	}

	.rn-suggestion h3 { font-size: 14px; }
}

/* Annonce de correction, sur la page de resultats. */
.rn-correction {
	margin: 0 0 16px;
	padding: 11px 15px;
	border-left: 3px solid #fd604f;
	border-radius: 0 8px 8px 0;
	background: #fff1ee;
	font-size: 15px;
	color: #3a4059;
}

.rn-correction strong { color: #1a1d3e; }

.rn-empty-suggest {
	margin: 0 0 14px;
	font-size: 16px;
}

.rn-empty-suggest a { color: #fd604f; }