/* Story Core — Cart → Checkout → Done progress rail, shared by checkout.css and milano-checkout.css (both set the --co-* palette).
   A card that matches the free-delivery meter below it: the steps rise in one after another, the line into the current step fills on arrival (is-new), a light runs
   along the line ahead (is-ahead), the current step wears a turning ring with a slow pulse, done steps draw their tick.
   Moving cart ↔ checkout ↔ thank-you morphs the rail across pages (cross-document view transitions, where the browser supports them). */
@view-transition{navigation:auto}
.bdcs-costeps{--st-n:calc(40px*var(--sb-fs,1));--st-ease:cubic-bezier(.22,1,.36,1);--st-acc:var(--co-copper);
	position:relative;display:flex;align-items:center;gap:calc(10px*var(--sb-sp,1));margin:0;padding:calc(12px*var(--sb-sp,1)) calc(16px*var(--sb-sp,1));list-style:none;
	border:1px solid var(--co-line);border-radius:var(--co-r,var(--m-r,var(--sb-radius,14px)));
	background:color-mix(in srgb,var(--co-ink) 3%,var(--co-card));
	view-transition-name:bdcs-steps;animation:bdcs-st-rail .7s var(--st-ease) both}
.bdcs-costeps>li{margin:0;padding:0}

/* a step */
.bdcs-costeps-i{flex:0 0 auto;display:flex;align-items:center;gap:calc(10px*var(--sb-sp,1));color:var(--co-taupe-ink);font-size:calc(14px*var(--sb-fs,1));font-weight:500;white-space:nowrap;
	animation:bdcs-st-in .65s var(--st-ease) both;animation-delay:calc(var(--st-i,0)*90ms + 80ms)}
.bdcs-costeps>li:nth-child(2){--st-i:1}.bdcs-costeps>li:nth-child(3){--st-i:2}.bdcs-costeps>li:nth-child(4){--st-i:3}.bdcs-costeps>li:nth-child(5){--st-i:4}
.bdcs-costeps-i a{display:flex;align-items:center;gap:inherit;color:inherit;text-decoration:none;border-radius:var(--sb-pill,999px);transition:transform .35s var(--st-ease)}
.bdcs-costeps-i a:hover{transform:translateY(-2px)}
.bdcs-costeps-i a:hover .bdcs-costeps-n{box-shadow:0 8px 18px -8px color-mix(in srgb,var(--st-acc) 80%,transparent)}
.bdcs-costeps-i a:hover .bdcs-costeps-l{color:var(--co-ink)}
.bdcs-costeps-i a:focus-visible{outline:2px solid var(--st-acc);outline-offset:4px}

/* the number disc */
.bdcs-costeps-n{position:relative;flex:none;width:var(--st-n);height:var(--st-n);border-radius:50%;display:grid;place-items:center;
	background:var(--co-card);color:var(--co-taupe-ink);border:1.5px dashed color-mix(in srgb,var(--co-taupe-ink) 50%,transparent);
	font-size:calc(14px*var(--sb-fs,1));font-variant-numeric:lining-nums proportional-nums;
	transition:background .4s var(--st-ease),color .4s var(--st-ease),border-color .4s var(--st-ease),box-shadow .4s var(--st-ease)}
