/**
 * Cart Page Styles
 *
 * Layout panier : même architecture que les archives produits.
 * Desktop : panneaux horizontaux (demi + variable + demi conditionnel)
 * Mobile  : stack vertical automatique
 *
 * @package     UneAutreVoix
 * @version     0.1.0
 *
 * @changelog
 * 0.1.0 — Passage en preprod
 * 0.0.5 - A3 : aucune violation opacity (toutes les occurrences sont des exceptions légitimes)
 *       - Remplacement rgba(0, 0, 0, 0.125) → var(--shadow-card) sur toutes les box-shadow
 * 0.0.4 - Suppression violations opacity sur contenu lisible
 *       - .cart-count-label : opacity 0.55 → color: var(--color-text-light)
 *       - .cart-item-remove (normal) : opacity 0.5 supprimée (transition hover conservée)
 *       - .cart-summary-line-label : opacity 0.6 → color: var(--color-text-light)
 *       - .cart-summary-shipping-note : opacity 0.55 → color: var(--color-text-light)
 *       - .cart-upsell-intro-text : opacity 0.6 → color: var(--color-text-light)
 * 0.0.3 - Audit complet : suppression code mort et redondances (~160 lignes)
 *       - Code mort : bloc coupon entier (déplacé au checkout), règles .is-removing
 *       - Redondances h2/h3 : .cart-summary-title, .cart-upsell-heading desktop supprimés
 *       - .cart-item-title : font-family/weight/line-height supprimés (héritage h3)
 *       - Propriétés héritées de body (font-family, color) nettoyées sur ~11 sélecteurs
 *       - Doublons mobile .cart-summary-total et .cart-checkout-cta fusionnés
 *       - padding:0 / gap:0 couverts par reset global supprimés
 *       - Valeurs hardcodées → variables : gap:10px → --spacing-xs, height:1px → --border-thin
 *       - Desktop : .cart-summary width 50vh
 *       - Desktop : h2 panier (tagline, upsell heading, summary title) → 4.75vh
 *         (intermédiaire entre h2 standard 6vh et h3 3.5vh)
 * 0.0.2 - Panneau 1 : résumé intégré (titre masqué, espacement compact)
 *       - Panneau 3 conditionnel (≥ 3 produits) : title visible, espacement normal
 * 0.0.1 - Création
 *       - En-tête panier (section demi)
 *       - Cards articles : zigzag, bandeau couleur, image, contenu, qty, prix
 *       - Panneau récapitulatif (section demi)
 *       - État vide
 *       - Mobile : stack vertical, max-width 325px par card
 */

/* ============================================================================
   Cart Header — panneau gauche (demi)
   ============================================================================ */

.cart-header-section {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cart-header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	width: 50vh;
}

.cart-header-top {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}


.cart-count-label {
	font-family: var(--font-body);
	font-size: var(--text-size-m);
	color: var(--color-text-light);
}


.cart-empty-shop-btn {
	margin-top: var(--spacing-md);
}


/* ============================================================================
   Cart Items Row — panneau variable
   ============================================================================ */

.cart-items-section {
	/* hérite de main-section-variable : width fit-content, height 95vh */
	display: flex;
	align-items: center;
}

.cart-items-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--spacing-xl);
}

/* ============================================================================
   Cart Item Card
   ============================================================================ */

.cart-item {
	flex: 0 0 auto;
	width: 30vh;
	display: flex;
	flex-direction: column;
	border: 1vh solid var(--color-background);
	box-shadow: 0.2vh 0.2vh 1.6vh var(--shadow-card);
	position: relative;
	transition:
		opacity var(--transition-fast) var(--ease-standard),
		transform var(--transition-fast) var(--ease-standard);
}

