/* Recommend cards in the theme's main-button colors (yellow): hover and "added" state. */
.recommend-items-wrap .recommend-item {
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

/* Half-pixel shadow thickens the hover border slightly without shifting the layout. */
.recommend-items-wrap .recommend-item:hover {
	border-color: var(--color-yellow-hover);
	box-shadow: 0 0 0 0.5px var(--color-yellow-hover);
}

/* Second border line via box-shadow, so the layout does not shift. */
.recommend-items-wrap .recommend-item.lm-is-added {
	border-color: var(--color-yellow);
	box-shadow: 0 0 0 1px var(--color-yellow);
	background-color: color-mix(in srgb, var(--color-yellow) 12%, var(--color-white));
}

/* Same width in every state, so the card text does not re-wrap and the page does not jump. */
.recommend-items-wrap .recommend-add-btn {
	justify-content: center;
	min-width: 9.75em;
	white-space: nowrap;
}

/* Dark text: yellow text is hard to read on white. */
.recommend-items-wrap .recommend-add-btn,
.recommend-items-wrap .recommend-add-btn:hover,
.recommend-items-wrap .recommend-add-btn:focus:active {
	color: var(--color-dark);
	border-color: var(--color-dark);
}

.recommend-items-wrap .recommend-add-btn:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.recommend-items-wrap .recommend-add-btn.lm-is-added {
	color: var(--color-dark);
	background-color: var(--color-yellow);
	border-color: var(--color-yellow);
}

.recommend-items-wrap .recommend-add-btn.lm-is-added:hover {
	background-color: var(--color-yellow-hover);
	border-color: var(--color-yellow-hover);
}

.recommend-items-wrap .recommend-add-btn.lm-is-added:focus:active {
	background-color: var(--color-yellow-active);
	border-color: var(--color-yellow-active);
}

.recommend-items-wrap .recommend-add-btn.lm-is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Copy of the card image that flies to the header cart icon. */
.lm-fly-img {
	position: fixed;
	z-index: 100000;
	object-fit: cover;
	border-radius: 5px;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}