/* ==========================================================================
   Etika Spirulina — Panier latéral FunnelKit
   Maquette de référence : « ES - Checkout V1 - 1 Mini panier ».
   --------------------------------------------------------------------------
   SPÉCIFICITÉ, à lire avant de modifier quoi que ce soit.

   Le plugin préfixe presque toutes ses règles par l'identifiant #fkcart-modal,
   et descend jusqu'à trois classes : `#fkcart-modal .fkcart-preview-ui
   .fkcart-slider-heading .fkcart-title` pèse (1,3,0). Une règle en
   `.fkcart-title` seule, même chargée après, ne l'emporterait pas.

   D'où le préfixe uniforme `body #fkcart-modal .fkcart-preview-ui`, qui pèse
   (1,2,1) avant même la classe visée. C'est verbeux, et c'est voulu : la seule
   alternative était le !important, qui aurait rendu la feuille impossible à
   surcharger à son tour. Ne pas raccourcir ces sélecteurs.

   Le voile et les messages sont hors du panneau, ils prennent le préfixe plus
   court `body #fkcart-modal`.

   Les couleurs viennent toutes de es-fk-jetons.css. Aucune valeur en dur ici
   en dehors des mesures reprises de la maquette.
   ========================================================================== */


/* ==========================================================================
   1. Panneau et voile
   ========================================================================== */

body #fkcart-modal .fkcart-modal-backdrop{
	background: rgba(14, 36, 22, .42);
}

body #fkcart-modal .fkcart-preview-ui{
	background: var(--es-fk-blanc);
	box-shadow: -20px 0 60px rgba(14, 36, 22, .22);
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 16px;
	line-height: 1.6;
}

body #fkcart-modal .fkcart-preview-ui a,
body #fkcart-modal .fkcart-preview-ui button,
body #fkcart-modal .fkcart-preview-ui input{
	font-family: var(--es-fk-font);
}

/* Le plugin pose 16 px de gouttière sur chaque bloc .fkcart-panel, articles
   compris. Les filets de séparation courent alors d'un bord à l'autre du
   panneau, alors que la maquette les rentre dans la gouttière. On neutralise
   ici, et on rend la gouttière aux conteneurs qui la portent.

   Les exclusions listent les blocs qui gardent leur propre gouttière, faute
   d'un conteneur au-dessus pour la leur donner : l'en-tête, la barre de
   récompense, et l'article offert, qui se distingue par un fond coloré et a
   donc besoin d'air entre son texte et son bord.

   Les exclure plutôt que surenchérir plus bas, et c'est délibéré : chaque
   :not() alourdit ce sélecteur, qui dépasse vite ce qu'une règle de mise en
   forme ordinaire peut atteindre. Une gouttière posée ailleurs disparaîtrait
   alors sans que rien ne le signale. Tout bloc à gouttière propre s'ajoute
   ici, pas en surenchère. */
body #fkcart-modal .fkcart-preview-ui .fkcart-panel:not(.fkwcs_fkcart_gpay_wrapper):not(.fkcart-slider-heading):not(.fkcart-reward-panel):not(.fkcart-free-item){
	padding-left: 0;
	padding-right: 0;
}


/* ==========================================================================
   2. En-tête
   ========================================================================== */

