/* ==========================================================================
   Panier, première étape du tunnel de commande (D-132)
   Maquette « Signature » du 18/10/2026 : refonte-kinthia.com/panier-boutique-signature.php
   (panier-consultation-epure.css + panier-boutique-signature.css).

   Page WooCommerce #1231, layout Woodmart #840 (panier) et #10440 (panier vide).
   En-tête « Tunnel Kinthia » (header builder, choisi pour la page), pied de page du site coupé
   par le réglage de la page. Le tableau est celui de Woodmart (`wd/ct-table`), mis en grille ici ;
   le récapitulatif est le gabarit woocommerce/cart/cart-totals.php du thème enfant.

   Écarts voulus avec la maquette : gris foncés à teinte égale là où ils manquaient l'AA (texte
   discret sur le lavande du récapitulatif : 4,3:1 → 5,1:1 ; texte du bandeau sauge : 4,4:1 →
   5,1:1) ; les pictogrammes sont des masques CSS (rien d'écrit dans le contenu).

   Marges : Woodmart remet celles des enfants d'un contenu à `0 var(--wd-block-spacing)`, par une
   règle chargée après la nôtre (WD-47) ; les blocs du tunnel qui portent leur propre marge sont donc
   visés par `body.woocommerce-cart`, une classe de plus.
   ========================================================================== */

body.woocommerce-cart {
	--kin-tunnel-encre: #382b3e;
	--kin-tunnel-discret: #756b79;
	--kin-tunnel-discret-fort: #6b5f70;
	--kin-tunnel-filet: #e4dfda;
	--kin-tunnel-papier: #faf8f3;
	--kin-tunnel-prune: #64466e;
	--kin-tunnel-prune-fonce: #4e3557;
	--kin-tunnel-sauge: #e9eee6;
	--kin-tunnel-lavande: #f0ebf2;

	background-color: var(--kin-tunnel-papier);
	color: var(--kin-tunnel-encre);
}

body.woocommerce-cart .website-wrapper,
body.woocommerce-cart .wd-page-content {
	background-color: transparent;
}

/* --- En-tête du tunnel (header builder, « Tunnel Kinthia ») ------------- */

.whb-header_854773 .whb-general-header .container {
	max-width: 1220px;
	padding-inline: 30px;
}

/* Tablette : en-tête de 90 px, comme sur ordinateur (maquette). Le header builder n'a qu'une
   hauteur mobile (72 px, celle du téléphone) ; Woodmart la lit dans cette variable. */
@media (min-width: 581px) and (max-width: 1024px) {
	body.woocommerce-cart {
		--wd-header-general-sm-h: 89px;
	}
}

.kin-tunnel-securite {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	font-size: 12px;
	color: #756b79;
}

.kin-tunnel-securite__icone {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

/* --- Zone de contenu ---------------------------------------------------- */

body.woocommerce-cart main.wd-content-layout {
	max-width: 1220px;
	padding: 43px 30px 0;
}

body.woocommerce-cart .wd-content-area > .woocommerce {
	font-size: 14px;
	line-height: 1.5;
}

/* --- Titre et étapes ---------------------------------------------------- */

body.woocommerce-cart .kin-tunnel-haut {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	margin: 0 0 35px;
}

.kin-tunnel-haut .kin-tunnel-haut__titre {
	margin: 0;
	font: 400 36px/1.2 Lora, serif;
	letter-spacing: -0.7px;
	white-space: nowrap;
	color: var(--kin-tunnel-encre);
}

.kin-tunnel-haut__complement {
	display: block;
	margin-top: 8px;
	font: 400 12px/1.5 'Work Sans', sans-serif;
	letter-spacing: 0;
	color: var(--kin-tunnel-discret);
}

.kin-tunnel-etapes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 25px;
	width: 59%;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--kin-tunnel-discret);
}

.kin-tunnel-etapes .kin-tunnel-etapes__etape {
	position: relative;
	display: flex;
	gap: 8px;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--kin-tunnel-filet);
	white-space: nowrap;
}

