/* ==========================================================================
   Etika Spirulina — Carte d'offre du récapitulatif de commande
   Markup produit par inc/funnelkit/es-fk-offre.php.
   Maquette : bloc « .bump » de « ES - Checkout V1 - 2 Informations ».
   --------------------------------------------------------------------------
   Le bloc nous appartient, personne ne cherche à le surcharger : le préfixe
   court suffit, contrairement au reste du tunnel.
   ========================================================================== */

/* Marqueur d'état lu par le JavaScript pour décider d'un rechargement. Il
   porte déjà l'attribut hidden ; la règle protège des thèmes qui le neutralisent. */
:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre-etat{
	display: none !important;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre{
	margin-top: 18px;
	padding: 16px;
	border: 1.5px dashed var(--es-fk-vif);
	border-radius: 10px;
	background: var(--es-fk-vif-050);
	font-family: var(--es-fk-font);
	color: var(--es-fk-foret);
}

/* ---- drapeau ---- */

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__drapeau{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 11px;
	padding: 3px 9px;
	border-radius: 4px;
	background: var(--es-fk-jaune);
	color: var(--es-fk-foret);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Le jaune tilleul n'accepte que du vert forêt par-dessus : blanc sur jaune
   est illisible, et le vert vif n'y monte pas assez haut. */
:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__drapeau svg{
	width: 13px;
	height: 13px;
	flex: none;
}

/* ---- corps ---- */

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__haut{
	display: flex;
	align-items: flex-start;
	gap: 13px;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__media{
	position: relative;
	flex: none;
	display: block;
	width: 58px;
	height: 58px;
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-blanc);
	overflow: hidden;
}

/* Imagify encapsule les images dans un <picture> et y remonte les attributs
   de l'<img> : sans display:block sur le wrapper, la vignette ne remplit pas
   son cadre. Piège connu sur ce site. */
:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__media picture{
	display: block;
	width: 100%;
	height: 100%;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__media img{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 3px;
	object-fit: contain;
	object-position: center;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__txt{
	flex: 1;
	min-width: 0;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__nom{
	display: block;
	color: var(--es-fk-foret);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__prix{
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.4;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__prix del{
	margin-right: 7px;
	color: var(--es-fk-foret-300);
	font-weight: 400;
	text-decoration-thickness: 1px;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__prix strong{
	color: var(--es-fk-foret);
	font-weight: 700;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__prix .amount,
:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__prix bdi{
	font: inherit;
	color: inherit;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__desc{
	margin: 4px 0 0;
	color: var(--es-fk-foret-500);
	font-size: 12.5px;
	line-height: 1.45;
}

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

/* Vert forêt, pas vert vif : le vif est déjà pris par le bouton de
   continuation juste en dessous. Deux aplats vifs sur le même écran feraient
   hésiter entre l'action principale et l'option.

   Les !important sur le fond ne sont pas de confort. FunnelKit applique sa
   couleur d'accent à tout bouton de type « button » par une règle en ligne,
   `body #wfacp-e-form button[type=button]:not(.white):not(.black)…`, qui pèse
   (1,3,2) et arrive après cette feuille. Sans eux, les deux états prenaient
   l'accent : celui d'« Ajouter » passait inaperçu, le vert forêt étant proche,
   mais « Retirer » ressortait en aplat vif au lieu du contour. */
:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__cta{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 12px;
	padding: 11px;
	border: 0;
	border-radius: var(--es-fk-rayon);
	background-color: var(--es-fk-foret) !important;
	box-shadow: none;
	color: var(--es-fk-blanc) !important;
	font-family: var(--es-fk-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: none;
	cursor: pointer;
	transition: background .18s var(--es-fk-ease);
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__cta::before{
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__cta:hover,
:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__cta:focus{
	background-color: var(--es-fk-foret-900) !important;
	color: var(--es-fk-blanc) !important;
}

/* ---- offre déjà prise ---- */

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre--prise{
	border-style: solid;
	border-color: var(--es-fk-vif-100);
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre--prise .es-fk-offre__cta{
	border: 1px solid var(--es-fk-filet-fonce);
	background-color: transparent !important;
	color: var(--es-fk-foret-500) !important;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre--prise .es-fk-offre__cta:hover{
	border-color: var(--es-fk-foret);
	background-color: transparent !important;
	color: var(--es-fk-foret) !important;
}

/* Le moins remplace le plus : le bouton dit ce qu'il fait maintenant. */
:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre--prise .es-fk-offre__cta::before{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232C5138' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* ---- attente et erreur ---- */

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre--attente{
	pointer-events: none;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre--attente .es-fk-offre__cta{
	opacity: .6;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__erreur{
	margin: 8px 0 0;
	color: #B00C0C;
	font-size: 12.5px;
	line-height: 1.4;
}

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__erreur:empty{
	display: none;
}

/* ---- la ligne offerte, dans le récapitulatif au-dessus ---- */

:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre-montant{
	color: var(--es-fk-lien);
	font-weight: 600;
}

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

	:is(#wfacp_mini_cart_start_h, .wfacp_collapsible_order_summary_wrap) .es-fk-offre__cta{
		transition: none;
	}
}