/**
 * Page panier Florâme — charte.
 * Table : Produit (photo+infos+teinte) · Prix unitaire · Quantité · Total · Supprimer.
 * Totaux en sidebar. Couleurs reprises des variables Salient.
 */

/* ── Layout : tableau à gauche, totaux en sidebar ── */
.florame-cart-layout {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}
.florame-cart-layout .woocommerce-cart-form {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}
.florame-cart-layout .cart-collaterals {
	flex: 0 0 360px;
	width: 360px !important;
	float: none !important;
	margin: 0;
}
.florame-cart-layout .cart-collaterals .cross-sells {
	width: 100% !important;
}

/* ── Table ── */
.florame-cart-table {
	width: 100% !important;
	border-collapse: collapse !important;
	border: 0 !important;
	font-family: "Montserrat", sans-serif;
	margin-bottom: 24px;
}
/* En-têtes : TOUS la même typo, 14px. */
.florame-cart-table thead th,
.florame-cart-table thead th span {
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.02em !important;
	text-transform: none !important;
	color: var(--nectar-accent-color, #828d7d) !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
	padding: 0 16px 14px !important;
	text-align: left !important;
}
.florame-cart-table thead .product-price,
.florame-cart-table thead .product-quantity,
.florame-cart-table thead .product-subtotal {
	text-align: center !important;
}
.florame-cart-table thead .product-remove {
	text-align: right !important;
}
.florame-cart-table td {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
	padding: 20px 16px !important;
	vertical-align: middle !important;
	text-align: center;
	font-size: 14px;
}
.florame-cart-table td.product-name {
	text-align: left;
}
.florame-cart-table td.product-remove {
	text-align: right;
}
/* Largeurs : on resserre Prix unitaire / Quantité / Total / Supprimer pour que
   la colonne Produit s'étire au maximum. */
.florame-cart-table .product-price { width: 120px !important; }
.florame-cart-table .product-quantity { width: 140px !important; }
.florame-cart-table .product-subtotal { width: 120px !important; }
.florame-cart-table .product-remove { width: 56px !important; }
.florame-cart-table .product-name { width: auto !important; }

/* ── Texte du panier en couleur accent (charte) ── */
.florame-cart-table td,
.florame-cart-table td .amount,
.florame-cart-table td bdi,
.florame-cart-layout .cart_totals,
.florame-cart-layout .cart_totals th,
.florame-cart-layout .cart_totals td,
.florame-cart-layout .cart_totals .amount,
.florame-cart-layout .cart_totals bdi {
	color: var(--nectar-accent-color, #828d7d) !important;
}

/* ── Colonne produit : photo + infos ── */
.florame-cart-product {
	display: flex;
	align-items: center;
	gap: 18px;
	text-align: left;
}
.florame-cart-product__info {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}
/* Vignette produit : carré FIXE identique pour tous, image en « contain »
   centrée à l'intérieur (quel que soit le ratio de la photo source). */
.florame-cart-product__thumb {
	flex: 0 0 60px !important;
	width: 60px !important;
	height: 60px !important;
	line-height: 0;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden;
	box-sizing: border-box !important;
	padding: 6px; /* l'image reste « contain » à l'intérieur, avec de l'air. */
	background: #fff;
	border-radius: 8px;
}
/* Le lien éventuel autour de l'image remplit aussi le carré.
   On annule le dégradé que Salient applique à .woocommerce-cart .product-name a
   (c'est ce dégradé qui dessinait un trait sous l'image). */
.florame-cart-product__thumb a,
.florame-cart-product__thumb a:hover,
.florame-cart-table .product-name .florame-cart-product__thumb a,
.florame-cart-table .product-name .florame-cart-product__thumb a:hover {
	display: flex !important;
	width: 100% !important;
	height: 100% !important;
	align-items: center !important;
	justify-content: center !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	border-bottom: 0 !important;
	text-decoration: none !important;
}
.florame-cart-product__thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	background: transparent !important;
	margin: 0 !important;
}
/* AUCUN effet au survol dans la cellule produit (image ET nom) : Salient en
   ajoute (zoom image, voile, changement de couleur du lien) → on neutralise
   tout, y compris quand le survol est porté par un parent. */
.florame-cart-product,
.florame-cart-product *,
.florame-cart-product:hover,
.florame-cart-product:hover *,
.florame-cart-product__thumb,
.florame-cart-product__thumb:hover,
.florame-cart-product__thumb a,
.florame-cart-product__thumb a:hover,
.florame-cart-product__thumb:hover img,
.florame-cart-product__thumb a:hover img,
.florame-cart-product__thumb img,
.florame-cart-product__thumb img:hover {
	opacity: 1 !important;
	transform: none !important;
	box-shadow: none !important;
	transition: none !important;
	filter: none !important;
	background-image: none !important; /* tue le soulignement dégradé Salient du lien. */
	border-bottom: 0 !important;
}
/* Titre produit : typo BODY (plus discret), AUCUN soulignement ni au survol.
   Salient souligne les liens de contenu via background-image (dégradé animé),
   box-shadow ou border-bottom → on neutralise tous ces mécanismes. */
.florame-cart-table a.florame-cart-product__name,
.florame-cart-table a.florame-cart-product__name:hover,
.florame-cart-table a.florame-cart-product__name:focus,
.florame-cart-table a.florame-cart-product__name:active,
.florame-cart-product__name,
.florame-cart-product__name:hover,
.florame-cart-product__name:focus {
	font-family: "Montserrat", sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: var(--nectar-accent-color, #828d7d) !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	background-image: none !important;
	background: none !important;
}

/* ── Teinte + image du sélecteur (petit carré arrondi) ── */
.planche-cart-attrs {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}
.planche-cart-attr {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--nectar-accent-color, #828d7d);
}
.planche-cart-attr + .planche-cart-attr {
	margin-top: 6px;
}
.planche-cart-attr__label {
	font-weight: 600;
}
.planche-cart-attr__label::after {
	content: " :";
}
.planche-cart-attr__value {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.planche-cart-swatch {
	display: inline-flex;
	width: 1.4em; /* même hauteur que le texte. */
	height: 1.4em;
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.12);
	flex: 0 0 auto;
}
.planche-cart-swatch img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	margin: 0 !important;
}

/* ── Prix / Total ── */
.florame-cart-table .product-price {
	color: #2f3330;
}
.florame-cart-table .product-subtotal {
	font-weight: 600;
	color: #2f3330;
}

/* ── Quantité : MÊME design que la fiche produit (stepper olive en pilule) ── */
.florame-cart-table .quantity {
	display: inline-flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	width: auto !important;
	border: 1px solid var(--nectar-extra-color-1, #b3beaf) !important;
	border-radius: 25px !important;
	padding: 9px !important;
	background: transparent !important;
}
/* −/+ : glyphe en SVG centré (le « - » texte des input n'est jamais centré). */
.florame-cart-table .quantity input.minus,
.florame-cart-table .quantity input.plus {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--nectar-extra-color-1, #b3beaf) !important;
	border-radius: 50% !important;
	color: transparent !important;
	font-size: 0 !important;
	background-color: transparent !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 11px !important;
	cursor: pointer;
}
.florame-cart-table .quantity input.minus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23828d7d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") !important;
}
.florame-cart-table .quantity input.plus {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23828d7d' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
}
.florame-cart-table .quantity input.minus:hover,
.florame-cart-table .quantity input.plus:hover {
	background-color: var(--nectar-extra-color-3, #f0f2ef) !important;
}
.florame-cart-table .quantity input.qty {
	-webkit-appearance: textfield !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
	width: 40px !important;
	height: 24px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--nectar-accent-color, #828d7d) !important;
	text-align: center !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	pointer-events: none !important; /* l'input ne réagit ni au clic ni à la saisie (seuls −/+ agissent). */
}
.florame-cart-table .quantity input.qty::-webkit-outer-spin-button,
.florame-cart-table .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

/* ── Supprimer ── */
.florame-cart-table .product-remove .remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.12);
	color: var(--nectar-accent-color, #828d7d) !important;
	font-size: 22px;
	line-height: 1;
	background: #fff !important;
	transition: background 0.15s ease, color 0.15s ease;
}
.florame-cart-table .product-remove .remove:hover {
	background: var(--nectar-accent-color, #828d7d) !important;
	color: #fff !important;
}

/* ── Code promo en sidebar (sous les totaux) : encadré olive, input blanc,
   bouton dessous — même style à TOUTES les tailles. ── */
.florame-cart-layout .cart-collaterals .florame-coupon {
	display: block;
	margin: 16px 0 0;
	border: 1px solid var(--nectar-accent-color, #828d7d);
	border-radius: 12px;
	padding: 16px;
}
.florame-cart-layout .cart-collaterals .florame-coupon .input-text {
	display: block;
	box-sizing: border-box;
	width: 100% !important;
	height: 44px;
	margin: 0 0 12px !important;
	padding: 0 18px !important;
	background: #fff !important;
	border: 1px solid var(--nectar-accent-color, #828d7d) !important;
	border-radius: 100px !important;
}
.florame-cart-layout .cart-collaterals .florame-coupon .button {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
}
/* Boutons (coupon, checkout…) — charte Figma, par-dessus Salient. */
body.woocommerce-cart .florame-cart-layout .button,
body.woocommerce-cart .florame-cart-layout input.button,
body.woocommerce-cart .florame-cart-layout button[type="submit"] {
	display: inline-block !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	padding: 12px 24px !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	border: 0 !important;
	border-radius: 100px !important;
	background: var(--nectar-accent-color, #828d7d) !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* ── Sidebar totaux ── */
.florame-cart-layout .cart_totals {
	width: 100% !important;
	float: none !important;
	background: var(--nectar-extra-color-3, #f0f2ef);
	border-radius: 14px;
	padding: 28px 26px;
}
.florame-cart-layout .cart_totals h2 {
	font-family: "The Seasons", Georgia, serif;
	font-size: 24px;
	margin: 0 0 18px;
}
.florame-cart-layout .cart_totals table {
	border: 0 !important;
	margin: 0 0 18px !important;
	font-size: 14px;
}
.florame-cart-layout .cart_totals table th,
.florame-cart-layout .cart_totals table td {
	border: 0 !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
	padding: 12px 0 !important;
	background: transparent !important;
}
.florame-cart-layout .cart_totals table th {
	text-align: left !important;
}
/* Montants alignés à droite. */
.florame-cart-layout .cart_totals table td {
	text-align: right !important;
}
body.woocommerce-cart .florame-cart-layout .cart_totals .wc-proceed-to-checkout a.checkout-button,
body.woocommerce-cart .florame-cart-layout .cart_totals a.checkout-button,
body.woocommerce-cart .florame-cart-layout .cart_totals .wc-proceed-to-checkout a.button {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	/* Même padding que les boutons de la fiche produit. */
	padding: 12px 24px !important;
	font-family: "Montserrat", sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	border-radius: 100px !important;
	color: #fff !important; /* texte blanc (l'accent global ne doit pas le rendre olive sur olive). */
}

/* ── État de mise à jour AJAX ── */
.florame-cart-updating {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
/* AJAX actif → bouton « Mettre à jour le panier » masqué. */
.florame-ajax-cart button[name="update_cart"],
.florame-ajax-cart input[name="update_cart"] {
	display: none !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────
   > 1350px      : tableau + totaux en sidebar (image à côté du nom).
   1200–1350px   : tableau + sidebar, mais IMAGE AU-DESSUS du nom.
   ≤ 1200px      : lignes produit en CARTES (100% largeur) + totaux empilés.
   ≤ 460px       : coupon/boutons pleine largeur. */

/* 1200–1350px : image produit au-dessus du nom (le tableau se resserre). */
@media (min-width: 1201px) and (max-width: 1350px) {
	.florame-cart-product {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
}

/* ≤ 1200px : totaux empilés + cartes pleine largeur. */
@media (max-width: 1200px) {
	.florame-cart-layout {
		flex-direction: column;
		align-items: stretch; /* sinon les blocs gardent la largeur de leur contenu. */
		gap: 16px; /* moins d'espace avec le bloc totaux une fois empilé. */
	}
	.florame-cart-layout .woocommerce-cart-form {
		width: 100% !important;
	}
	.florame-cart-layout .cart-collaterals {
		flex: 0 0 auto;
		width: 100% !important;
	}
	/* Empilés → pleine largeur. */
	.florame-cart-layout .cart_totals {
		max-width: none !important;
		width: 100% !important;
	}

	.florame-cart-table,
	.florame-cart-table tbody,
	.florame-cart-table tr,
	.florame-cart-table td {
		display: block;
		width: 100% !important;
	}
	.florame-cart-table thead {
		display: none;
	}

	/* Chaque produit = une carte pleine largeur. */
	.florame-cart-table tbody tr.cart_item {
		width: 100% !important;
		position: relative;
		border: 1px solid rgba(0, 0, 0, 0.1) !important;
		border-radius: 12px;
		padding: 16px;
		margin-bottom: 16px;
	}
	.florame-cart-table tbody tr.cart_item td {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		text-align: right !important;
		padding: 12px 0 !important;
		border: 0 !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
	}
	.florame-cart-table tbody tr.cart_item td:last-child {
		border-bottom: 0 !important;
	}
	.florame-cart-table tbody tr.cart_item td::before {
		content: attr(data-title);
		font-weight: 600;
		font-size: 12px;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: var(--nectar-accent-color, #828d7d);
		white-space: nowrap;
	}

	/* Cellule produit : pleine largeur, photo + infos, nom aligné à gauche.
	   (sélecteur spécifique pour battre « .cart_item td { text-align:right } »). */
	.florame-cart-table tbody tr.cart_item td.product-name {
		display: block !important;
		text-align: left !important;
		padding-right: 42px !important; /* place pour le × en haut à droite. */
		border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
	}
	.florame-cart-table tbody tr.cart_item td.product-name::before {
		display: none !important;
	}
	.florame-cart-product {
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}

	/* Supprimer : × en HAUT À DROITE de la carte, SANS libellé. */
	.florame-cart-table tbody tr.cart_item td.product-remove {
		position: absolute !important;
		top: 12px;
		right: 12px;
		width: auto !important;
		padding: 0 !important;
		border: 0 !important;
		justify-content: flex-end;
	}
	.florame-cart-table tbody tr.cart_item td.product-remove::before {
		display: none !important;
	}
}

@media (max-width: 460px) {
	.florame-cart-product {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ── Panier vide : message centré + lien « Commander Florâme® » ── */
.flo-empty-cart {
	text-align: center;
	max-width: 640px;
	margin: 40px auto 60px;
	padding: 0 20px;
}
.flo-empty-cart__title {
	margin: 0 0 18px !important;
	color: #3c4a39;
}
.flo-empty-cart__title.h2like {
	padding-bottom: 0 !important;
}
.flo-empty-cart__cta {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 100px;
	background: #828d7d;
	color: #fff !important;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none !important;
	transition: background 0.2s ease;
}
.flo-empty-cart__cta:hover {
	background: #6f7a6a;
	color: #fff !important;
}