/* WC Tiered Quantity Discounts – animated product-page ladder + live preview */

.wc-tqd-experience {
	--wc-tqd-navy: #1F2A44;
	--wc-tqd-brass: #C6A15B;
	--wc-tqd-brass-ink: #9c7e43;
	--wc-tqd-cream: #F5F1E8;
	--wc-tqd-cream-soft: #faf7f0;
	--wc-tqd-rule: #e2d8c3;
	--wc-tqd-muted: #6b7280;
	--wc-tqd-ink: #18221d;
	position: relative;
	display: block;
	clear: both;
	width: 100%;
	margin: 14px 0;
	padding: 14px 16px 12px;
	border: 1px solid var(--wc-tqd-rule);
	border-radius: 14px;
	background: linear-gradient(145deg, #fff 0%, var(--wc-tqd-cream-soft) 100%);
	overflow: hidden;
	box-shadow: 0 14px 30px rgba(31, 42, 68, 0.08);
}

.wc-tqd-experience__glow {
	position: absolute;
	top: -48px;
	right: -34px;
	width: 126px;
	height: 126px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(198, 161, 91, 0.25) 0%, rgba(198, 161, 91, 0) 70%);
	pointer-events: none;
}

.wc-tqd-head {
	position: relative;
	z-index: 1;
	margin-bottom: 10px;
}

.wc-tqd-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 6px !important;
	font-size: 15px;
	font-weight: 700;
	color: var(--wc-tqd-navy);
	letter-spacing: 0.02em;
}

.wc-tqd-kicker span {
	border-bottom: 2px dotted var(--wc-tqd-brass);
	padding-bottom: 2px;
}

.wc-tqd-icon {
	flex: 0 0 auto;
}

.wc-tqd-subhead {
	margin: 0 !important;
	font-size: 12px;
	line-height: 1.4;
	color: #56645b;
}

.wc-tqd-stage {
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.98fr);
	gap: 16px;
	align-items: stretch;
}

.wc-tqd-experience--extended .wc-tqd-stage {
	grid-template-columns: 1fr;
}

.wc-tqd-ladder {
	list-style: none;
	margin: 0 !important;
	padding: 4px 0 0 !important;
}

.wc-tqd-tier {
	position: relative;
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px 12px;
	margin: 0;
	border: 1px solid rgba(198, 161, 91, 0.18);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.78);
	transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.wc-tqd-tier + .wc-tqd-tier {
	margin-top: 6px;
}

.wc-tqd-tier:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(31, 42, 68, 0.08);
}

.wc-tqd-tier__connector {
	position: absolute;
	left: 31px;
	top: calc(100% + 2px);
	width: 2px;
	height: 10px;
	background: linear-gradient(180deg, rgba(198, 161, 91, 0.55) 0%, rgba(198, 161, 91, 0.08) 100%);
	pointer-events: none;
}

.wc-tqd-tier:last-child .wc-tqd-tier__connector {
	display: none;
}

.wc-tqd-tier__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 2px solid var(--wc-tqd-brass);
	background: var(--wc-tqd-cream);
	color: var(--wc-tqd-navy);
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.02em;
	box-shadow: 0 4px 14px rgba(31, 42, 68, 0.06);
	overflow: hidden;
}

.wc-tqd-tier__pulse {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
}

.wc-tqd-tier__copy {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.wc-tqd-tier__discount {
	font-size: 15px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--wc-tqd-ink);
}

.wc-tqd-tier__price {
	font-size: 12px;
	line-height: 1.4;
	color: #56645b;
}

.wc-tqd-tier__state {
	font-size: 11px;
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wc-tqd-muted);
	text-align: right;
}

.wc-tqd-tier.is-reached,
.wc-tqd-tier.is-active,
.wc-tqd-tier.is-next {
	border-color: rgba(198, 161, 91, 0.6);
}

.wc-tqd-tier.is-reached .wc-tqd-tier__state {
	color: var(--wc-tqd-brass-ink);
}

.wc-tqd-tier.is-reached .wc-tqd-tier__badge {
	background: #fff8ec;
}

.wc-tqd-tier.is-next {
	border-style: dashed;
	background: rgba(255, 255, 255, 0.88);
}

.wc-tqd-tier.is-next .wc-tqd-tier__state {
	color: var(--wc-tqd-brass-ink);
}

