/* Fiche produit synchronisée avec le clip KVS.
 *
 * Même langage visuel que shop-promo.css : une seule boutique, un seul
 * système. Les tokens --dg-* sont déclarés dans shop-promo.css sur le
 * sélecteur commun `.shop-promo, .catalog-card` ; ce fichier les consomme et
 * ne redéclare rien. Les replis en dur couvrent le cas où catalog-ui.css
 * serait chargé seul.
 *
 * Ce qui a changé par rapport à la version source : le bleu Twinks
 * est le seul accent, le bandeau devient le prolongement du player au lieu
 * d'un encart flottant, et le lien vers l'accueil boutique cesse d'être un
 * bouton concurrent du bouton d'achat.
 */
.catalog-slot[hidden],
.catalog-card[hidden],
html.am-prime .catalog-slot,
html.am-prime .catalog-card {
	display: none !important;
}

.catalog-slot,
.catalog-slot *,
.catalog-card,
.catalog-card * {
	box-sizing: border-box;
}

/* Le skin KVS est chargé dynamiquement et applique des resets à tous ses
 * descendants. Cette spécificité garde la carte lisible lorsqu'elle est
 * montée directement dans le player. */
.kt-player .catalog-card,
.kt-player .catalog-card * {
	box-sizing: border-box;
	font-family: 'Quicksand', sans-serif;
}

/* Soudé au player, qui n'a lui-même aucun arrondi ni bordure. */
.catalog-slot {
	display: block;
	width: 100%;
	margin: 0 0 20px;
}

