/**
 * Page panier — même correctif de conteneur que les pages catalogue/produit
 * (collection.css, product.css) : Astra pose son propre .ast-container
 * (display:flex, max-width pensé pour une sidebar) sur cette page aussi ;
 * on le neutralise et on encadre nous-mêmes le contenu via .baba-container.
 */
body.woocommerce-cart .ast-container.ast-container {
	display: block;
	max-width: none;
	padding: 0;
}

/* Identifiant doublé : Astra réserve 60px au-dessus et en dessous du
   contenu via ".ast-plain-container.ast-no-sidebar #primary" (1,2,0), qui
   l'emporterait sur un "body.woocommerce-cart #primary" (1,1,1). La
   référence n'a pas cet écart, les paddings ci-dessous suffisent. */
body.woocommerce-cart #primary#primary {
	margin-top: 0;
	margin-bottom: 0;
}

/* Titre de page natif d'Astra ("Cart", non traduit) : sans équivalent
   dans la référence, qui enchaîne directement header -> contenu. */
body.woocommerce-cart .entry-header {
	display: none;
}

body.woocommerce-cart .woocommerce {
	max-width: var(--baba-container-max-width);
	margin: 0 auto;
	padding: var(--baba-space-xl) var(--baba-container-padding) var(--baba-space-2xl);
}

/**
 * Astra souligne / dé-souligne les liens via ".ast-single-post
 * .entry-content .woocommerce a" (0,3,1), plus spécifique que nos classes
 * seules : d'où ce regroupement des liens que la référence souligne, avec
 * .entry-content doublé pour repasser devant.
 */
body.woocommerce-cart .entry-content.entry-content .baba-cart-heading__link,
body.woocommerce-cart .entry-content.entry-content .baba-cart-empty__login-text a,
body.woocommerce-cart .entry-content.entry-content .baba-cart-totals__note a {
	text-decoration: underline;
}

@media screen and (max-width: 749px) {
	body.woocommerce-cart .woocommerce {
		padding: var(--baba-space-lg) var(--baba-container-padding-mobile) var(--baba-space-md);
	}
}

/**
 * Panier vide : titre centré, bouton, invite de connexion — mesuré sur
 * reference/desktop/panier.png.
 */
/* Le bas de page est nettement plus serré que sur l'état rempli : la
   référence enchaîne l'invite de connexion et le bandeau de confiance. */
body.woocommerce-cart .woocommerce:has(.baba-cart-empty) {
	padding-bottom: var(--baba-space-lg);
}

.baba-cart-empty {
	max-width: 600px;
	margin: 0 auto;
	padding: var(--baba-space-lg) 0 0;
	text-align: center;
}

.baba-cart-empty__heading {
	margin: 0 0 var(--baba-space-lg);
	font-family: var(--baba-font-heading);
	font-weight: 400;
	font-size: var(--baba-text-h1);
	line-height: 1.2;
	color: var(--baba-color-text-solid);
}

.baba-cart-empty__button {
	margin-bottom: var(--baba-space-xl);
}

/* Classe doublée sur tous les <p> de la page : Astra pose ".entry-content p
   { margin-bottom: 1.6em }" (0,1,1), qui l'emporte sinon sur nos classes
   simples (0,1,0) et espace tout le panier au double. */
.baba-cart-empty__login-title.baba-cart-empty__login-title {
	margin: 0 0 var(--baba-space-xs);
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-semibold);
	font-size: 25px;
	color: var(--baba-color-text-solid);
}

.baba-cart-empty__login-text.baba-cart-empty__login-text {
	margin: 0;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-lg);
	color: var(--baba-color-text-solid);
}

.baba-cart-empty__login-text a {
	color: var(--baba-color-accent);
	text-decoration: underline;
}

/**
 * Panier avec articles : titre + lien retour boutique.
 */
.baba-cart-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--baba-space-sm);
	margin-bottom: var(--baba-space-sm);
}

.baba-cart-heading__title {
	margin: 0;
	font-family: var(--baba-font-heading);
	font-weight: 400;
	font-size: 32px;
	color: var(--baba-color-text-solid);
}

.baba-cart-heading__link {
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	color: var(--baba-color-accent);
	text-decoration: underline;
	white-space: nowrap;
}

@media screen and (max-width: 749px) {
	.baba-cart-heading__title {
		font-size: 21px;
	}
}

/**
 * Panier avec articles — voir woocommerce/cart/cart.php : chaque article
 * est une carte (photo, nom/prix/variante, stepper quantité + suppression,
 * sous-total) plutôt que le tableau natif, motif mesuré sur
 * reference/mobile/panier.png (seule capture de référence avec un article).
 */
/**
 * Ligne d'article. Disposition par défaut (celle du mobile et du tiroir
 * panier du header, tous deux trop étroits pour trois colonnes) : photo à
 * gauche sur deux rangs, descriptif et total sur le premier rang, le
 * sélecteur de quantité en dessous du descriptif — mesurée sur
 * reference/mobile/panier.png. La version tableau à colonnes arrive plus
 * bas, à partir de 750px et seulement sur la page panier.
 */