/* État loading */
.cart-item.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Système de couleurs */
.cart-item-color-green { --cart-item-color: var(--color-green); }
.cart-item-color-blue  { --cart-item-color: var(--color-blue); }
.cart-item-color-pink  { --cart-item-color: var(--color-pink); }
.cart-item-color-gold  { --cart-item-color: var(--color-gold); }
.cart-item-color-text  { --cart-item-color: var(--color-text); }

/* ── Zigzag desktop (même pattern que les archives) ── */
@media (min-width: 1201px) {
	.cart-items-row > .cart-item:nth-child(odd) {
		transform: translateY(calc(-1 * var(--spacing-lg)));
	}

	.cart-items-row > .cart-item:nth-child(even) {
		transform: translateY(var(--spacing-lg));
	}

	/* Pas de zigzag si article unique */
	.cart-items-row > .cart-item:only-child {
		transform: none;
	}
}

/* ── Zone image ── */
.cart-item-image {
	position: relative;
	box-shadow: inset 0.2vh 0.2vh 1.6vh var(--shadow-card);
}

.cart-item-bandeau {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 8vh;
	transform: translateY(-50%);
	background-color: var(--cart-item-color);
	z-index: 1;
}

.cart-item-image-content {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin-top: -2vh;
	margin-bottom: -1vh;
}

.cart-item-image-content img {
	width: 75%;
	height: auto;
	display: block;
	margin: 0 auto;
	transform: translateY(-2vh);
	-webkit-user-drag: none;
	user-select: none;
}

/* ── Zone contenu ── */
.cart-item-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	padding: 1.5vh 2vh 1.5vh 2vh;
	flex: 1;
}

.cart-item-title-link {
	text-decoration: none;
	color: inherit;
}

.cart-item-title {
	font-size: var(--text-size-xl);
	color: var(--color-text);
}

.cart-item-title-link:hover .cart-item-title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cart-item-author {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-size: var(--text-size-s);
	font-style: italic;
}

.cart-item-author-icon {
	width: 1.5vh;
	height: 1.5vh;
	fill: var(--cart-item-color);
	flex-shrink: 0;
}

.cart-item-separator {
	width: 100%;
	height: var(--border-thin);
	background-color: var(--cart-item-color);
	flex-shrink: 0;
}

.cart-item-format {
	font-size: var(--text-size-s);
	font-weight: 500;
}

/* ── Pied de card (quantité + prix) ── */
.cart-item-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: var(--spacing-sm);
	gap: var(--spacing-sm);
}

.cart-item-qty {
	display: flex;
	align-items: center;
	border: var(--border-thin) solid var(--color-text);
}

.cart-qty-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: var(--text-size-l);
	color: var(--color-text);
	padding: 0.4vh 0.8vh;
	line-height: 1;
	transition: color var(--transition-fast) var(--ease-standard);
}

.cart-qty-btn:hover:not(:disabled) {
	color: var(--cart-item-color);
}

.cart-qty-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.cart-qty-value {
	font-size: var(--text-size-m);
	min-width: 2vh;
	text-align: center;
	padding: 0 0.4vh;
	color: var(--color-text);
}

.cart-item-price {
	font-size: var(--text-size-m);
	font-weight: 600;
	white-space: nowrap;
}

/* ── Bouton supprimer ── */
.cart-item-remove {
	position: absolute;
	top: 0.8vh;
	right: 0.8vh;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-text);
	font-size: var(--text-size-xl);
	line-height: 1;
	padding: 0.4vh;
	transition: opacity var(--transition-fast) var(--ease-standard);
	z-index: 10;
}

.cart-item-remove:hover:not(:disabled) {
	opacity: 1;
}

/* ============================================================================
   Cart Summary — partagé entre panneau 1 (header) et panneau 3 (final)
   ============================================================================ */

.cart-summary-section {
	display: flex;
	align-items: center;
	justify-content: center;
}

