.pd-progress-wrapper {
	margin: 0 0 1.5em;
	padding: 22px 26px 26px;
	border-radius: 16px;
	background: #ffffff;
}

/* Static "1" replacing the normal editable quantity input on a gift line —
   centered to roughly match the width/alignment of a real quantity input,
   so the row doesn't look broken next to the others. */
.pd-gift-quantity {
	display: inline-block;
	min-width: 2em;
	text-align: center;
}

.pd-progress-message {
	margin: 0 0 1.2em;
	font-size: 0.95em;
	text-align: center;
	font-weight: 500;
}

.pd-progress-bar {
	position: relative;
	height: 8px;
	border-radius: 999px;
	background: #e6ebf2;
	overflow: hidden;
}

.pd-progress-bar__fill {
	position: relative;
	height: 100%;
	background: var( --pd-accent-color, #2f62a8 );
	border-radius: 999px;
	overflow: hidden;
	/* No CSS transition here on purpose — frontend-progress.js owns the
	 * grow/shrink animation exclusively (via jQuery .animate()), since a
	 * CSS transition running concurrently on the same "width" property was
	 * a real race hazard (confirmed): the two animation systems could each
	 * think they were the one driving the value, and jQuery's .animate()
	 * additionally needs manual replay after AJAX fragment refresh replaces
	 * the whole element (a CSS transition can't animate across that anyway,
	 * since the new element has no prior state to transition from). */
}

.pd-progress-bar__fill--complete {
	background: var( --pd-accent-color-complete, #2f62a8 );
}

/* Shimmer sweep across the filled portion only — a subtle "keep going" cue,
   not a generic loading indicator. Stops once the max reward is reached
   (see the --complete override below), since there's nothing left to nudge
   the customer toward. */
.pd-progress-bar__fill::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 60%;
	background: linear-gradient( 90deg, transparent, rgba( 255, 255, 255, 0.45 ), transparent );
	animation: pd-progress-shimmer 2.2s ease-in-out infinite;
}

.pd-progress-bar__fill--complete::after {
	content: none;
}

@keyframes pd-progress-shimmer {
	0% {
		transform: translateX( -100% );
	}

	100% {
		transform: translateX( 250% );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.pd-progress-bar__fill::after {
		animation: none;
	}
}

/* Icon + caption per reward-type step, positioned below the bar at each
   step's threshold percentage — replaces plain dot markers so a customer
   can tell shipping/discount/gift steps apart at a glance. */
.pd-progress-bar__markers {
	position: relative;
	height: 46px;
	top: -18px;
	line-height: 1;
}

.pd-progress-bar__marker-item {
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 88px;
	transform: translateX( -50% );
	text-align: center;
}

/* Clamp the first/last markers so their labels don't overflow past the
   card's edges — every other marker stays centered on its own threshold. */
.pd-progress-bar__marker-item:first-child {
	/* transform: translateX( -14px ); */
}

.pd-progress-bar__marker-item:last-child {
	transform: translateX( calc( -100% + 14px ) );
}

.pd-progress-bar__marker-icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-bottom: 4px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #dce3ec;
	color: #afbbca;
	box-sizing: border-box;
	/* White "cutout" ring so the marker reads cleanly against the track
	   behind it, regardless of exactly where along the rail it sits. */
	box-shadow: 0 0 0 4px #fff;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Achieved markers match whatever color the fill line itself currently is —
   the normal accent color while still filling up, switching to the
   "complete" color only once the bar itself has switched (100% reached). */
.pd-progress-bar__marker-item.is-achieved .pd-progress-bar__marker-icon {
	background: var( --pd-accent-color, #2f62a8 );
	border-color: var( --pd-accent-color, #2f62a8 );
	color: #fff;
}

.pd-progress-bar__markers--complete .pd-progress-bar__marker-item.is-achieved .pd-progress-bar__marker-icon {
	background: var( --pd-accent-color-complete, #2f62a8 );
	border-color: var( --pd-accent-color-complete, #2f62a8 );
}

/* The single step the customer is currently working toward — outlined
   rather than filled, so it visibly reads as "not yet earned" while still
   standing out from the plain grey later steps. */
.pd-progress-bar__marker-item.is-next .pd-progress-bar__marker-icon {
	border-color: var( --pd-accent-color, #2f62a8 );
	color: var( --pd-accent-color, #2f62a8 );
}

.pd-progress-bar__marker-halo {
	position: absolute;
	inset: -2px;
	border-radius: 999px;
	border: 2px solid var( --pd-accent-color, #2f62a8 );
	animation: pd-progress-halo-pulse 2s ease-out infinite;
	pointer-events: none;
}

@keyframes pd-progress-halo-pulse {
	0%,
	100% {
		transform: scale( 1 );
		opacity: 0.55;
	}

	50% {
		transform: scale( 1.5 );
		opacity: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.pd-progress-bar__marker-halo {
		animation: none;
	}
}

.pd-progress-bar__marker-label {
	font-size: 0.7em;
	line-height: 1;
	color: #777;
	max-width: 60px;
}
.pd-progress-bar__marker-item:last-child{
	padding-right: 10px;
}

.pd-progress-bar__marker-item.is-achieved .pd-progress-bar__marker-label {
	color: var( --pd-accent-color, #2f62a8 );
	font-weight: 600;
	line-height: 1 !important;
}

.pd-progress-bar__markers--complete .pd-progress-bar__marker-item.is-achieved .pd-progress-bar__marker-label {
	color: var( --pd-accent-color-complete, #2f62a8 );
}

.pd-progress-bar__marker-item.is-next .pd-progress-bar__marker-label {
	color: #1c2430;
	font-weight: 600;
	line-height: 1 !important;
}

/* "Segmented" layout — one grid column per step, each with its own fill and
   caption, as an alternative to the single continuous bar above. Kept as a
   fully separate class namespace (pd-progress-segmented*) so it can never
   collide with or accidentally inherit from the classic layout's rules. */
.pd-progress-segmented__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.pd-progress-wrapper .pd-progress-segmented__title {
	margin: 0;
	font-size: 1.15em;
	font-weight: 700;
	text-align: left;
}
#sc-drawer-root .pd-progress-segmented__title {
	font-size: 0.8em;
}

.pd-progress-segmented__pill {
	flex: 0 0 auto;
	padding: 6px 14px;
	border-radius: 999px;
	background: #e9f5ee;
	color: #1a7f4e;
	font-size: 0.8em;
	font-weight: 600;
	white-space: nowrap;
}
#sc-drawer-root .pd-progress-segmented__pill {
	padding: 4px 10px;
	font-size: 0.75em;
}

.pd-progress-segmented__subtitle {
	margin: 4px 0 1.2em;
	font-size: 0.85em;
	color: #8794a4;
	text-align: left;
}
#sc-drawer-root .pd-progress-segmented__subtitle {
	font-size: 0.7em;
}

/* auto-fit + minmax lets the grid size itself to however many columns
   actually fit — full-width on the Cart page, fewer per row (wrapping
   automatically) inside Side Cart's narrower drawer — without any
   viewport-width media query, which wouldn't reflect the drawer's own
   width anyway (it's a fixed-position panel, not full-viewport). */
.pd-progress-segmented__track {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 70px, 1fr ) );
	gap: 16px 12px;
}
#sc-drawer-root .pd-progress-segmented__track {
	gap: 12px 5px;
}

.pd-progress-segmented__bar {
	height: 8px;
	border-radius: 999px;
	background: #e6ebf2;
}

.pd-progress-segmented__segment.is-achieved .pd-progress-segmented__bar {
	background: var( --pd-accent-color, #2f62a8 );
}

.pd-progress-segmented__caption {
	display: flex;
	flex-direction: column;
	margin-top: 8px;
	text-align: center;
    line-height: normal;
    font-size: 15px;
}
#sc-drawer-root .pd-progress-segmented__caption {
	font-size: 14px;
}

.pd-progress-segmented__caption-label {
	font-size: 1em;
	font-weight: 700;
	color: #afbbca;
	margin-bottom: 5px;
}
#sc-drawer-root .pd-progress-segmented__caption-label {
	font-size: 0.75em;
}

.pd-progress-segmented__caption-amount {
	font-size: 0.9em;
	color: #afbbca;
}
#sc-drawer-root .pd-progress-segmented__caption-amount {
	font-size: 0.85em;
}

.pd-progress-segmented__segment.is-achieved .pd-progress-segmented__caption-label {
	color: var( --pd-accent-color, #2f62a8 );
}

.pd-progress-segmented__segment.is-achieved .pd-progress-segmented__caption-amount {
	color: #1c2430;
}

.pd-progress-segmented__segment.is-next .pd-progress-segmented__caption-label {
	color: #1c2430;
}