#wapuugotchi-submenu__shop {

	.wapuugotchi_shop__item {
		background: #fafafa;
		border-radius: 8px;
		border: 1px solid #e2e2e2;
		position: relative;
		cursor: pointer;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
		opacity: 0;
		transition:
			opacity 0.25s ease,
			transform 0.1s,
			box-shadow 0.1s;

		&.is-loaded {
			opacity: 1;
		}

		&:hover {
			transform: translateY(-2px);
			box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
		}

		&.selected {
			border-color: #00a32a;
			box-shadow: 0 0 0 1px #00a32a;
		}

		img {
			width: 100%;
			display: block;
		}

		.wapuugotchi_shop__colored_hint {
			position: absolute;
			top: 6px;
			right: 6px;
			width: 14px;
			height: 14px;
			color: #50575e;

			svg {
				width: 100%;
				height: 100%;
				display: block;
			}

			&::after {
				content: "Farbe frei wählbar";
				position: absolute;
				bottom: calc(100% + 6px);
				right: 0;
				background: #2c3338;
				color: #fff;
				font-size: 11px;
				white-space: nowrap;
				padding: 4px 8px;
				border-radius: 4px;
				pointer-events: none;
				opacity: 0;
				transition: opacity 0.1s;
			}

			&:hover::after {
				opacity: 1;
			}
		}

		.wapuugotchi_shop__owned_badge {
			position: absolute;
			top: 6px;
			left: 6px;
			background: #00a32a;
			color: #fff;
			font-size: 11px;
			font-weight: 600;
			padding: 3px 8px;
			border-radius: 3px;
		}

		.wapuugotchi_shop__pill {
			position: absolute;
			bottom: 6px;
			right: 6px;
			border-radius: 999px;
			padding: 4px 10px;
			font-size: 12px;
			font-weight: 400;
			white-space: nowrap;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
			display: inline-flex;
			align-items: center;
			gap: 4px;

			// base (fallback)
			background: #fff;
			border: 1px solid #e2e2e2;
			color: #2c3338;

			&--success {
				background: #f4fff7;
				border-color: #00a32a;
				color: #145214;
			}

			&--muted {
				color: #50575e;
			}

			img {
				width: 14px;
				height: 14px;
				display: inline;
			}
		}

		.wapuugotchi_shop__pill--muted .wapuugotchi_shop__pearl-icon {
			filter: invert(58%) sepia(6%) saturate(8%) hue-rotate(331deg)
				brightness(91%) contrast(92%);
		}
	}
}