.baba-cart-items__head,
.baba-cart-item {
	display: grid;
	grid-template-columns: 100px minmax(0, 1fr) auto;
	gap: var(--baba-space-sm);
	align-items: start;
}

.baba-cart-item__media {
	grid-row: 1 / 3;
}

.baba-cart-item__details {
	grid-column: 2;
	grid-row: 1;
}

.baba-cart-item__totals {
	grid-column: 3;
	grid-row: 1;
}

.baba-cart-item__quantity {
	grid-column: 2 / 4;
	grid-row: 2;
	margin-top: var(--baba-space-xs);
}

/* Pas de colonne "Quantité" dans l'en-tête tant qu'on est empilé. */
.baba-cart-items__head-quantity {
	display: none;
}

.baba-cart-items__head-total {
	grid-column: 3;
}

.baba-cart-items__head {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--baba-color-border);
	font-family: var(--baba-font-body);
	font-size: 12px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: var(--baba-nav-letter-spacing);
	color: rgba(0, 0, 0, 0.55);
}

/* Comme le montant qu'il surmonte (".cart-items *.right" sur la référence). */
.baba-cart-items__head-total {
	text-align: right;
}

/**
 * Page panier à partir de 750px : la référence repasse en vrai tableau
 * (component-cart-items.css), première colonne à 60% et dernière alignée à
 * droite. Réservé à .baba-cart-items — le tiroir du header garde la
 * disposition empilée quelle que soit la largeur d'écran, faute de place.
 */
@media screen and (min-width: 750px) {
	.baba-cart-items .baba-cart-items__head,
	.baba-cart-items .baba-cart-item {
		grid-template-columns: 140px minmax(0, 1fr) minmax(0, 25%) minmax(0, 15%);
		gap: 0 var(--baba-space-lg);
	}

	/* "Produit" chapeaute les deux premières colonnes (photo + descriptif). */
	.baba-cart-items .baba-cart-items__head > :first-child {
		grid-column: 1 / 3;
	}

	.baba-cart-items .baba-cart-items__head-quantity {
		display: block;
	}

	.baba-cart-items .baba-cart-items__head-total {
		grid-column: auto;
	}

	.baba-cart-items .baba-cart-item__media {
		grid-row: auto;
	}

	.baba-cart-items .baba-cart-item__details,
	.baba-cart-items .baba-cart-item__totals,
	.baba-cart-items .baba-cart-item__quantity {
		grid-column: auto;
		grid-row: auto;
	}

	.baba-cart-items .baba-cart-item__quantity {
		margin-top: 0;
	}
}

.baba-cart-item {
	padding: 36px 0 40px;
	border-bottom: 1px solid var(--baba-color-border);
}

.baba-cart-item__media img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--baba-color-border);
}

.baba-cart-item__name.baba-cart-item__name {
	margin: 0 0 2px;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-semibold);
	font-size: var(--baba-text-lg);
	line-height: 1.35;
	color: var(--baba-color-text-solid);
}

.baba-cart-item__name a {
	color: inherit;
	text-decoration: none;
}

.baba-cart-item__price.baba-cart-item__price {
	margin: 0;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	line-height: 1.4;
	color: var(--baba-color-text-solid);
}

/* Ligne de variante ("Quantité: 1G"), balisée <dl> par
   wc_get_formatted_cart_item_data() : la référence l'affiche sur une seule
   ligne, dans la continuité du prix unitaire. */
.baba-cart-item__details dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 0;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	line-height: 1.4;
	color: var(--baba-color-text-solid);
}

.baba-cart-item__details dl.variation dt {
	font-weight: var(--baba-font-weight-normal);
}

.baba-cart-item__details dl.variation dd,
.baba-cart-item__details dl.variation dd p {
	margin: 0;
}

.baba-cart-item__totals {
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-lg);
	color: var(--baba-color-text-solid);
	text-align: right;
	white-space: nowrap;
}

/* Le stepper et la corbeille se suivent dans la colonne "Quantité". */
.baba-cart-item__quantity {
	display: flex;
	align-items: center;
	gap: var(--baba-space-md);
}

/* WooCommerce habille "a.remove" en pastille ronde bordée avec une croix ;
   la référence n'a qu'une corbeille dorée nue, d'où la remise à plat. Le
   préfixe reprend celui d'Astra (".woocommerce-js a.remove", 0,2,1, posée
   sur le <body>) avec la classe doublée pour passer devant : la règle vaut
   ainsi partout, page panier comme tiroir du header. */
.woocommerce-js .baba-cart-item__remove.baba-cart-item__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--baba-color-accent);
	text-decoration: none;
}

/* La pastille ronde est dessinée par un ::before (bordure + border-radius),
   pas par le lien lui-même. */
.woocommerce-js .baba-cart-item__remove.baba-cart-item__remove::before {
	display: none;
}

.baba-cart-item__remove svg {
	width: 16px;
	height: 16px;
}

