/*
 * Builder: the ingredient list shows placeholder rows while the components load from the shop, so the
 * step never looks empty or stuck. bouquet-editor.js replaces them with the real rows.
 */
.picker-list[aria-busy='true'] {
	position: relative;
}
.picker-skeleton {
	display: grid;
	grid-template-columns: 3.5rem minmax(0, 1fr) auto;
	gap: 0.85rem;
	align-items: center;
	min-block-size: 4.9rem;
	padding-inline: 0.5rem 0.75rem;
	border: 1px solid var(--b-edge, var(--line, #e3dcd0));
	border-radius: var(--b-r-m, 12px);
	background: var(--paper, #fff);
}
.picker-skeleton > span {
	display: block;
	border-radius: 0.5rem;
	background: linear-gradient(
		90deg,
		color-mix(in oklch, var(--b-sand, #e8dcc8) 55%, var(--paper, #fff)) 25%,
		color-mix(in oklch, var(--b-sand, #e8dcc8) 30%, var(--paper, #fff)) 50%,
		color-mix(in oklch, var(--b-sand, #e8dcc8) 55%, var(--paper, #fff)) 75%
	);
	background-size: 300% 100%;
	animation: zf-skeleton-shimmer 1.6s ease-in-out infinite;
}
.picker-skeleton__image {
	inline-size: 3.5rem;
	block-size: 4.25rem;
}
.picker-skeleton__text {
	display: grid;
	gap: 0.5rem;
}
.picker-skeleton__text > span:first-child {
	block-size: 1rem;
	inline-size: 60%;
}
.picker-skeleton__text > span:last-child {
	block-size: 0.8rem;
	inline-size: 35%;
}
.picker-skeleton__action {
	inline-size: 5.5rem;
	block-size: 2.4rem;
	border-radius: 999px;
}
@keyframes zf-skeleton-shimmer {
	from {
		background-position: 100% 0;
	}
	to {
		background-position: 0 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.picker-skeleton > span {
		animation: none;
	}
}