.cart-summary {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

/* Dans le panneau 1 (header) : titre redondant avec "Mon panier", espacement serré */
.cart-header-section .cart-summary {
	height: auto;
	gap: var(--spacing-sm);
}

.cart-header-section .cart-summary-title {
	display: none;
}

/* Panneau 1 : tous les textes en couleur pleine (pas de gris clair) */
.cart-header-section .cart-count-label,
.cart-header-section .cart-summary-line-label,
.cart-header-section .cart-summary-shipping-note {
	color: var(--color-text);
}

.cart-summary-items {
	display: none; /* visible uniquement sur mobile */
}

.cart-summary-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--spacing-sm);
	font-family: var(--font-body);
	font-size: var(--text-size-l);
	color: var(--color-text);
}

.cart-summary-item:not(:last-child) {
	padding-bottom: var(--spacing-lg);
	border-bottom: var(--border-thin) solid var(--color-text);
}

/* Colonne gauche : titre + format */
.cart-summary-item-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cart-summary-item-name {
	font-weight: 500;
}

.cart-summary-item-format {
	font-size: var(--text-size-s);
	font-style: italic;
}

/* Colonne droite : prix + stepper, alignés à droite */
.cart-summary-item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--spacing-xs);
	flex-shrink: 0;
}

.cart-summary-item-price {
	white-space: nowrap;
	font-weight: 600;
}

.cart-summary-lines {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.cart-summary-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: var(--text-size-m);
}

.cart-summary-line-label {
	color: var(--color-text-light);
}

.cart-summary-shipping-note {
	font-size: var(--text-size-s);
	color: var(--color-text-light);
}

.cart-summary-shipping-unavailable {
	font-size: var(--text-size-s);
	font-weight: 600;
	opacity: 1;
	margin-left: auto;
	text-align: right;
}

.cart-summary-shipping-available {
	font-weight: 500;
}

.cart-summary-shipping-countries {
	font-size: var(--text-size-s);
	font-style: italic;
	padding-top: var(--spacing-xs);
	line-height: var(--line-height-tight);
	text-align: right;
}

.cart-summary-discount .cart-summary-line-value {
	color: var(--color-green);
	font-weight: 600;
}

/* Total */
.cart-summary-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--spacing-sm);
	border-top: var(--border-thin) solid var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-size-l);
	font-weight: 600;
	color: var(--color-text);
}


/* CTA Commander — même style que les boutons pleins de la page produit */
.cart-checkout-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	text-decoration: none;
	padding: 1.8vh var(--spacing-lg);
	font-family: var(--font-cta-family);
	font-size: var(--font-cta-size);
	font-weight: 700;
	text-transform: var(--font-cta-text-transform);
	box-shadow: inset 0 0 0 0.4vh var(--color-text);
	position: relative;
	overflow: hidden;
	z-index: 1;
	box-sizing: border-box;
}

.cart-checkout-cta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-text);
	z-index: 0;
	transform: scaleX(1);
	transform-origin: left;
	transition: transform var(--transition-smooth) var(--ease-smooth);
}

@media (hover: hover) {
	.cart-checkout-cta:hover::before {
		transform: scaleX(0);
		transform-origin: right;
	}
}

.cart-checkout-inner {
	position: relative;
	z-index: 1;
	color: var(--color-background);
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	transition: color var(--transition-smooth) var(--ease-smooth);
}

@media (hover: hover) {
	.cart-checkout-cta:hover .cart-checkout-inner {
		color: var(--color-text);
	}
}

.cart-checkout-arrow {
	font-size: var(--text-size-m);
}

/* ============================================================================
   Cart Bandeau Animé — panneau vertical entre articles et upsell
   ============================================================================ */

.cart-bandeau-section {
	position: relative;
	flex-shrink: 0;
}

/* Spécificité 0-2-1 pour écraser html.uav-horizontal-enabled .main-section-variable (fit-content) */
html.uav-horizontal-enabled .cart-bandeau-section {
	width: 31vh; /* 15vh bandeau + 8vh marge gauche + 8vh marge droite */
}