.catalog-card {
	position: relative;
	isolation: isolate;
	display: block;
	overflow: hidden;
	color: var(--dg-ink, #fff);
	font-family: 'Quicksand', sans-serif;
	background: var(--dg-surface, #141414);
	border: 1px solid var(--dg-line, #2a2a2a);
	border-radius: 10px;
	box-shadow: none;
}

.catalog-action {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 108px minmax(0, 1fr) minmax(140px, 168px);
	column-gap: 14px;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 8px 14px 8px 8px;
	overflow: hidden;
	color: var(--dg-ink, #fff) !important;
	text-decoration: none;
	background: none;
	transition: background-color .16s ease;
}

.catalog-action:focus-visible {
	outline: 2px solid var(--dg-brand, #3cbff0);
	outline-offset: -2px;
}

.catalog-card__media {
	position: relative;
	display: block;
	width: 100%;
	height: 92px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--dg-media, #070707);
	border-right: 0;
}

/* Les packshots Shopify sont détourés sur blanc : la plaque absorbe ce fond
 * au lieu de laisser une dalle blanche irrégulière sous un player noir. */
.catalog-card__plate {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	overflow: hidden;
	border-radius: inherit;
	background: var(--dg-plate, #eef7fb);
	box-shadow: inset 0 0 0 1px var(--dg-plate-line, rgba(0, 0, 0, .08));
}

.catalog-card__image {
	display: block;
	width: 100%;
	height: 100%;
	padding: 7%;
	object-fit: contain;
	background: none;
}

/* Métrique .badge-reel du site. Aucune animation : le site n'anime aucun badge. */
.catalog-card .catalog-card__discount {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	display: inline-flex;
	height: 22px;
	min-height: 0;
	align-items: center;
	justify-content: center;
	padding: 0 7px;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 22px;
	background: var(--dg-red, #d92d20);
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	animation: none;
}

.catalog-card__body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 0;
}

.catalog-card__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin-bottom: 5px;
}

.catalog-card .catalog-card__deal {
	display: inline-flex;
	align-items: center;
	min-height: 18px;
	padding: 3px 7px;
	color: var(--dg-brand, #3cbff0);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1;
	white-space: nowrap;
	text-transform: uppercase;
	background: rgba(60, 191, 240, .12);
	border: 0;
	border-radius: 4px;
}

/* Deux lignes : le budget vertical mesuré le permet, tronquer était gratuit. */
.catalog-card .catalog-card__title {
	display: -webkit-box;
	max-width: 100%;
	overflow: hidden;
	color: var(--dg-ink, #fff);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-overflow: ellipsis;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.catalog-card__prices {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 7px;
	margin-top: 5px;
}

.catalog-card .catalog-card__price {
	color: var(--dg-ink, #fff);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.025em;
	font-variant-numeric: tabular-nums;
}

.catalog-card .catalog-card__instead {
	color: var(--dg-ink-soft, #b8b8b8);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
}

.catalog-card .catalog-card__before {
	color: var(--dg-ink-soft, #b8b8b8);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	font-variant-numeric: tabular-nums;
	text-decoration-line: line-through !important;
	text-decoration-color: var(--dg-red-text, #ff5a4a) !important;
	text-decoration-style: solid !important;
	text-decoration-thickness: 1.5px !important;
}

.catalog-card .catalog-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 36px;
	padding: 8px 12px;
	color: #07141a;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	background: var(--dg-brand, #3cbff0);
	border: 0;
	border-radius: 9px;
	box-shadow: none;
	transition: filter .16s ease;
}

.catalog-card .catalog-card__cta::after {
	margin-left: 5px;
	font-size: 14px;
	content: "→";
}

.catalog-card__actions {
	position: absolute;
	z-index: 3;
	top: 50%;
	right: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 168px;
	transform: translateY(-50%);
}

.catalog-card__actions a:focus-visible {
	outline: 2px solid var(--dg-brand, #3cbff0);
	outline-offset: 2px;
}

/* Bandeau : prolongement du player, jamais un encart flottant. */
.catalog-card--band {
	width: 100%;
	height: 124px;
	max-height: 149px;
	margin-top: 0;
	color: #fff;
	background: #141414;
	border-color: #2a2a2a;
	border-top: 0;
	border-radius: 0 0 10px 10px;
	box-shadow: none;
}

.catalog-card--band .catalog-action {
	color: #fff !important;
	background: none;
}

/* Le bandeau prolonge le player : il reste sombre meme en theme clair, sinon
   le logo a texte blanc devient invisible. */
.catalog-card--band .catalog-card__title,
.catalog-card--band .catalog-card__price {
	color: #fff;
}

.catalog-card--band .catalog-card__instead,
.catalog-card--band .catalog-card__before {
	color: #aebdca;
}

/* Overlay uniquement desktop, en bas à gauche et au-dessus des contrôles KVS.
 * Géométrie imposée par le README : ne pas déplacer. */
/* ==========================================================================
   Fiche overlay dans le player, pendant le clip produit.
   ==========================================================================
   Carte CLAIRE posee sur une image video : le blanc et l'ombre portee la
   detachent du fond quel qu'il soit, alors qu'une carte sombre se noyait dans
   les plans sombres. Ordre de lecture impose : source (logo) -> nature du
   produit -> nom -> prix ancre -> action.
   ========================================================================== */

.catalog-card--overlay {
	position: absolute;
	left: 12px;
	bottom: 62px;
	width: min(420px, calc(100% - 24px));
	height: 120px;
	max-height: calc(100% - 76px);
	color: #07141a;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .10);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .42);
	pointer-events: auto;
	transform: translateZ(0);
}

/* KVS crée ses couches VAST entre 150 et 199 et son branding à 99999. */
.kt-player > .catalog-card--overlay {
	z-index: 100000 !important;
}

/* Photo a gauche, texte au centre, bouton cale a droite.
   Le bouton est un enfant du CORPS (buildCard l'y insere en mode overlay) :
   on lui reserve donc une gouttiere a droite plutot qu'une colonne de grille,
   qui resterait vide. */
.catalog-card--overlay .catalog-action {
	grid-template-columns: 118px minmax(0, 1fr);
	column-gap: 12px;
	align-items: center;
	padding: 0 128px 0 0;
	color: #07141a !important;
	background: #fff;
}

/* La photo touche les trois bords de la carte : aucune marge, aucune bordure,
   aucun arrondi interne. A surface egale le produit parait nettement plus
   grand qu'avec une vignette flottante. */
.catalog-card--overlay .catalog-card__media {
	height: 100%;
	border-radius: 0;
	background: #fff;
}

.catalog-card--overlay .catalog-card__plate {
	background: #fff;
	box-shadow: none;
}

.catalog-card--overlay .catalog-card__image {
	padding: 4%;
}

.catalog-card--overlay .catalog-card__meta {
	gap: 8px;
	margin-bottom: 4px;
}

.catalog-card--overlay .catalog-card__brand-logo {
	max-width: 74px;
	height: 12px;
}

.catalog-card--overlay .catalog-card__deal {
	color: #a8201a;
	background: rgba(217, 45, 32, .10);
}

.catalog-card--overlay .catalog-card__title {
	color: #07141a;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	-webkit-line-clamp: 2;
}

.catalog-card--overlay .catalog-card__prices {
	margin-top: 4px;
}

.catalog-card--overlay .catalog-card__price {
	color: #07141a;
	font-size: 21px;
}

.catalog-card--overlay .catalog-card__instead {
	color: #71808d;
}

.catalog-card--overlay .catalog-card__before {
	color: #71808d;
	font-size: 12px;
	text-decoration-color: var(--dg-red, #d92d20) !important;
}

/*
 * LE point qui faisait recouvrir le titre : .catalog-card__body est
 * position:relative dans la regle de base, il devenait donc le bloc conteneur
 * du bouton. « right: 10px » valait alors 10 px depuis le bord droit du CORPS,
 * c'est-a-dire 138 px a l'interieur de la carte — en plein sur le titre.
 * En rendant le corps statique, le bouton se cale sur .catalog-action, dont la
 * boite de padding va jusqu'au bord de la carte.
 */
.catalog-card--overlay .catalog-card__body {
	position: static;
}

/* Vert d'achat, tout a droite du bloc. */
.catalog-card--overlay .catalog-card__cta {
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 10px;
	width: 108px;
	min-height: 42px;
	padding: 8px;
	color: var(--dg-green-ink, #07141a);
	font-size: 11.5px;
	line-height: 1.15;
	background: var(--dg-green-grad, linear-gradient(135deg, #50cdf7, #168dbb));
	transform: translateY(-50%);
}

.catalog-card--overlay .catalog-card__discount {
	top: 6px;
	left: 6px;
	right: auto;
	height: 30px;
	padding: 0 10px;
	border-radius: 6px;
	font-size: 17px;
	line-height: 30px;
}

.catalog-card--overlay .catalog-card__cta::after {
	display: none;
}

@media (min-width: 1024px) and (hover: hover) {
	.catalog-action:hover {
		background: rgba(255, 255, 255, .02);
	}

	.catalog-action:hover .catalog-card__title {
		color: var(--dg-brand, #3cbff0);
	}

	.catalog-card .catalog-card__cta:hover {
		filter: brightness(1.06);
	}
}

html.light .catalog-action:hover {
	background: rgba(0, 0, 0, .02);
}

/* ==========================================================================
   Mobile : la fiche n'est plus dans le player, elle se pose SOUS lui.
   ==========================================================================
   Fond noir volontaire : sur mobile ce bloc arrive au fil de la page, un
   encart clair y serait criard. Il doit aussi rester court, sinon il repousse
   tout le contenu qui suit — d'ou une seule rangee : photo, nom, prix, action.
   ========================================================================== */

@media (max-width: 767px) {
	.catalog-card--overlay {
		display: none !important;
	}

	/* 96 px au lieu de 146 : le bloc cesse de decaler la page. */
	.catalog-card--band {
		width: 100%;
		height: 96px;
		max-height: 110px;
		color: #fff;
		background: #0d0d0d;
		border-color: #262626;
		border-radius: 0 0 10px 10px;
	}

	.catalog-card--band .catalog-action {
		grid-template-columns: 80px minmax(0, 1fr);
		column-gap: 10px;
		align-items: center;
		padding: 8px 112px 8px 9px;
		color: #fff !important;
	}

	.catalog-card--band .catalog-card__media {
		height: 80px;
		border-radius: 8px;
	}

	.catalog-card__body {
		justify-content: center;
	}

	/* La pastille de rubrique et le logo sortent : a cette hauteur, seuls le
	   nom, le prix et l'action meritent la place. */
	.catalog-card--band .catalog-card__meta {
		display: none;
	}

	.catalog-card--band .catalog-card__title {
		color: #fff;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.3;
		-webkit-line-clamp: 2;
	}

	.catalog-card__prices {
		gap: 2px 6px;
		margin-top: 3px;
	}

	.catalog-card--band .catalog-card__price {
		color: #fff;
		font-size: 17px;
	}

	.catalog-card--band .catalog-card__instead {
		display: none;
	}

	.catalog-card--band .catalog-card__before {
		color: #aebdca;
		font-size: 12px;
	}

	.catalog-card .catalog-card__discount {
		top: 4px;
		right: 4px;
		height: 19px;
		padding: 0 6px;
		font-size: 11px;
		line-height: 19px;
	}

	/* .catalog-card__actions est un FRERE du lien, pose par-dessus lui pour
	   eviter un <a> dans un <a> : il reste donc en absolu, cale a droite. */
	.catalog-card--band .catalog-card__actions {
		top: 50%;
		right: 9px;
		bottom: auto;
		left: auto;
		width: auto;
		flex-direction: row;
		align-items: center;
		gap: 0;
		transform: translateY(-50%);
	}

	.catalog-card--band .catalog-card__cta {
		width: auto;
		min-width: 0;
		min-height: 38px;
		padding: 6px 14px;
		border-radius: 999px;
		font-size: 11px;
		white-space: nowrap;
	}

	.catalog-card--band .catalog-card__cta::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.catalog-action,
	.catalog-card .catalog-card__cta {
		transition: none;
	}

	.catalog-card .catalog-card__discount {
		animation: none;
	}
}