/**
 * Page panier.
 *
 * Ecrit a la main, sans etape de build : le depot n'a ni SCSS ni bundler.
 * Mobile-first. Les couleurs viennent des jetons du kit Elementor plutot que
 * de valeurs en dur, pour suivre la charte si elle evolue.
 *
 * Cette feuille et checkout.css ne se chargent jamais sur la meme page : la
 * garde fp_is_cart_page() exclut le tunnel, fp_is_checkout_form() exclut le
 * panier. Les regles communes y sont donc volontairement dupliquees plutot que
 * sorties dans un fichier partage, qui devrait soit poser ses jetons sur :root
 * - et fuir sur tout le site -, soit enumerer chaque composant a venir.
 */


/* ------------------------------------------------------------------
 * Repli conditionne au JavaScript
 * ------------------------------------------------------------------ */

/* Rien n'est masque tant que le document n'a pas recu la classe fp-js, posee
   des le rendu de cart.php. Sans JavaScript, le panier garde donc son champ de
   quantite et son bouton « Mettre a jour », c'est-a-dire le panier WooCommerce
   d'origine. */
html.fp-js .fp-jshide {
	display: none;
}

/* Symetrique de fp-jshide : les boutons du stepper n'ont aucun sens sans le
   script qui les ecoute. */
.fp-jsonly {
	display: none;
}

html.fp-js .fp-jsonly {
	display: inline-flex;
}