.cart-bandeau-color-green { --cart-bandeau-color: var(--color-green); }
.cart-bandeau-color-blue  { --cart-bandeau-color: var(--color-blue); }
.cart-bandeau-color-pink  { --cart-bandeau-color: var(--color-pink); }
.cart-bandeau-color-gold  { --cart-bandeau-color: var(--color-gold); }

.cart-bandeau-section .bandeau-anime-color-bg {
	position: absolute;
	top: 0;
	left: 8vh;
	width: 15vh;
	height: 100%;
	background-color: var(--cart-bandeau-color, var(--color-text));
	overflow: hidden;
}

/* Cache le texte original avant initialisation JS (enfant direct uniquement).
   Après JS, le texte est dans .bandeau-anime-track > .bandeau-anime-text
   et n'est plus ciblé par ce sélecteur. */
.cart-bandeau-section .bandeau-anime-color-bg > .bandeau-anime-text {
	visibility: hidden;
}

/* Track : même positionnement que le footer ouvert.
   transform pré-appliqué pour éviter le CLS pendant l'init JS (100ms) :
   le JS applique ensuite translate3d(-50%, position, 0) — même composant X, pas de saut. */
.cart-bandeau-section .bandeau-anime-track {
	left: calc(50% + 0.4vh);
	right: auto;
	width: 6vh;
	transform: translateX(-50%);
}

.cart-bandeau-section .bandeau-anime-track .bandeau-anime-text {
	width: 100%;
	margin: 0;
}

.cart-bandeau-section .bandeau-anime-text {
	color: var(--color-background);
}

/* ============================================================================
   Cart Upsell — panneau "Vous pourriez aimer"
   ============================================================================ */

.cart-upsell-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: var(--spacing-xl);
}

.cart-upsell-intro {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.cart-upsell-intro-text {
	font-size: var(--text-size-m);
	color: var(--color-text-light);
	line-height: var(--line-height-medium);
}

.cart-upsell-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--spacing-xl);
}

/* Zigzag identique aux articles du panier */
@media (min-width: 1201px) {
	.cart-upsell-row > .cart-upsell-item:nth-child(odd) {
		transform: translateY(calc(-1 * var(--spacing-lg)));
	}

	.cart-upsell-row > .cart-upsell-item:nth-child(even) {
		transform: translateY(var(--spacing-lg));
	}

	/* Pas de zigzag si produit unique */
	.cart-upsell-row > .cart-upsell-item:only-child {
		transform: none;
	}
}

/* ── Carte upsell ── */
.cart-upsell-item {
	flex: 0 0 auto;
	width: 30vh;
	display: flex;
	flex-direction: column;
	border: 1vh solid var(--color-background);
	box-shadow: 0.2vh 0.2vh 1.6vh var(--shadow-card);
}

.cart-upsell-color-green { --cart-upsell-color: var(--color-green); }
.cart-upsell-color-blue  { --cart-upsell-color: var(--color-blue); }
.cart-upsell-color-pink  { --cart-upsell-color: var(--color-pink); }
.cart-upsell-color-gold  { --cart-upsell-color: var(--color-gold); }
.cart-upsell-color-text  { --cart-upsell-color: var(--color-text); }

.cart-upsell-image {
	position: relative;
	box-shadow: inset 0.2vh 0.2vh 1.6vh var(--shadow-card);
}

.cart-upsell-bandeau {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 8vh;
	transform: translateY(-50%);
	background-color: var(--cart-upsell-color);
	z-index: 1;
}

.cart-upsell-image-content {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	margin-top: -2vh;
	margin-bottom: -1vh;
}

.cart-upsell-image-content img {
	width: 75%;
	height: auto;
	display: block;
	margin: 0 auto;
	transform: translateY(-2vh);
	-webkit-user-drag: none;
	user-select: none;
}

.cart-upsell-content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	padding: 1.5vh 2vh 1.5vh 2vh;
	flex: 1;
}

