/* ==========================================================================
   Etika Spirulina — Page panier
   Rendu par le shortcode [woocommerce_cart].
   Grammaire reprise du panier latéral et du récapitulatif du tunnel.
   --------------------------------------------------------------------------
   PORTÉE DU SÉLECTEUR, ET POURQUOI ELLE EST SI ÉTROITE.

   Tout est ancré sur `.elementor-shortcode > .woocommerce`. Ce n'est pas de
   la coquetterie : la page porte aussi, pour l'instant, le widget Panier
   d'Elementor, conservé le temps de la bascule. Il produit exactement les
   mêmes classes WooCommerce, dans ses propres enveloppes `.e-cart-section`.
   Un sélecteur plus large habillerait les deux et donnerait deux paniers
   stylés l'un sous l'autre.

   Une fois le widget retiré de la page, cette portée reste valable et n'a pas
   à être élargie.
   ========================================================================== */

/* ==========================================================================
   1. Mise en page
   ========================================================================== */

/* CHAQUE CASE EST PLACÉE, RIEN N'EST LAISSÉ AU PLACEMENT AUTOMATIQUE.

   Le nombre d'enfants directs varie : bandeau de messages, jauge, formulaire,
   suggestions, lien de retour, récapitulatif, et tous ne sont pas toujours là.
   En placement automatique, le premier bloc supplémentaire prend la colonne de
   droite et repousse le récapitulatif d'une ligne — c'est ce qui est arrivé en
   ajoutant le lien de retour.

   Le `dense` permet au récapitulatif de remonter dans la première ligne libre
   de sa colonne, au lieu d'attendre que la colonne de gauche ait fini. */
body.woocommerce-cart .elementor-shortcode > .woocommerce{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	grid-auto-flow: row dense;
	align-items: start;
	gap: 40px 40px;
	max-width: 1440px;
	margin: 0 auto;
	font-family: var(--es-fk-font);
	color: var(--es-fk-foret);
}

/* Pleine largeur. Un « coupon appliqué » qui ne couvrirait qu'une moitié se
   lit mal, et la progression vers la livraison offerte concerne la commande
   entière, pas la seule liste d'articles. */
body.woocommerce-cart .elementor-shortcode > .woocommerce > .woocommerce-notices-wrapper{
	grid-column: 1 / -1;
}

/* Colonne de gauche : les articles, ce qu'on peut y ajouter, et la sortie. */
body.woocommerce-cart .elementor-shortcode > .woocommerce > .woocommerce-cart-form,
body.woocommerce-cart .elementor-shortcode > .woocommerce > .es-fk-xsell,
body.woocommerce-cart .elementor-shortcode > .woocommerce > .es-panier-retour{
	grid-column: 1;
}

/* Colonne de droite : le récapitulatif, et lui seul. */
body.woocommerce-cart .elementor-shortcode > .woocommerce > .cart-collaterals{
	grid-column: 2;
}

/* Les blocs de la colonne de gauche se suivent : l'écart de 40 px de la
   grille est fait pour séparer deux colonnes, pas pour espacer une liste
   d'articles de ses suggestions. */
