/**
 * Product Recommendations — Bundle & Tea Pairing box styles.
 *
 * Colors match the mockup's plum + tea palette.
 * Loaded only on single product pages.
 *
 * @package MpwnBlocks
 */

/* ── Shared box ── */
.mpwn-rec {
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 14px;
}

.mpwn-rec__head {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.mpwn-rec__text {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 12px;
}

.mpwn-rec__btn {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 8px 16px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: opacity 0.15s ease, transform 0.1s ease;
}

.mpwn-rec__btn:hover {
	opacity: 0.9;
}

.mpwn-rec__btn:active {
	transform: scale(0.97);
}

.mpwn-rec__btn.mpwn-rec__btn--loading {
	opacity: 0.6;
	pointer-events: none;
}

.mpwn-rec__btn.mpwn-rec__btn--added {
	pointer-events: none;
}

/* ── Bundle variant ── */
.mpwn-rec--bundle {
	background: #f3eef8;
	border: 1.5px solid #6b3fa0;
}

.mpwn-rec--bundle .mpwn-rec__head {
	color: #6b3fa0;
}

.mpwn-rec--bundle .mpwn-rec__text {
	color: #2c2c2c;
}

.mpwn-rec__btn--bundle {
	background: #6b3fa0;
	color: #fff;
}

/* ── Tea variant ── */
.mpwn-rec--tea {
	background: #f0f5eb;
	border: 1.5px solid #5a7a3a;
}

.mpwn-rec--tea .mpwn-rec__head {
	color: #5a7a3a;
}

.mpwn-rec--tea .mpwn-rec__text {
	color: #2c2c2c;
}

.mpwn-rec__btn--tea {
	background: #5a7a3a;
	color: #fff;
}