/**
 * Widgets flottants : panier rapide + retour en haut.
 * Conteneur fixe en bas-droite ; les boutons s'empilent verticalement.
 */
.cbdco-fw {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9990;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	pointer-events: none;
}
.cbdco-fw > * { pointer-events: auto; }

/* ------ Panier flottant ------------------------------------- */
.cbdco-fc {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--btn-bg, var(--gold-gradient));
	color: var(--btn-fg);
	border: 1px solid rgba(245,240,232,0.064);
	/* Ombre calée sur un fond clair : du noir à 45% (hérité du thème sombre)
	   faisait une tache trop marquée sur le crème. Teinte verte désaturée +
	   opacité basse = le bouton décolle sans salir le fond. */
	box-shadow: 0 6px 18px rgba(20, 40, 24, 0.16), 0 2px 5px rgba(20, 40, 24, 0.10);
	cursor: pointer;
	padding: 0;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease;
}
.cbdco-fc:hover,
.cbdco-fc:focus-visible {
	color: var(--btn-fg);
	transform: translateY(-2px) scale(1.04);
	/* Lueur externe dorée à la manière du bouton ATC : double couche
	   (halo proche + diffuse) pour un effet "pulsant" au survol. */
	box-shadow:
		0 0 0 3px rgba(45, 74, 45, 0.12),
		0 10px 24px rgba(45, 74, 45, 0.22),
		0 3px 8px rgba(20, 40, 24, 0.14);
	outline: none;
}
.cbdco-fc:hover svg,
.cbdco-fc:focus-visible svg { color: var(--btn-fg); stroke: var(--btn-fg); }
.cbdco-fc__icon { display: inline-flex; }
.cbdco-fc__icon svg { display: block; }
.cbdco-fc__count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 11px;
	background: #f5f0e8;
	color: var(--gold-soft, var(--green));
	border: 1.5px solid var(--gold, #7ab87a);
	font-family: var(--font-mono, "JetBrains Mono", monospace);
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1;
}
/* Compteur masqué quand panier vide (data-count="0"). */
.cbdco-fc__count[data-count="0"] { display: none; }

