/* ==========================================================================
   Etika Spirulina — Suggestions du panier latéral
   Markup produit par inc/funnelkit/es-fk-cross-sell.php.
   --------------------------------------------------------------------------
   Volontairement sobre. Le bloc est posé juste au-dessus du bouton de
   commande : s'il attire autant l'œil que lui, il détourne de l'achat au lieu
   de l'augmenter. Fond beige, pas de bordure colorée, boutons en contour.
   ========================================================================== */

body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell{
	flex: none;
	padding: 12px var(--es-fk-gouttiere) 14px;
	border-top: 1px solid var(--es-fk-filet);
	background: var(--es-fk-creme);
	font-family: var(--es-fk-font);
}

body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__titre{
	margin: 0 0 10px;
	color: var(--es-fk-foret-500);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	line-height: 1.4;
	text-transform: uppercase;
}

body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__liste{
	margin: 0;
	padding: 0;
	list-style: none;
}

body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__item{
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--es-fk-filet);
}

body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__item:last-child{
	border-bottom: 0;
	padding-bottom: 0;
}

/* ---- vignette ---- */

body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__media{
	flex: none;
	display: block;
	width: 44px;
	height: 44px;
	border-radius: 6px;
	background: var(--es-fk-blanc);
	overflow: hidden;
}

/* Imagify encapsule les images dans un <picture> : sans hauteur sur
   l'enveloppe, le 100 % de l'image se calcule contre zéro. */
body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__media picture{
	display: block;
	width: 100%;
	height: 100%;
}

body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__media img{
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	object-position: center;
}

/* ---- texte ---- */

body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__txt{
	flex: 1;
	min-width: 0;
}

/* Deux lignes au plus : un nom long ne doit pas repousser le bouton ni
   faire grandir le bloc, qui mange la place de la liste d'articles. */
body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__nom{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--es-fk-foret);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
}

body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__prix{
	display: block;
	margin-top: 2px;
	color: var(--es-fk-foret-500);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
}

body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__prix .amount,
body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__prix bdi,
body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__prix span{
	font: inherit;
	color: inherit;
}

body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__prix del{
	display: none;
}

/* ---- bouton ---- */

/* Contour vert forêt, pas d'aplat : l'aplat vif est celui du bouton de
   commande, à quelques pixels en dessous. */
body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__cta{
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 16px;
	border: 1px solid var(--es-fk-foret);
	border-radius: 99px;
	background: transparent;
	box-shadow: none;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background .18s var(--es-fk-ease), color .18s var(--es-fk-ease);
}

body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__cta:hover,
body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__cta:focus{
	background: var(--es-fk-foret);
	color: var(--es-fk-blanc);
}

/* État d'attente posé par le script du plugin pendant l'ajout. */
body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__cta.fkcart-loading{
	color: transparent;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce){

	body :is(#fkcart-modal .fkcart-preview-ui, .elementor-shortcode) .es-fk-xsell__cta{
		transition: none;
	}
}