.fp-cart {
	/* Jetons du site, avec repli si le kit Elementor n'est pas charge.
	   Bloc volontairement identique a celui de checkout.css:26-53 : les deux
	   feuilles ne se chargent jamais sur la meme page, et les garder
	   independantes evite qu'une retouche du panier n'atteigne le tunnel de
	   commande, qui est le chemin qui encaisse l'argent.
	   Toute modification ici se reporte a la main dans assets/css/checkout.css. */
	--fp-accent: var( --e-global-color-accent, #b27460 );
	--fp-bg: var( --e-global-color-background, #faf9f3 );
	--fp-heading: #4f4d4d;
	--fp-text: var( --e-global-color-text, #4f4d4d );
	--fp-border: var( --e-global-color-border, #cfc9bb );
	--fp-field-bg: #f1ede8;
	--fp-card-bg: #f6f1ec;
	--fp-radius: 35px 3px 35px 3px;
	--fp-gap: 24px;

	/* Propres au panier. */
	--fp-card-white: #fff;
	--fp-thumb-bg: var( --fp-field-bg );
	--fp-radius-sm: 12px;
	--fp-radius-pill: 35px;
	--fp-rule: 1px solid var( --fp-border );
	--fp-title-font: var( --e-global-typography-primary-font-family, Georgia, serif );
	/* Cible tactile minimale : sous 44px, le stepper devient penible au pouce. */
	--fp-qty-size: 44px;

	/* Redefinies dans la portee du panier : toutes les regles du theme qui
	   s'appuient sur ces variables suivent, sans avoir a enumerer leurs
	   selecteurs, et rien ne bouge ailleurs sur le site. */
	--cmsmasters-colors-heading: var( --fp-heading );
	--cmsmasters-colors-text: var( --fp-heading );

	color: var( --fp-text );
	font-family: var( --cmsmasters-text-font-family, inherit );
}

/* Le theme pose html, body { overflow-x: hidden }, ce qui fait de html et body
   des conteneurs de defilement et prive position: sticky de sa reference.
   :root (0,1,0) et html body (0,0,2) passent devant la feuille du theme,
   chargee apres. Surtout pas « html, body » (0,0,1), qui perdrait la cascade. */
:root,
html body {
	overflow-x: clip;
}

/* Les boutons du theme peignent leur fond par deux calques ::before / ::after
   en position absolue, et non par background-color : sans les neutraliser, le
   terracotta du theme recouvrirait le stepper. */
.fp-cart button::before,
.fp-cart button::after {
	content: none;
}

/* Le theme rogne ses boutons : overflow:hidden plus un rayon 3px 35px, ce qui
   couperait les signes + et - sur les cotes. */
.fp-cart button {
	overflow: visible;
}

/* ------------------------------------------------------------------
 * Etat de chargement
 * ------------------------------------------------------------------ */

/* wc-cart pose .processing puis appelle blockUI. Plutot que de dupliquer le
   mecanisme, on lui donne l'apparence du tunnel et on masque son voile.
   Seul !important de la feuille, et il est necessaire : blockUI ecrit ses
   styles en inline, aucune specificite de selecteur ne peut passer devant. */
.fp-cart .processing,
.fp-cart .fp-busy {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.2s ease-in-out;
}

.fp-cart .blockUI.blockOverlay {
	display: none !important;
}

/* ------------------------------------------------------------------
 * En-tete
 * ------------------------------------------------------------------ */

.fp-cart__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 32px;
}

.fp-cart__title {
	margin: 0;
	/* Le noir de titrage du site, plus soutenu que le gris de texte. */
	color: var( --e-global-color-secondary, #2d322c );
	font-family: var( --fp-title-font );
	/* Le titre suit la largeur disponible : sous 360px il ne doit pas pousser
	   le lien de retour a la ligne suivante tout seul. */
	font-size: clamp( 32px, 6vw, 56px );
	font-weight: 400;
	line-height: 1.1;
}

.fp-cart .fp-cart__continue {
	color: var( --fp-text );
	font-size: 24px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.fp-cart .fp-cart__continue:hover {
	color: var( --fp-accent );
}

/* ------------------------------------------------------------------
 * Mise en page
 * ------------------------------------------------------------------ */

.fp-cart__grid {
	display: grid;
	/* minmax( 0, 1fr ) et non 1fr : sans lui, un nom de produit long impose sa
	   largeur minimale a la colonne et fait deborder la grille. */
	grid-template-columns: minmax( 0, 1fr );
	gap: 40px;
	align-items: start;
}

.fp-cart__main {
	min-width: 0;
}

.fp-cart__aside {
	display: flex;
	flex-direction: column;
	/* Pas de gap : l'aside contient un .cart-collaterals que WooCommerce impose
	   mais que plus rien ne remplit ici, et un gap lui compterait un espace a
	   lui tout seul. Les ecarts sont donc poses en marges, sur les blocs qui en
	   ont besoin. */
	gap: 0;
	min-width: 0;
}

@media ( min-width: 1181px ) {
	.fp-cart__grid {
		grid-template-columns: minmax( 0, 1fr ) 400px;
	}

	.fp-cart__aside {
		position: sticky;
		top: 32px;
	}
}

/* ------------------------------------------------------------------
 * Liste des articles
 * ------------------------------------------------------------------ */

.fp-cart__items {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var( --fp-rule );
}

.fp-cart__item {
	display: grid;
	/* Sous 768px, le stepper prend sa propre rangee pleine largeur : c'est le
	   seul moyen de garder des cibles de 44px sans comprimer le nom du produit. */
	grid-template-columns: 80px minmax( 0, 1fr ) auto;
	grid-template-areas:
		"thumb info  remove"
		"thumb price price"
		"qty   qty   qty";
	align-items: center;
	gap: 10px 14px;
	padding: 20px 0;
	border-bottom: var( --fp-rule );
}

.fp-cart__thumb {
	grid-area: thumb;
	align-self: start;
}

.fp-cart__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var( --fp-radius-sm );
	background: var( --fp-thumb-bg );
}

.fp-cart__info {
	grid-area: info;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fp-cart__name {
	color: var( --fp-heading );
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.fp-cart .fp-cart__name a {
	color: inherit;
	text-decoration: none;
}

.fp-cart .fp-cart__name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fp-cart__brand {
	color: var( --fp-text );
	font-size: 15px;
}

.fp-cart__price {
	grid-area: price;
	color: var( --fp-heading );
	font-size: 17px;
	white-space: nowrap;
}

.fp-cart__price del {
	margin-right: 6px;
	font-weight: 400;
	opacity: 0.6;
	text-decoration-thickness: 1px;
}

.fp-cart__price-now {
	font-weight: 600;
}

.fp-cart__item .backorder_notification {
	display: block;
	font-size: 14px;
	font-style: italic;
}

/* Metadonnees de variation, rendues par wc_get_formatted_cart_item_data(). */
.fp-cart__item .variation {
	margin: 4px 0 0;
	font-size: 14px;
}

/* ------------------------------------------------------------------
 * Selecteur de quantite
 * ------------------------------------------------------------------ */

.fp-cart__qty {
	grid-area: qty;
	display: inline-flex;
	align-items: center;
	justify-self: start;
	border: 1px solid var( --fp-border );
	border-radius: 0;
	background: transparent;
}

.fp-cart .fp-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --fp-qty-size );
	height: var( --fp-qty-size );
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var( --fp-heading );
	font-family: inherit;
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease-in-out;
}

.fp-cart .fp-qty__btn:hover:not( :disabled ) {
	color: var( --fp-accent );
}

.fp-cart .fp-qty__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.fp-cart .fp-qty__input {
	width: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var( --fp-heading );
	font-family: inherit;
	font-size: 17px;
	text-align: center;
	/* Les fleches natives doublonnent avec le stepper et desalignent la boite
	   sur Safari. */
	-moz-appearance: textfield;
	appearance: textfield;
}

.fp-cart .fp-qty__input::-webkit-outer-spin-button,
.fp-cart .fp-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.fp-cart .fp-qty__input:focus {
	outline: 2px solid var( --fp-accent );
	outline-offset: 2px;
}

/* Produit vendu a l'unite : pas de stepper, juste la quantite. */
.fp-cart__qty--fixed {
	justify-content: center;
	min-width: var( --fp-qty-size );
	height: var( --fp-qty-size );
}

.fp-qty__value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	color: var( --fp-heading );
	font-size: 17px;
}

/* ------------------------------------------------------------------
 * Suppression
 * ------------------------------------------------------------------ */

.fp-cart__remove {
	grid-area: remove;
	justify-self: end;
}

/* Le theme habille ses liens .remove d'une bordure et d'un fond ronds : c'est
   un bouton de suppression a lui, pas le pictogramme de la maquette. */
.fp-cart a.fp-cart__trash {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --fp-qty-size );
	height: var( --fp-qty-size );
	border: 0;
	border-radius: 0;
	background: none;
	color: var( --fp-text );
	font-size: 0;
	line-height: 1;
	text-decoration: none;
	transition: opacity 0.2s ease-in-out;
}

.fp-cart a.fp-cart__trash::before,
.fp-cart a.fp-cart__trash::after {
	content: none;
}

.fp-cart a.fp-cart__trash:hover {
	opacity: 0.6;
}

.fp-cart__trash-icon {
	display: block;
	width: 20px;
	height: 20px;
}

/* Repli sans JavaScript : bouton de validation des quantites. */
.fp-cart__update {
	margin-top: 20px;
}

.fp-cart .fp-cart__update-btn {
	padding: 13px 32px;
	border: 1px solid var( --fp-accent );
	border-radius: var( --fp-radius-pill );
	background: transparent;
	color: var( --fp-accent );
	font-family: var( --cmsmasters-button-font-family, inherit );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	cursor: pointer;
}

.fp-cart .fp-cart__update-btn:hover {
	background: var( --fp-accent );
	color: #fff;
}

@media ( min-width: 768px ) {
	.fp-cart__item {
		/* La maquette aligne tout sur une ligne : vignette, informations, puis
		   stepper et corbeille a droite. Le prix reste sous le nom. */
		grid-template-columns: 96px minmax( 0, 1fr ) auto auto;
		grid-template-areas:
			"thumb info  qty remove"
			"thumb price qty remove";
		gap: 8px 20px;
		padding: 24px 0;
	}

	.fp-cart__qty,
	.fp-cart__remove {
		justify-self: end;
	}
}

/* ------------------------------------------------------------------
 * Cartes de la colonne de droite
 * ------------------------------------------------------------------ */

/* Les deux cartes se touchent et se lisent comme un seul bloc : le bouton en
   haut, le recapitulatif dessous. Leurs bords en contact sont donc droits, et
   leurs marges annulees - WooCommerce en pose une sur .wc-proceed-to-checkout,
   qui creuserait un creneau entre les deux. */
.fp-cart__card {
	margin: 0;
	padding: 28px;
}

.fp-cart__card--cta {
	/* Bordure de la couleur du recapitulatif, sur fond transparent : le bloc se
	   dessine en creux, sans trancher avec la carte du dessous. */
	border: 2px solid var( --fp-card-bg );
	border-bottom: 0;
	border-radius: 35px 3px 0 0;
	background: transparent;
}

.fp-cart__card--totals {
	border-radius: 0 0 35px 3px;
	background: var( --fp-card-bg );
}

/* Deux marges de woocommerce.css (handle woocommerce-general, declare en
   dependance donc charge avant cette feuille) tombent sur ce bloc :
     .woocommerce-cart .wc-proceed-to-checkout            { margin: 1em 0 0 }
     .woocommerce-cart .wc-proceed-to-checkout a.checkout-button { margin-bottom: 1em }
   La premiere (0,2,0) decollait la carte du recapitulatif, la seconde (0,2,1)
   decalait le bouton dans sa carte. Les selecteurs ci-dessous passent devant
   par la specificite, (0,3,0) et (0,3,1), plutot que par !important. */
.fp-cart .fp-cart__summary .fp-cart__card--cta {
	margin: 0;
}

.fp-cart .fp-cart__card--cta a.fp-cart__checkout {
	margin: 0;
}

/* Style de base du bouton, garde en (0,2,0) : le bouton de l'ecran vide le
   partage sans etre dans la carte, et sa propre surcharge doit pouvoir passer
   devant. */
.fp-cart .fp-cart__checkout {
	display: block;
	width: 100%;
	padding: 16px 24px;
	border: 1px solid var( --fp-accent );
	border-radius: var( --fp-radius-pill );
	background: var( --fp-accent );
	color: #fff;
	font-family: var( --cmsmasters-button-font-family, inherit );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.fp-cart .fp-cart__checkout:hover {
	background: transparent;
	color: var( --fp-accent );
}

/* ------------------------------------------------------------------
 * Code promotionnel
 *
 * Repris de checkout.css : meme composant, mais la feuille du tunnel ne se
 * charge pas ici.
 * ------------------------------------------------------------------ */

.fp-coupon {
	display: flex;
	/* Le bouton passe sous le champ, aligne a droite. En ligne, il s'etirait a
	   la hauteur de l'input et paraissait plus haut que ceux du stepper. */
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	margin: 0 0 14px;
}

.fp-cart .fp-coupon__input {
	width: 100%;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: var( --fp-bg );
	color: var( --fp-heading );
	font-size: 20px;
	font-weight: 400;
	letter-spacing: 1px;
	text-align: center;
}

.fp-cart .fp-coupon__input::placeholder {
	color: #a4a198;
	opacity: 1;
}

.fp-cart .fp-coupon__input:focus {
	border-color: var( --fp-accent );
	outline: none;
}

.fp-cart .fp-coupon__apply {
	padding: 13px 32px;
	border: 1px solid var( --fp-accent );
	border-radius: var( --fp-radius-pill );
	background: transparent;
	color: var( --fp-accent );
	font-family: var( --cmsmasters-button-font-family, inherit );
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.fp-cart .fp-coupon__apply:hover {
	background: var( --fp-accent );
	color: #fff;
}

.fp-coupon__notices {
	margin-bottom: 14px;
	font-size: 14px;
}

.fp-coupon__notices ul {
	margin: 0;
	padding-left: 18px;
}

/* Puce d'un code applique, a cote du libelle « Remises ». */
.fp-cart a.fp-coupon__chip {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border: 1px solid var( --fp-border );
	border-radius: var( --fp-radius-pill );
	color: var( --fp-text );
	font-size: 13px;
	letter-spacing: 0.5px;
	text-decoration: none;
	white-space: nowrap;
}

.fp-cart a.fp-coupon__chip:hover {
	border-color: var( --fp-accent );
	color: var( --fp-accent );
}

/* ------------------------------------------------------------------
 * Lignes de totaux
 * ------------------------------------------------------------------ */

.fp-cart__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	color: var( --fp-heading );
	font-size: 17px;
}

.fp-cart__line--total {
	margin-top: 8px;
	padding-top: 16px;
	border-top: var( --fp-rule );
	font-size: 20px;
	font-weight: 600;
}

/* wc_price() enveloppe le montant : son poids propre l'emporte sinon sur celui
   pose sur la ligne. */
.fp-cart__line--total strong,
.fp-cart__line--total .woocommerce-Price-amount {
	font-weight: 600;
}

.fp-cart__line.cart-discount > span:last-child {
	white-space: nowrap;
}

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

.fp-cart__empty {
	max-width: 520px;
	margin: 0 auto;
	padding: 24px 0 8px;
	text-align: center;
}

/* Le message natif arrive dans un bandeau d'information bleu, avec une fleche
   en ::before : on le depouille plutot que de le remplacer, sa classe
   .wc-empty-cart-message etant le point d'accroche par lequel cart.js bascule
   vers cet ecran. */
.fp-cart__empty .wc-empty-cart-message,
.fp-cart__empty .woocommerce-info {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var( --fp-heading );
	font-size: 22px;
	text-align: center;
}

.fp-cart__empty .woocommerce-info::before {
	content: none;
}

.fp-cart__empty-lead {
	margin: 8px 0 28px;
	color: var( --fp-text );
}

.fp-cart .fp-cart__empty-cta {
	display: inline-block;
	width: auto;
	padding: 16px 40px;
}

.fp-cart--empty .fp-reassurance {
	max-width: 520px;
	margin-inline: auto;
}

/* ------------------------------------------------------------------
 * Reassurance
 *
 * Reprise de checkout.css, pour la meme raison que le code promotionnel.
 * ------------------------------------------------------------------ */

.fp-reassurance {
	margin: 12px 0 0;
	padding: 0 8px;
	list-style: none;
}

.fp-reassurance__item {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 0;
	border-bottom: var( --fp-rule );
}

.fp-reassurance__item:last-child {
	border-bottom: 0;
}

.fp-reassurance__icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.fp-reassurance__text {
	display: flex;
	flex-direction: column;
	font-size: 15px;
	line-height: 1.4;
}

.fp-reassurance__text strong {
	color: var( --fp-heading );
	font-weight: 600;
}

/* ------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------ */

@media ( max-width: 767px ) {
	.fp-cart__header {
		margin-bottom: 24px;
	}

	.fp-cart__card {
		padding: 20px;
	}

	.fp-cart__grid {
		gap: 28px;
	}

	/* 24px passe en desktop, mais ecrase l'en-tete sur un ecran etroit, ou le
	   lien passe deja sous le titre. */
	.fp-cart .fp-cart__continue {
		font-size: 17px;
	}

	.fp-cart .fp-coupon__input {
		font-size: 17px;
	}
}