/* ================================================================
   BOUTIQUE — Contenance popover
   Inserted into card-info flex column, above foot.
   ================================================================ */

.pa-boutique__popover {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 0;
	margin-bottom: 8px;
	border-top: 0.5px solid rgba(var(--color-accent-rgb), 0.12);
	animation: pa-popover-in 0.18s ease-out;
}

@keyframes pa-popover-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* -- Pills -- */

.pa-boutique__popover-pill {
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0.5px;
	padding: 6px 10px;
	border: 0.5px solid rgba(var(--color-accent-rgb), 0.3);
	background: transparent;
	color: var(--color-muted);
	cursor: pointer;
	transition:
		border-color 0.2s ease,
		color 0.2s ease,
		opacity 0.2s ease,
		background-color 0.2s ease;
	white-space: nowrap;
}

.pa-boutique__popover-pill:hover:not([disabled]) {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.pa-boutique__popover-pill:focus-visible {
	outline: 1px solid var(--color-accent);
	outline-offset: 2px;
}


/* -- Loading state -- */

.pa-boutique__popover-pill.is-loading {
	opacity: 0.6;
	cursor: wait;
	animation: pa-pill-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes pa-pill-pulse {
	from { opacity: 0.4; }
	to   { opacity: 0.7; }
}


/* -- Error state (brief flash) -- */

.pa-boutique__popover-pill.is-error {
	border-color: var(--color-red);
	color: var(--color-red);
	animation: pa-pill-shake 0.3s ease;
}

@keyframes pa-pill-shake {
	0%, 100% { transform: translateX(0); }
	25%      { transform: translateX(-3px); }
	75%      { transform: translateX(3px); }
}


/* -- Disabled / out-of-stock -- */

.pa-boutique__popover-pill[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
	border-color: rgba(var(--color-accent-rgb), 0.1);
}


/* -- Responsive -- */

@media (max-width: 600px) {
	.pa-boutique__popover {
		flex-direction: column;
	}

	.pa-boutique__popover-pill {
		text-align: center;
	}
}