.kin-tunnel-etapes__etape > a {
	display: flex;
	gap: inherit;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.kin-tunnel-etapes__numero {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 23px;
	height: 23px;
	border: 1px solid var(--kin-tunnel-filet);
	border-radius: 50%;
	font-size: 11px;
}

.kin-tunnel-etapes__etape[aria-current] {
	font-weight: 500;
	color: var(--kin-tunnel-prune);
}

.kin-tunnel-etapes__etape[aria-current]::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 2px;
	background: var(--kin-tunnel-prune);
}

.kin-tunnel-etapes__etape[aria-current] .kin-tunnel-etapes__numero {
	border-color: var(--kin-tunnel-prune);
	background: var(--kin-tunnel-prune);
	color: #fff;
}

/* --- Messages de WooCommerce (bandeau de la maquette) -------------------
   Retrait (« … supprimé. Annuler ? »), mise à jour, code promo appliqué ; les erreurs (stock,
   code refusé sans JavaScript) gardent un rouge lisible (6,9:1). Le pictogramme de Woodmart est
   retiré : le bandeau de la maquette n'en a pas. */

body.woocommerce-cart .woocommerce-notices-wrapper > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 6px 16px;
	margin: 0 0 20px;
	padding: 13px 16px;
	/* Woodmart réserve la place de son pictogramme par `padding-inline: 65px 40px !important`
	   (mod-notices-general.css) : surcharge chirurgicale (LESSONS WD-74). */
	padding-inline: 16px !important;
	border: 0;
	border-radius: 0;
	background: var(--kin-tunnel-sauge);
	font-size: 12px;
	line-height: 1.5;
	color: var(--kin-tunnel-encre);
	list-style: none;
}

body.woocommerce-cart .woocommerce-notices-wrapper > .woocommerce-error {
	background: #f7ecec;
	color: #922c3c;
}

body.woocommerce-cart .woocommerce-notices-wrapper > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
	display: none;
}

body.woocommerce-cart .woocommerce-notices-wrapper > :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) > li {
	margin: 0;
	padding: 0;
}

body.woocommerce-cart .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a {
	color: inherit;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.woocommerce-cart .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:focus-visible {
	outline: 2px solid var(--kin-tunnel-prune);
	outline-offset: 3px;
}

/* --- Mise en page : articles et récapitulatif --------------------------- */

body.woocommerce-cart .kin-panier {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 354px;
	gap: 60px;
	align-items: start;
	margin: 0;
}

body.woocommerce-cart .kin-panier > * {
	min-width: 0;
	margin: 0;
}

.kin-panier .wd-cart-table {
	margin: 0;
}

/* En-tête visuel de la liste ; celui du tableau reste pour les lecteurs d'écran. */
.kin-panier-entete {
	display: flex;
	justify-content: space-between;
	padding: 0 0 15px;
	border-bottom: 1px solid var(--kin-tunnel-filet);
	font-size: 12px;
	color: var(--kin-tunnel-discret);
}

body.woocommerce-cart .kin-panier .shop_table.cart {
	display: block;
	margin: 0;
	border: 0;
	background: none;
}

body.woocommerce-cart .kin-panier .shop_table.cart thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

body.woocommerce-cart .kin-panier .shop_table.cart tbody {
	display: block;
}

/* Une ligne d'article : photo, description (nom, pierres, prix, quantité et « Retirer »), total.
   Maquette : photo de 148 px, gouttières de 22 px. La colonne de la photo porte la sienne
   (148 + 22), celle du total est une marge. « Retirer » est imprimé dans la cellule de quantité
   (inc/tunnel.php) ; sa cellule d'origine reste vide et masquée. */
body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr) auto;
	grid-template-areas:
		"photo nom total"
		"photo prix total"
		"photo quantite total";
	grid-template-rows: auto auto 1fr;
	gap: 0; /* Woodmart pose 5 px entre les rangées du tableau responsive (≤ 768 px)… */
	align-items: start;
	margin: 0; /* … et 15 px sous chaque ligne. */
	padding: 25px 0;
	border-bottom: 1px solid var(--kin-tunnel-filet);
}