.wc-tqd-tier.is-best-value .wc-tqd-tier__discount::after {
	content: 'BEST';
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	padding: 2px 6px;
	border-radius: 999px;
	background: rgba(198, 161, 91, 0.16);
	color: var(--wc-tqd-brass-ink);
	font-size: 10px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.wc-tqd-tier.is-active {
	background: linear-gradient(135deg, rgba(198, 161, 91, 0.18) 0%, rgba(245, 241, 232, 0.92) 72%);
	box-shadow: 0 16px 28px rgba(31, 42, 68, 0.12);
	transform: translateY(-1px) scale(1.012);
}

.wc-tqd-tier.is-active .wc-tqd-tier__badge {
	background: var(--wc-tqd-brass);
	color: #fff;
	box-shadow: 0 12px 24px rgba(198, 161, 91, 0.26);
}

.wc-tqd-tier.is-active .wc-tqd-tier__discount,
.wc-tqd-tier.is-active .wc-tqd-tier__state {
	color: var(--wc-tqd-navy);
}

.wc-tqd-tier.is-active .wc-tqd-tier__pulse {
	animation: wc-tqd-pulse 1.15s ease-out 1;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0) 68%);
}

.wc-tqd-tier.is-locked {
	opacity: 0.9;
}

.wc-tqd-preview {
	position: relative;
	display: grid;
	gap: 9px;
	padding: 13px 14px 12px;
	border-radius: 14px;
	background: linear-gradient(160deg, var(--wc-tqd-navy) 0%, #24304f 100%);
	color: #fff;
	box-shadow: 0 16px 28px rgba(31, 42, 68, 0.18);
}

.wc-tqd-preview::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.16) 32%, rgba(255, 255, 255, 0) 56%);
	transform: translateX(-130%);
	pointer-events: none;
}

.wc-tqd-preview.is-animated::after {
	animation: wc-tqd-shine 560ms ease-out 1;
}

.wc-tqd-preview__eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: rgba(255, 255, 255, 0.72);
}

.wc-tqd-preview__hero-label {
	margin: 0 !important;
	font-size: 13px;
	line-height: 1;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.78);
}

.wc-tqd-preview__hero {
	display: grid;
	gap: 4px;
}

.wc-tqd-preview__amount {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-size: clamp(28px, 3.2vw, 34px);
	line-height: 1;
	font-weight: 800;
	color: #fff;
}

.wc-tqd-preview__amount.is-flash {
	animation: wc-tqd-flash 220ms ease-out 1;
}

.wc-tqd-preview__meta {
	font-size: 12px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.78);
}

.wc-tqd-preview__stats {
	display: grid;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.wc-tqd-preview__stats li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.78);
}

.wc-tqd-preview__stats strong {
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-align: right;
}

.wc-tqd-preview__tier,
.wc-tqd-preview__next {
	margin: 0 !important;
	padding: 7px 11px;
	border-radius: 10px;
	font-size: 12px;
	line-height: 1.45;
}

.wc-tqd-preview__tier {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-weight: 600;
}

.wc-tqd-preview__next {
	background: rgba(198, 161, 91, 0.18);
	border: 1px solid rgba(198, 161, 91, 0.35);
	color: #f9edd3;
}

.wc-tqd-note {
	margin: 8px 0 0 !important;
	font-size: 12px;
	line-height: 1.45;
	color: #56645b;
}

.wc-tqd-experience[data-product-type="variable"] .wc-tqd-preview--awaiting,
.wc-tqd-preview.is-awaiting {
	background: linear-gradient(160deg, #3b445a 0%, #4a556d 100%);
}

@keyframes wc-tqd-pulse {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(1.28);
	}
}

@keyframes wc-tqd-shine {
	from {
		transform: translateX(-130%);
	}
	to {
		transform: translateX(130%);
	}
}

@keyframes wc-tqd-flash {
	0% {
		transform: scale(0.985);
		color: #fef5db;
	}
	100% {
		transform: scale(1);
		color: #fff;
	}
}

@media (max-width: 1024px) {
	.wc-tqd-experience[data-tier-count="4"] .wc-tqd-stage,
	.wc-tqd-experience[data-tier-count="5"] .wc-tqd-stage {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.wc-tqd-stage {
		grid-template-columns: 1fr;
	}

	.wc-tqd-preview__amount {
		font-size: 32px;
	}
}

@media (max-width: 520px) {
	.wc-tqd-experience {
		padding: 16px 14px 15px;
		border-radius: 12px;
	}

	.wc-tqd-tier {
		grid-template-columns: 48px 1fr;
		gap: 10px;
	}

	.wc-tqd-tier__state {
		grid-column: 2;
		text-align: left;
	}

	.wc-tqd-tier__connector {
		left: 31px;
	}

	.wc-tqd-preview {
		padding: 14px 14px 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wc-tqd-tier,
	.wc-tqd-preview,
	.wc-tqd-preview__amount,
	.wc-tqd-tier__pulse,
	.wc-tqd-preview::after {
		transition: none !important;
		animation: none !important;
	}
}