/*
 * VivaWeb — E-commerce : produits récemment consultés.
 *
 * Chargée là où le shortcode [vw_recently_viewed] est rendu. Aucune couleur en
 * dur : le nom et le prix héritent de la typographie du thème, seule la mise en
 * page appartient au module — et la taille du titre, voir plus bas.
 */

.vw-rv {
	--vw-rv-columns: 1;
	--vw-rv-thumb: 6.25rem;
	--vw-rv-gap: 1.5rem;

	margin: 0 0 2rem;
}

/*
 * Le bloc naît masqué et n'est révélé qu'une fois rempli — mais il garde une
 * boîte d'un pixel, invisible et hors de l'arbre d'accessibilité.
 *
 * Un `display: none` n'a aucune géométrie : l'observateur d'intersection qui
 * décide du moment de la requête ne verrait jamais le bloc approcher, et
 * n'appellerait donc jamais le serveur. `margin: 0` parce que la marge basse
 * creuserait sinon un trou dans la colonne avant même qu'il y ait quoi que ce
 * soit à montrer.
 *
 * Repli sûr : si la feuille ne se charge pas, la règle du navigateur reprend
 * la main et `hidden` masque le bloc pour de bon.
 */
.vw-rv[hidden] {
	display: block;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
}

/*
 * Le titre est un h2, mais un h2 de thème fait la taille d'un titre de page :
 * dans une sidebar, à côté des groupes de filtres, il écrasait tout. Mêmes
 * réglages que `.vw-fl__group-title` (front.css), pour que les deux titres se
 * lisent comme une seule famille. `em` et non `rem` : la taille suit le texte
 * environnant, où que le shortcode soit posé.
 */
.vw-rv__title {
	margin: 0 0 0.75rem;
	font-size: 0.95em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.vw-rv__list {
	display: grid;
	grid-template-columns: repeat( var( --vw-rv-columns, 1 ), minmax( 0, 1fr ) );
	gap: var( --vw-rv-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

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

/*
 * Trois classes, à dessein : Kadence souligne les liens de contenu avec
 * `.inner-link-style-normal a:not(.button)`, qu'un sélecteur plus court ne
 * l'emporterait pas sur. Le soulignement est rendu au survol, où il a un sens.
 */
.vw-rv .vw-rv__item .vw-rv__link {
	display: grid;
	grid-template-columns: var( --vw-rv-thumb ) minmax( 0, 1fr );
	align-items: start;
	gap: 1.25rem;
	color: inherit;
	text-decoration: none;
}

.vw-rv .vw-rv__item .vw-rv__link:hover .vw-rv__name,
.vw-rv .vw-rv__item .vw-rv__link:focus-visible .vw-rv__name {
	text-decoration: underline;
}

.vw-rv__figure {
	display: block;
}

.vw-rv__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.25rem;
}

.vw-rv__body {
	display: block;
	min-width: 0;
}

.vw-rv__name {
	display: block;
	font-weight: 700;
	line-height: 1.35;
}

.vw-rv__price {
	display: block;
	margin-top: 0.4em;
	line-height: 1.35;
}

/* Sous 768 px, les colonnes s'empilent : une vignette de 100 px et son texte
 * ne tiennent pas à deux de front. */
@media screen and (max-width: 767px) {

	.vw-rv__list {
		grid-template-columns: minmax( 0, 1fr );
	}
}