body.woocommerce-cart .elementor-shortcode > .woocommerce > .es-fk-xsell{
	margin-top: -16px;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce > .es-panier-retour{
	margin-top: -24px;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .woocommerce-cart-form{
	margin: 0;
}


/* ==========================================================================
   2. Les articles
   --------------------------------------------------------------------------
   Le tableau reste un tableau : c'en est un, et le rendre lisible aux
   lecteurs d'écran vaut mieux que de le transformer en liste de cartes pour
   gagner quelques pixels. On l'aère, on retire ses filets verticaux.
   ========================================================================== */

body.woocommerce-cart .elementor-shortcode > .woocommerce table.shop_table{
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-radius: 0;
	background: transparent;
}

/* ---- en-tête ---- */

/* Le filet est sur la ligne, pas sur chaque cellule : posé cellule par
   cellule il se décalait d'une colonne à l'autre, chacune n'ayant pas la même
   hauteur de contenu. Le tableau est en border-collapse, une bordure sur le
   <tr> y est rendue d'un trait. */
body.woocommerce-cart .elementor-shortcode > .woocommerce table.shop_table thead tr{
	border-bottom: 1px solid var(--es-fk-filet-fonce);
}

body.woocommerce-cart .elementor-shortcode > .woocommerce table.shop_table thead th{
	padding: 0 10px 12px;
	border: 0;
	background: transparent;
	color: var(--es-fk-foret-500);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .13em;
	line-height: 1.4;
	text-align: left;
	text-transform: uppercase;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce table.shop_table thead th:first-child{
	padding-left: 0;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce table.shop_table thead th:last-child{
	padding-right: 0;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce table.shop_table thead th.product-price,
body.woocommerce-cart .elementor-shortcode > .woocommerce table.shop_table thead th.product-subtotal{
	text-align: right;
}

/* « Prix » et « Quantité » se touchaient : la colonne des quantités n'avait ni
   largeur ni alignement, elle se collait à sa voisine. */
body.woocommerce-cart .elementor-shortcode > .woocommerce table.shop_table thead th.product-quantity{
	width: 110px;
	text-align: center;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce table.shop_table thead th.product-price{
	width: 120px;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce table.shop_table thead th.product-subtotal{
	width: 120px;
}

/* ---- lignes ---- */

body.woocommerce-cart .elementor-shortcode > .woocommerce tr.woocommerce-cart-form__cart-item{
	border-bottom: 1px solid var(--es-fk-filet);
}

body.woocommerce-cart .elementor-shortcode > .woocommerce tr.woocommerce-cart-form__cart-item > td{
	padding: 18px 10px;
	border: 0;
	background: transparent;
	vertical-align: middle;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce tr.woocommerce-cart-form__cart-item > td:first-child{
	padding-left: 0;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce tr.woocommerce-cart-form__cart-item > td:last-child{
	padding-right: 0;
}

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

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-remove{
	width: 28px;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-remove a.remove{
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: transparent !important;
	color: var(--es-fk-foret-300) !important;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-remove a.remove:hover{
	background: var(--es-fk-creme) !important;
	color: var(--es-fk-foret) !important;
}

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

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-thumbnail{
	width: 86px;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-thumbnail a{
	display: block;
	width: 74px;
	height: 74px;
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-beige);
	overflow: hidden;
}

/* Imagify encapsule les images dans un <picture> : sans hauteur déclarée sur
   l'enveloppe, le 100 % de l'image se calcule contre zéro et la vignette
   disparaît. Piège connu sur ce site, déjà rencontré sur le panier latéral. */
body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-thumbnail picture{
	display: block;
	width: 100%;
	height: 100%;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-thumbnail img{
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
	object-position: center;
	border-radius: var(--es-fk-rayon);
}

/* ---- nom et variation ---- */

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-name a{
	color: var(--es-fk-foret);
	font-size: 14.8px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-name a:hover{
	color: var(--es-fk-lien);
}

/* Le nom de l'attribut est masqué, seule la valeur reste : sur ce catalogue
   il est rédigé comme une question posée sur la fiche produit, ce qui n'a
   plus de sens une fois le choix fait. Même traitement que dans le tunnel. */
body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-name dl.variation{
	margin: 4px 0 0;
	color: var(--es-fk-foret-500);
	font-size: 12.8px;
	line-height: 1.4;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-name dl.variation dt{
	display: none;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-name dl.variation dd,
body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-name dl.variation dd p{
	display: block;
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
}

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

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-price,
body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-subtotal{
	color: var(--es-fk-foret);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	text-align: right;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-price{
	font-weight: 400;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-price del,
body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-subtotal del{
	display: block;
	color: var(--es-fk-foret-300);
	font-size: 12.5px;
	font-weight: 400;
	text-decoration-thickness: 1px;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-price ins,
body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-subtotal ins{
	background: none;
	text-decoration: none;
}

/* Article offert : la quantité est figée, elle s'écrit au lieu de s'éditer. */
body.woocommerce-cart .elementor-shortcode > .woocommerce .es-fk-offre-quantite{
	display: inline-block;
	color: var(--es-fk-foret-500);
	font-size: 14px;
	font-weight: 600;
}

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

body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-quantity{
	width: 124px;
	text-align: center;
}

/* Le pas-à-pas : un seul contour autour de moins, valeur et plus, comme dans
   le panier latéral. Le cadre appartient à l'enveloppe, pas au champ — trois
   éléments à bordé chacun donneraient trois boîtes accolées. */
body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-qte{
	display: inline-flex;
	align-items: stretch;
	height: 40px;
	border: 1px solid var(--es-fk-filet-fonce);
	border-radius: 7px;
	background: var(--es-fk-blanc);
	overflow: hidden;
}

/* Le focus se lit sur le cadre commun : porté par le champ seul, l'anneau
   serait masqué par l'overflow de l'enveloppe. */
body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-qte:focus-within{
	border-color: var(--es-fk-vif);
	box-shadow: 0 0 0 3px rgba(51, 159, 91, .16);
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-qte .quantity{
	display: flex;
	float: none;
	margin: 0;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-qte input.qty{
	width: 44px;
	height: auto;
	padding: 0 2px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-qte input.qty:focus{
	outline: none;
	box-shadow: none;
}

/* Les flèches natives du champ nombre feraient doublon avec nos deux
   boutons, dans un dessin que le navigateur impose. */
body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-qte input.qty::-webkit-outer-spin-button,
body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-qte input.qty::-webkit-inner-spin-button{
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-qte__pas{
	width: 34px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	transition: background .16s var(--es-fk-ease);
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-qte__pas:hover{
	background: rgba(51, 159, 91, .10);
}

/* La quantité figée de la ligne d'offre, rendue en texte par le module de
   l'offre. Même graisse que dans le pas-à-pas, pour qu'une colonne de
   quantités se lise d'un trait. */
body.woocommerce-cart .elementor-shortcode > .woocommerce .es-fk-offre-quantite{
	display: inline-block;
	color: var(--es-fk-foret);
	font-size: 14px;
	font-weight: 600;
}


/* ==========================================================================
   3. Coupon et mise à jour
   ========================================================================== */

body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions{
	padding: 20px 0 0;
	border: 0;
	background: transparent;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions .coupon{
	display: flex;
	align-items: center;
	gap: 8px;
	float: none;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions .coupon label{
	display: none;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions #coupon_code{
	width: auto;
	min-width: 180px;
	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-family: var(--es-fk-font);
	font-size: 14.5px;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions #coupon_code::placeholder{
	color: var(--es-fk-foret-300);
}

/* Les deux boutons de cette ligne sont secondaires : appliquer un code et
   recalculer ne sont pas l'action qu'on attend du client. Contour vert forêt,
   l'aplat vif est réservé à « Valider la commande ». */
body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions button.button{
	height: 48px;
	padding: 0 20px;
	border: 1px solid var(--es-fk-foret);
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-blanc);
	box-shadow: none;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	text-transform: none;
	cursor: pointer;
	transition: background .18s var(--es-fk-ease), color .18s var(--es-fk-ease);
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions button.button:hover:not([disabled]){
	background: var(--es-fk-foret);
	color: var(--es-fk-blanc);
}

/* Le bouton de recalcul reste en retrait tant qu'aucune quantité n'a bougé :
   WooCommerce le désactive lui-même, on le rend simplement discret. */
body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions button.button[disabled]{
	border-color: var(--es-fk-filet);
	color: var(--es-fk-foret-300);
	opacity: 1;
	cursor: default;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions button[name="update_cart"]{
	float: right;
}


/* ==========================================================================
   4. Le récapitulatif
   ========================================================================== */

body.woocommerce-cart .elementor-shortcode > .woocommerce .cart-collaterals{
	width: auto;
	margin: 0;
	float: none;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals{
	width: auto;
	float: none;
	padding: 24px;
	border: 1px solid var(--es-fk-filet-fonce);
	border-radius: 12px;
	background: var(--es-fk-blanc);
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals h2{
	margin: 0 0 14px;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.015em;
	text-transform: none;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals table.shop_table tr{
	border: 0;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals table.shop_table th,
body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals table.shop_table td{
	padding: 10px 0;
	border: 0;
	background: transparent;
	font-size: 15px;
	line-height: 1.4;
	vertical-align: top;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals table.shop_table th{
	width: 40%;
	color: var(--es-fk-foret-500);
	font-weight: 400;
	text-align: left;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals table.shop_table td{
	color: var(--es-fk-foret);
	font-weight: 600;
	text-align: right;
}

/* Ligne « Livraison ». Un seul mode subsiste sur cette page, WooCommerce
   l'écrit donc en texte simple, et es-panier.php remplace le nom du
   transporteur par « Offerte » ou le montant. */
body.woocommerce-cart .elementor-shortcode > .woocommerce tr.shipping td{
	color: var(--es-fk-foret);
	font-weight: 600;
	text-align: right;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce tr.shipping ul#shipping_method{
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Les `li` de la liste des modes sont en flex, hérité de la version où le
   client choisissait encore son transporteur. Un conteneur flex ignore le
   text-align de sa cellule : sans justify-content, « Offerte » restait collée
   à gauche pendant que les autres montants s'alignaient à droite. */
body.woocommerce-cart .elementor-shortcode > .woocommerce tr.shipping ul#shipping_method li{
	display: flex;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	text-indent: 0;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce tr.shipping ul#shipping_method li label{
	text-align: right;
}

/* Le calculateur d'adresse et le rappel de destination n'ont plus lieu d'être
   ici : le client ne choisit plus, il constate. L'adresse se saisit à l'étape
   suivante, où elle est demandée pour de bon. */
body.woocommerce-cart .elementor-shortcode > .woocommerce tr.shipping .woocommerce-shipping-destination,
body.woocommerce-cart .elementor-shortcode > .woocommerce tr.shipping .woocommerce-shipping-calculator,
body.woocommerce-cart .elementor-shortcode > .woocommerce tr.shipping a.shipping-calculator-button,
body.woocommerce-cart .elementor-shortcode > .woocommerce tr.shipping .lpc_pick_up_widget_show_map,
body.woocommerce-cart .elementor-shortcode > .woocommerce tr.shipping .lpc_shipping_icon{
	display: none !important;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce tr.shipping td .amount,
body.woocommerce-cart .elementor-shortcode > .woocommerce tr.shipping td bdi,
body.woocommerce-cart .elementor-shortcode > .woocommerce tr.shipping td span{
	font: inherit;
	color: inherit;
}

/* Le total, seule ligne qui compte vraiment. */
body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals tr.order-total th,
body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals tr.order-total td{
	padding-top: 16px;
	border-top: 1px solid var(--es-fk-filet);
	color: var(--es-fk-foret);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -.02em;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals tr.order-total small.includes_tax{
	display: block;
	margin-top: 4px;
	color: var(--es-fk-foret-500);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
}


/* ==========================================================================
   5. Modes de livraison
   --------------------------------------------------------------------------
   Ce bloc ne s'affiche plus : es-panier.php retire le choix du transporteur de
   cette page, il fait doublon avec l'étape « Livraison » du tunnel.

   Les règles restent, et c'est délibéré. Le filtre est réversible d'une ligne
   (`es_panier_afficher_livraison`), et si le choix revenait un jour, il
   reviendrait habillé plutôt que brut. Même dessin que dans le tunnel : ce
   sont les mêmes options, elles doivent se lire pareil d'un écran à l'autre.
   ========================================================================== */

body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals tr.shipping td{
	text-align: left;
	font-weight: 400;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce ul#shipping_method{
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce ul#shipping_method li{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 10px;
	padding: 0;
	color: var(--es-fk-foret);
	font-size: 14px;
	line-height: 1.4;
	text-indent: 0;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce ul#shipping_method li:last-child{
	margin-bottom: 0;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce ul#shipping_method li input.shipping_method{
	flex: none;
	margin: 3px 0 0;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce ul#shipping_method li label{
	margin: 0;
	color: var(--es-fk-foret);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
}

/* Le logo du transporteur est suivi d'un <br> dans le libellé : il tient sa
   propre ligne, au-dessus du nom du mode. */
body.woocommerce-cart .elementor-shortcode > .woocommerce ul#shipping_method li label img{
	max-width: 84px !important;
	height: auto;
	margin: 0 0 3px;
	vertical-align: middle;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .woocommerce-shipping-destination{
	margin: 10px 0 0;
	color: var(--es-fk-foret-500);
	font-size: 12.8px;
	line-height: 1.45;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce a.shipping-calculator-button,
body.woocommerce-cart .elementor-shortcode > .woocommerce a.lpc_pick_up_widget_show_map{
	display: inline-block;
	margin-top: 6px;
	color: var(--es-fk-lien);
	font-size: 13px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: .18em;
}


/* ==========================================================================
   6. Les deux boutons du bas
   --------------------------------------------------------------------------
   Sur une ligne, le repli à gauche et l'action principale à droite : c'est le
   sens de lecture, et le regard finit sur ce qu'on attend du client.

   « Continuer mes achats » reste un lien souligné, pas un second bouton. Deux
   boutons côte à côte de même poids feraient hésiter, et la colonne fait 380
   px : deux vrais boutons n'y tiendraient pas sans se serrer.
   ========================================================================== */

body.woocommerce-cart .elementor-shortcode > .woocommerce .wc-proceed-to-checkout{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 18px 0 0;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce a.checkout-button{
	order: 2;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 180px;
	margin: 0;
	padding: 16px 22px;
	border: 0;
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-vif) !important;
	box-shadow: none;
	color: var(--es-fk-blanc) !important;
	font-family: var(--es-fk-font);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-align: center;
	text-transform: none;
	text-decoration: none;
	transition: background .18s var(--es-fk-ease);
}

body.woocommerce-cart .elementor-shortcode > .woocommerce a.checkout-button:hover{
	background: var(--es-fk-vif-700) !important;
	color: var(--es-fk-blanc) !important;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce a.continue-shopping{
	order: 1;
	flex: none;
	display: inline-block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--es-fk-foret-500) !important;
	font-family: var(--es-fk-font);
	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);
}

body.woocommerce-cart .elementor-shortcode > .woocommerce a.continue-shopping:hover{
	color: var(--es-fk-foret) !important;
	text-decoration-color: var(--es-fk-foret);
}


/* Le lien de retour, sous la table et aligné à gauche. Celui d'origine, dans
   le bloc de validation, est masqué : il y prenait le rang d'une alternative
   au bouton de commande alors que c'est une sortie. */
body.woocommerce-cart .elementor-shortcode > .woocommerce .wc-proceed-to-checkout a.continue-shopping{
	display: none !important;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-retour{
	margin: 18px 0 0;
	text-align: left;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-retour a{
	color: var(--es-fk-foret-500);
	font-family: var(--es-fk-font);
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--es-fk-filet-fonce);
	text-underline-offset: .22em;
	transition: color .18s var(--es-fk-ease);
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-retour a:hover{
	color: var(--es-fk-foret);
	text-decoration-color: var(--es-fk-foret);
}


/* ==========================================================================
   7. Les deux blocs venus du panier latéral
   --------------------------------------------------------------------------
   Jauge de progression et suggestions sont écrites une seule fois, dans le
   dossier funnelkit. Leurs feuilles listent la page panier
   parmi leurs racines, via :is(). On ne reprend ici que ce qui dépend du
   contexte : ces blocs ne vivent pas dans un panneau de 430 px mais dans une
   page de 1440.
   ========================================================================== */

/* La jauge, en tête de la colonne des articles. Elle vit dans le formulaire
   de panier, seul endroit que le rafraîchissement AJAX de WooCommerce
   reconstruit — voir es-fk-paliers.php. */
body.woocommerce-cart .elementor-shortcode > .woocommerce .woocommerce-cart-form .es-fk-paliers{
	padding: 0;
	margin: 0 0 26px;
	border: 0;
	background: transparent;
}

/* Les suggestions, sous la table des articles. Le fond crème du panier
   latéral ferait tache sur une page déjà crème : filet et blanc. */
body.woocommerce-cart .elementor-shortcode > .woocommerce .es-fk-xsell{
	margin-top: 24px;
	padding: 18px 20px;
	border: 1px solid var(--es-fk-filet);
	border-top: 1px solid var(--es-fk-filet);
	border-radius: 12px;
	background: var(--es-fk-blanc);
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-fk-xsell__item{
	padding: 12px 0;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-fk-xsell__media{
	width: 54px;
	height: 54px;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-fk-xsell__nom{
	font-size: 14.5px;
}

/* Le bouton est enveloppé dans un formulaire sur cette page : l'enveloppe ne
   doit pas manger la largeur du texte à sa gauche. */
body.woocommerce-cart .elementor-shortcode > .woocommerce .es-fk-xsell__form{
	flex: none;
	margin: 0;
}


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

body.woocommerce-cart .elementor-shortcode > .woocommerce .cart-empty{
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--es-fk-foret);
	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .return-to-shop{
	text-align: center;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .return-to-shop a.button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 26px;
	border: 0;
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-vif) !important;
	color: var(--es-fk-blanc) !important;
	font-family: var(--es-fk-font);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}


/* ==========================================================================
   9. Sous 1000 px
   Une seule colonne, le récapitulatif passe sous les articles.
   ========================================================================== */

@media (max-width: 1000px){

	body.woocommerce-cart .elementor-shortcode > .woocommerce{
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* Une seule colonne : les placements explicites de la version large
	   feraient déborder le récapitulatif hors de la grille. On les défait, et
	   les blocs reprennent leur ordre du document. */
	body.woocommerce-cart .elementor-shortcode > .woocommerce > .woocommerce-cart-form,
	body.woocommerce-cart .elementor-shortcode > .woocommerce > .es-fk-xsell,
	body.woocommerce-cart .elementor-shortcode > .woocommerce > .es-panier-retour,
	body.woocommerce-cart .elementor-shortcode > .woocommerce > .cart-collaterals{
		grid-column: 1;
		margin-top: 0;
	}
}

/* ==========================================================================
   10. Le tableau des articles sur petit écran
   --------------------------------------------------------------------------
   WooCommerce bascule ses tableaux en mode empilé sous 768 px : chaque cellule
   devient un bloc précédé de son intitulé, tiré de l'attribut data-title, et
   la vignette disparaît. Ça donne une colonne de « Produit : », « Prix : »,
   « Quantité : » qui répète ce que la valeur dit déjà.

   On remonte une carte par article : vignette à gauche sur toute la hauteur,
   nom, prix et quantité empilés à droite, croix de retrait en haut et
   sous-total en face du prix. Chaque cellule est placée nommément, sans quoi
   l'ordre du document déciderait à notre place.
   ========================================================================== */

@media (max-width: 768px){

	body.woocommerce-cart .elementor-shortcode > .woocommerce table.shop_table_responsive thead{
		display: none;
	}

	/* Les intitulés que WooCommerce insère devant chaque valeur. */
	body.woocommerce-cart .elementor-shortcode > .woocommerce table.shop_table_responsive tr td::before{
		content: none !important;
		display: none !important;
	}

	body.woocommerce-cart .elementor-shortcode > .woocommerce tr.woocommerce-cart-form__cart-item{
		display: grid;
		grid-template-columns: 64px minmax(0, 1fr) auto;
		column-gap: 12px;
		row-gap: 6px;
		align-items: start;
		padding: 16px 0;
	}

	body.woocommerce-cart .elementor-shortcode > .woocommerce tr.woocommerce-cart-form__cart-item > td{
		display: block !important;
		width: auto !important;
		padding: 0 !important;
		text-align: left;
	}

	/* Vignette sur toute la hauteur de la carte, à gauche. */
	body.woocommerce-cart .elementor-shortcode > .woocommerce tr.woocommerce-cart-form__cart-item > td.product-thumbnail{
		grid-area: 1 / 1 / 4 / 2;
	}

	body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-thumbnail a{
		width: 64px;
		height: 64px;
	}

	body.woocommerce-cart .elementor-shortcode > .woocommerce tr.woocommerce-cart-form__cart-item > td.product-name{
		grid-area: 1 / 2 / 2 / 3;
	}

	body.woocommerce-cart .elementor-shortcode > .woocommerce tr.woocommerce-cart-form__cart-item > td.product-price{
		grid-area: 2 / 2 / 3 / 3;
	}

	body.woocommerce-cart .elementor-shortcode > .woocommerce tr.woocommerce-cart-form__cart-item > td.product-quantity{
		grid-area: 3 / 2 / 4 / 3;
	}

	/* La croix en haut à droite, le sous-total en face du prix. */
	body.woocommerce-cart .elementor-shortcode > .woocommerce tr.woocommerce-cart-form__cart-item > td.product-remove{
		grid-area: 1 / 3 / 2 / 4;
		justify-self: end;
	}

	body.woocommerce-cart .elementor-shortcode > .woocommerce tr.woocommerce-cart-form__cart-item > td.product-subtotal{
		grid-area: 2 / 3 / 4 / 4;
		text-align: right !important;
	}

	/* Le prix unitaire barré tient sur une ligne, à côté du prix payé, faute
	   de place pour l'empiler. */
	body.woocommerce-cart .elementor-shortcode > .woocommerce td.product-price del{
		display: inline;
		margin-right: 6px;
	}

	body.woocommerce-cart .elementor-shortcode > .woocommerce tr.woocommerce-cart-form__cart-item > td.actions{
		grid-column: 1 / -1;
	}

	/* Le récapitulatif garde ses deux colonnes : empilé, il perdrait le
	   rapport entre chaque intitulé et son montant. */
	body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals table.shop_table_responsive tr{
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 16px;
		align-items: baseline;
	}

	body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals table.shop_table_responsive th,
	body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals table.shop_table_responsive td{
		display: block !important;
		width: auto !important;
	}
}


@media (max-width: 640px){

	/* Champ et bouton l'un sous l'autre. Côte à côte, le bouton se laisse
	   comprimer par le flex et son libellé déborde : « Appliquer le code
	   promo » ne tient pas dans la moitié d'un écran de téléphone.

	   La largeur est imposée au conteneur avant de l'être aux enfants :
	   WooCommerce fait flotter .coupon, et une boîte flottante se dimensionne
	   sur son contenu. Un enfant à 100 % d'un parent déjà rétréci reste
	   étroit — c'est ce qui laissait les deux commandes à gauche. */
	body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions .coupon{
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		float: none !important;
		width: 100% !important;
		max-width: none;
	}

	body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions #coupon_code,
	body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions button.button{
		box-sizing: border-box;
		width: 100% !important;
		min-width: 0;
		float: none !important;
	}

	body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions button[name="update_cart"]{
		margin-top: 10px;
	}

	body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals tr.order-total th,
	body.woocommerce-cart .elementor-shortcode > .woocommerce .cart_totals tr.order-total td{
		font-size: 19px;
	}
}

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

	body.woocommerce-cart .elementor-shortcode > .woocommerce a.checkout-button,
	body.woocommerce-cart .elementor-shortcode > .woocommerce td.actions button.button{
		transition: none;
	}
}


/* ==========================================================================
   11. Panier vide
   --------------------------------------------------------------------------
   Trois blocs rendus par es-panier.php dans le conteneur que WooCommerce
   prévoit pour ça, .wc-empty-cart-message, suivi du bouton de retour à la
   boutique qui reste à sa place native.

   La grille en deux colonnes de la page pleine ne s'applique pas ici : le
   panier vide n'a pas de récapitulatif à poser à droite. On repasse en pleine
   largeur, bornée comme le reste.
   ========================================================================== */

/* UNE SEULE COLONNE, PAS DEUX.

   La page pleine est une grille à deux colonnes, la seconde étant réservée au
   récapitulatif. Vide, le panier n'en a pas : cette colonne n'a plus d'objet,
   et les blocs ajoutés ici — qui sont des enfants directs de la grille — s'y
   répartissaient au hasard du placement automatique, la carte de reprise à
   gauche et les cartes produit à droite, dans 380 pixels.

   Placer chaque bloc un par un aurait fonctionné, mais il aurait fallu
   recommencer à chaque ajout. On bascule la grille elle-même. */
body.es-panier-vide .elementor-shortcode > .woocommerce{
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

/* Et la même chose bloc par bloc, en ceinture et bretelles. La bascule
   ci-dessus dépend d'une classe posée sur le <body> ; ces règles-ci ne
   dépendent de rien d'autre que du markup rendu, et suffisent à elles seules.
   Toute la question ici est de sortir du placement automatique, qui envoyait
   un bloc sur deux dans la colonne du récapitulatif. */
body.woocommerce-cart .elementor-shortcode > .woocommerce > .wc-empty-cart-message,
body.woocommerce-cart .elementor-shortcode > .woocommerce > .es-panier-vide-carte,
body.woocommerce-cart .elementor-shortcode > .woocommerce > .es-panier-vide-selection,
body.woocommerce-cart .elementor-shortcode > .woocommerce > .es-panier-vide-reassure,
body.woocommerce-cart .elementor-shortcode > .woocommerce > p.return-to-shop{
	grid-column: 1 / -1;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .wc-empty-cart-message{
	margin: 0;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .wc-empty-cart-message:empty{
	display: none;
}

/* ---- reprendre une commande, ou se connecter ---- */

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-vide-carte{
	margin: 4px 0 30px;
	padding: 20px 22px;
	border: 1px solid var(--es-fk-vif-100);
	border-radius: var(--es-fk-rayon);
	background: var(--es-fk-vif-050);
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-vide-carte__titre{
	margin: 0 0 6px;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-vide-carte__resume{
	margin: 0 0 14px;
	color: var(--es-fk-foret-500);
	font-family: var(--es-fk-font);
	font-size: 13.5px;
	line-height: 1.5;
}

/* Contour, pas aplat : ce bouton propose un raccourci, il ne remplace pas
   l'appel principal qui reste « Retour à la boutique ». */
body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-vide-carte__cta{
	display: inline-flex;
	align-items: center;
	height: 44px;
	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-family: var(--es-fk-font);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: background .18s var(--es-fk-ease), color .18s var(--es-fk-ease);
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-vide-carte__cta:hover{
	background: var(--es-fk-foret);
	color: var(--es-fk-blanc);
}

/* ---- sélection de produits ---- */

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-vide-selection{
	margin: 0 0 34px;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-vide-selection__titre{
	margin: 0 0 18px;
	color: var(--es-fk-foret);
	font-family: var(--es-fk-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

/* ---- réassurances ---- */

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-vide-reassure{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 30px;
	padding: 22px 0 0;
	border-top: 1px solid var(--es-fk-filet);
	list-style: none;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-vide-reassure__item{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
	color: var(--es-fk-foret-500);
	font-family: var(--es-fk-font);
	font-size: 13px;
	line-height: 1.5;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-vide-reassure__item strong{
	display: block;
	color: var(--es-fk-foret);
	font-size: 14px;
	font-weight: 600;
}

body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-vide-reassure__ic{
	width: 22px;
	height: 22px;
	flex: none;
	margin-top: 1px;
	color: var(--es-fk-vif);
}

@media (max-width: 780px){

	body.woocommerce-cart .elementor-shortcode > .woocommerce .es-panier-vide-reassure{
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
}