/* ------ Retour en haut -------------------------------------- */
.cbdco-btt {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px;
	min-height: 44px;
	max-width: 44px;
	max-height: 44px;
	aspect-ratio: 1 / 1;
	flex: 0 0 44px;
	padding: 0;
	border-radius: 50%;
	background: var(--bg-2, #ffffff);
	color: var(--gold, var(--green));
	border: 1px solid var(--line, rgba(201,230,201, 0.12));
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(20, 40, 24, 0.13);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.cbdco-btt[hidden] { display: none; }
.cbdco-btt.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.cbdco-btt:hover,
.cbdco-btt:focus-visible {
	background: var(--btn-bg, var(--gold-gradient));
	color: var(--btn-fg, #0f0f0f);
	border-color: transparent;
}
.cbdco-btt__icon {
	display: inline-block;
	width: 22px; height: 22px;
	background: var(--gold-gradient);
	transition: background .2s ease;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>") center / contain no-repeat;
	        mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 15 12 9 18 15'/></svg>") center / contain no-repeat;
}
.cbdco-btt:hover .cbdco-btt__icon,
.cbdco-btt:focus-visible .cbdco-btt__icon { background: #f5f0e8; }

/* Mobile : on rapproche du bord et on réduit légèrement. */
@media (max-width: 640px) {
	.cbdco-fw { right: 14px; bottom: 14px; gap: 10px; }
	.cbdco-fc { width: 50px; height: 50px; }
	.cbdco-btt {
		width: 40px !important;
		height: 40px !important;
		min-width: 40px;
		min-height: 40px;
		max-width: 40px;
		max-height: 40px;
		flex: 0 0 40px;
	}
}

/* ============================================================
 * Widget WhatsApp flottant (bas-gauche).
 * Desktop : bulle horizontale animée avec logo + texte.
 * Mobile  : bouton rond compact.
 * ============================================================ */
.cbdco-wa {
	--wa-green:      #25d366;
	--wa-green-dark: #128c7e;
	--wa-shadow:     0 10px 30px rgba(18, 140, 126, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25);
	--wa-bottom:     20px;

	position: fixed;
	left: 14px;
	bottom: var(--wa-bottom);
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	transform-origin: bottom left;
	opacity: 0;
	transform: translateY(16px) scale(0.92);
	transition: opacity .35s ease, transform .35s cubic-bezier(.2, 1.4, .35, 1), bottom .3s ease;
	pointer-events: none;
}
/* Si la notif sociale est visible, on remonte la bulle WhatsApp pour
   éviter le chevauchement (la notif fait ~70-80px de haut). */
body:has(.cbdco-sp.is-visible) .cbdco-wa {
	/* La popin occupe 14 → 74 px du bas ; on cale la bulle juste au-dessus avec
	   un écart d une quinzaine de pixels (110 px faisait un trou, 98 px collait). */
	--wa-bottom: 88px;
}
.cbdco-wa[hidden] { display: none; }
.cbdco-wa.is-revealed {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	animation: cbdco-wa-pop .55s cubic-bezier(.2, 1.4, .35, 1);
}
@keyframes cbdco-wa-pop {
	0%   { opacity: 0; transform: translateY(16px) scale(.85); }
	60%  { opacity: 1; transform: translateY(-4px) scale(1.03); }
	100% { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Bulle cliquable (lien wa.me) */
.cbdco-wa__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 10px 20px 10px 12px;
	background: linear-gradient(135deg, var(--wa-green) 0%, var(--wa-green-dark) 100%);
	color: #fff;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: var(--wa-shadow);
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
	overflow: visible;
}
.cbdco-wa__link:hover,
.cbdco-wa__link:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(37, 211, 102, 0.55), 0 6px 14px rgba(0, 0, 0, 0.3);
	outline: none;
	filter: brightness(1.05);
}

/* Pulse animé autour du logo */
.cbdco-wa__pulse {
	position: absolute;
	left: 6px;
	top: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border-radius: 50%;
	background: var(--wa-green);
	opacity: .55;
	z-index: 0;
	animation: cbdco-wa-pulse 1.8s ease-out infinite;
	pointer-events: none;
}
@keyframes cbdco-wa-pulse {
	0%   { transform: scale(0.85); opacity: .55; }
	70%  { transform: scale(1.7);  opacity: 0; }
	100% { transform: scale(1.7);  opacity: 0; }
}

.cbdco-wa__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--wa-green);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
	flex: 0 0 44px;
}
.cbdco-wa__icon svg { display: block; }

.cbdco-wa__text {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	line-height: 1.15;
	white-space: nowrap;
}
.cbdco-wa__label {
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.01em;
}
.cbdco-wa__subtext {
	font-size: 12.5px;
	opacity: 0.92;
	margin-top: 2px;
}

/* Bouton fermer × — en haut à droite de la bulle.
   On force les valeurs en !important car un verrou global dans main.css
   (button[class*="__close"]…) impose un fond transparent qui rendrait la
   croix invisible sur le dégradé vert WhatsApp. */
.cbdco-wa .cbdco-wa__close {
	position: absolute !important;
	top: -8px !important;
	right: -8px !important;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	min-height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	border-radius: 50% !important;
	background: #ffffff !important;
	color: #fff !important;
	border: 2px solid #fff !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	padding: 0 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	transition: transform .18s ease, background .18s ease !important;
	z-index: 2;
}
.cbdco-wa .cbdco-wa__close:hover,
.cbdco-wa .cbdco-wa__close:focus-visible {
	transform: scale(1.12) rotate(90deg) !important;
	background: #d33 !important;
	border-color: #fff !important;
	color: #fff !important;
	outline: none;
}
.cbdco-wa .cbdco-wa__close svg { display: block; color: #fff !important; stroke: #fff !important; }

/* Mobile : bouton rond compact, le texte se cache. */
@media (max-width: 640px) {
	.cbdco-wa { left: 14px; bottom: 14px; }
	.cbdco-wa__link {
		padding: 0;
		width: 54px;
		height: 54px;
		border-radius: 50%;
		justify-content: center;
	}
	.cbdco-wa__text { display: none; }
	.cbdco-wa__icon {
		width: 54px;
		height: 54px;
		flex: 0 0 54px;
		background: transparent;
		color: #fff;
		box-shadow: none;
	}
	.cbdco-wa__icon svg { width: 30px; height: 30px; }
	.cbdco-wa__pulse {
		left: 0;
		top: 0;
		width: 54px;
		height: 54px;
		margin-top: 0;
	}
	.cbdco-wa .cbdco-wa__close {
		top: -6px !important;
		right: -6px !important;
		width: 22px !important;
		height: 22px !important;
		min-width: 22px !important;
		min-height: 22px !important;
		max-width: 22px !important;
		max-height: 22px !important;
	}
}

/* Respect prefers-reduced-motion : on coupe pulse + bounce d'entrée. */
@media (prefers-reduced-motion: reduce) {
	.cbdco-wa.is-revealed { animation: none; }
	.cbdco-wa__pulse { animation: none; opacity: 0; }
	.cbdco-wa { transition: opacity .2s ease; transform: none; }
}

/* ============================================================
   Widgets flottants — sortie du tout-rond
   ------------------------------------------------------------
   Pastilles parfaitement circulaires remplacées par le rayon des
   cartes produit (12px), pour que les éléments flottants
   appartiennent au même système visuel que le catalogue.
   Les rayons intérieurs (icône dans la bulle WhatsApp) sont plus
   petits : un rayon interne égal au rayon externe donne un liseré
   d'épaisseur inégale dans les angles.
   ============================================================ */
.cbdco-fc,
.cbdco-btt {
	border-radius: 12px;
}
.cbdco-wa__link {
	border-radius: 12px;
}
.cbdco-wa__icon {
	border-radius: 8px;
}
.cbdco-wa__pulse {
	border-radius: 12px;
}
.cbdco-wa .cbdco-wa__close {
	border-radius: 6px !important;
}
@media (max-width: 640px) {
	/* Version compacte mobile : la bulle devient un carré d'icône. */
	.cbdco-wa__link { border-radius: 12px; }
	.cbdco-wa__icon { border-radius: 12px; }
}

/* ------------------------------------------------------------
   Bulle WhatsApp — vert WhatsApp, traitement retravaillé
   On garde bien le vert de la marque (sinon la bulle n'est plus
   identifiable au premier coup d'œil), mais on quitte le dégradé
   d'origine #25d366 → #128c7e à 135° : trois arrêts sur un axe
   plus vertical, vert vif en haut qui plonge vers le teal foncé,
   plus un léger liseré clair interne. Résultat : même famille de
   couleur, rendu nettement plus profond.
   ------------------------------------------------------------ */
.cbdco-wa__link {
	background: linear-gradient(165deg, #37e07d 0%, #1fb862 45%, #0c7f6c 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		0 8px 22px rgba(18, 140, 126, 0.26),
		0 2px 6px rgba(20, 40, 24, 0.12);
}
.cbdco-wa__link:hover,
.cbdco-wa__link:focus-visible {
	background: linear-gradient(165deg, #45ec8a 0%, #25c96c 45%, #0f8f79 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		0 12px 28px rgba(18, 140, 126, 0.34),
		0 3px 8px rgba(20, 40, 24, 0.16);
	filter: none;
}
.cbdco-wa__pulse {
	background: #25d366;
	opacity: .5;
}

/* Croix de fermeture WhatsApp au survol : blanche.
   Une règle globale de main.css (`button[class*="__close"]:hover svg`, qui
   pèse plus lourd que `.cbdco-wa .cbdco-wa__close svg`) repassait le tracé en
   `var(--gold)` — vert foncé sur le fond rouge du survol, donc illisible.
   On ajoute `:hover` au sélecteur pour reprendre la main. */
.cbdco-wa .cbdco-wa__close:hover svg,
.cbdco-wa .cbdco-wa__close:focus-visible svg {
	color: #fff !important;
	stroke: #fff !important;
}

/* Icône en trait accolée au libellé (remplace l'emoji 👋).
   `currentColor` + vertical-align pour qu'elle suive la couleur et la ligne
   de base du texte, comme les icônes du header. */
.cbdco-wa__label-icon {
	display: inline-block;
	margin-left: 6px;
	vertical-align: -2px;
	opacity: 0.9;
}

/* Panier latéral ouvert : on efface les widgets flottants.
   Le tiroir pose un voile plein écran, mais la bulle WhatsApp (z-index 9999)
   et les boutons flottants passaient au-dessus et restaient nets par-dessus
   l'assombrissement. On les fait disparaître avec le même timing que le voile,
   et `pointer-events: none` évite qu'ils restent cliquables pendant le fondu. */
body:has(.cart-drawer.is-open) .cbdco-wa,
body:has(.cart-drawer.is-open) .cbdco-fw {
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity .25s ease;
}

/* Tunnel de commande et panier : aucun widget flottant.
   Sur une page de paiement, la bulle WhatsApp et le panier rapide sont des
   sorties de parcours — et le bouton panier flottant n'a aucun sens là où on
   valide justement le panier. */
body.woocommerce-checkout .cbdco-wa,
body.woocommerce-checkout .cbdco-fw,
body.woocommerce-cart .cbdco-wa,
body.woocommerce-cart .cbdco-fw {
	display: none !important;
}