body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item > td {
	display: block;
	padding: 0;
	border: 0;
	text-align: left;
	background: none;
}

body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item > td::before {
	display: none;
}

body.woocommerce-cart .kin-panier tr.cart_item .product-thumbnail {
	grid-area: photo;
	width: 148px;
}

body.woocommerce-cart .kin-panier tr.cart_item .product-thumbnail img {
	display: block;
	width: 148px;
	min-width: 0; /* Woodmart : 100 px sur mobile. */
	max-width: none;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0;
}

body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item > td.product-name {
	grid-area: nom;
	padding-top: 6px;
}

body.woocommerce-cart .kin-panier tr.cart_item .product-name > a {
	display: block;
	margin: 0 0 7px;
	font: 400 20px/1.4 Lora, serif;
	color: var(--kin-tunnel-encre);
	text-decoration: none;
}

.kin-panier-pierres {
	display: block;
	font-size: 12px;
	line-height: 1.65;
	color: var(--kin-tunnel-discret);
}

body.woocommerce-cart .kin-panier tr.cart_item .product-price {
	grid-area: prix;
	margin-top: 9px;
	font-size: 12px;
	line-height: 1.65;
	color: var(--kin-tunnel-encre);
}

body.woocommerce-cart .kin-panier tr.cart_item .product-price .amount {
	font-weight: 400;
	color: inherit;
}

body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item > td.product-quantity {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 19px;
	align-items: center;
	grid-area: quantite;
	margin-top: 16px;
}

body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item > td.product-remove {
	display: none;
}

/* L'enveloppe de « Retirer » porte `product-remove` pour le script de WooCommerce, et avec elle la
   largeur et le centrage que les styles de tableau donnent à cette classe. */
body.woocommerce-cart .kin-panier .shop_table.cart td.product-quantity > .kin-panier-retirer {
	display: block;
	width: auto;
	padding: 0;
	text-align: left;
}

body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item > td.product-subtotal {
	grid-area: total;
	margin-left: 22px;
	padding-top: 9px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

body.woocommerce-cart .kin-panier tr.cart_item .product-subtotal .amount {
	font-weight: inherit;
	color: var(--kin-tunnel-encre);
}

/* Quantité : − 1 + dans un cadre fin. */
body.woocommerce-cart .kin-panier .product-quantity .quantity {
	display: inline-flex;
	height: 35px;
	border: 1px solid var(--kin-tunnel-filet);
	border-radius: 0;
	background: transparent;
}

body.woocommerce-cart .kin-panier .product-quantity .quantity .minus,
body.woocommerce-cart .kin-panier .product-quantity .quantity .plus {
	width: 31px;
	min-width: 31px;
	height: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 16px;
	line-height: 1;
	color: var(--kin-tunnel-encre);
	box-shadow: none;
}

body.woocommerce-cart .kin-panier .product-quantity .quantity .minus:hover,
body.woocommerce-cart .kin-panier .product-quantity .quantity .plus:hover {
	background: var(--kin-tunnel-lavande);
}

body.woocommerce-cart .kin-panier .product-quantity .quantity .qty {
	width: 30px;
	min-width: 0;
	height: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-size: 13px;
	text-align: center;
	color: var(--kin-tunnel-encre);
	box-shadow: none;
	appearance: textfield;
	-moz-appearance: textfield;
}

body.woocommerce-cart .kin-panier .product-quantity .qty::-webkit-inner-spin-button,
body.woocommerce-cart .kin-panier .product-quantity .qty::-webkit-outer-spin-button {
	margin: 0;
	appearance: none;
}

/* « Retirer » : un lien texte (WooCommerce le retire sans recharger la page). */
body.woocommerce-cart .kin-panier .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	min-height: 35px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--kin-tunnel-discret);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.woocommerce-cart .kin-panier .product-remove a.remove:hover {
	background: none;
	color: var(--kin-tunnel-encre);
}

