/**
 * Villa Victoria — Compteur d'articles sur l'icône panier du header
 *
 * Le gabarit du thème (elements/templates/pxl_icon_cart/layout-1.php) pose la
 * classe « pxl-counter » sur la boîte de l'icône mais n'y écrit aucun nombre :
 * rien n'indiquait, avant d'ouvrir le panneau, que le panier contenait quelque
 * chose. Le badge est rendu par vv-panier/compteur-icone.php.
 *
 * Le header sticky (pxl-template 6082, seul à porter l'icône) est peint en navy
 * par le CSS additionnel — et non en blanc comme le dit son réglage Elementor —
 * avec une icône blanche : le badge est donc un disque doré à chiffre navy, le
 * doré étant la seule couleur de la charte qui se détache à la fois du fond et
 * du dessin du panier.
 */

.vv-cart-button {
	/* ancre du badge ; le thème ne donne à « .pxl-cart » que « cursor: pointer » */
	position: relative;
}

.vv-cart-button .vv-cart-count {
	position: absolute;
	top: -5px;
	right: -9px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* pilule : le disque s'étire au-delà de 9 articles sans déformer le chiffre */
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 999px;
	/* disque plein : il masque le trait du sac qu'il recouvre, aucun anneau
	   de séparation n'est nécessaire */
	background-color: #C39A6B;
	font-family: "Jost", sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	/* le clic doit rester celui du bouton, même en visant le badge */
	pointer-events: none;
	transition: background-color 0.25s ease;
}

/* Le chiffre est dans un span : le CSS additionnel peint en blanc tout span du
   header (« .elementor-6082 span »), et cette règle vise l'enfant, pas le badge.
   Il faut donc le nommer ici — deux classes suffisent à passer devant, sans
   « !important ». */
.vv-cart-button .vv-cart-count,
.vv-cart-button .vv-cart-count span {
	color: #0F1F34;
}

/* panier vide : pas de « 0 » qui traîne */
.vv-cart-button .vv-cart-count.is-empty {
	display: none;
}

/* survol du bouton : le doré s'éclaircit (#E8C89F de la charte) */
.vv-cart-button:hover .vv-cart-count {
	background-color: #E8C89F;
}

/* =====================================================================
   Barre de navigation mobile (vv-mobile-bottom-nav) — entrée « Panier »
   =====================================================================
   Même badge, à l'échelle de la barre : l'icône n'y fait que 18 px, un
   disque de 19 px l'écraserait. Le fond y est blanc et non navy, mais le
   doré à chiffre navy tient sur les deux. */

.vv-mobile-nav__link--panier .vv-mobile-nav__icon {
	/* ancre du badge ; la boîte de l'icône est en flex, sans position */
	position: relative;
	overflow: visible;
}

.vv-mobile-nav__link--panier .vv-cart-count {
	position: absolute;
	top: -6px;
	right: -9px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background-color: #C39A6B;
	font-family: "Jost", sans-serif;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	pointer-events: none;
}

.vv-mobile-nav__link--panier .vv-cart-count,
.vv-mobile-nav__link--panier .vv-cart-count span {
	color: #0F1F34;
}

.vv-mobile-nav__link--panier .vv-cart-count.is-empty {
	display: none;
}