.cart-upsell-title-link {
	text-decoration: none;
	color: inherit;
}



.cart-upsell-title-link:hover .cart-upsell-title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cart-upsell-author {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-size: var(--text-size-s);
	font-style: italic;
}

.cart-upsell-author-icon {
	width: 1.5vh;
	height: 1.5vh;
	fill: var(--cart-upsell-color);
	flex-shrink: 0;
}

.cart-upsell-separator {
	width: 100%;
	height: var(--border-thin);
	background-color: var(--cart-upsell-color);
	flex-shrink: 0;
}

.cart-upsell-add-section {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
	margin-top: auto;
	padding-top: var(--spacing-sm);
}

.cart-upsell-format-price {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spacing-xs);
	font-size: var(--text-size-s);
}

.cart-upsell-price-html {
	font-weight: 600;
	white-space: nowrap;
}

/* Bouton plein — même pattern que le bouton Commander */
.cart-upsell-add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	text-decoration: none;
	padding: 1.4vh var(--spacing-md);
	box-shadow: inset 0 0 0 0.4vh var(--cart-upsell-color);
	position: relative;
	overflow: hidden;
	z-index: 1;
	box-sizing: border-box;
}

.cart-upsell-add-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--cart-upsell-color);
	z-index: 0;
	transform: scaleX(1);
	transform-origin: left;
	transition: transform var(--transition-smooth) var(--ease-smooth);
}

@media (hover: hover) {
	.cart-upsell-add-btn:hover::before {
		transform: scaleX(0);
		transform-origin: right;
	}
}

.cart-upsell-add-inner {
	position: relative;
	z-index: 1;
	color: var(--color-text);
	font-family: var(--font-cta-family);
	font-size: calc(var(--font-cta-size) * 0.85);
	font-weight: 700;
	text-transform: var(--font-cta-text-transform);
}

.cart-upsell-other-format {
	font-size: calc(var(--text-size-s) * 0.9);
	font-style: italic;
	text-align: center;
}

/* ============================================================================
   Desktop — ≥ 1201px
   ============================================================================ */

@media (min-width: 1201px) {

	.cart-summary {
		width: 50vh;
	}

	/* H2 panier : taille intermédiaire entre h2 standard (6vh) et h3 (3.5vh) */
	.cart-header-tagline,
	.cart-upsell-heading,
	.cart-summary-title {
		font-size: calc((var(--font-h2-standard-size) + var(--font-h3-size)) / 2); /* 4.75vh */
	}
}

/* ============================================================================
   Mobile — ≤ 1200px
   ============================================================================ */

