/* ch-buy-together — Ventes additionnelles (tiroir panier, panier, checkout).
   Autonome : variables propres (--ch-bt-*, réglables sur :root), valeurs
   par défaut neutres ; les variables --rmp-* ne sont qu'un repli facultatif
   pour les thèmes qui les définissent. Voir l'en-tête de frontend.css. */

.ch-bt-upsells {
	--ch-bt-u-border: var(--ch-bt-border, var(--rmp-border, #d2d3d3));
	--ch-bt-u-radius: var(--ch-bt-radius, var(--rmp-radius, 10px));
	--ch-bt-u-brand:  var(--ch-bt-accent, var(--rmp-brand, #1d1d1f));
	--ch-bt-u-brand-hover: var(--ch-bt-accent-hover, var(--rmp-brand-hover, #3a3a3c));
	--ch-bt-u-text:   var(--ch-bt-text, var(--rmp-text)); /* absent = couleur héritée du thème */
	--ch-bt-u-soft:   var(--ch-bt-text-soft, var(--rmp-text-soft, #6e6e73));
	--ch-bt-u-fs:     var(--ch-bt-font-size, var(--rmp-fs-body, .96rem));
	--ch-bt-u-fs-sm:  var(--ch-bt-font-size-sm, var(--rmp-fs-sm, .875rem));
	--ch-bt-u-fs-xs:  var(--ch-bt-font-size-xs, var(--rmp-fs-xs, .78rem));
	--ch-bt-u-img-bg: var(--ch-bt-image-bg, var(--rmp-bg-gray, #f9fafb));
	display: flex; flex-direction: column; gap: 10px;
	margin: 16px 0; font-family: inherit; color: var(--ch-bt-u-text);
	box-sizing: border-box;
}
.ch-bt-upsells *, .ch-bt-upsells *::before, .ch-bt-upsells *::after { box-sizing: border-box; }

.ch-bt-upsells__heading {
	font-size: var(--ch-bt-u-fs-sm); font-weight: 600; color: var(--ch-bt-u-text); line-height: 1.3;
}

.ch-bt-upsell {
	display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px;
	padding: 12px; background: #fff;
	border: 1px solid var(--ch-bt-u-border) !important; border-radius: var(--ch-bt-u-radius) !important;
	transition: border-color .15s, opacity .2s;
}
.ch-bt-upsell:hover { border-color: var(--ch-bt-u-brand) !important; }
.ch-bt-upsell.is-added { opacity: .65; }

.ch-bt-upsell__img {
	width: 56px !important; height: 56px !important; max-width: none !important; object-fit: contain;
	border-radius: 8px; background: var(--ch-bt-u-img-bg); display: block; margin: 0 !important;
}
.ch-bt-upsell__body { min-width: 0; }
.ch-bt-upsell__title {
	font-size: var(--ch-bt-u-fs-sm); font-weight: 600; line-height: 1.3; color: var(--ch-bt-u-text);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ch-bt-upsell__msg { margin-top: 2px; font-size: var(--ch-bt-u-fs-xs); line-height: 1.4; color: var(--ch-bt-u-soft); }
.ch-bt-upsell__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.ch-bt-upsell__price { display: inline-flex; align-items: baseline; gap: 6px; font-size: var(--ch-bt-u-fs-sm); font-weight: 600; color: var(--ch-bt-u-text); white-space: nowrap; }
.ch-bt-upsell__regular { font-weight: 400; color: var(--ch-bt-u-soft); text-decoration: line-through; }
.ch-bt-upsell__regular[hidden] { display: none; }
.ch-bt-upsell__badge {
	display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px;
	background: #e8f6ee; color: #1a7f45; font-size: var(--ch-bt-u-fs-xs); font-weight: 700; line-height: 1; white-space: nowrap;
}
.ch-bt-upsell__vars { display: flex; flex: 1 1 100%; gap: 6px; min-width: 0; max-width: 100%; }
.ch-bt-upsell__vars .ch-bt-upsell__variation { flex: 1 1 0; width: auto; padding: 0 4px 0 8px !important; }
.ch-bt-upsell__variation option:disabled, .ch-bt-upsell__variation option.is-unavailable { color: #9ca3af; }
.ch-bt-upsell__variation {
	max-width: 100%; min-width: 0; height: 30px !important; padding: 0 26px 0 8px !important; margin: 0 !important;
	font-size: var(--ch-bt-u-fs-xs) !important; color: var(--ch-bt-u-text) !important; background-color: #fff !important;
	border: 1px solid var(--ch-bt-u-border) !important; border-radius: 8px !important; line-height: 28px !important;
}
.ch-bt-upsell__error { margin-top: 4px; font-size: var(--ch-bt-u-fs-xs); color: #d70015; }

.ch-bt-upsell__btn {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 4px;
	height: 36px; padding: 0 14px !important; margin: 0 !important; min-width: 0; width: auto !important;
	background: var(--ch-bt-u-brand) !important; color: var(--ch-bt-accent-text, #fff) !important; border: none !important;
	border-radius: 999px !important; box-shadow: none !important;
	font-size: var(--ch-bt-u-fs-sm) !important; font-weight: 600 !important; line-height: 1 !important;
	text-transform: none !important; letter-spacing: 0 !important; white-space: nowrap; cursor: pointer;
	transition: background .15s, transform .1s;
}
.ch-bt-upsell__btn:hover { background: var(--ch-bt-u-brand-hover) !important; }
.ch-bt-upsell__btn:active { transform: scale(.97); }
.ch-bt-upsell__btn:focus-visible { outline: 2px solid var(--ch-bt-u-brand); outline-offset: 2px; }
.ch-bt-upsell__btn:disabled { cursor: default; }
.ch-bt-upsell__btn.is-loading { opacity: .7; }
.ch-bt-upsell__btn.is-loading svg { animation: ch-bt-u-spin .8s linear infinite; }
.ch-bt-upsell__btn.is-added { background: #1a8a4a !important; }
.ch-bt-upsell__btn.is-added svg { display: none; }
@keyframes ch-bt-u-spin { to { transform: rotate(360deg); } }

/* Tiroir FunnelKit : même marge latérale que les articles du tiroir, et même
   typo que leurs nom / prix (.fkcart-item-title / .fkcart-item-price). */
.fkcart-modal-container .ch-bt-upsells { margin: 8px 16px 16px; }
.fkcart-modal-container .ch-bt-upsell__title {
	font-size: var(--ch-bt-font-size, var(--rmp-fs-body, 14px)); font-weight: 600; line-height: 1.5;
	color: var(--fkcart-primary-text-color, var(--ch-bt-u-text));
}
.fkcart-modal-container .ch-bt-upsell__price { font-size: var(--ch-bt-font-size, var(--rmp-fs-body, 14px)); line-height: 1.5; }
.fkcart-modal-container .ch-bt-upsell__now { font-weight: 400; color: var(--fkcart-primary-text-color, var(--ch-bt-u-text)); }

/* Checkout Blocks : sous le résumé de commande, même typo que les articles
   du résumé (.wc-block-components-product-name / __total-price). */
.ch-bt-upsells-slot .ch-bt-upsells { margin: 16px 0 0; }
/* Mobile : le résumé (et donc l'offre) est juste au-dessus de « Commander » — un espace franc évite un tap sur
   « Commander » au lieu de « Ajouter », ou l'inverse (audit checkout 2026-10-08). */
.ch-bt-upsells-slot { margin-bottom: 24px; }
.ch-bt-upsells-slot .ch-bt-upsell__title {
	font-size: var(--ch-bt-u-fs); font-weight: 500; line-height: 1.4; color: var(--ch-bt-u-text);
}
.ch-bt-upsells-slot .ch-bt-upsell__price { font-size: var(--ch-bt-font-size, var(--rmp-fs-body, 14px)); line-height: 1.4; }
.ch-bt-upsells-slot .ch-bt-upsell__now { font-weight: 400; color: var(--ch-bt-u-soft); }

/* Écrans étroits : le bouton passe sous le texte. */
@media (max-width: 380px) {
	.ch-bt-upsell { grid-template-columns: 48px 1fr; }
	.ch-bt-upsell__img { width: 48px !important; height: 48px !important; }
	.ch-bt-upsell__btn { grid-column: 1 / -1; width: 100% !important; }
}