/* Le champ natif du code promo reste dans le formulaire du panier, masqué : le récapitulatif
   le remplit (kin-panier.js). Le bouton « Mettre à jour » est déjà masqué par Woodmart. */
body.woocommerce-cart .kin-panier .shop_table.cart tr:has(> td.actions) {
	display: none;
}

/* --- Le soin d'offrir --------------------------------------------------- */

/* Pictogramme à gauche, titre et texte l'un sous l'autre : une grille, le bloc HTML ne portant
   pas d'enveloppe autour du texte (en flex, titre et texte se mettraient côte à côte). */
body.woocommerce-cart .kin-panier-attention {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	margin: 25px 0 0;
	padding: 20px 23px;
	background: var(--kin-tunnel-sauge);
}

.kin-panier-attention::before {
	content: "";
	grid-row: 1 / span 2;
	width: 46px;
	height: 46px;
	background-color: #403347;
	-webkit-mask: url(../img/reassurance/selection-coffret.svg) center / contain no-repeat;
	mask: url(../img/reassurance/selection-coffret.svg) center / contain no-repeat;
}

body.woocommerce-cart .kin-panier-attention .kin-panier-attention__titre {
	align-self: end;
	margin: 0 0 4px;
	font: 400 18px/1.4 Lora, serif;
	color: var(--kin-tunnel-encre);
}

body.woocommerce-cart .kin-panier-attention p {
	align-self: start;
	max-width: 45ch;
	margin: 0;
	font-size: 12px;
	line-height: 1.65;
	color: #5c6656;
}

/* --- Récapitulatif ------------------------------------------------------ */

.kin-panier__recap {
	position: sticky;
	top: 24px;
}

body.woocommerce-cart .kin-panier__recap .wd-cart-totals {
	margin: 0;
}

body.woocommerce-cart .kin-recap.cart_totals {
	width: auto;
	margin: 0;
	padding: 27px;
	border: 1px solid #e3dae6;
	border-radius: 0;
	background: var(--kin-tunnel-lavande);
	box-shadow: none;
}

body.woocommerce-cart .kin-recap .cart-totals-inner {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

body.woocommerce-cart .kin-recap .cart-totals-inner > * {
	margin-bottom: 0;
}

/* Woodmart masque le titre du récapitulatif sauf en `.wd-title-show`, classe que son bloc Gutenberg
   ne sait pas poser (seul l'élément WPBakery a l'option) : la maquette le veut affiché. */
body.woocommerce-cart .wd-cart-totals .kin-recap .kin-recap__titre {
	display: block;
	margin: 0 0 24px;
	font: 400 23px/1.3 Lora, serif;
	text-transform: none;
	letter-spacing: 0;
	color: var(--kin-tunnel-encre);
}

.kin-recap__lignes {
	margin: 0;
	font-size: 13px;
}

.kin-recap__lignes > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	margin-bottom: 15px;
}

.kin-recap__lignes dt {
	font-weight: 400;
}

.kin-recap__lignes dd {
	margin: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.kin-recap__lignes .amount {
	font-weight: 400;
	color: var(--kin-tunnel-encre);
}

.kin-recap__lignes > .kin-recap__livraison {
	align-items: flex-start;
	margin-bottom: 0;
	font-size: 12px;
	color: var(--kin-tunnel-discret-fort);
}

.kin-recap__livraison dd {
	max-width: 140px;
}

.kin-recap__remise,
.kin-recap__remise .amount {
	color: #506146;
}

.kin-recap__remise a {
	color: inherit;
	text-underline-offset: 3px;
}

/* Code promo, replié. */
.kin-recap-code {
	margin-top: 21px;
	padding-top: 17px;
	border-top: 1px solid #ded4e1;
}

.kin-recap-code summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	min-height: 28px;
	font-size: 12px;
	list-style: none;
	cursor: pointer;
}

.kin-recap-code summary::-webkit-details-marker {
	display: none;
}