.woocommerce-js .baba-cart-item__remove.baba-cart-item__remove:hover {
	color: var(--baba-color-text-solid);
}

/* Champ quantité natif WooCommerce, habillé en stepper -/+ (boutons
   ajoutés par assets/js/cart.js). */
.baba-qty {
	display: inline-flex;
	align-items: stretch;
	height: 48px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: var(--baba-radius-none);
}

.baba-qty__button {
	width: 44px;
	background-color: transparent;
	border: 0;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-lg);
	line-height: 1;
	color: var(--baba-color-text-solid);
	cursor: pointer;
}

.baba-qty__button:hover {
	background-color: var(--baba-color-bg-alt);
}

.baba-qty input.qty {
	width: 52px;
	height: 100%;
	padding: 0;
	background-color: transparent;
	border: 0;
	text-align: center;
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-base);
	color: var(--baba-color-text-solid);
	-moz-appearance: textfield;
}

.baba-qty input.qty::-webkit-outer-spin-button,
.baba-qty input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/**
 * Totaux + bouton de paiement — voir woocommerce/cart/cart-totals.php.
 */
/* Colonne des totaux alignée à droite sous la liste (largeur reprise du
   gabarit d'origine ; la référence desktop n'a qu'un panier vide). */
.cart-collaterals {
	max-width: 420px;
	margin: var(--baba-space-lg) 0 0 auto;
}

/* WooCommerce prévoit .cart_totals à côté des ventes croisées : moitié de
   largeur, flottant, dans un cartouche bordé. Ici les ventes croisées sont
   retirées et la référence pose le total à même la page — d'où la remise à
   plat (classe doublée pour passer devant ".woocommerce .cart-collaterals
   .cart_totals", 0,3,0). */
.woocommerce-cart .cart-collaterals .baba-cart-totals.baba-cart-totals {
	float: none;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
}

/* Référence (component-totals.css) : ".totals { justify-content: center }"
   puis "flex-end" au-delà de 750px — intitulé et montant groupés à droite,
   pas étalés d'un bord à l'autre. La note suit (tax-note : centrée sur
   mobile, alignée à droite sur desktop). */
.baba-cart-totals__row {
	display: flex;
	align-items: baseline;
	justify-content: flex-end;
	gap: var(--baba-space-md);
	margin-bottom: var(--baba-space-sm);
}

/* Classe doublée : ".woocommerce-js h2 { margin-bottom: 0.7em }" (0,1,1). */
.baba-cart-totals__label.baba-cart-totals__label {
	margin: 0;
	font-family: var(--baba-font-heading);
	font-weight: var(--baba-font-weight-semibold);
	font-size: 21px;
	color: var(--baba-color-text-solid);
}

.baba-cart-totals__amount.baba-cart-totals__amount {
	margin: 0;
	font-family: var(--baba-font-body);
	font-size: 20px;
	color: var(--baba-color-text-solid);
}

/* wc_cart_totals_order_total_html() emballe le montant dans <strong> ; la
   référence l'affiche en graisse normale, plus léger que son intitulé. */
.baba-cart-totals__amount strong {
	font-weight: var(--baba-font-weight-normal);
}

.baba-cart-totals__note.baba-cart-totals__note {
	margin: 0 0 var(--baba-space-sm);
	font-family: var(--baba-font-body);
	font-size: var(--baba-text-md);
	line-height: 1.5;
	color: var(--baba-color-text-solid);
	text-align: right;
}

.baba-cart-totals__note a {
	color: var(--baba-color-accent);
	text-decoration: underline;
}

/* WooCommerce réserve "padding: 1em 0" autour du bouton, qui doublerait
   l'écart avec la note au-dessus. */
.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0;
}

/* Classe doublée : Astra pose ".woocommerce-cart .wc-proceed-to-checkout
   a.checkout-button" (0,3,1) et button.css ".woocommerce a.button" (0,2,1)
   — tous deux plus spécifiques que ".wc-proceed-to-checkout .checkout-
   button" seul (0,2,0), d'où le bouton resté en display:block/nowrap
   malgré cette règle. Le doublage (0,4,0) l'emporte sur les deux. */
.woocommerce-cart .wc-proceed-to-checkout .checkout-button.checkout-button {
	display: flex;
	width: 100%;
	/* .baba-btn (button.css) pose white-space:nowrap ; dans cette barre
	   latérale étroite (max-width 420px), "Procéder au paiement" déborde
	   sinon hors du bouton au lieu de passer à la ligne. */
	white-space: normal;
	text-align: center;
}

@media screen and (max-width: 749px) {
	.cart-collaterals {
		max-width: none;
	}

	/* Sur mobile la référence centre le bloc total (intitulé et montant
	   côte à côte au milieu, note centrée en dessous) plutôt que de
	   l'aligner à droite comme dans la colonne latérale du desktop. */
	.baba-cart-totals__row {
		justify-content: center;
	}

	.baba-cart-totals__note.baba-cart-totals__note {
		text-align: center;
	}
}