body #fkcart-modal .fkcart-preview-ui .fkcart-slider-header{
	background: var(--es-fk-blanc);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-slider-heading{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 20px var(--es-fk-gouttiere);
	border-bottom: 1px solid var(--es-fk-filet);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-slider-heading .fkcart-title{
	color: var(--es-fk-foret);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}

/* Le compte d'articles, entre parenthèses, dans le gabarit d'en-tête. */
body #fkcart-modal .fkcart-preview-ui .fkcart-slider-heading .fkcart-title span{
	color: var(--es-fk-foret-500);
	font-weight: 500;
	margin-left: 4px;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-slider-heading .fkcart-modal-close{
	width: 34px;
	height: 34px;
	flex: none;
	display: grid;
	place-items: center;
	border: 1px solid var(--es-fk-filet);
	border-radius: 50%;
	background: var(--es-fk-blanc);
	color: var(--es-fk-foret);
	cursor: pointer;
	transition: border-color .18s var(--es-fk-ease), background .18s var(--es-fk-ease);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-slider-heading .fkcart-modal-close:hover{
	border-color: var(--es-fk-filet-fonce);
	background: var(--es-fk-creme);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-slider-heading .fkcart-modal-close svg{
	width: 16px;
	height: 16px;
}


/* ==========================================================================
   3. Barre de récompense (habillage « classique »)
   ========================================================================== */

body #fkcart-modal .fkcart-preview-ui .fkcart-reward-panel{
	padding: 16px var(--es-fk-gouttiere) 4px;
	background: var(--es-fk-blanc);
	border: 0;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-reward-message{
	color: var(--es-fk-foret);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-reward-message strong,
body #fkcart-modal .fkcart-preview-ui .fkcart-reward-message b{
	font-weight: 600;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-progress-wrap{
	height: 7px;
	margin-top: 10px;
	border-radius: 99px;
	background: var(--es-fk-filet);
	overflow: hidden;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-progress-wrap .fkcart-progress-bar{
	height: 100%;
	border-radius: 99px;
	background: var(--es-fk-vif);
	transition: width .4s var(--es-fk-ease);
}

/* Les pastilles de palier de FunnelKit. La maquette n'en a pas : une barre
   nue et une phrase qui dit ce qu'il reste à parcourir. Les afficher
   doublonnerait ce que la phrase énonce déjà. */
body #fkcart-modal .fkcart-preview-ui .fkcart-reward-panel .fkcart-rewards{
	display: none;
}


/* ==========================================================================
   4. Corps : articles du panier
   ========================================================================== */

body #fkcart-modal .fkcart-preview-ui .fkcart-slider-body{
	padding-left: var(--es-fk-gouttiere);
	padding-right: var(--es-fk-gouttiere);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-slider-body .fkcart-item-wrap{
	padding-top: 0;
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item{
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 13px;
	padding: 18px 0;
	border-bottom: 1px solid var(--es-fk-filet);
	background: transparent;
}

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

/* Position statique volontaire : le bouton de retrait, imbriqué ici dans le
   gabarit, doit se caler sur la ligne entière et non sur l'image. */
body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-thumb-wrap{
	position: static;
	width: 74px;
	height: 74px;
	flex: none;
	border-radius: var(--es-fk-rayon);
	overflow: hidden;
	background: var(--es-fk-beige);
}

/* Deux enveloppes à dimensionner avant d'arriver à l'image, et les oublier
   la fait disparaître.

   .fkcart-image-wrapper est posée par le plugin, et c'est un <a> quand le
   produit est cliquable : sans hauteur déclarée, le `height: 100%` de l'image
   se calcule contre zéro et la vignette ne se voit plus.

   <picture> vient d'Imagify, qui encapsule les images et y remonte les
   attributs de l'<img>. Piège connu sur ce site, désamorcé ici. */
body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-thumb-wrap .fkcart-image-wrapper,
body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-thumb-wrap picture{
	display: block;
	width: 100%;
	height: 100%;
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-thumb-wrap img{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	object-fit: contain;
	object-position: center;
	border-radius: 0;
}

/* ---- retrait ---- */

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-remove-item{
	position: absolute;
	top: 16px;
	right: 0;
	left: auto;
	bottom: auto;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border: 0;
	background: none;
	color: var(--es-fk-foret-300);
	opacity: 1;
	transition: color .18s var(--es-fk-ease);
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-remove-item:hover{
	color: var(--es-fk-foret);
	background: none;
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-remove-item svg{
	width: 14px;
	height: 14px;
}

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

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-item-info{
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-item-meta{
	flex: 1;
	min-width: 0;
	padding-right: 18px;
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-item-title{
	display: block;
	color: var(--es-fk-foret);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item a.fkcart-item-title:hover{
	color: var(--es-fk-lien);
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-item-meta-content{
	margin-top: 3px;
	color: var(--es-fk-foret-500);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.35;
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-select-options{
	color: var(--es-fk-lien);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* ---- quantité ---- */

body #fkcart-modal .fkcart-preview-ui .fkcart-qty-wrap{
	margin-top: 9px;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-quantity-selector{
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--es-fk-filet-fonce);
	border-radius: 7px;
	background: var(--es-fk-blanc);
	overflow: hidden;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-quantity-selector .fkcart-quantity-button{
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	color: var(--es-fk-foret-500);
	cursor: pointer;
	transition: color .18s var(--es-fk-ease), background .18s var(--es-fk-ease);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-quantity-selector .fkcart-quantity-button:hover{
	color: var(--es-fk-foret);
	background: var(--es-fk-creme);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-quantity-selector .fkcart-quantity-button svg{
	width: 14px;
	height: 14px;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-quantity-selector .fkcart-quantity__input{
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--es-fk-foret);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

/* ---- prix ---- */

/* Le décalage haut dégage le bouton de retrait, calé à 16 px du haut de la
   ligne : sans lui, la croix et le montant se chevauchent sur les noms
   longs. Même valeur que sur la maquette. */
body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-item-misc{
	margin-top: 22px;
	text-align: right;
	white-space: nowrap;
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-item-price{
	color: var(--es-fk-foret);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-item-price del{
	display: block;
	color: var(--es-fk-foret-300);
	font-size: 12px;
	font-weight: 400;
	opacity: 1;
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-item-price ins{
	background: none;
	text-decoration: none;
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-discounted-price{
	margin-top: 4px;
}

body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-discounted-text{
	color: var(--es-fk-lien);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

/* « Offerte » à la place du montant, posé par es-fk-offre.php. Vert lien, pas
   vert vif : c'est du texte de 15 px, il lui faut ses 4,18:1. */
body #fkcart-modal .fkcart-preview-ui .es-fk-offre-montant{
	color: var(--es-fk-lien);
	font-weight: 600;
}

/* Article offert par un palier de récompense : il n'a ni croix ni sélecteur
   de quantité, on le signale par la surface plutôt que par une étiquette. */
body #fkcart-modal .fkcart-preview-ui .fkcart--item.fkcart-free-item{
	padding: 14px;
	margin: 6px 0;
	border-radius: var(--es-fk-rayon);
	border-bottom-color: transparent;
	background: var(--es-fk-vif-050);
}

/* Le bouton de retrait est absent sur un article offert : la colonne de
   droite n'a plus à lui réserver sa place, et le montant remonte à hauteur
   du nom. */
body #fkcart-modal .fkcart-preview-ui .fkcart--item.fkcart-free-item .fkcart-item-misc{
	margin-top: 0;
}


/* ==========================================================================
   5. Pied : coupon
   ========================================================================== */

body #fkcart-modal .fkcart-preview-ui .fkcart-slider-footer{
	padding: 18px var(--es-fk-gouttiere) 22px;
	border-top: 1px solid var(--es-fk-filet);
	background: var(--es-fk-blanc);
}

/* La gouttière vient du pied, qui la porte pour tous ses blocs. Celle que le
   plugin pose ici s'y ajoutait, et le coupon se retrouvait décalé vers la
   droite par rapport aux lignes de sous-total et de total. */
body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-area{
	padding-left: 0;
	padding-right: 0;
	border: 0;
	background: transparent;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-area .fkcart-coupon-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 0 14px;
	cursor: pointer;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-area .fkcart-coupon-head .fkcart-coupon-title{
	color: var(--es-fk-foret);
	font-size: 14px;
	font-weight: 600;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-area .fkcart-coupon-icon{
	display: flex;
	align-items: center;
	color: var(--es-fk-foret-500);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-area .fkcart-coupon-icon svg{
	width: 16px;
	height: 16px;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-area .fkcart-coupon-body{
	padding-bottom: 14px;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-area .fkcart-coupon-input-wrap{
	display: flex;
	gap: 8px;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-area .fkcart-coupon-input-wrap #fkcart-coupon__input{
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--es-fk-filet-fonce);
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-blanc);
	box-shadow: none;
	color: var(--es-fk-foret);
	font-size: 14.5px;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-area .fkcart-coupon-input-wrap #fkcart-coupon__input::placeholder{
	color: var(--es-fk-foret-300);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-area .fkcart-coupon-input-wrap #fkcart-coupon__input:focus,
body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-area .fkcart-coupon-input-wrap #fkcart-coupon__input:hover{
	border-color: var(--es-fk-vif);
	box-shadow: 0 0 0 3px rgba(51, 159, 91, .16);
	outline: none;
}

/* Bouton secondaire : contour vert forêt, aplat au survol. Le vert vif est
   réservé à l'action principale, un seul aplat vif par écran. */
body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-area .fkcart-coupon-input-wrap .fkcart-coupon-button{
	height: 48px;
	flex: none;
	display: grid;
	place-items: center;
	padding: 0 20px;
	border: 1px solid var(--es-fk-foret);
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-blanc);
	color: var(--es-fk-foret);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s var(--es-fk-ease), color .18s var(--es-fk-ease);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-area .fkcart-coupon-input-wrap .fkcart-coupon-button:hover{
	background: var(--es-fk-foret);
	color: var(--es-fk-blanc);
}


/* ==========================================================================
   6. Pied : récapitulatif, total et ordre des blocs
   ========================================================================== */

/* Le gabarit sort le bouton, puis « Continuer mes achats », et n'offre
   aucun point d'accroche entre les deux. Le display:contents dissout le
   conteneur du bouton, ce qui remonte ses deux enfants au rang de frères de
   la mention insérée par es-fk-mini-panier.php ; les quatre blocs se rangent
   alors librement. Le CSS du plugin, tout en sélecteurs descendants,
   continue de s'appliquer, et son JavaScript ne mesure aucun de ces blocs. */
body #fkcart-modal .fkcart-preview-ui .fkcart_summary_cta{
	display: flex;
	flex-direction: column;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-checkout-wrap{
	display: contents;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-order-summary{ order: 1; }
body #fkcart-modal .fkcart-preview-ui .fkcart-checkout-info{  order: 2; }
body #fkcart-modal .fkcart-preview-ui .es-fk-note{            order: 3; }
body #fkcart-modal .fkcart-preview-ui .fkcart-shopping-link{  order: 4; }

/* Un seul filet en haut du pied, celui du conteneur. La maquette en dessine
   un second au-dessus du coupon, à 18 px du premier : deux lignes parallèles
   si près sont un artefact de mise en page, pas une intention. */
body #fkcart-modal .fkcart-preview-ui .fkcart-order-summary{
	padding-top: 6px;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-summary-line-item{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	font-size: 15px;
	line-height: 1.4;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-summary-text{
	color: var(--es-fk-foret-500);
	font-weight: 400;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-summary-text strong{
	font-weight: 400;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-summary-amount{
	color: var(--es-fk-foret);
	font-weight: 600;
	white-space: nowrap;
	text-align: right;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-summary-amount strong{
	font-weight: 600;
}

/* Livraison offerte et remise : la seule couleur du récapitulatif, elle
   marque le gain. Vert lien, pas vert vif, sur du texte de 15 px. */
body #fkcart-modal .fkcart-preview-ui .fkcart-shipping-wrap .fkcart-summary-amount,
body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-applied .fkcart-summary-amount{
	color: var(--es-fk-lien);
	font-weight: 600;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-applied .fkcart-coupon-label{
	color: var(--es-fk-foret-500);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-code.fkcart-coupon-code-wrapper{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-left: 8px;
	padding: 3px 10px;
	border: 1px solid var(--es-fk-vif-100);
	border-radius: 99px;
	background: var(--es-fk-vif-050);
	color: var(--es-fk-foret);
	font-size: 12.5px;
	font-weight: 600;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-coupon-applied .fkcart-remove-coupon{
	display: inline-flex;
	color: var(--es-fk-foret-500);
	cursor: pointer;
}

/* Mention « frais et taxes recalculés à la commande » du plugin. Elle
   s'insère entre la livraison et le total, où elle casse la lecture de la
   colonne de montants. Elle est remplacée, sous le bouton, par la mention
   émise dans es-fk-mini-panier.php. */
body #fkcart-modal .fkcart-preview-ui .fkcart-summary-line-item:has(.fkcart-shipping-tax-calculation-text){
	display: none;
}

/* Ligne « Total », greffée par es-fk-mini-panier.php. */
body #fkcart-modal .fkcart-preview-ui .fkcart-summary-line-item.es-fk-total{
	margin-top: 10px;
	padding-top: 16px;
	border-top: 1px solid var(--es-fk-filet);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.02em;
}

body #fkcart-modal .fkcart-preview-ui .es-fk-total .fkcart-summary-text{
	color: var(--es-fk-foret);
	font-weight: 700;
}

body #fkcart-modal .fkcart-preview-ui .es-fk-total .fkcart-summary-amount{
	font-size: 21px;
	font-weight: 700;
}

body #fkcart-modal .fkcart-preview-ui .es-fk-total .fkcart-summary-amount small{
	display: none;
}


/* ==========================================================================
   7. Pied : bouton de commande et mentions
   ========================================================================== */

body #fkcart-modal .fkcart-preview-ui .fkcart-checkout-wrap #fkcart-checkout-button{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 14px;
	padding: 18px 22px;
	border: 0;
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-vif);
	box-shadow: none;
	color: var(--es-fk-blanc);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	transition: background .18s var(--es-fk-ease);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-checkout-wrap #fkcart-checkout-button:hover,
body #fkcart-modal .fkcart-preview-ui .fkcart-checkout-wrap #fkcart-checkout-button:focus{
	background: var(--es-fk-vif-700);
	color: var(--es-fk-blanc);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-checkout-wrap #fkcart-checkout-button .fkcart-checkout--icon{
	display: flex;
	align-items: center;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-checkout-wrap #fkcart-checkout-button .fkcart-checkout--icon svg{
	width: 17px;
	height: 17px;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-checkout-wrap #fkcart-checkout-button .fkcart-checkout--price,
body #fkcart-modal .fkcart-preview-ui .fkcart-checkout-wrap #fkcart-checkout-button .fkcart-checkout--price *{
	color: var(--es-fk-blanc);
	font-weight: 700;
}

body #fkcart-modal .fkcart-preview-ui .es-fk-note{
	margin: 10px 0 0;
	color: var(--es-fk-foret-500);
	font-size: 12.5px;
	line-height: 1.5;
	text-align: center;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-shopping-link{
	display: block;
	width: 100%;
	margin-top: 14px;
	color: var(--es-fk-foret-500);
	font-size: 14.5px;
	font-weight: 500;
	text-align: center;
	text-decoration: underline;
	text-decoration-color: var(--es-fk-filet-fonce);
	text-underline-offset: .22em;
	transition: color .18s var(--es-fk-ease), text-decoration-color .18s var(--es-fk-ease);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-shopping-link:hover{
	color: var(--es-fk-foret);
	text-decoration-color: var(--es-fk-foret);
}


/* ==========================================================================
   8. Panier vide
   ========================================================================== */

body #fkcart-modal .fkcart-preview-ui .fkcart-zero-state{
	padding: 48px var(--es-fk-gouttiere);
	text-align: center;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-zero-state .fkcart-icon-cart{
	display: flex;
	justify-content: center;
	color: var(--es-fk-filet-fonce);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-zero-state-title{
	margin-top: 18px;
	color: var(--es-fk-foret);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-zero-state-text{
	margin-top: 8px;
	color: var(--es-fk-foret-500);
	font-size: 14px;
	line-height: 1.5;
}

body #fkcart-modal .fkcart-preview-ui .fkcart-zero-state .fkcart-shop-button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 22px;
	padding: 14px 26px;
	border: 0;
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-vif);
	color: var(--es-fk-blanc);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background .18s var(--es-fk-ease);
}

body #fkcart-modal .fkcart-preview-ui .fkcart-zero-state .fkcart-shop-button:hover{
	background: var(--es-fk-vif-700);
	color: var(--es-fk-blanc);
}


/* ==========================================================================
   9. Messages
   ========================================================================== */

body #fkcart-modal .fkcart-slider-notices{
	border-radius: var(--es-fk-rayon);
	font-family: var(--es-fk-font);
	font-size: 13.5px;
	line-height: 1.45;
}

body #fkcart-modal .fkcart-slider-notices[data-status="success"]{
	background: var(--es-fk-vif-050);
	color: var(--es-fk-foret);
}

body #fkcart-modal .fkcart-slider-notices[data-status="success"] .fkcart-notice-icon{
	color: var(--es-fk-lien);
}


/* ==========================================================================
   10. Sous 480 px
   Le panneau occupe toute la largeur : la gouttière se resserre, la vignette
   rétrécit, le reste tient tel quel.
   ========================================================================== */

@media (max-width: 480px){

	body #fkcart-modal .fkcart-preview-ui{
		--es-fk-gouttiere: 18px;
	}

	body #fkcart-modal .fkcart-preview-ui .fkcart--item .fkcart-thumb-wrap{
		width: 64px;
		height: 64px;
	}

	body #fkcart-modal .fkcart-preview-ui .fkcart-checkout-wrap #fkcart-checkout-button{
		padding: 16px 18px;
		font-size: 15.5px;
	}

	body #fkcart-modal .fkcart-preview-ui .fkcart-summary-line-item.es-fk-total,
	body #fkcart-modal .fkcart-preview-ui .es-fk-total .fkcart-summary-amount{
		font-size: 19px;
	}
}


/* ==========================================================================
   11. Mouvement réduit
   ========================================================================== */

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

	body #fkcart-modal .fkcart-preview-ui,
	body #fkcart-modal .fkcart-preview-ui *{
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}