/**
 * Quantity-discount promo boxes.
 *
 * Ported from the standalone plugin's `qtd-front.css`. The look is
 * deliberately preserved rather than reinterpreted: these boxes were tuned to
 * match the hardcoded WPBakery promo boxes they replaced, so restyling them
 * would silently change a live product page.
 *
 * Structure comes from Woodmart's own `info-box-carousel` classes; only the
 * card treatment, the image sizing and the call-to-action button are ours.
 */

.rc-tier-boxes {
	margin: 18px 0;
}

.rc-tier-link,
.qtd-box-link {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: box-shadow .2s ease;
}

.rc-tier-link:hover,
.rc-tier-link:focus,
.qtd-box-link:hover,
.qtd-box-link:focus {
	box-shadow: 0 0 0 2px var(--wd-primary-color, #88ad99);
	color: inherit;
	text-decoration: none;
}

.rc-tier-link:focus-visible {
	outline: 2px solid var(--wd-primary-color, #88ad99);
	outline-offset: 2px;
}

/* Matches the background and padding the original promo boxes had. */
.rc-tier-link .wd-info-box {
	padding: 5px 15px;
	background-color: #eaeaea;
	border-radius: 4px;
}

.rc-tier-link .info-box-content {
	padding-top: 20px;
	padding-bottom: 20px;
}

.rc-tier-link .info-box-icon img {
	width: 90px;
	height: 90px;
	object-fit: cover;
	border-radius: 16px;
}

/* The call to action reads as a button, matching add-to-cart. */
.rc-tier-cta,
.qtd-cta-btn {
	display: inline-block;
	margin-top: 8px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	background-color: var(--wd-primary-color, #88ad99);
	border-radius: 3px;
}

.rc-tier-link:hover .rc-tier-cta,
.rc-tier-link:focus .rc-tier-cta {
	color: #fff;
}

/* The percentage is a number: keep it left-to-right inside Arabic text. */
.rc-tier-boxes .info-box-subtitle {
	unicode-bidi: isolate;
}

@media ( prefers-reduced-motion: reduce ) {
	.rc-tier-link {
		transition: none;
	}
}