@media (max-width: 1200px) {

	/* En-tête */
	.cart-header-section {
		padding: var(--spacing-lg) var(--spacing-md);
	}

	.cart-header {
		width: 100%;
		gap: var(--spacing-md);
	}

	.cart-header-tagline {
		font-size: var(--text-size-2xl);
		margin-bottom: var(--spacing-sm);
	}


	/* Items cards : masquées sur mobile (remplacées par lignes dans le résumé) */
	.cart-items-section {
		display: none !important;
	}

	/* Lignes produits dans le résumé */
	.cart-summary-items {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding-bottom: var(--spacing-lg);
		border-bottom: var(--border-thin) solid var(--color-text);
	}

	/* Espace entre articles : même valeur que padding-bottom → symétrie garantie */
	.cart-summary-item + .cart-summary-item {
		margin-top: var(--spacing-lg);
	}

	/* Stepper quantité dans les lignes résumé */
	.cart-summary-item-right .cart-item-qty {
		border-color: var(--color-text);
	}

	.cart-summary-item-right .cart-qty-btn {
		padding: var(--spacing-xs) var(--spacing-sm);
		font-size: var(--text-size-l);
	}

	.cart-summary-item-right .cart-qty-value {
		font-size: var(--text-size-s);
		min-width: 22px;
	}

	/* Sous-total mis en relief après la liste des produits */
	.cart-summary-line.cart-summary-subtotal {
		font-size: var(--text-size-xl);
	}

	.cart-summary-subtotal .cart-summary-line-label,
	.cart-summary-subtotal .cart-summary-line-value {
		font-weight: 600;
	}


	/* Panneau récap final : masqué sur mobile (résumé déjà dans le panneau en-tête) */
	.cart-summary-section {
		display: none;
	}

	.cart-summary {
		height: auto;
	}

	/* Écrase le gap desktop .cart-header-section .cart-summary (spécificité 0-2-0) */
	.cart-header-section .cart-summary {
		gap: 0;
	}

	/* Chaque section reçoit son propre margin-top = espace sous le séparateur précédent */
	.cart-summary-lines {
		margin-top: var(--spacing-lg);
	}

	.cart-summary-total {
		margin-top: var(--spacing-lg);
		font-size: calc((var(--text-size-xl) + var(--text-size-2xl)) / 2); /* 27px */
		padding-top: var(--spacing-lg);
	}

	.cart-checkout-cta {
		margin-top: var(--spacing-lg);
		padding: var(--spacing-sm) var(--spacing-md);
	}

	.cart-summary-line {
		font-size: var(--text-size-l);
	}

	.cart-summary-shipping-unavailable {
		font-size: var(--text-size-m);
		font-weight: 400;
	}

	.cart-summary-shipping-countries br {
		display: none;
	}

	/* Bandeau animé : padding-top doublé par rapport au padding universel (var(--spacing-lg)).
	   Spécificité 0-2-0 pour écraser .main-section-variable dans components-responsive.css (0-1-0) */
	.main-section-variable.cart-bandeau-section {
		padding-top: calc(var(--spacing-lg) * 2);
	}

	/* Upsell */
	.cart-upsell-section {
		width: 100%;
		padding: var(--spacing-lg) var(--spacing-md);
		gap: 28px;
	}

	/* Bandeau animé : style horizontal (comme footer), overrides desktop annulés */
	.cart-bandeau-section .bandeau-anime-color-bg {
		position: relative;
		top: auto;
		left: 50%;
		width: 100vw;
		height: 80px;
		margin-left: -50vw;
		margin-right: -50vw;
		align-items: center;
	}

	/* Track en flux normal (flex child) → centré verticalement par align-items */
	.cart-bandeau-section .bandeau-anime-track {
		position: static;
		width: auto;
		transform: none;
	}

	.cart-bandeau-section .bandeau-anime-track .bandeau-anime-text {
		width: auto;
	}

	.cart-upsell-intro {
		gap: var(--spacing-xs);
	}

	.cart-upsell-heading {
		font-size: var(--text-size-2xl);
	}

	.cart-upsell-intro-text {
		font-size: var(--text-size-s);
	}

	.cart-upsell-row {
		flex-direction: column;
		align-items: center;
		gap: var(--spacing-xl);
		width: 100%;
	}

	.cart-upsell-item {
		width: 100%;
		max-width: 325px;
		border-width: 6px;
		box-shadow: 2px 2px 12px var(--shadow-card);
	}

	.cart-upsell-bandeau {
		height: 80px;
	}

	.cart-upsell-image-content {
		margin-top: -12px;
	}

	.cart-upsell-image-content img {
		transform: translateY(-12px);
	}

	.cart-upsell-content {
		padding: var(--spacing-xs) var(--spacing-sm);
		gap: 6px;
	}



	.cart-upsell-author-icon {
		width: 14px;
		height: 14px;
	}

	.cart-upsell-separator {
		height: var(--border-thin);
	}

	.cart-upsell-add-section {
		gap: 6px;
		padding-top: var(--spacing-xs);
	}

	.cart-upsell-add-btn {
		padding: var(--spacing-sm) var(--spacing-md);
		box-shadow: inset 0 0 0 2px var(--cart-upsell-color);
	}
}