:root{--steps-number: 3;--step-separator-line-stroke: 3px;--step-separator-line-gap: 3px;--step-circle-size: 48px;--step-circle-font-size: 22px}.steps{background-color:#ffffff80;padding:var(--space-md) var(--space-xs);border-radius:var(--radius-md)}.steps__list{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:calc(var(--space-xs) * -1)}.step{display:inline-block;display:inline-flex;align-items:center;margin-bottom:var(--space-xs)}.step__label{color:inherit;text-decoration:none}.step--completed .step__label,.step--current .step__label{color:var(--color-primary)}.step--completed .step__label{text-decoration:underline}.step__separator{margin:0 var(--space-xs);display:inline-block;vertical-align:middle}.step__separator .icon{display:block}.step__circle{display:none}@media(min-width:8rem){.steps{background-color:transparent;padding:calc(var(--step-circle-size)/2) 0 0;border-radius:0}.steps__list{margin-bottom:initial;align-items:flex-start}@supports (grid-area: auto){.steps__list{display:grid;align-items:start;grid-template-columns:repeat(var(--steps-number),1fr)}}.step{float:left;width:calc(100% / var(--steps-number));justify-content:center;text-align:center;position:relative;margin-bottom:initial;padding:0 var(--space-xs)}@supports (grid-area: auto){.step{width:auto}}.step__label{display:inline-block;margin-top:calc(var(--space-xxs) + var(--step-circle-size)/2)}.step__separator{position:absolute;top:calc(var(--step-separator-line-stroke) * -1/2);left:calc(50% + var(--step-circle-size)/2 + var(--step-separator-line-gap));height:var(--step-separator-line-stroke);width:calc(100% - var(--step-circle-size) - var(--step-separator-line-gap)*2);margin:0;background-color:var(--color-contrast-lower);color:transparent;text-indent:100%;white-space:nowrap;overflow:hidden}.step--completed .step__separator{background-color:var(--color-primary)}.step__circle{display:inline-block;line-height:var(--step-circle-size);display:flex;justify-content:center;align-items:center;background-color:var(--color-contrast-lower);width:var(--step-circle-size);height:var(--step-circle-size);border-radius:50%;position:absolute;left:calc(50% - var(--step-circle-size)/2);top:calc(var(--step-circle-size) * -1/2);font-size:var(--step-circle-font-size)}.step__circle .icon{width:var(--step-circle-font-size);height:var(--step-circle-font-size)}.step--completed .step__circle,.step--current .step__circle{background-color:var(--color-primary);color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}.step--completed .step__label:after,.step--current .step__label:after{position:absolute;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%)}.step--completed .step__label:after{content:"step completed"}.step--current .step__label:after{content:"step current"}
/*# sourceMappingURL=/cdn/shop/t/10/assets/ce-natalis-hero.css.map */