.kin-recap-code summary > span {
	font-size: 21px;
	font-weight: 300;
	transition: transform 0.2s;
}

.kin-recap-code[open] summary > span {
	transform: rotate(45deg);
}

.kin-recap-code__formulaire {
	margin-top: 12px;
}

.kin-recap-code__formulaire > div {
	display: flex;
	gap: 7px;
}

body.woocommerce-cart .kin-recap-code__formulaire input[type="text"] {
	width: 100%;
	min-width: 0;
	height: auto;
	padding: 11px;
	border: 1px solid #cdbed2;
	border-radius: 0;
	background: #fff;
	font-size: 13px;
	box-shadow: none;
}

body.woocommerce-cart .kin-recap-code__formulaire button {
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--kin-tunnel-prune);
	border-radius: 0;
	background: transparent;
	font-size: 12px;
	font-weight: 400;
	text-transform: none;
	color: var(--kin-tunnel-prune);
}

body.woocommerce-cart .kin-recap-code__formulaire button:hover {
	background: #e5dbe9;
}

/* Code refusé (message réécrit par kin-panier.js) : 7,4:1 sur le lavande. */
body.woocommerce-cart .kin-recap-code__formulaire input[aria-invalid="true"] {
	border-color: #a03a45;
}

body.woocommerce-cart .kin-recap .kin-recap-code__erreur {
	margin: 9px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: #922c3c;
}

/* Total des articles. */
.kin-recap__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 17px;
	padding-top: 21px;
	border-top: 1px solid #ded4e1;
}

.kin-recap__total > span {
	font-size: 14px;
}

.kin-recap__total small {
	margin-left: 3px;
	font-size: 11px;
	color: var(--kin-tunnel-discret-fort);
}

.kin-recap__total strong,
.kin-recap__total strong .amount {
	font: 400 28px/1.2 Lora, serif;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--kin-tunnel-encre);
}

body.woocommerce-cart .kin-recap .kin-recap__note {
	margin: 7px 0 21px;
	font-size: 11px;
	color: var(--kin-tunnel-discret-fort);
}

/* « Passer commande ». */
body.woocommerce-cart .kin-recap .wc-proceed-to-checkout {
	margin: 0;
	padding: 0;
}

body.woocommerce-cart .kin-recap .wc-proceed-to-checkout a.kin-tunnel-bouton {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	min-height: 51px;
	margin: 0;
	padding: 13px 17px;
	border: 1px solid var(--kin-tunnel-prune);
	border-radius: 0;
	background: var(--kin-tunnel-prune);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
	color: #fff;
	box-shadow: none;
	transition: background-color 0.2s;
}

body.woocommerce-cart .kin-recap .wc-proceed-to-checkout a.kin-tunnel-bouton:hover {
	background: var(--kin-tunnel-prune-fonce);
	color: #fff;
}

.kin-tunnel-bouton svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.woocommerce-cart .kin-recap .kin-recap__suite {
	margin: 10px 0 0;
	font-size: 11px;
	text-align: center;
	color: var(--kin-tunnel-discret-fort);
}

body.woocommerce-cart .kin-recap .kin-recap__securite {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 23px 0 0;
	font-size: 12px;
	color: #65526e;
}

.kin-recap__securite svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- Trente jours pour changer d'avis ----------------------------------- */

/* Pictogramme en retrait, hors du flux : le paragraphe garde son texte d'un seul tenant. */
body.woocommerce-cart .kin-panier-retour {
	position: relative;
	margin: 20px 8px 0;
	padding-left: 30px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--kin-tunnel-discret);
}

.kin-panier-retour::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: #728269;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kin-panier-retour strong {
	font-weight: 500;
	color: var(--kin-tunnel-encre);
}

/* --- Les engagements ---------------------------------------------------- */

body.woocommerce-cart .kin-panier-promesses {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 35px;
	margin: 44px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--kin-tunnel-filet);
}

/* Pictogramme, puis le titre et sa ligne l'un sous l'autre (grille, comme l'encart du soin). */
.kin-panier-promesses .kin-panier-promesses__item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	column-gap: 16px;
	align-items: center;
	margin: 0;
}