.bdcs-costeps-n b{font-weight:600;line-height:1}
.bdcs-costeps-l{transition:color .3s}
.bdcs-costeps-tick{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bdcs-costeps-tick path{stroke-dasharray:24;stroke-dashoffset:24;animation:bdcs-st-draw .55s var(--st-ease) forwards;animation-delay:calc(var(--st-i,0)*90ms + 380ms)}

/* done: filled accent with a drawn tick */
.bdcs-costeps-i.is-done .bdcs-costeps-n{background:var(--st-acc);border:1.5px solid var(--st-acc);color:var(--sb-on-copper,#fff)}
.bdcs-costeps-i.is-done .bdcs-costeps-l{color:var(--co-ink-2)}

/* now: ink disc, a turning ring and a slow pulse */
.bdcs-costeps-i.is-now{color:var(--co-ink);font-weight:600}
.bdcs-costeps-i.is-now .bdcs-costeps-n{background:var(--co-ink);border:1.5px solid var(--co-ink);color:var(--co-card);
	box-shadow:0 8px 20px -8px color-mix(in srgb,var(--co-ink) 70%,transparent);animation:bdcs-st-pop .7s var(--st-ease) both;animation-delay:calc(var(--st-i,0)*90ms + 160ms)}
.bdcs-costeps-i.is-now .bdcs-costeps-n::before{content:"";position:absolute;inset:calc(-6px*var(--sb-fs,1));border-radius:50%;
	background:conic-gradient(from 0deg,var(--st-acc),color-mix(in srgb,var(--st-acc) 0%,transparent) 55%,var(--st-acc));
	-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
	animation:bdcs-st-spin 2.8s linear infinite}
.bdcs-costeps-i.is-now .bdcs-costeps-n::after{content:"";position:absolute;inset:0;border-radius:50%;animation:bdcs-st-pulse 2.8s ease-out 1s infinite}
.bdcs-costeps-i.is-now .bdcs-costeps-l{background:linear-gradient(90deg,var(--co-ink),var(--co-ink) 40%,var(--st-acc) 50%,var(--co-ink) 60%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
	animation:bdcs-st-sheen 1.6s var(--st-ease) .7s both}

/* last stop (thank-you): the current disc is a tick, with a burst instead of the endless pulse */
.bdcs-costeps.is-final .bdcs-costeps-i.is-now .bdcs-costeps-n{background:var(--st-acc);border-color:var(--st-acc);color:var(--sb-on-copper,#fff)}
.bdcs-costeps.is-final .bdcs-costeps-i.is-now .bdcs-costeps-n::before{animation:bdcs-st-spin 2.8s linear 0s 1,bdcs-st-fade .6s ease 2.4s forwards}
.bdcs-costeps.is-final .bdcs-costeps-i.is-now .bdcs-costeps-n::after{animation:bdcs-st-burst 1s ease-out .9s 3}

/* the lines between steps */
.bdcs-costeps-line{position:relative;flex:1 1 auto;min-width:calc(18px*var(--sb-sp,1));height:3px;border-radius:var(--sb-pill,999px);overflow:hidden;
	background:color-mix(in srgb,var(--co-line) 80%,transparent);animation:bdcs-st-fadein .5s ease both;animation-delay:calc(var(--st-i,0)*90ms)}
.bdcs-costeps-line i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--st-acc),color-mix(in srgb,var(--st-acc) 65%,var(--co-ink)));transform:scaleX(0);transform-origin:left center}
.bdcs-costeps-line.is-on i{transform:scaleX(1)}
.bdcs-costeps-line.is-new i{animation:bdcs-st-fill 1s cubic-bezier(.65,0,.35,1) .35s both}
.bdcs-costeps-line.is-ahead::before{content:"";position:absolute;inset:0;
	background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--st-acc) 55%,transparent),transparent) no-repeat;background-size:38% 100%;
	animation:bdcs-st-hint 2.6s cubic-bezier(.45,0,.55,1) 1.2s infinite both}
[dir=rtl] .bdcs-costeps-line i{transform-origin:right center}
[dir=rtl] .bdcs-costeps-line.is-ahead::before{transform:scaleX(-1)}

/* phones: only the current step keeps its label */
.bdcs-costeps-i:not(.is-now) .bdcs-costeps-l{display:none}
@media(min-width:600px){.bdcs-costeps-i:not(.is-now) .bdcs-costeps-l{display:inline}.bdcs-costeps{gap:calc(14px*var(--sb-sp,1));padding:calc(14px*var(--sb-sp,1)) calc(22px*var(--sb-sp,1))}}

@keyframes bdcs-st-rail{from{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes bdcs-st-in{from{opacity:0;transform:translateY(10px)}}
@keyframes bdcs-st-fadein{from{opacity:0}}
@keyframes bdcs-st-pop{0%{transform:scale(.55);opacity:0}60%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}
@keyframes bdcs-st-draw{to{stroke-dashoffset:0}}
@keyframes bdcs-st-spin{to{transform:rotate(1turn)}}
@keyframes bdcs-st-fade{to{opacity:0}}
@keyframes bdcs-st-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-acc) 40%,transparent)}70%,100%{box-shadow:0 0 0 calc(12px*var(--sb-fs,1)) color-mix(in srgb,var(--st-acc) 0%,transparent)}}
@keyframes bdcs-st-burst{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--st-acc) 55%,transparent)}100%{box-shadow:0 0 0 calc(18px*var(--sb-fs,1)) color-mix(in srgb,var(--st-acc) 0%,transparent)}}
@keyframes bdcs-st-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bdcs-st-hint{0%{background-position:-60% 0}100%{background-position:160% 0}}
@keyframes bdcs-st-sheen{from{background-position:100% 0}to{background-position:0 0}}

/* page-to-page morph of the rail; the rest of the page cross-fades quickly */
::view-transition-group(bdcs-steps){animation-duration:.55s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}

@media(prefers-reduced-motion:reduce){
	@view-transition{navigation:none}
	.bdcs-costeps,.bdcs-costeps *,.bdcs-costeps *::before,.bdcs-costeps *::after{animation:none!important;transition:none!important}
	.bdcs-costeps-tick path{stroke-dashoffset:0}
	.bdcs-costeps-i.is-now .bdcs-costeps-l{-webkit-text-fill-color:currentColor;background:none}
}