/* ==========================================================================
   Blessing Your Scalp — checkout progress steps
   --------------------------------------------------------------------------
   One definition of the bag → checkout → confirmation indicator, shared by all
   three pages.

   It previously lived in cart.css, which the shop layout loads on every page,
   so checkout and confirmation were silently styled by the cart's stylesheet.
   That worked, but it hid the dependency: each page that redefined part of the
   component fought the cart for it, and the three screens drifted apart.

   Tokens are declared with fallbacks so the file stands on its own, while a
   page root that sets its own (.bys-cart-page, .bys-checkout, .bys-confirm)
   still wins through normal inheritance.
   ========================================================================== */

.bys-steps {
    display: flex;
    align-items: center;
    gap: 0;
    /* A horizontal scroller rather than a wrap: three steps stacking onto two
       lines on a phone reads as two separate groups. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bys-steps::-webkit-scrollbar {
    display: none;
}

.bys-step {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 10px 20px;
    border-radius: 8px;
    color: var(--stone, #6f6a67);
    text-decoration: none;
    transition: background 0.18s;
}

/* Only the completed steps link anywhere; the rest are spans. */
a.bys-step:hover,
a.bys-step:focus-visible {
    background: var(--cream, #fbf4f0);
}

.bys-step.is-active { color: var(--charcoal, #35312f); }
.bys-step.is-done { color: var(--stone, #6f6a67); }

.bys-step__num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1.5px solid var(--divider, #e3e3e3);
    border-radius: 50%;
    background: var(--white, #ffffff);
    color: var(--stone, #6f6a67);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.bys-step.is-active .bys-step__num {
    border-color: var(--charcoal, #35312f);
    background: var(--charcoal, #35312f);
    color: #fff;
}

/* Completed steps go green — the state is also carried by the numeral and the
   step's position, so colour is never the only signal. */
.bys-step.is-done .bys-step__num {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.bys-step__text {
    display: flex;
    flex-direction: column;
}

.bys-step__label {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
}

.bys-step__sub {
    font-size: 0.72rem;
    font-weight: 400;
    opacity: 0.7;
}

.bys-step-arrow {
    flex-shrink: 0;
    margin: 0 4px;
    color: var(--divider, #e3e3e3);
}

/* Tighter on a phone so more of the sequence is visible before scrolling. */
@media (max-width: 575px) {
    .bys-step { padding: 10px 12px; }
    .bys-step-arrow { margin: 0; }
}

.bys-step:focus-visible {
    outline: 2px solid var(--rose, #be6d76);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .bys-step,
    .bys-step__num {
        transition-duration: 0.01ms !important;
    }
}