.kin-panier-promesses__item::before {
	content: "";
	grid-row: 1 / span 2;
	width: 44px;
	height: 44px;
	background-color: #403347;
	-webkit-mask: var(--kin-promesse) center / contain no-repeat;
	mask: var(--kin-promesse) center / contain no-repeat;
}

.kin-panier-promesses__item--confiance { --kin-promesse: url(../img/reassurance/choisi-avec-coeur.svg); }
.kin-panier-promesses__item--soin      { --kin-promesse: url(../img/reassurance/selection-coffret.svg); }
.kin-panier-promesses__item--foret     { --kin-promesse: url(../img/reassurance/arbre-plante.svg); }

.kin-panier-promesses strong {
	display: block;
	align-self: end;
	margin-bottom: 3px;
	font-size: 12px;
	font-weight: 500;
}

.kin-panier-promesses span {
	display: block;
	align-self: start;
	font-size: 11px;
	line-height: 1.6;
	color: var(--kin-tunnel-discret);
}

/* --- Panier vide -------------------------------------------------------- */

.kin-panier-vide {
	padding: 42px 0 55px;
	text-align: center;
}

.kin-panier-vide__visuel {
	width: 94px;
	height: 94px;
	margin: 0 auto 22px;
	border-radius: 50%;
	background:
		linear-gradient(var(--kin-tunnel-prune), var(--kin-tunnel-prune)) center / 40px 40px no-repeat,
		var(--kin-tunnel-sauge);
	-webkit-mask:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14l2 14H3L5 7ZM8 8V5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 40px 40px no-repeat,
		linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
	mask:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7h14l2 14H3L5 7ZM8 8V5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / 40px 40px no-repeat exclude,
		linear-gradient(#000, #000);
}

.kin-panier-vide .kin-panier-vide__titre {
	margin: 0;
	font: 400 30px/1.3 Lora, serif;
	color: var(--kin-tunnel-encre);
}

.kin-panier-vide .kin-panier-vide__texte {
	margin: 12px 0 0;
	color: var(--kin-tunnel-discret);
}

.kin-panier-vide .kin-panier-vide__action {
	margin: 26px auto 0;
	max-width: 270px;
}

.kin-panier-vide__action .kin-lien-accueil {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 49px;
	padding: 13px 17px;
	border: 1px solid var(--kin-tunnel-prune);
	background: var(--kin-tunnel-prune);
	font-size: 13px;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	transition: background-color 0.2s;
}

.kin-panier-vide__action .kin-lien-accueil:hover {
	background: var(--kin-tunnel-prune-fonce);
	color: #fff;
}

.kin-panier-vide__action .kin-lien-accueil::after {
	content: "";
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m-5-5 5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15m-5-5 5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Pied du tunnel ----------------------------------------------------- */

body.woocommerce-cart .kin-tunnel-pied {
	margin: 36px 0 0;
	padding: 22px 0;
	border-top: 1px solid var(--kin-tunnel-filet);
	font-size: 11px;
	color: var(--kin-tunnel-discret);
}

/* --- Focus --------------------------------------------------------------
   Woodmart pose son contour (pointillé noir) en `!important` sur liens, boutons et champs, à partir
   de ces variables (WD-70) : contour plein prune, 8,6:1 sur le papier. Le `<summary>`, qu'il ne vise
   pas, et nos éléments reçoivent la même règle en clair. */

body.woocommerce-cart {
	--wd-otl-width: 2px;
	--wd-otl-style: solid;
	--wd-otl-color: var(--kin-tunnel-prune);
	--wd-otl-offset: 4px;
}

body.woocommerce-cart .kin-panier a:focus-visible,
body.woocommerce-cart .kin-panier button:focus-visible,
body.woocommerce-cart .kin-panier input:focus-visible,
body.woocommerce-cart .kin-panier summary:focus-visible,
.kin-tunnel-etapes a:focus-visible,
.kin-panier-vide a:focus-visible {
	outline: 2px solid var(--kin-tunnel-prune);
	outline-offset: 4px;
}

/* --- Tablette ----------------------------------------------------------- */

@media (max-width: 1000px) {
	body.woocommerce-cart .kin-panier {
		grid-template-columns: minmax(0, 1fr) 315px;
		gap: 30px;
	}

	/* Photo de 110 px, gouttière de 16 px. */
	body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item {
		grid-template-columns: 126px minmax(0, 1fr) auto;
	}

	body.woocommerce-cart .kin-panier tr.cart_item .product-thumbnail,
	body.woocommerce-cart .kin-panier tr.cart_item .product-thumbnail img {
		width: 110px;
	}

	body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item > td.product-subtotal {
		margin-left: 16px;
	}

	body.woocommerce-cart .kin-panier tr.cart_item .product-name > a {
		font-size: 18px;
	}

	body.woocommerce-cart .kin-recap.cart_totals {
		padding: 23px;
	}

	body.woocommerce-cart .kin-panier-promesses {
		gap: 22px;
	}

	.kin-panier-promesses .kin-panier-promesses__item {
		column-gap: 11px;
	}
}

@media (max-width: 800px) {
	body.woocommerce-cart .kin-tunnel-haut {
		flex-direction: column;
		align-items: flex-start;
		gap: 23px;
	}

	.kin-tunnel-etapes {
		width: 100%;
	}

	body.woocommerce-cart .kin-panier {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.kin-panier__recap {
		position: static;
	}

	/* Photo de 130 px, gouttière de 16 px (celle de la tablette). */
	body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item {
		grid-template-columns: 146px minmax(0, 1fr) auto;
	}

	body.woocommerce-cart .kin-panier tr.cart_item .product-thumbnail,
	body.woocommerce-cart .kin-panier tr.cart_item .product-thumbnail img {
		width: 130px;
	}

	body.woocommerce-cart .kin-recap.cart_totals {
		padding: 25px;
	}

	.kin-recap__livraison dd {
		max-width: none;
	}

	body.woocommerce-cart .kin-panier-retour {
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
	}

	body.woocommerce-cart .kin-panier-attention {
		margin-top: 20px;
	}

	body.woocommerce-cart .kin-panier-promesses {
		gap: 20px;
	}

	/* Pictogramme au-dessus, texte centré. */
	.kin-panier-promesses .kin-panier-promesses__item {
		display: block;
		text-align: center;
	}

	.kin-panier-promesses__item::before {
		display: block;
		margin: 0 auto 11px;
	}
}

/* --- Téléphone ---------------------------------------------------------- */

@media (max-width: 580px) {
	.whb-header_854773 .whb-general-header .container {
		padding-inline: 15px;
	}

	/* Logo de 113 px sur téléphone (maquette), 138 au-delà. Le header builder n'a qu'une largeur par
	   logo, imprimée en style en ligne (`max-width`) : surcharge chirurgicale (LESSONS WD-74). */
	.whb-header_854773 .wd-logo img {
		max-width: 113px !important;
	}

	.kin-tunnel-securite {
		gap: 5px;
		font-size: 11px;
	}

	body.woocommerce-cart main.wd-content-layout {
		padding: 26px 15px 0;
	}

	body.woocommerce-cart .kin-tunnel-haut {
		gap: 22px;
		margin-bottom: 24px;
	}

	.kin-tunnel-haut .kin-tunnel-haut__titre {
		display: flex;
		align-items: baseline;
		gap: 12px;
		font-size: 30px;
	}

	.kin-tunnel-haut__complement {
		margin-top: 0;
		font-size: 11px;
	}

	.kin-tunnel-etapes {
		grid-template-columns: 1fr 0.9fr 1.1fr;
		gap: 8px;
		font-size: 11px;
	}

	.kin-tunnel-etapes .kin-tunnel-etapes__etape {
		gap: 5px;
		padding-bottom: 12px;
	}

	.kin-tunnel-etapes__numero {
		width: 21px;
		height: 21px;
	}

	.kin-panier-entete {
		padding-bottom: 10px;
		font-size: 11px;
	}

	/* Photo de 92 px, gouttière de 15 px ; le total passe sous la description. */
	body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item {
		grid-template-columns: 107px minmax(0, 1fr);
		grid-template-areas:
			"photo nom"
			"photo prix"
			"photo quantite"
			"photo total";
		grid-template-rows: auto auto auto 1fr;
		padding: 20px 0;
	}

	body.woocommerce-cart .kin-panier tr.cart_item .product-thumbnail,
	body.woocommerce-cart .kin-panier tr.cart_item .product-thumbnail img {
		width: 92px;
	}

	body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item > td.product-name {
		padding-top: 0;
	}

	body.woocommerce-cart .kin-panier tr.cart_item .product-name > a {
		margin-bottom: 5px;
		font-size: 17px;
		line-height: 1.35;
	}

	.kin-panier-pierres {
		font-size: 11px;
	}

	body.woocommerce-cart .kin-panier tr.cart_item .product-price {
		margin-top: 6px;
		font-size: 11px;
	}

	body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item > td.product-quantity {
		column-gap: 16px;
		margin-top: 12px;
	}

	body.woocommerce-cart .kin-panier .product-remove a.remove {
		font-size: 11px;
	}

	body.woocommerce-cart .kin-panier .product-quantity .quantity {
		height: 34px;
	}

	body.woocommerce-cart .kin-panier .product-quantity .quantity .minus,
	body.woocommerce-cart .kin-panier .product-quantity .quantity .plus {
		width: 28px;
		min-width: 28px;
	}

	body.woocommerce-cart .kin-panier .product-quantity .quantity .qty {
		width: 26px;
	}

	body.woocommerce-cart .kin-panier .shop_table.cart tr.cart_item > td.product-subtotal {
		margin: 12px 0 0;
		padding: 0;
		font-size: 14px;
	}

	body.woocommerce-cart .kin-panier-attention {
		grid-template-columns: 38px minmax(0, 1fr);
		column-gap: 13px;
		margin-top: 20px;
		padding: 16px;
	}

	.kin-panier-attention::before {
		width: 38px;
		height: 38px;
	}

	body.woocommerce-cart .kin-panier-attention .kin-panier-attention__titre {
		font-size: 17px;
	}

	body.woocommerce-cart .kin-panier-attention p {
		font-size: 11px;
	}

	body.woocommerce-cart .kin-recap.cart_totals {
		padding: 22px 19px;
	}

	body.woocommerce-cart .wd-cart-totals .kin-recap .kin-recap__titre {
		margin-bottom: 22px;
		font-size: 22px;
	}

	.kin-recap__total strong,
	.kin-recap__total strong .amount {
		font-size: 27px;
	}

	body.woocommerce-cart .kin-panier-promesses {
		grid-template-columns: 1fr;
		gap: 18px;
		margin-top: 30px;
		padding-top: 24px;
	}

	/* De nouveau en ligne : pictogramme à gauche. */
	.kin-panier-promesses .kin-panier-promesses__item {
		display: grid;
		grid-template-columns: 37px minmax(0, 1fr);
		column-gap: 16px;
		text-align: left;
	}

	.kin-panier-promesses__item::before {
		width: 37px;
		height: 37px;
		margin: 0;
	}

	body.woocommerce-cart .kin-panier-retour {
		width: auto;
		margin: 20px 8px 0 0;
	}

	.kin-panier-vide {
		padding: 28px 0;
	}

	.kin-panier-vide .kin-panier-vide__titre {
		font-size: 25px;
	}

	.kin-panier-vide .kin-panier-vide__texte {
		font-size: 13px;
	}

	body.woocommerce-cart .kin-tunnel-pied {
		padding: 18px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kin-recap-code summary > span,
	.kin-tunnel-bouton,
	.kin-panier-vide__action .kin-lien-accueil {
		transition: none;
	}
}